@buoy-gg/bottom-sheet 7.0.62 → 7.0.64

package/lib/commonjs/components/BottomSheet.web.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.BottomSheet=void 0;var _react=require("react");var _sharedUi=require("@buoy-gg/shared-ui");var _bottomSheetGeometry=require("./bottomSheetGeometry");var _useMultiTap=require("./useMultiTap");var _jsxRuntime=require("react/jsx-runtime");const defaultTheme={background:"rgba(8, 12, 21, 0.98)",panel:"rgba(16, 22, 35, 0.98)",border:"#00B8E666",primary:"#FFFFFF",secondary:"#B8BFC9",muted:"#7A8599",success:"#4AFF9F",error:"#FF5252",info:"#00B8E6"};function subscribeToViewport(e){window.addEventListener("resize",e);window.visualViewport?.addEventListener("resize",e);return()=>{window.removeEventListener("resize",e);window.visualViewport?.removeEventListener("resize",e)}}function readViewport(){return{width:window.innerWidth,height:window.innerHeight}}function readSafeAreaInsets(){const e=document.createElement("div");e.style.cssText="position:fixed;visibility:hidden;pointer-events:none;top:env(safe-area-inset-top);bottom:env(safe-area-inset-bottom);left:env(safe-area-inset-left);right:env(safe-area-inset-right)";document.body.appendChild(e);const t=getComputedStyle(e);const n={top:parseFloat(t.top)||0,bottom:parseFloat(t.bottom)||0,left:parseFloat(t.left)||0,right:parseFloat(t.right)||0};document.body.removeChild(e);return n}function useViewportAndInsets(){const[e,t]=(0,_react.useState)(()=>({viewport:readViewport(),insets:readSafeAreaInsets()}));(0,_react.useEffect)(()=>{return subscribeToViewport(()=>{t({viewport:readViewport(),insets:readSafeAreaInsets()})})},[]);return e}function startPointerDrag(e,t){if(!e.isPrimary)return;const n=e.currentTarget;const o=e.clientX;const i=e.clientY;let c=e.clientY;let d=performance.now();let m=0;let u=0;t.onStart?.(e);n.setPointerCapture(e.pointerId);const p=s=>{if(s.pointerId!==e.pointerId)return;const g=s.clientX-o;const y=s.clientY-i;u=Math.max(u,Math.abs(g)+Math.abs(y));const v=performance.now();const w=v-d;if(w>0){m=(s.clientY-c)/w;c=s.clientY;d=v}t.onMove(s,{dx:g,dy:y})};const l=s=>{if(s.pointerId!==e.pointerId)return;h();t.onEnd(s,{dx:s.clientX-o,dy:s.clientY-i,vy:m,wasTap:u<=5})};const h=()=>{n.removeEventListener("pointermove",p);n.removeEventListener("pointerup",l);n.removeEventListener("pointercancel",l)};n.addEventListener("pointermove",p);n.addEventListener("pointerup",l);n.addEventListener("pointercancel",l)}function DragIndicator({isResizing:e,mode:t,hasCustomContent:n=false,theme:o}){return(0,_jsxRuntime.jsxs)("div",{style:{display:"flex",flexDirection:"column",alignItems:"center",padding:n?"6px 0 2px":"8px 0",position:"relative"},children:[(0,_jsxRuntime.jsx)("div",{style:{width:e?40:t==="floating"?50:40,height:t==="floating"?5:3,backgroundColor:e?o.success:t==="floating"?o.muted:o.info+"99",borderRadius:2,boxShadow:`0 0 4px ${o.info}CC`}}),e&&t==="bottomSheet"&&(0,_jsxRuntime.jsx)("div",{style:{position:"absolute",display:"flex",flexDirection:"row",gap:2,marginTop:12},children:[0,1,2].map(i=>(0,_jsxRuntime.jsx)("div",{style:{width:12,height:1,backgroundColor:o.success,opacity:.6}},i))})]})}function HeaderBody({header:e,isResizing:t,mode:n,theme:o}){if(e?.customContent){return(0,_jsxRuntime.jsxs)("div",{style:{flex:1,display:"flex",flexDirection:"column",justifyContent:"center"},children:[(0,_jsxRuntime.jsx)(DragIndicator,{isResizing:t,mode:n,hasCustomContent:true,theme:o}),e.customContent]})}return(0,_jsxRuntime.jsxs)("div",{style:{flex:1,display:"flex",flexDirection:"column",justifyContent:"center",position:"relative"},children:[(0,_jsxRuntime.jsx)(DragIndicator,{isResizing:t,mode:n,theme:o}),(0,_jsxRuntime.jsxs)("div",{style:{padding:"0 16px",display:"flex",flexDirection:"column",alignItems:"center"},children:[e?.title&&(0,_jsxRuntime.jsx)("span",{style:{fontSize:16,fontWeight:600,color:o.primary},children:e.title}),e?.subtitle&&(0,_jsxRuntime.jsx)("span",{style:{fontSize:12,color:o.secondary,paddingTop:4},children:e.subtitle})]}),(0,_jsxRuntime.jsx)("div",{style:{position:"absolute",inset:0,display:"flex",alignItems:"center",justifyContent:"center",pointerEvents:"none"},children:(0,_jsxRuntime.jsx)("span",{style:{fontSize:10,color:o.muted,fontStyle:"italic"},children:"Double tap: Toggle \u2022 Triple tap: Close"})})]})}function SheetContent({children:e,footer:t,footerHeight:n,disableScrollWrapper:o,contentStyle:i,theme:c,background:d}){return(0,_jsxRuntime.jsxs)("div",{style:{flex:1,minHeight:0,display:"flex",flexDirection:"column",backgroundColor:c.background,borderBottomLeftRadius:16,borderBottomRightRadius:16,overflow:"hidden",position:"relative",...i},children:[d?(0,_jsxRuntime.jsx)(_sharedUi.ToolBackground,{}):null,o?e:(0,_jsxRuntime.jsx)("div",{style:{flex:1,minHeight:0,overflowY:"auto",WebkitOverflowScrolling:"touch",paddingBottom:n},children:e}),t?(0,_jsxRuntime.jsx)("div",{style:{position:"absolute",left:0,right:0,bottom:0,backgroundColor:c.background,borderBottomLeftRadius:16,borderBottomRightRadius:16},children:t}):null]})}const SPRING_TRANSITION="transform 320ms cubic-bezier(0.16, 1, 0.3, 1)";const FADE_TRANSITION="opacity 200ms ease";function SheetPanel({props:e,theme:t,viewport:n,effectiveMaxHeight:o,panelHeight:i,setPanelHeight:c,onHeaderTap:d}){const{onClose:m,children:u,header:p,styles:l={},minHeight:h=_bottomSheetGeometry.MIN_HEIGHT,footer:s,footerHeight:g=0,disableScrollWrapper:y,zIndex:v=1e3,background:w=true}=e;const x=(0,_react.useRef)(null);const T=(0,_react.useRef)(null);const[R,j]=(0,_react.useState)(false);const[C,A]=(0,_react.useState)(false);const D=(0,_react.useRef)(false);const H=(0,_react.useRef)(i);(0,_react.useEffect)(()=>{const b=requestAnimationFrame(()=>A(true));return()=>cancelAnimationFrame(b)},[]);const M=b=>{if(D.current)return;const _=b.currentTarget.getBoundingClientRect().top;const $=b.clientY-_;startPointerDrag(b,{onStart:()=>j(true),onMove:I=>{const F=I.clientY-$;const r=Math.max(h,Math.min(n.height-F,o));H.current=r;if(x.current)x.current.style.height=`${r}px`},onEnd:(I,{dy:F,vy:r,wasTap:a})=>{j(false);if(a){d();return}if((0,_bottomSheetGeometry.shouldCloseOnRelease)(r,F,H.current,h)){D.current=true;const S=T.current;if(S){S.style.transition=`${SPRING_TRANSITION}, ${FADE_TRANSITION}`;S.style.transform="translateY(100%)";S.style.opacity="0"}setTimeout(m,220);return}c(H.current)}})};return(0,_jsxRuntime.jsx)("div",{style:{position:"fixed",inset:0,zIndex:v,pointerEvents:"none"},children:(0,_jsxRuntime.jsx)("div",{ref:T,style:{position:"absolute",bottom:0,left:0,right:0,pointerEvents:"auto",transform:C?"translateY(0)":"translateY(100%)",opacity:C?1:0,transition:`${SPRING_TRANSITION}, ${FADE_TRANSITION}`},children:(0,_jsxRuntime.jsxs)("div",{ref:x,style:{display:"flex",flexDirection:"column",height:i,backgroundColor:t.panel,borderTopLeftRadius:16,borderTopRightRadius:16,border:`1px solid ${t.border}`,boxShadow:`0 -4px 12px ${t.info}4D, 0 -2px 24px rgba(0,0,0,0.4)`,...l.container},children:[(0,_jsxRuntime.jsx)("div",{onPointerDown:M,style:{minHeight:56,display:"flex",backgroundColor:t.panel,borderTopLeftRadius:16,borderTopRightRadius:16,borderBottom:"1px solid rgba(255, 255, 255, 0.1)",cursor:R?"ns-resize":"grab",touchAction:"none",userSelect:"none"},children:(0,_jsxRuntime.jsx)(HeaderBody,{header:p,isResizing:R,mode:"bottomSheet",theme:t})}),(0,_jsxRuntime.jsx)(SheetContent,{footer:s,footerHeight:g,disableScrollWrapper:y,contentStyle:l.content,theme:t,background:w,children:u})]})})})}function CornerHandleView({isActive:e,theme:t}){return(0,_jsxRuntime.jsx)("div",{style:{width:20,height:20,borderRadius:10,margin:5,backgroundColor:e?t.success+"1A":"transparent",border:e?`2px solid ${t.success}`:"2px solid transparent",boxShadow:e?`0 0 8px ${t.success}99`:"none"}})}function FloatingWindow({props:e,theme:t,viewport:n,insets:o,rect:i,setRect:c,onHeaderTap:d}){const{onClose:m,children:u,header:p,styles:l={},footer:h,footerHeight:s=0,onBack:g,disableScrollWrapper:y,zIndex:v=1e3,background:w=true}=e;const x=(0,_react.useRef)(null);const[T,R]=(0,_react.useState)(false);const[j,C]=(0,_react.useState)(false);const[A,D]=(0,_react.useState)(false);const H=(0,_react.useRef)(i);H.current=i;const M=(0,_react.useRef)(i);(0,_react.useEffect)(()=>{const r=requestAnimationFrame(()=>D(true));return()=>cancelAnimationFrame(r)},[]);const b=r=>{M.current=r;const a=x.current;if(!a)return;a.style.transform=`translate(${r.left}px, ${r.top}px)`;a.style.width=`${r.width}px`;a.style.height=`${r.height}px`};const _=r=>{const a=H.current;const S=r.clientX-a.left;const L=r.clientY-a.top;startPointerDrag(r,{onMove:(z,{dx:E,dy:f})=>{if(Math.abs(E)+Math.abs(f)>5)R(true);b({...M.current,left:z.clientX-S,top:z.clientY-L})},onEnd:(z,{wasTap:E})=>{R(false);if(E){d();return}const f=M.current;const B={...f,left:Math.max(o.left,Math.min(f.left,n.width-o.right-f.width)),top:Math.max(o.top,Math.min(f.top,n.height-o.bottom-f.height))};b(B);c(B)}})};const $=r=>a=>{a.stopPropagation();const S={...H.current};let L=false;startPointerDrag(a,{onStart:()=>C(true),onMove:(z,{dx:E,dy:f})=>{if(Math.abs(E)<.5&&Math.abs(f)<.5)return;L=true;b((0,_bottomSheetGeometry.resizeCorner)(r,S,E,f,n,o,(0,_bottomSheetGeometry.floatingMinWidth)(n.width),_bottomSheetGeometry.FLOATING_MIN_HEIGHT))},onEnd:()=>{C(false);if(!L){if(r==="topRight"){m();return}if(r==="topLeft"&&g){g();return}}c(M.current)}})};const I=T||j;const F=[{corner:"topLeft",style:{top:4,left:4}},{corner:"topRight",style:{top:4,right:4}},{corner:"bottomLeft",style:{bottom:4,left:4}},{corner:"bottomRight",style:{bottom:4,right:4}}];return(0,_jsxRuntime.jsxs)("div",{ref:x,style:{position:"fixed",top:0,left:0,transform:`translate(${i.left}px, ${i.top}px)`,width:i.width,height:i.height,display:"flex",flexDirection:"column",backgroundColor:t.panel,borderRadius:16,border:I?`2px solid ${t.success}`:`1px solid ${t.border}`,boxShadow:I?`0 0 12px ${t.success}99`:`0 0 20px ${t.info}80, 0 8px 32px rgba(0,0,0,0.5)`,zIndex:v,opacity:A?1:0,transition:FADE_TRANSITION,...l.container},children:[(0,_jsxRuntime.jsx)("div",{onPointerDown:_,style:{minHeight:56,display:"flex",backgroundColor:t.panel,borderTopLeftRadius:14,borderTopRightRadius:14,borderBottom:"1px solid rgba(255, 255, 255, 0.1)",cursor:T?"grabbing":"grab",touchAction:"none",userSelect:"none"},children:(0,_jsxRuntime.jsx)(HeaderBody,{header:p,isResizing:I,mode:"floating",theme:t})}),(0,_jsxRuntime.jsx)(SheetContent,{footer:h,footerHeight:s,disableScrollWrapper:y,contentStyle:l.content,theme:t,background:w,children:u}),F.map(({corner:r,style:a})=>(0,_jsxRuntime.jsx)("div",{onPointerDown:$(r),style:{position:"absolute",width:30,height:30,zIndex:10,touchAction:"none",cursor:r==="topLeft"||r==="bottomRight"?"nwse-resize":"nesw-resize",...a},children:(0,_jsxRuntime.jsx)(CornerHandleView,{isActive:I,theme:t})},r))]})}const BottomSheet=e=>{const{visible:t,onClose:n,maxHeight:o,initialHeight:i=_bottomSheetGeometry.DEFAULT_HEIGHT,initialMode:c="bottomSheet",onModeChange:d,theme:m}=e;const u={...defaultTheme,...m};const{viewport:p,insets:l}=useViewportAndInsets();const[h,s]=(0,_react.useState)(c);const[g,y]=(0,_react.useState)(i);const[v,w]=(0,_react.useState)(()=>({width:_bottomSheetGeometry.FLOATING_WIDTH,height:_bottomSheetGeometry.FLOATING_HEIGHT,left:(window.innerWidth-_bottomSheetGeometry.FLOATING_WIDTH)/2,top:(window.innerHeight-_bottomSheetGeometry.FLOATING_HEIGHT)/2}));const x=o||p.height-l.top;const T=()=>{const j=h==="bottomSheet"?"floating":"bottomSheet";s(j);d?.(j)};const R=(0,_useMultiTap.useMultiTap)(T,n);if(!t){return null}if(h==="floating"){return(0,_jsxRuntime.jsx)(FloatingWindow,{props:e,theme:u,viewport:p,insets:l,rect:v,setRect:w,onHeaderTap:R})}return(0,_jsxRuntime.jsx)(SheetPanel,{props:e,theme:u,viewport:p,effectiveMaxHeight:x,panelHeight:Math.min(g,x),setPanelHeight:y,onHeaderTap:R})};exports.BottomSheet=BottomSheet;
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.BottomSheet=void 0;var _react=require("react");var _sharedUi=require("@buoy-gg/shared-ui");var _bottomSheetGeometry=require("./bottomSheetGeometry");var _useMultiTap=require("./useMultiTap");var _jsxRuntime=require("react/jsx-runtime");const defaultTheme={background:"rgba(8, 12, 21, 0.98)",panel:"rgba(16, 22, 35, 0.98)",border:"#00B8E666",primary:"#FFFFFF",secondary:"#B8BFC9",muted:"#7A8599",success:"#4AFF9F",error:"#FF5252",info:"#00B8E6"};function subscribeToViewport(e){window.addEventListener("resize",e);window.visualViewport?.addEventListener("resize",e);return()=>{window.removeEventListener("resize",e);window.visualViewport?.removeEventListener("resize",e)}}function readViewport(){return{width:window.innerWidth,height:window.innerHeight}}function readSafeAreaInsets(){const e=document.createElement("div");e.style.cssText="position:fixed;visibility:hidden;pointer-events:none;top:env(safe-area-inset-top);bottom:env(safe-area-inset-bottom);left:env(safe-area-inset-left);right:env(safe-area-inset-right)";document.body.appendChild(e);const t=getComputedStyle(e);const n={top:parseFloat(t.top)||0,bottom:parseFloat(t.bottom)||0,left:parseFloat(t.left)||0,right:parseFloat(t.right)||0};document.body.removeChild(e);return n}function useViewportAndInsets(){const[e,t]=(0,_react.useState)(()=>({viewport:readViewport(),insets:readSafeAreaInsets()}));(0,_react.useEffect)(()=>{return subscribeToViewport(()=>{t({viewport:readViewport(),insets:readSafeAreaInsets()})})},[]);return e}function startPointerDrag(e,t){if(!e.isPrimary)return;const n=e.currentTarget;const o=e.clientX;const i=e.clientY;let c=e.clientY;let d=performance.now();let m=0;let u=0;t.onStart?.(e);n.setPointerCapture(e.pointerId);const p=s=>{if(s.pointerId!==e.pointerId)return;const g=s.clientX-o;const y=s.clientY-i;u=Math.max(u,Math.abs(g)+Math.abs(y));const v=performance.now();const w=v-d;if(w>0){m=(s.clientY-c)/w;c=s.clientY;d=v}t.onMove(s,{dx:g,dy:y})};const l=s=>{if(s.pointerId!==e.pointerId)return;h();t.onEnd(s,{dx:s.clientX-o,dy:s.clientY-i,vy:m,wasTap:u<=5})};const h=()=>{n.removeEventListener("pointermove",p);n.removeEventListener("pointerup",l);n.removeEventListener("pointercancel",l)};n.addEventListener("pointermove",p);n.addEventListener("pointerup",l);n.addEventListener("pointercancel",l)}function DragIndicator({isResizing:e,mode:t,hasCustomContent:n=false,theme:o}){return(0,_jsxRuntime.jsxs)("div",{style:{display:"flex",flexDirection:"column",alignItems:"center",padding:n?"6px 0 2px":"8px 0",position:"relative"},children:[(0,_jsxRuntime.jsx)("div",{style:{width:e?40:t==="floating"?50:40,height:t==="floating"?5:3,backgroundColor:e?o.success:t==="floating"?o.muted:o.info+"99",borderRadius:2,boxShadow:`0 0 4px ${o.info}CC`}}),e&&t==="bottomSheet"&&(0,_jsxRuntime.jsx)("div",{style:{position:"absolute",display:"flex",flexDirection:"row",gap:2,marginTop:12},children:[0,1,2].map(i=>(0,_jsxRuntime.jsx)("div",{style:{width:12,height:1,backgroundColor:o.success,opacity:.6}},i))})]})}function HeaderBody({header:e,isResizing:t,mode:n,theme:o}){if(e?.customContent){return(0,_jsxRuntime.jsxs)("div",{style:{flex:1,display:"flex",flexDirection:"column",justifyContent:"center"},children:[(0,_jsxRuntime.jsx)(DragIndicator,{isResizing:t,mode:n,hasCustomContent:true,theme:o}),e.customContent]})}return(0,_jsxRuntime.jsxs)("div",{style:{flex:1,display:"flex",flexDirection:"column",justifyContent:"center",position:"relative"},children:[(0,_jsxRuntime.jsx)(DragIndicator,{isResizing:t,mode:n,theme:o}),(0,_jsxRuntime.jsxs)("div",{style:{padding:"0 16px",display:"flex",flexDirection:"column",alignItems:"center"},children:[e?.title&&(0,_jsxRuntime.jsx)("span",{style:{fontSize:16,fontWeight:600,color:o.primary},children:e.title}),e?.subtitle&&(0,_jsxRuntime.jsx)("span",{style:{fontSize:12,color:o.secondary,paddingTop:4},children:e.subtitle})]}),(0,_jsxRuntime.jsx)("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",padding:"4px 16px",pointerEvents:"none"},children:(0,_jsxRuntime.jsx)("span",{style:{fontSize:10,color:o.muted,fontStyle:"italic"},children:"Double tap: Toggle \u2022 Triple tap: Close"})})]})}function SheetContent({children:e,footer:t,footerHeight:n,disableScrollWrapper:o,contentStyle:i,theme:c,background:d}){return(0,_jsxRuntime.jsxs)("div",{style:{flex:1,minHeight:0,display:"flex",flexDirection:"column",backgroundColor:c.background,borderBottomLeftRadius:16,borderBottomRightRadius:16,overflow:"hidden",position:"relative",...i},children:[d?(0,_jsxRuntime.jsx)(_sharedUi.ToolBackground,{}):null,o?e:(0,_jsxRuntime.jsx)("div",{style:{flex:1,minHeight:0,overflowY:"auto",WebkitOverflowScrolling:"touch",paddingBottom:n},children:e}),t?(0,_jsxRuntime.jsx)("div",{style:{position:"absolute",left:0,right:0,bottom:0,backgroundColor:c.background,borderBottomLeftRadius:16,borderBottomRightRadius:16},children:t}):null]})}const SPRING_TRANSITION="transform 320ms cubic-bezier(0.16, 1, 0.3, 1)";const FADE_TRANSITION="opacity 200ms ease";function SheetPanel({props:e,theme:t,viewport:n,effectiveMaxHeight:o,panelHeight:i,setPanelHeight:c,onHeaderTap:d}){const{onClose:m,children:u,header:p,styles:l={},minHeight:h=_bottomSheetGeometry.MIN_HEIGHT,footer:s,footerHeight:g=0,disableScrollWrapper:y,zIndex:v=1e3,background:w=true}=e;const x=(0,_react.useRef)(null);const T=(0,_react.useRef)(null);const[R,j]=(0,_react.useState)(false);const[C,A]=(0,_react.useState)(false);const D=(0,_react.useRef)(false);const H=(0,_react.useRef)(i);(0,_react.useEffect)(()=>{const b=requestAnimationFrame(()=>A(true));return()=>cancelAnimationFrame(b)},[]);const M=b=>{if(D.current)return;const _=b.currentTarget.getBoundingClientRect().top;const $=b.clientY-_;startPointerDrag(b,{onStart:()=>j(true),onMove:I=>{const F=I.clientY-$;const r=Math.max(h,Math.min(n.height-F,o));H.current=r;if(x.current)x.current.style.height=`${r}px`},onEnd:(I,{dy:F,vy:r,wasTap:a})=>{j(false);if(a){d();return}if((0,_bottomSheetGeometry.shouldCloseOnRelease)(r,F,H.current,h)){D.current=true;const S=T.current;if(S){S.style.transition=`${SPRING_TRANSITION}, ${FADE_TRANSITION}`;S.style.transform="translateY(100%)";S.style.opacity="0"}setTimeout(m,220);return}c(H.current)}})};return(0,_jsxRuntime.jsx)("div",{style:{position:"fixed",inset:0,zIndex:v,pointerEvents:"none"},children:(0,_jsxRuntime.jsx)("div",{ref:T,style:{position:"absolute",bottom:0,left:0,right:0,pointerEvents:"auto",transform:C?"translateY(0)":"translateY(100%)",opacity:C?1:0,transition:`${SPRING_TRANSITION}, ${FADE_TRANSITION}`},children:(0,_jsxRuntime.jsxs)("div",{ref:x,style:{display:"flex",flexDirection:"column",height:i,backgroundColor:t.panel,borderTopLeftRadius:16,borderTopRightRadius:16,border:`1px solid ${t.border}`,boxShadow:`0 -4px 12px ${t.info}4D, 0 -2px 24px rgba(0,0,0,0.4)`,...l.container},children:[(0,_jsxRuntime.jsx)("div",{onPointerDown:M,style:{minHeight:56,display:"flex",backgroundColor:t.panel,borderTopLeftRadius:16,borderTopRightRadius:16,borderBottom:"1px solid rgba(255, 255, 255, 0.1)",cursor:R?"ns-resize":"grab",touchAction:"none",userSelect:"none"},children:(0,_jsxRuntime.jsx)(HeaderBody,{header:p,isResizing:R,mode:"bottomSheet",theme:t})}),(0,_jsxRuntime.jsx)(SheetContent,{footer:s,footerHeight:g,disableScrollWrapper:y,contentStyle:l.content,theme:t,background:w,children:u})]})})})}function CornerHandleView({isActive:e,theme:t}){return(0,_jsxRuntime.jsx)("div",{style:{width:20,height:20,borderRadius:10,margin:5,backgroundColor:e?t.success+"1A":"transparent",border:e?`2px solid ${t.success}`:"2px solid transparent",boxShadow:e?`0 0 8px ${t.success}99`:"none"}})}function FloatingWindow({props:e,theme:t,viewport:n,insets:o,rect:i,setRect:c,onHeaderTap:d}){const{onClose:m,children:u,header:p,styles:l={},footer:h,footerHeight:s=0,onBack:g,disableScrollWrapper:y,zIndex:v=1e3,background:w=true}=e;const x=(0,_react.useRef)(null);const[T,R]=(0,_react.useState)(false);const[j,C]=(0,_react.useState)(false);const[A,D]=(0,_react.useState)(false);const H=(0,_react.useRef)(i);H.current=i;const M=(0,_react.useRef)(i);(0,_react.useEffect)(()=>{const r=requestAnimationFrame(()=>D(true));return()=>cancelAnimationFrame(r)},[]);const b=r=>{M.current=r;const a=x.current;if(!a)return;a.style.transform=`translate(${r.left}px, ${r.top}px)`;a.style.width=`${r.width}px`;a.style.height=`${r.height}px`};const _=r=>{const a=H.current;const S=r.clientX-a.left;const L=r.clientY-a.top;startPointerDrag(r,{onMove:(z,{dx:E,dy:f})=>{if(Math.abs(E)+Math.abs(f)>5)R(true);b({...M.current,left:z.clientX-S,top:z.clientY-L})},onEnd:(z,{wasTap:E})=>{R(false);if(E){d();return}const f=M.current;const B={...f,left:Math.max(o.left,Math.min(f.left,n.width-o.right-f.width)),top:Math.max(o.top,Math.min(f.top,n.height-o.bottom-f.height))};b(B);c(B)}})};const $=r=>a=>{a.stopPropagation();const S={...H.current};let L=false;startPointerDrag(a,{onStart:()=>C(true),onMove:(z,{dx:E,dy:f})=>{if(Math.abs(E)<.5&&Math.abs(f)<.5)return;L=true;b((0,_bottomSheetGeometry.resizeCorner)(r,S,E,f,n,o,(0,_bottomSheetGeometry.floatingMinWidth)(n.width),_bottomSheetGeometry.FLOATING_MIN_HEIGHT))},onEnd:()=>{C(false);if(!L){if(r==="topRight"){m();return}if(r==="topLeft"&&g){g();return}}c(M.current)}})};const I=T||j;const F=[{corner:"topLeft",style:{top:4,left:4}},{corner:"topRight",style:{top:4,right:4}},{corner:"bottomLeft",style:{bottom:4,left:4}},{corner:"bottomRight",style:{bottom:4,right:4}}];return(0,_jsxRuntime.jsxs)("div",{ref:x,style:{position:"fixed",top:0,left:0,transform:`translate(${i.left}px, ${i.top}px)`,width:i.width,height:i.height,display:"flex",flexDirection:"column",backgroundColor:t.panel,borderRadius:16,border:I?`2px solid ${t.success}`:`1px solid ${t.border}`,boxShadow:I?`0 0 12px ${t.success}99`:`0 0 20px ${t.info}80, 0 8px 32px rgba(0,0,0,0.5)`,zIndex:v,opacity:A?1:0,transition:FADE_TRANSITION,...l.container},children:[(0,_jsxRuntime.jsx)("div",{onPointerDown:_,style:{minHeight:56,display:"flex",backgroundColor:t.panel,borderTopLeftRadius:14,borderTopRightRadius:14,borderBottom:"1px solid rgba(255, 255, 255, 0.1)",cursor:T?"grabbing":"grab",touchAction:"none",userSelect:"none"},children:(0,_jsxRuntime.jsx)(HeaderBody,{header:p,isResizing:I,mode:"floating",theme:t})}),(0,_jsxRuntime.jsx)(SheetContent,{footer:h,footerHeight:s,disableScrollWrapper:y,contentStyle:l.content,theme:t,background:w,children:u}),F.map(({corner:r,style:a})=>(0,_jsxRuntime.jsx)("div",{onPointerDown:$(r),style:{position:"absolute",width:30,height:30,zIndex:10,touchAction:"none",cursor:r==="topLeft"||r==="bottomRight"?"nwse-resize":"nesw-resize",...a},children:(0,_jsxRuntime.jsx)(CornerHandleView,{isActive:I,theme:t})},r))]})}const BottomSheet=e=>{const{visible:t,onClose:n,maxHeight:o,initialHeight:i=_bottomSheetGeometry.DEFAULT_HEIGHT,initialMode:c="bottomSheet",onModeChange:d,theme:m}=e;const u={...defaultTheme,...m};const{viewport:p,insets:l}=useViewportAndInsets();const[h,s]=(0,_react.useState)(c);const[g,y]=(0,_react.useState)(i);const[v,w]=(0,_react.useState)(()=>({width:_bottomSheetGeometry.FLOATING_WIDTH,height:_bottomSheetGeometry.FLOATING_HEIGHT,left:(window.innerWidth-_bottomSheetGeometry.FLOATING_WIDTH)/2,top:(window.innerHeight-_bottomSheetGeometry.FLOATING_HEIGHT)/2}));const x=o||p.height-l.top;const T=()=>{const j=h==="bottomSheet"?"floating":"bottomSheet";s(j);d?.(j)};const R=(0,_useMultiTap.useMultiTap)(T,n);if(!t){return null}if(h==="floating"){return(0,_jsxRuntime.jsx)(FloatingWindow,{props:e,theme:u,viewport:p,insets:l,rect:v,setRect:w,onHeaderTap:R})}return(0,_jsxRuntime.jsx)(SheetPanel,{props:e,theme:u,viewport:p,effectiveMaxHeight:x,panelHeight:Math.min(g,x),setPanelHeight:y,onHeaderTap:R})};exports.BottomSheet=BottomSheet;

