@pasquelin/panels 0.2.0 → 0.3.0

package/CHANGELOG.md

@@ -5,6 +5,33 @@ 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.0] — 2026-09-01
+
+### Added
+
+- **`fillActions` on `<Panel>`.** Whether a panel's actions take the header's free width or hug
+  the close button. The chassis guessed it from "publishes actions and sits in a horizontal
+  zone", which is right for a montage bar and wrong for a band holding a list with two buttons —
+  and only the project knows which of its panels is which. Left out, the guess stands.
+
+### Fixed
+
+- **`reset()` no longer settles against an empty registry.** Called before any panel is declared
+  it settled the view EMPTY — and an entry is what stops anything reopening it, so every half
+  stayed shut for good.
+- **`<Panel>` fields reach the registry by spread**, not one by one. `fillActions` was the second
+  field in two releases to be added to the type and forgotten in the collector.
+
+### Tests
+
+- The frame's GEOMETRY is covered here at last: a zone drawing nothing takes neither room nor
+  handle, a column keeps its divider only between two open halves, an untouched half is flexed
+  rather than sized, the band runs under the opposite column and parts its own two halves.
+  🛑 These were IA Studio's, and it let them go on migrating — on the assumption that this
+  library covered them. It did not.
+- `PanelHeader` keeps what is trailing outside the box that clips: a crowded row loses its
+  actions, never its way out.
+
 ## [0.2.0] — 2026-09-01
 
 Two changes to the same idea: **what a half shows is resolved when it is drawn, not written down
@@ -148,6 +175,7 @@ First release.
 - Optional `@pasquelin/panels/dockview` entry point for document tabs.
 - No runtime dependencies.
 
