@liberfi.io/ui-scaffold 0.1.0 → 0.1.2

package/dist/index.d.mts

@@ -54,6 +54,62 @@ type DraggablePanelProps = PropsWithChildren<{
 }>;
 declare function DraggablePanel({ id, title, maxWidth, minWidth, position, showHeader, header, headerHeight, children, }: DraggablePanelProps): react_jsx_runtime.JSX.Element | null;
 
+type DraggableContentProps = PropsWithChildren<{
+    /** unique identifier for both the modal & panel */
+    id: string;
+    /** title of both the modal & panel */
+    title?: React.ReactNode;
+    /** whether to show the header for both the modal & panel */
+    showHeader?: boolean;
+    /** custom header content for both the modal & panel */
+    header?: React.ReactNode;
+    /** height of the modal header for both the modal & panel */
+    headerHeight?: number;
+    /** constraints for the minimum width of the modal */
+    modalMinWidth?: number;
+    /** constraints for the maximum width of the modal */
+    modalMaxWidth?: number;
+    /** constraints for the minimum width of the panel */
+    panelMinWidth?: number;
+    /** constraints for the maximum width of the panel */
+    panelMaxWidth?: number;
+    /** constraints for the minimum height of the modal */
+    minHeight?: number;
+    /** constraints for the maximum height of the modal */
+    maxHeight?: number;
+    /** left sidebar of the modal */
+    leftSidebar?: React.ReactNode;
+    /** width of the left sidebar */
+    leftSidebarWidth?: number;
+    /** right sidebar of the modal */
+    rightSidebar?: React.ReactNode;
+    /** width of the right sidebar */
+    rightSidebarWidth?: number;
+    /** constraints for the aspect ratio when resizing modal */
+    aspectRatio?: number;
+}>;
+type DraggablePanelProviderProps = PropsWithChildren<{
+    /** draggable contents */
+    contents?: Array<DraggableContentProps>;
+    /** root container class name */
+    className?: string;
+    /** class names slots*/
+    classNames?: {
+        root?: string;
+        left?: string;
+        right?: string;
+        content?: string;
+    };
+}>;
+declare function DraggablePanelProvider({ contents, className, classNames, children, }: DraggablePanelProviderProps): react_jsx_runtime.JSX.Element;
+
+type UseDraggableDisclosureReturnType = {
+    isOpen: boolean;
+    onOpen: () => void;
+    onClose: () => void;
+};
+declare function useDraggableDisclosure(id: string): UseDraggableDisclosureReturnType;
+
 type OpenDraggableModalOptions = {
     /** should start dragging automatically when the modal is opened */
     shouldStartDragging?: boolean;
@@ -75,6 +131,20 @@ type UseDraggableModalDisclosureReturnType = {
 };
 declare function useDraggableModalDisclosure(id: string): UseDraggableModalDisclosureReturnType;
 
+type OpenDraggablePanelOptions = {
+    /** which side the panel is docked on */
+    position?: "left" | "right";
+    /** adjust size of the modal when it is opened */
+    width?: number;
+};
+type UseDraggablePanelDisclosureReturnType = {
+    isOpen: boolean;
+    position?: "left" | "right";
+    onOpen: (options?: OpenDraggablePanelOptions) => void;
+    onClose: () => void;
+};
+declare function useDraggablePanelDisclosure(id: string): UseDraggablePanelDisclosureReturnType;
+
 declare global {
     interface Window {
         __LIBERFI_VERSION__?: {
@@ -84,4 +154,4 @@ declare global {
 }
 declare const _default: "0.1.0";
 
-export { DraggableModal, type DraggableModalProps, DraggablePanel, type DraggablePanelProps, type OpenDraggableModalOptions, type UseDraggableModalDisclosureReturnType, useDraggableModalDisclosure, _default as version };
+export { type DraggableContentProps, DraggableModal, type DraggableModalProps, DraggablePanel, type DraggablePanelProps, DraggablePanelProvider, type DraggablePanelProviderProps, type OpenDraggableModalOptions, type OpenDraggablePanelOptions, type UseDraggableDisclosureReturnType, type UseDraggableModalDisclosureReturnType, type UseDraggablePanelDisclosureReturnType, useDraggableDisclosure, useDraggableModalDisclosure, useDraggablePanelDisclosure, _default as version };

package/dist/index.d.ts

@@ -54,6 +54,62 @@ type DraggablePanelProps = PropsWithChildren<{
 }>;
 declare function DraggablePanel({ id, title, maxWidth, minWidth, position, showHeader, header, headerHeight, children, }: DraggablePanelProps): react_jsx_runtime.JSX.Element | null;
 
+type DraggableContentProps = PropsWithChildren<{
+    /** unique identifier for both the modal & panel */
+    id: string;
+    /** title of both the modal & panel */
+    title?: React.ReactNode;
+    /** whether to show the header for both the modal & panel */
+    showHeader?: boolean;
+    /** custom header content for both the modal & panel */
+    header?: React.ReactNode;
+    /** height of the modal header for both the modal & panel */
+    headerHeight?: number;
+    /** constraints for the minimum width of the modal */
+    modalMinWidth?: number;
+    /** constraints for the maximum width of the modal */
+    modalMaxWidth?: number;
+    /** constraints for the minimum width of the panel */
+    panelMinWidth?: number;
+    /** constraints for the maximum width of the panel */
+    panelMaxWidth?: number;
+    /** constraints for the minimum height of the modal */
+    minHeight?: number;
+    /** constraints for the maximum height of the modal */
+    maxHeight?: number;
+    /** left sidebar of the modal */
+    leftSidebar?: React.ReactNode;
+    /** width of the left sidebar */
+    leftSidebarWidth?: number;
+    /** right sidebar of the modal */
+    rightSidebar?: React.ReactNode;
+    /** width of the right sidebar */
+    rightSidebarWidth?: number;
+    /** constraints for the aspect ratio when resizing modal */
+    aspectRatio?: number;
+}>;
+type DraggablePanelProviderProps = PropsWithChildren<{
+    /** draggable contents */
+    contents?: Array<DraggableContentProps>;
+    /** root container class name */
+    className?: string;
+    /** class names slots*/
+    classNames?: {
+        root?: string;
+        left?: string;
+        right?: string;
+        content?: string;
+    };
+}>;
+declare function DraggablePanelProvider({ contents, className, classNames, children, }: DraggablePanelProviderProps): react_jsx_runtime.JSX.Element;
+
+type UseDraggableDisclosureReturnType = {
+    isOpen: boolean;
+    onOpen: () => void;
+    onClose: () => void;
+};
+declare function useDraggableDisclosure(id: string): UseDraggableDisclosureReturnType;
+
 type OpenDraggableModalOptions = {
     /** should start dragging automatically when the modal is opened */
     shouldStartDragging?: boolean;
@@ -75,6 +131,20 @@ type UseDraggableModalDisclosureReturnType = {
 };
 declare function useDraggableModalDisclosure(id: string): UseDraggableModalDisclosureReturnType;
 
+type OpenDraggablePanelOptions = {
+    /** which side the panel is docked on */
+    position?: "left" | "right";
+    /** adjust size of the modal when it is opened */
+    width?: number;
+};
+type UseDraggablePanelDisclosureReturnType = {
+    isOpen: boolean;
+    position?: "left" | "right";
+    onOpen: (options?: OpenDraggablePanelOptions) => void;
+    onClose: () => void;
+};
+declare function useDraggablePanelDisclosure(id: string): UseDraggablePanelDisclosureReturnType;
+
 declare global {
     interface Window {
         __LIBERFI_VERSION__?: {
@@ -84,4 +154,4 @@ declare global {
 }
 declare const _default: "0.1.0";
 
-export { DraggableModal, type DraggableModalProps, DraggablePanel, type DraggablePanelProps, type OpenDraggableModalOptions, type UseDraggableModalDisclosureReturnType, useDraggableModalDisclosure, _default as version };
+export { type DraggableContentProps, DraggableModal, type DraggableModalProps, DraggablePanel, type DraggablePanelProps, DraggablePanelProvider, type DraggablePanelProviderProps, type OpenDraggableModalOptions, type OpenDraggablePanelOptions, type UseDraggableDisclosureReturnType, type UseDraggableModalDisclosureReturnType, type UseDraggablePanelDisclosureReturnType, useDraggableDisclosure, useDraggableModalDisclosure, useDraggablePanelDisclosure, _default as version };

package/dist/index.js

@@ -1,2 +1,2 @@
-'use strict';var react=require('react'),reactDom=require('react-dom'),hooks=require('@liberfi.io/hooks'),i18n=require('@liberfi.io/i18n'),ui=require('@liberfi.io/ui'),utils=require('@liberfi.io/utils'),jsxRuntime=require('react/jsx-runtime');var Ne=ui.atomFamily(t=>ui.atomWithStorage(`panelState.${t??"default"}`,"none",void 0,{getOnInit:true})),Ie=ui.atomFamily(t=>ui.atomWithStorage(`panelWidth.${t??"default"}`,320,void 0,{getOnInit:true})),tt=ui.atomFamily(t=>ui.atomWithStorage(`modalOpen.${t??"default"}`,false,void 0,{getOnInit:true})),Pe=ui.atomFamily(t=>ui.atomWithStorage(`modalShouldStartDragging.${t??"default"}`,false,void 0,{getOnInit:true})),Oe=ui.atomFamily(t=>ui.atomWithStorage(`modalSize.${t??"default"}`,{width:596,height:312},void 0,{getOnInit:true})),We=ui.atomFamily(t=>ui.atomWithStorage(`modalRestoreSize.${t??"default"}`,{width:596,height:312},void 0,{getOnInit:true})),Le=ui.atomFamily(t=>ui.atomWithStorage(`modalPosition.${t??"default"}`,{x:Math.max(0,(window.innerWidth-596)/2),y:Math.max(0,(window.innerHeight-312)/2)},void 0,{getOnInit:true})),Fe=ui.atomFamily(t=>ui.atomWithStorage(`modalRestorePosition.${t??"default"}`,{x:Math.max(0,(window.innerWidth-596)/2),y:Math.max(0,(window.innerHeight-312)/2)},void 0,{getOnInit:true})),Xe=ui.atomFamily(t=>ui.atomWithStorage(`modalMinimized.${t??"default"}`,false,void 0,{getOnInit:true}));ui.atomFamily(t=>ui.atomWithStorage(`lastPanelType.${t??"default"}`,"modal",void 0,{getOnInit:true}));function _e(t){let[a,T]=ui.useAtom(tt(t)),[Q,I]=ui.useAtom(Xe(t)),ee=ui.useAtomValue(We(t)),te=ui.useAtomValue(Fe(t)),v=ui.useSetAtom(Oe(t)),M=ui.useSetAtom(Le(t)),C=ui.useSetAtom(Pe(t)),V=react.useCallback((R={})=>{let{shouldStartDragging:oe,position:P,size:U}=R;P&&M(Y=>({...Y,...P})),U&&v(Y=>({...Y,...U})),C(oe??false),T(true);},[T,M,v,C]),ne=react.useCallback(()=>{T(false),Q&&(v({...ee}),M({...te}),I(false));},[Q,ee,te,I,T,v,M]);return react.useMemo(()=>({isOpen:a,onOpen:V,onClose:ne}),[a,V,ne])}var Ht={width:200,height:48},ze={width:window.innerWidth-40,height:window.innerHeight-40},kt={x:20,y:20},un=react.memo(function({id:a,title:T,minWidth:Q=504,maxWidth:I=ze.width,minHeight:ee=200,maxHeight:te=ze.height,leftSidebar:v,leftSidebarWidth:M=200,rightSidebar:C,rightSidebarWidth:V=200,aspectRatio:ne,showHeader:R=true,header:oe,headerHeight:P=44,children:U}){let{t:Y}=i18n.useTranslation(),{isOpen:he,onClose:Me}=_e(a),[p,Z]=ui.useAtom(Xe(a)),[s,He]=ui.useAtom(Le(a)),[r,ke]=ui.useAtom(Oe(a)),[ie,j]=ui.useAtom(We(a)),[J,q]=ui.useAtom(Fe(a)),[ge,Te]=ui.useAtom(Pe(a)),[o,O]=react.useState(ge),[$,W]=react.useState(false),[d,B]=react.useState(null),[L,se]=react.useState(null),[re,Re]=react.useState(null),[Ue,De]=react.useState(null),F=react.useRef(null),ut=ui.useSetAtom(Ne(a)),dt=ui.useSetAtom(Ie(a)),X=hooks.useValueRef(s),l=hooks.useCallbackRef(He),G=hooks.useValueRef(r),b=hooks.useCallbackRef(ke),mt=hooks.useValueRef(M),ht=hooks.useValueRef(!!v),gt=hooks.useValueRef(V),ft=hooks.useValueRef(!!C),D=hooks.useValueRef(ne),_=hooks.useValueRef(P),fe=hooks.useValueRef(Q),pe=hooks.useValueRef(I),be=hooks.useValueRef(ee),we=hooks.useValueRef(te),pt=hooks.useValueRef(o),Ze=hooks.useValueRef(L),Ce=hooks.useValueRef(Ue),bt=hooks.useCallbackRef(Me),wt=hooks.useCallbackRef(ut),xt=hooks.useCallbackRef(dt),xe=react.useMemo(()=>r.width===ze.width&&r.height===ze.height,[r.width,r.height]);react.useEffect(()=>{(s.x<0||s.y<0)&&l({x:Math.max(0,s.x),y:Math.max(0,s.y)});let e=s.x+r.width,w=s.y+r.height;(e>window.innerWidth||w>window.innerHeight)&&l({x:Math.min(s.x,Math.max(0,window.innerWidth-r.width)),y:Math.min(s.y,Math.max(0,window.innerHeight-r.height))});},[a]),react.useEffect(()=>{if(he&&ge){O(true);let e=A=>{l({x:A.clientX-r.width/2,y:A.clientY-20});},w=()=>{O(false),document.removeEventListener("mousemove",e),document.removeEventListener("mouseup",w);};return document.addEventListener("mousemove",e),document.addEventListener("mouseup",w),document.body.style.cursor="grabbing",()=>{document.removeEventListener("mousemove",e),document.removeEventListener("mouseup",w),document.body.style.cursor="";}}},[he,ge,r.width]);let S=(e,w,A)=>{Te(false),O(false),W(false),B(null),w==="drag"?O(true):w==="resize"&&(B(A||null),W(true));let je=e.clientX,Je=e.clientY,x=G.current.width,z=G.current.height,y={...X.current},qe=()=>{document.removeEventListener("mousemove",Ge),document.removeEventListener("mouseup",Ke),document.body.style.cursor="",O(false),W(false),B(null),se(null),F.current&&(clearTimeout(F.current),F.current=null),De(null),Re(null);},Ge=Se=>{if(w==="drag"){let H=Se.clientX-je,k=Se.clientY-Je,c=y.x+H,i=y.y+k,ae=ht.current?mt.current:0,ye=12+ae,g=ft.current?gt.current:0,u=window.innerWidth-12-x-g,Ee=window.innerHeight-12-44,m=c<=ye?"left":c>=u?"right":null;m!==Ze.current&&se(m),F.current&&m&&Re(m),F.current&&(Ce.current==="left"&&(c>ye||m!=="left")||Ce.current==="right"&&(c<u||m!=="right"))&&(clearTimeout(F.current),F.current=null,De(null),Re(null)),!F.current&&m&&Ce.current!==m&&(De(m),Re(m),F.current=setTimeout(()=>{pt.current&&Ze.current===m?(qe(),bt(),xt(G.current.width),wt(m)):De(null);},350)),c=Math.min(Math.max(c,12+ae),u),i=Math.min(Math.max(i,12),Ee),l({x:c,y:i});}else if(w==="resize"&&A){let H=Se.clientX-je,k=Se.clientY-Je,c=(i,ae,ye)=>{let g=Math.min(Math.max(i,fe.current),pe.current),u=Math.min(Math.max(ae,be.current),we.current);if(D.current){if(ye==="width")u=Math.min(Math.max(i/D.current+_.current,be.current),we.current),g=(u-_.current)*D.current;else if(ye==="height")g=Math.min(Math.max((ae-_.current)*D.current,fe.current),pe.current),u=g/D.current+_.current;else {let Ee=i/D.current+_.current,m=(ae-_.current)*D.current,Qe=Math.abs(H),et=Math.abs(k);if(Qe>1.1*et)u=Math.min(Math.max(Ee,be.current),we.current),g=(u-_.current)*D.current;else if(et>1.1*Qe)g=Math.min(Math.max(m,fe.current),pe.current),u=g/D.current+_.current;else {let zt=(u+Ee)/2;g=Math.min(Math.max((g+m)/2,fe.current),pe.current),u=Math.min(Math.max(zt,be.current),we.current),g=(u-_.current)*D.current;}}g=Math.min(Math.max(g,fe.current),pe.current),u=Math.min(Math.max(u,be.current),we.current);}return {width:g,height:u}};switch(A){case "topLeft":{let i=c(x-H,z-k,"both");b(i),l({x:y.x+(x-i.width),y:y.y+(z-i.height)});break}case "topRight":{let i=c(x+H,z-k,"both");b(i),l({x:y.x,y:y.y+(z-i.height)});break}case "bottomLeft":{let i=c(x-H,z+k,"both");b(i),l({x:y.x+(x-i.width),y:y.y});break}case "bottomRight":{b(c(x+H,z+k,"both"));break}case "top":{let i=c(x,z-k,"height");b(i),l({x:y.x,y:y.y+(z-i.height)});break}case "bottom":{b(c(x,z+k,"height"));break}case "left":{let i=c(x-H,z,"width");b(i),l({x:y.x+(x-i.width),y:y.y});break}case "right":{b(c(x+H,z,"width"));break}}}},Ke=()=>{(s.x<0||s.y<0)&&l({x:Math.max(0,s.x),y:Math.max(0,s.y)}),qe();};document.addEventListener("mousemove",Ge),document.addEventListener("mouseup",Ke);},yt=react.useCallback(()=>{p?(b({...ie}),l({...J}),Z(false)):(xe?l({...J}):(j({...r}),q({...s})),b({...Ht}),Z(true));},[p,xe,r,s,ie,J,Z,j,q]),vt=react.useCallback(()=>{xe?(b({...ie}),l({...J})):(p?Z(false):(j({...r}),q({...s})),b({...ze}),l({...kt}));},[xe,p,r,s,ie,J,Z,j,q]);return react.useEffect(()=>{let e=utils.throttle(()=>{(X.current.x<0||X.current.y<0)&&l({x:Math.max(0,X.current.x),y:Math.max(0,X.current.y)});let w=X.current.x+G.current.width,A=X.current.y+G.current.height;(w>window.innerWidth||A>window.innerHeight)&&l({x:Math.min(X.current.x,Math.max(0,window.innerWidth-G.current.width)),y:Math.min(X.current.y,Math.max(0,window.innerHeight-G.current.height))});},100);return window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e);}},[]),he?jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[(o||$)&&reactDom.createPortal(jsxRuntime.jsx("div",{className:ui.clsx("fixed inset-0 z-9999 bg-transparent w-full h-full select-none",o&&(Ue?"cursor-grabbing":"cursor-move"),!o&&{"cursor-ns-resize":d==="top"||d==="bottom","cursor-ew-resize":d==="left"||d==="right","cursor-nwse-resize":d==="topLeft"||d==="bottomRight","cursor-nesw-resize":d==="topRight"||d==="bottomLeft","cursor-auto":d===null})}),document.body),jsxRuntime.jsx("div",{className:ui.clsx("fixed z-50 left-0 top-0",o?"will-change-transform":"will-change-auto",$||o?"transition-none":"transition-transform duration-250 ease-[cubic-bezier(0.16,1,0.3,1)]"),style:{transform:`translate(${Math.round(s.x-(v?M:0))}px, ${Math.round(s.y)}px)`},children:jsxRuntime.jsxs("div",{className:"flex relative z-50",children:[v&&jsxRuntime.jsx("div",{className:ui.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:M,height:p?40:r.height-8},children:v}),jsxRuntime.jsx("div",{className:ui.clsx("z-50 relative bg-content2 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:r.width,height:r.height,transition:$||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:jsxRuntime.jsxs("div",{className:ui.clsx("w-full h-full",re&&"animate-modal-shrink",re==="left"?"origin-left":"origin-right"),style:{contain:"paint"},children:[!p&&jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("div",{className:"absolute top-0 left-0 w-3 h-3 cursor-nw-resize z-20",onMouseDown:e=>S(e,"resize","topLeft")}),jsxRuntime.jsx("div",{className:"absolute top-0 right-0 w-3 h-3 cursor-ne-resize z-20",onMouseDown:e=>S(e,"resize","topRight")}),jsxRuntime.jsx("div",{className:"absolute bottom-0 left-0 w-3 h-3 cursor-sw-resize z-20",onMouseDown:e=>S(e,"resize","bottomLeft")}),jsxRuntime.jsx("div",{className:"absolute bottom-0 right-0 w-3 h-3 cursor-se-resize z-20",onMouseDown:e=>S(e,"resize","bottomRight")}),jsxRuntime.jsx("div",{className:"absolute top-0 left-3 right-3 h-1.5 cursor-n-resize z-20",onMouseDown:e=>S(e,"resize","top")}),jsxRuntime.jsx("div",{className:"absolute bottom-0 left-3 right-3 h-1.5 cursor-s-resize z-20",onMouseDown:e=>S(e,"resize","bottom")}),jsxRuntime.jsx("div",{className:"absolute left-0 top-3 bottom-3 w-1.5 cursor-w-resize z-20",onMouseDown:e=>S(e,"resize","left")}),jsxRuntime.jsx("div",{className:"absolute right-0 top-3 bottom-3 w-1.5 cursor-e-resize z-20",onMouseDown:e=>S(e,"resize","right")})]}),R&&jsxRuntime.jsxs("div",{className:"relative border-b border-border/80 px-3 gap-4 flex items-center justify-between cursor-move select-none",onMouseDown:e=>S(e,"drag"),style:{height:P},children:[jsxRuntime.jsx(ui.StyledTooltip,{placement:"top",closeDelay:0,content:Y("scaffold.draggableModal.snapToEdge"),children:jsxRuntime.jsx(ui.DraggableIcon,{className:"text-neutral absolute left-1/2 -translate-x-1/2 top-0"})}),oe||jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("div",{className:"min-w-0 flex-initial text-sm font-medium truncate cursor-auto",onMouseDown:e=>e.stopPropagation(),children:T}),jsxRuntime.jsxs("div",{className:"flex-none flex items-center justify-end gap-1",onMouseDown:e=>e.stopPropagation(),children:[jsxRuntime.jsx(ui.Button,{size:"sm",variant:"light",radius:"lg",isIconOnly:true,onPress:yt,children:p?jsxRuntime.jsx(ui.RestoreWindowIcon,{width:18,height:18,className:"text-neutral"}):jsxRuntime.jsx(ui.MinimizeIcon,{width:18,height:18,className:"text-neutral"})}),jsxRuntime.jsx(ui.Button,{size:"sm",variant:"light",radius:"lg",isIconOnly:true,onPress:vt,children:xe?jsxRuntime.jsx(ui.UnMaximizeIcon,{width:18,height:18,className:"text-neutral"}):jsxRuntime.jsx(ui.MaximizeIcon,{width:18,height:18,className:"text-neutral"})}),jsxRuntime.jsx(ui.Button,{size:"sm",variant:"light",radius:"lg",isIconOnly:true,onPress:Me,children:jsxRuntime.jsx(ui.XCloseIcon,{width:18,height:18,className:"text-neutral"})})]})]})]}),!p&&jsxRuntime.jsx("div",{className:R?"h-[calc(100%-44px)] overflow-hidden":"h-full overflow-hidden cursor-move",onMouseDown:R?void 0:e=>S(e,"drag"),children:U})]})}),C&&jsxRuntime.jsx("div",{className:ui.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:V,height:p?40:r.height-8},children:C})]})})]}):null});function yn({id:t,title:a,maxWidth:T=440,minWidth:Q=320,position:I,showHeader:ee=true,header:te,headerHeight:v=44,children:M}){let{t:C}=i18n.useTranslation(),[V,ne]=ui.useAtom(Ne(t)),[R,oe]=react.useState(false),[P,U]=react.useState(false),[Y,he]=ui.useAtom(Ie(t)),{onOpen:Me}=_e(t),p=hooks.useValueRef(Y),Z=hooks.useValueRef(T),s=hooks.useValueRef(Q),He=hooks.useValueRef(I),r=hooks.useValueRef(R),ke=hooks.useValueRef(P),ie=hooks.useCallbackRef(he),j=hooks.useCallbackRef(ne),J=hooks.useCallbackRef(Me),q=o=>{o.preventDefault(),o.stopPropagation(),oe(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 O=o.clientX,$=p.current,W=B=>{if(!r.current)return;let L=B.clientX-O,se=He.current==="right"?$-L:$+L,re=Math.min(Math.max(se,s.current),Z.current);ie(re);},d=()=>{oe(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="",window.removeEventListener("mousemove",W),window.removeEventListener("mouseup",d);};document.addEventListener("mousemove",W),document.addEventListener("mouseup",d);},ge=o=>{if(o.target instanceof HTMLElement&&o.target.closest("button"))return;o.preventDefault(),U(true);let O=o.clientX,$=o.clientY,W=()=>{document.removeEventListener("mousemove",d),document.removeEventListener("mouseup",B),U(false);},d=L=>{if(!ke.current)return;let se=Math.abs(L.clientX-O),re=Math.abs(L.clientY-$);(se>10||re>10)&&(W(),j("none"),J({shouldStartDragging:true,position:{x:L.clientX-p.current/2+20,y:L.clientY-20},size:{width:p.current}}));},B=()=>{W();};document.addEventListener("mousemove",d),document.addEventListener("mouseup",B);},Te=()=>{j("none");};return V!==I?null:jsxRuntime.jsxs("div",{className:"flex-none flex flex-row overflow-hidden",children:[I==="right"&&jsxRuntime.jsx(ct,{isResizing:R,handleResizeStart:q}),jsxRuntime.jsxs("div",{className:ui.clsx("flex flex-col min-h-0 overflow-hidden bg-content2",P?"opacity-80 scale-98 blur-[1px]":"opacity-100 scale-100 blur-none"),style:{width:`${Y}px`,transition:R||P?"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:[ee&&jsxRuntime.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:ge,style:{height:v},children:[jsxRuntime.jsx(ui.StyledTooltip,{placement:"top",closeDelay:0,content:C("scaffold.draggablePanel.snapToModal"),children:jsxRuntime.jsx(ui.DraggableIcon,{className:"text-neutral absolute left-1/2 -translate-x-1/2 top-0"})}),te||jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("div",{className:"min-w-0 flex-initial text-sm font-medium truncate cursor-auto",onMouseDown:o=>o.stopPropagation(),children:a}),jsxRuntime.jsx("div",{className:"flex-none flex items-center justify-end gap-1",onMouseDown:o=>o.stopPropagation(),children:jsxRuntime.jsx(ui.Button,{size:"sm",variant:"light",radius:"lg",isIconOnly:true,onPress:Te,children:jsxRuntime.jsx(ui.XCloseIcon,{width:18,height:18,className:"text-neutral"})})})]})]}),jsxRuntime.jsx("div",{className:"flex-auto min-h-0",children:M})]}),I==="left"&&jsxRuntime.jsx(ct,{isResizing:R,handleResizeStart:q})]})}function ct({isResizing:t,handleResizeStart:a}){return jsxRuntime.jsxs("div",{className:"relative",children:[jsxRuntime.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:[jsxRuntime.jsx("i",{className:"rounded-full w-0.5 h-0.5 bg-neutral"}),jsxRuntime.jsx("i",{className:"rounded-full w-0.5 h-0.5 bg-neutral"}),jsxRuntime.jsx("i",{className:"rounded-full w-0.5 h-0.5 bg-neutral"}),jsxRuntime.jsx("div",{className:"absolute inset-0 -left-1.5 -right-1.5 cursor-ew-resize",onMouseDown:a})]}),t&&jsxRuntime.jsx("div",{className:"fixed inset-0 z-50 cursor-ew-resize"})]})}typeof window<"u"&&(window.__LIBERFI_VERSION__=window.__LIBERFI_VERSION__||{},window.__LIBERFI_VERSION__["@liberfi.io/ui-scaffold"]="0.1.0");var Ut="0.1.0";exports.DraggableModal=un;exports.DraggablePanel=yn;exports.useDraggableModalDisclosure=_e;exports.version=Ut;//# sourceMappingURL=index.js.map
+'use strict';var react=require('react'),reactDom=require('react-dom'),hooks=require('@liberfi.io/hooks'),i18n=require('@liberfi.io/i18n'),ui=require('@liberfi.io/ui'),utils=require('@liberfi.io/utils'),jsxRuntime=require('react/jsx-runtime');var se=ui.atomFamily(e=>ui.atomWithStorage(`panelState.${e??"default"}`,"none",void 0,{getOnInit:true})),Le=ui.atomFamily(e=>ui.atomWithStorage(`panelWidth.${e??"default"}`,596,void 0,{getOnInit:true})),Ce=ui.atomFamily(e=>ui.atomWithStorage(`panelMinWidth.${e??"default"}`,320,void 0,{getOnInit:true})),Te=ui.atomFamily(e=>ui.atomWithStorage(`panelMaxWidth.${e??"default"}`,440,void 0,{getOnInit:true})),pt=ui.atomFamily(e=>ui.atomWithStorage(`modalOpen.${e??"default"}`,false,void 0,{getOnInit:true})),He=ui.atomFamily(e=>ui.atomWithStorage(`modalShouldStartDragging.${e??"default"}`,false,void 0,{getOnInit:true})),ke=ui.atomFamily(e=>ui.atomWithStorage(`modalSize.${e??"default"}`,{width:596,height:312},void 0,{getOnInit:true})),Xe=ui.atomFamily(e=>ui.atomWithStorage(`modalRestoreSize.${e??"default"}`,{width:596,height:312},void 0,{getOnInit:true})),_e=ui.atomFamily(e=>ui.atomWithStorage(`modalPosition.${e??"default"}`,{x:Math.max(0,(window.innerWidth-596)/2),y:Math.max(0,(window.innerHeight-312)/2)},void 0,{getOnInit:true})),$e=ui.atomFamily(e=>ui.atomWithStorage(`modalRestorePosition.${e??"default"}`,{x:Math.max(0,(window.innerWidth-596)/2),y:Math.max(0,(window.innerHeight-312)/2)},void 0,{getOnInit:true})),Ae=ui.atomFamily(e=>ui.atomWithStorage(`modalMinimized.${e??"default"}`,false,void 0,{getOnInit:true})),Ye=ui.atomFamily(e=>ui.atomWithStorage(`modalMinWidth.${e??"default"}`,200,void 0,{getOnInit:true})),Be=ui.atomFamily(e=>ui.atomWithStorage(`modalMaxWidth.${e??"default"}`,window.innerWidth-40,void 0,{getOnInit:true})),he=ui.atomFamily(e=>ui.atomWithStorage(`lastPanelType.${e??"default"}`,"modal",void 0,{getOnInit:true})),Ve=ui.atomWithStorage("panelOrders",{left:{},right:{}},void 0,{getOnInit:true});function ge(e){let[o,l]=ui.useAtom(pt(e)),[x,r]=ui.useAtom(Ae(e)),z=ui.useAtomValue(Xe(e)),w=ui.useAtomValue($e(e)),t=ui.useSetAtom(ke(e)),i=ui.useSetAtom(_e(e)),R=ui.useSetAtom(He(e)),O=ui.useSetAtom(he(e)),D=react.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=react.useCallback(()=>{l(false),x&&(t({...z}),i({...w}),r(false));},[x,z,w,r,l,t,i]);return react.useMemo(()=>({isOpen:o,onOpen:D,onClose:S}),[o,D,S])}function fe(e){let[o,l]=ui.useAtom(se(e)),x=ui.useSetAtom(Le(e)),r=ui.useSetAtom(he(e)),z=ui.useSetAtom(Ve),w=react.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=react.useCallback(()=>{l("none");},[l]),i=react.useMemo(()=>o!=="none",[o]),R=react.useMemo(()=>o!=="none"?o:void 0,[o]);return react.useMemo(()=>({isOpen:i,position:R,onOpen:w,onClose:t}),[i,w,t])}var sn={width:200,height:48},Ne={width:window.innerWidth-40,height:window.innerHeight-40},an={x:20,y:20},zt=react.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}=i18n.useTranslation(),{isOpen:_,onClose:Ie}=ge(o),{onOpen:Je}=fe(o),[C,$]=ui.useAtom(Ae(o)),[d,qe]=ui.useAtom(_e(o)),[u,Ge]=ui.useAtom(ke(o)),[de,ue]=ui.useAtom(Xe(o)),[ee,te]=ui.useAtom($e(o)),[Me,ve]=ui.useAtom(He(o)),[W,ne]=react.useState(Me),[ze,c]=react.useState(false),[P,Z]=react.useState(null),[oe,j]=react.useState(null),[ie,N]=react.useState(null),[ce,J]=react.useState(null),A=react.useRef(null),Nt=ui.useAtomValue(Ce(o)),It=ui.useAtomValue(Te(o)),Y=hooks.useValueRef(d),h=hooks.useCallbackRef(qe),re=hooks.useValueRef(u),I=hooks.useCallbackRef(Ge),Et=hooks.useValueRef(i),Ft=hooks.useValueRef(!!t),Lt=hooks.useValueRef(O),Ct=hooks.useValueRef(!!R),k=hooks.useValueRef(D),B=hooks.useValueRef(K),Re=hooks.useValueRef(x),De=hooks.useValueRef(r),We=hooks.useValueRef(z),Pe=hooks.useValueRef(w),Tt=hooks.useValueRef(W),lt=hooks.useValueRef(oe),Ke=hooks.useValueRef(ce),Ht=hooks.useCallbackRef(Ie),kt=hooks.useCallbackRef(Je),Xt=hooks.useValueRef(Nt),_t=hooks.useValueRef(It),Oe=react.useMemo(()=>u.width===Ne.width&&u.height===Ne.height,[u.width,u.height]);react.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]),react.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=react.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=react.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 react.useEffect(()=>{let n=utils.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);}},[]),_?jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[(W||ze)&&reactDom.createPortal(jsxRuntime.jsx("div",{className:ui.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),jsxRuntime.jsx("div",{className:ui.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:jsxRuntime.jsxs("div",{className:"flex relative z-50",children:[t&&jsxRuntime.jsx("div",{className:ui.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}),jsxRuntime.jsx("div",{className:ui.clsx("z-50 relative bg-content2 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:jsxRuntime.jsxs("div",{className:ui.clsx("w-full h-full",ie&&"animate-modal-shrink",ie==="left"?"origin-left":"origin-right"),style:{contain:"paint"},children:[!C&&jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("div",{className:"absolute top-0 left-0 w-3 h-3 cursor-nw-resize z-20",onMouseDown:n=>X(n,"resize","topLeft")}),jsxRuntime.jsx("div",{className:"absolute top-0 right-0 w-3 h-3 cursor-ne-resize z-20",onMouseDown:n=>X(n,"resize","topRight")}),jsxRuntime.jsx("div",{className:"absolute bottom-0 left-0 w-3 h-3 cursor-sw-resize z-20",onMouseDown:n=>X(n,"resize","bottomLeft")}),jsxRuntime.jsx("div",{className:"absolute bottom-0 right-0 w-3 h-3 cursor-se-resize z-20",onMouseDown:n=>X(n,"resize","bottomRight")}),jsxRuntime.jsx("div",{className:"absolute top-0 left-3 right-3 h-1.5 cursor-n-resize z-20",onMouseDown:n=>X(n,"resize","top")}),jsxRuntime.jsx("div",{className:"absolute bottom-0 left-3 right-3 h-1.5 cursor-s-resize z-20",onMouseDown:n=>X(n,"resize","bottom")}),jsxRuntime.jsx("div",{className:"absolute left-0 top-3 bottom-3 w-1.5 cursor-w-resize z-20",onMouseDown:n=>X(n,"resize","left")}),jsxRuntime.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&&jsxRuntime.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:[jsxRuntime.jsx(ui.StyledTooltip,{placement:"top",closeDelay:0,content:le("scaffold.draggableModal.snapToEdge"),children:jsxRuntime.jsx(ui.DraggableIcon,{className:"text-neutral absolute left-1/2 -translate-x-1/2 top-0"})}),H||jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("div",{className:"min-w-0 flex-initial text-sm font-medium truncate cursor-auto",onMouseDown:n=>n.stopPropagation(),children:l}),jsxRuntime.jsxs("div",{className:"flex-none flex items-center justify-end gap-1",onMouseDown:n=>n.stopPropagation(),children:[jsxRuntime.jsx(ui.Button,{size:"sm",variant:"light",radius:"lg",isIconOnly:true,onPress:$t,children:C?jsxRuntime.jsx(ui.RestoreWindowIcon,{width:18,height:18,className:"text-neutral"}):jsxRuntime.jsx(ui.MinimizeIcon,{width:18,height:18,className:"text-neutral"})}),jsxRuntime.jsx(ui.Button,{size:"sm",variant:"light",radius:"lg",isIconOnly:true,onPress:At,children:Oe?jsxRuntime.jsx(ui.UnMaximizeIcon,{width:18,height:18,className:"text-neutral"}):jsxRuntime.jsx(ui.MaximizeIcon,{width:18,height:18,className:"text-neutral"})}),jsxRuntime.jsx(ui.Button,{size:"sm",variant:"light",radius:"lg",isIconOnly:true,onPress:Ie,children:jsxRuntime.jsx(ui.XCloseIcon,{width:18,height:18,className:"text-neutral"})})]})]})]}),!C&&jsxRuntime.jsx("div",{className:S?"h-[calc(100%-44px)] overflow-hidden":"h-full overflow-hidden cursor-move",onMouseDown:S?void 0:n=>X(n,"drag"),children:Q})]})}),R&&jsxRuntime.jsx("div",{className:ui.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}=i18n.useTranslation(),O=ui.useAtomValue(se(e)),[D,S]=react.useState(false),[H,K]=react.useState(false),[Q,le]=ui.useAtom(Le(e)),{onOpen:_}=ge(e),{onClose:Ie}=fe(e),Je=ui.useAtomValue(Ye(e)),C=ui.useAtomValue(Be(e)),$=hooks.useValueRef(Q),d=hooks.useValueRef(l),qe=hooks.useValueRef(x),u=hooks.useValueRef(r),Ge=hooks.useValueRef(D),de=hooks.useValueRef(H),ue=hooks.useCallbackRef(le),ee=hooks.useCallbackRef(_),te=hooks.useCallbackRef(Ie),Me=hooks.useValueRef(Je),ve=hooks.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="",window.removeEventListener("mousemove",oe),window.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:jsxRuntime.jsxs("div",{className:"max-lg:hidden flex-none flex flex-row overflow-hidden",children:[r==="right"&&jsxRuntime.jsx(Dt,{isResizing:D,handleResizeStart:W}),jsxRuntime.jsxs("div",{className:ui.clsx("flex flex-col min-h-0 overflow-hidden bg-content2",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&&jsxRuntime.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:[jsxRuntime.jsx(ui.StyledTooltip,{placement:"top",closeDelay:0,content:R("scaffold.draggablePanel.snapToModal"),children:jsxRuntime.jsx(ui.DraggableIcon,{className:"text-neutral absolute left-1/2 -translate-x-1/2 top-0"})}),w||jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("div",{className:"min-w-0 flex-initial text-sm font-medium truncate cursor-auto",onMouseDown:c=>c.stopPropagation(),children:o}),jsxRuntime.jsx("div",{className:"flex-none flex items-center justify-end gap-1",onMouseDown:c=>c.stopPropagation(),children:jsxRuntime.jsx(ui.Button,{size:"sm",variant:"light",radius:"lg",isIconOnly:true,onPress:ze,children:jsxRuntime.jsx(ui.XCloseIcon,{width:18,height:18,className:"text-neutral"})})})]})]}),jsxRuntime.jsx("div",{className:"flex-auto min-h-0",children:i})]}),r==="left"&&jsxRuntime.jsx(Dt,{isResizing:D,handleResizeStart:W})]})}function Dt({isResizing:e,handleResizeStart:o}){return jsxRuntime.jsxs("div",{className:"relative",children:[jsxRuntime.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:[jsxRuntime.jsx("i",{className:"rounded-full w-0.5 h-0.5 bg-neutral"}),jsxRuntime.jsx("i",{className:"rounded-full w-0.5 h-0.5 bg-neutral"}),jsxRuntime.jsx("i",{className:"rounded-full w-0.5 h-0.5 bg-neutral"}),jsxRuntime.jsx("div",{className:"absolute inset-0 -left-1.5 -right-1.5 cursor-ew-resize",onMouseDown:o})]}),e&&jsxRuntime.jsx("div",{className:"fixed inset-0 z-50 cursor-ew-resize"})]})}function ro({contents:e=[],className:o,classNames:l,children:x}){let r=ui.useAtomValue(Ve);react.useEffect(()=>{let t=ui.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=react.useMemo(()=>e.filter(t=>{let i=ui.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=react.useMemo(()=>e.filter(t=>{let i=ui.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 jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsxs("div",{className:ui.clsx("w-full h-full flex flex-row overflow-hidden",o,l?.root),children:[jsxRuntime.jsx("div",{className:ui.clsx("flex-none h-full flex flex-row",l?.left),children:z.map(t=>jsxRuntime.jsx(st,{...t,position:"left",minWidth:t.panelMinWidth??320,maxWidth:t.panelMaxWidth??440},`left-${t.id}`))}),jsxRuntime.jsx("div",{className:ui.clsx("flex-auto min-w-0 h-full",l?.content),children:x}),jsxRuntime.jsx("div",{className:ui.clsx("flex-none h-full flex flex-row",l?.right),children:w.map(t=>jsxRuntime.jsx(st,{...t,position:"right",minWidth:t.panelMinWidth??320,maxWidth:t.panelMaxWidth??440},`right-${t.id}`))})]}),e.map(t=>jsxRuntime.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=ui.useAtomValue(he(e)),i=react.useCallback(()=>{o||r||(t==="modal"?l():z({position:t}));},[o,r,t,l,z]),R=react.useCallback(()=>{o?x():r&&w();},[o,r,x,w]),O=react.useMemo(()=>o||r,[o,r]);return react.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";exports.DraggableModal=zt;exports.DraggablePanel=st;exports.DraggablePanelProvider=ro;exports.useDraggableDisclosure=go;exports.useDraggableModalDisclosure=ge;exports.useDraggablePanelDisclosure=fe;exports.version=yn;//# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map