react-panel-layout 0.5.1 → 0.5.2

package/dist/index.cjs

@@ -1,3 +1,3 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const E=require("./GridLayout-ZrOhoLLB.cjs"),h=require("react/jsx-runtime"),Rt=require("react"),P=require("./styles-PsqGOEJP.cjs"),tt=require("./useIsomorphicLayoutEffect-DGRNF4Lf.cjs"),Pt=require("react-dom"),Dt=require("./usePivot-BS-DGfwd.cjs");function jt(t){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const n in t)if(n!=="default"){const r=Object.getOwnPropertyDescriptor(t,n);Object.defineProperty(e,n,r.get?r:{enumerable:!0,get:()=>t[n]})}}return e.default=t,Object.freeze(e)}const u=jt(Rt),At=t=>{const e=t==="drag"?P.COLOR_RESIZE_HANDLE_ACTIVE:t==="hover"?P.COLOR_RESIZE_HANDLE_HOVER:P.COLOR_RESIZE_HANDLE_IDLE;return{width:P.HORIZONTAL_DIVIDER_WIDTH,cursor:"col-resize",position:"relative",userSelect:"none",backgroundColor:e}},kt=({onResize:t,component:e,element:n})=>{const{ref:r,isDragging:o,onPointerDown:s}=E.useResizeDrag({axis:"x",onResize:t}),[a,i]=u.useState(!1),c={ref:r,style:At(o?"drag":a?"hover":"idle"),role:"separator","aria-orientation":"vertical","data-dragging":o?"true":void 0,onPointerDown:s,onPointerEnter:()=>i(!0),onPointerLeave:()=>i(!1)};return n?u.cloneElement(n,c):e?h.jsx(e,{...c}):h.jsx("div",{...c})},_t=()=>{const{layerId:t}=E.useLayerInstance(),{getLayerHandleProps:e}=E.useGridLayoutContext();return u.useMemo(()=>e(t),[e,t])},nt={left:0,top:0},rt={width:400,height:300},Mt=t=>{const[e,n]=u.useState(()=>{const l={};return t.forEach(p=>{if(p.floating){const g=p.floating;l[p.id]={position:g.defaultPosition??nt,size:g.defaultSize??rt}}}),l}),r=u.useMemo(()=>{const l=new Map;return t.forEach(p=>l.set(p.id,p)),l},[t]),o=u.useCallback(l=>{const p=r.get(l);return p?.floating?.position!==void 0?p.floating.position:e[l]?.position??nt},[r,e]),s=u.useCallback(l=>{const p=r.get(l);return p?.floating?.size!==void 0?p.floating.size:e[l]?.size??rt},[r,e]),a=u.useCallback(l=>r.get(l)?.floating?.zIndex,[r]),i=u.useCallback((l,p)=>{const g=r.get(l);g?.floating&&(g.floating.position===void 0&&n(v=>{const b=v[l];return b?{...v,[l]:{...b,position:p}}:v}),g.floating.onMove?.(p))},[r]),c=u.useCallback((l,p)=>{const g=r.get(l);g?.floating&&(g.floating.size===void 0&&n(v=>{const b=v[l];return b?{...v,[l]:{...b,size:p}}:v}),g.floating.onResize?.(p))},[r]),d=u.useCallback(l=>{r.get(l)?.floating?.onClose?.()},[r]);return{getPosition:o,getSize:s,getZIndex:a,updatePosition:i,updateSize:c,close:d}},ut=u.createContext(null),Ot=()=>{const t=u.useContext(ut);if(!t)throw new Error("useKeybindings must be used within KeybindingsProvider");return t},Nt=t=>{const e=[];t.metaKey&&e.push("Mod"),t.ctrlKey&&e.push("Ctrl"),t.altKey&&e.push("Alt"),t.shiftKey&&e.push("Shift");const n=t.key.length===1?t.key.toUpperCase():t.key;return e.push(n),e.join("-")},Lt=({children:t,configure:e})=>{const n=u.useRef({}),r=u.useCallback((a,i)=>{n.current={...n.current,[a]:i}},[]),o=u.useCallback(a=>{const i={...n.current};delete i[a],n.current=i},[]);u.useEffect(()=>{const a=i=>{const c=Nt(i),d=n.current[c];d&&d(i)};return window.addEventListener("keydown",a),()=>{window.removeEventListener("keydown",a)}},[]);const s=u.useMemo(()=>({register:r,unregister:o}),[r,o]);return u.useEffect(()=>{e&&e(s)},[s,e]),h.jsx(ut.Provider,{value:s,children:t})},Bt=(t,e)=>{t.register("Mod-\\",n=>{n.preventDefault(),e.splitFocused("vertical")}),t.register("Mod-Shift-\\",n=>{n.preventDefault(),e.splitFocused("horizontal")});for(const n of[1,2,3,4,5,6,7,8,9])t.register(`Mod-${String(n)}`,r=>{r.preventDefault(),e.focusGroupIndex(n)});t.register("Alt-ArrowRight",n=>{n.preventDefault(),e.focusNextGroup()}),t.register("Alt-ArrowLeft",n=>{n.preventDefault(),e.focusPrevGroup()})},Ht=t=>t.type==="group",lt=(t,e={x:0,y:0,w:100,h:100})=>{const n=new Map,r=(o,s)=>{if(Ht(o)){n.set(o.groupId,s);return}if(o.direction==="vertical"){const c=s.w*o.ratio,d=s.w-c;r(o.a,{x:s.x,y:s.y,w:c,h:s.h}),r(o.b,{x:s.x+c,y:s.y,w:d,h:s.h});return}const a=s.h*o.ratio,i=s.h-a;r(o.a,{x:s.x,y:s.y,w:s.w,h:a}),r(o.b,{x:s.x,y:s.y+a,w:s.w,h:i})};return r(t,e),n},zt=(t,e)=>{const n=lt(t.tree),r={areas:[["root"]],rows:[{size:"1fr"}],columns:[{size:"1fr"}],gap:"0px",style:{position:"relative"}},o=Array.from(n.entries()).map(([s,a])=>{const i={position:"absolute",left:`${a.x}%`,top:`${a.y}%`,width:`${a.w}%`,height:`${a.h}%`,overflow:"hidden",display:"flex",flexDirection:"column"};return{id:s,positionMode:"absolute",style:i,component:e(s)}});return{config:r,layers:o}},$t=(t,e,n)=>{const r=lt(t.tree),o=Array.from(new Set(Array.from(r.values()).flatMap(b=>[b.x,b.x+b.w]))).sort((b,I)=>b-I),s=Array.from(new Set(Array.from(r.values()).flatMap(b=>[b.y,b.y+b.h]))).sort((b,I)=>b-I),a=o.slice(1).map((b,I)=>`${b-o[I]}fr`),i=s.slice(1).map((b,I)=>`${b-s[I]}fr`),c=a.map(b=>({size:b,resizable:n})),d=i.map(b=>({size:b,resizable:n})),l=(b,I,w,y)=>{for(const[m,x]of r.entries())if(b>=x.x&&I<=x.x+x.w&&w>=x.y&&y<=x.y+x.h)return m;return"."},p=[];for(let b=0;b<s.length-1;b+=1){const I=[];for(let w=0;w<o.length-1;w+=1)I.push(l(o[w],o[w+1],s[b],s[b+1]));p.push(I)}const g={areas:p,rows:d,columns:c,gap:"0px"},v=Array.from(r.keys()).map(b=>({id:b,gridArea:b,component:e(b)}));return{config:g,layers:v}},dt=u.createContext(null),Ft=()=>{const t=u.useContext(dt);if(!t)throw new Error("usePanelRenderContext must be used within PanelRenderProvider");return t},Xt=({value:t,children:e})=>h.jsx(dt.Provider,{value:t,children:e}),pt=u.createContext(null),ft=()=>{const t=u.useContext(pt);if(!t)throw new Error("useDomRegistry must be used within DomRegistryProvider");return t},Yt=({children:t})=>{const e=u.useRef(new Map),n=u.useCallback(c=>{const d=e.current.get(c);if(d)return d;const l={group:null,tabbar:null,content:null};return e.current.set(c,l),l},[]),r=u.useCallback((c,d)=>{const l=n(c);if(l.group=d,d===null){const p=e.current.get(c);(p?p.tabbar===null&&p.content===null:!1)&&e.current.delete(c)}},[n]),o=u.useCallback((c,d)=>{const l=n(c);if(l.tabbar=d,d===null){const p=e.current.get(c);(p?p.group===null&&p.content===null:!1)&&e.current.delete(c)}},[n]),s=u.useCallback((c,d)=>{const l=n(c);if(l.content=d,d===null){const p=e.current.get(c);(p?p.group===null&&p.tabbar===null:!1)&&e.current.delete(c)}},[n]),a=u.useCallback(()=>e.current,[]),i=u.useMemo(()=>({setGroupEl:r,setTabbarEl:o,setContentEl:s,getAll:a}),[r,o,s,a]);return h.jsx(pt.Provider,{value:i,children:t})},qt={display:"flex",flexDirection:"column",width:"100%",height:"100%"},Ut={flex:"1 1 auto",minWidth:0,minHeight:0,position:"relative",overflow:"hidden"};function Vt(t,e,n,r){return t?u.cloneElement(t,n,r):e?h.jsx(e,{...n,children:r}):h.jsx("div",{...n,children:r})}function Kt(t,e,n,r){return t?u.cloneElement(t,n,r):e?h.jsx(e,{...n,children:r}):h.jsx("div",{...n,children:r})}const Wt=({group:t,tabbar:e,content:n,onContentPointerDown:r,groupRef:o,contentRef:s,component:a,element:i,contentComponent:c,contentElement:d})=>{const l={ref:o,style:qt,"data-group-id":t.id},g=Vt(d,c,{ref:s,style:Ut,"data-dnd-zone":"content",onPointerDown:r},n),v=h.jsxs(h.Fragment,{children:[e,g]});return Kt(i,a,l,v)},gt=u.memo(Wt,(t,e)=>t.group.id!==e.group.id||t.group.activeTabId!==e.group.activeTabId||t.group.tabs.length!==e.group.tabs.length?!1:t.group.tabs===e.group.tabs);gt.displayName="PanelGroupView";const q=(t,e,n)=>{const r=t.left,o=t.top,s=t.width,a=t.height,i=e-r,c=n-o,d=s/3,l=a/3;return i>d&&i<s-d&&c>l&&c<a-l?"center":i<c&&i<s-i&&c<a-c?"left":s-i<c&&s-i<i&&c<a-c?"right":c<i&&c<a-c&&i<s-i?"top":"bottom"};function k(t,e){if(!e){const r=(()=>({type:t}));return Object.defineProperty(r,"type",{value:t,writable:!1,enumerable:!0}),r}const n=((...r)=>{const o=e(...r);return typeof o>"u"?{type:t}:{type:t,payload:o}});return Object.defineProperty(n,"type",{value:t,writable:!1,enumerable:!0}),n}const Zt=(t,e)=>{const n={};return Object.keys(t).forEach(r=>{const o=t[r];n[r]=((...s)=>{const a=o(...s);return e(a),a})}),n},bt=(t,e)=>{const n={};return Object.keys(e).forEach(r=>{const o=e[r];if(!o)return;const s=t[r];if(!s)throw new Error(`Missing action creator for key "${String(r)}"`);n[s.type]=o}),n},ht={phase:{kind:"idle"},suggest:null,pointer:null,tabbarHover:null,draggingTabElement:null},A={startContent:k("START_CONTENT",t=>t),startTab:k("START_TAB",t=>t),setSuggest:k("SET_SUGGEST",t=>t),setPointer:k("SET_POINTER",t=>t),setTabbarHover:k("SET_TABBAR_HOVER",t=>t),reset:k("RESET")},Jt=bt(A,{startContent:(t,e)=>({phase:{kind:"content",startX:e.payload.x,startY:e.payload.y,fromGroupId:e.payload.groupId,tabId:e.payload.tabId,cache:e.payload.cache},suggest:null,pointer:null,tabbarHover:null,draggingTabElement:null}),startTab:(t,e)=>({phase:{kind:"tab",startX:e.payload.x,startY:e.payload.y,fromGroupId:e.payload.groupId,tabId:e.payload.tabId,cache:e.payload.cache},suggest:null,pointer:null,tabbarHover:null,draggingTabElement:e.payload.element}),setSuggest:(t,e)=>({...t,suggest:e.payload}),setPointer:(t,e)=>({...t,pointer:e.payload}),setTabbarHover:(t,e)=>({...t,tabbarHover:e.payload}),reset:()=>ht}),Qt=(t,e)=>{const n=Jt[e.type];return n?n(t,e,void 0):t},mt=u.createContext(null),K=()=>{const t=u.useContext(mt);if(!t)throw new Error("usePanelInteractions must be used within InteractionsProvider");return t},te=({containerRef:t,dragThresholdPx:e,onCommitContentDrop:n,onCommitTabDrop:r,isContentZoneAllowed:o,children:s})=>{const[a,i]=u.useReducer(Qt,ht),c=ft(),d=u.useCallback(()=>{const w=Array.from(c.getAll().entries()),y=w.map(([f,S])=>({gid:f,el:S.content??S.group})).filter(f=>!!f.el).map(f=>({...f,rect:f.el.getBoundingClientRect()})),m=w.map(([f,S])=>({gid:f,el:S.tabbar})).filter(f=>!!f.el).map(f=>({...f,rect:f.el.getBoundingClientRect()})),x=w.map(([f,S])=>({gid:f,el:S.content??S.group})).filter(f=>!!f.el).map(f=>({...f,rect:f.el.getBoundingClientRect()}));return{groups:y,tabbars:m,contents:x}},[c]),l=E.useEffectEvent(w=>{if(!t.current)return;const m=w.clientX,x=w.clientY,f=a.phase;if(f.kind==="idle")return;const S=Math.abs(m-f.startX),C=Math.abs(x-f.startY);if(S<e&&C<e){a.phase.kind==="content"&&i(A.setSuggest(null)),i(A.setPointer(null)),i(A.setTabbarHover(null));return}if(i(A.setPointer({x:m,y:x})),f.kind==="content"){const G=f.cache.groups.find(({rect:T})=>m>=T.left&&m<=T.right&&x>=T.top&&x<=T.bottom);if(!G){i(A.setSuggest(null));return}const D=q(G.rect,m,x);if(o&&!o({targetGroupId:G.gid,zone:D})){i(A.setSuggest(null));return}i(A.setSuggest({rect:G.rect,zone:D}));return}if(f.kind==="tab"){const G=f.cache.tabbars.find(({rect:R})=>m>=R.left&&m<=R.right&&x>=R.top&&x<=R.bottom);if(G){const _=Array.from(G.el.querySelectorAll("[role='tab']")).map(H=>H.getBoundingClientRect()),j=_.map(H=>H.left+H.width/2),O=j.findIndex(H=>m<H),N=O===-1?j.length:O,Ct=_.length===0?G.rect.left+8:N===0?_[0].left:N===_.length?_[_.length-1].right:(_[N-1].right+_[N].left)/2;i(A.setTabbarHover({groupId:G.gid,index:N,rect:G.rect,insertX:Ct}))}else i(A.setTabbarHover(null));const D=f.cache.contents.find(({rect:R})=>m>=R.left&&m<=R.right&&x>=R.top&&x<=R.bottom);if(!D){i(A.setSuggest(null));return}const T=q(D.rect,m,x);if(o&&!o({targetGroupId:D.gid,zone:T})){i(A.setSuggest(null));return}i(A.setSuggest({rect:D.rect,zone:T}))}}),p=E.useEffectEvent(w=>{const y=t.current,m=a;if(i(A.reset()),!y)return;const x=w.clientX,f=w.clientY;if(m.phase.kind==="idle")return;const S=Math.abs(x-m.phase.startX),C=Math.abs(f-m.phase.startY);if(!(S<e&&C<e)){if(m.phase.kind==="content"){const G=m.phase.cache.groups.find(({rect:R})=>x>=R.left&&x<=R.right&&f>=R.top&&f<=R.bottom);if(!G)return;const D=G.gid??null;if(!D)return;const T=q(G.rect,x,f);if(o&&!o({targetGroupId:D,zone:T}))return;n({fromGroupId:m.phase.fromGroupId,tabId:m.phase.tabId,targetGroupId:D,zone:T});return}if(m.phase.kind==="tab"){const G=m.phase.cache.tabbars.find(({rect:T})=>x>=T.left&&x<=T.right&&f>=T.top&&f<=T.bottom);if(G){const T=G.gid;if(!T)return;const _=Array.from(G.el.querySelectorAll("[role='tab']")).map(N=>{const Z=N.getBoundingClientRect();return Z.left+Z.width/2}),j=_.findIndex(N=>x<N),O=j===-1?_.length:j;r({fromGroupId:m.phase.fromGroupId,tabId:m.phase.tabId,targetGroupId:T,targetIndex:O});return}const D=m.phase.cache.contents.find(({rect:T})=>x>=T.left&&x<=T.right&&f>=T.top&&f<=T.bottom);if(D){const T=D.gid??null;if(!T)return;const R=q(D.rect,x,f);if(o&&!o({targetGroupId:T,zone:R}))return;n({fromGroupId:m.phase.fromGroupId,tabId:m.phase.tabId,targetGroupId:T,zone:R})}}}}),g=E.useEffectEvent(()=>{i(A.reset())});u.useEffect(()=>{if(a.phase.kind!=="idle")return window.addEventListener("pointermove",l),window.addEventListener("pointerup",p,{once:!0}),window.addEventListener("pointercancel",g,{once:!0}),()=>{window.removeEventListener("pointermove",l),window.removeEventListener("pointerup",p),window.removeEventListener("pointercancel",g)}},[a.phase.kind]);const v=u.useCallback((w,y,m)=>{if(m.button!==0)return;m.currentTarget.setPointerCapture(m.pointerId);const x=d();i(A.startContent({x:m.clientX,y:m.clientY,groupId:w,tabId:y,cache:x}))},[d]),b=u.useCallback((w,y,m)=>{if(m.button!==0)return;const x=m.currentTarget;x&&x.setPointerCapture(m.pointerId);const f=d();i(A.startTab({x:m.clientX,y:m.clientY,groupId:y,tabId:w,cache:f,element:x}))},[d]),I=u.useMemo(()=>({suggest:a.suggest,isTabDragging:a.phase.kind==="tab",draggingTabId:a.phase.kind==="tab"?a.phase.tabId:null,dragPointer:a.pointer,tabbarHover:a.tabbarHover,draggingTabElement:a.draggingTabElement,onStartContentDrag:v,onStartTabDrag:b}),[a.suggest,a.pointer,a.tabbarHover,a.phase,a.draggingTabElement,v,b]);return h.jsx(mt.Provider,{value:I,children:s})},ot={display:"inline-flex",alignItems:"center",userSelect:"none"},ee=({groupId:t,tab:e,active:n,dragging:r,onClickTab:o,onStartDrag:s,onCloseTab:a,tabComponent:i,tabElement:c,onDoubleClick:d})=>{const l=u.useEffectEvent(()=>{o(e.id)}),p=u.useEffectEvent(I=>{s&&I.button===0&&s(e.id,t,I)}),g=()=>{const I=!!a;return h.jsx(u.Activity,{mode:I?"visible":"hidden",children:h.jsx("button",{type:"button","aria-label":`Close tab ${e.title}`,onClick:w=>{a&&(w.stopPropagation(),a(t,e.id))},style:{marginLeft:6},tabIndex:I?void 0:-1,disabled:!I,"aria-hidden":I?void 0:!0,children:"×"})})},v={role:"tab","aria-selected":n,tabIndex:n?0:-1,style:ot,onClick:l,onPointerDown:p,onDoubleClick:d,"data-tab-id":e.id,"data-active":n?"true":"false","data-dragging":r?"true":"false",children:h.jsxs(h.Fragment,{children:[h.jsx("span",{children:e.title}),g()]})},b={type:"button",role:"tab","aria-selected":n,tabIndex:n?0:-1,style:ot,onClick:()=>{o(e.id)},onPointerDown:I=>{s&&I.button===0&&s(e.id,t,I)},onDoubleClick:d,children:h.jsx("span",{children:e.title})};return c?c(b):i?h.jsx(i,{...b}):h.jsx("div",{...v})},ne={display:"flex",alignItems:"center"},re={flex:"1 1 auto",alignSelf:"stretch"},oe=({group:t,onClickTab:e,onStartDrag:n,rootRef:r,component:o,element:s,tabComponent:a,tabElement:i,onAddTab:c,onCloseTab:d,doubleClickToAdd:l})=>{const{isTabDragging:p,draggingTabId:g}=K(),v=u.useRef(null),b=u.useCallback(f=>{if(v.current=f,!!r){if(typeof r=="function"){r(f);return}try{r.current=f}catch{}}},[r]),I=u.useEffectEvent(f=>{const S=v.current??f.currentTarget;if(!S)return;const C=Array.from(S.querySelectorAll('[role="tab"]'));if(C.length===0)return;const G=j=>{const O=Math.max(0,Math.min(j,C.length-1)),N=C[O];N&&N.focus()},D=document.activeElement,T=D?C.indexOf(D):C.findIndex(j=>j.getAttribute("data-tab-id")===t.activeTabId);if(f.key==="ArrowRight"){f.preventDefault();const j=T>=0?T+1:0;G(j>=C.length?0:j);return}if(f.key==="ArrowLeft"){f.preventDefault();const j=T>=0?T-1:C.length-1;G(j<0?C.length-1:j);return}if(f.key==="Home"){f.preventDefault(),G(0);return}if(f.key==="End"){f.preventDefault(),G(C.length-1);return}if(f.key==="Enter"||f.key===" "){f.preventDefault();const O=(T>=0?C[T]:null)?.getAttribute("data-tab-id")??null;O&&e(O);return}if(f.key==="Delete"||f.key==="Backspace"){if(d){f.preventDefault();const O=(T>=0?C[T]:null)?.getAttribute("data-tab-id")??null;O&&d(t.id,O)}return}const R=(f.ctrlKey?1:0)+(f.metaKey?1:0)>0,_=typeof f.key=="string"?f.key.toLowerCase():"";if(R&&_==="t"){c&&(f.preventDefault(),c(t.id));return}});u.useEffect(()=>{const f=v.current;if(!f)return;const S=f.querySelector(`[role="tab"][data-tab-id="${t.activeTabId}"]`);if(S===document.activeElement)return;!f.contains(document.activeElement)&&S&&S.focus()},[t.activeTabId]);const w={style:ne,role:"tablist","data-tabbar":"true","data-group-id":t.id,"data-dragging":p?"true":"false",onKeyDown:I},y=E.useElementComponentWrapper({element:s,component:o}),m=()=>c?h.jsx("button",{type:"button","aria-label":"Add tab",onClick:()=>{c(t.id)},children:"+"}):null,x=u.useCallback(()=>{l&&c&&c(t.id)},[l,c,t.id]);return h.jsxs(y,{...w,ref:b,onDoubleClick:x,children:[t.tabs.map((f,S)=>h.jsx(ee,{groupId:t.id,tab:f,active:t.activeTabId===f.id,dragging:g===f.id,onClickTab:e,onStartDrag:n,onCloseTab:d,tabComponent:a,tabElement:i,onDoubleClick:C=>C.stopPropagation()},`${t.id}:${f.id}:${S}`)),h.jsx("span",{style:re}),m()]})},se=({id:t,TabBarComponent:e,PanelGroupComponent:n})=>{const{getGroup:r,getGroupContent:o,onClickTab:s,onAddTab:a,onCloseTab:i,onStartTabDrag:c,doubleClickToAdd:d,registerContentContainer:l}=Ft(),{setGroupEl:p,setTabbarEl:g,setContentEl:v}=ft(),b=u.useCallback(S=>{p(t,S)},[t,p]),I=u.useCallback(S=>{v(t,S),l(t,S)},[t,v,l]),w=u.useCallback(S=>{g(t,S)},[t,g]),y=r(t);if(!y)return null;const m=o(t),x=e??oe,f=n??(S=>h.jsx(gt,{...S}));return h.jsx(f,{group:y,tabbar:h.jsx(x,{rootRef:w,group:y,onClickTab:S=>s(t,S),onAddTab:a,onCloseTab:i,onStartDrag:(S,C,G)=>c(S,C,G),doubleClickToAdd:d}),content:m,groupRef:b,contentRef:I})},ie=(t,e)=>{const n=new Array(16);for(let r=0;r<4;r++)for(let o=0;o<4;o++)n[r*4+o]=t[0+o]*e[r*4+0]+t[4+o]*e[r*4+1]+t[8+o]*e[r*4+2]+t[12+o]*e[r*4+3];return n},U=t=>{if(t.length!==16)throw new Error("Matrix must have exactly 16 values");const e=Object.freeze([...t]),n=r=>{const o=ie(e,r);return U(o)};return Object.freeze({translate:(r=0,o=0,s=0)=>n([1,0,0,0,0,1,0,0,0,0,1,0,r,o,s,1]),translate3d:(r,o,s)=>n([1,0,0,0,0,1,0,0,0,0,1,0,r,o,s,1]),translateX:r=>n([1,0,0,0,0,1,0,0,0,0,1,0,r,0,0,1]),translateY:r=>n([1,0,0,0,0,1,0,0,0,0,1,0,0,r,0,1]),translateZ:r=>n([1,0,0,0,0,1,0,0,0,0,1,0,0,0,r,1]),scale:(r=1,o=1,s=1)=>n([r,0,0,0,0,o,0,0,0,0,s,0,0,0,0,1]),scale3d:(r,o,s)=>n([r,0,0,0,0,o,0,0,0,0,s,0,0,0,0,1]),scaleX:r=>n([r,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1]),scaleY:r=>n([1,0,0,0,0,r,0,0,0,0,1,0,0,0,0,1]),scaleZ:r=>n([1,0,0,0,0,1,0,0,0,0,r,0,0,0,0,1]),rotateX:r=>{const o=Math.cos(r),s=Math.sin(r);return n([1,0,0,0,0,o,s,0,0,-s,o,0,0,0,0,1])},rotateY:r=>{const o=Math.cos(r),s=Math.sin(r);return n([o,0,-s,0,0,1,0,0,s,0,o,0,0,0,0,1])},rotateZ:r=>{const o=Math.cos(r),s=Math.sin(r);return n([o,s,0,0,-s,o,0,0,0,0,1,0,0,0,0,1])},rotate:(r,o,s,a)=>{const i=Math.sqrt(o*o+s*s+a*a);if(i===0)return U(e);o/=i,s/=i,a/=i;const c=Math.cos(r),d=Math.sin(r),l=1-c;return n([l*o*o+c,l*o*s+d*a,l*o*a-d*s,0,l*o*s-d*a,l*s*s+c,l*s*a+d*o,0,l*o*a+d*s,l*s*a-d*o,l*a*a+c,0,0,0,0,1])},rotate3d:(r,o,s,a)=>{const i=Math.sqrt(r*r+o*o+s*s);if(i===0)return U(e);r/=i,o/=i,s/=i;const c=Math.cos(a),d=Math.sin(a),l=1-c;return n([l*r*r+c,l*r*o+d*s,l*r*s-d*o,0,l*r*o-d*s,l*o*o+c,l*o*s+d*r,0,l*r*s+d*o,l*o*s-d*r,l*s*s+c,0,0,0,0,1])},skew:(r=0,o=0)=>{const s=Math.tan(r),a=Math.tan(o);return n([1,a,0,0,s,1,0,0,0,0,1,0,0,0,0,1])},skewX:r=>{const o=Math.tan(r);return n([1,0,0,0,o,1,0,0,0,0,1,0,0,0,0,1])},skewY:r=>{const o=Math.tan(r);return n([1,o,0,0,0,1,0,0,0,0,1,0,0,0,0,1])},perspective:r=>{if(r===0)throw new Error("Perspective distance cannot be zero");return n([1,0,0,0,0,1,0,0,0,0,1,-1/r,0,0,0,1])},toCSS:()=>`matrix3d(${e.join(", ")})`,toArray:()=>e,toString:()=>[`[${e[0]}, ${e[4]}, ${e[8]}, ${e[12]}]`,`[${e[1]}, ${e[5]}, ${e[9]}, ${e[13]}]`,`[${e[2]}, ${e[6]}, ${e[10]}, ${e[14]}]`,`[${e[3]}, ${e[7]}, ${e[11]}, ${e[15]}]`].join(`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const E=require("./GridLayout-BQQ63eA1.cjs"),h=require("react/jsx-runtime"),Rt=require("react"),P=require("./styles-PsqGOEJP.cjs"),tt=require("./useIsomorphicLayoutEffect-DGRNF4Lf.cjs"),Pt=require("react-dom"),Dt=require("./usePivot-7ctin_P_.cjs");function jt(t){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const n in t)if(n!=="default"){const r=Object.getOwnPropertyDescriptor(t,n);Object.defineProperty(e,n,r.get?r:{enumerable:!0,get:()=>t[n]})}}return e.default=t,Object.freeze(e)}const u=jt(Rt),At=t=>{const e=t==="drag"?P.COLOR_RESIZE_HANDLE_ACTIVE:t==="hover"?P.COLOR_RESIZE_HANDLE_HOVER:P.COLOR_RESIZE_HANDLE_IDLE;return{width:P.HORIZONTAL_DIVIDER_WIDTH,cursor:"col-resize",position:"relative",userSelect:"none",backgroundColor:e}},kt=({onResize:t,component:e,element:n})=>{const{ref:r,isDragging:o,onPointerDown:s}=E.useResizeDrag({axis:"x",onResize:t}),[a,i]=u.useState(!1),c={ref:r,style:At(o?"drag":a?"hover":"idle"),role:"separator","aria-orientation":"vertical","data-dragging":o?"true":void 0,onPointerDown:s,onPointerEnter:()=>i(!0),onPointerLeave:()=>i(!1)};return n?u.cloneElement(n,c):e?h.jsx(e,{...c}):h.jsx("div",{...c})},_t=()=>{const{layerId:t}=E.useLayerInstance(),{getLayerHandleProps:e}=E.useGridLayoutContext();return u.useMemo(()=>e(t),[e,t])},nt={left:0,top:0},rt={width:400,height:300},Mt=t=>{const[e,n]=u.useState(()=>{const l={};return t.forEach(p=>{if(p.floating){const g=p.floating;l[p.id]={position:g.defaultPosition??nt,size:g.defaultSize??rt}}}),l}),r=u.useMemo(()=>{const l=new Map;return t.forEach(p=>l.set(p.id,p)),l},[t]),o=u.useCallback(l=>{const p=r.get(l);return p?.floating?.position!==void 0?p.floating.position:e[l]?.position??nt},[r,e]),s=u.useCallback(l=>{const p=r.get(l);return p?.floating?.size!==void 0?p.floating.size:e[l]?.size??rt},[r,e]),a=u.useCallback(l=>r.get(l)?.floating?.zIndex,[r]),i=u.useCallback((l,p)=>{const g=r.get(l);g?.floating&&(g.floating.position===void 0&&n(v=>{const b=v[l];return b?{...v,[l]:{...b,position:p}}:v}),g.floating.onMove?.(p))},[r]),c=u.useCallback((l,p)=>{const g=r.get(l);g?.floating&&(g.floating.size===void 0&&n(v=>{const b=v[l];return b?{...v,[l]:{...b,size:p}}:v}),g.floating.onResize?.(p))},[r]),d=u.useCallback(l=>{r.get(l)?.floating?.onClose?.()},[r]);return{getPosition:o,getSize:s,getZIndex:a,updatePosition:i,updateSize:c,close:d}},ut=u.createContext(null),Ot=()=>{const t=u.useContext(ut);if(!t)throw new Error("useKeybindings must be used within KeybindingsProvider");return t},Nt=t=>{const e=[];t.metaKey&&e.push("Mod"),t.ctrlKey&&e.push("Ctrl"),t.altKey&&e.push("Alt"),t.shiftKey&&e.push("Shift");const n=t.key.length===1?t.key.toUpperCase():t.key;return e.push(n),e.join("-")},Lt=({children:t,configure:e})=>{const n=u.useRef({}),r=u.useCallback((a,i)=>{n.current={...n.current,[a]:i}},[]),o=u.useCallback(a=>{const i={...n.current};delete i[a],n.current=i},[]);u.useEffect(()=>{const a=i=>{const c=Nt(i),d=n.current[c];d&&d(i)};return window.addEventListener("keydown",a),()=>{window.removeEventListener("keydown",a)}},[]);const s=u.useMemo(()=>({register:r,unregister:o}),[r,o]);return u.useEffect(()=>{e&&e(s)},[s,e]),h.jsx(ut.Provider,{value:s,children:t})},Bt=(t,e)=>{t.register("Mod-\\",n=>{n.preventDefault(),e.splitFocused("vertical")}),t.register("Mod-Shift-\\",n=>{n.preventDefault(),e.splitFocused("horizontal")});for(const n of[1,2,3,4,5,6,7,8,9])t.register(`Mod-${String(n)}`,r=>{r.preventDefault(),e.focusGroupIndex(n)});t.register("Alt-ArrowRight",n=>{n.preventDefault(),e.focusNextGroup()}),t.register("Alt-ArrowLeft",n=>{n.preventDefault(),e.focusPrevGroup()})},Ht=t=>t.type==="group",lt=(t,e={x:0,y:0,w:100,h:100})=>{const n=new Map,r=(o,s)=>{if(Ht(o)){n.set(o.groupId,s);return}if(o.direction==="vertical"){const c=s.w*o.ratio,d=s.w-c;r(o.a,{x:s.x,y:s.y,w:c,h:s.h}),r(o.b,{x:s.x+c,y:s.y,w:d,h:s.h});return}const a=s.h*o.ratio,i=s.h-a;r(o.a,{x:s.x,y:s.y,w:s.w,h:a}),r(o.b,{x:s.x,y:s.y+a,w:s.w,h:i})};return r(t,e),n},zt=(t,e)=>{const n=lt(t.tree),r={areas:[["root"]],rows:[{size:"1fr"}],columns:[{size:"1fr"}],gap:"0px",style:{position:"relative"}},o=Array.from(n.entries()).map(([s,a])=>{const i={position:"absolute",left:`${a.x}%`,top:`${a.y}%`,width:`${a.w}%`,height:`${a.h}%`,overflow:"hidden",display:"flex",flexDirection:"column"};return{id:s,positionMode:"absolute",style:i,component:e(s)}});return{config:r,layers:o}},$t=(t,e,n)=>{const r=lt(t.tree),o=Array.from(new Set(Array.from(r.values()).flatMap(b=>[b.x,b.x+b.w]))).sort((b,I)=>b-I),s=Array.from(new Set(Array.from(r.values()).flatMap(b=>[b.y,b.y+b.h]))).sort((b,I)=>b-I),a=o.slice(1).map((b,I)=>`${b-o[I]}fr`),i=s.slice(1).map((b,I)=>`${b-s[I]}fr`),c=a.map(b=>({size:b,resizable:n})),d=i.map(b=>({size:b,resizable:n})),l=(b,I,w,y)=>{for(const[m,x]of r.entries())if(b>=x.x&&I<=x.x+x.w&&w>=x.y&&y<=x.y+x.h)return m;return"."},p=[];for(let b=0;b<s.length-1;b+=1){const I=[];for(let w=0;w<o.length-1;w+=1)I.push(l(o[w],o[w+1],s[b],s[b+1]));p.push(I)}const g={areas:p,rows:d,columns:c,gap:"0px"},v=Array.from(r.keys()).map(b=>({id:b,gridArea:b,component:e(b)}));return{config:g,layers:v}},dt=u.createContext(null),Ft=()=>{const t=u.useContext(dt);if(!t)throw new Error("usePanelRenderContext must be used within PanelRenderProvider");return t},Xt=({value:t,children:e})=>h.jsx(dt.Provider,{value:t,children:e}),pt=u.createContext(null),ft=()=>{const t=u.useContext(pt);if(!t)throw new Error("useDomRegistry must be used within DomRegistryProvider");return t},Yt=({children:t})=>{const e=u.useRef(new Map),n=u.useCallback(c=>{const d=e.current.get(c);if(d)return d;const l={group:null,tabbar:null,content:null};return e.current.set(c,l),l},[]),r=u.useCallback((c,d)=>{const l=n(c);if(l.group=d,d===null){const p=e.current.get(c);(p?p.tabbar===null&&p.content===null:!1)&&e.current.delete(c)}},[n]),o=u.useCallback((c,d)=>{const l=n(c);if(l.tabbar=d,d===null){const p=e.current.get(c);(p?p.group===null&&p.content===null:!1)&&e.current.delete(c)}},[n]),s=u.useCallback((c,d)=>{const l=n(c);if(l.content=d,d===null){const p=e.current.get(c);(p?p.group===null&&p.tabbar===null:!1)&&e.current.delete(c)}},[n]),a=u.useCallback(()=>e.current,[]),i=u.useMemo(()=>({setGroupEl:r,setTabbarEl:o,setContentEl:s,getAll:a}),[r,o,s,a]);return h.jsx(pt.Provider,{value:i,children:t})},qt={display:"flex",flexDirection:"column",width:"100%",height:"100%"},Ut={flex:"1 1 auto",minWidth:0,minHeight:0,position:"relative",overflow:"hidden"};function Vt(t,e,n,r){return t?u.cloneElement(t,n,r):e?h.jsx(e,{...n,children:r}):h.jsx("div",{...n,children:r})}function Kt(t,e,n,r){return t?u.cloneElement(t,n,r):e?h.jsx(e,{...n,children:r}):h.jsx("div",{...n,children:r})}const Wt=({group:t,tabbar:e,content:n,onContentPointerDown:r,groupRef:o,contentRef:s,component:a,element:i,contentComponent:c,contentElement:d})=>{const l={ref:o,style:qt,"data-group-id":t.id},g=Vt(d,c,{ref:s,style:Ut,"data-dnd-zone":"content",onPointerDown:r},n),v=h.jsxs(h.Fragment,{children:[e,g]});return Kt(i,a,l,v)},gt=u.memo(Wt,(t,e)=>t.group.id!==e.group.id||t.group.activeTabId!==e.group.activeTabId||t.group.tabs.length!==e.group.tabs.length?!1:t.group.tabs===e.group.tabs);gt.displayName="PanelGroupView";const q=(t,e,n)=>{const r=t.left,o=t.top,s=t.width,a=t.height,i=e-r,c=n-o,d=s/3,l=a/3;return i>d&&i<s-d&&c>l&&c<a-l?"center":i<c&&i<s-i&&c<a-c?"left":s-i<c&&s-i<i&&c<a-c?"right":c<i&&c<a-c&&i<s-i?"top":"bottom"};function k(t,e){if(!e){const r=(()=>({type:t}));return Object.defineProperty(r,"type",{value:t,writable:!1,enumerable:!0}),r}const n=((...r)=>{const o=e(...r);return typeof o>"u"?{type:t}:{type:t,payload:o}});return Object.defineProperty(n,"type",{value:t,writable:!1,enumerable:!0}),n}const Zt=(t,e)=>{const n={};return Object.keys(t).forEach(r=>{const o=t[r];n[r]=((...s)=>{const a=o(...s);return e(a),a})}),n},bt=(t,e)=>{const n={};return Object.keys(e).forEach(r=>{const o=e[r];if(!o)return;const s=t[r];if(!s)throw new Error(`Missing action creator for key "${String(r)}"`);n[s.type]=o}),n},ht={phase:{kind:"idle"},suggest:null,pointer:null,tabbarHover:null,draggingTabElement:null},A={startContent:k("START_CONTENT",t=>t),startTab:k("START_TAB",t=>t),setSuggest:k("SET_SUGGEST",t=>t),setPointer:k("SET_POINTER",t=>t),setTabbarHover:k("SET_TABBAR_HOVER",t=>t),reset:k("RESET")},Jt=bt(A,{startContent:(t,e)=>({phase:{kind:"content",startX:e.payload.x,startY:e.payload.y,fromGroupId:e.payload.groupId,tabId:e.payload.tabId,cache:e.payload.cache},suggest:null,pointer:null,tabbarHover:null,draggingTabElement:null}),startTab:(t,e)=>({phase:{kind:"tab",startX:e.payload.x,startY:e.payload.y,fromGroupId:e.payload.groupId,tabId:e.payload.tabId,cache:e.payload.cache},suggest:null,pointer:null,tabbarHover:null,draggingTabElement:e.payload.element}),setSuggest:(t,e)=>({...t,suggest:e.payload}),setPointer:(t,e)=>({...t,pointer:e.payload}),setTabbarHover:(t,e)=>({...t,tabbarHover:e.payload}),reset:()=>ht}),Qt=(t,e)=>{const n=Jt[e.type];return n?n(t,e,void 0):t},mt=u.createContext(null),K=()=>{const t=u.useContext(mt);if(!t)throw new Error("usePanelInteractions must be used within InteractionsProvider");return t},te=({containerRef:t,dragThresholdPx:e,onCommitContentDrop:n,onCommitTabDrop:r,isContentZoneAllowed:o,children:s})=>{const[a,i]=u.useReducer(Qt,ht),c=ft(),d=u.useCallback(()=>{const w=Array.from(c.getAll().entries()),y=w.map(([f,S])=>({gid:f,el:S.content??S.group})).filter(f=>!!f.el).map(f=>({...f,rect:f.el.getBoundingClientRect()})),m=w.map(([f,S])=>({gid:f,el:S.tabbar})).filter(f=>!!f.el).map(f=>({...f,rect:f.el.getBoundingClientRect()})),x=w.map(([f,S])=>({gid:f,el:S.content??S.group})).filter(f=>!!f.el).map(f=>({...f,rect:f.el.getBoundingClientRect()}));return{groups:y,tabbars:m,contents:x}},[c]),l=E.useEffectEvent(w=>{if(!t.current)return;const m=w.clientX,x=w.clientY,f=a.phase;if(f.kind==="idle")return;const S=Math.abs(m-f.startX),C=Math.abs(x-f.startY);if(S<e&&C<e){a.phase.kind==="content"&&i(A.setSuggest(null)),i(A.setPointer(null)),i(A.setTabbarHover(null));return}if(i(A.setPointer({x:m,y:x})),f.kind==="content"){const G=f.cache.groups.find(({rect:T})=>m>=T.left&&m<=T.right&&x>=T.top&&x<=T.bottom);if(!G){i(A.setSuggest(null));return}const D=q(G.rect,m,x);if(o&&!o({targetGroupId:G.gid,zone:D})){i(A.setSuggest(null));return}i(A.setSuggest({rect:G.rect,zone:D}));return}if(f.kind==="tab"){const G=f.cache.tabbars.find(({rect:R})=>m>=R.left&&m<=R.right&&x>=R.top&&x<=R.bottom);if(G){const _=Array.from(G.el.querySelectorAll("[role='tab']")).map(H=>H.getBoundingClientRect()),j=_.map(H=>H.left+H.width/2),O=j.findIndex(H=>m<H),N=O===-1?j.length:O,Ct=_.length===0?G.rect.left+8:N===0?_[0].left:N===_.length?_[_.length-1].right:(_[N-1].right+_[N].left)/2;i(A.setTabbarHover({groupId:G.gid,index:N,rect:G.rect,insertX:Ct}))}else i(A.setTabbarHover(null));const D=f.cache.contents.find(({rect:R})=>m>=R.left&&m<=R.right&&x>=R.top&&x<=R.bottom);if(!D){i(A.setSuggest(null));return}const T=q(D.rect,m,x);if(o&&!o({targetGroupId:D.gid,zone:T})){i(A.setSuggest(null));return}i(A.setSuggest({rect:D.rect,zone:T}))}}),p=E.useEffectEvent(w=>{const y=t.current,m=a;if(i(A.reset()),!y)return;const x=w.clientX,f=w.clientY;if(m.phase.kind==="idle")return;const S=Math.abs(x-m.phase.startX),C=Math.abs(f-m.phase.startY);if(!(S<e&&C<e)){if(m.phase.kind==="content"){const G=m.phase.cache.groups.find(({rect:R})=>x>=R.left&&x<=R.right&&f>=R.top&&f<=R.bottom);if(!G)return;const D=G.gid??null;if(!D)return;const T=q(G.rect,x,f);if(o&&!o({targetGroupId:D,zone:T}))return;n({fromGroupId:m.phase.fromGroupId,tabId:m.phase.tabId,targetGroupId:D,zone:T});return}if(m.phase.kind==="tab"){const G=m.phase.cache.tabbars.find(({rect:T})=>x>=T.left&&x<=T.right&&f>=T.top&&f<=T.bottom);if(G){const T=G.gid;if(!T)return;const _=Array.from(G.el.querySelectorAll("[role='tab']")).map(N=>{const Z=N.getBoundingClientRect();return Z.left+Z.width/2}),j=_.findIndex(N=>x<N),O=j===-1?_.length:j;r({fromGroupId:m.phase.fromGroupId,tabId:m.phase.tabId,targetGroupId:T,targetIndex:O});return}const D=m.phase.cache.contents.find(({rect:T})=>x>=T.left&&x<=T.right&&f>=T.top&&f<=T.bottom);if(D){const T=D.gid??null;if(!T)return;const R=q(D.rect,x,f);if(o&&!o({targetGroupId:T,zone:R}))return;n({fromGroupId:m.phase.fromGroupId,tabId:m.phase.tabId,targetGroupId:T,zone:R})}}}}),g=E.useEffectEvent(()=>{i(A.reset())});u.useEffect(()=>{if(a.phase.kind!=="idle")return window.addEventListener("pointermove",l),window.addEventListener("pointerup",p,{once:!0}),window.addEventListener("pointercancel",g,{once:!0}),()=>{window.removeEventListener("pointermove",l),window.removeEventListener("pointerup",p),window.removeEventListener("pointercancel",g)}},[a.phase.kind]);const v=u.useCallback((w,y,m)=>{if(m.button!==0)return;m.currentTarget.setPointerCapture(m.pointerId);const x=d();i(A.startContent({x:m.clientX,y:m.clientY,groupId:w,tabId:y,cache:x}))},[d]),b=u.useCallback((w,y,m)=>{if(m.button!==0)return;const x=m.currentTarget;x&&x.setPointerCapture(m.pointerId);const f=d();i(A.startTab({x:m.clientX,y:m.clientY,groupId:y,tabId:w,cache:f,element:x}))},[d]),I=u.useMemo(()=>({suggest:a.suggest,isTabDragging:a.phase.kind==="tab",draggingTabId:a.phase.kind==="tab"?a.phase.tabId:null,dragPointer:a.pointer,tabbarHover:a.tabbarHover,draggingTabElement:a.draggingTabElement,onStartContentDrag:v,onStartTabDrag:b}),[a.suggest,a.pointer,a.tabbarHover,a.phase,a.draggingTabElement,v,b]);return h.jsx(mt.Provider,{value:I,children:s})},ot={display:"inline-flex",alignItems:"center",userSelect:"none"},ee=({groupId:t,tab:e,active:n,dragging:r,onClickTab:o,onStartDrag:s,onCloseTab:a,tabComponent:i,tabElement:c,onDoubleClick:d})=>{const l=u.useEffectEvent(()=>{o(e.id)}),p=u.useEffectEvent(I=>{s&&I.button===0&&s(e.id,t,I)}),g=()=>{const I=!!a;return h.jsx(u.Activity,{mode:I?"visible":"hidden",children:h.jsx("button",{type:"button","aria-label":`Close tab ${e.title}`,onClick:w=>{a&&(w.stopPropagation(),a(t,e.id))},style:{marginLeft:6},tabIndex:I?void 0:-1,disabled:!I,"aria-hidden":I?void 0:!0,children:"×"})})},v={role:"tab","aria-selected":n,tabIndex:n?0:-1,style:ot,onClick:l,onPointerDown:p,onDoubleClick:d,"data-tab-id":e.id,"data-active":n?"true":"false","data-dragging":r?"true":"false",children:h.jsxs(h.Fragment,{children:[h.jsx("span",{children:e.title}),g()]})},b={type:"button",role:"tab","aria-selected":n,tabIndex:n?0:-1,style:ot,onClick:()=>{o(e.id)},onPointerDown:I=>{s&&I.button===0&&s(e.id,t,I)},onDoubleClick:d,children:h.jsx("span",{children:e.title})};return c?c(b):i?h.jsx(i,{...b}):h.jsx("div",{...v})},ne={display:"flex",alignItems:"center"},re={flex:"1 1 auto",alignSelf:"stretch"},oe=({group:t,onClickTab:e,onStartDrag:n,rootRef:r,component:o,element:s,tabComponent:a,tabElement:i,onAddTab:c,onCloseTab:d,doubleClickToAdd:l})=>{const{isTabDragging:p,draggingTabId:g}=K(),v=u.useRef(null),b=u.useCallback(f=>{if(v.current=f,!!r){if(typeof r=="function"){r(f);return}try{r.current=f}catch{}}},[r]),I=u.useEffectEvent(f=>{const S=v.current??f.currentTarget;if(!S)return;const C=Array.from(S.querySelectorAll('[role="tab"]'));if(C.length===0)return;const G=j=>{const O=Math.max(0,Math.min(j,C.length-1)),N=C[O];N&&N.focus()},D=document.activeElement,T=D?C.indexOf(D):C.findIndex(j=>j.getAttribute("data-tab-id")===t.activeTabId);if(f.key==="ArrowRight"){f.preventDefault();const j=T>=0?T+1:0;G(j>=C.length?0:j);return}if(f.key==="ArrowLeft"){f.preventDefault();const j=T>=0?T-1:C.length-1;G(j<0?C.length-1:j);return}if(f.key==="Home"){f.preventDefault(),G(0);return}if(f.key==="End"){f.preventDefault(),G(C.length-1);return}if(f.key==="Enter"||f.key===" "){f.preventDefault();const O=(T>=0?C[T]:null)?.getAttribute("data-tab-id")??null;O&&e(O);return}if(f.key==="Delete"||f.key==="Backspace"){if(d){f.preventDefault();const O=(T>=0?C[T]:null)?.getAttribute("data-tab-id")??null;O&&d(t.id,O)}return}const R=(f.ctrlKey?1:0)+(f.metaKey?1:0)>0,_=typeof f.key=="string"?f.key.toLowerCase():"";if(R&&_==="t"){c&&(f.preventDefault(),c(t.id));return}});u.useEffect(()=>{const f=v.current;if(!f)return;const S=f.querySelector(`[role="tab"][data-tab-id="${t.activeTabId}"]`);if(S===document.activeElement)return;!f.contains(document.activeElement)&&S&&S.focus()},[t.activeTabId]);const w={style:ne,role:"tablist","data-tabbar":"true","data-group-id":t.id,"data-dragging":p?"true":"false",onKeyDown:I},y=E.useElementComponentWrapper({element:s,component:o}),m=()=>c?h.jsx("button",{type:"button","aria-label":"Add tab",onClick:()=>{c(t.id)},children:"+"}):null,x=u.useCallback(()=>{l&&c&&c(t.id)},[l,c,t.id]);return h.jsxs(y,{...w,ref:b,onDoubleClick:x,children:[t.tabs.map((f,S)=>h.jsx(ee,{groupId:t.id,tab:f,active:t.activeTabId===f.id,dragging:g===f.id,onClickTab:e,onStartDrag:n,onCloseTab:d,tabComponent:a,tabElement:i,onDoubleClick:C=>C.stopPropagation()},`${t.id}:${f.id}:${S}`)),h.jsx("span",{style:re}),m()]})},se=({id:t,TabBarComponent:e,PanelGroupComponent:n})=>{const{getGroup:r,getGroupContent:o,onClickTab:s,onAddTab:a,onCloseTab:i,onStartTabDrag:c,doubleClickToAdd:d,registerContentContainer:l}=Ft(),{setGroupEl:p,setTabbarEl:g,setContentEl:v}=ft(),b=u.useCallback(S=>{p(t,S)},[t,p]),I=u.useCallback(S=>{v(t,S),l(t,S)},[t,v,l]),w=u.useCallback(S=>{g(t,S)},[t,g]),y=r(t);if(!y)return null;const m=o(t),x=e??oe,f=n??(S=>h.jsx(gt,{...S}));return h.jsx(f,{group:y,tabbar:h.jsx(x,{rootRef:w,group:y,onClickTab:S=>s(t,S),onAddTab:a,onCloseTab:i,onStartDrag:(S,C,G)=>c(S,C,G),doubleClickToAdd:d}),content:m,groupRef:b,contentRef:I})},ie=(t,e)=>{const n=new Array(16);for(let r=0;r<4;r++)for(let o=0;o<4;o++)n[r*4+o]=t[0+o]*e[r*4+0]+t[4+o]*e[r*4+1]+t[8+o]*e[r*4+2]+t[12+o]*e[r*4+3];return n},U=t=>{if(t.length!==16)throw new Error("Matrix must have exactly 16 values");const e=Object.freeze([...t]),n=r=>{const o=ie(e,r);return U(o)};return Object.freeze({translate:(r=0,o=0,s=0)=>n([1,0,0,0,0,1,0,0,0,0,1,0,r,o,s,1]),translate3d:(r,o,s)=>n([1,0,0,0,0,1,0,0,0,0,1,0,r,o,s,1]),translateX:r=>n([1,0,0,0,0,1,0,0,0,0,1,0,r,0,0,1]),translateY:r=>n([1,0,0,0,0,1,0,0,0,0,1,0,0,r,0,1]),translateZ:r=>n([1,0,0,0,0,1,0,0,0,0,1,0,0,0,r,1]),scale:(r=1,o=1,s=1)=>n([r,0,0,0,0,o,0,0,0,0,s,0,0,0,0,1]),scale3d:(r,o,s)=>n([r,0,0,0,0,o,0,0,0,0,s,0,0,0,0,1]),scaleX:r=>n([r,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1]),scaleY:r=>n([1,0,0,0,0,r,0,0,0,0,1,0,0,0,0,1]),scaleZ:r=>n([1,0,0,0,0,1,0,0,0,0,r,0,0,0,0,1]),rotateX:r=>{const o=Math.cos(r),s=Math.sin(r);return n([1,0,0,0,0,o,s,0,0,-s,o,0,0,0,0,1])},rotateY:r=>{const o=Math.cos(r),s=Math.sin(r);return n([o,0,-s,0,0,1,0,0,s,0,o,0,0,0,0,1])},rotateZ:r=>{const o=Math.cos(r),s=Math.sin(r);return n([o,s,0,0,-s,o,0,0,0,0,1,0,0,0,0,1])},rotate:(r,o,s,a)=>{const i=Math.sqrt(o*o+s*s+a*a);if(i===0)return U(e);o/=i,s/=i,a/=i;const c=Math.cos(r),d=Math.sin(r),l=1-c;return n([l*o*o+c,l*o*s+d*a,l*o*a-d*s,0,l*o*s-d*a,l*s*s+c,l*s*a+d*o,0,l*o*a+d*s,l*s*a-d*o,l*a*a+c,0,0,0,0,1])},rotate3d:(r,o,s,a)=>{const i=Math.sqrt(r*r+o*o+s*s);if(i===0)return U(e);r/=i,o/=i,s/=i;const c=Math.cos(a),d=Math.sin(a),l=1-c;return n([l*r*r+c,l*r*o+d*s,l*r*s-d*o,0,l*r*o-d*s,l*o*o+c,l*o*s+d*r,0,l*r*s+d*o,l*o*s-d*r,l*s*s+c,0,0,0,0,1])},skew:(r=0,o=0)=>{const s=Math.tan(r),a=Math.tan(o);return n([1,a,0,0,s,1,0,0,0,0,1,0,0,0,0,1])},skewX:r=>{const o=Math.tan(r);return n([1,0,0,0,o,1,0,0,0,0,1,0,0,0,0,1])},skewY:r=>{const o=Math.tan(r);return n([1,o,0,0,0,1,0,0,0,0,1,0,0,0,0,1])},perspective:r=>{if(r===0)throw new Error("Perspective distance cannot be zero");return n([1,0,0,0,0,1,0,0,0,0,1,-1/r,0,0,0,1])},toCSS:()=>`matrix3d(${e.join(", ")})`,toArray:()=>e,toString:()=>[`[${e[0]}, ${e[4]}, ${e[8]}, ${e[12]}]`,`[${e[1]}, ${e[5]}, ${e[9]}, ${e[13]}]`,`[${e[2]}, ${e[6]}, ${e[10]}, ${e[14]}]`,`[${e[3]}, ${e[7]}, ${e[11]}, ${e[15]}]`].join(`
 `)})},ae=()=>U([1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1]),ce={position:"fixed",inset:0,pointerEvents:"none",zIndex:P.DROP_SUGGEST_Z_INDEX},ue={position:"absolute",border:`${P.DROP_SUGGEST_BORDER_WIDTH} dashed ${P.DROP_SUGGEST_BORDER_COLOR}`,background:P.DROP_SUGGEST_BG_COLOR,borderRadius:P.DROP_SUGGEST_BORDER_RADIUS,transformOrigin:"top left"},L=(t,e)=>e<=0?0:E.clampNumber(t/e,0),le=(t,e,n)=>{const{width:r,height:o}=t,s=n/2,a=r>0?r:1,i=o>0?o:1,c={translateX:n,translateY:n,scaleX:L(E.clampNumber(r-n*2,0),a),scaleY:L(E.clampNumber(o-n*2,0),i)},d={translateX:n,translateY:n,scaleX:L(E.clampNumber(r/2-n*1.5,0),a),scaleY:L(E.clampNumber(o-n*2,0),i)},l={translateX:r/2+s,translateY:n,scaleX:L(E.clampNumber(r/2-n*1.5,0),a),scaleY:L(E.clampNumber(o-n*2,0),i)},p={translateX:n,translateY:n,scaleX:L(E.clampNumber(r-n*2,0),a),scaleY:L(E.clampNumber(o/2-n*1.5,0),i)},g={translateX:n,translateY:o/2+s,scaleX:L(E.clampNumber(r-n*2,0),a),scaleY:L(E.clampNumber(o/2-n*1.5,0),i)},v={center:c,left:d,right:l,top:p,bottom:g},{translateX:b,translateY:I,scaleX:w,scaleY:y}=v[e];return ae().translate(b,I,0).scale(w,y,1).toCSS()},de=(t,e)=>{const n=P.DROP_SUGGEST_PADDING_PX;return{...ue,left:t.left,top:t.top,width:t.width,height:t.height,transform:le(t,e,n)}},pe=({suggest:t})=>{if(!t)return null;const{rect:e,zone:n}=t,r=de(e,n);return h.jsx("div",{style:ce,children:h.jsx("div",{style:r})})},fe=typeof window<"u"&&typeof document<"u",ge=t=>{const[e,n]=u.useState(null),[r,o]=u.useState(null);return tt.useIsomorphicLayoutEffect(()=>{if(!fe||!t){n(null),o(null);return}const s=t.getBoundingClientRect();n({width:s.width,height:s.height}),o(t.outerHTML)},[t]),{html:r,size:e}},be={position:"fixed",inset:0,pointerEvents:"none",zIndex:P.TAB_DRAG_OVERLAY_Z_INDEX},he={position:"absolute",width:P.TAB_DRAG_INSERT_GUIDE_WIDTH,borderRadius:P.TAB_DRAG_INSERT_GUIDE_BORDER_RADIUS,background:P.TAB_DRAG_INSERT_GUIDE_COLOR,boxShadow:P.TAB_DRAG_INSERT_GUIDE_SHADOW},me=()=>{const{isTabDragging:t,draggingTabId:e,dragPointer:n,tabbarHover:r,draggingTabElement:o}=K(),{html:s,size:a}=ge(o),i=n!==null&&e!==null,c=u.useMemo(()=>{if(!(!i||!n))return{position:"absolute",left:n.x,top:n.y,transform:`translate(${P.TAB_DRAG_PREVIEW_OFFSET_X}, ${P.TAB_DRAG_PREVIEW_OFFSET_Y})`,pointerEvents:"none"}},[i,n]),d=u.useMemo(()=>{if(!(!c||!o))return a?{...c,width:a.width,height:a.height}:c},[c,o,a]),l=u.useMemo(()=>{if(r)return{...he,left:r.insertX,top:r.rect.top+4,height:Math.max(0,r.rect.height-8)}},[r]);return t?h.jsxs("div",{style:be,children:[h.jsx(u.Activity,{mode:d?"visible":"hidden",children:h.jsx("div",{style:d,children:h.jsx("div",{style:{width:"100%",height:"100%",pointerEvents:"none"},dangerouslySetInnerHTML:{__html:s??""}})})}),h.jsx(u.Activity,{mode:l?"visible":"hidden",children:h.jsx("div",{style:l})})]}):null},M=t=>t.type==="group",X=(t,e=[])=>{if(M(t))return[...e,t.groupId];const n=X(t.a,e);return X(t.b,n)},W=(t,e)=>e.reduce((n,r)=>M(n)?n:n[r],t),Y=(t,e,n)=>{if(e.length===0)return n;const[r,...o]=e;return M(t)?t:r==="a"?{...t,a:Y(t.a,o,n)}:{...t,b:Y(t.b,o,n)}},V=(t,e,n=[])=>{if(M(t))return t.groupId===e?{splitPath:null,side:null}:null;if(M(t.a)&&t.a.groupId===e)return{splitPath:n,side:"a"};if(M(t.b)&&t.b.groupId===e)return{splitPath:n,side:"b"};const r=V(t.a,e,[...n,"a"]);return r||V(t.b,e,[...n,"b"])},vt=(t,e,n,r)=>{const o=r(),s=V(t,e),a={type:"split",direction:n,ratio:.5,a:{type:"group",groupId:e},b:{type:"group",groupId:o}};if(!s||s.splitPath===null)return{tree:a,newGroupId:o};const i=s.splitPath,c=W(t,i);if(M(c))return{tree:a,newGroupId:o};const d=s.side==="a"?{...c,a}:{...c,b:a};return{tree:Y(t,i,d),newGroupId:o}},ve=(t,e)=>{const n=V(t,e);if(!n||n.splitPath===null)return{tree:t,survivorGroupId:e};const r=n.splitPath,o=W(t,r);if(M(o))return{tree:t,survivorGroupId:e};const s=n.side==="a"?o.b:o.a,a=Y(t,r,s),i=M(s)?s.groupId:X(s)[0]??null;return{tree:a,survivorGroupId:i}},Ie=(t,e,n)=>{const r=W(t,e);if(M(r))return t;const o={...r,ratio:E.clampNumber(n,.05,.95)};return Y(t,e,o)},J=t=>{if(Object.keys(t.groups).filter(o=>t.groups[o].tabIds.length===0).length===0)return t;const r=(o,s)=>{const a=o.groups[s];if(!a||a.tabs.length>0||Object.keys(o.groups).length<=1)return o;const{tree:c,survivorGroupId:d}=ve(o.tree,s),{[s]:l,...p}=o.groups,g=X(c),v=o.focusedGroupId===s?d??g[0]??null:o.focusedGroupId;return{...o,tree:c,groups:p,groupOrder:g,focusedGroupId:v}};return t.groupOrder.reduce((o,s)=>r(o,s),t)},we=t=>({id:t,tabIds:[],tabs:[],activeTabId:null}),st=(t,e,n,r)=>{const o={...t.groups},s=o[e];if(!s)throw new Error(`Group ${e} does not exist.`);const a={...t.panels,[n.id]:n},i=[...s.tabIds,n.id],c=r?n.id:s.activeTabId??n.id,d=i.map(p=>a[p]),l={...s,tabIds:i,tabs:d,activeTabId:c};return o[e]=l,{...t,panels:a,groups:o}},xe=(t,e,n)=>{const r={...t.groups},o=r[e];if(!o)throw new Error(`Group ${e} does not exist.`);const s=o.tabIds.filter(c=>c!==n),a=s.map(c=>t.panels[c]),i=o.activeTabId===n?s[0]??null:o.activeTabId;return r[e]={...o,tabIds:s,tabs:a,activeTabId:i},{...t,groups:r}},it=(t,e,n,r,o)=>{const s=t.groups[e],a=t.groups[n];if(!s||!a)throw new Error("moveTab: source or target group is missing.");const i={...t.groups},c=s.tabIds.filter(p=>p!==r),d=[...a.tabIds.filter(p=>p!==r),r],l=s.activeTabId===r?c[0]??null:s.activeTabId;return i[e]={...s,tabIds:c,tabs:c.map(p=>t.panels[p]),activeTabId:l},i[n]={...a,tabIds:d,tabs:d.map(p=>t.panels[p]),activeTabId:r},{...t,groups:i}},It=(t,e,n)=>{const r=t.groups[e];if(!r)throw new Error(`setActiveTab: group ${e} not found.`);if(!r.tabIds.some(s=>s===n))throw new Error(`setActiveTab: tab ${n} not found in group ${e}.`);const o={...t.groups,[e]:{...r,activeTabId:n}};return{...t,groups:o,focusedGroupId:e}},at=(t,e,n,r,o)=>{const s=t.groups[e];if(!s)throw new Error(`addTabToGroupAtIndex: group ${e} not found.`);const a={...t.panels,[n.id]:n},i=s.tabIds.slice(),c=Math.max(0,Math.min(r,i.length));i.splice(c,0,n.id);const d=i.map(g=>a[g]),l=o?n.id:s.activeTabId??n.id,p={...t.groups,[e]:{...s,tabIds:i,tabs:d,activeTabId:l}};return{...t,panels:a,groups:p}},B=(t,e)=>{if(!t.groups[e])throw new Error(`setFocusedGroup: group ${e} not found.`);return{...t,focusedGroupId:e}},ye=(t,e)=>{const n=e-1,r=t.groupOrder[n];return r?B(t,r):t},Se=t=>{const e=t.groupOrder,n=t.focusedGroupId;if(!n){const s=e[0];return s?B(t,s):t}const r=e.indexOf(n),o=e[(r+1)%e.length];return B(t,o)},Te=t=>{const e=t.groupOrder,n=t.focusedGroupId;if(!n){const s=e[e.length-1];return s?B(t,s):t}const r=e.indexOf(n),o=e[(r-1+e.length)%e.length];return B(t,o)},wt=(t,e,n,r)=>{const{tree:o,newGroupId:s}=vt(t.tree,e,n,r),a={...t.groups,[s]:we(s)},i=X(o);return{...t,tree:o,groups:a,groupOrder:i,focusedGroupId:s}},Ee=t=>{const n={type:"group",groupId:"g_1"},r=Object.fromEntries(t.map(i=>[i.id,i])),s={g_1:{id:"g_1",tabIds:t.map(i=>i.id),tabs:t,activeTabId:t[0]?.id??null}};return{tree:n,panels:r,groups:s,groupOrder:["g_1"],focusedGroupId:"g_1"}},Ge=u.createContext(null),Ce=({value:t,children:e})=>h.jsx(Ge.Provider,{value:t,children:e}),xt=u.createContext(null),Re=()=>{const t=u.useContext(xt);if(!t)throw new Error("useTree must be used within TreeProvider");return t},Pe=({value:t,children:e})=>h.jsx(xt.Provider,{value:t,children:e}),De=u.createContext(null),je=({value:t,children:e})=>h.jsx(De.Provider,{value:t,children:e}),$=t=>{const e=E.toFiniteNumberOr(t,Number.POSITIVE_INFINITY);return E.clampNumber(e,1)},Ae=t=>typeof t=="object"&&t!==null,ke=t=>Ae(t)?"rows"in t?!0:"cols"in t:!1,yt=t=>{if(!t)return{rows:Number.POSITIVE_INFINITY,cols:Number.POSITIVE_INFINITY};if(typeof t=="number"){const n=$(t);return{rows:n,cols:n}}if(ke(t))return{rows:$(t.rows),cols:$(t.cols)};const e=t;return{rows:$(e.maxHorizontal),cols:$(e.maxVertical)}},Q=t=>{if(M(t))return{horizontal:1,vertical:1};const e=Q(t.a),n=Q(t.b);return t.direction==="horizontal"?{horizontal:e.horizontal+n.horizontal,vertical:Math.max(e.vertical,n.vertical)}:{horizontal:Math.max(e.horizontal,n.horizontal),vertical:e.vertical+n.vertical}},_e=(t,e,n)=>{const{tree:r}=vt(t,e,n,()=>"__preview__");return r},et=(t,e,n,r)=>{if(!Number.isFinite(r.rows)&&!Number.isFinite(r.cols))return!0;const o=_e(t,e,n),s=Q(o);return!(s.horizontal>r.rows||s.vertical>r.cols)},St={splitFocused:k("panelState/splitFocused",t=>({direction:t})),focusGroupIndex:k("panelState/focusGroupIndex",t=>({index1Based:t})),focusNextGroup:k("panelState/focusNextGroup"),focusPrevGroup:k("panelState/focusPrevGroup"),setActiveTab:k("panelState/setActiveTab",(t,e)=>({groupId:t,tabId:e})),addTab:k("panelState/addTab",t=>t),addNewTab:k("panelState/addNewTab",t=>t),removeTab:k("panelState/removeTab",(t,e)=>({groupId:t,tabId:e})),contentDrop:k("panelState/contentDrop",t=>t),tabDrop:k("panelState/tabDrop",t=>t),adjustSplitRatio:k("panelState/adjustSplitRatio",t=>t)},Me=(t,e,n)=>{const r=t.groups[e.fromGroupId],o=t.groups[e.targetGroupId];if(!r||!o||!r.tabs.find(p=>p.id===e.tabId))return t;if(e.zone==="center"&&e.fromGroupId===e.targetGroupId)return It(t,e.fromGroupId,e.tabId);if(e.zone==="center"){const p=it(t,e.fromGroupId,e.targetGroupId,e.tabId);return B(p,e.targetGroupId)}const a=e.zone==="left"||e.zone==="right"?"vertical":"horizontal";if(!et(t.tree,e.targetGroupId,a,n.splitLimits))return t;const i=n.createGroupId(),c=wt(t,e.targetGroupId,a,()=>i),d=e.zone==="left"||e.zone==="top"?e.targetGroupId:i,l=it(c,e.fromGroupId,d,e.tabId);return B(l,d)},Oe=(t,e)=>{const n=t.groups[e.fromGroupId],r=t.groups[e.targetGroupId];if(!n||!r||!t.panels[e.tabId])return t;if(e.fromGroupId===e.targetGroupId){const g=n.tabIds.filter(y=>y!==e.tabId),v=Math.max(0,Math.min(e.targetIndex,g.length)),b=g.slice(0,v).concat([e.tabId],g.slice(v)),I=b.map(y=>t.panels[y]).filter(Boolean),w={...t.groups,[e.fromGroupId]:{...n,tabIds:b,tabs:I}};return{...t,groups:w}}const s={...t.groups},a=n.tabIds.filter(g=>g!==e.tabId),i=a.map(g=>t.panels[g]);s[e.fromGroupId]={...n,tabIds:a,tabs:i,activeTabId:n.activeTabId===e.tabId?i[0]?.id??null:n.activeTabId};const c=r.tabIds.filter(g=>g!==e.tabId),d=Math.max(0,Math.min(e.targetIndex,c.length)),l=c.slice(0,d).concat([e.tabId],c.slice(d)),p=l.map(g=>t.panels[g]).filter(Boolean);return s[e.targetGroupId]={...r,tabIds:l,tabs:p,activeTabId:e.tabId},{...t,groups:s,focusedGroupId:e.targetGroupId}},Ne=bt(St,{splitFocused:(t,e,n)=>{const r=t.focusedGroupId??t.groupOrder[0]??null;return!r||!et(t.tree,r,e.payload.direction,n.splitLimits)?t:wt(t,r,e.payload.direction,n.createGroupId)},focusGroupIndex:(t,e)=>ye(t,e.payload.index1Based),focusNextGroup:t=>Se(t),focusPrevGroup:t=>Te(t),setActiveTab:(t,e)=>It(t,e.payload.groupId,e.payload.tabId),addTab:(t,e)=>{const{groupId:n,tab:r,index:o,makeActive:s}=e.payload;return typeof o=="number"?at(t,n,r,o,s??!0):st(t,n,r,s??!0)},addNewTab:(t,e,n)=>{if(!n.createPanelId)throw new Error("addNewTab requires PanelSystemProvider.createPanelId");const o={id:n.createPanelId(),title:e.payload.title,render:()=>e.payload.title},{groupId:s,index:a,makeActive:i}=e.payload;return typeof a=="number"?at(t,s,o,a,i??!0):st(t,s,o,i??!0)},removeTab:(t,e)=>xe(t,e.payload.groupId,e.payload.tabId),contentDrop:(t,e,n)=>Me(t,e.payload,n),tabDrop:(t,e)=>Oe(t,e.payload),adjustSplitRatio:(t,e)=>{const n=W(t.tree,e.payload.path);if(M(n))return t;const r=Ie(t.tree,e.payload.path,n.ratio+e.payload.deltaRatio);return{...t,tree:r}}}),ct=(t,e,n)=>{const r=Ne[e.type];if(!r)return t;const o=r(t,e,n);return J(o)},Tt=u.createContext(null),z=()=>{const t=u.useContext(Tt);if(!t)throw new Error("usePanelSystem must be used within PanelSystemProvider");return t},Le=({initialState:t,createGroupId:e,createPanelId:n,state:r,onStateChange:o,splitLimits:s,children:a})=>{const i=u.useMemo(()=>J(t),[t]),c=u.useMemo(()=>yt(s),[s]),d=u.useRef({createGroupId:e,splitLimits:c,createPanelId:n});d.current.createGroupId=e,d.current.splitLimits=c,d.current.createPanelId=n;const[l,p]=u.useReducer((S,C)=>ct(S,C,d.current),i),g=u.useMemo(()=>r?J(r):l,[r,l]),v=u.useRef(g);v.current=g;const b=r!==void 0,I=u.useCallback(S=>{if(b){const C=ct(v.current,S,d.current);o?.(C);return}p(S)},[b,o,p]),w=u.useMemo(()=>Zt(St,I),[I]),y=u.useMemo(()=>({setActiveTab:w.setActiveTab,tabDrop:w.tabDrop}),[w]),m=u.useMemo(()=>({adjustSplitRatio:w.adjustSplitRatio}),[w]),x=u.useMemo(()=>({focusGroupIndex:w.focusGroupIndex,focusNextGroup:w.focusNextGroup,focusPrevGroup:w.focusPrevGroup}),[w]),f=u.useMemo(()=>({state:g,dispatch:I,actions:w}),[g,I,w]);return h.jsx(Tt.Provider,{value:f,children:h.jsx(Ce,{value:y,children:h.jsx(Pe,{value:m,children:h.jsx(je,{value:x,children:a})})})})},Be=()=>{const{actions:t}=z();return u.useMemo(()=>({splitFocused:e=>{t.splitFocused(e)},focusGroupIndex:e=>{t.focusGroupIndex(e)},focusNextGroup:()=>{t.focusNextGroup()},focusPrevGroup:()=>{t.focusPrevGroup()},closeFocusedGroup:()=>{}}),[t])},He=()=>{const{actions:t}=z(),e=u.useCallback(({fromGroupId:r,tabId:o,targetGroupId:s,zone:a})=>{t.contentDrop({fromGroupId:r,tabId:o,targetGroupId:s,zone:a})},[t]),n=u.useCallback(({fromGroupId:r,tabId:o,targetGroupId:s,targetIndex:a})=>{t.tabDrop({fromGroupId:r,tabId:o,targetGroupId:s,targetIndex:a})},[t]);return{onCommitContentDrop:e,onCommitTabDrop:n}},ze=()=>{const t=Ot(),e=Be();return u.useEffect(()=>{Bt(t,e)},[t,e]),null},Et=u.createContext(null),$e=()=>{const t=u.useContext(Et);if(!t)throw new Error("useContentRegistry must be used within ContentRegistryProvider");return t},Fe=t=>{const e=document.createElement("div");return e.setAttribute("data-panel-wrapper",t),e.style.display="contents",e},Xe=(t,e,n)=>{const[r]=u.useState(()=>Fe(t));return tt.useIsomorphicLayoutEffect(()=>(r.style.display=n?"contents":"none",e&&r.parentElement!==e&&e.appendChild(r),()=>{r.parentElement?.removeChild(r)}),[r,e,n]),r},Gt=u.memo(({panelId:t,content:e,placement:n,containerElement:r})=>{const o=n?.isActive??!1,s=Xe(t,r,o);return Pt.createPortal(h.jsx(u.Activity,{mode:o?"visible":"hidden",children:e}),s)});Gt.displayName="PanelContentHost";const Ye=({children:t,panels:e,placements:n})=>{const[r,o]=u.useState(new Map),s=u.useCallback((g,v)=>{o(b=>{const I=new Map(b);return v?I.set(g,v):I.delete(g),I})},[]),a=u.useMemo(()=>({registerContentContainer:s}),[s]),i=u.useRef(e);i.current=e;const c=u.useCallback(g=>{const v=i.current[g];return v?v.render(v.id):null},[]),d=u.useMemo(()=>Object.keys(e),[e]),{getCachedContent:l}=Dt.useContentCache({resolveContent:c,validIds:d}),p=Object.keys(e);return h.jsxs(Et.Provider,{value:a,children:[t,p.map(g=>{if(!e[g])return null;const b=n[g]??null,I=b?r.get(b.groupId)??null:null,w=l(g);return h.jsx(Gt,{panelId:g,content:w,placement:b,containerElement:I},g)})]})},qe=({children:t,emptyContentComponent:e,doubleClickToAdd:n})=>{const r=K(),{state:o,actions:s}=z(),{registerContentContainer:a}=$e(),i=u.useCallback(()=>u.createElement("div",{style:{color:"#888",fontSize:12,padding:12}},"No tabs"),[]),c=e??i,d=u.useCallback(y=>{const m=o.groups[y];if(!m)return null;const x=m.tabIds.map(f=>o.panels[f]).filter(Boolean);return{...m,tabs:x}},[o.groups,o.panels]),l=u.useCallback(y=>{const m=o.groups[y];return!m||m.tabIds.length===0?h.jsx(c,{}):null},[o.groups,c]),p=u.useCallback((y,m)=>{s.setActiveTab(y,m)},[s]),g=u.useCallback(y=>{s.addNewTab({groupId:y,title:"New Tab",makeActive:!0})},[s]),v=u.useCallback((y,m)=>{s.removeTab(y,m)},[s]),b=u.useCallback((y,m,x)=>{s.setActiveTab(m,y),r.onStartTabDrag(y,m,x)},[s,r]),I=u.useCallback((y,m)=>{const x=o.groups[y];!x||!x.activeTabId||r.onStartContentDrag(y,x.activeTabId,m)},[o.groups,r]),w=u.useMemo(()=>({getGroup:d,getGroupContent:l,onClickTab:p,onAddTab:g,onCloseTab:v,onStartTabDrag:b,onStartContentDrag:I,doubleClickToAdd:n,registerContentContainer:a}),[d,l,p,g,v,b,I,n,a]);return h.jsx(Xt,{value:w,children:t})},Ue=({children:t,emptyContentComponent:e,doubleClickToAdd:n})=>{const{state:r}=z(),o=u.useMemo(()=>{const s={};for(const[a,i]of Object.entries(r.groups))for(const c of i.tabIds)s[c]={groupId:a,isActive:c===i.activeTabId};return s},[r.groups]);return h.jsx(Ye,{panels:r.panels,placements:o,children:h.jsx(qe,{emptyContentComponent:e,doubleClickToAdd:n,children:t})})},F=(t,e,n,r)=>{if(M(t))return r;const o=t.direction,s=o==="vertical"?n.x+n.w*t.ratio:n.y+n.h*t.ratio;if(r.push({path:e,direction:o,parentRect:n,linePos:s}),o==="vertical"){const c=n.w*t.ratio,d=n.w-c;return F(t.a,[...e,"a"],{x:n.x,y:n.y,w:c,h:n.h},r),F(t.b,[...e,"b"],{x:n.x+c,y:n.y,w:d,h:n.h},r),r}const a=n.h*t.ratio,i=n.h-a;return F(t.a,[...e,"a"],{x:n.x,y:n.y,w:n.w,h:a},r),F(t.b,[...e,"b"],{x:n.x,y:n.y+a,w:n.w,h:i},r),r},Ve=({containerRef:t})=>{const{state:e}=z(),{adjustSplitRatio:n}=Re(),r=u.useMemo(()=>F(e.tree,[],{x:0,y:0,w:100,h:100},[]),[e.tree]),[o,s]=u.useState(null);if(tt.useIsomorphicLayoutEffect(()=>{const i=t.current;if(!i)return;const c=()=>{const v=i.getBoundingClientRect();s({left:v.left,top:v.top,width:v.width,height:v.height})};c();function d(){try{const v=window.ResizeObserver;return typeof v=="function"?v:null}catch{return null}}const l=d(),p=l?new l(()=>c()):null;p&&p.observe(i);const g=()=>c();return window.addEventListener("scroll",g,!0),()=>{window.removeEventListener("scroll",g,!0),p&&p.disconnect()}},[t,e.tree]),!o)return null;const a=(i,c)=>{const d={left:o.left+o.width*i.parentRect.x/100,top:o.top+o.height*i.parentRect.y/100,width:o.width*i.parentRect.w/100,height:o.height*i.parentRect.h/100},l=P.SPLIT_HANDLE_THICKNESS;if(i.direction==="vertical"){const b=d.left+d.width*(i.linePos-i.parentRect.x)/i.parentRect.w,I={position:"fixed",left:`calc(${Math.round(b)}px - ${l} / 2)`,top:Math.round(d.top),width:l,height:Math.round(d.height),cursor:"col-resize",pointerEvents:"auto"},w=y=>{const m=o.width*i.parentRect.w/100,x=m===0?0:y/m;n({path:i.path,deltaRatio:x})};return h.jsx("div",{style:I,children:h.jsx(E.ResizeHandle,{direction:"vertical",onResize:w})},`split-${c}`)}const p=d.top+d.height*(i.linePos-i.parentRect.y)/i.parentRect.h,g={position:"fixed",left:Math.round(d.left),top:`calc(${Math.round(p)}px - ${l} / 2)`,width:Math.round(d.width),height:l,cursor:"row-resize",pointerEvents:"auto"},v=b=>{const I=o.height*i.parentRect.h/100,w=I===0?0:b/I;n({path:i.path,deltaRatio:w})};return h.jsx("div",{style:g,children:h.jsx(E.ResizeHandle,{direction:"horizontal",onResize:v})},`split-${c}`)};return h.jsx("div",{style:{position:"fixed",inset:0,pointerEvents:"none"},children:r.map((i,c)=>a(i,c))})},Ke={position:"relative",display:"flex",width:"100%",height:"100%"},We=({state:t,layoutMode:e,gridTracksInteractive:n,view:r,tabBarComponent:o,panelGroupComponent:s})=>{const a=c=>{if(r){const d=r;return h.jsx(d,{groupId:c})}return h.jsx(se,{id:c,TabBarComponent:o,PanelGroupComponent:s})};if(e==="grid"){const c=$t(t,a,!!n);return h.jsx(E.GridLayout,{config:c.config,layers:c.layers})}const i=zt(t,a);return h.jsx(E.GridLayout,{config:i.config,layers:i.layers})},Ze=({containerRef:t,layoutMode:e,gridTracksInteractive:n,dragThresholdPx:r,view:o,style:s,className:a,tabBarComponent:i,panelGroupComponent:c,splitLimits:d,emptyContentComponent:l,doubleClickToAdd:p})=>{const{state:g}=z(),{onCommitContentDrop:v,onCommitTabDrop:b}=He(),I=u.useMemo(()=>({...Ke,...s}),[s]),w=u.useCallback(({targetGroupId:y,zone:m})=>{if(m==="center")return!0;const x=m==="left"||m==="right"?"vertical":"horizontal";return et(g.tree,y,x,d)},[g.tree,d]);return h.jsx(Yt,{children:h.jsxs(te,{containerRef:t,dragThresholdPx:r,onCommitContentDrop:v,onCommitTabDrop:b,isContentZoneAllowed:w,children:[h.jsx(Ue,{emptyContentComponent:l,doubleClickToAdd:p,children:h.jsx("div",{ref:t,className:a,style:I,children:h.jsx(We,{state:g,layoutMode:e,gridTracksInteractive:n,view:o,tabBarComponent:i,panelGroupComponent:c})})}),h.jsx(Ve,{containerRef:t}),h.jsx(Je,{})]})})},Je=()=>{const t=K();return h.jsxs(h.Fragment,{children:[h.jsx(pe,{suggest:t.suggest}),h.jsx(me,{})]})},Qe=({initialState:t,createGroupId:e,createPanelId:n,layoutMode:r,gridTracksInteractive:o,dragThresholdPx:s,view:a,emptyContentComponent:i,state:c,onStateChange:d,className:l,style:p,tabBarComponent:g,panelGroupComponent:v,splitLimits:b,doubleClickToAdd:I})=>{if(!t)throw new Error("PanelSystem requires initialState.");if(!e)throw new Error("PanelSystem requires explicit createGroupId function.");if(!r)throw new Error("PanelSystem requires explicit layoutMode ('absolute' | 'grid').");if(r==="grid"&&o===void 0)throw new Error("PanelSystem(layoutMode='grid') requires explicit 'gridTracksInteractive' flag.");if(s===void 0)throw new Error("PanelSystem requires explicit 'dragThresholdPx' value.");const w=u.useRef(null),y=u.useMemo(()=>yt(b),[b]);return h.jsx(Le,{initialState:t,createGroupId:e,createPanelId:n,state:c,onStateChange:d,splitLimits:b,children:h.jsxs(Lt,{children:[h.jsx(ze,{}),h.jsx(Ze,{containerRef:w,layoutMode:r,gridTracksInteractive:o,dragThresholdPx:s,view:a,style:p,className:l,tabBarComponent:g,panelGroupComponent:v,splitLimits:y,emptyContentComponent:i,doubleClickToAdd:I})]})})};exports.Drawer=E.Drawer;exports.DrawerLayers=E.DrawerLayers;exports.FloatingWindow=E.FloatingWindow;exports.GridLayout=E.GridLayout;exports.ResizeHandle=E.ResizeHandle;exports.runTransition=E.runTransition;exports.useTransitionState=E.useTransitionState;exports.CSS_VAR_PREFIX=P.CSS_VAR_PREFIX;exports.HorizontalDivider=kt;exports.PanelSystem=Qe;exports.buildInitialState=Ee;exports.useFloatingState=Mt;exports.useLayerDragHandle=_t;
 //# sourceMappingURL=index.cjs.map

package/dist/index.js

@@ -1,12 +1,12 @@
-import { u as kt, a as Mt, b as _t, c as J, d as Ot, e as M, t as Bt, R as ot, G as st } from "./GridLayout-BzrIDrC9.js";
-import { D as _n, f as On, F as Bn, r as Ln, g as Hn } from "./GridLayout-BzrIDrC9.js";
+import { u as kt, a as Mt, b as _t, c as J, d as Ot, e as M, t as Bt, R as ot, G as st } from "./GridLayout-CJTKq7Mp.js";
+import { D as _n, f as On, F as Bn, r as Ln, g as Hn } from "./GridLayout-CJTKq7Mp.js";
 import { jsx as m, jsxs as H, Fragment as et } from "react/jsx-runtime";
 import * as u from "react";
 import { u as Lt, v as Ht, w as Nt, H as zt, z as $t, A as Ft, B as Xt, E as Yt, I as jt, J as Ut, T as Kt, K as Vt, L as Wt, M as qt, N as Zt, O as Jt, Q as Qt, S as te } from "./styles-CA2_zLZt.js";
 import { U as zn } from "./styles-CA2_zLZt.js";
 import { u as nt } from "./useIsomorphicLayoutEffect-DhmEnmZ_.js";
 import { createPortal as ee } from "react-dom";
-import { a as ne } from "./usePivot-BvOGxLQQ.js";
+import { a as ne } from "./usePivot-CgQxB8rc.js";
 const re = (t) => ({
   width: zt,
   cursor: "col-resize",

package/dist/modules/pivot/types.d.ts

@@ -15,6 +15,12 @@ export type PivotItem<TId extends string = string> = {
     content: React.ReactNode;
     /** Whether this item can be selected (defaults to true) */
     disabled?: boolean;
+    /**
+     * Enable content caching to preserve React component state across re-renders.
+     * When disabled (default), content is re-created on each render.
+     * @default false
+     */
+    cache?: boolean;
 };
 /**
  * Props for the usePivot hook.

package/dist/pivot.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./usePivot-BS-DGfwd.cjs");exports.usePivot=e.usePivot;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./usePivot-7ctin_P_.cjs");exports.usePivot=e.usePivot;
 //# sourceMappingURL=pivot.cjs.map

package/dist/pivot.js

@@ -1,4 +1,4 @@
-import { u as r } from "./usePivot-BvOGxLQQ.js";
+import { u as r } from "./usePivot-CgQxB8rc.js";
 export {
   r as usePivot
 };

package/dist/types.d.ts

@@ -115,6 +115,12 @@ export type PivotBehaviorItem = {
     content: React.ReactNode;
     /** Whether this item can be selected */
     disabled?: boolean;
+    /**
+     * Enable content caching to preserve React component state across re-renders.
+     * When disabled (default), content is re-created on each render.
+     * @default false
+     */
+    cache?: boolean;
 };
 export type PivotBehavior = {
     /** Array of content items to switch between */
@@ -230,6 +236,12 @@ export type LayerDefinition = {
      * When false or omitted, content overflow is hidden (default behavior).
      */
     scrollable?: boolean;
+    /**
+     * Enable content caching to preserve React component state across re-renders.
+     * When disabled (default), content is re-created on each render.
+     * @default false
+     */
+    cache?: boolean;
 };
 export type PanelLayoutProps = {
     config: PanelLayoutConfig;

package/dist/usePivot-7ctin_P_.cjs

@@ -0,0 +1,2 @@
+"use strict";const d=require("react/jsx-runtime"),S=require("react"),R=require("./styles-PsqGOEJP.cjs"),N=require("./useIsomorphicLayoutEffect-DGRNF4Lf.cjs");function _(c){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const o in c)if(o!=="default"){const u=Object.getOwnPropertyDescriptor(c,o);Object.defineProperty(e,o,u.get?u:{enumerable:!0,get:()=>c[o]})}}return e.default=c,Object.freeze(e)}const t=_(S);function y(c){const{resolveContent:e,validIds:o}=c,u=t.useRef(new Map),i=t.useRef(e);i.current=e;const s=t.useCallback(l=>{const a=u.current.get(l);if(a!==void 0)return a;const r=i.current(l);return u.current.set(l,r),r},[]),f=t.useCallback(()=>{u.current.clear()},[]);return t.useEffect(()=>{const l=new Set(o);u.current.forEach((a,r)=>{l.has(r)||u.current.delete(r)})},[o]),{getCachedContent:s,clearCache:f}}const k={position:"absolute",inset:0,width:"100%",height:"100%"},A=t.memo(({id:c,isActive:e,transitionMode:o,children:u})=>{const i=t.useRef(null),s=t.useRef(e);N.useIsomorphicLayoutEffect(()=>{if(o!=="css"||!i.current)return;const a=i.current,r=s.current;s.current=e,r!==e&&(a.style.animation="none",a.offsetHeight,a.style.animation="")},[e,o]);const f=t.useMemo(()=>{const a={...k,pointerEvents:e?"auto":"none",opacity:e?1:0};return o==="css"&&(a.animation=e?R.PIVOT_ANIMATION_ENTER:R.PIVOT_ANIMATION_LEAVE),a},[e,o]),l=d.jsx("div",{ref:i,"data-pivot-content":c,"data-active":e?"true":"false",style:f,children:u});return o==="none"?d.jsx(t.Activity,{mode:e?"visible":"hidden",children:l}):l}),E=t.createContext(null),M=t.memo(()=>{const c=t.useContext(E);if(!c)throw new Error("PivotOutlet must be used within usePivot");const[,e]=t.useReducer(s=>s+1,0);t.useEffect(()=>c.subscribe(e),[c]);const{items:o,activeId:u,transitionMode:i}=c.getState();return d.jsx(d.Fragment,{children:o.map(s=>d.jsx(A,{id:s.id,isActive:s.id===u,transitionMode:i,children:s.cache?c.getCachedContent(s.id):s.content},s.id))})});function T(c){const{items:e,activeId:o,defaultActiveId:u,onActiveChange:i,transitionMode:s="css"}=c,f=o!==void 0,[l,a]=t.useState(()=>{if(u!==void 0)return u;const n=e.find(v=>v.disabled!==!0);if(!n)throw new Error("usePivot: No enabled items provided");return n.id}),r=f?o:l,h=t.useCallback(n=>{const v=e.find(b=>b.id===n);v&&(v.disabled||(f||a(n),i?.(n)))},[e,f,i]),O=t.useCallback(n=>n===r,[r]),P=t.useCallback(n=>({"data-pivot-item":n,"data-active":n===r?"true":"false","aria-selected":n===r,tabIndex:n===r?0:-1,onClick:()=>{h(n)}}),[r,h]),p=t.useMemo(()=>({position:"relative",width:"100%",height:"100%"}),[]),m=t.useRef({items:e,activeId:r,transitionMode:s});m.current={items:e,activeId:r,transitionMode:s};const C=t.useRef(new Set);t.useEffect(()=>{C.current.forEach(n=>n())},[r,s]);const x=t.useCallback(n=>m.current.items.find(b=>b.id===n)?.content??null,[]),j=t.useMemo(()=>e.map(n=>n.id),[e]),{getCachedContent:I}=y({resolveContent:x,validIds:j}),g=t.useMemo(()=>({getState:()=>m.current,subscribe:n=>(C.current.add(n),()=>C.current.delete(n)),getCachedContent:I}),[I]),w=t.useMemo(()=>{const n=()=>d.jsx(E.Provider,{value:g,children:d.jsx("div",{style:p,"data-pivot-container":!0,children:d.jsx(M,{})})});return n.displayName="PivotOutlet",n},[g,p]);return{activeId:r,setActiveId:h,isActive:O,getItemProps:P,Outlet:w}}exports.useContentCache=y;exports.usePivot=T;
+//# sourceMappingURL=usePivot-7ctin_P_.cjs.map

package/dist/usePivot-7ctin_P_.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePivot-7ctin_P_.cjs","sources":["../src/hooks/useContentCache.tsx","../src/modules/pivot/PivotContent.tsx","../src/modules/pivot/usePivot.tsx"],"sourcesContent":["/**\n * @file Shared content caching hook for preserving React component state.\n *\n * This hook provides a common pattern for caching ReactNode content by ID,\n * ensuring the same reference is returned for the same ID across re-renders.\n * This prevents component remounting when parent components re-create content arrays.\n *\n * Used by:\n * - PanelSystemContext (GridLayout layer content)\n * - usePivot (Pivot item content)\n * - ContentRegistry (Panel content)\n */\nimport * as React from \"react\";\n\n/**\n * Function type for resolving content by ID.\n * Called only when content is not already cached.\n */\nexport type ContentResolver<TId extends string = string> = (id: TId) => React.ReactNode | null;\n\n/**\n * Options for useContentCache hook.\n */\nexport type UseContentCacheOptions<TId extends string = string> = {\n  /**\n   * Function to resolve content by ID.\n   * Called only when content is not already in cache.\n   */\n  resolveContent: ContentResolver<TId>;\n  /**\n   * Current valid IDs. Used to clean up stale cache entries.\n   * When an ID is removed from this array, its cached content is deleted.\n   */\n  validIds: readonly TId[];\n};\n\n/**\n * Result from useContentCache hook.\n */\nexport type UseContentCacheResult<TId extends string = string> = {\n  /**\n   * Get cached content for an ID.\n   * Returns the same ReactNode reference for the same ID.\n   */\n  getCachedContent: (id: TId) => React.ReactNode | null;\n  /**\n   * Clear all cached content.\n   * Use when you need to force re-creation of all content.\n   */\n  clearCache: () => void;\n};\n\n/**\n * Hook for caching ReactNode content by ID.\n *\n * Ensures the same ReactNode reference is returned for the same ID,\n * preventing unnecessary component remounting when parent re-renders.\n *\n * @example\n * ```tsx\n * const { getCachedContent } = useContentCache({\n *   resolveContent: (id) => items.find(i => i.id === id)?.content ?? null,\n *   validIds: items.map(i => i.id),\n * });\n *\n * return items.map(item => (\n *   <div key={item.id}>{getCachedContent(item.id)}</div>\n * ));\n * ```\n */\nexport function useContentCache<TId extends string = string>(\n  options: UseContentCacheOptions<TId>,\n): UseContentCacheResult<TId> {\n  const { resolveContent, validIds } = options;\n\n  /**\n   * Cache storage. Key: ID, Value: cached ReactNode.\n   * Uses ref to persist across re-renders without triggering updates.\n   */\n  const cacheRef = React.useRef<Map<string, React.ReactNode>>(new Map());\n\n  /**\n   * Store resolveContent in a ref for stable getCachedContent function.\n   * This allows getCachedContent to always use the latest resolver\n   * without needing to be recreated.\n   */\n  const resolveContentRef = React.useRef(resolveContent);\n  resolveContentRef.current = resolveContent;\n\n  /**\n   * Get or create cached content for an ID.\n   * On first access, calls resolveContent and caches the result.\n   * On subsequent accesses, returns the cached reference.\n   */\n  const getCachedContent = React.useCallback((id: TId): React.ReactNode | null => {\n    const cached = cacheRef.current.get(id);\n    if (cached !== undefined) {\n      return cached;\n    }\n\n    const content = resolveContentRef.current(id);\n    cacheRef.current.set(id, content);\n    return content;\n  }, []);\n\n  /**\n   * Clear all cached content.\n   */\n  const clearCache = React.useCallback((): void => {\n    cacheRef.current.clear();\n  }, []);\n\n  /**\n   * Clean up stale cache entries when validIds changes.\n   * Removes entries for IDs that are no longer valid.\n   */\n  React.useEffect(() => {\n    const currentValidIds = new Set<string>(validIds);\n    cacheRef.current.forEach((_, id) => {\n      if (!currentValidIds.has(id)) {\n        cacheRef.current.delete(id);\n      }\n    });\n  }, [validIds]);\n\n  return { getCachedContent, clearCache };\n}\n","/**\n * @file PivotContent component for rendering pivot items with CSS animations.\n *\n * Override via CSS custom properties:\n * - --rpl-pivot-animation-enter: Animation when becoming active\n * - --rpl-pivot-animation-leave: Animation when becoming inactive\n *\n * User defines @keyframes in their CSS and references via these tokens.\n * Example:\n *   @keyframes pivotEnter {\n *     from { opacity: 0; }\n *     to { opacity: 1; }\n *   }\n *   :root { --rpl-pivot-animation-enter: pivotEnter 150ms ease-out forwards; }\n */\nimport * as React from \"react\";\nimport { PIVOT_ANIMATION_ENTER, PIVOT_ANIMATION_LEAVE } from \"../../constants/styles\";\nimport { useIsomorphicLayoutEffect } from \"../../hooks/useIsomorphicLayoutEffect\";\n\nexport type PivotContentProps = {\n  id: string;\n  isActive: boolean;\n  transitionMode: \"css\" | \"none\";\n  children: React.ReactNode;\n};\n\nconst baseStyle: React.CSSProperties = {\n  position: \"absolute\",\n  inset: 0,\n  width: \"100%\",\n  height: \"100%\",\n};\n\n/**\n * Renders pivot content with CSS animation support.\n *\n * When transitionMode=\"css\": Applies enter/leave animations.\n * When transitionMode=\"none\": Uses React.Activity for memory optimization.\n */\nexport const PivotContent: React.FC<PivotContentProps> = React.memo(({ id, isActive, transitionMode, children }) => {\n  const ref = React.useRef<HTMLDivElement>(null);\n  const prevActiveRef = React.useRef(isActive);\n\n  // Restart animation on state change by removing and re-adding animation\n  useIsomorphicLayoutEffect(() => {\n    if (transitionMode !== \"css\" || !ref.current) {\n      return;\n    }\n\n    const el = ref.current;\n    const wasActive = prevActiveRef.current;\n    prevActiveRef.current = isActive;\n\n    // Only restart if state actually changed\n    if (wasActive === isActive) {\n      return;\n    }\n\n    // Force animation restart: remove animation, trigger reflow, re-add\n    el.style.animation = \"none\";\n    void el.offsetHeight; // Force reflow\n    el.style.animation = \"\";\n  }, [isActive, transitionMode]);\n\n  const style = React.useMemo<React.CSSProperties>(() => {\n    const s: React.CSSProperties = {\n      ...baseStyle,\n      pointerEvents: isActive ? \"auto\" : \"none\",\n      opacity: isActive ? 1 : 0,\n    };\n\n    if (transitionMode === \"css\") {\n      s.animation = isActive ? PIVOT_ANIMATION_ENTER : PIVOT_ANIMATION_LEAVE;\n    }\n\n    return s;\n  }, [isActive, transitionMode]);\n\n  const content = (\n    <div ref={ref} data-pivot-content={id} data-active={isActive ? \"true\" : \"false\"} style={style}>\n      {children}\n    </div>\n  );\n\n  if (transitionMode === \"none\") {\n    return <React.Activity mode={isActive ? \"visible\" : \"hidden\"}>{content}</React.Activity>;\n  }\n\n  return content;\n});\n","/**\n * @file Headless hook for managing Pivot (content switching) behavior.\n *\n * Includes content caching to preserve React component state across re-renders.\n * This is essential for maintaining internal state when parent components\n * re-create the items array.\n */\nimport * as React from \"react\";\nimport type { UsePivotOptions, UsePivotResult, PivotItemProps, PivotItem } from \"./types\";\nimport { PivotContent } from \"./PivotContent\";\nimport { useContentCache } from \"../../hooks/useContentCache\";\n\n/**\n * Context for sharing pivot state with Outlet component.\n * Uses a ref-based approach to avoid re-creating the Outlet component.\n * Includes content cache to preserve component state.\n */\ntype PivotOutletContextValue = {\n  getState: () => {\n    items: ReadonlyArray<PivotItem>;\n    activeId: string;\n    transitionMode: \"css\" | \"none\";\n  };\n  subscribe: (callback: () => void) => () => void;\n  /**\n   * Get cached content for an item. Returns the same ReactNode reference\n   * for the same item ID to prevent remounting on parent re-renders.\n   */\n  getCachedContent: (itemId: string) => React.ReactNode | null;\n};\n\nconst PivotOutletContext = React.createContext<PivotOutletContextValue | null>(null);\n\n/**\n * Stable Outlet component that subscribes to state changes.\n * This prevents remounting when activeId changes.\n * Uses cached content only when item.cache is true.\n */\nconst PivotOutletInner: React.FC = React.memo(() => {\n  const ctx = React.useContext(PivotOutletContext);\n  if (!ctx) {\n    throw new Error(\"PivotOutlet must be used within usePivot\");\n  }\n\n  const [, forceUpdate] = React.useReducer((x) => x + 1, 0);\n\n  React.useEffect(() => {\n    return ctx.subscribe(forceUpdate);\n  }, [ctx]);\n\n  const { items, activeId, transitionMode } = ctx.getState();\n\n  return (\n    <>\n      {items.map((item) => (\n        <PivotContent key={item.id} id={item.id} isActive={item.id === activeId} transitionMode={transitionMode}>\n          {item.cache ? ctx.getCachedContent(item.id) : item.content}\n        </PivotContent>\n      ))}\n    </>\n  );\n});\n\n/**\n * Headless hook for managing content switching within a scope.\n * Provides behavior only - UI is fully customizable.\n *\n * @example\n * ```tsx\n * const { activeId, getItemProps, Outlet } = usePivot({\n *   items: [\n *     { id: 'home', label: 'Home', content: <HomePage /> },\n *     { id: 'settings', label: 'Settings', content: <SettingsPage /> }\n *   ],\n *   defaultActiveId: 'home'\n * });\n *\n * return (\n *   <div>\n *     <nav>\n *       {items.map((item) => (\n *         <button key={item.id} {...getItemProps(item.id)}>{item.label}</button>\n *       ))}\n *     </nav>\n *     <Outlet />\n *   </div>\n * );\n * ```\n */\nexport function usePivot<TId extends string = string>(options: UsePivotOptions<TId>): UsePivotResult<TId> {\n  const { items, activeId: controlledActiveId, defaultActiveId, onActiveChange, transitionMode = \"css\" } = options;\n\n  const isControlled = controlledActiveId !== undefined;\n\n  const [uncontrolledActiveId, setUncontrolledActiveId] = React.useState<TId>(() => {\n    if (defaultActiveId !== undefined) {\n      return defaultActiveId;\n    }\n    const firstEnabled = items.find((item) => item.disabled !== true);\n    if (!firstEnabled) {\n      throw new Error(\"usePivot: No enabled items provided\");\n    }\n    return firstEnabled.id;\n  });\n\n  const activeId = isControlled ? controlledActiveId : uncontrolledActiveId;\n\n  const setActiveId = React.useCallback(\n    (id: TId) => {\n      const target = items.find((item) => item.id === id);\n      if (!target) {\n        return;\n      }\n      if (target.disabled) {\n        return;\n      }\n      if (!isControlled) {\n        setUncontrolledActiveId(id);\n      }\n      onActiveChange?.(id);\n    },\n    [items, isControlled, onActiveChange],\n  );\n\n  const isActive = React.useCallback((id: TId): boolean => id === activeId, [activeId]);\n\n  const getItemProps = React.useCallback(\n    (id: TId): PivotItemProps => ({\n      \"data-pivot-item\": id,\n      \"data-active\": (id === activeId ? \"true\" : \"false\") as \"true\" | \"false\",\n      \"aria-selected\": id === activeId,\n      tabIndex: id === activeId ? 0 : -1,\n      onClick: () => {\n        setActiveId(id);\n      },\n    }),\n    [activeId, setActiveId],\n  );\n\n  const containerStyle: React.CSSProperties = React.useMemo(\n    () => ({\n      position: \"relative\",\n      width: \"100%\",\n      height: \"100%\",\n    }),\n    [],\n  );\n\n  // Store state in a ref for stable getState function\n  const stateRef = React.useRef({\n    items,\n    activeId,\n    transitionMode,\n  });\n\n  // Update ref when state changes\n  stateRef.current = {\n    items,\n    activeId,\n    transitionMode,\n  };\n\n  // Subscribers for state changes\n  const subscribersRef = React.useRef(new Set<() => void>());\n\n  // Notify subscribers when activeId changes\n  React.useEffect(() => {\n    subscribersRef.current.forEach((callback) => callback());\n  }, [activeId, transitionMode]);\n\n  // Content resolver for useContentCache\n  const resolveContent = React.useCallback(\n    (itemId: string): React.ReactNode | null => {\n      const item = stateRef.current.items.find((i) => i.id === itemId);\n      return item?.content ?? null;\n    },\n    [],\n  );\n\n  // Valid IDs for cache cleanup (cast to string[] for useContentCache compatibility)\n  const validIds = React.useMemo((): readonly string[] => items.map((i) => i.id), [items]);\n\n  // Use shared content cache hook\n  const { getCachedContent } = useContentCache({\n    resolveContent,\n    validIds,\n  });\n\n  // Stable context value (never changes)\n  const contextValue = React.useMemo<PivotOutletContextValue>(\n    () => ({\n      getState: () => stateRef.current,\n      subscribe: (callback) => {\n        subscribersRef.current.add(callback);\n        return () => subscribersRef.current.delete(callback);\n      },\n      getCachedContent,\n    }),\n    [getCachedContent],\n  );\n\n  // Stable Outlet component (reference never changes)\n  const Outlet = React.useMemo(() => {\n    const OutletComponent: React.FC = () => (\n      <PivotOutletContext.Provider value={contextValue}>\n        <div style={containerStyle} data-pivot-container>\n          <PivotOutletInner />\n        </div>\n      </PivotOutletContext.Provider>\n    );\n    OutletComponent.displayName = \"PivotOutlet\";\n    return OutletComponent;\n  }, [contextValue, containerStyle]);\n\n  return { activeId, setActiveId, isActive, getItemProps, Outlet };\n}\n"],"names":["useContentCache","options","resolveContent","validIds","cacheRef","React","resolveContentRef","getCachedContent","id","cached","content","clearCache","currentValidIds","_","baseStyle","PivotContent","isActive","transitionMode","children","ref","prevActiveRef","useIsomorphicLayoutEffect","el","wasActive","style","s","PIVOT_ANIMATION_ENTER","PIVOT_ANIMATION_LEAVE","jsx","PivotOutletContext","PivotOutletInner","ctx","forceUpdate","x","items","activeId","Fragment","item","usePivot","controlledActiveId","defaultActiveId","onActiveChange","isControlled","uncontrolledActiveId","setUncontrolledActiveId","firstEnabled","setActiveId","target","getItemProps","containerStyle","stateRef","subscribersRef","callback","itemId","i","contextValue","Outlet","OutletComponent"],"mappings":"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"}

package/dist/{usePivot-BvOGxLQQ.js → usePivot-CgQxB8rc.js}

@@ -3,64 +3,64 @@ import * as e from "react";
 import { P as A, n as N } from "./styles-CA2_zLZt.js";
 import { u as S } from "./useIsomorphicLayoutEffect-DhmEnmZ_.js";
 function k(a) {
-  const { resolveContent: n, validIds: s } = a, c = e.useRef(/* @__PURE__ */ new Map()), i = e.useRef(n);
+  const { resolveContent: n, validIds: c } = a, s = e.useRef(/* @__PURE__ */ new Map()), i = e.useRef(n);
   i.current = n;
   const r = e.useCallback((l) => {
-    const u = c.current.get(l);
+    const u = s.current.get(l);
     if (u !== void 0)
       return u;
     const o = i.current(l);
-    return c.current.set(l, o), o;
+    return s.current.set(l, o), o;
   }, []), d = e.useCallback(() => {
-    c.current.clear();
+    s.current.clear();
   }, []);
   return e.useEffect(() => {
-    const l = new Set(s);
-    c.current.forEach((u, o) => {
-      l.has(o) || c.current.delete(o);
+    const l = new Set(c);
+    s.current.forEach((u, o) => {
+      l.has(o) || s.current.delete(o);
     });
-  }, [s]), { getCachedContent: r, clearCache: d };
+  }, [c]), { getCachedContent: r, clearCache: d };
 }
 const M = {
   position: "absolute",
   inset: 0,
   width: "100%",
   height: "100%"
-}, T = e.memo(({ id: a, isActive: n, transitionMode: s, children: c }) => {
+}, T = e.memo(({ id: a, isActive: n, transitionMode: c, children: s }) => {
   const i = e.useRef(null), r = e.useRef(n);
   S(() => {
-    if (s !== "css" || !i.current)
+    if (c !== "css" || !i.current)
       return;
     const u = i.current, o = r.current;
     r.current = n, o !== n && (u.style.animation = "none", u.offsetHeight, u.style.animation = "");
-  }, [n, s]);
+  }, [n, c]);
   const d = e.useMemo(() => {
     const u = {
       ...M,
       pointerEvents: n ? "auto" : "none",
       opacity: n ? 1 : 0
     };
-    return s === "css" && (u.animation = n ? A : N), u;
-  }, [n, s]), l = /* @__PURE__ */ f("div", { ref: i, "data-pivot-content": a, "data-active": n ? "true" : "false", style: d, children: c });
-  return s === "none" ? /* @__PURE__ */ f(e.Activity, { mode: n ? "visible" : "hidden", children: l }) : l;
+    return c === "css" && (u.animation = n ? A : N), u;
+  }, [n, c]), l = /* @__PURE__ */ f("div", { ref: i, "data-pivot-content": a, "data-active": n ? "true" : "false", style: d, children: s });
+  return c === "none" ? /* @__PURE__ */ f(e.Activity, { mode: n ? "visible" : "hidden", children: l }) : l;
 }), R = e.createContext(null), V = e.memo(() => {
   const a = e.useContext(R);
   if (!a)
     throw new Error("PivotOutlet must be used within usePivot");
   const [, n] = e.useReducer((r) => r + 1, 0);
   e.useEffect(() => a.subscribe(n), [a]);
-  const { items: s, activeId: c, transitionMode: i } = a.getState();
-  return /* @__PURE__ */ f(x, { children: s.map((r) => /* @__PURE__ */ f(T, { id: r.id, isActive: r.id === c, transitionMode: i, children: a.getCachedContent(r.id) }, r.id)) });
+  const { items: c, activeId: s, transitionMode: i } = a.getState();
+  return /* @__PURE__ */ f(x, { children: c.map((r) => /* @__PURE__ */ f(T, { id: r.id, isActive: r.id === s, transitionMode: i, children: r.cache ? a.getCachedContent(r.id) : r.content }, r.id)) });
 });
 function j(a) {
-  const { items: n, activeId: s, defaultActiveId: c, onActiveChange: i, transitionMode: r = "css" } = a, d = s !== void 0, [l, u] = e.useState(() => {
-    if (c !== void 0)
-      return c;
+  const { items: n, activeId: c, defaultActiveId: s, onActiveChange: i, transitionMode: r = "css" } = a, d = c !== void 0, [l, u] = e.useState(() => {
+    if (s !== void 0)
+      return s;
     const t = n.find((v) => v.disabled !== !0);
     if (!t)
       throw new Error("usePivot: No enabled items provided");
     return t.id;
-  }), o = d ? s : l, m = e.useCallback(
+  }), o = d ? c : l, m = e.useCallback(
     (t) => {
       const v = n.find((p) => p.id === t);
       v && (v.disabled || (d || u(t), i?.(t)));
@@ -121,4 +121,4 @@ export {
   k as a,
   j as u
 };
-//# sourceMappingURL=usePivot-BvOGxLQQ.js.map
+//# sourceMappingURL=usePivot-CgQxB8rc.js.map

package/dist/usePivot-CgQxB8rc.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePivot-CgQxB8rc.js","sources":["../src/hooks/useContentCache.tsx","../src/modules/pivot/PivotContent.tsx","../src/modules/pivot/usePivot.tsx"],"sourcesContent":["/**\n * @file Shared content caching hook for preserving React component state.\n *\n * This hook provides a common pattern for caching ReactNode content by ID,\n * ensuring the same reference is returned for the same ID across re-renders.\n * This prevents component remounting when parent components re-create content arrays.\n *\n * Used by:\n * - PanelSystemContext (GridLayout layer content)\n * - usePivot (Pivot item content)\n * - ContentRegistry (Panel content)\n */\nimport * as React from \"react\";\n\n/**\n * Function type for resolving content by ID.\n * Called only when content is not already cached.\n */\nexport type ContentResolver<TId extends string = string> = (id: TId) => React.ReactNode | null;\n\n/**\n * Options for useContentCache hook.\n */\nexport type UseContentCacheOptions<TId extends string = string> = {\n  /**\n   * Function to resolve content by ID.\n   * Called only when content is not already in cache.\n   */\n  resolveContent: ContentResolver<TId>;\n  /**\n   * Current valid IDs. Used to clean up stale cache entries.\n   * When an ID is removed from this array, its cached content is deleted.\n   */\n  validIds: readonly TId[];\n};\n\n/**\n * Result from useContentCache hook.\n */\nexport type UseContentCacheResult<TId extends string = string> = {\n  /**\n   * Get cached content for an ID.\n   * Returns the same ReactNode reference for the same ID.\n   */\n  getCachedContent: (id: TId) => React.ReactNode | null;\n  /**\n   * Clear all cached content.\n   * Use when you need to force re-creation of all content.\n   */\n  clearCache: () => void;\n};\n\n/**\n * Hook for caching ReactNode content by ID.\n *\n * Ensures the same ReactNode reference is returned for the same ID,\n * preventing unnecessary component remounting when parent re-renders.\n *\n * @example\n * ```tsx\n * const { getCachedContent } = useContentCache({\n *   resolveContent: (id) => items.find(i => i.id === id)?.content ?? null,\n *   validIds: items.map(i => i.id),\n * });\n *\n * return items.map(item => (\n *   <div key={item.id}>{getCachedContent(item.id)}</div>\n * ));\n * ```\n */\nexport function useContentCache<TId extends string = string>(\n  options: UseContentCacheOptions<TId>,\n): UseContentCacheResult<TId> {\n  const { resolveContent, validIds } = options;\n\n  /**\n   * Cache storage. Key: ID, Value: cached ReactNode.\n   * Uses ref to persist across re-renders without triggering updates.\n   */\n  const cacheRef = React.useRef<Map<string, React.ReactNode>>(new Map());\n\n  /**\n   * Store resolveContent in a ref for stable getCachedContent function.\n   * This allows getCachedContent to always use the latest resolver\n   * without needing to be recreated.\n   */\n  const resolveContentRef = React.useRef(resolveContent);\n  resolveContentRef.current = resolveContent;\n\n  /**\n   * Get or create cached content for an ID.\n   * On first access, calls resolveContent and caches the result.\n   * On subsequent accesses, returns the cached reference.\n   */\n  const getCachedContent = React.useCallback((id: TId): React.ReactNode | null => {\n    const cached = cacheRef.current.get(id);\n    if (cached !== undefined) {\n      return cached;\n    }\n\n    const content = resolveContentRef.current(id);\n    cacheRef.current.set(id, content);\n    return content;\n  }, []);\n\n  /**\n   * Clear all cached content.\n   */\n  const clearCache = React.useCallback((): void => {\n    cacheRef.current.clear();\n  }, []);\n\n  /**\n   * Clean up stale cache entries when validIds changes.\n   * Removes entries for IDs that are no longer valid.\n   */\n  React.useEffect(() => {\n    const currentValidIds = new Set<string>(validIds);\n    cacheRef.current.forEach((_, id) => {\n      if (!currentValidIds.has(id)) {\n        cacheRef.current.delete(id);\n      }\n    });\n  }, [validIds]);\n\n  return { getCachedContent, clearCache };\n}\n","/**\n * @file PivotContent component for rendering pivot items with CSS animations.\n *\n * Override via CSS custom properties:\n * - --rpl-pivot-animation-enter: Animation when becoming active\n * - --rpl-pivot-animation-leave: Animation when becoming inactive\n *\n * User defines @keyframes in their CSS and references via these tokens.\n * Example:\n *   @keyframes pivotEnter {\n *     from { opacity: 0; }\n *     to { opacity: 1; }\n *   }\n *   :root { --rpl-pivot-animation-enter: pivotEnter 150ms ease-out forwards; }\n */\nimport * as React from \"react\";\nimport { PIVOT_ANIMATION_ENTER, PIVOT_ANIMATION_LEAVE } from \"../../constants/styles\";\nimport { useIsomorphicLayoutEffect } from \"../../hooks/useIsomorphicLayoutEffect\";\n\nexport type PivotContentProps = {\n  id: string;\n  isActive: boolean;\n  transitionMode: \"css\" | \"none\";\n  children: React.ReactNode;\n};\n\nconst baseStyle: React.CSSProperties = {\n  position: \"absolute\",\n  inset: 0,\n  width: \"100%\",\n  height: \"100%\",\n};\n\n/**\n * Renders pivot content with CSS animation support.\n *\n * When transitionMode=\"css\": Applies enter/leave animations.\n * When transitionMode=\"none\": Uses React.Activity for memory optimization.\n */\nexport const PivotContent: React.FC<PivotContentProps> = React.memo(({ id, isActive, transitionMode, children }) => {\n  const ref = React.useRef<HTMLDivElement>(null);\n  const prevActiveRef = React.useRef(isActive);\n\n  // Restart animation on state change by removing and re-adding animation\n  useIsomorphicLayoutEffect(() => {\n    if (transitionMode !== \"css\" || !ref.current) {\n      return;\n    }\n\n    const el = ref.current;\n    const wasActive = prevActiveRef.current;\n    prevActiveRef.current = isActive;\n\n    // Only restart if state actually changed\n    if (wasActive === isActive) {\n      return;\n    }\n\n    // Force animation restart: remove animation, trigger reflow, re-add\n    el.style.animation = \"none\";\n    void el.offsetHeight; // Force reflow\n    el.style.animation = \"\";\n  }, [isActive, transitionMode]);\n\n  const style = React.useMemo<React.CSSProperties>(() => {\n    const s: React.CSSProperties = {\n      ...baseStyle,\n      pointerEvents: isActive ? \"auto\" : \"none\",\n      opacity: isActive ? 1 : 0,\n    };\n\n    if (transitionMode === \"css\") {\n      s.animation = isActive ? PIVOT_ANIMATION_ENTER : PIVOT_ANIMATION_LEAVE;\n    }\n\n    return s;\n  }, [isActive, transitionMode]);\n\n  const content = (\n    <div ref={ref} data-pivot-content={id} data-active={isActive ? \"true\" : \"false\"} style={style}>\n      {children}\n    </div>\n  );\n\n  if (transitionMode === \"none\") {\n    return <React.Activity mode={isActive ? \"visible\" : \"hidden\"}>{content}</React.Activity>;\n  }\n\n  return content;\n});\n","/**\n * @file Headless hook for managing Pivot (content switching) behavior.\n *\n * Includes content caching to preserve React component state across re-renders.\n * This is essential for maintaining internal state when parent components\n * re-create the items array.\n */\nimport * as React from \"react\";\nimport type { UsePivotOptions, UsePivotResult, PivotItemProps, PivotItem } from \"./types\";\nimport { PivotContent } from \"./PivotContent\";\nimport { useContentCache } from \"../../hooks/useContentCache\";\n\n/**\n * Context for sharing pivot state with Outlet component.\n * Uses a ref-based approach to avoid re-creating the Outlet component.\n * Includes content cache to preserve component state.\n */\ntype PivotOutletContextValue = {\n  getState: () => {\n    items: ReadonlyArray<PivotItem>;\n    activeId: string;\n    transitionMode: \"css\" | \"none\";\n  };\n  subscribe: (callback: () => void) => () => void;\n  /**\n   * Get cached content for an item. Returns the same ReactNode reference\n   * for the same item ID to prevent remounting on parent re-renders.\n   */\n  getCachedContent: (itemId: string) => React.ReactNode | null;\n};\n\nconst PivotOutletContext = React.createContext<PivotOutletContextValue | null>(null);\n\n/**\n * Stable Outlet component that subscribes to state changes.\n * This prevents remounting when activeId changes.\n * Uses cached content only when item.cache is true.\n */\nconst PivotOutletInner: React.FC = React.memo(() => {\n  const ctx = React.useContext(PivotOutletContext);\n  if (!ctx) {\n    throw new Error(\"PivotOutlet must be used within usePivot\");\n  }\n\n  const [, forceUpdate] = React.useReducer((x) => x + 1, 0);\n\n  React.useEffect(() => {\n    return ctx.subscribe(forceUpdate);\n  }, [ctx]);\n\n  const { items, activeId, transitionMode } = ctx.getState();\n\n  return (\n    <>\n      {items.map((item) => (\n        <PivotContent key={item.id} id={item.id} isActive={item.id === activeId} transitionMode={transitionMode}>\n          {item.cache ? ctx.getCachedContent(item.id) : item.content}\n        </PivotContent>\n      ))}\n    </>\n  );\n});\n\n/**\n * Headless hook for managing content switching within a scope.\n * Provides behavior only - UI is fully customizable.\n *\n * @example\n * ```tsx\n * const { activeId, getItemProps, Outlet } = usePivot({\n *   items: [\n *     { id: 'home', label: 'Home', content: <HomePage /> },\n *     { id: 'settings', label: 'Settings', content: <SettingsPage /> }\n *   ],\n *   defaultActiveId: 'home'\n * });\n *\n * return (\n *   <div>\n *     <nav>\n *       {items.map((item) => (\n *         <button key={item.id} {...getItemProps(item.id)}>{item.label}</button>\n *       ))}\n *     </nav>\n *     <Outlet />\n *   </div>\n * );\n * ```\n */\nexport function usePivot<TId extends string = string>(options: UsePivotOptions<TId>): UsePivotResult<TId> {\n  const { items, activeId: controlledActiveId, defaultActiveId, onActiveChange, transitionMode = \"css\" } = options;\n\n  const isControlled = controlledActiveId !== undefined;\n\n  const [uncontrolledActiveId, setUncontrolledActiveId] = React.useState<TId>(() => {\n    if (defaultActiveId !== undefined) {\n      return defaultActiveId;\n    }\n    const firstEnabled = items.find((item) => item.disabled !== true);\n    if (!firstEnabled) {\n      throw new Error(\"usePivot: No enabled items provided\");\n    }\n    return firstEnabled.id;\n  });\n\n  const activeId = isControlled ? controlledActiveId : uncontrolledActiveId;\n\n  const setActiveId = React.useCallback(\n    (id: TId) => {\n      const target = items.find((item) => item.id === id);\n      if (!target) {\n        return;\n      }\n      if (target.disabled) {\n        return;\n      }\n      if (!isControlled) {\n        setUncontrolledActiveId(id);\n      }\n      onActiveChange?.(id);\n    },\n    [items, isControlled, onActiveChange],\n  );\n\n  const isActive = React.useCallback((id: TId): boolean => id === activeId, [activeId]);\n\n  const getItemProps = React.useCallback(\n    (id: TId): PivotItemProps => ({\n      \"data-pivot-item\": id,\n      \"data-active\": (id === activeId ? \"true\" : \"false\") as \"true\" | \"false\",\n      \"aria-selected\": id === activeId,\n      tabIndex: id === activeId ? 0 : -1,\n      onClick: () => {\n        setActiveId(id);\n      },\n    }),\n    [activeId, setActiveId],\n  );\n\n  const containerStyle: React.CSSProperties = React.useMemo(\n    () => ({\n      position: \"relative\",\n      width: \"100%\",\n      height: \"100%\",\n    }),\n    [],\n  );\n\n  // Store state in a ref for stable getState function\n  const stateRef = React.useRef({\n    items,\n    activeId,\n    transitionMode,\n  });\n\n  // Update ref when state changes\n  stateRef.current = {\n    items,\n    activeId,\n    transitionMode,\n  };\n\n  // Subscribers for state changes\n  const subscribersRef = React.useRef(new Set<() => void>());\n\n  // Notify subscribers when activeId changes\n  React.useEffect(() => {\n    subscribersRef.current.forEach((callback) => callback());\n  }, [activeId, transitionMode]);\n\n  // Content resolver for useContentCache\n  const resolveContent = React.useCallback(\n    (itemId: string): React.ReactNode | null => {\n      const item = stateRef.current.items.find((i) => i.id === itemId);\n      return item?.content ?? null;\n    },\n    [],\n  );\n\n  // Valid IDs for cache cleanup (cast to string[] for useContentCache compatibility)\n  const validIds = React.useMemo((): readonly string[] => items.map((i) => i.id), [items]);\n\n  // Use shared content cache hook\n  const { getCachedContent } = useContentCache({\n    resolveContent,\n    validIds,\n  });\n\n  // Stable context value (never changes)\n  const contextValue = React.useMemo<PivotOutletContextValue>(\n    () => ({\n      getState: () => stateRef.current,\n      subscribe: (callback) => {\n        subscribersRef.current.add(callback);\n        return () => subscribersRef.current.delete(callback);\n      },\n      getCachedContent,\n    }),\n    [getCachedContent],\n  );\n\n  // Stable Outlet component (reference never changes)\n  const Outlet = React.useMemo(() => {\n    const OutletComponent: React.FC = () => (\n      <PivotOutletContext.Provider value={contextValue}>\n        <div style={containerStyle} data-pivot-container>\n          <PivotOutletInner />\n        </div>\n      </PivotOutletContext.Provider>\n    );\n    OutletComponent.displayName = \"PivotOutlet\";\n    return OutletComponent;\n  }, [contextValue, containerStyle]);\n\n  return { activeId, setActiveId, isActive, getItemProps, Outlet };\n}\n"],"names":["useContentCache","options","resolveContent","validIds","cacheRef","React","resolveContentRef","getCachedContent","id","cached","content","clearCache","currentValidIds","_","baseStyle","PivotContent","isActive","transitionMode","children","ref","prevActiveRef","useIsomorphicLayoutEffect","el","wasActive","style","s","PIVOT_ANIMATION_ENTER","PIVOT_ANIMATION_LEAVE","jsx","PivotOutletContext","PivotOutletInner","ctx","forceUpdate","x","items","activeId","Fragment","item","usePivot","controlledActiveId","defaultActiveId","onActiveChange","isControlled","uncontrolledActiveId","setUncontrolledActiveId","firstEnabled","setActiveId","target","getItemProps","containerStyle","stateRef","subscribersRef","callback","itemId","i","contextValue","Outlet","OutletComponent"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-panel-layout",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "license": "Unlicense",
   "type": "module",
   "main": "dist/index.cjs",

package/dist/FloatingPanelFrame-6W5OexYe.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"FloatingPanelFrame-6W5OexYe.js","sources":["../src/components/paneling/FloatingPanelFrame.tsx"],"sourcesContent":["/**\n * @file Shared floating panel frame components for reusable overlay styling\n */\nimport * as React from \"react\";\nimport {\n  FLOATING_PANEL_BORDER_RADIUS,\n  FLOATING_PANEL_GAP,\n  FLOATING_PANEL_HEADER_PADDING_Y,\n  FLOATING_PANEL_HEADER_PADDING_X,\n  FLOATING_PANEL_CONTENT_PADDING,\n  FLOATING_PANEL_META_FONT_SIZE,\n  FLOATING_PANEL_CONTROLS_GAP,\n  FLOATING_PANEL_CLOSE_BUTTON_FONT_SIZE,\n  FLOATING_PANEL_CLOSE_BUTTON_PADDING,\n  FLOATING_PANEL_SURFACE_COLOR,\n  FLOATING_PANEL_SURFACE_2_COLOR,\n  FLOATING_PANEL_BORDER_COLOR,\n  FLOATING_PANEL_MUTED_FG_COLOR,\n  FLOATING_PANEL_SHADOW,\n} from \"../../constants/styles\";\n\nconst shadowWrapperStyle: React.CSSProperties = {\n  borderRadius: FLOATING_PANEL_BORDER_RADIUS,\n  boxShadow: FLOATING_PANEL_SHADOW,\n};\n\nconst overflowWrapperStyle: React.CSSProperties = {\n  borderRadius: FLOATING_PANEL_BORDER_RADIUS,\n  overflow: \"hidden\",\n};\n\nconst innerStyle: React.CSSProperties = {\n  display: \"flex\",\n  flexDirection: \"column\",\n  borderRadius: FLOATING_PANEL_BORDER_RADIUS,\n  border: `1px solid ${FLOATING_PANEL_BORDER_COLOR}`,\n  background: FLOATING_PANEL_SURFACE_COLOR,\n};\n\nconst headerStyle: React.CSSProperties = {\n  display: \"flex\",\n  alignItems: \"center\",\n  gap: FLOATING_PANEL_GAP,\n  padding: `${FLOATING_PANEL_HEADER_PADDING_Y} ${FLOATING_PANEL_HEADER_PADDING_X}`,\n  borderBottom: `1px solid ${FLOATING_PANEL_BORDER_COLOR}`,\n  background: FLOATING_PANEL_SURFACE_2_COLOR,\n};\n\nconst titleStyle: React.CSSProperties = {\n  fontWeight: 600,\n};\n\nconst metaStyle: React.CSSProperties = {\n  marginLeft: \"auto\",\n  color: FLOATING_PANEL_MUTED_FG_COLOR,\n  fontSize: FLOATING_PANEL_META_FONT_SIZE,\n};\n\nconst controlsStyle: React.CSSProperties = {\n  display: \"flex\",\n  alignItems: \"center\",\n  gap: FLOATING_PANEL_CONTROLS_GAP,\n};\n\nconst closeButtonStyle: React.CSSProperties = {\n  border: \"none\",\n  background: \"transparent\",\n  cursor: \"pointer\",\n  fontSize: FLOATING_PANEL_CLOSE_BUTTON_FONT_SIZE,\n  padding: FLOATING_PANEL_CLOSE_BUTTON_PADDING,\n  lineHeight: 1,\n};\n\nconst contentStyle: React.CSSProperties = {\n  padding: FLOATING_PANEL_CONTENT_PADDING,\n  overflow: \"auto\",\n};\n\nexport type FloatingPanelFrameProps = Omit<React.HTMLAttributes<HTMLDivElement>, \"className\" | \"style\"> & {\n  style?: React.CSSProperties;\n};\n\nexport const FloatingPanelFrame = React.forwardRef<HTMLDivElement, FloatingPanelFrameProps>(function FloatingPanelFrame(\n  { style: propStyle, children, ...props },\n  ref,\n) {\n  const combinedShadowStyle = React.useMemo(\n    () => ({ ...shadowWrapperStyle, ...propStyle }),\n    [propStyle],\n  );\n\n  const combinedOverflowStyle = React.useMemo(() => {\n    const hasCustomBorderRadius = propStyle?.borderRadius !== undefined;\n    const hasHeight = propStyle?.height !== undefined;\n\n    if (!hasCustomBorderRadius && !hasHeight) {\n      return overflowWrapperStyle;\n    }\n\n    const result: React.CSSProperties = { ...overflowWrapperStyle };\n    if (hasCustomBorderRadius) {\n      result.borderRadius = propStyle.borderRadius;\n    }\n    if (hasHeight) {\n      result.height = propStyle.height;\n    }\n    return result;\n  }, [propStyle?.borderRadius, propStyle?.height]);\n\n  const combinedInnerStyle = React.useMemo(() => {\n    const hasCustomBorderRadius = propStyle?.borderRadius !== undefined;\n    const hasHeight = propStyle?.height !== undefined;\n\n    if (!hasCustomBorderRadius && !hasHeight) {\n      return innerStyle;\n    }\n\n    const result: React.CSSProperties = { ...innerStyle };\n    if (hasCustomBorderRadius) {\n      result.borderRadius = propStyle.borderRadius;\n    }\n    if (hasHeight) {\n      result.height = propStyle.height;\n    }\n    return result;\n  }, [propStyle?.borderRadius, propStyle?.height]);\n\n  return (\n    <div ref={ref} style={combinedShadowStyle} {...props}>\n      <div style={combinedOverflowStyle}>\n        <div style={combinedInnerStyle}>{children}</div>\n      </div>\n    </div>\n  );\n});\n\nexport type FloatingPanelHeaderProps = Omit<React.HTMLAttributes<HTMLDivElement>, \"className\" | \"style\"> & {\n  style?: React.CSSProperties;\n};\n\nexport const FloatingPanelHeader: React.FC<FloatingPanelHeaderProps> = ({ style: propStyle, ...props }) => {\n  const combinedStyle = React.useMemo(() => ({ ...headerStyle, ...propStyle }), [propStyle]);\n  return <div style={combinedStyle} {...props} />;\n};\n\nexport type FloatingPanelTitleProps = Omit<React.HTMLAttributes<HTMLSpanElement>, \"className\" | \"style\"> & {\n  style?: React.CSSProperties;\n};\n\nexport const FloatingPanelTitle: React.FC<FloatingPanelTitleProps> = ({ style: propStyle, ...props }) => {\n  const combinedStyle = React.useMemo(() => ({ ...titleStyle, ...propStyle }), [propStyle]);\n  return <span style={combinedStyle} {...props} />;\n};\n\nexport type FloatingPanelMetaProps = Omit<React.HTMLAttributes<HTMLSpanElement>, \"className\" | \"style\"> & {\n  style?: React.CSSProperties;\n};\n\nexport const FloatingPanelMeta: React.FC<FloatingPanelMetaProps> = ({ style: propStyle, ...props }) => {\n  const combinedStyle = React.useMemo(() => ({ ...metaStyle, ...propStyle }), [propStyle]);\n  return <span style={combinedStyle} {...props} />;\n};\n\nexport type FloatingPanelControlsProps = Omit<React.HTMLAttributes<HTMLDivElement>, \"className\" | \"style\"> & {\n  style?: React.CSSProperties;\n};\n\nexport const FloatingPanelControls: React.FC<FloatingPanelControlsProps> = ({ style: propStyle, ...props }) => {\n  const combinedStyle = React.useMemo(() => ({ ...controlsStyle, ...propStyle }), [propStyle]);\n  return <div style={combinedStyle} {...props} />;\n};\n\nexport type FloatingPanelContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, \"className\" | \"style\"> & {\n  style?: React.CSSProperties;\n};\n\nexport const FloatingPanelContent = React.forwardRef<HTMLDivElement, FloatingPanelContentProps>(\n  function FloatingPanelContent({ style: propStyle, ...props }, ref) {\n    const combinedStyle = React.useMemo(() => ({ ...contentStyle, ...propStyle }), [propStyle]);\n    return <div ref={ref} style={combinedStyle} {...props} />;\n  },\n);\n\nexport type FloatingPanelCloseButtonProps = Omit<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  \"className\" | \"style\" | \"children\"\n> & {\n  style?: React.CSSProperties;\n};\n\nexport const FloatingPanelCloseButton: React.FC<FloatingPanelCloseButtonProps> = ({ style: propStyle, ...props }) => {\n  const combinedStyle = React.useMemo(() => ({ ...closeButtonStyle, ...propStyle }), [propStyle]);\n  return (\n    <button type=\"button\" style={combinedStyle} {...props}>\n      ×\n    </button>\n  );\n};\n\nFloatingPanelFrame.displayName = \"FloatingPanelFrame\";\nFloatingPanelHeader.displayName = \"FloatingPanelHeader\";\nFloatingPanelTitle.displayName = \"FloatingPanelTitle\";\nFloatingPanelMeta.displayName = \"FloatingPanelMeta\";\nFloatingPanelControls.displayName = \"FloatingPanelControls\";\nFloatingPanelContent.displayName = \"FloatingPanelContent\";\nFloatingPanelCloseButton.displayName = \"FloatingPanelCloseButton\";\n"],"names":["shadowWrapperStyle","FLOATING_PANEL_BORDER_RADIUS","FLOATING_PANEL_SHADOW","overflowWrapperStyle","innerStyle","FLOATING_PANEL_BORDER_COLOR","FLOATING_PANEL_SURFACE_COLOR","headerStyle","FLOATING_PANEL_GAP","FLOATING_PANEL_HEADER_PADDING_Y","FLOATING_PANEL_HEADER_PADDING_X","FLOATING_PANEL_SURFACE_2_COLOR","titleStyle","metaStyle","FLOATING_PANEL_MUTED_FG_COLOR","FLOATING_PANEL_META_FONT_SIZE","controlsStyle","FLOATING_PANEL_CONTROLS_GAP","closeButtonStyle","FLOATING_PANEL_CLOSE_BUTTON_FONT_SIZE","FLOATING_PANEL_CLOSE_BUTTON_PADDING","contentStyle","FLOATING_PANEL_CONTENT_PADDING","FloatingPanelFrame","React","propStyle","children","props","ref","combinedShadowStyle","combinedOverflowStyle","hasCustomBorderRadius","hasHeight","result","combinedInnerStyle","jsx","FloatingPanelHeader","combinedStyle","FloatingPanelTitle","FloatingPanelMeta","FloatingPanelControls","FloatingPanelContent","FloatingPanelCloseButton"],"mappings":"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"}