@liberfi.io/ui-scaffold 0.1.7 → 0.1.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.mjs CHANGED
@@ -1,2 +1,2 @@
1
- import {memo,useState,useRef,useMemo,useEffect,useCallback}from'react';import {createPortal}from'react-dom';import {useValueRef,useCallbackRef}from'@liberfi.io/hooks';import {useTranslation}from'@liberfi.io/i18n';import {atomFamily,atomWithStorage,useAtom,useAtomValue,clsx,StyledTooltip,DraggableIcon,Button,RestoreWindowIcon,MinimizeIcon,UnMaximizeIcon,MaximizeIcon,XCloseIcon,useSetAtom,getDefaultStore}from'@liberfi.io/ui';import {throttle}from'@liberfi.io/utils';import {jsxs,Fragment,jsx}from'react/jsx-runtime';var se=atomFamily(e=>atomWithStorage(`panelState.${e??"default"}`,"none",void 0,{getOnInit:true})),Le=atomFamily(e=>atomWithStorage(`panelWidth.${e??"default"}`,350,void 0,{getOnInit:true})),Ce=atomFamily(e=>atomWithStorage(`panelMinWidth.${e??"default"}`,320,void 0,{getOnInit:true})),Te=atomFamily(e=>atomWithStorage(`panelMaxWidth.${e??"default"}`,440,void 0,{getOnInit:true})),pt=atomFamily(e=>atomWithStorage(`modalOpen.${e??"default"}`,false,void 0,{getOnInit:true})),He=atomFamily(e=>atomWithStorage(`modalShouldStartDragging.${e??"default"}`,false,void 0,{getOnInit:true})),ke=atomFamily(e=>atomWithStorage(`modalSize.${e??"default"}`,{width:350,height:580},void 0,{getOnInit:true})),Xe=atomFamily(e=>atomWithStorage(`modalRestoreSize.${e??"default"}`,{width:350,height:580},void 0,{getOnInit:true})),_e=atomFamily(e=>atomWithStorage(`modalPosition.${e??"default"}`,{x:typeof window<"u"?Math.max(0,(window.innerWidth-350)/2):0,y:typeof window<"u"?Math.max(0,(window.innerHeight-580)/2):0},void 0,{getOnInit:true})),$e=atomFamily(e=>atomWithStorage(`modalRestorePosition.${e??"default"}`,{x:typeof window<"u"?Math.max(0,(window.innerWidth-350)/2):0,y:typeof window<"u"?Math.max(0,(window.innerHeight-580)/2):0},void 0,{getOnInit:true})),Ae=atomFamily(e=>atomWithStorage(`modalMinimized.${e??"default"}`,false,void 0,{getOnInit:true})),Ye=atomFamily(e=>atomWithStorage(`modalMinWidth.${e??"default"}`,200,void 0,{getOnInit:true})),Be=atomFamily(e=>atomWithStorage(`modalMaxWidth.${e??"default"}`,typeof window<"u"?window.innerWidth-40:0,void 0,{getOnInit:true})),he=atomFamily(e=>atomWithStorage(`lastPanelType.${e??"default"}`,"modal",void 0,{getOnInit:true})),Ve=atomWithStorage("panelOrders",{left:{},right:{}},void 0,{getOnInit:true});function ge(e){let[o,l]=useAtom(pt(e)),[x,r]=useAtom(Ae(e)),z=useAtomValue(Xe(e)),w=useAtomValue($e(e)),t=useSetAtom(ke(e)),i=useSetAtom(_e(e)),R=useSetAtom(He(e)),O=useSetAtom(he(e)),D=useCallback((H={})=>{let{shouldStartDragging:K,position:Q,size:le}=H;Q&&i(_=>({..._,...Q})),le&&t(_=>({..._,...le})),R(K??false),l(true),O("modal");},[l,i,t,R]),S=useCallback(()=>{l(false),x&&(t({...z}),i({...w}),r(false));},[x,z,w,r,l,t,i]);return useMemo(()=>({isOpen:o,onOpen:D,onClose:S}),[o,D,S])}function fe(e){let[o,l]=useAtom(se(e)),x=useSetAtom(Le(e)),r=useSetAtom(he(e)),z=useSetAtom(Ve),w=useCallback((O={})=>{let D=O.position??"left";x(O.width??320),l(D),r(D),z(({left:S,right:H})=>D==="left"?{left:{...S,[e]:Date.now()},right:H}:{left:S,right:{...H,[e]:Date.now()}});},[e,l,x]),t=useCallback(()=>{l("none");},[l]),i=useMemo(()=>o!=="none",[o]),R=useMemo(()=>o!=="none"?o:void 0,[o]);return useMemo(()=>({isOpen:i,position:R,onOpen:w,onClose:t}),[i,w,t])}var sn={width:200,height:48},Ne={width:typeof window<"u"?window.innerWidth-40:0,height:typeof window<"u"?window.innerHeight-40:0},an={x:20,y:20},zt=memo(function({id:o,title:l,minWidth:x=504,maxWidth:r=Ne.width,minHeight:z=200,maxHeight:w=Ne.height,leftSidebar:t,leftSidebarWidth:i=200,rightSidebar:R,rightSidebarWidth:O=200,aspectRatio:D,showHeader:S=true,header:H,headerHeight:K=44,children:Q}){let{t:le}=useTranslation(),{isOpen:_,onClose:Ie}=ge(o),{onOpen:Je}=fe(o),[C,$]=useAtom(Ae(o)),[d,qe]=useAtom(_e(o)),[u,Ge]=useAtom(ke(o)),[de,ue]=useAtom(Xe(o)),[ee,te]=useAtom($e(o)),[Me,ve]=useAtom(He(o)),[W,ne]=useState(Me),[ze,c]=useState(false),[P,Z]=useState(null),[oe,j]=useState(null),[ie,N]=useState(null),[ce,J]=useState(null),A=useRef(null),Nt=useAtomValue(Ce(o)),It=useAtomValue(Te(o)),Y=useValueRef(d),h=useCallbackRef(qe),re=useValueRef(u),I=useCallbackRef(Ge),Et=useValueRef(i),Ft=useValueRef(!!t),Lt=useValueRef(O),Ct=useValueRef(!!R),k=useValueRef(D),B=useValueRef(K),Re=useValueRef(x),De=useValueRef(r),We=useValueRef(z),Pe=useValueRef(w),Tt=useValueRef(W),lt=useValueRef(oe),Ke=useValueRef(ce),Ht=useCallbackRef(Ie),kt=useCallbackRef(Je),Xt=useValueRef(Nt),_t=useValueRef(It),Oe=useMemo(()=>u.width===Ne.width&&u.height===Ne.height,[u.width,u.height]);useEffect(()=>{(d.x<0||d.y<0)&&h({x:Math.max(0,d.x),y:Math.max(0,d.y)});let n=d.x+u.width,E=d.y+u.height;(n>window.innerWidth||E>window.innerHeight)&&h({x:Math.min(d.x,Math.max(0,window.innerWidth-u.width)),y:Math.min(d.y,Math.max(0,window.innerHeight-u.height))});},[o]),useEffect(()=>{if(_&&Me){ne(true);let n=q=>{h({x:q.clientX-u.width/2,y:q.clientY-20});},E=()=>{ne(false),ve(false),document.removeEventListener("mousemove",n),document.removeEventListener("mouseup",E);};return document.addEventListener("mousemove",n),document.addEventListener("mouseup",E),document.body.style.cursor="grabbing",()=>{document.removeEventListener("mousemove",n),document.removeEventListener("mouseup",E),document.body.style.cursor="";}}},[_,Me,ve,u.width]);let X=(n,E,q)=>{ve(false),ne(false),c(false),Z(null),E==="drag"?ne(true):E==="resize"&&(Z(q||null),c(true));let dt=n.clientX,ut=n.clientY,F=re.current.width,T=re.current.height,L={...Y.current},ct=()=>{document.removeEventListener("mousemove",mt),document.removeEventListener("mouseup",ht),document.body.style.cursor="",ne(false),c(false),Z(null),j(null),A.current&&(clearTimeout(A.current),A.current=null),J(null),N(null);},mt=Ee=>{if(E==="drag"){let V=Ee.clientX-dt,U=Ee.clientY-ut,g=L.x+V,a=L.y+U,me=Ft.current?Et.current:0,Se=12+me,y=Ct.current?Lt.current:0,f=window.innerWidth-12-F-y,Fe=window.innerHeight-12-44,p=g<=Se?"left":g>=f?"right":null;p!==lt.current&&j(p),A.current&&p&&N(p),A.current&&(Ke.current==="left"&&(g>Se||p!=="left")||Ke.current==="right"&&(g<f||p!=="right"))&&(clearTimeout(A.current),A.current=null,J(null),N(null)),!A.current&&p&&Ke.current!==p&&(J(p),N(p),A.current=setTimeout(()=>{Tt.current&&lt.current===p?(ct(),Ht(),kt({position:p,width:Math.min(Math.max(re.current.width,Xt.current),_t.current)})):J(null);},350)),g=Math.min(Math.max(g,12+me),f),a=Math.min(Math.max(a,12),Fe),h({x:g,y:a});}else if(E==="resize"&&q){let V=Ee.clientX-dt,U=Ee.clientY-ut,g=(a,me,Se)=>{let y=Math.min(Math.max(a,Re.current),De.current),f=Math.min(Math.max(me,We.current),Pe.current);if(k.current){if(Se==="width")f=Math.min(Math.max(a/k.current+B.current,We.current),Pe.current),y=(f-B.current)*k.current;else if(Se==="height")y=Math.min(Math.max((me-B.current)*k.current,Re.current),De.current),f=y/k.current+B.current;else {let Fe=a/k.current+B.current,p=(me-B.current)*k.current,gt=Math.abs(V),ft=Math.abs(U);if(gt>1.1*ft)f=Math.min(Math.max(Fe,We.current),Pe.current),y=(f-B.current)*k.current;else if(ft>1.1*gt)y=Math.min(Math.max(p,Re.current),De.current),f=y/k.current+B.current;else {let Yt=(f+Fe)/2;y=Math.min(Math.max((y+p)/2,Re.current),De.current),f=Math.min(Math.max(Yt,We.current),Pe.current),y=(f-B.current)*k.current;}}y=Math.min(Math.max(y,Re.current),De.current),f=Math.min(Math.max(f,We.current),Pe.current);}return {width:y,height:f}};switch(q){case "topLeft":{let a=g(F-V,T-U,"both");I(a),h({x:L.x+(F-a.width),y:L.y+(T-a.height)});break}case "topRight":{let a=g(F+V,T-U,"both");I(a),h({x:L.x,y:L.y+(T-a.height)});break}case "bottomLeft":{let a=g(F-V,T+U,"both");I(a),h({x:L.x+(F-a.width),y:L.y});break}case "bottomRight":{I(g(F+V,T+U,"both"));break}case "top":{let a=g(F,T-U,"height");I(a),h({x:L.x,y:L.y+(T-a.height)});break}case "bottom":{I(g(F,T+U,"height"));break}case "left":{let a=g(F-V,T,"width");I(a),h({x:L.x+(F-a.width),y:L.y});break}case "right":{I(g(F+V,T,"width"));break}}}},ht=()=>{(d.x<0||d.y<0)&&h({x:Math.max(0,d.x),y:Math.max(0,d.y)}),ct();};document.addEventListener("mousemove",mt),document.addEventListener("mouseup",ht);},$t=useCallback(()=>{C?(I({...de}),h({...ee}),$(false)):(Oe?h({...ee}):(ue({...u}),te({...d})),I({...sn}),$(true));},[C,Oe,u,d,de,ee,$,ue,te]),At=useCallback(()=>{Oe?(I({...de}),h({...ee})):(C?$(false):(ue({...u}),te({...d})),I({...Ne}),h({...an}));},[Oe,C,u,d,de,ee,$,ue,te]);return useEffect(()=>{let n=throttle(()=>{(Y.current.x<0||Y.current.y<0)&&h({x:Math.max(0,Y.current.x),y:Math.max(0,Y.current.y)});let E=Y.current.x+re.current.width,q=Y.current.y+re.current.height;(E>window.innerWidth||q>window.innerHeight)&&h({x:Math.min(Y.current.x,Math.max(0,window.innerWidth-re.current.width)),y:Math.min(Y.current.y,Math.max(0,window.innerHeight-re.current.height))});},100);return window.addEventListener("resize",n),()=>{window.removeEventListener("resize",n);}},[]),_?jsxs(Fragment,{children:[(W||ze)&&createPortal(jsx("div",{className:clsx("max-lg:hidden fixed inset-0 z-9999 bg-transparent w-full h-full select-none",W&&(ce?"cursor-grabbing":"cursor-move"),!W&&{"cursor-ns-resize":P==="top"||P==="bottom","cursor-ew-resize":P==="left"||P==="right","cursor-nwse-resize":P==="topLeft"||P==="bottomRight","cursor-nesw-resize":P==="topRight"||P==="bottomLeft","cursor-auto":P===null})}),document.body),jsx("div",{className:clsx("max-lg:hidden fixed z-50 left-0 top-0",W?"will-change-transform":"will-change-auto",ze||W?"transition-none":"transition-transform duration-250 ease-[cubic-bezier(0.16,1,0.3,1)]"),style:{transform:`translate(${Math.round(d.x-(t?i:0))}px, ${Math.round(d.y)}px)`},children:jsxs("div",{className:"flex relative z-50",children:[t&&jsx("div",{className:clsx("relative mt-1 z-10 transition-all duration-250 ease-[cubic-bezier(0.16,1,0.3,1)]",W?"opacity-40 translate-x-4":"opacity-100 translate-x-0"),style:{width:i,height:C?40:u.height-8},children:t}),jsx("div",{className:clsx("z-50 relative bg-content1 border border-border rounded-lg overflow-hidden",W?"opacity-80 shadow-md scale-102 blur-[0.5px]":"opacity-100 shadow-lg scale-100 blur-none"),style:{width:u.width,height:u.height,transition:ze||W?"none":"transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s cubic-bezier(0.33, 1, 0.68, 1), height 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.33, 1, 0.68, 1)",contain:"content"},children:jsxs("div",{className:clsx("w-full h-full",ie&&"animate-modal-shrink",ie==="left"?"origin-left":"origin-right"),style:{contain:"paint"},children:[!C&&jsxs(Fragment,{children:[jsx("div",{className:"absolute top-0 left-0 w-3 h-3 cursor-nw-resize z-20",onMouseDown:n=>X(n,"resize","topLeft")}),jsx("div",{className:"absolute top-0 right-0 w-3 h-3 cursor-ne-resize z-20",onMouseDown:n=>X(n,"resize","topRight")}),jsx("div",{className:"absolute bottom-0 left-0 w-3 h-3 cursor-sw-resize z-20",onMouseDown:n=>X(n,"resize","bottomLeft")}),jsx("div",{className:"absolute bottom-0 right-0 w-3 h-3 cursor-se-resize z-20",onMouseDown:n=>X(n,"resize","bottomRight")}),jsx("div",{className:"absolute top-0 left-3 right-3 h-1.5 cursor-n-resize z-20",onMouseDown:n=>X(n,"resize","top")}),jsx("div",{className:"absolute bottom-0 left-3 right-3 h-1.5 cursor-s-resize z-20",onMouseDown:n=>X(n,"resize","bottom")}),jsx("div",{className:"absolute left-0 top-3 bottom-3 w-1.5 cursor-w-resize z-20",onMouseDown:n=>X(n,"resize","left")}),jsx("div",{className:"absolute right-0 top-3 bottom-3 w-1.5 cursor-e-resize z-20",onMouseDown:n=>X(n,"resize","right")})]}),S&&jsxs("div",{className:"relative border-b border-border/80 px-3 gap-4 flex items-center justify-between cursor-move select-none",onMouseDown:n=>X(n,"drag"),style:{height:K},children:[jsx(StyledTooltip,{placement:"top",closeDelay:0,content:le("scaffold.draggableModal.snapToEdge"),children:jsx(DraggableIcon,{className:"text-neutral absolute left-1/2 -translate-x-1/2 top-0"})}),H||jsxs(Fragment,{children:[jsx("div",{className:"min-w-0 flex-initial text-sm font-medium truncate cursor-auto",onMouseDown:n=>n.stopPropagation(),children:l}),jsxs("div",{className:"flex-none flex items-center justify-end gap-1",onMouseDown:n=>n.stopPropagation(),children:[jsx(Button,{size:"sm",variant:"light",radius:"lg",isIconOnly:true,onPress:$t,children:C?jsx(RestoreWindowIcon,{width:18,height:18,className:"text-neutral"}):jsx(MinimizeIcon,{width:18,height:18,className:"text-neutral"})}),jsx(Button,{size:"sm",variant:"light",radius:"lg",isIconOnly:true,onPress:At,children:Oe?jsx(UnMaximizeIcon,{width:18,height:18,className:"text-neutral"}):jsx(MaximizeIcon,{width:18,height:18,className:"text-neutral"})}),jsx(Button,{size:"sm",variant:"light",radius:"lg",isIconOnly:true,onPress:Ie,children:jsx(XCloseIcon,{width:18,height:18,className:"text-neutral"})})]})]})]}),!C&&jsx("div",{className:S?"h-[calc(100%-44px)] overflow-x-hidden overflow-y-auto":"h-full overflow-x-hidden overflow-y-auto cursor-move",onMouseDown:S?void 0:n=>X(n,"drag"),children:Q})]})}),R&&jsx("div",{className:clsx("relative mt-1 z-10 transition-all duration-250 ease-[cubic-bezier(0.16,1,0.3,1)]",W?"opacity-40 -translate-x-4":"opacity-100 translate-x-0"),style:{width:O,height:C?40:u.height-8},children:R})]})})]}):null});function st({id:e,title:o,maxWidth:l=440,minWidth:x=320,position:r,showHeader:z=true,header:w,headerHeight:t=44,children:i}){let{t:R}=useTranslation(),O=useAtomValue(se(e)),[D,S]=useState(false),[H,K]=useState(false),[Q,le]=useAtom(Le(e)),{onOpen:_}=ge(e),{onClose:Ie}=fe(e),Je=useAtomValue(Ye(e)),C=useAtomValue(Be(e)),$=useValueRef(Q),d=useValueRef(l),qe=useValueRef(x),u=useValueRef(r),Ge=useValueRef(D),de=useValueRef(H),ue=useCallbackRef(le),ee=useCallbackRef(_),te=useCallbackRef(Ie),Me=useValueRef(Je),ve=useValueRef(C),W=c=>{c.preventDefault(),c.stopPropagation(),S(true),document.body.style.cursor="ew-resize",document.body.style.userSelect="none",document.body.style.overflow="hidden",document.body.style.position="fixed",document.body.style.width="100%",document.body.style.height="100%";let P=c.clientX,Z=$.current,oe=ie=>{if(!Ge.current)return;let N=ie.clientX-P,ce=u.current==="right"?Z-N:Z+N,J=Math.min(Math.max(ce,qe.current),d.current);ue(J);},j=()=>{S(false),document.body.style.cursor="",document.body.style.userSelect="",document.body.style.overflow="",document.body.style.position="",document.body.style.width="",document.body.style.height="",document.removeEventListener("mousemove",oe),document.removeEventListener("mouseup",j);};document.addEventListener("mousemove",oe),document.addEventListener("mouseup",j);},ne=c=>{if(c.target instanceof HTMLElement&&c.target.closest("button"))return;c.preventDefault(),K(true);let P=c.clientX,Z=c.clientY,oe=()=>{document.removeEventListener("mousemove",j),document.removeEventListener("mouseup",ie),K(false);},j=N=>{if(!de.current)return;let ce=Math.abs(N.clientX-P),J=Math.abs(N.clientY-Z);(ce>10||J>10)&&(oe(),te(),ee({shouldStartDragging:true,position:{x:N.clientX-$.current/2+20,y:N.clientY-20},size:{width:Math.min(Math.max($.current,Me.current),ve.current)}}));},ie=()=>{oe();};document.addEventListener("mousemove",j),document.addEventListener("mouseup",ie);},ze=()=>{te();};return O!==r?null:jsxs("div",{className:"max-lg:hidden flex-none flex flex-row overflow-hidden",children:[r==="right"&&jsx(Dt,{isResizing:D,handleResizeStart:W}),jsxs("div",{className:clsx("flex flex-col min-h-0 overflow-hidden bg-content1",H?"opacity-80 scale-98 blur-[1px]":"opacity-100 scale-100 blur-none"),style:{width:`${Q}px`,transition:D||H?"none":"transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s cubic-bezier(0.33, 1, 0.68, 1), height 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.33, 1, 0.68, 1)",contain:"content"},children:[z&&jsxs("div",{className:"flex-none relative border-b border-border/80 px-3 gap-4 flex items-center justify-between cursor-move select-none",onMouseDown:ne,style:{height:t},children:[jsx(StyledTooltip,{placement:"top",closeDelay:0,content:R("scaffold.draggablePanel.snapToModal"),children:jsx(DraggableIcon,{className:"text-neutral absolute left-1/2 -translate-x-1/2 top-0"})}),w||jsxs(Fragment,{children:[jsx("div",{className:"min-w-0 flex-initial text-sm font-medium truncate cursor-auto",onMouseDown:c=>c.stopPropagation(),children:o}),jsx("div",{className:"flex-none flex items-center justify-end gap-1",onMouseDown:c=>c.stopPropagation(),children:jsx(Button,{size:"sm",variant:"light",radius:"lg",isIconOnly:true,onPress:ze,children:jsx(XCloseIcon,{width:18,height:18,className:"text-neutral"})})})]})]}),jsx("div",{className:"flex-auto min-h-0 overflow-y-auto",children:i})]}),r==="left"&&jsx(Dt,{isResizing:D,handleResizeStart:W})]})}function Dt({isResizing:e,handleResizeStart:o}){return jsxs("div",{className:"relative",children:[jsxs("div",{className:"relative w-1 h-full cursor-ew-resize bg-content3/80 hover:bg-content3 transition-colors duration-150 ease-in-out group flex flex-col items-center justify-center gap-1",children:[jsx("i",{className:"rounded-full w-0.5 h-0.5 bg-neutral"}),jsx("i",{className:"rounded-full w-0.5 h-0.5 bg-neutral"}),jsx("i",{className:"rounded-full w-0.5 h-0.5 bg-neutral"}),jsx("div",{className:"absolute inset-0 -left-1.5 -right-1.5 cursor-ew-resize",onMouseDown:o})]}),e&&jsx("div",{className:"fixed inset-0 z-50 cursor-ew-resize"})]})}function ro({contents:e=[],className:o,classNames:l,children:x}){let r=useAtomValue(Ve);useEffect(()=>{let t=getDefaultStore();e.forEach(i=>{t.set(Ce(i.id),i.panelMinWidth??320),t.set(Te(i.id),i.panelMaxWidth??440),t.set(Ye(i.id),i.modalMinWidth??504),t.set(Be(i.id),i.modalMaxWidth??window.innerWidth-40);});},[e]);let z=useMemo(()=>e.filter(t=>{let i=getDefaultStore();return r.left[t.id]?i.get(se(t.id))==="left":false}).sort((t,i)=>r.left[i.id]-r.left[t.id]),[e,r.left]),w=useMemo(()=>e.filter(t=>{let i=getDefaultStore();return r.right[t.id]?i.get(se(t.id))==="right":false}).sort((t,i)=>(r.right[t.id]??0)-(r.right[i.id]??0)),[e,r.right]);return jsxs(Fragment,{children:[jsxs("div",{className:clsx("w-full h-full flex flex-row overflow-hidden",o,l?.root),children:[jsx("div",{className:clsx("flex-none h-full flex flex-row",l?.left),children:z.map(t=>jsx(st,{...t,position:"left",minWidth:t.panelMinWidth??320,maxWidth:t.panelMaxWidth??440},`left-${t.id}`))}),jsx("div",{className:clsx("flex-auto min-w-0 h-full",l?.content),children:x}),jsx("div",{className:clsx("flex-none h-full flex flex-row",l?.right),children:w.map(t=>jsx(st,{...t,position:"right",minWidth:t.panelMinWidth??320,maxWidth:t.panelMaxWidth??440},`right-${t.id}`))})]}),e.map(t=>jsx(zt,{...t,minWidth:t.modalMinWidth??504,maxWidth:t.modalMaxWidth??window.innerWidth-40},`modal-${t.id}`))]})}function go(e){let{isOpen:o,onOpen:l,onClose:x}=ge(e),{isOpen:r,onOpen:z,onClose:w}=fe(e),t=useAtomValue(he(e)),i=useCallback(()=>{o||r||(t==="modal"?l():z({position:t}));},[o,r,t,l,z]),R=useCallback(()=>{o?x():r&&w();},[o,r,x,w]),O=useMemo(()=>o||r,[o,r]);return useMemo(()=>({isOpen:O,onOpen:i,onClose:R}),[O,i,R])}typeof window<"u"&&(window.__LIBERFI_VERSION__=window.__LIBERFI_VERSION__||{},window.__LIBERFI_VERSION__["@liberfi.io/ui-scaffold"]="0.1.0");var yn="0.1.0";export{zt as DraggableModal,st as DraggablePanel,ro as DraggablePanelProvider,go as useDraggableDisclosure,ge as useDraggableModalDisclosure,fe as useDraggablePanelDisclosure,yn as version};//# sourceMappingURL=index.mjs.map
1
+ import {memo,useState,useRef,useMemo,useEffect,useCallback}from'react';import {createPortal}from'react-dom';import {useValueRef,useCallbackRef,useEventEmitter}from'@liberfi.io/hooks';import {useTranslation}from'@liberfi.io/i18n';import {atomFamily,atomWithStorage,useAtom,useAtomValue,clsx,StyledTooltip,DraggableIcon,Button,RestoreWindowIcon,MinimizeIcon,UnMaximizeIcon,MaximizeIcon,XCloseIcon,useSetAtom,getDefaultStore,Link,useDisclosure}from'@liberfi.io/ui';import {throttle}from'@liberfi.io/utils';import {jsxs,Fragment,jsx}from'react/jsx-runtime';var se=atomFamily(e=>atomWithStorage(`panelState.${e??"default"}`,"none",void 0,{getOnInit:true})),Fe=atomFamily(e=>atomWithStorage(`panelWidth.${e??"default"}`,350,void 0,{getOnInit:true})),Le=atomFamily(e=>atomWithStorage(`panelMinWidth.${e??"default"}`,320,void 0,{getOnInit:true})),He=atomFamily(e=>atomWithStorage(`panelMaxWidth.${e??"default"}`,440,void 0,{getOnInit:true})),gt=atomFamily(e=>atomWithStorage(`modalOpen.${e??"default"}`,false,void 0,{getOnInit:true})),ke=atomFamily(e=>atomWithStorage(`modalShouldStartDragging.${e??"default"}`,false,void 0,{getOnInit:true})),Te=atomFamily(e=>atomWithStorage(`modalSize.${e??"default"}`,{width:350,height:580},void 0,{getOnInit:true})),Ae=atomFamily(e=>atomWithStorage(`modalRestoreSize.${e??"default"}`,{width:350,height:580},void 0,{getOnInit:true})),_e=atomFamily(e=>atomWithStorage(`modalPosition.${e??"default"}`,{x:typeof window<"u"?Math.max(0,(window.innerWidth-350)/2):0,y:typeof window<"u"?Math.max(0,(window.innerHeight-580)/2):0},void 0,{getOnInit:true})),$e=atomFamily(e=>atomWithStorage(`modalRestorePosition.${e??"default"}`,{x:typeof window<"u"?Math.max(0,(window.innerWidth-350)/2):0,y:typeof window<"u"?Math.max(0,(window.innerHeight-580)/2):0},void 0,{getOnInit:true})),Xe=atomFamily(e=>atomWithStorage(`modalMinimized.${e??"default"}`,false,void 0,{getOnInit:true})),Ye=atomFamily(e=>atomWithStorage(`modalMinWidth.${e??"default"}`,200,void 0,{getOnInit:true})),Be=atomFamily(e=>atomWithStorage(`modalMaxWidth.${e??"default"}`,typeof window<"u"?window.innerWidth-40:0,void 0,{getOnInit:true})),he=atomFamily(e=>atomWithStorage(`lastPanelType.${e??"default"}`,"modal",void 0,{getOnInit:true})),Ue=atomWithStorage("panelOrders",{left:{},right:{}},void 0,{getOnInit:true});function fe(e){let[t,o]=useAtom(gt(e)),[d,s]=useAtom(Xe(e)),h=useAtomValue(Ae(e)),g=useAtomValue($e(e)),n=useSetAtom(Te(e)),i=useSetAtom(_e(e)),w=useSetAtom(ke(e)),R=useSetAtom(he(e)),m=useCallback((S={})=>{let{shouldStartDragging:K,position:Q,size:le}=S;Q&&i(_=>({..._,...Q})),le&&n(_=>({..._,...le})),w(K??false),o(true),R("modal");},[o,i,n,w]),P=useCallback(()=>{o(false),d&&(n({...h}),i({...g}),s(false));},[d,h,g,s,o,n,i]);return useMemo(()=>({isOpen:t,onOpen:m,onClose:P}),[t,m,P])}function pe(e){let[t,o]=useAtom(se(e)),d=useSetAtom(Fe(e)),s=useSetAtom(he(e)),h=useSetAtom(Ue),g=useCallback((R={})=>{let m=R.position??"left";d(R.width??320),o(m),s(m),h(({left:P,right:S})=>m==="left"?{left:{...P,[e]:Date.now()},right:S}:{left:P,right:{...S,[e]:Date.now()}});},[e,o,d]),n=useCallback(()=>{o("none");},[o]),i=useMemo(()=>t!=="none",[t]),w=useMemo(()=>t!=="none"?t:void 0,[t]);return useMemo(()=>({isOpen:i,position:w,onOpen:g,onClose:n}),[i,g,n])}var cn={width:200,height:48},Se={width:typeof window<"u"?window.innerWidth-40:0,height:typeof window<"u"?window.innerHeight-40:0},mn={x:20,y:20},Rt=memo(function({id:t,title:o,minWidth:d=504,maxWidth:s=Se.width,minHeight:h=200,maxHeight:g=Se.height,leftSidebar:n,leftSidebarWidth:i=200,rightSidebar:w,rightSidebarWidth:R=200,aspectRatio:m,showHeader:P=true,header:S,headerHeight:K=44,children:Q}){let{t:le}=useTranslation(),{isOpen:_,onClose:Ee}=fe(t),{onOpen:Je}=pe(t),[H,$]=useAtom(Xe(t)),[u,qe]=useAtom(_e(t)),[c,Ge]=useAtom(Te(t)),[de,ue]=useAtom(Ae(t)),[ee,te]=useAtom($e(t)),[Me,ve]=useAtom(ke(t)),[O,ne]=useState(Me),[Re,f]=useState(false),[N,Z]=useState(null),[oe,j]=useState(null),[ie,E]=useState(null),[ce,J]=useState(null),X=useRef(null),Lt=useAtomValue(Le(t)),Ht=useAtomValue(He(t)),Y=useValueRef(u),x=useCallbackRef(qe),re=useValueRef(c),I=useCallbackRef(Ge),kt=useValueRef(i),Tt=useValueRef(!!n),At=useValueRef(R),_t=useValueRef(!!w),T=useValueRef(m),B=useValueRef(K),Pe=useValueRef(d),ze=useValueRef(s),De=useValueRef(h),We=useValueRef(g),$t=useValueRef(O),lt=useValueRef(oe),Ke=useValueRef(ce),Xt=useCallbackRef(Ee),Yt=useCallbackRef(Je),Bt=useValueRef(Lt),Ut=useValueRef(Ht),Oe=useMemo(()=>c.width===Se.width&&c.height===Se.height,[c.width,c.height]);useEffect(()=>{(u.x<0||u.y<0)&&x({x:Math.max(0,u.x),y:Math.max(0,u.y)});let r=u.x+c.width,C=u.y+c.height;(r>window.innerWidth||C>window.innerHeight)&&x({x:Math.min(u.x,Math.max(0,window.innerWidth-c.width)),y:Math.min(u.y,Math.max(0,window.innerHeight-c.height))});},[t]),useEffect(()=>{if(_&&Me){ne(true);let r=q=>{x({x:q.clientX-c.width/2,y:q.clientY-20});},C=()=>{ne(false),ve(false),document.removeEventListener("mousemove",r),document.removeEventListener("mouseup",C);};return document.addEventListener("mousemove",r),document.addEventListener("mouseup",C),document.body.style.cursor="grabbing",()=>{document.removeEventListener("mousemove",r),document.removeEventListener("mouseup",C),document.body.style.cursor="";}}},[_,Me,ve,c.width]);let A=(r,C,q)=>{ve(false),ne(false),f(false),Z(null),C==="drag"?ne(true):C==="resize"&&(Z(q||null),f(true));let dt=r.clientX,ut=r.clientY,F=re.current.width,k=re.current.height,L={...Y.current},ct=()=>{document.removeEventListener("mousemove",mt),document.removeEventListener("mouseup",ht),document.body.style.cursor="",ne(false),f(false),Z(null),j(null),X.current&&(clearTimeout(X.current),X.current=null),J(null),E(null);},mt=Ie=>{if(C==="drag"){let U=Ie.clientX-dt,V=Ie.clientY-ut,b=L.x+U,l=L.y+V,me=Tt.current?kt.current:0,Ne=12+me,z=_t.current?At.current:0,y=window.innerWidth-12-F-z,Ce=window.innerHeight-12-44,M=b<=Ne?"left":b>=y?"right":null;M!==lt.current&&j(M),X.current&&M&&E(M),X.current&&(Ke.current==="left"&&(b>Ne||M!=="left")||Ke.current==="right"&&(b<y||M!=="right"))&&(clearTimeout(X.current),X.current=null,J(null),E(null)),!X.current&&M&&Ke.current!==M&&(J(M),E(M),X.current=setTimeout(()=>{$t.current&&lt.current===M?(ct(),Xt(),Yt({position:M,width:Math.min(Math.max(re.current.width,Bt.current),Ut.current)})):J(null);},350)),b=Math.min(Math.max(b,12+me),y),l=Math.min(Math.max(l,12),Ce),x({x:b,y:l});}else if(C==="resize"&&q){let U=Ie.clientX-dt,V=Ie.clientY-ut,b=(l,me,Ne)=>{let z=Math.min(Math.max(l,Pe.current),ze.current),y=Math.min(Math.max(me,De.current),We.current);if(T.current){if(Ne==="width")y=Math.min(Math.max(l/T.current+B.current,De.current),We.current),z=(y-B.current)*T.current;else if(Ne==="height")z=Math.min(Math.max((me-B.current)*T.current,Pe.current),ze.current),y=z/T.current+B.current;else {let Ce=l/T.current+B.current,M=(me-B.current)*T.current,ft=Math.abs(U),pt=Math.abs(V);if(ft>1.1*pt)y=Math.min(Math.max(Ce,De.current),We.current),z=(y-B.current)*T.current;else if(pt>1.1*ft)z=Math.min(Math.max(M,Pe.current),ze.current),y=z/T.current+B.current;else {let jt=(y+Ce)/2;z=Math.min(Math.max((z+M)/2,Pe.current),ze.current),y=Math.min(Math.max(jt,De.current),We.current),z=(y-B.current)*T.current;}}z=Math.min(Math.max(z,Pe.current),ze.current),y=Math.min(Math.max(y,De.current),We.current);}return {width:z,height:y}};switch(q){case "topLeft":{let l=b(F-U,k-V,"both");I(l),x({x:L.x+(F-l.width),y:L.y+(k-l.height)});break}case "topRight":{let l=b(F+U,k-V,"both");I(l),x({x:L.x,y:L.y+(k-l.height)});break}case "bottomLeft":{let l=b(F-U,k+V,"both");I(l),x({x:L.x+(F-l.width),y:L.y});break}case "bottomRight":{I(b(F+U,k+V,"both"));break}case "top":{let l=b(F,k-V,"height");I(l),x({x:L.x,y:L.y+(k-l.height)});break}case "bottom":{I(b(F,k+V,"height"));break}case "left":{let l=b(F-U,k,"width");I(l),x({x:L.x+(F-l.width),y:L.y});break}case "right":{I(b(F+U,k,"width"));break}}}},ht=()=>{(u.x<0||u.y<0)&&x({x:Math.max(0,u.x),y:Math.max(0,u.y)}),ct();};document.addEventListener("mousemove",mt),document.addEventListener("mouseup",ht);},Vt=useCallback(()=>{H?(I({...de}),x({...ee}),$(false)):(Oe?x({...ee}):(ue({...c}),te({...u})),I({...cn}),$(true));},[H,Oe,c,u,de,ee,$,ue,te]),Zt=useCallback(()=>{Oe?(I({...de}),x({...ee})):(H?$(false):(ue({...c}),te({...u})),I({...Se}),x({...mn}));},[Oe,H,c,u,de,ee,$,ue,te]);return useEffect(()=>{let r=throttle(()=>{(Y.current.x<0||Y.current.y<0)&&x({x:Math.max(0,Y.current.x),y:Math.max(0,Y.current.y)});let C=Y.current.x+re.current.width,q=Y.current.y+re.current.height;(C>window.innerWidth||q>window.innerHeight)&&x({x:Math.min(Y.current.x,Math.max(0,window.innerWidth-re.current.width)),y:Math.min(Y.current.y,Math.max(0,window.innerHeight-re.current.height))});},100);return window.addEventListener("resize",r),()=>{window.removeEventListener("resize",r);}},[]),_?jsxs(Fragment,{children:[(O||Re)&&createPortal(jsx("div",{className:clsx("max-sm:hidden fixed inset-0 z-9999 bg-transparent w-full h-full select-none",O&&(ce?"cursor-grabbing":"cursor-move"),!O&&{"cursor-ns-resize":N==="top"||N==="bottom","cursor-ew-resize":N==="left"||N==="right","cursor-nwse-resize":N==="topLeft"||N==="bottomRight","cursor-nesw-resize":N==="topRight"||N==="bottomLeft","cursor-auto":N===null})}),document.body),jsx("div",{className:clsx("max-sm:hidden fixed z-50 left-0 top-0",O?"will-change-transform":"will-change-auto",Re||O?"transition-none":"transition-transform duration-250 ease-[cubic-bezier(0.16,1,0.3,1)]"),style:{transform:`translate(${Math.round(u.x-(n?i:0))}px, ${Math.round(u.y)}px)`},children:jsxs("div",{className:"flex relative z-50",children:[n&&jsx("div",{className:clsx("relative mt-1 z-10 transition-all duration-250 ease-[cubic-bezier(0.16,1,0.3,1)]",O?"opacity-40 translate-x-4":"opacity-100 translate-x-0"),style:{width:i,height:H?40:c.height-8},children:n}),jsx("div",{className:clsx("z-50 relative bg-content1 border border-border rounded-lg overflow-hidden",O?"opacity-80 shadow-md scale-102 blur-[0.5px]":"opacity-100 shadow-lg scale-100 blur-none"),style:{width:c.width,height:c.height,transition:Re||O?"none":"transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s cubic-bezier(0.33, 1, 0.68, 1), height 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.33, 1, 0.68, 1)",contain:"content"},children:jsxs("div",{className:clsx("w-full h-full",ie&&"animate-modal-shrink",ie==="left"?"origin-left":"origin-right"),style:{contain:"paint"},children:[!H&&jsxs(Fragment,{children:[jsx("div",{className:"absolute top-0 left-0 w-3 h-3 cursor-nw-resize z-20",onMouseDown:r=>A(r,"resize","topLeft")}),jsx("div",{className:"absolute top-0 right-0 w-3 h-3 cursor-ne-resize z-20",onMouseDown:r=>A(r,"resize","topRight")}),jsx("div",{className:"absolute bottom-0 left-0 w-3 h-3 cursor-sw-resize z-20",onMouseDown:r=>A(r,"resize","bottomLeft")}),jsx("div",{className:"absolute bottom-0 right-0 w-3 h-3 cursor-se-resize z-20",onMouseDown:r=>A(r,"resize","bottomRight")}),jsx("div",{className:"absolute top-0 left-3 right-3 h-1.5 cursor-n-resize z-20",onMouseDown:r=>A(r,"resize","top")}),jsx("div",{className:"absolute bottom-0 left-3 right-3 h-1.5 cursor-s-resize z-20",onMouseDown:r=>A(r,"resize","bottom")}),jsx("div",{className:"absolute left-0 top-3 bottom-3 w-1.5 cursor-w-resize z-20",onMouseDown:r=>A(r,"resize","left")}),jsx("div",{className:"absolute right-0 top-3 bottom-3 w-1.5 cursor-e-resize z-20",onMouseDown:r=>A(r,"resize","right")})]}),P&&jsxs("div",{className:"relative border-b border-border/80 px-3 gap-4 flex items-center justify-between cursor-move select-none",onMouseDown:r=>A(r,"drag"),style:{height:K},children:[jsx(StyledTooltip,{placement:"top",closeDelay:0,content:le("scaffold.draggableModal.snapToEdge"),children:jsx(DraggableIcon,{className:"text-neutral absolute left-1/2 -translate-x-1/2 top-0"})}),S||jsxs(Fragment,{children:[jsx("div",{className:"min-w-0 flex-initial text-sm font-medium truncate cursor-auto",onMouseDown:r=>r.stopPropagation(),children:o}),jsxs("div",{className:"flex-none flex items-center justify-end gap-1",onMouseDown:r=>r.stopPropagation(),children:[jsx(Button,{size:"sm",variant:"light",radius:"lg",isIconOnly:true,onPress:Vt,children:H?jsx(RestoreWindowIcon,{width:18,height:18,className:"text-neutral"}):jsx(MinimizeIcon,{width:18,height:18,className:"text-neutral"})}),jsx(Button,{size:"sm",variant:"light",radius:"lg",isIconOnly:true,onPress:Zt,children:Oe?jsx(UnMaximizeIcon,{width:18,height:18,className:"text-neutral"}):jsx(MaximizeIcon,{width:18,height:18,className:"text-neutral"})}),jsx(Button,{size:"sm",variant:"light",radius:"lg",isIconOnly:true,onPress:Ee,children:jsx(XCloseIcon,{width:18,height:18,className:"text-neutral"})})]})]})]}),!H&&jsx("div",{className:P?"h-[calc(100%-44px)] overflow-x-hidden overflow-y-auto":"h-full overflow-x-hidden overflow-y-auto cursor-move",onMouseDown:P?void 0:r=>A(r,"drag"),children:Q})]})}),w&&jsx("div",{className:clsx("relative mt-1 z-10 transition-all duration-250 ease-[cubic-bezier(0.16,1,0.3,1)]",O?"opacity-40 -translate-x-4":"opacity-100 translate-x-0"),style:{width:R,height:H?40:c.height-8},children:w})]})})]}):null});function st({id:e,title:t,maxWidth:o=440,minWidth:d=320,position:s,showHeader:h=true,header:g,headerHeight:n=44,children:i}){let{t:w}=useTranslation(),R=useAtomValue(se(e)),[m,P]=useState(false),[S,K]=useState(false),[Q,le]=useAtom(Fe(e)),{onOpen:_}=fe(e),{onClose:Ee}=pe(e),Je=useAtomValue(Ye(e)),H=useAtomValue(Be(e)),$=useValueRef(Q),u=useValueRef(o),qe=useValueRef(d),c=useValueRef(s),Ge=useValueRef(m),de=useValueRef(S),ue=useCallbackRef(le),ee=useCallbackRef(_),te=useCallbackRef(Ee),Me=useValueRef(Je),ve=useValueRef(H),O=f=>{f.preventDefault(),f.stopPropagation(),P(true),document.body.style.cursor="ew-resize",document.body.style.userSelect="none",document.body.style.overflow="hidden",document.body.style.position="fixed",document.body.style.width="100%",document.body.style.height="100%";let N=f.clientX,Z=$.current,oe=ie=>{if(!Ge.current)return;let E=ie.clientX-N,ce=c.current==="right"?Z-E:Z+E,J=Math.min(Math.max(ce,qe.current),u.current);ue(J);},j=()=>{P(false),document.body.style.cursor="",document.body.style.userSelect="",document.body.style.overflow="",document.body.style.position="",document.body.style.width="",document.body.style.height="",document.removeEventListener("mousemove",oe),document.removeEventListener("mouseup",j);};document.addEventListener("mousemove",oe),document.addEventListener("mouseup",j);},ne=f=>{if(f.target instanceof HTMLElement&&f.target.closest("button"))return;f.preventDefault(),K(true);let N=f.clientX,Z=f.clientY,oe=()=>{document.removeEventListener("mousemove",j),document.removeEventListener("mouseup",ie),K(false);},j=E=>{if(!de.current)return;let ce=Math.abs(E.clientX-N),J=Math.abs(E.clientY-Z);(ce>10||J>10)&&(oe(),te(),ee({shouldStartDragging:true,position:{x:E.clientX-$.current/2+20,y:E.clientY-20},size:{width:Math.min(Math.max($.current,Me.current),ve.current)}}));},ie=()=>{oe();};document.addEventListener("mousemove",j),document.addEventListener("mouseup",ie);},Re=()=>{te();};return R!==s?null:jsxs("div",{className:"max-sm:hidden flex-none flex flex-row overflow-hidden",children:[s==="right"&&jsx(zt,{isResizing:m,handleResizeStart:O}),jsxs("div",{className:clsx("flex flex-col min-h-0 overflow-hidden bg-content1",S?"opacity-80 scale-98 blur-[1px]":"opacity-100 scale-100 blur-none"),style:{width:`${Q}px`,transition:m||S?"none":"transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s cubic-bezier(0.33, 1, 0.68, 1), height 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.33, 1, 0.68, 1)",contain:"content"},children:[h&&jsxs("div",{className:"flex-none relative border-b border-border/80 px-3 gap-4 flex items-center justify-between cursor-move select-none",onMouseDown:ne,style:{height:n},children:[jsx(StyledTooltip,{placement:"top",closeDelay:0,content:w("scaffold.draggablePanel.snapToModal"),children:jsx(DraggableIcon,{className:"text-neutral absolute left-1/2 -translate-x-1/2 top-0"})}),g||jsxs(Fragment,{children:[jsx("div",{className:"min-w-0 flex-initial text-sm font-medium truncate cursor-auto",onMouseDown:f=>f.stopPropagation(),children:t}),jsx("div",{className:"flex-none flex items-center justify-end gap-1",onMouseDown:f=>f.stopPropagation(),children:jsx(Button,{size:"sm",variant:"light",radius:"lg",isIconOnly:true,onPress:Re,children:jsx(XCloseIcon,{width:18,height:18,className:"text-neutral"})})})]})]}),jsx("div",{className:"flex-auto min-h-0 overflow-y-auto",children:i})]}),s==="left"&&jsx(zt,{isResizing:m,handleResizeStart:O})]})}function zt({isResizing:e,handleResizeStart:t}){return jsxs("div",{className:"relative",children:[jsxs("div",{className:"relative w-1 h-full cursor-ew-resize bg-border/80 hover:bg-border transition-colors duration-150 ease-in-out group flex flex-col items-center justify-center gap-1",children:[jsx("i",{className:"rounded-full w-0.5 h-0.5 bg-neutral"}),jsx("i",{className:"rounded-full w-0.5 h-0.5 bg-neutral"}),jsx("i",{className:"rounded-full w-0.5 h-0.5 bg-neutral"}),jsx("div",{className:"absolute inset-0 -left-1.5 -right-1.5 cursor-ew-resize",onMouseDown:t})]}),e&&jsx("div",{className:"fixed inset-0 z-50 cursor-ew-resize"})]})}function So({contents:e=[],className:t,classNames:o,children:d}){let s=useAtomValue(Ue);useEffect(()=>{let n=getDefaultStore();e.forEach(i=>{n.set(Le(i.id),i.panelMinWidth??320),n.set(He(i.id),i.panelMaxWidth??440),n.set(Ye(i.id),i.modalMinWidth??504),n.set(Be(i.id),i.modalMaxWidth??window.innerWidth-40);});},[e]);let h=useMemo(()=>e.filter(n=>{let i=getDefaultStore();return s.left[n.id]?i.get(se(n.id))==="left":false}).sort((n,i)=>s.left[i.id]-s.left[n.id]),[e,s.left]),g=useMemo(()=>e.filter(n=>{let i=getDefaultStore();return s.right[n.id]?i.get(se(n.id))==="right":false}).sort((n,i)=>(s.right[n.id]??0)-(s.right[i.id]??0)),[e,s.right]);return jsxs(Fragment,{children:[jsxs("div",{className:clsx("w-full h-full flex flex-row overflow-hidden",t,o?.root),children:[jsx("div",{className:clsx("flex-none h-full flex flex-row",o?.left),children:h.map(n=>jsx(st,{...n,position:"left",minWidth:n.panelMinWidth??320,maxWidth:n.panelMaxWidth??440},`left-${n.id}`))}),jsx("div",{className:clsx("flex-auto min-w-0 h-full",o?.content),children:d}),jsx("div",{className:clsx("flex-none h-full flex flex-row",o?.right),children:g.map(n=>jsx(st,{...n,position:"right",minWidth:n.panelMinWidth??320,maxWidth:n.panelMaxWidth??440},`right-${n.id}`))})]}),e.map(n=>jsx(Rt,{...n,minWidth:n.modalMinWidth??504,maxWidth:n.modalMaxWidth??window.innerWidth-40},`modal-${n.id}`))]})}function To(e){let{isOpen:t,onOpen:o,onClose:d}=fe(e),{isOpen:s,onOpen:h,onClose:g}=pe(e),n=useAtomValue(he(e)),i=useCallback(()=>{t||s||(n==="modal"?o():h({position:n}));},[t,s,n,o,h]),w=useCallback(()=>{t?d():s&&g();},[t,s,d,g]),R=useMemo(()=>t||s,[t,s]);return useMemo(()=>({isOpen:R,onOpen:i,onClose:w}),[R,i,w])}function jo({children:e,className:t}){return jsx("div",{className:clsx("max-sm:hidden flex-none w-full h-15 px-6 max-lg:px-4 gap-6 max-lg:gap-4 flex justify-between items-center border-b border-border bg-background",t),children:e})}function Ko({children:e,className:t}){return jsx("div",{className:clsx("sm:hidden flex-none w-full h-11 px-2 flex justify-between items-center border-b border-border bg-background",t),children:e})}function ni({children:e,className:t}){return jsx("div",{className:clsx("sm:hidden flex-none w-full h-14 flex justify-evenly items-center border-t border-border bg-background",t),children:e})}function si({children:e,className:t}){return jsx("div",{className:clsx("flex flex-col w-full h-screen max-sm:h-dvh overflow-hidden bg-background",t),children:e})}function ui({className:e,children:t}){return jsx("div",{className:clsx("flex-auto w-full min-h-0",e),children:t})}function pi({href:e="/",icon:t,miniIcon:o,className:d}){let{t:s}=useTranslation();return jsxs(Link,{href:e,className:clsx("flex-none flex justify-center items-center",d),"aria-label":s("scaffold.home"),children:[jsx("div",{className:clsx("flex justify-center items-center",!!o&&"max-xl:hidden"),children:t}),o&&jsx("div",{className:"flex justify-center items-center xl:hidden",children:o})]})}function yi({href:e,title:t,active:o=false,className:d}){return jsx(Link,{"data-active":o,href:e,className:clsx("h-8 text-sm font-medium px-2 xl:px-3 data-[active=true]:text-primary hover:text-primary text-foreground hover:bg-primary-50 rounded-sm",d),"aria-label":t,children:t})}function Fi({id:e,children:t}){let o=useEventEmitter(),{isOpen:d,onOpen:s,onClose:h,onOpenChange:g}=useDisclosure(),[n,i]=useState(void 0),[w,R]=useState(void 0);return useEffect(()=>{let m=({params:P,onResult:S})=>{i(P),R(S),s();};return o.on(`open_modal:${e}`,m),()=>{o.off(`open_modal:${e}`,m);}},[e,s,o]),useEffect(()=>{let m=()=>{h();};return o.on(`close_modal:${e}`,m),()=>{o.off(`close_modal:${e}`,m);}},[e,h,o]),t({params:n,isOpen:d,onClose:h,onOpenChange:g,onResult:w})}function Ti(e){let t=useEventEmitter(),o=useCallback(s=>{t.emit(`open_modal:${e}`,s);},[e,t]),d=useCallback(()=>{t.emit(`close_modal:${e}`);},[e,t]);return {onOpen:o,onClose:d}}typeof window<"u"&&(window.__LIBERFI_VERSION__=window.__LIBERFI_VERSION__||{},window.__LIBERFI_VERSION__["@liberfi.io/ui-scaffold"]="0.1.8");var Bn="0.1.8";export{Fi as AsyncModal,Rt as DraggableModal,st as DraggablePanel,So as DraggablePanelProvider,ni as Footer,jo as Header,yi as HeaderNavigation,pi as Logo,Ko as MobileHeader,si as Page,ui as PageContent,Ti as useAsyncModal,To as useDraggableDisclosure,fe as useDraggableModalDisclosure,pe as useDraggablePanelDisclosure,Bn as version};//# sourceMappingURL=index.mjs.map
2
2
  //# sourceMappingURL=index.mjs.map