package/lib/module/components/BottomSheet.web.js

@@ -1 +1 @@
-"use strict";import{useState as y,useRef as F,useEffect as N}from"react";import{ToolBackground as tt}from"@buoy-gg/shared-ui";import{MIN_HEIGHT as et,DEFAULT_HEIGHT as ot,FLOATING_WIDTH as X,FLOATING_HEIGHT as V,FLOATING_MIN_HEIGHT as nt,floatingMinWidth as it,resizeCorner as rt,shouldCloseOnRelease as st}from"./bottomSheetGeometry";import{useMultiTap as lt}from"./useMultiTap";import{jsx as r,jsxs as D}from"react/jsx-runtime";const at={background:"rgba(8, 12, 21, 0.98)",panel:"rgba(16, 22, 35, 0.98)",border:"#00B8E666",primary:"#FFFFFF",secondary:"#B8BFC9",muted:"#7A8599",success:"#4AFF9F",error:"#FF5252",info:"#00B8E6"};function ct(t){window.addEventListener("resize",t);window.visualViewport?.addEventListener("resize",t);return()=>{window.removeEventListener("resize",t);window.visualViewport?.removeEventListener("resize",t)}}function q(){return{width:window.innerWidth,height:window.innerHeight}}function U(){const t=document.createElement("div");t.style.cssText="position:fixed;visibility:hidden;pointer-events:none;top:env(safe-area-inset-top);bottom:env(safe-area-inset-bottom);left:env(safe-area-inset-left);right:env(safe-area-inset-right)";document.body.appendChild(t);const e=getComputedStyle(t);const n={top:parseFloat(e.top)||0,bottom:parseFloat(e.bottom)||0,left:parseFloat(e.left)||0,right:parseFloat(e.right)||0};document.body.removeChild(t);return n}function dt(){const[t,e]=y(()=>({viewport:q(),insets:U()}));N(()=>{return ct(()=>{e({viewport:q(),insets:U()})})},[]);return t}function G(t,e){if(!t.isPrimary)return;const n=t.currentTarget;const o=t.clientX;const s=t.clientY;let d=t.clientY;let u=performance.now();let w=0;let p=0;e.onStart?.(t);n.setPointerCapture(t.pointerId);const f=l=>{if(l.pointerId!==t.pointerId)return;const m=l.clientX-o;const v=l.clientY-s;p=Math.max(p,Math.abs(m)+Math.abs(v));const R=performance.now();const T=R-u;if(T>0){w=(l.clientY-d)/T;d=l.clientY;u=R}e.onMove(l,{dx:m,dy:v})};const c=l=>{if(l.pointerId!==t.pointerId)return;g();e.onEnd(l,{dx:l.clientX-o,dy:l.clientY-s,vy:w,wasTap:p<=5})};const g=()=>{n.removeEventListener("pointermove",f);n.removeEventListener("pointerup",c);n.removeEventListener("pointercancel",c)};n.addEventListener("pointermove",f);n.addEventListener("pointerup",c);n.addEventListener("pointercancel",c)}function J({isResizing:t,mode:e,hasCustomContent:n=false,theme:o}){return D("div",{style:{display:"flex",flexDirection:"column",alignItems:"center",padding:n?"6px 0 2px":"8px 0",position:"relative"},children:[r("div",{style:{width:t?40:e==="floating"?50:40,height:e==="floating"?5:3,backgroundColor:t?o.success:e==="floating"?o.muted:o.info+"99",borderRadius:2,boxShadow:`0 0 4px ${o.info}CC`}}),t&&e==="bottomSheet"&&r("div",{style:{position:"absolute",display:"flex",flexDirection:"row",gap:2,marginTop:12},children:[0,1,2].map(s=>r("div",{style:{width:12,height:1,backgroundColor:o.success,opacity:.6}},s))})]})}function K({header:t,isResizing:e,mode:n,theme:o}){if(t?.customContent){return D("div",{style:{flex:1,display:"flex",flexDirection:"column",justifyContent:"center"},children:[r(J,{isResizing:e,mode:n,hasCustomContent:true,theme:o}),t.customContent]})}return D("div",{style:{flex:1,display:"flex",flexDirection:"column",justifyContent:"center",position:"relative"},children:[r(J,{isResizing:e,mode:n,theme:o}),D("div",{style:{padding:"0 16px",display:"flex",flexDirection:"column",alignItems:"center"},children:[t?.title&&r("span",{style:{fontSize:16,fontWeight:600,color:o.primary},children:t.title}),t?.subtitle&&r("span",{style:{fontSize:12,color:o.secondary,paddingTop:4},children:t.subtitle})]}),r("div",{style:{position:"absolute",inset:0,display:"flex",alignItems:"center",justifyContent:"center",pointerEvents:"none"},children:r("span",{style:{fontSize:10,color:o.muted,fontStyle:"italic"},children:"Double tap: Toggle \u2022 Triple tap: Close"})})]})}function Q({children:t,footer:e,footerHeight:n,disableScrollWrapper:o,contentStyle:s,theme:d,background:u}){return D("div",{style:{flex:1,minHeight:0,display:"flex",flexDirection:"column",backgroundColor:d.background,borderBottomLeftRadius:16,borderBottomRightRadius:16,overflow:"hidden",position:"relative",...s},children:[u?r(tt,{}):null,o?t:r("div",{style:{flex:1,minHeight:0,overflowY:"auto",WebkitOverflowScrolling:"touch",paddingBottom:n},children:t}),e?r("div",{style:{position:"absolute",left:0,right:0,bottom:0,backgroundColor:d.background,borderBottomLeftRadius:16,borderBottomRightRadius:16},children:e}):null]})}const Z="transform 320ms cubic-bezier(0.16, 1, 0.3, 1)";const O="opacity 200ms ease";function ut({props:t,theme:e,viewport:n,effectiveMaxHeight:o,panelHeight:s,setPanelHeight:d,onHeaderTap:u}){const{onClose:w,children:p,header:f,styles:c={},minHeight:g=et,footer:l,footerHeight:m=0,disableScrollWrapper:v,zIndex:R=1e3,background:T=true}=t;const b=F(null);const I=F(null);const[S,C]=y(false);const[$,P]=y(false);const k=F(false);const M=F(s);N(()=>{const x=requestAnimationFrame(()=>P(true));return()=>cancelAnimationFrame(x)},[]);const L=x=>{if(k.current)return;const _=x.currentTarget.getBoundingClientRect().top;const W=x.clientY-_;G(x,{onStart:()=>C(true),onMove:E=>{const A=E.clientY-W;const i=Math.max(g,Math.min(n.height-A,o));M.current=i;if(b.current)b.current.style.height=`${i}px`},onEnd:(E,{dy:A,vy:i,wasTap:a})=>{C(false);if(a){u();return}if(st(i,A,M.current,g)){k.current=true;const H=I.current;if(H){H.style.transition=`${Z}, ${O}`;H.style.transform="translateY(100%)";H.style.opacity="0"}setTimeout(w,220);return}d(M.current)}})};return r("div",{style:{position:"fixed",inset:0,zIndex:R,pointerEvents:"none"},children:r("div",{ref:I,style:{position:"absolute",bottom:0,left:0,right:0,pointerEvents:"auto",transform:$?"translateY(0)":"translateY(100%)",opacity:$?1:0,transition:`${Z}, ${O}`},children:D("div",{ref:b,style:{display:"flex",flexDirection:"column",height:s,backgroundColor:e.panel,borderTopLeftRadius:16,borderTopRightRadius:16,border:`1px solid ${e.border}`,boxShadow:`0 -4px 12px ${e.info}4D, 0 -2px 24px rgba(0,0,0,0.4)`,...c.container},children:[r("div",{onPointerDown:L,style:{minHeight:56,display:"flex",backgroundColor:e.panel,borderTopLeftRadius:16,borderTopRightRadius:16,borderBottom:"1px solid rgba(255, 255, 255, 0.1)",cursor:S?"ns-resize":"grab",touchAction:"none",userSelect:"none"},children:r(K,{header:f,isResizing:S,mode:"bottomSheet",theme:e})}),r(Q,{footer:l,footerHeight:m,disableScrollWrapper:v,contentStyle:c.content,theme:e,background:T,children:p})]})})})}function pt({isActive:t,theme:e}){return r("div",{style:{width:20,height:20,borderRadius:10,margin:5,backgroundColor:t?e.success+"1A":"transparent",border:t?`2px solid ${e.success}`:"2px solid transparent",boxShadow:t?`0 0 8px ${e.success}99`:"none"}})}function ft({props:t,theme:e,viewport:n,insets:o,rect:s,setRect:d,onHeaderTap:u}){const{onClose:w,children:p,header:f,styles:c={},footer:g,footerHeight:l=0,onBack:m,disableScrollWrapper:v,zIndex:R=1e3,background:T=true}=t;const b=F(null);const[I,S]=y(false);const[C,$]=y(false);const[P,k]=y(false);const M=F(s);M.current=s;const L=F(s);N(()=>{const i=requestAnimationFrame(()=>k(true));return()=>cancelAnimationFrame(i)},[]);const x=i=>{L.current=i;const a=b.current;if(!a)return;a.style.transform=`translate(${i.left}px, ${i.top}px)`;a.style.width=`${i.width}px`;a.style.height=`${i.height}px`};const _=i=>{const a=M.current;const H=i.clientX-a.left;const Y=i.clientY-a.top;G(i,{onMove:(B,{dx:z,dy:h})=>{if(Math.abs(z)+Math.abs(h)>5)S(true);x({...L.current,left:B.clientX-H,top:B.clientY-Y})},onEnd:(B,{wasTap:z})=>{S(false);if(z){u();return}const h=L.current;const j={...h,left:Math.max(o.left,Math.min(h.left,n.width-o.right-h.width)),top:Math.max(o.top,Math.min(h.top,n.height-o.bottom-h.height))};x(j);d(j)}})};const W=i=>a=>{a.stopPropagation();const H={...M.current};let Y=false;G(a,{onStart:()=>$(true),onMove:(B,{dx:z,dy:h})=>{if(Math.abs(z)<.5&&Math.abs(h)<.5)return;Y=true;x(rt(i,H,z,h,n,o,it(n.width),nt))},onEnd:()=>{$(false);if(!Y){if(i==="topRight"){w();return}if(i==="topLeft"&&m){m();return}}d(L.current)}})};const E=I||C;const A=[{corner:"topLeft",style:{top:4,left:4}},{corner:"topRight",style:{top:4,right:4}},{corner:"bottomLeft",style:{bottom:4,left:4}},{corner:"bottomRight",style:{bottom:4,right:4}}];return D("div",{ref:b,style:{position:"fixed",top:0,left:0,transform:`translate(${s.left}px, ${s.top}px)`,width:s.width,height:s.height,display:"flex",flexDirection:"column",backgroundColor:e.panel,borderRadius:16,border:E?`2px solid ${e.success}`:`1px solid ${e.border}`,boxShadow:E?`0 0 12px ${e.success}99`:`0 0 20px ${e.info}80, 0 8px 32px rgba(0,0,0,0.5)`,zIndex:R,opacity:P?1:0,transition:O,...c.container},children:[r("div",{onPointerDown:_,style:{minHeight:56,display:"flex",backgroundColor:e.panel,borderTopLeftRadius:14,borderTopRightRadius:14,borderBottom:"1px solid rgba(255, 255, 255, 0.1)",cursor:I?"grabbing":"grab",touchAction:"none",userSelect:"none"},children:r(K,{header:f,isResizing:E,mode:"floating",theme:e})}),r(Q,{footer:g,footerHeight:l,disableScrollWrapper:v,contentStyle:c.content,theme:e,background:T,children:p}),A.map(({corner:i,style:a})=>r("div",{onPointerDown:W(i),style:{position:"absolute",width:30,height:30,zIndex:10,touchAction:"none",cursor:i==="topLeft"||i==="bottomRight"?"nwse-resize":"nesw-resize",...a},children:r(pt,{isActive:E,theme:e})},i))]})}export const BottomSheet=t=>{const{visible:e,onClose:n,maxHeight:o,initialHeight:s=ot,initialMode:d="bottomSheet",onModeChange:u,theme:w}=t;const p={...at,...w};const{viewport:f,insets:c}=dt();const[g,l]=y(d);const[m,v]=y(s);const[R,T]=y(()=>({width:X,height:V,left:(window.innerWidth-X)/2,top:(window.innerHeight-V)/2}));const b=o||f.height-c.top;const I=()=>{const C=g==="bottomSheet"?"floating":"bottomSheet";l(C);u?.(C)};const S=lt(I,n);if(!e){return null}if(g==="floating"){return r(ft,{props:t,theme:p,viewport:f,insets:c,rect:R,setRect:T,onHeaderTap:S})}return r(ut,{props:t,theme:p,viewport:f,effectiveMaxHeight:b,panelHeight:Math.min(m,b),setPanelHeight:v,onHeaderTap:S})};
+"use strict";import{useState as y,useRef as F,useEffect as N}from"react";import{ToolBackground as tt}from"@buoy-gg/shared-ui";import{MIN_HEIGHT as et,DEFAULT_HEIGHT as ot,FLOATING_WIDTH as X,FLOATING_HEIGHT as V,FLOATING_MIN_HEIGHT as nt,floatingMinWidth as it,resizeCorner as rt,shouldCloseOnRelease as st}from"./bottomSheetGeometry";import{useMultiTap as lt}from"./useMultiTap";import{jsx as r,jsxs as D}from"react/jsx-runtime";const at={background:"rgba(8, 12, 21, 0.98)",panel:"rgba(16, 22, 35, 0.98)",border:"#00B8E666",primary:"#FFFFFF",secondary:"#B8BFC9",muted:"#7A8599",success:"#4AFF9F",error:"#FF5252",info:"#00B8E6"};function ct(t){window.addEventListener("resize",t);window.visualViewport?.addEventListener("resize",t);return()=>{window.removeEventListener("resize",t);window.visualViewport?.removeEventListener("resize",t)}}function q(){return{width:window.innerWidth,height:window.innerHeight}}function U(){const t=document.createElement("div");t.style.cssText="position:fixed;visibility:hidden;pointer-events:none;top:env(safe-area-inset-top);bottom:env(safe-area-inset-bottom);left:env(safe-area-inset-left);right:env(safe-area-inset-right)";document.body.appendChild(t);const e=getComputedStyle(t);const n={top:parseFloat(e.top)||0,bottom:parseFloat(e.bottom)||0,left:parseFloat(e.left)||0,right:parseFloat(e.right)||0};document.body.removeChild(t);return n}function dt(){const[t,e]=y(()=>({viewport:q(),insets:U()}));N(()=>{return ct(()=>{e({viewport:q(),insets:U()})})},[]);return t}function G(t,e){if(!t.isPrimary)return;const n=t.currentTarget;const o=t.clientX;const s=t.clientY;let d=t.clientY;let p=performance.now();let w=0;let u=0;e.onStart?.(t);n.setPointerCapture(t.pointerId);const f=l=>{if(l.pointerId!==t.pointerId)return;const m=l.clientX-o;const v=l.clientY-s;u=Math.max(u,Math.abs(m)+Math.abs(v));const R=performance.now();const T=R-p;if(T>0){w=(l.clientY-d)/T;d=l.clientY;p=R}e.onMove(l,{dx:m,dy:v})};const c=l=>{if(l.pointerId!==t.pointerId)return;g();e.onEnd(l,{dx:l.clientX-o,dy:l.clientY-s,vy:w,wasTap:u<=5})};const g=()=>{n.removeEventListener("pointermove",f);n.removeEventListener("pointerup",c);n.removeEventListener("pointercancel",c)};n.addEventListener("pointermove",f);n.addEventListener("pointerup",c);n.addEventListener("pointercancel",c)}function J({isResizing:t,mode:e,hasCustomContent:n=false,theme:o}){return D("div",{style:{display:"flex",flexDirection:"column",alignItems:"center",padding:n?"6px 0 2px":"8px 0",position:"relative"},children:[r("div",{style:{width:t?40:e==="floating"?50:40,height:e==="floating"?5:3,backgroundColor:t?o.success:e==="floating"?o.muted:o.info+"99",borderRadius:2,boxShadow:`0 0 4px ${o.info}CC`}}),t&&e==="bottomSheet"&&r("div",{style:{position:"absolute",display:"flex",flexDirection:"row",gap:2,marginTop:12},children:[0,1,2].map(s=>r("div",{style:{width:12,height:1,backgroundColor:o.success,opacity:.6}},s))})]})}function K({header:t,isResizing:e,mode:n,theme:o}){if(t?.customContent){return D("div",{style:{flex:1,display:"flex",flexDirection:"column",justifyContent:"center"},children:[r(J,{isResizing:e,mode:n,hasCustomContent:true,theme:o}),t.customContent]})}return D("div",{style:{flex:1,display:"flex",flexDirection:"column",justifyContent:"center",position:"relative"},children:[r(J,{isResizing:e,mode:n,theme:o}),D("div",{style:{padding:"0 16px",display:"flex",flexDirection:"column",alignItems:"center"},children:[t?.title&&r("span",{style:{fontSize:16,fontWeight:600,color:o.primary},children:t.title}),t?.subtitle&&r("span",{style:{fontSize:12,color:o.secondary,paddingTop:4},children:t.subtitle})]}),r("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",padding:"4px 16px",pointerEvents:"none"},children:r("span",{style:{fontSize:10,color:o.muted,fontStyle:"italic"},children:"Double tap: Toggle \u2022 Triple tap: Close"})})]})}function Q({children:t,footer:e,footerHeight:n,disableScrollWrapper:o,contentStyle:s,theme:d,background:p}){return D("div",{style:{flex:1,minHeight:0,display:"flex",flexDirection:"column",backgroundColor:d.background,borderBottomLeftRadius:16,borderBottomRightRadius:16,overflow:"hidden",position:"relative",...s},children:[p?r(tt,{}):null,o?t:r("div",{style:{flex:1,minHeight:0,overflowY:"auto",WebkitOverflowScrolling:"touch",paddingBottom:n},children:t}),e?r("div",{style:{position:"absolute",left:0,right:0,bottom:0,backgroundColor:d.background,borderBottomLeftRadius:16,borderBottomRightRadius:16},children:e}):null]})}const Z="transform 320ms cubic-bezier(0.16, 1, 0.3, 1)";const O="opacity 200ms ease";function pt({props:t,theme:e,viewport:n,effectiveMaxHeight:o,panelHeight:s,setPanelHeight:d,onHeaderTap:p}){const{onClose:w,children:u,header:f,styles:c={},minHeight:g=et,footer:l,footerHeight:m=0,disableScrollWrapper:v,zIndex:R=1e3,background:T=true}=t;const b=F(null);const I=F(null);const[S,C]=y(false);const[$,P]=y(false);const k=F(false);const M=F(s);N(()=>{const x=requestAnimationFrame(()=>P(true));return()=>cancelAnimationFrame(x)},[]);const L=x=>{if(k.current)return;const _=x.currentTarget.getBoundingClientRect().top;const W=x.clientY-_;G(x,{onStart:()=>C(true),onMove:E=>{const A=E.clientY-W;const i=Math.max(g,Math.min(n.height-A,o));M.current=i;if(b.current)b.current.style.height=`${i}px`},onEnd:(E,{dy:A,vy:i,wasTap:a})=>{C(false);if(a){p();return}if(st(i,A,M.current,g)){k.current=true;const H=I.current;if(H){H.style.transition=`${Z}, ${O}`;H.style.transform="translateY(100%)";H.style.opacity="0"}setTimeout(w,220);return}d(M.current)}})};return r("div",{style:{position:"fixed",inset:0,zIndex:R,pointerEvents:"none"},children:r("div",{ref:I,style:{position:"absolute",bottom:0,left:0,right:0,pointerEvents:"auto",transform:$?"translateY(0)":"translateY(100%)",opacity:$?1:0,transition:`${Z}, ${O}`},children:D("div",{ref:b,style:{display:"flex",flexDirection:"column",height:s,backgroundColor:e.panel,borderTopLeftRadius:16,borderTopRightRadius:16,border:`1px solid ${e.border}`,boxShadow:`0 -4px 12px ${e.info}4D, 0 -2px 24px rgba(0,0,0,0.4)`,...c.container},children:[r("div",{onPointerDown:L,style:{minHeight:56,display:"flex",backgroundColor:e.panel,borderTopLeftRadius:16,borderTopRightRadius:16,borderBottom:"1px solid rgba(255, 255, 255, 0.1)",cursor:S?"ns-resize":"grab",touchAction:"none",userSelect:"none"},children:r(K,{header:f,isResizing:S,mode:"bottomSheet",theme:e})}),r(Q,{footer:l,footerHeight:m,disableScrollWrapper:v,contentStyle:c.content,theme:e,background:T,children:u})]})})})}function ut({isActive:t,theme:e}){return r("div",{style:{width:20,height:20,borderRadius:10,margin:5,backgroundColor:t?e.success+"1A":"transparent",border:t?`2px solid ${e.success}`:"2px solid transparent",boxShadow:t?`0 0 8px ${e.success}99`:"none"}})}function ft({props:t,theme:e,viewport:n,insets:o,rect:s,setRect:d,onHeaderTap:p}){const{onClose:w,children:u,header:f,styles:c={},footer:g,footerHeight:l=0,onBack:m,disableScrollWrapper:v,zIndex:R=1e3,background:T=true}=t;const b=F(null);const[I,S]=y(false);const[C,$]=y(false);const[P,k]=y(false);const M=F(s);M.current=s;const L=F(s);N(()=>{const i=requestAnimationFrame(()=>k(true));return()=>cancelAnimationFrame(i)},[]);const x=i=>{L.current=i;const a=b.current;if(!a)return;a.style.transform=`translate(${i.left}px, ${i.top}px)`;a.style.width=`${i.width}px`;a.style.height=`${i.height}px`};const _=i=>{const a=M.current;const H=i.clientX-a.left;const Y=i.clientY-a.top;G(i,{onMove:(B,{dx:z,dy:h})=>{if(Math.abs(z)+Math.abs(h)>5)S(true);x({...L.current,left:B.clientX-H,top:B.clientY-Y})},onEnd:(B,{wasTap:z})=>{S(false);if(z){p();return}const h=L.current;const j={...h,left:Math.max(o.left,Math.min(h.left,n.width-o.right-h.width)),top:Math.max(o.top,Math.min(h.top,n.height-o.bottom-h.height))};x(j);d(j)}})};const W=i=>a=>{a.stopPropagation();const H={...M.current};let Y=false;G(a,{onStart:()=>$(true),onMove:(B,{dx:z,dy:h})=>{if(Math.abs(z)<.5&&Math.abs(h)<.5)return;Y=true;x(rt(i,H,z,h,n,o,it(n.width),nt))},onEnd:()=>{$(false);if(!Y){if(i==="topRight"){w();return}if(i==="topLeft"&&m){m();return}}d(L.current)}})};const E=I||C;const A=[{corner:"topLeft",style:{top:4,left:4}},{corner:"topRight",style:{top:4,right:4}},{corner:"bottomLeft",style:{bottom:4,left:4}},{corner:"bottomRight",style:{bottom:4,right:4}}];return D("div",{ref:b,style:{position:"fixed",top:0,left:0,transform:`translate(${s.left}px, ${s.top}px)`,width:s.width,height:s.height,display:"flex",flexDirection:"column",backgroundColor:e.panel,borderRadius:16,border:E?`2px solid ${e.success}`:`1px solid ${e.border}`,boxShadow:E?`0 0 12px ${e.success}99`:`0 0 20px ${e.info}80, 0 8px 32px rgba(0,0,0,0.5)`,zIndex:R,opacity:P?1:0,transition:O,...c.container},children:[r("div",{onPointerDown:_,style:{minHeight:56,display:"flex",backgroundColor:e.panel,borderTopLeftRadius:14,borderTopRightRadius:14,borderBottom:"1px solid rgba(255, 255, 255, 0.1)",cursor:I?"grabbing":"grab",touchAction:"none",userSelect:"none"},children:r(K,{header:f,isResizing:E,mode:"floating",theme:e})}),r(Q,{footer:g,footerHeight:l,disableScrollWrapper:v,contentStyle:c.content,theme:e,background:T,children:u}),A.map(({corner:i,style:a})=>r("div",{onPointerDown:W(i),style:{position:"absolute",width:30,height:30,zIndex:10,touchAction:"none",cursor:i==="topLeft"||i==="bottomRight"?"nwse-resize":"nesw-resize",...a},children:r(ut,{isActive:E,theme:e})},i))]})}export const BottomSheet=t=>{const{visible:e,onClose:n,maxHeight:o,initialHeight:s=ot,initialMode:d="bottomSheet",onModeChange:p,theme:w}=t;const u={...at,...w};const{viewport:f,insets:c}=dt();const[g,l]=y(d);const[m,v]=y(s);const[R,T]=y(()=>({width:X,height:V,left:(window.innerWidth-X)/2,top:(window.innerHeight-V)/2}));const b=o||f.height-c.top;const I=()=>{const C=g==="bottomSheet"?"floating":"bottomSheet";l(C);p?.(C)};const S=lt(I,n);if(!e){return null}if(g==="floating"){return r(ft,{props:t,theme:u,viewport:f,insets:c,rect:R,setRect:T,onHeaderTap:S})}return r(pt,{props:t,theme:u,viewport:f,effectiveMaxHeight:b,panelHeight:Math.min(m,b),setPanelHeight:v,onHeaderTap:S})};

