@liberfi.io/ui-scaffold 0.1.7 → 0.1.8

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { PropsWithChildren } from 'react';
+import { PropsWithChildren, ReactNode } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 type DraggableModalProps = PropsWithChildren<{
@@ -145,6 +145,101 @@ type UseDraggablePanelDisclosureReturnType = {
 };
 declare function useDraggablePanelDisclosure(id: string): UseDraggablePanelDisclosureReturnType;
 
+type HeaderProps = PropsWithChildren<{
+    className?: string;
+}>;
+declare function Header({ children, className }: HeaderProps): react_jsx_runtime.JSX.Element;
+
+type MobileHeaderProps = PropsWithChildren<{
+    className?: string;
+}>;
+declare function MobileHeader({ children, className }: MobileHeaderProps): react_jsx_runtime.JSX.Element;
+
+type FooterProps = PropsWithChildren<{
+    className?: string;
+}>;
+declare function Footer({ children, className }: FooterProps): react_jsx_runtime.JSX.Element;
+
+type PageProps = PropsWithChildren<{
+    className?: string;
+}>;
+declare function Page({ children, className }: PageProps): react_jsx_runtime.JSX.Element;
+
+type PageContentProps = PropsWithChildren<{
+    className?: string;
+}>;
+declare function PageContent({ className, children }: PageContentProps): react_jsx_runtime.JSX.Element;
+
+type LogoProps = {
+    /** icon for desktop */
+    icon: React.ReactNode;
+    /** icon for mobile & desktop */
+    miniIcon?: React.ReactNode;
+    /** url when clicking the logo image */
+    href?: string;
+    /** custom styles */
+    className?: string;
+};
+declare function Logo({ href, icon, miniIcon, className }: LogoProps): react_jsx_runtime.JSX.Element;
+
+type HeaderNavigationProps = PropsWithChildren<{
+    href: string;
+    title: string;
+    active?: boolean;
+    className?: string;
+}>;
+declare function HeaderNavigation({ href, title, active, className, }: HeaderNavigationProps): react_jsx_runtime.JSX.Element;
+
+type HorizontalScrollContainerProps = PropsWithChildren<{
+    /** the amount of pixels to scroll when the user clicks the arrow buttons. */
+    scrollAmount?: number;
+    /** custom styles */
+    className?: string;
+    classNames?: {
+        root?: string;
+        content?: string;
+        leftArrow?: string;
+        leftArrowButton?: string;
+        leftArrowIcon?: string;
+        rightArrow?: string;
+        rightArrowButton?: string;
+        rightArrowIcon?: string;
+    };
+}>;
+declare function HorizontalScrollContainer({ scrollAmount, className, classNames, children, }: HorizontalScrollContainerProps): react_jsx_runtime.JSX.Element;
+
+type RenderAsyncModalProps<P = any, R = any> = {
+    /** custom parameters for the modal */
+    params?: P;
+    /** whether the modal is open */
+    isOpen: boolean;
+    /** close the modal */
+    onClose: () => void;
+    /** change the open state of the modal */
+    onOpenChange: (isOpen: boolean) => void;
+    /** callback when the modal is closed with the result */
+    onResult?: (result: R) => void;
+};
+type AsyncModalProps<P = any, R = any> = {
+    /** unique identifier for the modal */
+    id: string;
+    /** render the modal content */
+    children: (props: RenderAsyncModalProps<P, R>) => ReactNode;
+};
+type OpenAsyncModalOptions<P = any, R = any> = {
+    /** custom parameters for the modal */
+    params?: P;
+    /** callback when the modal is closed with the result */
+    onResult?: (result: R) => void;
+};
+declare function AsyncModal<P = any, R = any>({ id, children, }: AsyncModalProps<P, R>): ReactNode;
+
+type UseAsyncModalReturnType<P = any, R = any> = {
+    onOpen: (options?: OpenAsyncModalOptions<P, R>) => void;
+    onClose: () => void;
+};
+declare function useAsyncModal<P = any, R = any>(id: string): UseAsyncModalReturnType<P, R>;
+
 declare global {
     interface Window {
         __LIBERFI_VERSION__?: {
@@ -152,6 +247,6 @@ declare global {
         };
     }
 }
-declare const _default: "0.1.0";
+declare const _default: "0.1.8";
 
-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 };
+export { AsyncModal, type AsyncModalProps, type DraggableContentProps, DraggableModal, type DraggableModalProps, DraggablePanel, type DraggablePanelProps, DraggablePanelProvider, type DraggablePanelProviderProps, Footer, type FooterProps, Header, HeaderNavigation, type HeaderNavigationProps, type HeaderProps, HorizontalScrollContainer, type HorizontalScrollContainerProps, Logo, type LogoProps, MobileHeader, type MobileHeaderProps, type OpenAsyncModalOptions, type OpenDraggableModalOptions, type OpenDraggablePanelOptions, Page, PageContent, type PageContentProps, type PageProps, type RenderAsyncModalProps, type UseAsyncModalReturnType, type UseDraggableDisclosureReturnType, type UseDraggableModalDisclosureReturnType, type UseDraggablePanelDisclosureReturnType, useAsyncModal, useDraggableDisclosure, useDraggableModalDisclosure, useDraggablePanelDisclosure, _default as version };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { PropsWithChildren } from 'react';
+import { PropsWithChildren, ReactNode } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 type DraggableModalProps = PropsWithChildren<{
@@ -145,6 +145,101 @@ type UseDraggablePanelDisclosureReturnType = {
 };
 declare function useDraggablePanelDisclosure(id: string): UseDraggablePanelDisclosureReturnType;
 
+type HeaderProps = PropsWithChildren<{
+    className?: string;
+}>;
+declare function Header({ children, className }: HeaderProps): react_jsx_runtime.JSX.Element;
+
+type MobileHeaderProps = PropsWithChildren<{
+    className?: string;
+}>;
+declare function MobileHeader({ children, className }: MobileHeaderProps): react_jsx_runtime.JSX.Element;
+
+type FooterProps = PropsWithChildren<{
+    className?: string;
+}>;
+declare function Footer({ children, className }: FooterProps): react_jsx_runtime.JSX.Element;
+
+type PageProps = PropsWithChildren<{
+    className?: string;
+}>;
+declare function Page({ children, className }: PageProps): react_jsx_runtime.JSX.Element;
+
+type PageContentProps = PropsWithChildren<{
+    className?: string;
+}>;
+declare function PageContent({ className, children }: PageContentProps): react_jsx_runtime.JSX.Element;
+
+type LogoProps = {
+    /** icon for desktop */
+    icon: React.ReactNode;
+    /** icon for mobile & desktop */
+    miniIcon?: React.ReactNode;
+    /** url when clicking the logo image */
+    href?: string;
+    /** custom styles */
+    className?: string;
+};
+declare function Logo({ href, icon, miniIcon, className }: LogoProps): react_jsx_runtime.JSX.Element;
+
+type HeaderNavigationProps = PropsWithChildren<{
+    href: string;
+    title: string;
+    active?: boolean;
+    className?: string;
+}>;
+declare function HeaderNavigation({ href, title, active, className, }: HeaderNavigationProps): react_jsx_runtime.JSX.Element;
+
+type HorizontalScrollContainerProps = PropsWithChildren<{
+    /** the amount of pixels to scroll when the user clicks the arrow buttons. */
+    scrollAmount?: number;
+    /** custom styles */
+    className?: string;
+    classNames?: {
+        root?: string;
+        content?: string;
+        leftArrow?: string;
+        leftArrowButton?: string;
+        leftArrowIcon?: string;
+        rightArrow?: string;
+        rightArrowButton?: string;
+        rightArrowIcon?: string;
+    };
+}>;
+declare function HorizontalScrollContainer({ scrollAmount, className, classNames, children, }: HorizontalScrollContainerProps): react_jsx_runtime.JSX.Element;
+
+type RenderAsyncModalProps<P = any, R = any> = {
+    /** custom parameters for the modal */
+    params?: P;
+    /** whether the modal is open */
+    isOpen: boolean;
+    /** close the modal */
+    onClose: () => void;
+    /** change the open state of the modal */
+    onOpenChange: (isOpen: boolean) => void;
+    /** callback when the modal is closed with the result */
+    onResult?: (result: R) => void;
+};
+type AsyncModalProps<P = any, R = any> = {
+    /** unique identifier for the modal */
+    id: string;
+    /** render the modal content */
+    children: (props: RenderAsyncModalProps<P, R>) => ReactNode;
+};
+type OpenAsyncModalOptions<P = any, R = any> = {
+    /** custom parameters for the modal */
+    params?: P;
+    /** callback when the modal is closed with the result */
+    onResult?: (result: R) => void;
+};
+declare function AsyncModal<P = any, R = any>({ id, children, }: AsyncModalProps<P, R>): ReactNode;
+
+type UseAsyncModalReturnType<P = any, R = any> = {
+    onOpen: (options?: OpenAsyncModalOptions<P, R>) => void;
+    onClose: () => void;
+};
+declare function useAsyncModal<P = any, R = any>(id: string): UseAsyncModalReturnType<P, R>;
+
 declare global {
     interface Window {
         __LIBERFI_VERSION__?: {
@@ -152,6 +247,6 @@ declare global {
         };
     }
 }
-declare const _default: "0.1.0";
+declare const _default: "0.1.8";
 
-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 };
+export { AsyncModal, type AsyncModalProps, type DraggableContentProps, DraggableModal, type DraggableModalProps, DraggablePanel, type DraggablePanelProps, DraggablePanelProvider, type DraggablePanelProviderProps, Footer, type FooterProps, Header, HeaderNavigation, type HeaderNavigationProps, type HeaderProps, HorizontalScrollContainer, type HorizontalScrollContainerProps, Logo, type LogoProps, MobileHeader, type MobileHeaderProps, type OpenAsyncModalOptions, type OpenDraggableModalOptions, type OpenDraggablePanelOptions, Page, PageContent, type PageContentProps, type PageProps, type RenderAsyncModalProps, type UseAsyncModalReturnType, type UseDraggableDisclosureReturnType, type UseDraggableModalDisclosureReturnType, type UseDraggablePanelDisclosureReturnType, useAsyncModal, 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 se=ui.atomFamily(e=>ui.atomWithStorage(`panelState.${e??"default"}`,"none",void 0,{getOnInit:true})),Le=ui.atomFamily(e=>ui.atomWithStorage(`panelWidth.${e??"default"}`,350,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:350,height:580},void 0,{getOnInit:true})),Xe=ui.atomFamily(e=>ui.atomWithStorage(`modalRestoreSize.${e??"default"}`,{width:350,height:580},void 0,{getOnInit:true})),_e=ui.atomFamily(e=>ui.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=ui.atomFamily(e=>ui.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=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"}`,typeof window<"u"?window.innerWidth-40:0,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:typeof window<"u"?window.innerWidth-40:0,height:typeof window<"u"?window.innerHeight-40:0},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-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: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-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&&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="",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: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-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&&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 overflow-y-auto",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
+'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})),Fe=ui.atomFamily(e=>ui.atomWithStorage(`panelWidth.${e??"default"}`,350,void 0,{getOnInit:true})),He=ui.atomFamily(e=>ui.atomWithStorage(`panelMinWidth.${e??"default"}`,320,void 0,{getOnInit:true})),ke=ui.atomFamily(e=>ui.atomWithStorage(`panelMaxWidth.${e??"default"}`,440,void 0,{getOnInit:true})),yt=ui.atomFamily(e=>ui.atomWithStorage(`modalOpen.${e??"default"}`,false,void 0,{getOnInit:true})),Te=ui.atomFamily(e=>ui.atomWithStorage(`modalShouldStartDragging.${e??"default"}`,false,void 0,{getOnInit:true})),_e=ui.atomFamily(e=>ui.atomWithStorage(`modalSize.${e??"default"}`,{width:350,height:580},void 0,{getOnInit:true})),$e=ui.atomFamily(e=>ui.atomWithStorage(`modalRestoreSize.${e??"default"}`,{width:350,height:580},void 0,{getOnInit:true})),Xe=ui.atomFamily(e=>ui.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})),Be=ui.atomFamily(e=>ui.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})),Ue=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})),Ve=ui.atomFamily(e=>ui.atomWithStorage(`modalMaxWidth.${e??"default"}`,typeof window<"u"?window.innerWidth-40:0,void 0,{getOnInit:true})),fe=ui.atomFamily(e=>ui.atomWithStorage(`lastPanelType.${e??"default"}`,"modal",void 0,{getOnInit:true})),je=ui.atomWithStorage("panelOrders",{left:{},right:{}},void 0,{getOnInit:true});function pe(e){let[t,n]=ui.useAtom(yt(e)),[l,i]=ui.useAtom(Ue(e)),f=ui.useAtomValue($e(e)),m=ui.useAtomValue(Be(e)),o=ui.useSetAtom(_e(e)),r=ui.useSetAtom(Xe(e)),a=ui.useSetAtom(Te(e)),d=ui.useSetAtom(fe(e)),c=react.useCallback((z={})=>{let{shouldStartDragging:K,position:Q,size:de}=z;Q&&r(_=>({..._,...Q})),de&&o(_=>({..._,...de})),a(K??false),n(true),d("modal");},[n,r,o,a]),b=react.useCallback(()=>{n(false),l&&(o({...f}),r({...m}),i(false));},[l,f,m,i,n,o,r]);return react.useMemo(()=>({isOpen:t,onOpen:c,onClose:b}),[t,c,b])}function ge(e){let[t,n]=ui.useAtom(se(e)),l=ui.useSetAtom(Fe(e)),i=ui.useSetAtom(fe(e)),f=ui.useSetAtom(je),m=react.useCallback((d={})=>{let c=d.position??"left";l(d.width??320),n(c),i(c),f(({left:b,right:z})=>c==="left"?{left:{...b,[e]:Date.now()},right:z}:{left:b,right:{...z,[e]:Date.now()}});},[e,n,l]),o=react.useCallback(()=>{n("none");},[n]),r=react.useMemo(()=>t!=="none",[t]),a=react.useMemo(()=>t!=="none"?t:void 0,[t]);return react.useMemo(()=>({isOpen:r,position:a,onOpen:m,onClose:o}),[r,m,o])}var xo={width:200,height:48},Ie={width:typeof window<"u"?window.innerWidth-40:0,height:typeof window<"u"?window.innerHeight-40:0},yo={x:20,y:20},Dt=react.memo(function({id:t,title:n,minWidth:l=504,maxWidth:i=Ie.width,minHeight:f=200,maxHeight:m=Ie.height,leftSidebar:o,leftSidebarWidth:r=200,rightSidebar:a,rightSidebarWidth:d=200,aspectRatio:c,showHeader:b=true,header:z,headerHeight:K=44,children:Q}){let{t:de}=i18n.useTranslation(),{isOpen:_,onClose:Ce}=pe(t),{onOpen:Ke}=ge(t),[F,$]=ui.useAtom(Ue(t)),[p,Qe]=ui.useAtom(Xe(t)),[g,et]=ui.useAtom(_e(t)),[ce,ue]=ui.useAtom($e(t)),[ee,te]=ui.useAtom(Be(t)),[Re,Pe]=ui.useAtom(Te(t)),[S,oe]=react.useState(Re),[ze,x]=react.useState(false),[N,j]=react.useState(null),[ne,Z]=react.useState(null),[re,E]=react.useState(null),[me,J]=react.useState(null),X=react.useRef(null),Xt=ui.useAtomValue(He(t)),Bt=ui.useAtomValue(ke(t)),B=hooks.useValueRef(p),w=hooks.useCallbackRef(Qe),ie=hooks.useValueRef(g),I=hooks.useCallbackRef(et),Ut=hooks.useValueRef(r),Yt=hooks.useValueRef(!!o),Vt=hooks.useValueRef(d),jt=hooks.useValueRef(!!a),k=hooks.useValueRef(c),U=hooks.useValueRef(K),De=hooks.useValueRef(l),Oe=hooks.useValueRef(i),We=hooks.useValueRef(f),Se=hooks.useValueRef(m),Zt=hooks.useValueRef(S),ut=hooks.useValueRef(ne),tt=hooks.useValueRef(me),Jt=hooks.useCallbackRef(Ce),qt=hooks.useCallbackRef(Ke),Gt=hooks.useValueRef(Xt),Kt=hooks.useValueRef(Bt),Ne=react.useMemo(()=>g.width===Ie.width&&g.height===Ie.height,[g.width,g.height]);react.useEffect(()=>{(p.x<0||p.y<0)&&w({x:Math.max(0,p.x),y:Math.max(0,p.y)});let s=p.x+g.width,C=p.y+g.height;(s>window.innerWidth||C>window.innerHeight)&&w({x:Math.min(p.x,Math.max(0,window.innerWidth-g.width)),y:Math.min(p.y,Math.max(0,window.innerHeight-g.height))});},[t]),react.useEffect(()=>{if(_&&Re){oe(true);let s=q=>{w({x:q.clientX-g.width/2,y:q.clientY-20});},C=()=>{oe(false),Pe(false),document.removeEventListener("mousemove",s),document.removeEventListener("mouseup",C);};return document.addEventListener("mousemove",s),document.addEventListener("mouseup",C),document.body.style.cursor="grabbing",()=>{document.removeEventListener("mousemove",s),document.removeEventListener("mouseup",C),document.body.style.cursor="";}}},[_,Re,Pe,g.width]);let T=(s,C,q)=>{Pe(false),oe(false),x(false),j(null),C==="drag"?oe(true):C==="resize"&&(j(q||null),x(true));let mt=s.clientX,ht=s.clientY,L=ie.current.width,H=ie.current.height,A={...B.current},ft=()=>{document.removeEventListener("mousemove",pt),document.removeEventListener("mouseup",gt),document.body.style.cursor="",oe(false),x(false),j(null),Z(null),X.current&&(clearTimeout(X.current),X.current=null),J(null),E(null);},pt=Le=>{if(C==="drag"){let Y=Le.clientX-mt,V=Le.clientY-ht,v=A.x+Y,h=A.y+V,he=Yt.current?Ut.current:0,Ee=12+he,D=jt.current?Vt.current:0,M=window.innerWidth-12-L-D,Ae=window.innerHeight-12-44,R=v<=Ee?"left":v>=M?"right":null;R!==ut.current&&Z(R),X.current&&R&&E(R),X.current&&(tt.current==="left"&&(v>Ee||R!=="left")||tt.current==="right"&&(v<M||R!=="right"))&&(clearTimeout(X.current),X.current=null,J(null),E(null)),!X.current&&R&&tt.current!==R&&(J(R),E(R),X.current=setTimeout(()=>{Zt.current&&ut.current===R?(ft(),Jt(),qt({position:R,width:Math.min(Math.max(ie.current.width,Gt.current),Kt.current)})):J(null);},350)),v=Math.min(Math.max(v,12+he),M),h=Math.min(Math.max(h,12),Ae),w({x:v,y:h});}else if(C==="resize"&&q){let Y=Le.clientX-mt,V=Le.clientY-ht,v=(h,he,Ee)=>{let D=Math.min(Math.max(h,De.current),Oe.current),M=Math.min(Math.max(he,We.current),Se.current);if(k.current){if(Ee==="width")M=Math.min(Math.max(h/k.current+U.current,We.current),Se.current),D=(M-U.current)*k.current;else if(Ee==="height")D=Math.min(Math.max((he-U.current)*k.current,De.current),Oe.current),M=D/k.current+U.current;else {let Ae=h/k.current+U.current,R=(he-U.current)*k.current,bt=Math.abs(Y),xt=Math.abs(V);if(bt>1.1*xt)M=Math.min(Math.max(Ae,We.current),Se.current),D=(M-U.current)*k.current;else if(xt>1.1*bt)D=Math.min(Math.max(R,De.current),Oe.current),M=D/k.current+U.current;else {let to=(M+Ae)/2;D=Math.min(Math.max((D+R)/2,De.current),Oe.current),M=Math.min(Math.max(to,We.current),Se.current),D=(M-U.current)*k.current;}}D=Math.min(Math.max(D,De.current),Oe.current),M=Math.min(Math.max(M,We.current),Se.current);}return {width:D,height:M}};switch(q){case "topLeft":{let h=v(L-Y,H-V,"both");I(h),w({x:A.x+(L-h.width),y:A.y+(H-h.height)});break}case "topRight":{let h=v(L+Y,H-V,"both");I(h),w({x:A.x,y:A.y+(H-h.height)});break}case "bottomLeft":{let h=v(L-Y,H+V,"both");I(h),w({x:A.x+(L-h.width),y:A.y});break}case "bottomRight":{I(v(L+Y,H+V,"both"));break}case "top":{let h=v(L,H-V,"height");I(h),w({x:A.x,y:A.y+(H-h.height)});break}case "bottom":{I(v(L,H+V,"height"));break}case "left":{let h=v(L-Y,H,"width");I(h),w({x:A.x+(L-h.width),y:A.y});break}case "right":{I(v(L+Y,H,"width"));break}}}},gt=()=>{(p.x<0||p.y<0)&&w({x:Math.max(0,p.x),y:Math.max(0,p.y)}),ft();};document.addEventListener("mousemove",pt),document.addEventListener("mouseup",gt);},Qt=react.useCallback(()=>{F?(I({...ce}),w({...ee}),$(false)):(Ne?w({...ee}):(ue({...g}),te({...p})),I({...xo}),$(true));},[F,Ne,g,p,ce,ee,$,ue,te]),eo=react.useCallback(()=>{Ne?(I({...ce}),w({...ee})):(F?$(false):(ue({...g}),te({...p})),I({...Ie}),w({...yo}));},[Ne,F,g,p,ce,ee,$,ue,te]);return react.useEffect(()=>{let s=utils.throttle(()=>{(B.current.x<0||B.current.y<0)&&w({x:Math.max(0,B.current.x),y:Math.max(0,B.current.y)});let C=B.current.x+ie.current.width,q=B.current.y+ie.current.height;(C>window.innerWidth||q>window.innerHeight)&&w({x:Math.min(B.current.x,Math.max(0,window.innerWidth-ie.current.width)),y:Math.min(B.current.y,Math.max(0,window.innerHeight-ie.current.height))});},100);return window.addEventListener("resize",s),()=>{window.removeEventListener("resize",s);}},[]),_?jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[(S||ze)&&reactDom.createPortal(jsxRuntime.jsx("div",{className:ui.clsx("max-sm:hidden fixed inset-0 z-9999 bg-transparent w-full h-full select-none",S&&(me?"cursor-grabbing":"cursor-move"),!S&&{"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),jsxRuntime.jsx("div",{className:ui.clsx("max-sm:hidden fixed z-50 left-0 top-0",S?"will-change-transform":"will-change-auto",ze||S?"transition-none":"transition-transform duration-250 ease-[cubic-bezier(0.16,1,0.3,1)]"),style:{transform:`translate(${Math.round(p.x-(o?r:0))}px, ${Math.round(p.y)}px)`},children:jsxRuntime.jsxs("div",{className:"flex relative z-50",children:[o&&jsxRuntime.jsx("div",{className:ui.clsx("relative mt-1 z-10 transition-all duration-250 ease-[cubic-bezier(0.16,1,0.3,1)]",S?"opacity-40 translate-x-4":"opacity-100 translate-x-0"),style:{width:r,height:F?40:g.height-8},children:o}),jsxRuntime.jsx("div",{className:ui.clsx("z-50 relative bg-content1 border border-border rounded-lg overflow-hidden",S?"opacity-80 shadow-md scale-102 blur-[0.5px]":"opacity-100 shadow-lg scale-100 blur-none"),style:{width:g.width,height:g.height,transition:ze||S?"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:[!F&&jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("div",{className:"absolute top-0 left-0 w-3 h-3 cursor-nw-resize z-20",onMouseDown:s=>T(s,"resize","topLeft")}),jsxRuntime.jsx("div",{className:"absolute top-0 right-0 w-3 h-3 cursor-ne-resize z-20",onMouseDown:s=>T(s,"resize","topRight")}),jsxRuntime.jsx("div",{className:"absolute bottom-0 left-0 w-3 h-3 cursor-sw-resize z-20",onMouseDown:s=>T(s,"resize","bottomLeft")}),jsxRuntime.jsx("div",{className:"absolute bottom-0 right-0 w-3 h-3 cursor-se-resize z-20",onMouseDown:s=>T(s,"resize","bottomRight")}),jsxRuntime.jsx("div",{className:"absolute top-0 left-3 right-3 h-1.5 cursor-n-resize z-20",onMouseDown:s=>T(s,"resize","top")}),jsxRuntime.jsx("div",{className:"absolute bottom-0 left-3 right-3 h-1.5 cursor-s-resize z-20",onMouseDown:s=>T(s,"resize","bottom")}),jsxRuntime.jsx("div",{className:"absolute left-0 top-3 bottom-3 w-1.5 cursor-w-resize z-20",onMouseDown:s=>T(s,"resize","left")}),jsxRuntime.jsx("div",{className:"absolute right-0 top-3 bottom-3 w-1.5 cursor-e-resize z-20",onMouseDown:s=>T(s,"resize","right")})]}),b&&jsxRuntime.jsxs("div",{className:"relative border-b border-border/80 px-3 gap-4 flex items-center justify-between cursor-move select-none",onMouseDown:s=>T(s,"drag"),style:{height:K},children:[jsxRuntime.jsx(ui.StyledTooltip,{placement:"top",closeDelay:0,content:de("scaffold.draggableModal.snapToEdge"),children:jsxRuntime.jsx(ui.DraggableIcon,{className:"text-neutral absolute left-1/2 -translate-x-1/2 top-0"})}),z||jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("div",{className:"min-w-0 flex-initial text-sm font-medium truncate cursor-auto",onMouseDown:s=>s.stopPropagation(),children:n}),jsxRuntime.jsxs("div",{className:"flex-none flex items-center justify-end gap-1",onMouseDown:s=>s.stopPropagation(),children:[jsxRuntime.jsx(ui.Button,{size:"sm",variant:"light",radius:"lg",isIconOnly:true,onPress:Qt,children:F?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:eo,children:Ne?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:Ce,children:jsxRuntime.jsx(ui.XCloseIcon,{width:18,height:18,className:"text-neutral"})})]})]})]}),!F&&jsxRuntime.jsx("div",{className:b?"h-[calc(100%-44px)] overflow-x-hidden overflow-y-auto":"h-full overflow-x-hidden overflow-y-auto cursor-move",onMouseDown:b?void 0:s=>T(s,"drag"),children:Q})]})}),a&&jsxRuntime.jsx("div",{className:ui.clsx("relative mt-1 z-10 transition-all duration-250 ease-[cubic-bezier(0.16,1,0.3,1)]",S?"opacity-40 -translate-x-4":"opacity-100 translate-x-0"),style:{width:d,height:F?40:g.height-8},children:a})]})})]}):null});function dt({id:e,title:t,maxWidth:n=440,minWidth:l=320,position:i,showHeader:f=true,header:m,headerHeight:o=44,children:r}){let{t:a}=i18n.useTranslation(),d=ui.useAtomValue(se(e)),[c,b]=react.useState(false),[z,K]=react.useState(false),[Q,de]=ui.useAtom(Fe(e)),{onOpen:_}=pe(e),{onClose:Ce}=ge(e),Ke=ui.useAtomValue(Ye(e)),F=ui.useAtomValue(Ve(e)),$=hooks.useValueRef(Q),p=hooks.useValueRef(n),Qe=hooks.useValueRef(l),g=hooks.useValueRef(i),et=hooks.useValueRef(c),ce=hooks.useValueRef(z),ue=hooks.useCallbackRef(de),ee=hooks.useCallbackRef(_),te=hooks.useCallbackRef(Ce),Re=hooks.useValueRef(Ke),Pe=hooks.useValueRef(F),S=x=>{x.preventDefault(),x.stopPropagation(),b(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=x.clientX,j=$.current,ne=re=>{if(!et.current)return;let E=re.clientX-N,me=g.current==="right"?j-E:j+E,J=Math.min(Math.max(me,Qe.current),p.current);ue(J);},Z=()=>{b(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",ne),document.removeEventListener("mouseup",Z);};document.addEventListener("mousemove",ne),document.addEventListener("mouseup",Z);},oe=x=>{if(x.target instanceof HTMLElement&&x.target.closest("button"))return;x.preventDefault(),K(true);let N=x.clientX,j=x.clientY,ne=()=>{document.removeEventListener("mousemove",Z),document.removeEventListener("mouseup",re),K(false);},Z=E=>{if(!ce.current)return;let me=Math.abs(E.clientX-N),J=Math.abs(E.clientY-j);(me>10||J>10)&&(ne(),te(),ee({shouldStartDragging:true,position:{x:E.clientX-$.current/2+20,y:E.clientY-20},size:{width:Math.min(Math.max($.current,Re.current),Pe.current)}}));},re=()=>{ne();};document.addEventListener("mousemove",Z),document.addEventListener("mouseup",re);},ze=()=>{te();};return d!==i?null:jsxRuntime.jsxs("div",{className:"max-sm:hidden flex-none flex flex-row overflow-hidden",children:[i==="right"&&jsxRuntime.jsx(Wt,{isResizing:c,handleResizeStart:S}),jsxRuntime.jsxs("div",{className:ui.clsx("flex flex-col min-h-0 overflow-hidden bg-content1",z?"opacity-80 scale-98 blur-[1px]":"opacity-100 scale-100 blur-none"),style:{width:`${Q}px`,transition:c||z?"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:[f&&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:oe,style:{height:o},children:[jsxRuntime.jsx(ui.StyledTooltip,{placement:"top",closeDelay:0,content:a("scaffold.draggablePanel.snapToModal"),children:jsxRuntime.jsx(ui.DraggableIcon,{className:"text-neutral absolute left-1/2 -translate-x-1/2 top-0"})}),m||jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("div",{className:"min-w-0 flex-initial text-sm font-medium truncate cursor-auto",onMouseDown:x=>x.stopPropagation(),children:t}),jsxRuntime.jsx("div",{className:"flex-none flex items-center justify-end gap-1",onMouseDown:x=>x.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 overflow-y-auto",children:r})]}),i==="left"&&jsxRuntime.jsx(Wt,{isResizing:c,handleResizeStart:S})]})}function Wt({isResizing:e,handleResizeStart:t}){return jsxRuntime.jsxs("div",{className:"relative",children:[jsxRuntime.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:[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:t})]}),e&&jsxRuntime.jsx("div",{className:"fixed inset-0 z-50 cursor-ew-resize"})]})}function Bn({contents:e=[],className:t,classNames:n,children:l}){let i=ui.useAtomValue(je);react.useEffect(()=>{let o=ui.getDefaultStore();e.forEach(r=>{o.set(He(r.id),r.panelMinWidth??320),o.set(ke(r.id),r.panelMaxWidth??440),o.set(Ye(r.id),r.modalMinWidth??504),o.set(Ve(r.id),r.modalMaxWidth??window.innerWidth-40);});},[e]);let f=react.useMemo(()=>e.filter(o=>{let r=ui.getDefaultStore();return i.left[o.id]?r.get(se(o.id))==="left":false}).sort((o,r)=>i.left[r.id]-i.left[o.id]),[e,i.left]),m=react.useMemo(()=>e.filter(o=>{let r=ui.getDefaultStore();return i.right[o.id]?r.get(se(o.id))==="right":false}).sort((o,r)=>(i.right[o.id]??0)-(i.right[r.id]??0)),[e,i.right]);return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsxs("div",{className:ui.clsx("w-full h-full flex flex-row overflow-hidden",t,n?.root),children:[jsxRuntime.jsx("div",{className:ui.clsx("flex-none h-full flex flex-row",n?.left),children:f.map(o=>jsxRuntime.jsx(dt,{...o,position:"left",minWidth:o.panelMinWidth??320,maxWidth:o.panelMaxWidth??440},`left-${o.id}`))}),jsxRuntime.jsx("div",{className:ui.clsx("flex-auto min-w-0 h-full",n?.content),children:l}),jsxRuntime.jsx("div",{className:ui.clsx("flex-none h-full flex flex-row",n?.right),children:m.map(o=>jsxRuntime.jsx(dt,{...o,position:"right",minWidth:o.panelMinWidth??320,maxWidth:o.panelMaxWidth??440},`right-${o.id}`))})]}),e.map(o=>jsxRuntime.jsx(Dt,{...o,minWidth:o.modalMinWidth??504,maxWidth:o.modalMaxWidth??window.innerWidth-40},`modal-${o.id}`))]})}function Gn(e){let{isOpen:t,onOpen:n,onClose:l}=pe(e),{isOpen:i,onOpen:f,onClose:m}=ge(e),o=ui.useAtomValue(fe(e)),r=react.useCallback(()=>{t||i||(o==="modal"?n():f({position:o}));},[t,i,o,n,f]),a=react.useCallback(()=>{t?l():i&&m();},[t,i,l,m]),d=react.useMemo(()=>t||i,[t,i]);return react.useMemo(()=>({isOpen:d,onOpen:r,onClose:a}),[d,r,a])}function ar({children:e,className:t}){return jsxRuntime.jsx("div",{className:ui.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 ur({children:e,className:t}){return jsxRuntime.jsx("div",{className:ui.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 pr({children:e,className:t}){return jsxRuntime.jsx("div",{className:ui.clsx("sm:hidden flex-none w-full h-14 flex justify-evenly items-center border-t border-border bg-background",t),children:e})}function yr({children:e,className:t}){return jsxRuntime.jsx("div",{className:ui.clsx("flex flex-col w-full h-screen max-sm:h-dvh overflow-hidden bg-background",t),children:e})}function Rr({className:e,children:t}){return jsxRuntime.jsx("div",{className:ui.clsx("flex-auto w-full min-h-0",e),children:t})}function Wr({href:e="/",icon:t,miniIcon:n,className:l}){let{t:i}=i18n.useTranslation();return jsxRuntime.jsxs(ui.Link,{href:e,className:ui.clsx("flex-none flex justify-center items-center",l),"aria-label":i("scaffold.home"),children:[jsxRuntime.jsx("div",{className:ui.clsx("flex justify-center items-center",!!n&&"max-xl:hidden"),children:t}),n&&jsxRuntime.jsx("div",{className:"flex justify-center items-center xl:hidden",children:n})]})}function Ir({href:e,title:t,active:n=false,className:l}){return jsxRuntime.jsx(ui.Link,{"data-active":n,href:e,className:ui.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",l),"aria-label":t,children:t})}function Ht({scrollAmount:e,dependencies:t=[]}){let n=react.useRef(null),[l,i]=react.useState(false),[f,m]=react.useState(false),o=react.useCallback(()=>{let a=n.current;if(!a)return;let{scrollLeft:d,scrollWidth:c,clientWidth:b}=a;i(d>0),m(d<c-b-1);},[]),r=react.useCallback(a=>{let d=n.current;if(!d)return;let c=a==="left"?-e:e;d.scrollBy({left:c,behavior:"smooth"});},[e]);return react.useEffect(()=>{let a=n.current;if(!a)return;o(),a.addEventListener("scroll",o);let d=new ResizeObserver(o);return d.observe(a),()=>{a.removeEventListener("scroll",o),d.disconnect();}},[o,...t]),{showLeftArrow:l,showRightArrow:f,scroll:r,containerRef:n}}function Gr({scrollAmount:e=150,className:t,classNames:n,children:l}){let{showLeftArrow:i,showRightArrow:f,scroll:m,containerRef:o}=Ht({scrollAmount:e,dependencies:[l]}),[r,a]=react.useState(false),d=react.useCallback(()=>{a(true);},[]),c=react.useCallback(()=>{a(false);},[]),b=react.useCallback(()=>{m("left");},[m]),z=react.useCallback(()=>{m("right");},[m]);return jsxRuntime.jsxs("div",{className:ui.clsx("relative flex",t,n?.root),onMouseEnter:d,onMouseLeave:c,children:[i&&jsxRuntime.jsx("div",{className:ui.clsx("absolute left-0 top-0 w-8 h-full z-40 bg-gradient-to-r from-background/60 to-transparent flex items-center pointer-events-none",n?.leftArrow),children:jsxRuntime.jsx(ui.StyledButton,{onPress:b,isIconOnly:true,disableRipple:true,disableAnimation:true,className:ui.clsx("absolute left-0 w-6 h-6 bg-transparent flex items-center justify-center text-foreground/40 hover:text-foreground transition-all duration-125 ease-in-out opacity-0",r&&"opacity-100 pointer-events-auto",n?.leftArrowButton),children:jsxRuntime.jsx(ui.ChevronLeftIcon,{width:18,height:18,className:n?.leftArrowIcon})})}),f&&jsxRuntime.jsx("div",{className:ui.clsx("absolute right-0 top-0 w-8 h-full z-40 bg-gradient-to-l from-background/60 to-transparent flex items-center justify-end pointer-events-none",n?.rightArrow),children:jsxRuntime.jsx(ui.StyledButton,{onPress:z,isIconOnly:true,disableRipple:true,disableAnimation:true,className:ui.clsx("absolute right-0 w-6 h-6 bg-transparent flex items-center justify-center text-foreground/40 hover:text-foreground transition-all duration-125 ease-in-out opacity-0",r&&"opacity-100 pointer-events-auto",n?.rightArrowButton),children:jsxRuntime.jsx(ui.ChevronRightIcon,{width:18,height:18,className:n?.rightArrowIcon})})}),jsxRuntime.jsx("div",{ref:o,className:ui.clsx("flex overflow-x-auto overflow-y-hidden no-scrollbar",n?.content),children:l})]})}function si({id:e,children:t}){let n=hooks.useEventEmitter(),{isOpen:l,onOpen:i,onClose:f,onOpenChange:m}=ui.useDisclosure(),[o,r]=react.useState(void 0),[a,d]=react.useState(void 0);return react.useEffect(()=>{let c=({params:b,onResult:z})=>{r(b),d(z),i();};return n.on(`open_modal:${e}`,c),()=>{n.off(`open_modal:${e}`,c);}},[e,i,n]),react.useEffect(()=>{let c=()=>{f();};return n.on(`close_modal:${e}`,c),()=>{n.off(`close_modal:${e}`,c);}},[e,f,n]),t({params:o,isOpen:l,onClose:f,onOpenChange:m,onResult:a})}function ci(e){let t=hooks.useEventEmitter(),n=react.useCallback(i=>{t.emit(`open_modal:${e}`,i);},[e,t]),l=react.useCallback(()=>{t.emit(`close_modal:${e}`);},[e,t]);return {onOpen:n,onClose:l}}typeof window<"u"&&(window.__LIBERFI_VERSION__=window.__LIBERFI_VERSION__||{},window.__LIBERFI_VERSION__["@liberfi.io/ui-scaffold"]="0.1.8");var nn="0.1.8";exports.AsyncModal=si;exports.DraggableModal=Dt;exports.DraggablePanel=dt;exports.DraggablePanelProvider=Bn;exports.Footer=pr;exports.Header=ar;exports.HeaderNavigation=Ir;exports.HorizontalScrollContainer=Gr;exports.Logo=Wr;exports.MobileHeader=ur;exports.Page=yr;exports.PageContent=Rr;exports.useAsyncModal=ci;exports.useDraggableDisclosure=Gn;exports.useDraggableModalDisclosure=pe;exports.useDraggablePanelDisclosure=ge;exports.version=nn;//# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map