@kushagradhawan/kookie-ui 0.1.45 → 0.1.46

package/dist/esm/components/shell.js

@@ -1,2 +1,2 @@
-"use client";import*as e from"react";import J from"classnames";import*as G from"./sheet.js";import"./inset.js";import{VisuallyHidden as ce}from"./visually-hidden.js";const se={xs:"(min-width: 520px)",sm:"(min-width: 768px)",md:"(min-width: 1024px)",lg:"(min-width: 1280px)",xl:"(min-width: 1640px)"},Re=e.createContext(null);function Z(){const s=e.useContext(Re);if(!s)throw new Error("Shell components must be used within <Shell.Root>");return s}const ie=e.createContext(null);function Ee(){const s=e.useContext(ie);if(!s)throw new Error("Shell.Handle must be used within a resizable pane");return s}const _=e.forwardRef(({className:s,children:v,...r},m)=>{const{containerRef:x,cssVarName:c,minSize:E,maxSize:h,defaultSize:P,orientation:y,edge:T,computeNext:L,onResize:a,onResizeStart:g,onResizeEnd:w,snapPoints:F,snapTolerance:q,collapseThreshold:K,collapsible:I,target:V,requestCollapse:U,requestToggle:S}=Ee(),p=e.useRef(null);e.useEffect(()=>()=>{try{p.current?.()}catch{}p.current=null},[]);const u=y;return e.createElement("div",{...r,ref:m,className:J("rt-ShellResizer",s),"data-orientation":y,"data-edge":T,role:"slider","aria-orientation":u,"aria-valuemin":E,"aria-valuemax":h,"aria-valuenow":P,tabIndex:0,onPointerDown:t=>{if(!x.current)return;t.preventDefault();const f=x.current,n=t.currentTarget,$=t.pointerId;try{p.current?.()}catch{}f.setAttribute("data-resizing","");try{n.setPointerCapture($)}catch{}const R=y==="vertical"?t.clientX:t.clientY,C=parseFloat(getComputedStyle(f).getPropertyValue(c)||`${P}`),M=o=>Math.min(Math.max(o,E),h),B=document.body,d=B.style.cursor,N=B.style.userSelect;B.style.cursor=y==="vertical"?"col-resize":"row-resize",B.style.userSelect="none",g?.(C);const D=o=>{const k=y==="vertical"?o.clientX:o.clientY,z=M(L(k,R,C));f.style.setProperty(c,`${z}px`),n.setAttribute("aria-valuenow",String(z)),a?.(z)},j=()=>{try{n.releasePointerCapture($)}catch{}window.removeEventListener("pointermove",D),window.removeEventListener("pointerup",H),window.removeEventListener("pointercancel",H),window.removeEventListener("keydown",b),n.removeEventListener("lostpointercapture",H),f.removeAttribute("data-resizing"),B.style.cursor=d,B.style.userSelect=N,p.current=null},H=()=>{const o=parseFloat(getComputedStyle(f).getPropertyValue(c)||`${P}`);let k=o;if(F&&F.length){const z=F.reduce((Q,X)=>Math.abs(X-o)<Math.abs(Q-o)?X:Q,F[0]);Math.abs(z-o)<=(q??8)&&(k=z,f.style.setProperty(c,`${k}px`),n.setAttribute("aria-valuenow",String(k)),a?.(k))}I&&typeof K=="number"&&o<=K&&U?.(),w?.(k),j()},b=o=>{o.key==="Escape"&&(f.style.setProperty(c,`${C}px`),n.setAttribute("aria-valuenow",String(C)),w?.(C),j())};window.addEventListener("pointermove",D),window.addEventListener("pointerup",H),window.addEventListener("pointercancel",H),window.addEventListener("keydown",b),n.addEventListener("lostpointercapture",H),p.current=j},onDoubleClick:()=>{I&&S?.()},onKeyDown:t=>{if(!x.current)return;const f=x.current,n=parseFloat(getComputedStyle(f).getPropertyValue(c)||`${P}`),$=M=>Math.min(Math.max(M,E),h),R=t.shiftKey?32:8;let C=0;if(y==="vertical"?t.key==="ArrowRight"?C=R:t.key==="ArrowLeft"&&(C=-R):t.key==="ArrowDown"?C=R:t.key==="ArrowUp"&&(C=-R),t.key==="Home"){t.preventDefault(),g?.(n);const M=$(E);f.style.setProperty(c,`${M}px`),t.currentTarget.setAttribute("aria-valuenow",String(M)),a?.(M),w?.(M);return}if(t.key==="End"){t.preventDefault(),g?.(n);const M=$(h);f.style.setProperty(c,`${M}px`),t.currentTarget.setAttribute("aria-valuenow",String(M)),a?.(M),w?.(M);return}if(C!==0){t.preventDefault(),g?.(n);const M=$(n+(T==="start"&&y==="vertical"?-C:C));f.style.setProperty(c,`${M}px`),t.currentTarget.setAttribute("aria-valuenow",String(M)),a?.(M),w?.(M)}}},v)});_.displayName="Shell.Handle";const pe=e.forwardRef((s,v)=>e.createElement(_,{...s,ref:v}));pe.displayName="Shell.Panel.Handle";const ue=e.forwardRef((s,v)=>e.createElement(_,{...s,ref:v}));ue.displayName="Shell.Sidebar.Handle";const fe=e.forwardRef((s,v)=>e.createElement(_,{...s,ref:v}));fe.displayName="Shell.Inspector.Handle";const me=e.forwardRef((s,v)=>e.createElement(_,{...s,ref:v}));me.displayName="Shell.Bottom.Handle";function le(s){const{currentBreakpoint:v}=Z();return e.useMemo(()=>{if(typeof s=="string")return s;if(s[v])return s[v];const m=[...Object.keys(se)].reverse().concat("initial"),x=m.indexOf(v);for(let c=x+1;c<m.length;c++){const E=m[c];if(s[E])return s[E]}return"fixed"},[s,v])}function ge(){const[s,v]=e.useState("initial"),[r,m]=e.useState(!1);return e.useEffect(()=>{if(typeof window>"u")return;const c=Object.entries(se).map(([h,P])=>[h,window.matchMedia(P)]),E=()=>{const h=c.filter(([,y])=>y.matches).map(([y])=>y),P=h[h.length-1]??"initial";v(P),m(!0)};return E(),c.forEach(([,h])=>h.addEventListener("change",E)),()=>{c.forEach(([,h])=>h.removeEventListener("change",E))}},[]),{bp:s,ready:r}}const Se=e.forwardRef(({className:s,children:v,height:r="full",...m},x)=>{const{bp:c,ready:E}=ge(),[h,P]=e.useState("collapsed"),[y,T]=e.useState("collapsed"),[L,a]=e.useState("expanded"),[g,w]=e.useState("collapsed"),[F,q]=e.useState("collapsed"),[K,I]=e.useState(!1),[V,U]=e.useState(!1),S=e.useRef(i=>i==="collapsed"?"thin":i==="thin"?"expanded":"collapsed"),p=e.useCallback(i=>{S.current=i},[]);e.useEffect(()=>{h==="collapsed"&&T("collapsed")},[h]),e.useEffect(()=>{V&&K&&console.warn("Shell: Sidebar cannot coexist with Rail or Panel. Use either Rail+Panel OR Sidebar.")},[V,K]);const[u,t]=e.useState(void 0),f=e.useCallback(i=>t(i),[]),n=e.useRef(64),$=e.useRef(288),R=e.useCallback(i=>{n.current=i},[]),C=e.useCallback(i=>{$.current=i},[]),M=e.useMemo(()=>{const i=e.Children.toArray(v),W=(Y,re)=>e.isValidElement(Y)&&(Y.type===re||Y.type?.displayName===re.displayName);return i.some(Y=>W(Y,oe)||W(Y,ne))},[v]),B=e.useMemo(()=>{const i=e.Children.toArray(v),W=(Y,re)=>e.isValidElement(Y)&&(Y.type===re||Y.type?.displayName===re.displayName);return i.some(Y=>W(Y,de))},[v]),d=e.useCallback(i=>{switch(i){case"left":case"rail":P(W=>W==="expanded"?"collapsed":"expanded");break;case"panel":h==="collapsed"?(P("expanded"),T("expanded")):T(W=>W==="expanded"?"collapsed":"expanded");break;case"sidebar":a(W=>S.current(W));break;case"inspector":w(W=>W==="expanded"?"collapsed":"expanded");break;case"bottom":q(W=>W==="expanded"?"collapsed":"expanded");break}},[h]),N=e.useCallback(i=>{switch(i){case"left":case"rail":P("expanded");break;case"panel":P("expanded"),T("expanded");break;case"sidebar":a("expanded");break;case"inspector":w("expanded");break;case"bottom":q("expanded");break}},[]),D=e.useCallback(i=>{switch(i){case"left":case"rail":P("collapsed");break;case"panel":T("collapsed");break;case"sidebar":a("collapsed");break;case"inspector":w("collapsed");break;case"bottom":q("collapsed");break}},[]),j=e.useMemo(()=>({leftMode:h,setLeftMode:P,panelMode:y,setPanelMode:T,sidebarMode:L,setSidebarMode:a,inspectorMode:g,setInspectorMode:w,bottomMode:F,setBottomMode:q,hasLeft:K,setHasLeft:I,hasSidebar:V,setHasSidebar:U,currentBreakpoint:c,currentBreakpointReady:E,leftResolvedPresentation:u,togglePane:d,expandPane:N,collapsePane:D,setSidebarToggleComputer:p,onLeftPres:f,onRailDefaults:R,onPanelDefaults:C}),[h,y,L,g,F,K,V,c,E,u,d,N,D,p,f,R,C]),H=e.Children.toArray(v),b=(i,W)=>e.isValidElement(i)&&(i.type===W||i.type?.displayName===W.displayName),o=H.filter(i=>b(i,Me)),k=H.filter(i=>b(i,oe)),z=H.filter(i=>b(i,ne)),Q=H.filter(i=>b(i,de)),X=H.filter(i=>b(i,Pe)),te=H.filter(i=>b(i,ye)),ve=H.filter(i=>b(i,be)),l=e.useMemo(()=>r==="full"?{height:"100vh"}:r==="auto"?{height:"auto"}:typeof r=="string"?{height:r}:typeof r=="number"?{height:`${r}px`}:{},[r]),[O,A]=e.useState(null),ae=e.useCallback(i=>A(i),[]),ee=e.useCallback(()=>A(null),[]);return e.createElement("div",{...m,ref:x,className:J("rt-ShellRoot",s),style:{...l,...m.style}},e.createElement(Re.Provider,{value:{...j,peekTarget:O,setPeekTarget:A,peekPane:ae,clearPeek:ee}},o,e.createElement("div",{className:"rt-ShellBody","data-peek-target":O??void 0,style:O==="rail"||O==="panel"?{"--peek-rail-width":`${n.current}px`}:void 0},M&&!B?(()=>{const i=k[0],W=i?{mode:i.props?.mode,defaultMode:i.props?.defaultMode,onModeChange:i.props?.onModeChange,presentation:i.props?.presentation,collapsible:i.props?.collapsible,onExpand:i.props?.onExpand,onCollapse:i.props?.onCollapse}:{};return e.createElement(he,{...W},k,z)})():Q,X,te),ve))});Se.displayName="Shell.Root";const Me=e.forwardRef(({className:s,height:v=64,style:r,...m},x)=>e.createElement("header",{...m,ref:x,className:J("rt-ShellHeader",s),style:{...r,"--shell-header-height":`${v}px`}}));Me.displayName="Shell.Header";const he=e.forwardRef(({className:s,presentation:v={initial:"overlay",sm:"fixed"},mode:r,defaultMode:m="collapsed",onModeChange:x,collapsible:c=!0,onExpand:E,onCollapse:h,children:P,style:y,...T},L)=>{const a=Z(),g=le(v),w=g==="overlay",F=g==="stacked",q=e.useRef(null);e.useEffect(()=>{a.onLeftPres?.(g)},[a,g]);const K=e.useCallback(S=>{q.current=S,typeof L=="function"?L(S):L&&(L.current=S)},[L]);e.useEffect(()=>(a.setHasLeft(!0),()=>a.setHasLeft(!1)),[a]);const I=e.useCallback(()=>{if(typeof m=="string")return m;const S=m;if(S&&S[a.currentBreakpoint])return S[a.currentBreakpoint];const u=[...Object.keys(se)].reverse().concat("initial"),t=u.indexOf(a.currentBreakpoint);for(let f=t+1;f<u.length;f++){const n=u[f];if(S&&S[n])return S[n]}return"collapsed"},[m,a.currentBreakpoint]),V=e.useRef(null);e.useEffect(()=>{if(r!==void 0||!a.currentBreakpointReady||V.current===a.currentBreakpoint)return;V.current=a.currentBreakpoint;const S=I();S!==a.leftMode&&a.setLeftMode(S)},[r,a.currentBreakpoint,a.currentBreakpointReady,I,a.leftMode,a.setLeftMode]),e.useEffect(()=>{r!==void 0&&a.leftMode!==r&&a.setLeftMode(r)},[r,a]),e.useEffect(()=>{r===void 0&&x?.(a.leftMode)},[a.leftMode,r,x]),e.useEffect(()=>{a.leftMode==="expanded"?E?.():h?.()},[a.leftMode,E,h]);const U=a.leftMode==="expanded";if(w){const S=a.leftMode==="expanded",p=e.Children.toArray(P),u=(B,d)=>e.isValidElement(B)&&B.type===d,t=p.find(B=>u(B,oe)),f=p.find(B=>u(B,ne)),n=typeof t?.props?.expandedSize=="number"?t.props.expandedSize:64,$=typeof f?.props?.expandedSize=="number"?f.props.expandedSize:288,R=!!t,C=!!f,M=(R?n:0)+(a.panelMode==="expanded"&&C?$:0);return e.createElement(G.Root,{open:S,onOpenChange:B=>a.setLeftMode(B?"expanded":"collapsed")},e.createElement(G.Content,{side:"start",style:{padding:0},width:{initial:`${M}px`}},e.createElement(ce,null,e.createElement(G.Title,null,"Navigation")),e.createElement("div",{className:"rt-ShellLeft"},P)))}if(F){const S=a.leftMode==="expanded",p=e.Children.toArray(P),u=(d,N)=>e.isValidElement(d)&&d.type===N,t=p.find(d=>u(d,oe)),f=p.find(d=>u(d,ne)),n=typeof t?.props?.expandedSize=="number"?t.props.expandedSize:64,$=typeof f?.props?.expandedSize=="number"?f.props.expandedSize:288,R=!!t,M=!!f&&(a.panelMode==="expanded"||a.peekTarget==="panel"),B=(R?n:0)+(M?$:0);return e.createElement("div",{...T,ref:K,className:J("rt-ShellLeft",s),"data-mode":a.leftMode,"data-peek":a.peekTarget==="left"||a.peekTarget==="rail"||a.peekTarget==="panel"||void 0,"data-presentation":g,style:{...y},"data-open":S||void 0},P)}return e.createElement("div",{...T,ref:K,className:J("rt-ShellLeft",s),"data-mode":a.leftMode,"data-peek":a.peekTarget==="left"||a.peekTarget==="rail"||a.peekTarget==="panel"||void 0,"data-presentation":g,style:{...y}},P)});he.displayName="Shell.Left";const oe=e.forwardRef(({className:s,presentation:v,mode:r,defaultMode:m,onModeChange:x,expandedSize:c=64,collapsible:E,onExpand:h,onCollapse:P,children:y,style:T,...L},a)=>{const g=Z();e.useEffect(()=>{g.onRailDefaults?.(c)},[g,c]);const w=g.leftMode==="expanded";return e.createElement("div",{...L,ref:a,className:J("rt-ShellRail",s),"data-mode":g.leftMode,"data-peek":g.leftResolvedPresentation!=="overlay"&&g.peekTarget==="rail"||void 0,style:{...T,"--rail-size":`${c}px`}},e.createElement("div",{className:"rt-ShellRailContent","data-visible":w||g.leftResolvedPresentation!=="overlay"&&g.peekTarget==="rail"||void 0},y))});oe.displayName="Shell.Rail";const ne=e.forwardRef(({className:s,mode:v,onModeChange:r,expandedSize:m=288,minSize:x,maxSize:c,resizable:E,collapsible:h=!0,onExpand:P,onCollapse:y,onResize:T,onResizeStart:L,onResizeEnd:a,snapPoints:g,snapTolerance:w,collapseThreshold:F,paneId:q,persistence:K,children:I,style:V,...U},S)=>{const p=Z();e.useEffect(()=>{p.onPanelDefaults?.(m)},[p,m]);const u=e.useRef(null),t=e.useCallback(d=>{u.current=d,typeof S=="function"?S(d):S&&(S.current=d)},[S]),f=e.Children.toArray(I),n=f.filter(d=>e.isValidElement(d)&&d.type===pe),$=f.filter(d=>!(e.isValidElement(d)&&d.type===pe)),R=p.leftResolvedPresentation==="overlay",C=e.useMemo(()=>{if(!q||K)return K;const d=`kookie-ui:shell:panel:${q}`;return{load:()=>{if(typeof window>"u")return;const D=window.localStorage.getItem(d);return D?Number(D):void 0},save:D=>{typeof window>"u"||window.localStorage.setItem(d,String(D))}}},[q,K]);e.useEffect(()=>{let d=!0;return(async()=>{if(!E||!C?.load||R)return;const N=await C.load();d&&typeof N=="number"&&u.current&&(u.current.style.setProperty("--panel-size",`${N}px`),T?.(N))})(),()=>{d=!1}},[E,C,T,R]),e.useEffect(()=>{u.current&&R&&u.current.style.setProperty("--panel-size",`${m}px`)},[R,m]),e.useEffect(()=>{if(u.current&&p.leftResolvedPresentation!=="overlay"&&p.leftMode==="expanded"&&p.panelMode==="expanded"){const d=u.current.parentElement||null;try{d?.style.removeProperty("width")}catch{}}},[p.leftResolvedPresentation,p.leftMode,p.panelMode]);const M=p.leftMode==="expanded"&&p.panelMode==="expanded",B=E&&p.leftResolvedPresentation!=="overlay"&&M?e.createElement(ie.Provider,{value:{containerRef:u,cssVarName:"--panel-size",minSize:typeof x=="number"?x:100,maxSize:typeof c=="number"?c:800,defaultSize:m,orientation:"vertical",edge:"end",computeNext:(d,N,D)=>{const j=getComputedStyle(u.current).direction==="rtl",H=d-N;return D+(j?-H:H)},onResize:T,onResizeStart:d=>{const D=u.current?.parentElement;try{D?.style.removeProperty("width")}catch{}L?.(d)},onResizeEnd:d=>{a?.(d),C?.save?.(d)},target:"panel",collapsible:!!h,snapPoints:g,snapTolerance:w??8,collapseThreshold:F,requestCollapse:()=>p.setPanelMode("collapsed"),requestToggle:()=>p.togglePane("panel")}},n.length>0?n.map((d,N)=>e.cloneElement(d,{key:d.key??N})):e.createElement(_,null)):null;return e.createElement("div",{...U,ref:t,className:J("rt-ShellPanel",s),"data-mode":p.panelMode,"data-visible":M||p.leftResolvedPresentation!=="overlay"&&p.peekTarget==="panel"||void 0,"data-peek":p.leftResolvedPresentation!=="overlay"&&p.peekTarget==="panel"||void 0,style:{...V,"--panel-size":`${m}px`}},e.createElement("div",{className:"rt-ShellPanelContent","data-visible":M||void 0},$),B)});ne.displayName="Shell.Panel",ne.Handle=pe;const de=e.forwardRef(({className:s,presentation:v={initial:"overlay",md:"fixed"},mode:r,defaultMode:m="expanded",onModeChange:x,expandedSize:c=288,minSize:E=200,maxSize:h=400,resizable:P=!1,collapsible:y=!0,onExpand:T,onCollapse:L,onResize:a,onResizeStart:g,onResizeEnd:w,snapPoints:F,snapTolerance:q,collapseThreshold:K,paneId:I,persistence:V,children:U,style:S,thinSize:p=64,toggleModes:u,...t},f)=>{const n=Z(),$=le(v),R=$==="overlay",C=$==="stacked",M=e.useRef(null),B=e.useCallback(l=>{M.current=l,typeof f=="function"?f(l):f&&(f.current=l)},[f]),d=e.Children.toArray(U),N=d.filter(l=>e.isValidElement(l)&&l.type===ue),D=d.filter(l=>!(e.isValidElement(l)&&l.type===ue)),j=e.useId();e.useEffect(()=>(n.setHasSidebar(!0),()=>{n.setHasSidebar(!1)}),[n,j]);const H=e.useRef(!1);e.useEffect(()=>{H.current||(H.current=!0,r===void 0&&n.sidebarMode!==m&&n.setSidebarMode(m))},[]),e.useEffect(()=>{r!==void 0&&n.sidebarMode!==r&&n.setSidebarMode(r)},[r,n]),e.useEffect(()=>{r===void 0&&x?.(n.sidebarMode)},[n.sidebarMode,r,x]),e.useEffect(()=>{n.sidebarMode==="expanded"?T?.():L?.()},[n.sidebarMode,T,L]);const b=n.sidebarMode!=="collapsed",o=e.useMemo(()=>{if(!I||V)return V;const l=`kookie-ui:shell:sidebar:${I}`;return{load:()=>{if(typeof window>"u")return;const A=window.localStorage.getItem(l);return A?Number(A):void 0},save:A=>{typeof window>"u"||window.localStorage.setItem(l,String(A))}}},[I,V]);e.useEffect(()=>{let l=!0;return(async()=>{if(!P||!o?.load||R)return;const O=await o.load();l&&typeof O=="number"&&M.current&&(M.current.style.setProperty("--sidebar-size",`${O}px`),a?.(O))})(),()=>{l=!1}},[P,o,a,R]);const k=Z();e.useEffect(()=>{if(!k.setSidebarToggleComputer)return;const l=u&&u.length>0?u:["thin","expanded"],O=A=>A==="collapsed"?l[0]??"expanded":A==="thin"?l.includes("thin")&&l.includes("expanded")?"expanded":"collapsed":l.length===2&&l.includes("thin")&&l.includes("expanded")?"collapsed":l.includes("thin")&&!l.includes("expanded")?"thin":"collapsed";return k.setSidebarToggleComputer(O),()=>{k.setSidebarToggleComputer?.(A=>A==="collapsed"?"thin":A==="thin"?"expanded":"collapsed")}},[k,u]);const z=e.useRef(c),Q=e.useRef("expanded");e.useEffect(()=>{n.sidebarMode!=="collapsed"&&(Q.current=n.sidebarMode,z.current=n.sidebarMode==="thin"?p:c)},[n.sidebarMode,p,c]);const X=e.useCallback(()=>{if(typeof m=="string")return m;const l=m;if(l&&l[n.currentBreakpoint])return l[n.currentBreakpoint];const A=[...Object.keys(se)].reverse().concat("initial"),ae=A.indexOf(n.currentBreakpoint);for(let ee=ae+1;ee<A.length;ee++){const i=A[ee];if(l&&l[i])return l[i]}return"collapsed"},[m,n.currentBreakpoint]),te=e.useRef(null);e.useEffect(()=>{if(r!==void 0||!n.currentBreakpointReady||te.current===n.currentBreakpoint)return;te.current=n.currentBreakpoint;const l=X();l!==n.sidebarMode&&n.setSidebarMode(l)},[r,n.currentBreakpoint,n.currentBreakpointReady,X,n.sidebarMode,n.setSidebarMode]);const ve=P&&!R&&n.sidebarMode==="expanded"?e.createElement(ie.Provider,{value:{containerRef:M,cssVarName:"--sidebar-size",minSize:E,maxSize:h,defaultSize:c,orientation:"vertical",edge:"end",computeNext:(l,O,A)=>{const ae=getComputedStyle(M.current).direction==="rtl",ee=l-O;return A+(ae?-ee:ee)},onResize:a,onResizeStart:g,onResizeEnd:l=>{w?.(l),o?.save?.(l)},target:"sidebar",collapsible:y,snapPoints:F,snapTolerance:q??8,collapseThreshold:K,requestCollapse:()=>n.setSidebarMode("collapsed"),requestToggle:()=>n.togglePane("sidebar")}},N.length>0?N.map((l,O)=>e.cloneElement(l,{key:l.key??O})):e.createElement(_,null)):null;if(R){const l=n.sidebarMode!=="collapsed";return e.createElement(G.Root,{open:l,onOpenChange:O=>n.setSidebarMode(O?"expanded":"collapsed")},e.createElement(G.Content,{side:"start",style:{padding:0},width:{initial:`${l?n.sidebarMode==="thin"?p:c:z.current}px`}},e.createElement(ce,null,e.createElement(G.Title,null,"Sidebar")),U))}return e.createElement("div",{...t,ref:B,className:J("rt-ShellSidebar",s),"data-mode":n.sidebarMode,"data-peek":n.peekTarget==="sidebar"||void 0,"data-presentation":$,"data-open":C&&b||void 0,style:{...S,"--sidebar-size":`${c}px`,"--sidebar-thin-size":`${p}px`,"--sidebar-min-size":`${E}px`,"--sidebar-max-size":`${h}px`,...n.peekTarget==="sidebar"&&!R?(()=>{const l=u&&u.length>0?u:["thin","expanded"],O=n.sidebarMode;let A="collapsed";return O==="collapsed"?A=l[0]??"expanded":O==="thin"?A=l.includes("expanded")?"expanded":"collapsed":A=l.includes("thin")?"thin":"collapsed",{"--peek-sidebar-width":`${A==="thin"?p:c}px`}})():{}}},e.createElement("div",{className:"rt-ShellSidebarContent","data-visible":b||void 0},D),ve)});de.displayName="Shell.Sidebar",de.Handle=ue;const Pe=e.forwardRef(({className:s,...v},r)=>e.createElement("main",{...v,ref:r,className:J("rt-ShellContent",s)}));Pe.displayName="Shell.Content";const ye=e.forwardRef(({className:s,presentation:v={initial:"overlay",lg:"fixed"},mode:r,defaultMode:m="collapsed",onModeChange:x,expandedSize:c=320,minSize:E=200,maxSize:h=500,resizable:P=!1,collapsible:y=!0,onExpand:T,onCollapse:L,onResize:a,onResizeStart:g,onResizeEnd:w,snapPoints:F,snapTolerance:q,collapseThreshold:K,paneId:I,persistence:V,children:U,style:S,...p},u)=>{const t=Z(),f=le(v),n=f==="overlay",$=f==="stacked",R=e.useRef(null),C=e.useCallback(o=>{R.current=o,typeof u=="function"?u(o):u&&(u.current=o)},[u]),M=e.Children.toArray(U),B=M.filter(o=>e.isValidElement(o)&&o.type===fe),d=M.filter(o=>!(e.isValidElement(o)&&o.type===fe)),N=e.useCallback(()=>{if(typeof m=="string")return m;const o=m;if(o&&o[t.currentBreakpoint])return o[t.currentBreakpoint];const z=[...Object.keys(se)].reverse().concat("initial"),Q=z.indexOf(t.currentBreakpoint);for(let X=Q+1;X<z.length;X++){const te=z[X];if(o&&o[te])return o[te]}return"collapsed"},[m,t.currentBreakpoint]),D=e.useRef(null);e.useEffect(()=>{if(r!==void 0||!t.currentBreakpointReady||D.current===t.currentBreakpoint)return;D.current=t.currentBreakpoint;const o=N();o!==t.inspectorMode&&t.setInspectorMode(o)},[r,t.currentBreakpoint,t.currentBreakpointReady,N,t.inspectorMode,t.setInspectorMode]),e.useEffect(()=>{r!==void 0&&t.inspectorMode!==r&&t.setInspectorMode(r)},[r,t]),e.useEffect(()=>{r===void 0&&x?.(t.inspectorMode)},[t.inspectorMode,r,x]),e.useEffect(()=>{t.inspectorMode==="expanded"?T?.():L?.()},[t.inspectorMode,T,L]);const j=t.inspectorMode==="expanded",H=e.useMemo(()=>{if(!I||V)return V;const o=`kookie-ui:shell:inspector:${I}`;return{load:()=>{if(typeof window>"u")return;const z=window.localStorage.getItem(o);return z?Number(z):void 0},save:z=>{typeof window>"u"||window.localStorage.setItem(o,String(z))}}},[I,V]);e.useEffect(()=>{let o=!0;return(async()=>{if(!P||!H?.load||n)return;const k=await H.load();o&&typeof k=="number"&&R.current&&(R.current.style.setProperty("--inspector-size",`${k}px`),a?.(k))})(),()=>{o=!1}},[P,H,a,n]);const b=P&&!n&&j?e.createElement(ie.Provider,{value:{containerRef:R,cssVarName:"--inspector-size",minSize:E,maxSize:h,defaultSize:c,orientation:"vertical",edge:"start",computeNext:(o,k,z)=>{const Q=getComputedStyle(R.current).direction==="rtl",X=o-k;return z+(Q?X:-X)},onResize:a,onResizeStart:g,onResizeEnd:o=>{w?.(o),H?.save?.(o)},target:"inspector",collapsible:y,snapPoints:F,snapTolerance:q??8,collapseThreshold:K,requestCollapse:()=>t.setInspectorMode("collapsed"),requestToggle:()=>t.togglePane("inspector")}},B.length>0?B.map((o,k)=>e.cloneElement(o,{key:o.key??k})):e.createElement(_,null)):null;if(n){const o=t.inspectorMode==="expanded";return e.createElement(G.Root,{open:o,onOpenChange:k=>t.setInspectorMode(k?"expanded":"collapsed")},e.createElement(G.Content,{side:"end",style:{padding:0},width:{initial:`${c}px`}},e.createElement(ce,null,e.createElement(G.Title,null,"Inspector")),U))}return e.createElement("div",{...p,ref:C,className:J("rt-ShellInspector",s),"data-mode":t.inspectorMode,"data-peek":t.peekTarget==="inspector"||void 0,"data-presentation":f,"data-open":$&&j||void 0,style:{...S,"--inspector-size":`${c}px`,"--inspector-min-size":`${E}px`,"--inspector-max-size":`${h}px`}},e.createElement("div",{className:"rt-ShellInspectorContent","data-visible":j||void 0},d),b)});ye.displayName="Shell.Inspector",ye.Handle=fe;const be=e.forwardRef(({className:s,presentation:v="fixed",mode:r,defaultMode:m="collapsed",onModeChange:x,expandedSize:c=200,minSize:E=100,maxSize:h=400,resizable:P=!1,collapsible:y=!0,onExpand:T,onCollapse:L,onResize:a,onResizeStart:g,onResizeEnd:w,snapPoints:F,snapTolerance:q,collapseThreshold:K,paneId:I,persistence:V,children:U,style:S,...p},u)=>{const t=Z(),f=le(v),n=f==="overlay",$=f==="stacked",R=e.useRef(null),C=e.useCallback(b=>{R.current=b,typeof u=="function"?u(b):u&&(u.current=b)},[u]),M=e.Children.toArray(U),B=M.filter(b=>e.isValidElement(b)&&b.type===me),d=M.filter(b=>!(e.isValidElement(b)&&b.type===me)),N=e.useRef(!1);e.useEffect(()=>{N.current||(N.current=!0,r===void 0&&t.bottomMode!==m&&t.setBottomMode(m))},[]),e.useEffect(()=>{r!==void 0&&t.bottomMode!==r&&t.setBottomMode(r)},[r,t]),e.useEffect(()=>{r===void 0&&x?.(t.bottomMode)},[t.bottomMode,r,x]),e.useEffect(()=>{t.bottomMode==="expanded"?T?.():L?.()},[t.bottomMode,T,L]);const D=t.bottomMode==="expanded",j=e.useMemo(()=>{if(!I||V)return V;const b=`kookie-ui:shell:bottom:${I}`;return{load:()=>{if(typeof window>"u")return;const k=window.localStorage.getItem(b);return k?Number(k):void 0},save:k=>{typeof window>"u"||window.localStorage.setItem(b,String(k))}}},[I,V]);e.useEffect(()=>{let b=!0;return(async()=>{if(!P||!j?.load||n)return;const o=await j.load();b&&typeof o=="number"&&R.current&&(R.current.style.setProperty("--bottom-size",`${o}px`),a?.(o))})(),()=>{b=!1}},[P,j,a,n]);const H=P&&!n&&D?e.createElement(ie.Provider,{value:{containerRef:R,cssVarName:"--bottom-size",minSize:E,maxSize:h,defaultSize:c,orientation:"horizontal",edge:"start",computeNext:(b,o,k)=>{const z=b-o;return k-z},onResize:a,onResizeStart:g,onResizeEnd:b=>{w?.(b),j?.save?.(b)},target:"bottom",collapsible:y,snapPoints:F,snapTolerance:q??8,collapseThreshold:K,requestCollapse:()=>t.setBottomMode("collapsed"),requestToggle:()=>t.togglePane("bottom")}},B.length>0?B.map((b,o)=>e.cloneElement(b,{key:b.key??o})):e.createElement(_,null)):null;if(n){const b=t.bottomMode==="expanded";return e.createElement(G.Root,{open:b,onOpenChange:o=>t.setBottomMode(o?"expanded":"collapsed")},e.createElement(G.Content,{side:"bottom",style:{padding:0},height:{initial:`${c}px`}},e.createElement(ce,null,e.createElement(G.Title,null,"Bottom panel")),U))}return e.createElement("div",{...p,ref:C,className:J("rt-ShellBottom",s),"data-mode":t.bottomMode,"data-peek":t.peekTarget==="bottom"||void 0,"data-presentation":f,"data-open":$&&D||void 0,style:{...S,"--bottom-size":`${c}px`,"--bottom-min-size":`${E}px`,"--bottom-max-size":`${h}px`}},e.createElement("div",{className:"rt-ShellBottomContent","data-visible":D||void 0},d),H)});be.displayName="Shell.Bottom",be.Handle=me;const ke=e.forwardRef(({target:s,action:v="toggle",peekOnHover:r,onClick:m,onMouseEnter:x,onMouseLeave:c,children:E,...h},P)=>{const y=Z(),T=e.useCallback(w=>{switch(m?.(w),v){case"toggle":y.togglePane(s);break;case"expand":y.expandPane(s);break;case"collapse":y.collapsePane(s);break}},[y,s,v,m]),L=(()=>{switch(s){case"left":case"rail":return y.leftMode==="collapsed";case"panel":return y.leftMode==="collapsed"||y.panelMode==="collapsed";case"sidebar":return y.sidebarMode==="collapsed";case"inspector":return y.inspectorMode==="collapsed";case"bottom":return y.bottomMode==="collapsed"}})(),a=e.useCallback(w=>{x?.(w),!(!r||!L)&&y.peekPane(s)},[x,r,L,y,s]),g=e.useCallback(w=>{c?.(w),r&&y.peekTarget===s&&y.clearPeek()},[c,r,y,s]);return e.createElement("button",{...h,ref:P,onClick:T,onMouseEnter:a,onMouseLeave:g,"data-shell-trigger":s,"data-shell-action":v},E)});ke.displayName="Shell.Trigger";export{be as Bottom,Pe as Content,Me as Header,ye as Inspector,he as Left,ne as Panel,oe as Rail,Se as Root,de as Sidebar,ke as Trigger,le as useResponsivePresentation,Z as useShell};
+"use client";import*as e from"react";import J from"classnames";import*as G from"./sheet.js";import"./inset.js";import{VisuallyHidden as ce}from"./visually-hidden.js";const se={xs:"(min-width: 520px)",sm:"(min-width: 768px)",md:"(min-width: 1024px)",lg:"(min-width: 1280px)",xl:"(min-width: 1640px)"},Re=e.createContext(null);function Z(){const s=e.useContext(Re);if(!s)throw new Error("Shell components must be used within <Shell.Root>");return s}const ie=e.createContext(null);function Ee(){const s=e.useContext(ie);if(!s)throw new Error("Shell.Handle must be used within a resizable pane");return s}const _=e.forwardRef(({className:s,children:v,...r},m)=>{const{containerRef:x,cssVarName:c,minSize:E,maxSize:h,defaultSize:P,orientation:y,edge:T,computeNext:L,onResize:a,onResizeStart:g,onResizeEnd:w,snapPoints:F,snapTolerance:q,collapseThreshold:K,collapsible:I,target:V,requestCollapse:U,requestToggle:S}=Ee(),p=e.useRef(null);e.useEffect(()=>()=>{try{p.current?.()}catch{}p.current=null},[]);const u=y;return e.createElement("div",{...r,ref:m,className:J("rt-ShellResizer",s),"data-orientation":y,"data-edge":T,role:"slider","aria-orientation":u,"aria-valuemin":E,"aria-valuemax":h,"aria-valuenow":P,tabIndex:0,onPointerDown:t=>{if(!x.current)return;t.preventDefault();const f=x.current,n=t.currentTarget,$=t.pointerId;try{p.current?.()}catch{}f.setAttribute("data-resizing","");try{n.setPointerCapture($)}catch{}const R=y==="vertical"?t.clientX:t.clientY,C=parseFloat(getComputedStyle(f).getPropertyValue(c)||`${P}`),M=o=>Math.min(Math.max(o,E),h),B=document.body,d=B.style.cursor,N=B.style.userSelect;B.style.cursor=y==="vertical"?"col-resize":"row-resize",B.style.userSelect="none",g?.(C);const z=o=>{const k=y==="vertical"?o.clientX:o.clientY,D=M(L(k,R,C));f.style.setProperty(c,`${D}px`),n.setAttribute("aria-valuenow",String(D)),a?.(D)},j=()=>{try{n.releasePointerCapture($)}catch{}window.removeEventListener("pointermove",z),window.removeEventListener("pointerup",H),window.removeEventListener("pointercancel",H),window.removeEventListener("keydown",b),n.removeEventListener("lostpointercapture",H),f.removeAttribute("data-resizing"),B.style.cursor=d,B.style.userSelect=N,p.current=null},H=()=>{const o=parseFloat(getComputedStyle(f).getPropertyValue(c)||`${P}`);let k=o;if(F&&F.length){const D=F.reduce((Q,X)=>Math.abs(X-o)<Math.abs(Q-o)?X:Q,F[0]);Math.abs(D-o)<=(q??8)&&(k=D,f.style.setProperty(c,`${k}px`),n.setAttribute("aria-valuenow",String(k)),a?.(k))}I&&typeof K=="number"&&o<=K&&U?.(),w?.(k),j()},b=o=>{o.key==="Escape"&&(f.style.setProperty(c,`${C}px`),n.setAttribute("aria-valuenow",String(C)),w?.(C),j())};window.addEventListener("pointermove",z),window.addEventListener("pointerup",H),window.addEventListener("pointercancel",H),window.addEventListener("keydown",b),n.addEventListener("lostpointercapture",H),p.current=j},onDoubleClick:()=>{I&&S?.()},onKeyDown:t=>{if(!x.current)return;const f=x.current,n=parseFloat(getComputedStyle(f).getPropertyValue(c)||`${P}`),$=M=>Math.min(Math.max(M,E),h),R=t.shiftKey?32:8;let C=0;if(y==="vertical"?t.key==="ArrowRight"?C=R:t.key==="ArrowLeft"&&(C=-R):t.key==="ArrowDown"?C=R:t.key==="ArrowUp"&&(C=-R),t.key==="Home"){t.preventDefault(),g?.(n);const M=$(E);f.style.setProperty(c,`${M}px`),t.currentTarget.setAttribute("aria-valuenow",String(M)),a?.(M),w?.(M);return}if(t.key==="End"){t.preventDefault(),g?.(n);const M=$(h);f.style.setProperty(c,`${M}px`),t.currentTarget.setAttribute("aria-valuenow",String(M)),a?.(M),w?.(M);return}if(C!==0){t.preventDefault(),g?.(n);const M=$(n+(T==="start"&&y==="vertical"?-C:C));f.style.setProperty(c,`${M}px`),t.currentTarget.setAttribute("aria-valuenow",String(M)),a?.(M),w?.(M)}}},v)});_.displayName="Shell.Handle";const pe=e.forwardRef((s,v)=>e.createElement(_,{...s,ref:v}));pe.displayName="Shell.Panel.Handle";const ue=e.forwardRef((s,v)=>e.createElement(_,{...s,ref:v}));ue.displayName="Shell.Sidebar.Handle";const fe=e.forwardRef((s,v)=>e.createElement(_,{...s,ref:v}));fe.displayName="Shell.Inspector.Handle";const me=e.forwardRef((s,v)=>e.createElement(_,{...s,ref:v}));me.displayName="Shell.Bottom.Handle";function le(s){const{currentBreakpoint:v}=Z();return e.useMemo(()=>{if(typeof s=="string")return s;if(s[v])return s[v];const m=[...Object.keys(se)].reverse().concat("initial"),x=m.indexOf(v);for(let c=x+1;c<m.length;c++){const E=m[c];if(s[E])return s[E]}return"fixed"},[s,v])}function ge(){const[s,v]=e.useState("initial"),[r,m]=e.useState(!1);return e.useEffect(()=>{if(typeof window>"u")return;const c=Object.entries(se).map(([h,P])=>[h,window.matchMedia(P)]),E=()=>{const h=c.filter(([,y])=>y.matches).map(([y])=>y),P=h[h.length-1]??"initial";v(P),m(!0)};return E(),c.forEach(([,h])=>h.addEventListener("change",E)),()=>{c.forEach(([,h])=>h.removeEventListener("change",E))}},[]),{bp:s,ready:r}}const Se=e.forwardRef(({className:s,children:v,height:r="full",...m},x)=>{const{bp:c,ready:E}=ge(),[h,P]=e.useState("collapsed"),[y,T]=e.useState("collapsed"),[L,a]=e.useState("expanded"),[g,w]=e.useState("collapsed"),[F,q]=e.useState("collapsed"),[K,I]=e.useState(!1),[V,U]=e.useState(!1),S=e.useRef(i=>i==="collapsed"?"thin":i==="thin"?"expanded":"collapsed"),p=e.useCallback(i=>{S.current=i},[]);e.useEffect(()=>{h==="collapsed"&&T("collapsed")},[h]),e.useEffect(()=>{V&&K&&console.warn("Shell: Sidebar cannot coexist with Rail or Panel. Use either Rail+Panel OR Sidebar.")},[V,K]);const[u,t]=e.useState(void 0),f=e.useCallback(i=>t(i),[]),n=e.useRef(64),$=e.useRef(288),R=e.useCallback(i=>{n.current=i},[]),C=e.useCallback(i=>{$.current=i},[]),M=e.useMemo(()=>{const i=e.Children.toArray(v),W=(Y,re)=>e.isValidElement(Y)&&(Y.type===re||Y.type?.displayName===re.displayName);return i.some(Y=>W(Y,oe)||W(Y,ne))},[v]),B=e.useMemo(()=>{const i=e.Children.toArray(v),W=(Y,re)=>e.isValidElement(Y)&&(Y.type===re||Y.type?.displayName===re.displayName);return i.some(Y=>W(Y,de))},[v]),d=e.useCallback(i=>{switch(i){case"left":case"rail":P(W=>W==="expanded"?"collapsed":"expanded");break;case"panel":h==="collapsed"?(P("expanded"),T("expanded")):T(W=>W==="expanded"?"collapsed":"expanded");break;case"sidebar":a(W=>S.current(W));break;case"inspector":w(W=>W==="expanded"?"collapsed":"expanded");break;case"bottom":q(W=>W==="expanded"?"collapsed":"expanded");break}},[h]),N=e.useCallback(i=>{switch(i){case"left":case"rail":P("expanded");break;case"panel":P("expanded"),T("expanded");break;case"sidebar":a("expanded");break;case"inspector":w("expanded");break;case"bottom":q("expanded");break}},[]),z=e.useCallback(i=>{switch(i){case"left":case"rail":P("collapsed");break;case"panel":T("collapsed");break;case"sidebar":a("collapsed");break;case"inspector":w("collapsed");break;case"bottom":q("collapsed");break}},[]),j=e.useMemo(()=>({leftMode:h,setLeftMode:P,panelMode:y,setPanelMode:T,sidebarMode:L,setSidebarMode:a,inspectorMode:g,setInspectorMode:w,bottomMode:F,setBottomMode:q,hasLeft:K,setHasLeft:I,hasSidebar:V,setHasSidebar:U,currentBreakpoint:c,currentBreakpointReady:E,leftResolvedPresentation:u,togglePane:d,expandPane:N,collapsePane:z,setSidebarToggleComputer:p,onLeftPres:f,onRailDefaults:R,onPanelDefaults:C}),[h,y,L,g,F,K,V,c,E,u,d,N,z,p,f,R,C]),H=e.Children.toArray(v),b=(i,W)=>e.isValidElement(i)&&(i.type===W||i.type?.displayName===W.displayName),o=H.filter(i=>b(i,Me)),k=H.filter(i=>b(i,oe)),D=H.filter(i=>b(i,ne)),Q=H.filter(i=>b(i,de)),X=H.filter(i=>b(i,Pe)),te=H.filter(i=>b(i,ye)),ve=H.filter(i=>b(i,be)),l=e.useMemo(()=>r==="full"?{height:"100vh"}:r==="auto"?{height:"auto"}:typeof r=="string"?{height:r}:typeof r=="number"?{height:`${r}px`}:{},[r]),[O,A]=e.useState(null),ae=e.useCallback(i=>A(i),[]),ee=e.useCallback(()=>A(null),[]);return e.createElement("div",{...m,ref:x,className:J("rt-ShellRoot",s),style:{...l,...m.style}},e.createElement(Re.Provider,{value:{...j,peekTarget:O,setPeekTarget:A,peekPane:ae,clearPeek:ee}},o,e.createElement("div",{className:"rt-ShellBody","data-peek-target":O??void 0,style:O==="rail"||O==="panel"?{"--peek-rail-width":`${n.current}px`}:void 0},M&&!B?(()=>{const i=k[0],W=i?{mode:i.props?.mode,defaultMode:i.props?.defaultMode,onModeChange:i.props?.onModeChange,presentation:i.props?.presentation,collapsible:i.props?.collapsible,onExpand:i.props?.onExpand,onCollapse:i.props?.onCollapse}:{};return e.createElement(he,{...W},k,D)})():Q,X,te),ve))});Se.displayName="Shell.Root";const Me=e.forwardRef(({className:s,height:v=64,style:r,...m},x)=>e.createElement("header",{...m,ref:x,className:J("rt-ShellHeader",s),style:{...r,"--shell-header-height":`${v}px`}}));Me.displayName="Shell.Header";const he=e.forwardRef(({className:s,presentation:v={initial:"overlay",sm:"fixed"},mode:r,defaultMode:m="collapsed",onModeChange:x,collapsible:c=!0,onExpand:E,onCollapse:h,children:P,style:y,...T},L)=>{const a=Z(),g=le(v),w=g==="overlay",F=g==="stacked",q=e.useRef(null);e.useEffect(()=>{a.onLeftPres?.(g)},[a,g]);const K=e.useCallback(S=>{q.current=S,typeof L=="function"?L(S):L&&(L.current=S)},[L]);e.useEffect(()=>(a.setHasLeft(!0),()=>a.setHasLeft(!1)),[a]);const I=e.useCallback(()=>{if(typeof m=="string")return m;const S=m;if(S&&S[a.currentBreakpoint])return S[a.currentBreakpoint];const u=[...Object.keys(se)].reverse().concat("initial"),t=u.indexOf(a.currentBreakpoint);for(let f=t+1;f<u.length;f++){const n=u[f];if(S&&S[n])return S[n]}return"collapsed"},[m,a.currentBreakpoint]),V=e.useRef(null);e.useEffect(()=>{if(r!==void 0||!a.currentBreakpointReady||V.current===a.currentBreakpoint)return;V.current=a.currentBreakpoint;const S=I();S!==a.leftMode&&a.setLeftMode(S)},[r,a.currentBreakpoint,a.currentBreakpointReady,I,a.leftMode,a.setLeftMode]),e.useEffect(()=>{r!==void 0&&a.leftMode!==r&&a.setLeftMode(r)},[r,a]),e.useEffect(()=>{r===void 0&&x?.(a.leftMode)},[a.leftMode,r,x]),e.useEffect(()=>{a.leftMode==="expanded"?E?.():h?.()},[a.leftMode,E,h]);const U=a.leftMode==="expanded";if(w){const S=a.leftMode==="expanded",p=e.Children.toArray(P),u=(B,d)=>e.isValidElement(B)&&B.type===d,t=p.find(B=>u(B,oe)),f=p.find(B=>u(B,ne)),n=typeof t?.props?.expandedSize=="number"?t.props.expandedSize:64,$=typeof f?.props?.expandedSize=="number"?f.props.expandedSize:288,R=!!t,C=!!f,M=(R?n:0)+(a.panelMode==="expanded"&&C?$:0);return e.createElement(G.Root,{open:S,onOpenChange:B=>a.setLeftMode(B?"expanded":"collapsed")},e.createElement(G.Content,{side:"start",style:{padding:0},width:{initial:`${M}px`}},e.createElement(ce,null,e.createElement(G.Title,null,"Navigation")),e.createElement("div",{className:"rt-ShellLeft"},P)))}if(F){const S=a.leftMode==="expanded",p=e.Children.toArray(P),u=(d,N)=>e.isValidElement(d)&&d.type===N,t=p.find(d=>u(d,oe)),f=p.find(d=>u(d,ne)),n=typeof t?.props?.expandedSize=="number"?t.props.expandedSize:64,$=typeof f?.props?.expandedSize=="number"?f.props.expandedSize:288,R=!!t,M=!!f&&(a.panelMode==="expanded"||a.peekTarget==="panel"),B=(R?n:0)+(M?$:0);return e.createElement("div",{...T,ref:K,className:J("rt-ShellLeft",s),"data-mode":a.leftMode,"data-peek":a.peekTarget==="left"||a.peekTarget==="rail"||a.peekTarget==="panel"||void 0,"data-presentation":g,style:{...y},"data-open":S||void 0},P)}return e.createElement("div",{...T,ref:K,className:J("rt-ShellLeft",s),"data-mode":a.leftMode,"data-peek":a.peekTarget==="left"||a.peekTarget==="rail"||a.peekTarget==="panel"||void 0,"data-presentation":g,style:{...y}},P)});he.displayName="Shell.Left";const oe=e.forwardRef(({className:s,presentation:v,mode:r,defaultMode:m,onModeChange:x,expandedSize:c=64,collapsible:E,onExpand:h,onCollapse:P,children:y,style:T,...L},a)=>{const g=Z();e.useEffect(()=>{g.onRailDefaults?.(c)},[g,c]);const w=g.leftMode==="expanded";return e.createElement("div",{...L,ref:a,className:J("rt-ShellRail",s),"data-mode":g.leftMode,"data-peek":g.leftResolvedPresentation!=="overlay"&&g.peekTarget==="rail"||void 0,style:{...T,"--rail-size":`${c}px`}},e.createElement("div",{className:"rt-ShellRailContent","data-visible":w||g.leftResolvedPresentation!=="overlay"&&g.peekTarget==="rail"||void 0},y))});oe.displayName="Shell.Rail";const ne=e.forwardRef(({className:s,mode:v,onModeChange:r,expandedSize:m=288,minSize:x,maxSize:c,resizable:E,collapsible:h=!0,onExpand:P,onCollapse:y,onResize:T,onResizeStart:L,onResizeEnd:a,snapPoints:g,snapTolerance:w,collapseThreshold:F,paneId:q,persistence:K,children:I,style:V,...U},S)=>{const p=Z();e.useEffect(()=>{p.onPanelDefaults?.(m)},[p,m]);const u=e.useRef(null),t=e.useCallback(d=>{u.current=d,typeof S=="function"?S(d):S&&(S.current=d)},[S]),f=e.Children.toArray(I),n=f.filter(d=>e.isValidElement(d)&&d.type===pe),$=f.filter(d=>!(e.isValidElement(d)&&d.type===pe)),R=p.leftResolvedPresentation==="overlay",C=e.useMemo(()=>{if(!q||K)return K;const d=`kookie-ui:shell:panel:${q}`;return{load:()=>{if(typeof window>"u")return;const z=window.localStorage.getItem(d);return z?Number(z):void 0},save:z=>{typeof window>"u"||window.localStorage.setItem(d,String(z))}}},[q,K]);e.useEffect(()=>{let d=!0;return(async()=>{if(!E||!C?.load||R)return;const N=await C.load();d&&typeof N=="number"&&u.current&&(u.current.style.setProperty("--panel-size",`${N}px`),T?.(N))})(),()=>{d=!1}},[E,C,T,R]),e.useEffect(()=>{u.current&&R&&u.current.style.setProperty("--panel-size",`${m}px`)},[R,m]),e.useEffect(()=>{if(u.current&&p.leftResolvedPresentation!=="overlay"&&p.leftMode==="expanded"&&p.panelMode==="expanded"){const d=u.current.parentElement||null;try{d?.style.removeProperty("width")}catch{}}},[p.leftResolvedPresentation,p.leftMode,p.panelMode]);const M=p.leftMode==="expanded"&&p.panelMode==="expanded",B=E&&p.leftResolvedPresentation!=="overlay"&&M?e.createElement(ie.Provider,{value:{containerRef:u,cssVarName:"--panel-size",minSize:typeof x=="number"?x:100,maxSize:typeof c=="number"?c:800,defaultSize:m,orientation:"vertical",edge:"end",computeNext:(d,N,z)=>{const j=getComputedStyle(u.current).direction==="rtl",H=d-N;return z+(j?-H:H)},onResize:T,onResizeStart:d=>{const z=u.current?.parentElement;try{z?.style.removeProperty("width")}catch{}L?.(d)},onResizeEnd:d=>{a?.(d),C?.save?.(d)},target:"panel",collapsible:!!h,snapPoints:g,snapTolerance:w??8,collapseThreshold:F,requestCollapse:()=>p.setPanelMode("collapsed"),requestToggle:()=>p.togglePane("panel")}},n.length>0?n.map((d,N)=>e.cloneElement(d,{key:d.key??N})):e.createElement(_,null)):null;return e.createElement("div",{...U,ref:t,className:J("rt-ShellPanel",s),"data-mode":p.panelMode,"data-visible":M||p.leftResolvedPresentation!=="overlay"&&p.peekTarget==="panel"||void 0,"data-peek":p.leftResolvedPresentation!=="overlay"&&p.peekTarget==="panel"||void 0,style:{...V,"--panel-size":`${m}px`}},e.createElement("div",{className:"rt-ShellPanelContent","data-visible":M||void 0},$),B)});ne.displayName="Shell.Panel",ne.Handle=pe;const de=e.forwardRef(({className:s,presentation:v={initial:"overlay",md:"fixed"},mode:r,defaultMode:m="expanded",onModeChange:x,expandedSize:c=288,minSize:E=200,maxSize:h=400,resizable:P=!1,collapsible:y=!0,onExpand:T,onCollapse:L,onResize:a,onResizeStart:g,onResizeEnd:w,snapPoints:F,snapTolerance:q,collapseThreshold:K,paneId:I,persistence:V,children:U,style:S,thinSize:p=64,toggleModes:u,...t},f)=>{const n=Z(),$=le(v),R=$==="overlay",C=$==="stacked",M=e.useRef(null),B=e.useCallback(l=>{M.current=l,typeof f=="function"?f(l):f&&(f.current=l)},[f]),d=e.Children.toArray(U),N=d.filter(l=>e.isValidElement(l)&&l.type===ue),z=d.filter(l=>!(e.isValidElement(l)&&l.type===ue)),j=e.useId();e.useEffect(()=>(n.setHasSidebar(!0),()=>{n.setHasSidebar(!1)}),[n,j]);const H=e.useRef(!1);e.useEffect(()=>{H.current||(H.current=!0,r===void 0&&n.sidebarMode!==m&&n.setSidebarMode(m))},[]),e.useEffect(()=>{r!==void 0&&n.sidebarMode!==r&&n.setSidebarMode(r)},[r,n]),e.useEffect(()=>{r===void 0&&x?.(n.sidebarMode)},[n.sidebarMode,r,x]),e.useEffect(()=>{n.sidebarMode==="expanded"?T?.():L?.()},[n.sidebarMode,T,L]);const b=n.sidebarMode!=="collapsed",o=e.useMemo(()=>{if(!I||V)return V;const l=`kookie-ui:shell:sidebar:${I}`;return{load:()=>{if(typeof window>"u")return;const A=window.localStorage.getItem(l);return A?Number(A):void 0},save:A=>{typeof window>"u"||window.localStorage.setItem(l,String(A))}}},[I,V]);e.useEffect(()=>{let l=!0;return(async()=>{if(!P||!o?.load||R)return;const O=await o.load();l&&typeof O=="number"&&M.current&&(M.current.style.setProperty("--sidebar-size",`${O}px`),a?.(O))})(),()=>{l=!1}},[P,o,a,R]);const k=Z();e.useEffect(()=>{if(!k.setSidebarToggleComputer)return;const l=u&&u.length>0?u:["thin","expanded"],O=A=>A==="collapsed"?l[0]??"expanded":A==="thin"?l.includes("thin")&&l.includes("expanded")?"expanded":"collapsed":l.length===2&&l.includes("thin")&&l.includes("expanded")?"collapsed":l.includes("thin")&&!l.includes("expanded")?"thin":"collapsed";return k.setSidebarToggleComputer(O),()=>{k.setSidebarToggleComputer?.(A=>A==="collapsed"?"thin":A==="thin"?"expanded":"collapsed")}},[k,u]);const D=e.useRef(c),Q=e.useRef("expanded");e.useEffect(()=>{n.sidebarMode!=="collapsed"&&(Q.current=n.sidebarMode,D.current=n.sidebarMode==="thin"?p:c)},[n.sidebarMode,p,c]);const X=e.useCallback(()=>{if(typeof m=="string")return m;const l=m;if(l&&l[n.currentBreakpoint])return l[n.currentBreakpoint];const A=[...Object.keys(se)].reverse().concat("initial"),ae=A.indexOf(n.currentBreakpoint);for(let ee=ae+1;ee<A.length;ee++){const i=A[ee];if(l&&l[i])return l[i]}return"collapsed"},[m,n.currentBreakpoint]),te=e.useRef(null);e.useEffect(()=>{if(r!==void 0||!n.currentBreakpointReady||te.current===n.currentBreakpoint)return;te.current=n.currentBreakpoint;const l=X();l!==n.sidebarMode&&n.setSidebarMode(l)},[r,n.currentBreakpoint,n.currentBreakpointReady,X,n.sidebarMode,n.setSidebarMode]);const ve=P&&!R&&n.sidebarMode==="expanded"?e.createElement(ie.Provider,{value:{containerRef:M,cssVarName:"--sidebar-size",minSize:E,maxSize:h,defaultSize:c,orientation:"vertical",edge:"end",computeNext:(l,O,A)=>{const ae=getComputedStyle(M.current).direction==="rtl",ee=l-O;return A+(ae?-ee:ee)},onResize:a,onResizeStart:g,onResizeEnd:l=>{w?.(l),o?.save?.(l)},target:"sidebar",collapsible:y,snapPoints:F,snapTolerance:q??8,collapseThreshold:K,requestCollapse:()=>n.setSidebarMode("collapsed"),requestToggle:()=>n.togglePane("sidebar")}},N.length>0?N.map((l,O)=>e.cloneElement(l,{key:l.key??O})):e.createElement(_,null)):null;if(R){const l=n.sidebarMode!=="collapsed";return e.createElement(G.Root,{open:l,onOpenChange:O=>n.setSidebarMode(O?"expanded":"collapsed")},e.createElement(G.Content,{side:"start",style:{padding:0},width:{initial:`${l?n.sidebarMode==="thin"?p:c:D.current}px`}},e.createElement(ce,null,e.createElement(G.Title,null,"Sidebar")),z))}return e.createElement("div",{...t,ref:B,className:J("rt-ShellSidebar",s),"data-mode":n.sidebarMode,"data-peek":n.peekTarget==="sidebar"||void 0,"data-presentation":$,"data-open":C&&b||void 0,style:{...S,"--sidebar-size":`${c}px`,"--sidebar-thin-size":`${p}px`,"--sidebar-min-size":`${E}px`,"--sidebar-max-size":`${h}px`,...n.peekTarget==="sidebar"&&!R?(()=>{const l=u&&u.length>0?u:["thin","expanded"],O=n.sidebarMode;let A="collapsed";return O==="collapsed"?A=l[0]??"expanded":O==="thin"?A=l.includes("expanded")?"expanded":"collapsed":A=l.includes("thin")?"thin":"collapsed",{"--peek-sidebar-width":`${A==="thin"?p:c}px`}})():{}}},e.createElement("div",{className:"rt-ShellSidebarContent","data-visible":b||void 0},z),ve)});de.displayName="Shell.Sidebar",de.Handle=ue;const Pe=e.forwardRef(({className:s,...v},r)=>e.createElement("main",{...v,ref:r,className:J("rt-ShellContent",s)}));Pe.displayName="Shell.Content";const ye=e.forwardRef(({className:s,presentation:v={initial:"overlay",lg:"fixed"},mode:r,defaultMode:m="collapsed",onModeChange:x,expandedSize:c=320,minSize:E=200,maxSize:h=500,resizable:P=!1,collapsible:y=!0,onExpand:T,onCollapse:L,onResize:a,onResizeStart:g,onResizeEnd:w,snapPoints:F,snapTolerance:q,collapseThreshold:K,paneId:I,persistence:V,children:U,style:S,...p},u)=>{const t=Z(),f=le(v),n=f==="overlay",$=f==="stacked",R=e.useRef(null),C=e.useCallback(o=>{R.current=o,typeof u=="function"?u(o):u&&(u.current=o)},[u]),M=e.Children.toArray(U),B=M.filter(o=>e.isValidElement(o)&&o.type===fe),d=M.filter(o=>!(e.isValidElement(o)&&o.type===fe)),N=e.useCallback(()=>{if(typeof m=="string")return m;const o=m;if(o&&o[t.currentBreakpoint])return o[t.currentBreakpoint];const D=[...Object.keys(se)].reverse().concat("initial"),Q=D.indexOf(t.currentBreakpoint);for(let X=Q+1;X<D.length;X++){const te=D[X];if(o&&o[te])return o[te]}return"collapsed"},[m,t.currentBreakpoint]),z=e.useRef(null);e.useEffect(()=>{if(r!==void 0||!t.currentBreakpointReady||z.current===t.currentBreakpoint)return;z.current=t.currentBreakpoint;const o=N();o!==t.inspectorMode&&t.setInspectorMode(o)},[r,t.currentBreakpoint,t.currentBreakpointReady,N,t.inspectorMode,t.setInspectorMode]),e.useEffect(()=>{r!==void 0&&t.inspectorMode!==r&&t.setInspectorMode(r)},[r,t]),e.useEffect(()=>{r===void 0&&x?.(t.inspectorMode)},[t.inspectorMode,r,x]),e.useEffect(()=>{t.inspectorMode==="expanded"?T?.():L?.()},[t.inspectorMode,T,L]);const j=t.inspectorMode==="expanded",H=e.useMemo(()=>{if(!I||V)return V;const o=`kookie-ui:shell:inspector:${I}`;return{load:()=>{if(typeof window>"u")return;const D=window.localStorage.getItem(o);return D?Number(D):void 0},save:D=>{typeof window>"u"||window.localStorage.setItem(o,String(D))}}},[I,V]);e.useEffect(()=>{let o=!0;return(async()=>{if(!P||!H?.load||n)return;const k=await H.load();o&&typeof k=="number"&&R.current&&(R.current.style.setProperty("--inspector-size",`${k}px`),a?.(k))})(),()=>{o=!1}},[P,H,a,n]);const b=P&&!n&&j?e.createElement(ie.Provider,{value:{containerRef:R,cssVarName:"--inspector-size",minSize:E,maxSize:h,defaultSize:c,orientation:"vertical",edge:"start",computeNext:(o,k,D)=>{const Q=getComputedStyle(R.current).direction==="rtl",X=o-k;return D+(Q?X:-X)},onResize:a,onResizeStart:g,onResizeEnd:o=>{w?.(o),H?.save?.(o)},target:"inspector",collapsible:y,snapPoints:F,snapTolerance:q??8,collapseThreshold:K,requestCollapse:()=>t.setInspectorMode("collapsed"),requestToggle:()=>t.togglePane("inspector")}},B.length>0?B.map((o,k)=>e.cloneElement(o,{key:o.key??k})):e.createElement(_,null)):null;if(n){const o=t.inspectorMode==="expanded";return e.createElement(G.Root,{open:o,onOpenChange:k=>t.setInspectorMode(k?"expanded":"collapsed")},e.createElement(G.Content,{side:"end",style:{padding:0},width:{initial:`${c}px`}},e.createElement(ce,null,e.createElement(G.Title,null,"Inspector")),U))}return e.createElement("div",{...p,ref:C,className:J("rt-ShellInspector",s),"data-mode":t.inspectorMode,"data-peek":t.peekTarget==="inspector"||void 0,"data-presentation":f,"data-open":$&&j||void 0,style:{...S,"--inspector-size":`${c}px`,"--inspector-min-size":`${E}px`,"--inspector-max-size":`${h}px`}},e.createElement("div",{className:"rt-ShellInspectorContent","data-visible":j||void 0},d),b)});ye.displayName="Shell.Inspector",ye.Handle=fe;const be=e.forwardRef(({className:s,presentation:v="fixed",mode:r,defaultMode:m="collapsed",onModeChange:x,expandedSize:c=200,minSize:E=100,maxSize:h=400,resizable:P=!1,collapsible:y=!0,onExpand:T,onCollapse:L,onResize:a,onResizeStart:g,onResizeEnd:w,snapPoints:F,snapTolerance:q,collapseThreshold:K,paneId:I,persistence:V,children:U,style:S,...p},u)=>{const t=Z(),f=le(v),n=f==="overlay",$=f==="stacked",R=e.useRef(null),C=e.useCallback(b=>{R.current=b,typeof u=="function"?u(b):u&&(u.current=b)},[u]),M=e.Children.toArray(U),B=M.filter(b=>e.isValidElement(b)&&b.type===me),d=M.filter(b=>!(e.isValidElement(b)&&b.type===me)),N=e.useRef(!1);e.useEffect(()=>{N.current||(N.current=!0,r===void 0&&t.bottomMode!==m&&t.setBottomMode(m))},[]),e.useEffect(()=>{r!==void 0&&t.bottomMode!==r&&t.setBottomMode(r)},[r,t]),e.useEffect(()=>{r===void 0&&x?.(t.bottomMode)},[t.bottomMode,r,x]),e.useEffect(()=>{t.bottomMode==="expanded"?T?.():L?.()},[t.bottomMode,T,L]);const z=t.bottomMode==="expanded",j=e.useMemo(()=>{if(!I||V)return V;const b=`kookie-ui:shell:bottom:${I}`;return{load:()=>{if(typeof window>"u")return;const k=window.localStorage.getItem(b);return k?Number(k):void 0},save:k=>{typeof window>"u"||window.localStorage.setItem(b,String(k))}}},[I,V]);e.useEffect(()=>{let b=!0;return(async()=>{if(!P||!j?.load||n)return;const o=await j.load();b&&typeof o=="number"&&R.current&&(R.current.style.setProperty("--bottom-size",`${o}px`),a?.(o))})(),()=>{b=!1}},[P,j,a,n]);const H=P&&!n&&z?e.createElement(ie.Provider,{value:{containerRef:R,cssVarName:"--bottom-size",minSize:E,maxSize:h,defaultSize:c,orientation:"horizontal",edge:"start",computeNext:(b,o,k)=>{const D=b-o;return k-D},onResize:a,onResizeStart:g,onResizeEnd:b=>{w?.(b),j?.save?.(b)},target:"bottom",collapsible:y,snapPoints:F,snapTolerance:q??8,collapseThreshold:K,requestCollapse:()=>t.setBottomMode("collapsed"),requestToggle:()=>t.togglePane("bottom")}},B.length>0?B.map((b,o)=>e.cloneElement(b,{key:b.key??o})):e.createElement(_,null)):null;if(n){const b=t.bottomMode==="expanded";return e.createElement(G.Root,{open:b,onOpenChange:o=>t.setBottomMode(o?"expanded":"collapsed")},e.createElement(G.Content,{side:"bottom",style:{padding:0},height:{initial:`${c}px`}},e.createElement(ce,null,e.createElement(G.Title,null,"Bottom panel")),U))}return e.createElement("div",{...p,ref:C,className:J("rt-ShellBottom",s),"data-mode":t.bottomMode,"data-peek":t.peekTarget==="bottom"||void 0,"data-presentation":f,"data-open":$&&z||void 0,style:{...S,"--bottom-size":`${c}px`,"--bottom-min-size":`${E}px`,"--bottom-max-size":`${h}px`}},e.createElement("div",{className:"rt-ShellBottomContent","data-visible":z||void 0},d),H)});be.displayName="Shell.Bottom",be.Handle=me;const ke=e.forwardRef(({target:s,action:v="toggle",peekOnHover:r,onClick:m,onMouseEnter:x,onMouseLeave:c,children:E,...h},P)=>{const y=Z(),T=e.useCallback(w=>{switch(m?.(w),v){case"toggle":y.togglePane(s);break;case"expand":y.expandPane(s);break;case"collapse":y.collapsePane(s);break}},[y,s,v,m]),L=(()=>{switch(s){case"left":case"rail":return y.leftMode==="collapsed";case"panel":return y.leftMode==="collapsed"||y.panelMode==="collapsed";case"sidebar":return y.sidebarMode==="collapsed";case"inspector":return y.inspectorMode==="collapsed";case"bottom":return y.bottomMode==="collapsed"}})(),a=e.useCallback(w=>{x?.(w),!(!r||!L)&&y.peekPane(s)},[x,r,L,y,s]),g=e.useCallback(w=>{c?.(w),r&&y.peekTarget===s&&y.clearPeek()},[c,r,y,s]);return e.createElement("button",{...h,ref:P,onClick:T,onMouseEnter:a,onMouseLeave:g,"data-shell-trigger":s,"data-shell-action":v},E)});ke.displayName="Shell.Trigger";export{be as Bottom,Pe as Content,Me as Header,ye as Inspector,he as Left,ne as Panel,oe as Rail,Se as Root,de as Sidebar,ke as Trigger,le as useResponsivePresentation,Z as useShell};
 //# sourceMappingURL=shell.js.map