package/lib/web/index.mjs

@@ -1 +1 @@
-"use client";var pe=(()=>{try{let t=globalThis.Capacitor;if(t&&typeof t.isNativePlatform=="function"&&t.isNativePlatform())return t.DEBUG===true}catch{}return process.env.NODE_ENV!=="production"})();typeof window<"u"&&typeof globalThis.global>"u"&&(globalThis.global=globalThis);import{useState as C,useRef as H,useEffect as N}from"react";import{ToolBackground as Z}from"@buoy-gg/shared-ui/web";function ee(t){return t*.25}function te(t,e,n,o,r,s,d,p=80){let m=Math.max(0,s.left||0),f=r.width-Math.max(0,s.right||0),c=Math.max(0,s.top||0),y=r.height-Math.max(0,s.bottom||0),l=e.left+e.width,h=e.top+e.height,g=e.left,b=e.top,v=l,x=h;switch(t){case"topLeft":{g=Math.max(m,Math.min(e.left+n,l-d)),b=Math.max(c,Math.min(e.top+o,h-p));break}case"topRight":{v=Math.min(f,Math.max(l+n,e.left+d)),b=Math.max(c,Math.min(e.top+o,h-p));break}case"bottomLeft":{g=Math.max(m,Math.min(e.left+n,l-d)),x=Math.min(y,Math.max(h+o,e.top+p));break}case"bottomRight":{v=Math.min(f,Math.max(l+n,e.left+d)),x=Math.min(y,Math.max(h+o,e.top+p));break}}return{left:g,top:b,width:Math.max(d,v-g),height:Math.max(p,x-b)}}function oe(t,e,n,o){return t>.8&&e>50||e>150&&n<=o}import{useEffect as ne,useRef as B}from"react";function re(t,e){let n=B(0),o=B(0),r=B(null),s=B({onDouble:t,onTriple:e});return s.current={onDouble:t,onTriple:e},ne(()=>()=>{r.current&&clearTimeout(r.current)},[]),B(()=>{let d=Date.now();d-n.current>500&&(o.current=0),o.current++,n.current=d,r.current&&clearTimeout(r.current),r.current=setTimeout(()=>{o.current===2?s.current.onDouble():o.current>=3&&s.current.onTriple(),o.current=0},300)}).current}import{jsx as a,jsxs as z}from"react/jsx-runtime";var ie={background:"rgba(8, 12, 21, 0.98)",panel:"rgba(16, 22, 35, 0.98)",border:"#00B8E666",primary:"#FFFFFF",secondary:"#B8BFC9",muted:"#7A8599",success:"#4AFF9F",error:"#FF5252",info:"#00B8E6"};function ae(t){return window.addEventListener("resize",t),window.visualViewport?.addEventListener("resize",t),()=>{window.removeEventListener("resize",t),window.visualViewport?.removeEventListener("resize",t)}}function G(){return{width:window.innerWidth,height:window.innerHeight}}function U(){let t=document.createElement("div");t.style.cssText="position:fixed;visibility:hidden;pointer-events:none;top:env(safe-area-inset-top);bottom:env(safe-area-inset-bottom);left:env(safe-area-inset-left);right:env(safe-area-inset-right)",document.body.appendChild(t);let e=getComputedStyle(t),n={top:parseFloat(e.top)||0,bottom:parseFloat(e.bottom)||0,left:parseFloat(e.left)||0,right:parseFloat(e.right)||0};return document.body.removeChild(t),n}function le(){let[t,e]=C(()=>({viewport:G(),insets:U()}));return N(()=>ae(()=>{e({viewport:G(),insets:U()})}),[]),t}function O(t,e){if(!t.isPrimary)return;let n=t.currentTarget,o=t.clientX,r=t.clientY,s=t.clientY,d=performance.now(),p=0,m=0;e.onStart?.(t),n.setPointerCapture(t.pointerId);let f=l=>{if(l.pointerId!==t.pointerId)return;let h=l.clientX-o,g=l.clientY-r;m=Math.max(m,Math.abs(h)+Math.abs(g));let b=performance.now(),v=b-d;v>0&&(p=(l.clientY-s)/v,s=l.clientY,d=b),e.onMove(l,{dx:h,dy:g})},c=l=>{l.pointerId===t.pointerId&&(y(),e.onEnd(l,{dx:l.clientX-o,dy:l.clientY-r,vy:p,wasTap:m<=5}))},y=()=>{n.removeEventListener("pointermove",f),n.removeEventListener("pointerup",c),n.removeEventListener("pointercancel",c)};n.addEventListener("pointermove",f),n.addEventListener("pointerup",c),n.addEventListener("pointercancel",c)}function _({isResizing:t,mode:e,hasCustomContent:n=false,theme:o}){return z("div",{style:{display:"flex",flexDirection:"column",alignItems:"center",padding:n?"6px 0 2px":"8px 0",position:"relative"},children:[a("div",{style:{width:t?40:e==="floating"?50:40,height:e==="floating"?5:3,backgroundColor:t?o.success:e==="floating"?o.muted:o.info+"99",borderRadius:2,boxShadow:`0 0 4px ${o.info}CC`}}),t&&e==="bottomSheet"&&a("div",{style:{position:"absolute",display:"flex",flexDirection:"row",gap:2,marginTop:12},children:[0,1,2].map(r=>a("div",{style:{width:12,height:1,backgroundColor:o.success,opacity:.6}},r))})]})}function J({header:t,isResizing:e,mode:n,theme:o}){return t?.customContent?z("div",{style:{flex:1,display:"flex",flexDirection:"column",justifyContent:"center"},children:[a(_,{isResizing:e,mode:n,hasCustomContent:true,theme:o}),t.customContent]}):z("div",{style:{flex:1,display:"flex",flexDirection:"column",justifyContent:"center",position:"relative"},children:[a(_,{isResizing:e,mode:n,theme:o}),z("div",{style:{padding:"0 16px",display:"flex",flexDirection:"column",alignItems:"center"},children:[t?.title&&a("span",{style:{fontSize:16,fontWeight:600,color:o.primary},children:t.title}),t?.subtitle&&a("span",{style:{fontSize:12,color:o.secondary,paddingTop:4},children:t.subtitle})]}),a("div",{style:{position:"absolute",inset:0,display:"flex",alignItems:"center",justifyContent:"center",pointerEvents:"none"},children:a("span",{style:{fontSize:10,color:o.muted,fontStyle:"italic"},children:"Double tap: Toggle \u2022 Triple tap: Close"})})]})}function K({children:t,footer:e,footerHeight:n,disableScrollWrapper:o,contentStyle:r,theme:s,background:d}){return z("div",{style:{flex:1,minHeight:0,display:"flex",flexDirection:"column",backgroundColor:s.background,borderBottomLeftRadius:16,borderBottomRightRadius:16,overflow:"hidden",position:"relative",...r},children:[d?a(Z,{}):null,o?t:a("div",{style:{flex:1,minHeight:0,overflowY:"auto",WebkitOverflowScrolling:"touch",paddingBottom:n},children:t}),e?a("div",{style:{position:"absolute",left:0,right:0,bottom:0,backgroundColor:s.background,borderBottomLeftRadius:16,borderBottomRightRadius:16},children:e}):null]})}var Q="transform 320ms cubic-bezier(0.16, 1, 0.3, 1)",V="opacity 200ms ease";function se({props:t,theme:e,viewport:n,effectiveMaxHeight:o,panelHeight:r,setPanelHeight:s,onHeaderTap:d}){let{onClose:p,children:m,header:f,styles:c={},minHeight:y=100,footer:l,footerHeight:h=0,disableScrollWrapper:g,zIndex:b=1e3,background:v=true}=t,x=H(null),R=H(null),[S,Y]=C(false),[$,W]=C(false),A=H(false),E=H(r);N(()=>{let M=requestAnimationFrame(()=>W(true));return()=>cancelAnimationFrame(M)},[]);let L=M=>{if(A.current)return;let j=M.currentTarget.getBoundingClientRect().top,X=M.clientY-j;O(M,{onStart:()=>Y(true),onMove:k=>{let D=k.clientY-X,i=Math.max(y,Math.min(n.height-D,o));E.current=i,x.current&&(x.current.style.height=`${i}px`)},onEnd:(k,{dy:D,vy:i,wasTap:u})=>{if(Y(false),u){d();return}if(oe(i,D,E.current,y)){A.current=true;let T=R.current;T&&(T.style.transition=`${Q}, ${V}`,T.style.transform="translateY(100%)",T.style.opacity="0"),setTimeout(p,220);return}s(E.current)}})};return a("div",{style:{position:"fixed",inset:0,zIndex:b,pointerEvents:"none"},children:a("div",{ref:R,style:{position:"absolute",bottom:0,left:0,right:0,pointerEvents:"auto",transform:$?"translateY(0)":"translateY(100%)",opacity:$?1:0,transition:`${Q}, ${V}`},children:z("div",{ref:x,style:{display:"flex",flexDirection:"column",height:r,backgroundColor:e.panel,borderTopLeftRadius:16,borderTopRightRadius:16,border:`1px solid ${e.border}`,boxShadow:`0 -4px 12px ${e.info}4D, 0 -2px 24px rgba(0,0,0,0.4)`,...c.container},children:[a("div",{onPointerDown:L,style:{minHeight:56,display:"flex",backgroundColor:e.panel,borderTopLeftRadius:16,borderTopRightRadius:16,borderBottom:"1px solid rgba(255, 255, 255, 0.1)",cursor:S?"ns-resize":"grab",touchAction:"none",userSelect:"none"},children:a(J,{header:f,isResizing:S,mode:"bottomSheet",theme:e})}),a(K,{footer:l,footerHeight:h,disableScrollWrapper:g,contentStyle:c.content,theme:e,background:v,children:m})]})})})}function de({isActive:t,theme:e}){return a("div",{style:{width:20,height:20,borderRadius:10,margin:5,backgroundColor:t?e.success+"1A":"transparent",border:t?`2px solid ${e.success}`:"2px solid transparent",boxShadow:t?`0 0 8px ${e.success}99`:"none"}})}function ce({props:t,theme:e,viewport:n,insets:o,rect:r,setRect:s,onHeaderTap:d}){let{onClose:p,children:m,header:f,styles:c={},footer:y,footerHeight:l=0,onBack:h,disableScrollWrapper:g,zIndex:b=1e3,background:v=true}=t,x=H(null),[R,S]=C(false),[Y,$]=C(false),[W,A]=C(false),E=H(r);E.current=r;let L=H(r);N(()=>{let i=requestAnimationFrame(()=>A(true));return()=>cancelAnimationFrame(i)},[]);let M=i=>{L.current=i;let u=x.current;u&&(u.style.transform=`translate(${i.left}px, ${i.top}px)`,u.style.width=`${i.width}px`,u.style.height=`${i.height}px`)},j=i=>{let u=E.current,T=i.clientX-u.left,I=i.clientY-u.top;O(i,{onMove:(P,{dx:F,dy:w})=>{Math.abs(F)+Math.abs(w)>5&&S(true),M({...L.current,left:P.clientX-T,top:P.clientY-I})},onEnd:(P,{wasTap:F})=>{if(S(false),F){d();return}let w=L.current,q={...w,left:Math.max(o.left,Math.min(w.left,n.width-o.right-w.width)),top:Math.max(o.top,Math.min(w.top,n.height-o.bottom-w.height))};M(q),s(q)}})},X=i=>u=>{u.stopPropagation();let T={...E.current},I=false;O(u,{onStart:()=>$(true),onMove:(P,{dx:F,dy:w})=>{Math.abs(F)<.5&&Math.abs(w)<.5||(I=true,M(te(i,T,F,w,n,o,ee(n.width),80)))},onEnd:()=>{if($(false),!I){if(i==="topRight"){p();return}if(i==="topLeft"&&h){h();return}}s(L.current)}})},k=R||Y,D=[{corner:"topLeft",style:{top:4,left:4}},{corner:"topRight",style:{top:4,right:4}},{corner:"bottomLeft",style:{bottom:4,left:4}},{corner:"bottomRight",style:{bottom:4,right:4}}];return z("div",{ref:x,style:{position:"fixed",top:0,left:0,transform:`translate(${r.left}px, ${r.top}px)`,width:r.width,height:r.height,display:"flex",flexDirection:"column",backgroundColor:e.panel,borderRadius:16,border:k?`2px solid ${e.success}`:`1px solid ${e.border}`,boxShadow:k?`0 0 12px ${e.success}99`:`0 0 20px ${e.info}80, 0 8px 32px rgba(0,0,0,0.5)`,zIndex:b,opacity:W?1:0,transition:V,...c.container},children:[a("div",{onPointerDown:j,style:{minHeight:56,display:"flex",backgroundColor:e.panel,borderTopLeftRadius:14,borderTopRightRadius:14,borderBottom:"1px solid rgba(255, 255, 255, 0.1)",cursor:R?"grabbing":"grab",touchAction:"none",userSelect:"none"},children:a(J,{header:f,isResizing:k,mode:"floating",theme:e})}),a(K,{footer:y,footerHeight:l,disableScrollWrapper:g,contentStyle:c.content,theme:e,background:v,children:m}),D.map(({corner:i,style:u})=>a("div",{onPointerDown:X(i),style:{position:"absolute",width:30,height:30,zIndex:10,touchAction:"none",cursor:i==="topLeft"||i==="bottomRight"?"nwse-resize":"nesw-resize",...u},children:a(de,{isActive:k,theme:e})},i))]})}var he=t=>{let{visible:e,onClose:n,maxHeight:o,initialHeight:r=400,initialMode:s="bottomSheet",onModeChange:d,theme:p}=t,m={...ie,...p},{viewport:f,insets:c}=le(),[y,l]=C(s),[h,g]=C(r),[b,v]=C(()=>({width:380,height:500,left:(window.innerWidth-380)/2,top:(window.innerHeight-500)/2})),x=o||f.height-c.top,R=re(()=>{let S=y==="bottomSheet"?"floating":"bottomSheet";l(S),d?.(S)},n);return e?y==="floating"?a(ce,{props:t,theme:m,viewport:f,insets:c,rect:b,setRect:v,onHeaderTap:R}):a(se,{props:t,theme:m,viewport:f,effectiveMaxHeight:x,panelHeight:Math.min(h,x),setPanelHeight:g,onHeaderTap:R}):null};export{he as BottomSheet};
+"use client";var pe=(()=>{try{let t=globalThis.Capacitor;if(t&&typeof t.isNativePlatform=="function"&&t.isNativePlatform())return t.DEBUG===true}catch{}return process.env.NODE_ENV!=="production"})();typeof window<"u"&&typeof globalThis.global>"u"&&(globalThis.global=globalThis);import{useState as C,useRef as H,useEffect as N}from"react";import{ToolBackground as Z}from"@buoy-gg/shared-ui/web";function ee(t){return t*.25}function te(t,e,n,o,r,s,d,p=80){let m=Math.max(0,s.left||0),f=r.width-Math.max(0,s.right||0),c=Math.max(0,s.top||0),y=r.height-Math.max(0,s.bottom||0),l=e.left+e.width,h=e.top+e.height,g=e.left,b=e.top,v=l,x=h;switch(t){case"topLeft":{g=Math.max(m,Math.min(e.left+n,l-d)),b=Math.max(c,Math.min(e.top+o,h-p));break}case"topRight":{v=Math.min(f,Math.max(l+n,e.left+d)),b=Math.max(c,Math.min(e.top+o,h-p));break}case"bottomLeft":{g=Math.max(m,Math.min(e.left+n,l-d)),x=Math.min(y,Math.max(h+o,e.top+p));break}case"bottomRight":{v=Math.min(f,Math.max(l+n,e.left+d)),x=Math.min(y,Math.max(h+o,e.top+p));break}}return{left:g,top:b,width:Math.max(d,v-g),height:Math.max(p,x-b)}}function oe(t,e,n,o){return t>.8&&e>50||e>150&&n<=o}import{useEffect as ne,useRef as B}from"react";function re(t,e){let n=B(0),o=B(0),r=B(null),s=B({onDouble:t,onTriple:e});return s.current={onDouble:t,onTriple:e},ne(()=>()=>{r.current&&clearTimeout(r.current)},[]),B(()=>{let d=Date.now();d-n.current>500&&(o.current=0),o.current++,n.current=d,r.current&&clearTimeout(r.current),r.current=setTimeout(()=>{o.current===2?s.current.onDouble():o.current>=3&&s.current.onTriple(),o.current=0},300)}).current}import{jsx as a,jsxs as z}from"react/jsx-runtime";var ie={background:"rgba(8, 12, 21, 0.98)",panel:"rgba(16, 22, 35, 0.98)",border:"#00B8E666",primary:"#FFFFFF",secondary:"#B8BFC9",muted:"#7A8599",success:"#4AFF9F",error:"#FF5252",info:"#00B8E6"};function ae(t){return window.addEventListener("resize",t),window.visualViewport?.addEventListener("resize",t),()=>{window.removeEventListener("resize",t),window.visualViewport?.removeEventListener("resize",t)}}function G(){return{width:window.innerWidth,height:window.innerHeight}}function U(){let t=document.createElement("div");t.style.cssText="position:fixed;visibility:hidden;pointer-events:none;top:env(safe-area-inset-top);bottom:env(safe-area-inset-bottom);left:env(safe-area-inset-left);right:env(safe-area-inset-right)",document.body.appendChild(t);let e=getComputedStyle(t),n={top:parseFloat(e.top)||0,bottom:parseFloat(e.bottom)||0,left:parseFloat(e.left)||0,right:parseFloat(e.right)||0};return document.body.removeChild(t),n}function le(){let[t,e]=C(()=>({viewport:G(),insets:U()}));return N(()=>ae(()=>{e({viewport:G(),insets:U()})}),[]),t}function O(t,e){if(!t.isPrimary)return;let n=t.currentTarget,o=t.clientX,r=t.clientY,s=t.clientY,d=performance.now(),p=0,m=0;e.onStart?.(t),n.setPointerCapture(t.pointerId);let f=l=>{if(l.pointerId!==t.pointerId)return;let h=l.clientX-o,g=l.clientY-r;m=Math.max(m,Math.abs(h)+Math.abs(g));let b=performance.now(),v=b-d;v>0&&(p=(l.clientY-s)/v,s=l.clientY,d=b),e.onMove(l,{dx:h,dy:g})},c=l=>{l.pointerId===t.pointerId&&(y(),e.onEnd(l,{dx:l.clientX-o,dy:l.clientY-r,vy:p,wasTap:m<=5}))},y=()=>{n.removeEventListener("pointermove",f),n.removeEventListener("pointerup",c),n.removeEventListener("pointercancel",c)};n.addEventListener("pointermove",f),n.addEventListener("pointerup",c),n.addEventListener("pointercancel",c)}function _({isResizing:t,mode:e,hasCustomContent:n=false,theme:o}){return z("div",{style:{display:"flex",flexDirection:"column",alignItems:"center",padding:n?"6px 0 2px":"8px 0",position:"relative"},children:[a("div",{style:{width:t?40:e==="floating"?50:40,height:e==="floating"?5:3,backgroundColor:t?o.success:e==="floating"?o.muted:o.info+"99",borderRadius:2,boxShadow:`0 0 4px ${o.info}CC`}}),t&&e==="bottomSheet"&&a("div",{style:{position:"absolute",display:"flex",flexDirection:"row",gap:2,marginTop:12},children:[0,1,2].map(r=>a("div",{style:{width:12,height:1,backgroundColor:o.success,opacity:.6}},r))})]})}function J({header:t,isResizing:e,mode:n,theme:o}){return t?.customContent?z("div",{style:{flex:1,display:"flex",flexDirection:"column",justifyContent:"center"},children:[a(_,{isResizing:e,mode:n,hasCustomContent:true,theme:o}),t.customContent]}):z("div",{style:{flex:1,display:"flex",flexDirection:"column",justifyContent:"center",position:"relative"},children:[a(_,{isResizing:e,mode:n,theme:o}),z("div",{style:{padding:"0 16px",display:"flex",flexDirection:"column",alignItems:"center"},children:[t?.title&&a("span",{style:{fontSize:16,fontWeight:600,color:o.primary},children:t.title}),t?.subtitle&&a("span",{style:{fontSize:12,color:o.secondary,paddingTop:4},children:t.subtitle})]}),a("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",padding:"4px 16px",pointerEvents:"none"},children:a("span",{style:{fontSize:10,color:o.muted,fontStyle:"italic"},children:"Double tap: Toggle \u2022 Triple tap: Close"})})]})}function K({children:t,footer:e,footerHeight:n,disableScrollWrapper:o,contentStyle:r,theme:s,background:d}){return z("div",{style:{flex:1,minHeight:0,display:"flex",flexDirection:"column",backgroundColor:s.background,borderBottomLeftRadius:16,borderBottomRightRadius:16,overflow:"hidden",position:"relative",...r},children:[d?a(Z,{}):null,o?t:a("div",{style:{flex:1,minHeight:0,overflowY:"auto",WebkitOverflowScrolling:"touch",paddingBottom:n},children:t}),e?a("div",{style:{position:"absolute",left:0,right:0,bottom:0,backgroundColor:s.background,borderBottomLeftRadius:16,borderBottomRightRadius:16},children:e}):null]})}var Q="transform 320ms cubic-bezier(0.16, 1, 0.3, 1)",V="opacity 200ms ease";function se({props:t,theme:e,viewport:n,effectiveMaxHeight:o,panelHeight:r,setPanelHeight:s,onHeaderTap:d}){let{onClose:p,children:m,header:f,styles:c={},minHeight:y=100,footer:l,footerHeight:h=0,disableScrollWrapper:g,zIndex:b=1e3,background:v=true}=t,x=H(null),R=H(null),[S,Y]=C(false),[$,W]=C(false),A=H(false),E=H(r);N(()=>{let M=requestAnimationFrame(()=>W(true));return()=>cancelAnimationFrame(M)},[]);let L=M=>{if(A.current)return;let j=M.currentTarget.getBoundingClientRect().top,X=M.clientY-j;O(M,{onStart:()=>Y(true),onMove:k=>{let D=k.clientY-X,i=Math.max(y,Math.min(n.height-D,o));E.current=i,x.current&&(x.current.style.height=`${i}px`)},onEnd:(k,{dy:D,vy:i,wasTap:u})=>{if(Y(false),u){d();return}if(oe(i,D,E.current,y)){A.current=true;let T=R.current;T&&(T.style.transition=`${Q}, ${V}`,T.style.transform="translateY(100%)",T.style.opacity="0"),setTimeout(p,220);return}s(E.current)}})};return a("div",{style:{position:"fixed",inset:0,zIndex:b,pointerEvents:"none"},children:a("div",{ref:R,style:{position:"absolute",bottom:0,left:0,right:0,pointerEvents:"auto",transform:$?"translateY(0)":"translateY(100%)",opacity:$?1:0,transition:`${Q}, ${V}`},children:z("div",{ref:x,style:{display:"flex",flexDirection:"column",height:r,backgroundColor:e.panel,borderTopLeftRadius:16,borderTopRightRadius:16,border:`1px solid ${e.border}`,boxShadow:`0 -4px 12px ${e.info}4D, 0 -2px 24px rgba(0,0,0,0.4)`,...c.container},children:[a("div",{onPointerDown:L,style:{minHeight:56,display:"flex",backgroundColor:e.panel,borderTopLeftRadius:16,borderTopRightRadius:16,borderBottom:"1px solid rgba(255, 255, 255, 0.1)",cursor:S?"ns-resize":"grab",touchAction:"none",userSelect:"none"},children:a(J,{header:f,isResizing:S,mode:"bottomSheet",theme:e})}),a(K,{footer:l,footerHeight:h,disableScrollWrapper:g,contentStyle:c.content,theme:e,background:v,children:m})]})})})}function de({isActive:t,theme:e}){return a("div",{style:{width:20,height:20,borderRadius:10,margin:5,backgroundColor:t?e.success+"1A":"transparent",border:t?`2px solid ${e.success}`:"2px solid transparent",boxShadow:t?`0 0 8px ${e.success}99`:"none"}})}function ce({props:t,theme:e,viewport:n,insets:o,rect:r,setRect:s,onHeaderTap:d}){let{onClose:p,children:m,header:f,styles:c={},footer:y,footerHeight:l=0,onBack:h,disableScrollWrapper:g,zIndex:b=1e3,background:v=true}=t,x=H(null),[R,S]=C(false),[Y,$]=C(false),[W,A]=C(false),E=H(r);E.current=r;let L=H(r);N(()=>{let i=requestAnimationFrame(()=>A(true));return()=>cancelAnimationFrame(i)},[]);let M=i=>{L.current=i;let u=x.current;u&&(u.style.transform=`translate(${i.left}px, ${i.top}px)`,u.style.width=`${i.width}px`,u.style.height=`${i.height}px`)},j=i=>{let u=E.current,T=i.clientX-u.left,I=i.clientY-u.top;O(i,{onMove:(P,{dx:F,dy:w})=>{Math.abs(F)+Math.abs(w)>5&&S(true),M({...L.current,left:P.clientX-T,top:P.clientY-I})},onEnd:(P,{wasTap:F})=>{if(S(false),F){d();return}let w=L.current,q={...w,left:Math.max(o.left,Math.min(w.left,n.width-o.right-w.width)),top:Math.max(o.top,Math.min(w.top,n.height-o.bottom-w.height))};M(q),s(q)}})},X=i=>u=>{u.stopPropagation();let T={...E.current},I=false;O(u,{onStart:()=>$(true),onMove:(P,{dx:F,dy:w})=>{Math.abs(F)<.5&&Math.abs(w)<.5||(I=true,M(te(i,T,F,w,n,o,ee(n.width),80)))},onEnd:()=>{if($(false),!I){if(i==="topRight"){p();return}if(i==="topLeft"&&h){h();return}}s(L.current)}})},k=R||Y,D=[{corner:"topLeft",style:{top:4,left:4}},{corner:"topRight",style:{top:4,right:4}},{corner:"bottomLeft",style:{bottom:4,left:4}},{corner:"bottomRight",style:{bottom:4,right:4}}];return z("div",{ref:x,style:{position:"fixed",top:0,left:0,transform:`translate(${r.left}px, ${r.top}px)`,width:r.width,height:r.height,display:"flex",flexDirection:"column",backgroundColor:e.panel,borderRadius:16,border:k?`2px solid ${e.success}`:`1px solid ${e.border}`,boxShadow:k?`0 0 12px ${e.success}99`:`0 0 20px ${e.info}80, 0 8px 32px rgba(0,0,0,0.5)`,zIndex:b,opacity:W?1:0,transition:V,...c.container},children:[a("div",{onPointerDown:j,style:{minHeight:56,display:"flex",backgroundColor:e.panel,borderTopLeftRadius:14,borderTopRightRadius:14,borderBottom:"1px solid rgba(255, 255, 255, 0.1)",cursor:R?"grabbing":"grab",touchAction:"none",userSelect:"none"},children:a(J,{header:f,isResizing:k,mode:"floating",theme:e})}),a(K,{footer:y,footerHeight:l,disableScrollWrapper:g,contentStyle:c.content,theme:e,background:v,children:m}),D.map(({corner:i,style:u})=>a("div",{onPointerDown:X(i),style:{position:"absolute",width:30,height:30,zIndex:10,touchAction:"none",cursor:i==="topLeft"||i==="bottomRight"?"nwse-resize":"nesw-resize",...u},children:a(de,{isActive:k,theme:e})},i))]})}var he=t=>{let{visible:e,onClose:n,maxHeight:o,initialHeight:r=400,initialMode:s="bottomSheet",onModeChange:d,theme:p}=t,m={...ie,...p},{viewport:f,insets:c}=le(),[y,l]=C(s),[h,g]=C(r),[b,v]=C(()=>({width:380,height:500,left:(window.innerWidth-380)/2,top:(window.innerHeight-500)/2})),x=o||f.height-c.top,R=re(()=>{let S=y==="bottomSheet"?"floating":"bottomSheet";l(S),d?.(S)},n);return e?y==="floating"?a(ce,{props:t,theme:m,viewport:f,insets:c,rect:b,setRect:v,onHeaderTap:R}):a(se,{props:t,theme:m,viewport:f,effectiveMaxHeight:x,panelHeight:Math.min(h,x),setPanelHeight:g,onHeaderTap:R}):null};export{he as BottomSheet};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@buoy-gg/bottom-sheet",
-  "version": "7.0.62",
+  "version": "7.0.64",
   "description": "Bottom sheet and floating window components for React Native, with configurable presentation and native-driver animations.",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -34,7 +34,7 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@buoy-gg/shared-ui": "^7.0.62"
+    "@buoy-gg/shared-ui": "^7.0.64"
   },
   "peerDependencies": {
     "react": "*"