@pasquelin/panels 0.1.1 → 0.2.0

package/dist/index.cjs

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

package/dist/index.d.ts

@@ -8,18 +8,19 @@ export { PanelFrame, type PanelFrameProps } from './components/PanelFrame';
 export { Surface } from './components/Surface';
 export { PanelHeader, type PanelHeaderProps } from './components/PanelHeader';
 export { IconButton, type IconButtonProps } from './components/IconButton';
+export { usePanelsComponents, type PanelsComponents } from './core/components';
 export { Separator, type SeparatorProps } from './components/Separator';
 export { ResizeHandle, type ResizeHandleProps } from './components/ResizeHandle';
 export { DEFAULT_LABELS, type PanelsLabels } from './components/labels';
 export { usePanelContent, ContentProvider, type PanelContent } from './components/content';
 export { PanelsProvider, usePanelsStore, usePanelsState, usePanelsActions, type PanelsProviderProps, } from './core/context';
 export { usePanels, type PanelsApi } from './core/hooks/usePanels';
-export { useArrangement, useBandHalves, useShownIn, useZoneDraws, useZoneTakesRoom, } from './core/hooks/useArrangement';
+export { useArrangement, useBandHalves, useShownIn, useShownSpecsIn, useZoneDraws, useZoneTakesRoom, } from './core/hooks/useArrangement';
 export { useZone, useZonePanels, type ZoneView } from './core/hooks/useZone';
 export { useContainerFit } from './core/hooks/useContainerFit';
 export { usePointerDrag, type PointerDrag } from './core/hooks/usePointerDrag';
-export { createPanelsStore, shownIn, specOf, zoneDraws, zoneTakesRoom, undraggedSizeOf, type PanelsState, type PanelsStore, } from './core/store';
+export { createPanelsStore, openOf, shownIn, shownSpecsIn, specOf, type Arranged, zoneDraws, zoneTakesRoom, undraggedSizeOf, type PanelsState, type PanelsStore, } from './core/store';
 export { browserStorage, memoryStorage, readLayout, writeLayout, LAYOUT_VERSION, type LayoutStorage, } from './core/persistence';
 export { MIN_SIZE, MIN_CENTER, MIN_SPLIT, DEFAULT_SIZES, fitZoneSize, fitSplit, sharedSizes, sizeKeyOf, } from './core/clamps';
-export { ZONES, SLOTS, BOTTOM_ZONES, ZONES_BY_SIDE, type Side, isBottom, isHorizontal, isLeading, type Zone, type Slot, type PanelSpec, type ZoneSlots, type OpenByZone, type SizesByZone, type Lengths, type LayoutState, } from './core/types';
+export { ZONES, SLOTS, DEFAULT_VIEW, BOTTOM_ZONES, ZONES_BY_SIDE, type Side, isBottom, isHorizontal, isLeading, type Zone, type Slot, type PanelSpec, type ZoneSlots, type OpenByZone, type SizesByZone, type Lengths, type LayoutState, } from './core/types';
 export { cx } from './core/cx';