+[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
 [0.1.0]: https://github.com/pasquelin/panels/releases/tag/v0.1.0

package/dist/core/types.d.ts

@@ -68,6 +68,15 @@ export type PanelSpec<Id extends string = string> = {
     opens?: number;
     /** Takes the zone WHOLE: shown, the other half draws nothing. `primary` only. */
     solo?: boolean;
+    /**
+     * Lets the actions take the header's free width rather than hug the close button — for a
+     * panel whose row is wide and mostly empty, and which carries a whole bar there.
+     *
+     * Left out, the chassis gives that width to any panel in a horizontal zone that publishes
+     * actions. Which is a guess: a band holding a list with two buttons wants them at the end,
+     * and only the project knows which of its panels is which.
+     */
+    fillActions?: boolean;
 };
 /**
  * Which panel each half of each zone currently shows. Three states, not two: the key absent is

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),d=require("react"),x=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 B={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 P(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=P(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 A(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&&P(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=P(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=P(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=>A(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=>A(i,l),l=>D(l,I(i,l).primary))})),reset:()=>s(r=>({views:{[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 j(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(j(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 j(e.open)?{[n]:me(e.open)}:void 0;if(e.version!==le||!j(e.views))return;const t=Object.create(null);for(const[s,c]of Object.entries(e.views))j(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(!j(c)||!j(c.lengths))return;const r=tn(c,t);if(!r)return;const o=c.lengths;if(!j(o.sizes)||!j(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 b(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:x.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=b(s=>s.registry),n=b(s=>s.view),t=b(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(()=>A(n,e),[n,e])}function Fe(){return{left:ne(B.left.band),right:ne(B.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]),y=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]),v=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:y,onPointerUp:f.cancel,onPointerCancel:f.cancel,onLostPointerCapture:f.cancel,onKeyDown:v,className:x.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 Be(e){const n=ee(e),t=ee(N[e]),s=Te(N[e]),c=b(a=>a.lengths.sizes[z(e)]),r=b(a=>a.lengths.sizes[z(N[e])]),o=b(a=>a.lengths.splits[e]),i=b(a=>C(e)?a.available.height:a.available.width),l=b(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 Ae(e){const n=b(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:x.cx("pnl-header",c),children:[u.jsx("span",{className:x.cx("pnl-header__title",t&&"pnl-header__title--fixed"),children:e}),u.jsx("span",{className:x.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:x.cx("pnl-separator",`pnl-separator--${e}`,n)})}function ue({children:e,className:n,...t}){return u.jsx("section",{className:x.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: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:x.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=Be(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,y=u.jsxs("div",{ref:o,className:x.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})]}),v=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:[y,v]}):u.jsxs(u.Fragment,{children:[v,y]})}const S=d.memo(ln);function Ye({left:e,right:n,labels:t}){const s=b(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:x.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}=B[e];return u.jsxs("div",{role:"toolbar","aria-orientation":"vertical",className:x.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=Ae(e),t=ze(e),s=b(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,{id:i,zone:l,slot:a="primary",title:f,icon:h,opens:p,solo:g,actions:y,children:v}=o;n.push({id:i,zone:l,slot:a,title:f,icon:h,opens:p,solo:g}),t.set(i,{content:v,actions:y})}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:y}=d.useMemo(()=>an(i),[i]),v=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:x.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:v}),u.jsxs("div",{className:"pnl-row",children:[!m.left&&u.jsx(S,{zone:"left",labels:v}),u.jsxs("div",{className:"pnl-stack",children:[u.jsxs("div",{className:"pnl-row",children:[m.left&&u.jsx(S,{zone:"left",labels:v}),u.jsx(ue,{className:"pnl-centre",children:g?.props.children}),m.right&&u.jsx(S,{zone:"right",labels:v})]}),u.jsx(Ye,{left:m.left,right:m.right,labels:v})]}),!m.right&&u.jsx(S,{zone:"right",labels:v})]})]}),u.jsx(se,{side:"right"})]}),n,y]})})})}de.Panel=$;de.Center=W;function dn(){const e=Z(),n=L(),t=b(o=>o.focusedZone),s=O(),c=d.useCallback(o=>{const i=P(n.registry,o);return i!==void 0&&M(n,i.zone)[i.slot]===o},[n]),r=d.useCallback(o=>{const i=P(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=x.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=B;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=P;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=b;exports.usePanelsStore=Z;exports.usePointerDrag=ke;exports.useShownIn=ze;exports.useShownSpecsIn=ee;exports.useZone=Be;exports.useZoneDraws=ne;exports.useZonePanels=Ae;exports.useZoneTakesRoom=Te;exports.writeLayout=Ce;exports.zoneDraws=F;exports.zoneTakesRoom=A;
+"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;

package/dist/index.js

@@ -1,13 +1,13 @@
-import { jsx as u, jsxs as m, Fragment as B } from "react/jsx-runtime";
-import F, { useEffect as nn, useLayoutEffect as kn, useState as W, useMemo as y, useContext as tn, createContext as en, useRef as H, useCallback as I, memo as Sn, Fragment as Dn, Children as jn, isValidElement as Hn } from "react";
-import { c as w } from "./cx-CcykAxZN.js";
+import { jsx as u, jsxs as g, Fragment as A } from "react/jsx-runtime";
+import F, { useEffect as nn, useLayoutEffect as kn, useState as W, useMemo as w, useContext as tn, createContext as en, useRef as H, useCallback as _, memo as Sn, Fragment as Dn, Children as jn, isValidElement as Hn } from "react";
+import { c as b } from "./cx-CcykAxZN.js";
 const an = (n) => {
   let t;
   const e = /* @__PURE__ */ new Set(), o = (a, d) => {
     const f = typeof a == "function" ? a(t) : a;
     if (!Object.is(f, t)) {
       const h = t;
-      t = d ?? (typeof f != "object" || f === null) ? f : Object.assign({}, t, f), e.forEach((g) => g(t, h));
+      t = d ?? (typeof f != "object" || f === null) ? f : Object.assign({}, t, f), e.forEach((m) => m(t, h));
     }
   }, c = () => t, i = { setState: o, getState: c, getInitialState: () => l, subscribe: (a) => (e.add(a), () => e.delete(a)) }, l = t = n(o, c, i);
   return i;
@@ -34,7 +34,7 @@ const G = {
 function un(n) {
   return n === "left" || n === "top";
 }
-const A = 140, Pn = 240, Z = 100, Wn = {
+const B = 140, Pn = 240, Z = 100, Wn = {
   left: 320,
   right: 260,
   top: 180,
@@ -56,8 +56,8 @@ function In(n, t, e) {
   return Math.min(Math.max(n, t), e);
 }
 function xn(n, t, e) {
-  const o = Math.max(A, Math.round(t - e - Pn));
-  return In(Math.round(n), A, o);
+  const o = Math.max(B, Math.round(t - e - Pn));
+  return In(Math.round(n), B, o);
 }
 function D(n, t) {
   const e = Math.max(Z, Math.round(t - Z));
@@ -83,7 +83,7 @@ function Gn(n, t, e, o, c) {
 function Jn(n, t, e) {
   const o = e - Pn, c = n + t;
   if (c <= o) return [n, t];
-  const s = (a) => a === 0 ? 0 : A, r = s(n) + s(t);
+  const s = (a) => a === 0 ? 0 : B, r = s(n) + s(t);
   if (o <= r)
     return [Math.min(n, s(n)), Math.min(t, s(t))];
   const i = o / c, l = Math.max(s(n), Math.round(n * i));
@@ -247,7 +247,11 @@ function qn(n = {}) {
       // The view in front is settled on the spot, not left for the next render: nothing
       // re-renders the provider when a button inside the chassis is what asked for the reset,
       // so the frame stayed blank — and the arrangement being escaped stayed on disk.
-      views: { [s.view]: $(s.registry, s.defaults) },
+      //
+      // 🛑 Unless nothing is declared yet, and then it is left UNSETTLED: settled against an
+      // empty registry it would be settled EMPTY, and having an entry is what stops anything
+      // reopening it. Every half would stay shut for good.
+      views: s.registry.length === 0 ? {} : { [s.view]: $(s.registry, s.defaults) },
       lengths: fn,
       focusedZone: null,
       // Left behind, a solo panel closed after a reset would give back the zone the reset
@@ -280,14 +284,14 @@ const Ct = () => {
     }
   }
 }), En = 2;
-function _(n) {
+function P(n) {
   return typeof n == "object" && n !== null && !Array.isArray(n);
 }
 function hn(n) {
   const t = {};
   for (const e of U) {
     const o = n[e];
-    if (_(o))
+    if (P(o))
       for (const c of Nn) {
         const s = o[c];
         s !== null && typeof s != "string" || (t[e] = { ...t[e], [c]: s });
@@ -305,11 +309,11 @@ function pn(n) {
 }
 function nt(n, t) {
   if (n.version === 1)
-    return _(n.open) ? { [t]: hn(n.open) } : void 0;
-  if (n.version !== En || !_(n.views)) return;
+    return P(n.open) ? { [t]: hn(n.open) } : void 0;
+  if (n.version !== En || !P(n.views)) return;
   const e = /* @__PURE__ */ Object.create(null);
   for (const [o, c] of Object.entries(n.views))
-    _(c) && (e[o] = hn(c));
+    P(c) && (e[o] = hn(c));
   return e;
 }
 function tt(n, t, e = on) {
@@ -321,11 +325,11 @@ function tt(n, t, e = on) {
   } catch {
     return;
   }
-  if (!_(c) || !_(c.lengths)) return;
+  if (!P(c) || !P(c.lengths)) return;
   const s = nt(c, e);
   if (!s) return;
   const r = c.lengths;
-  if (!_(r.sizes) || !_(r.splits)) return;
+  if (!P(r.sizes) || !P(r.splits)) return;
   const i = r.bandSplit;
   return {
     views: s,
@@ -375,13 +379,13 @@ function O() {
   if (!n) throw new Error("usePanelsStore must be used inside a <Panels> or <PanelsProvider>");
   return n;
 }
-function b(n) {
+function v(n) {
   const t = O();
   return Yn(t, n);
 }
 function R() {
   const n = O();
-  return y(() => {
+  return w(() => {
     const { show: t, close: e, toggle: o, focus: c, resize: s, resplit: r, resplitBand: i, fit: l, reset: a } = n.getState();
     return { show: t, close: e, toggle: o, focus: c, resize: s, resplit: r, resplitBand: i, fit: l, reset: a };
   }, [n]);
@@ -397,14 +401,14 @@ function rt({
   ref: i,
   ...l
 }) {
-  return /* @__PURE__ */ m(
+  return /* @__PURE__ */ g(
     "button",
     {
       type: "button",
       ref: i,
       "aria-label": t,
       "aria-pressed": c ? void 0 : e,
-      className: w(
+      className: b(
         "pnl-icon-button",
         e && "pnl-icon-button--active",
         o && "pnl-icon-button--accented",
@@ -440,37 +444,37 @@ function ct(n) {
   }, [n, t]);
 }
 function T() {
-  const n = b((o) => o.registry), t = b((o) => o.view), e = b((o) => o.views[o.view]);
-  return y(
+  const n = v((o) => o.registry), t = v((o) => o.view), e = v((o) => o.views[o.view]);
+  return w(
     () => ({ registry: n, view: t, views: e === void 0 ? {} : { [t]: e } }),
     [n, t, e]
   );
 }
 function lt(n) {
   const t = T();
-  return y(() => L(t, n), [t, n]);
+  return w(() => L(t, n), [t, n]);
 }
-function mn(n) {
+function gn(n) {
   const t = T();
-  return y(() => E(t, n), [t, n]);
+  return w(() => E(t, n), [t, n]);
 }
-function gn(n) {
+function mn(n) {
   const t = T();
-  return y(() => j(t, n), [t, n]);
+  return w(() => j(t, n), [t, n]);
 }
 function at(n) {
   const t = T();
-  return y(() => X(t, n), [t, n]);
+  return w(() => X(t, n), [t, n]);
 }
 function ut() {
   return {
-    left: gn(G.left.band),
-    right: gn(G.right.band)
+    left: mn(G.left.band),
+    right: mn(G.right.band)
   };
 }
 function dt() {
   const n = H(null);
-  return y(() => ({
+  return w(() => ({
     start: (e, o) => {
       e.currentTarget.setPointerCapture(e.pointerId), n.current = { ...o, pointerId: e.pointerId };
     },
@@ -492,10 +496,10 @@ function Q({
   step: l = 16,
   className: a
 }) {
-  const d = dt(), f = H(null), h = n === "vertical", g = I(
+  const d = dt(), f = H(null), h = n === "vertical", m = _(
     (p) => (h ? p?.clientHeight : p?.clientWidth) ?? 0,
     [h]
-  ), N = I(
+  ), I = _(
     (p) => {
       const S = d.matching(p);
       if (!S) return;
@@ -503,14 +507,14 @@ function Q({
       o(S.size + Y * (t ? -1 : 1), S.available);
     },
     [d, t, h, o]
-  ), v = I(
+  ), y = _(
     (p) => {
       const S = h ? "ArrowUp" : "ArrowLeft", V = h ? "ArrowDown" : "ArrowRight";
       if (p.key !== S && p.key !== V) return;
-      const Y = g(f.current?.parentElement), Bn = e ?? c?.() ?? 0, An = p.key === V ? 1 : -1;
-      p.preventDefault(), o(Bn + l * An * (t ? -1 : 1), Y);
+      const Y = m(f.current?.parentElement), An = e ?? c?.() ?? 0, Bn = p.key === V ? 1 : -1;
+      p.preventDefault(), o(An + l * Bn * (t ? -1 : 1), Y);
     },
-    [t, h, c, o, g, e, l]
+    [t, h, c, o, m, e, l]
   );
   return /* @__PURE__ */ u(
     "div",
@@ -527,15 +531,15 @@ function Q({
         d.start(p, {
           position: h ? p.clientY : p.clientX,
           size: e ?? c?.() ?? 0,
-          available: g(p.currentTarget.parentElement)
+          available: m(p.currentTarget.parentElement)
         });
       },
-      onPointerMove: N,
+      onPointerMove: I,
       onPointerUp: d.cancel,
       onPointerCancel: d.cancel,
       onLostPointerCapture: d.cancel,
-      onKeyDown: v,
-      className: w("pnl-handle", h ? "pnl-handle--row" : "pnl-handle--col", a)
+      onKeyDown: y,
+      className: b("pnl-handle", h ? "pnl-handle--row" : "pnl-handle--col", a)
     }
   );
 }
@@ -543,48 +547,48 @@ function vn(n, t, e, o) {
   return o ? t ?? K(e, n) : 0;
 }
 function ft(n) {
-  const t = mn(n), e = mn(x[n]), o = at(x[n]), c = b(
+  const t = gn(n), e = gn(x[n]), o = at(x[n]), c = v(
     (a) => a.lengths.sizes[k(n)]
-  ), s = b(
+  ), s = v(
     (a) => a.lengths.sizes[k(x[n])]
-  ), r = b((a) => a.lengths.splits[n]), i = b(
+  ), r = v((a) => a.lengths.splits[n]), i = v(
     (a) => M(n) ? a.available.height : a.available.width
-  ), l = b((a) => a.focusedZone === n);
-  return y(() => {
-    const { primary: a, secondary: d } = t, f = a !== void 0 || d !== void 0, h = vn(a, c, n, f), g = vn(e.primary, s, x[n], o);
+  ), l = v((a) => a.focusedZone === n);
+  return w(() => {
+    const { primary: a, secondary: d } = t, f = a !== void 0 || d !== void 0, h = vn(a, c, n, f), m = vn(e.primary, s, x[n], o);
     return {
       primary: a,
       secondary: d,
       draws: f,
       // Zero until the container has been measured: bounding against nothing would collapse
       // every zone to its floor on the very first paint.
-      size: i === 0 ? h : Jn(h, g, i)[0],
+      size: i === 0 ? h : Jn(h, m, i)[0],
       split: r,
       focused: l
     };
   }, [t, e, o, c, s, i, r, l, n]);
 }
 function ht(n) {
-  const t = b((e) => e.registry);
-  return y(() => [
+  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 Rn = en(/* @__PURE__ */ new Map()), pt = Rn.Provider;
-function mt(n) {
+function gt(n) {
   return tn(Rn).get(n);
 }
-function gt({
+function mt({
   title: n,
   children: t,
   fillActions: e,
   trailing: o,
   className: c
 }) {
-  return /* @__PURE__ */ m("header", { className: w("pnl-header", c), children: [
-    /* @__PURE__ */ u("span", { className: w("pnl-header__title", e && "pnl-header__title--fixed"), children: n }),
-    /* @__PURE__ */ u("span", { className: w("pnl-header__actions", e && "pnl-header__actions--fill"), children: t }),
+  return /* @__PURE__ */ g("header", { className: b("pnl-header", c), children: [
+    /* @__PURE__ */ u("span", { className: b("pnl-header__title", e && "pnl-header__title--fixed"), children: n }),
+    /* @__PURE__ */ u("span", { className: b("pnl-header__actions", e && "pnl-header__actions--fill"), children: t }),
     /* @__PURE__ */ u("span", { className: "pnl-header__trailing", children: o })
   ] });
 }
@@ -593,12 +597,12 @@ function sn({ orientation: n = "vertical", className: t }) {
     "span",
     {
       "aria-hidden": "true",
-      className: w("pnl-separator", `pnl-separator--${n}`, t)
+      className: b("pnl-separator", `pnl-separator--${n}`, t)
     }
   );
 }
 function Tn({ children: n, className: t, ...e }) {
-  return /* @__PURE__ */ u("section", { className: w("pnl-surface", t), ...e, children: n });
+  return /* @__PURE__ */ u("section", { className: b("pnl-surface", t), ...e, children: n });
 }
 function vt({
   panel: n,
@@ -606,11 +610,11 @@ function vt({
   closeLabel: e,
   onFocus: o
 }) {
-  const { close: c } = R(), { IconButton: s } = On(), r = mt(n.id);
+  const { close: c } = R(), { IconButton: s } = On(), r = gt(n.id);
   return (
     // The zone owns its length: a half given one keeps it, the other takes what is left. Both
     // sized here would make the pair overflow the zone the user dragged.
-    /* @__PURE__ */ m(
+    /* @__PURE__ */ g(
       Tn,
       {
         "aria-label": n.title,
@@ -619,11 +623,11 @@ function vt({
         style: t === void 0 ? void 0 : { flexBasis: t },
         children: [
           /* @__PURE__ */ u(
-            gt,
+            mt,
             {
               title: n.title,
-              fillActions: r?.actions !== void 0 && M(n.zone),
-              trailing: /* @__PURE__ */ m(B, { children: [
+              fillActions: n.fillActions ?? (r?.actions !== void 0 && M(n.zone)),
+              trailing: /* @__PURE__ */ g(A, { children: [
                 r?.actions !== void 0 && /* @__PURE__ */ u(sn, {}),
                 /* @__PURE__ */ u(
                   s,
@@ -639,7 +643,7 @@ function vt({
               children: r?.actions
             }
           ),
-          /* @__PURE__ */ u("div", { className: w("pnl-body"), children: r?.content })
+          /* @__PURE__ */ u("div", { className: b("pnl-body"), children: r?.content })
         ]
       }
     )
@@ -656,16 +660,16 @@ function bt() {
   ) });
 }
 function wt({ zone: n, labels: t }) {
-  const e = ft(n), { focus: o, resize: c, resplit: s } = R(), r = H(null), i = I(() => o(n), [o, n]), l = M(n), a = I(
+  const e = ft(n), { focus: o, resize: c, resplit: s } = R(), r = H(null), i = _(() => o(n), [o, n]), l = M(n), a = _(
     () => l ? r.current?.clientHeight ?? 0 : r.current?.clientWidth ?? 0,
     [l]
   );
   if (!e.draws) return null;
-  const { primary: d, secondary: f, size: h, split: g } = e, N = /* @__PURE__ */ m(
+  const { primary: d, secondary: f, size: h, split: m } = e, I = /* @__PURE__ */ g(
     "div",
     {
       ref: r,
-      className: w("pnl-zone", l ? "pnl-zone--row" : "pnl-zone--col"),
+      className: b("pnl-zone", l ? "pnl-zone--row" : "pnl-zone--col"),
       style: { [l ? "height" : "width"]: h },
       children: [
         d && /* @__PURE__ */ u(bn, { panel: d, closeLabel: t.closePanel, onFocus: i }),
@@ -674,7 +678,7 @@ function wt({ zone: n, labels: t }) {
           {
             axis: l ? "horizontal" : "vertical",
             invert: !0,
-            size: g,
+            size: m,
             min: Z,
             label: t.resizeSplit,
             onSize: (p, S) => s(n, p, S)
@@ -684,46 +688,46 @@ function wt({ zone: n, labels: t }) {
           bn,
           {
             panel: f,
-            length: d && g !== void 0 ? g : void 0,
+            length: d && m !== void 0 ? m : void 0,
             closeLabel: t.closePanel,
             onFocus: i
           }
         )
       ]
     }
-  ), v = /* @__PURE__ */ u(
+  ), y = /* @__PURE__ */ u(
     Q,
     {
       axis: l ? "vertical" : "horizontal",
       invert: !un(n),
       size: h,
-      min: A,
+      min: B,
       measure: a,
       label: t.resizeZone,
       onSize: (p, S) => c(n, p, S)
     }
   );
-  return un(n) ? /* @__PURE__ */ m(B, { children: [
-    N,
-    v
-  ] }) : /* @__PURE__ */ m(B, { children: [
-    v,
-    N
+  return un(n) ? /* @__PURE__ */ g(A, { children: [
+    I,
+    y
+  ] }) : /* @__PURE__ */ g(A, { children: [
+    y,
+    I
   ] });
 }
-const P = Sn(wt);
+const N = Sn(wt);
 function yt({ left: n, right: t, labels: e }) {
-  const o = b((r) => r.lengths.bandSplit), { resplitBand: c } = R(), s = I(
+  const o = v((r) => r.lengths.bandSplit), { resplitBand: c } = R(), s = _(
     (r, i) => c(r, i),
     [c]
   );
-  return !n && !t ? null : !n || !t ? /* @__PURE__ */ u(P, { zone: n ? "bottomLeft" : "bottomRight", labels: e }) : /* @__PURE__ */ m("div", { className: "pnl-band", children: [
+  return !n && !t ? null : !n || !t ? /* @__PURE__ */ u(N, { zone: n ? "bottomLeft" : "bottomRight", labels: e }) : /* @__PURE__ */ g("div", { className: "pnl-band", children: [
     /* @__PURE__ */ u(
       "div",
       {
-        className: w("pnl-band__half", o === void 0 && "pnl-band__half--even"),
+        className: b("pnl-band__half", o === void 0 && "pnl-band__half--even"),
         style: o === void 0 ? void 0 : { width: o },
-        children: /* @__PURE__ */ u(P, { zone: "bottomLeft", labels: e })
+        children: /* @__PURE__ */ u(N, { zone: "bottomLeft", labels: e })
       }
     ),
     /* @__PURE__ */ u(
@@ -736,7 +740,7 @@ function yt({ left: n, right: t, labels: e }) {
         onSize: s
       }
     ),
-    /* @__PURE__ */ u("div", { className: "pnl-band__half pnl-band__half--rest", children: /* @__PURE__ */ u(P, { zone: "bottomRight", labels: e }) })
+    /* @__PURE__ */ u("div", { className: "pnl-band__half pnl-band__half--rest", children: /* @__PURE__ */ u(N, { zone: "bottomRight", labels: e }) })
   ] });
 }
 function cn(n) {
@@ -755,15 +759,15 @@ function ln(n) {
 ln.displayName = "Panels.Panel";
 function wn({ side: n, header: t, className: e }) {
   const { column: o, band: c } = G[n];
-  return /* @__PURE__ */ m(
+  return /* @__PURE__ */ g(
     "div",
     {
       role: "toolbar",
       "aria-orientation": "vertical",
-      className: w("pnl-rail", `pnl-rail--${n}`, e),
+      className: b("pnl-rail", `pnl-rail--${n}`, e),
       children: [
-        /* @__PURE__ */ m("div", { className: "pnl-rail__group", children: [
-          t !== void 0 && /* @__PURE__ */ m(B, { children: [
+        /* @__PURE__ */ g("div", { className: "pnl-rail__group", children: [
+          t !== void 0 && /* @__PURE__ */ g(A, { children: [
             t,
             /* @__PURE__ */ u(sn, { orientation: "horizontal" })
           ] }),
@@ -775,8 +779,8 @@ function wn({ side: n, header: t, className: e }) {
   );
 }
 function yn({ zone: n }) {
-  const t = ht(n), e = lt(n), o = b((r) => r.focusedZone === n), { toggle: c } = R(), { IconButton: s } = On();
-  return t.length === 0 ? null : /* @__PURE__ */ u("div", { className: "pnl-rail__group", children: t.map(([r, i], l) => /* @__PURE__ */ m(Dn, { children: [
+  const t = ht(n), e = lt(n), o = v((r) => r.focusedZone === n), { toggle: c } = R(), { IconButton: s } = On();
+  return t.length === 0 ? null : /* @__PURE__ */ u("div", { className: "pnl-rail__group", children: t.map(([r, i], l) => /* @__PURE__ */ g(Dn, { children: [
     l > 0 && /* @__PURE__ */ u(sn, { orientation: "horizontal" }),
     i.map((a) => {
       const d = e[r] === a.id;
@@ -811,8 +815,8 @@ function Nt(n) {
       o.push(s);
       continue;
     }
-    const r = s.props, { id: i, zone: l, slot: a = "primary", title: d, icon: f, opens: h, solo: g, actions: N, children: v } = r;
-    t.push({ id: i, zone: l, slot: a, title: d, icon: f, opens: h, solo: g }), e.set(i, { content: v, actions: N });
+    const r = s.props, { actions: i, children: l, slot: a = "primary", ...d } = r;
+    t.push({ ...d, slot: a }), e.set(d.id, { content: l, actions: i });
   }
   return { specs: t, content: e, centre: c, loose: o };
 }
@@ -853,53 +857,53 @@ function Pt({
 }) {
   const l = O(), a = H(null);
   ct(a);
-  const [d] = W(() => it(r)), { specs: f, content: h, centre: g, loose: N } = y(() => Nt(i), [i]), v = y(() => ({ ...St, ...o }), [o]);
+  const [d] = W(() => it(r)), { specs: f, content: h, centre: m, loose: I } = w(() => Nt(i), [i]), y = w(() => ({ ...St, ...o }), [o]);
   Mn(() => {
     l.getState().declare(f);
   }, [l, f]);
   const p = ut();
-  return /* @__PURE__ */ u(st, { value: d, children: /* @__PURE__ */ u(pt, { value: h, children: /* @__PURE__ */ m("div", { "data-pnl-theme": c, className: w("pnl-root", s), children: [
+  return /* @__PURE__ */ u(st, { value: d, children: /* @__PURE__ */ u(pt, { value: h, children: /* @__PURE__ */ g("div", { "data-pnl-theme": c, className: b("pnl-root", s), children: [
     n,
-    /* @__PURE__ */ m("div", { className: "pnl-middle", children: [
+    /* @__PURE__ */ g("div", { className: "pnl-middle", children: [
       /* @__PURE__ */ u(wn, { side: "left", header: e }),
-      /* @__PURE__ */ m("div", { ref: a, className: "pnl-columns", children: [
-        /* @__PURE__ */ u(P, { zone: "top", labels: v }),
-        /* @__PURE__ */ m("div", { className: "pnl-row", children: [
-          !p.left && /* @__PURE__ */ u(P, { zone: "left", labels: v }),
-          /* @__PURE__ */ m("div", { className: "pnl-stack", children: [
-            /* @__PURE__ */ m("div", { className: "pnl-row", children: [
-              p.left && /* @__PURE__ */ u(P, { zone: "left", labels: v }),
-              /* @__PURE__ */ u(Tn, { className: "pnl-centre", children: g?.props.children }),
-              p.right && /* @__PURE__ */ u(P, { zone: "right", labels: v })
+      /* @__PURE__ */ g("div", { ref: a, className: "pnl-columns", children: [
+        /* @__PURE__ */ u(N, { zone: "top", labels: y }),
+        /* @__PURE__ */ g("div", { className: "pnl-row", children: [
+          !p.left && /* @__PURE__ */ u(N, { zone: "left", labels: y }),
+          /* @__PURE__ */ g("div", { className: "pnl-stack", children: [
+            /* @__PURE__ */ g("div", { className: "pnl-row", children: [
+              p.left && /* @__PURE__ */ u(N, { zone: "left", labels: y }),
+              /* @__PURE__ */ u(Tn, { className: "pnl-centre", children: m?.props.children }),
+              p.right && /* @__PURE__ */ u(N, { zone: "right", labels: y })
             ] }),
-            /* @__PURE__ */ u(yt, { left: p.left, right: p.right, labels: v })
+            /* @__PURE__ */ u(yt, { left: p.left, right: p.right, labels: y })
           ] }),
-          !p.right && /* @__PURE__ */ u(P, { zone: "right", labels: v })
+          !p.right && /* @__PURE__ */ u(N, { zone: "right", labels: y })
         ] })
       ] }),
       /* @__PURE__ */ u(wn, { side: "right" })
     ] }),
     t,
-    N
+    I
   ] }) }) });
 }
 Fn.Panel = ln;
 Fn.Center = cn;
 function Zt() {
-  const n = O(), t = T(), e = b((r) => r.focusedZone), o = R(), c = I(
+  const n = O(), t = T(), e = v((r) => r.focusedZone), o = R(), c = _(
     (r) => {
       const i = C(t.registry, r);
       return i !== void 0 && L(t, i.zone)[i.slot] === r;
     },
     [t]
-  ), s = I(
+  ), s = _(
     (r) => {
       const i = C(t.registry, r);
       !i || L(t, i.zone)[i.slot] !== r || n.getState().close(i.zone, i.slot);
     },
     [t, n]
   );
-  return y(
+  return w(
     () => ({
       panels: t.registry,
       reveal: o.show,
@@ -923,11 +927,11 @@ export {
   rt as IconButton,
   En as LAYOUT_VERSION,
   Pn as MIN_CENTER,
-  A as MIN_SIZE,
+  B as MIN_SIZE,
   Z as MIN_SPLIT,
   ln as Panel,
   bn as PanelFrame,
-  gt as PanelHeader,
+  mt as PanelHeader,
   Fn as Panels,
   ot as PanelsProvider,
   wn as Rail,
@@ -938,10 +942,10 @@ export {
   Tn as Surface,
   U as ZONES,
   G as ZONES_BY_SIDE,
-  P as ZoneEdge,
+  N as ZoneEdge,
   Qn as browserStorage,
   qn as createPanelsStore,
-  w as cx,
+  b as cx,
   D as fitSplit,
   xn as fitZoneSize,
   rn as isBottom,
@@ -959,17 +963,17 @@ export {
   T as useArrangement,
   ut as useBandHalves,
   ct as useContainerFit,
-  mt as usePanelContent,
+  gt as usePanelContent,
   Zt as usePanels,
   R as usePanelsActions,
   On as usePanelsComponents,
-  b as usePanelsState,
+  v as usePanelsState,
   O as usePanelsStore,
   dt as usePointerDrag,
   lt as useShownIn,
-  mn as useShownSpecsIn,
+  gn as useShownSpecsIn,
   ft as useZone,
-  gn as useZoneDraws,
+  mn as useZoneDraws,
   ht as useZonePanels,
   at as useZoneTakesRoom,
   et as writeLayout,

package/llms-full.txt

@@ -88,7 +88,7 @@ usual missing piece.
 `components` `theme` `className`
 
 ### `<Panel>` props
-`id` `zone` `slot?` `title` `icon?` `actions?` `opens?` `solo?`
+`id` `zone` `slot?` `title` `icon?` `actions?` `opens?` `solo?` `fillActions?`
 
 ### Hooks
 - `usePanels<Id>()` → `{ panels, reveal, close, toggle, isShown, focusedZone, reset }`
@@ -449,6 +449,15 @@ arrangement nobody remembers making, is not a restoration.
 
 `solo` only applies to `primary`.
 
+## `fillActions`
+
+A panel in a horizontal zone gets the header's free width for its actions — right for a montage
+bar, wrong for a band holding a list with two buttons. Say which yours is:
+
+```tsx
+<Panel id="problems" zone="bottomRight" title="Problems" fillActions={false} actions={…}>
+```
+
 ## Adding and removing panels
 
 The registry follows your JSX, in the order you declare it. A panel that stops being declared

package/llms.txt

@@ -88,7 +88,7 @@ usual missing piece.
 `components` `theme` `className`
 
 ### `<Panel>` props
-`id` `zone` `slot?` `title` `icon?` `actions?` `opens?` `solo?`
+`id` `zone` `slot?` `title` `icon?` `actions?` `opens?` `solo?` `fillActions?`
 
 ### Hooks
 - `usePanels<Id>()` → `{ panels, reveal, close, toggle, isShown, focusedZone, reset }`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pasquelin/panels",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "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",