@cloudparse/up-miniapps-sdk 0.2.0 → 0.2.1

package/dist/index.js

@@ -167,7 +167,13 @@ var Bridge = class {
 };
 
 // src/components/Map/components/MapDrawer.tsx
-import { forwardRef, useImperativeHandle, useRef } from "react";
+import {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState
+} from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var resolveHeightToPixels = (height, containerHeight) => {
   if (typeof height === "number") {
@@ -197,7 +203,9 @@ var MapDrawer = forwardRef(
     containerHeight,
     menuContent,
     enableTouchDrag = false,
-    safeAreaInsets = { top: 0, bottom: 0, left: 0, right: 0 }
+    showScrollToTopButton = true,
+    scrollToTopThreshold = 300,
+    safeAreaInsets = { bottom: 0, left: 0, right: 0, top: 0 }
   }, ref) => {
     const scrollContainerRef = useRef(null);
     const containerRef = useRef(null);
@@ -218,81 +226,237 @@ var MapDrawer = forwardRef(
         }
       }
     };
-    const handleTouchStart = (e) => {
-      if (side !== "bottom") return;
-      setTouchStartY(e.targetTouches[0].clientY);
-      setCurrentTouchY(e.targetTouches[0].clientY);
+    const [showScrollTop, setShowScrollTop] = useState(false);
+    const handleScroll = (e) => {
+      const scrollTop = e.currentTarget.scrollTop;
+      setShowScrollTop(state !== "closed" && scrollTop > scrollToTopThreshold);
     };
-    const handleTouchMove = (e) => {
-      if (touchStartY === null || side !== "bottom") return;
-      const isScrollAtTop = scrollContainerRef.current ? scrollContainerRef.current.scrollTop === 0 : true;
-      const currentY = e.targetTouches[0].clientY;
-      const deltaY = touchStartY - currentY;
-      if (deltaY < 0 && !isScrollAtTop) {
-        return;
+    useEffect(() => {
+      if (state === "closed") {
+        setShowScrollTop(false);
+      } else {
+        const scrollTop = scrollContainerRef.current?.scrollTop || 0;
+        setShowScrollTop(scrollTop > scrollToTopThreshold);
       }
-      setCurrentTouchY(currentY);
-    };
-    const handleTouchEnd = (e) => {
-      if (touchStartY === null || currentTouchY === null || side !== "bottom")
-        return;
-      const touchEndY = e.changedTouches[0].clientY;
-      const dragDistance = Math.abs(touchEndY - touchStartY);
-      if (dragDistance < 10) {
+    }, [state, scrollToTopThreshold]);
+    const isDraggingSheet = useRef(false);
+    const hasDeterminedDirection = useRef(false);
+    const isTouchOnContent = useRef(false);
+    const stateRef = useRef(state);
+    const touchStartYRef = useRef(touchStartY);
+    const currentTouchYRef = useRef(currentTouchY);
+    useEffect(() => {
+      stateRef.current = state;
+    }, [state]);
+    useEffect(() => {
+      touchStartYRef.current = touchStartY;
+    }, [touchStartY]);
+    useEffect(() => {
+      currentTouchYRef.current = currentTouchY;
+    }, [currentTouchY]);
+    useEffect(() => {
+      const container = containerRef.current;
+      if (!container || side !== "bottom" || !enableTouchDrag) return;
+      const handleNativeTouchStart = (e) => {
+        const clientY = e.targetTouches[0].clientY;
+        setTouchStartY(clientY);
+        setCurrentTouchY(clientY);
+        isDraggingSheet.current = false;
+        hasDeterminedDirection.current = false;
+        const target = e.target;
+        isTouchOnContent.current = scrollContainerRef.current ? scrollContainerRef.current.contains(target) : false;
+      };
+      const handleNativeTouchMove = (e) => {
+        const startY = touchStartYRef.current;
+        if (startY === null) return;
+        const currentY = e.targetTouches[0].clientY;
+        const deltaY = startY - currentY;
+        const scrollTop = scrollContainerRef.current ? scrollContainerRef.current.scrollTop : 0;
+        const clientHeight = scrollContainerRef.current ? scrollContainerRef.current.clientHeight : 0;
+        const scrollHeight = scrollContainerRef.current ? scrollContainerRef.current.scrollHeight : 0;
+        const isAtBottom = scrollTop + clientHeight >= scrollHeight - 1;
+        const currentState = stateRef.current;
+        if (!hasDeterminedDirection.current) {
+          if (!isTouchOnContent.current) {
+            isDraggingSheet.current = true;
+            hasDeterminedDirection.current = true;
+          } else if (currentState !== "full") {
+            if (deltaY > 0 && isAtBottom) {
+              isDraggingSheet.current = true;
+              hasDeterminedDirection.current = true;
+            } else if (deltaY < 0 && scrollTop <= 0) {
+              isDraggingSheet.current = true;
+              hasDeterminedDirection.current = true;
+            } else {
+              isDraggingSheet.current = false;
+              hasDeterminedDirection.current = true;
+            }
+          } else {
+            if (deltaY < 0 && scrollTop <= 0) {
+              isDraggingSheet.current = true;
+              hasDeterminedDirection.current = true;
+            } else {
+              isDraggingSheet.current = false;
+              hasDeterminedDirection.current = true;
+            }
+          }
+        } else if (!isDraggingSheet.current && isTouchOnContent.current) {
+          if (deltaY < 0 && scrollTop <= 0) {
+            isDraggingSheet.current = true;
+            setTouchStartY(currentY);
+            return;
+          }
+          if (deltaY > 0 && isAtBottom && currentState !== "full") {
+            isDraggingSheet.current = true;
+            setTouchStartY(currentY);
+            return;
+          }
+        }
+        if (isDraggingSheet.current) {
+          if (e.cancelable) {
+            e.preventDefault();
+          }
+          const parentContainer = container.parentElement;
+          if (parentContainer) {
+            const containerH2 = containerHeight || parentContainer.getBoundingClientRect().height;
+            const fullPx2 = resolveHeightToPixels(
+              drawerFullHeight || "85%",
+              containerH2
+            );
+            const peekPx2 = resolveHeightToPixels(
+              drawerPeekHeight || "15%",
+              containerH2
+            );
+            const closedPx = 32 + (currentState === "closed" ? safeAreaInsets.bottom : 0);
+            const dragOffset = currentY - startY;
+            let localClamped = dragOffset;
+            if (currentState === "full") {
+              localClamped = Math.max(
+                0,
+                Math.min(fullPx2 - closedPx, dragOffset)
+              );
+            } else if (currentState === "peek") {
+              localClamped = Math.max(
+                -(fullPx2 - peekPx2),
+                Math.min(peekPx2 - closedPx, dragOffset)
+              );
+            } else if (currentState === "closed") {
+              localClamped = Math.min(
+                0,
+                Math.max(-(fullPx2 - closedPx), dragOffset)
+              );
+            }
+            parentContainer.style.setProperty(
+              "--drag-offset",
+              `${localClamped}px`
+            );
+          }
+        }
+      };
+      const handleNativeTouchEnd = (e) => {
+        const startY = touchStartYRef.current;
+        const currentY = currentTouchYRef.current;
+        const parentContainer = container.parentElement;
+        if (startY === null || currentY === null) {
+          if (parentContainer) {
+            parentContainer.style.setProperty("--drag-offset", "0px");
+          }
+          return;
+        }
+        if (!isDraggingSheet.current) {
+          setTouchStartY(null);
+          setCurrentTouchY(null);
+          if (parentContainer) {
+            parentContainer.style.setProperty("--drag-offset", "0px");
+          }
+          return;
+        }
+        const touchEndY = e.changedTouches[0].clientY;
+        const dragDistance = Math.abs(touchEndY - startY);
+        if (dragDistance < 10) {
+          setTouchStartY(null);
+          setCurrentTouchY(null);
+          if (parentContainer) {
+            parentContainer.style.setProperty("--drag-offset", "0px");
+          }
+          return;
+        }
+        const containerH2 = containerHeight || (parentContainer ? parentContainer.getBoundingClientRect().height : window.innerHeight);
+        const containerTop = parentContainer ? parentContainer.getBoundingClientRect().top : 0;
+        const touchYInContainer = touchEndY - containerTop;
+        const drawerHeightFromBottom = containerH2 - touchYInContainer;
+        const fullPx2 = resolveHeightToPixels(
+          drawerFullHeight || "85%",
+          containerH2
+        );
+        const peekPx2 = resolveHeightToPixels(
+          drawerPeekHeight || "15%",
+          containerH2
+        );
+        const currentState = stateRef.current;
+        const closedPx = 32 + (currentState === "closed" ? safeAreaInsets.bottom : 0);
+        const distToFull = Math.abs(drawerHeightFromBottom - fullPx2);
+        const distToPeek = Math.abs(drawerHeightFromBottom - peekPx2);
+        const distToClosed = Math.abs(drawerHeightFromBottom - closedPx);
+        const minDist = Math.min(distToFull, distToPeek, distToClosed);
+        let targetState = "closed";
+        if (minDist === distToFull) {
+          targetState = "full";
+        } else if (minDist === distToPeek) {
+          targetState = "peek";
+        } else {
+          targetState = "closed";
+        }
         setTouchStartY(null);
         setCurrentTouchY(null);
-        return;
-      }
-      const parentContainer = containerRef.current?.parentElement;
-      const containerH = containerHeight || (parentContainer ? parentContainer.getBoundingClientRect().height : window.innerHeight);
-      const containerTop = parentContainer ? parentContainer.getBoundingClientRect().top : 0;
-      const touchYInContainer = touchEndY - containerTop;
-      const drawerHeightFromBottom = containerH - touchYInContainer;
-      const fullPx = resolveHeightToPixels(
-        drawerFullHeight || "85%",
-        containerH
-      );
-      const peekPx = resolveHeightToPixels(
-        drawerPeekHeight || "15%",
-        containerH
-      );
-      const closedPx = 32 + (state === "closed" ? safeAreaInsets.bottom : 0);
-      const distToFull = Math.abs(drawerHeightFromBottom - fullPx);
-      const distToPeek = Math.abs(drawerHeightFromBottom - peekPx);
-      const distToClosed = Math.abs(drawerHeightFromBottom - closedPx);
-      const minDist = Math.min(distToFull, distToPeek, distToClosed);
-      if (minDist === distToFull) {
-        onChangeState("full");
-      } else if (minDist === distToPeek) {
-        onChangeState("peek");
-      } else {
-        onChangeState("closed");
-      }
-      setTouchStartY(null);
-      setCurrentTouchY(null);
-    };
+        onChangeState(targetState);
+        requestAnimationFrame(() => {
+          if (parentContainer) {
+            parentContainer.style.setProperty("--drag-offset", "0px");
+          }
+        });
+      };
+      container.addEventListener("touchstart", handleNativeTouchStart, {
+        passive: true
+      });
+      container.addEventListener("touchmove", handleNativeTouchMove, {
+        passive: false
+      });
+      container.addEventListener("touchend", handleNativeTouchEnd, {
+        passive: true
+      });
+      return () => {
+        container.removeEventListener("touchstart", handleNativeTouchStart);
+        container.removeEventListener("touchmove", handleNativeTouchMove);
+        container.removeEventListener("touchend", handleNativeTouchEnd);
+      };
+    }, [
+      side,
+      enableTouchDrag,
+      containerHeight,
+      drawerFullHeight,
+      drawerPeekHeight,
+      safeAreaInsets,
+      onChangeState,
+      setTouchStartY,
+      setCurrentTouchY
+    ]);
     const isBackdropActive = state === "full";
     const backdropStyles = isBackdropActive ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none";
+    const containerH = containerHeight || window.innerHeight;
+    const fullPx = resolveHeightToPixels(drawerFullHeight || "85%", containerH);
+    const peekPx = resolveHeightToPixels(drawerPeekHeight || "15%", containerH);
+    const shiftPx = fullPx - peekPx;
     const getBottomDrawerTransform = () => {
-      const containerH = containerHeight || window.innerHeight;
-      const fullPx = resolveHeightToPixels(
-        drawerFullHeight || "85%",
-        containerH
-      );
-      const peekPx = resolveHeightToPixels(
-        drawerPeekHeight || "15%",
-        containerH
-      );
       if (state === "full") {
-        return `translateY(${clampedDragOffset}px)`;
+        return "translateY(var(--drag-offset, 0px))";
       }
       if (state === "peek") {
-        const shiftPx2 = fullPx - peekPx;
-        return `translateY(calc(${shiftPx2}px + ${clampedDragOffset}px))`;
+        return `translateY(calc(${shiftPx}px + var(--drag-offset, 0px)))`;
       }
       const closedVisibleHeight = 32;
-      const shiftPx = fullPx - closedVisibleHeight;
-      return `translateY(calc(${shiftPx}px + ${clampedDragOffset}px))`;
+      const closedShiftPx = fullPx - closedVisibleHeight;
+      return `translateY(calc(${closedShiftPx}px + var(--drag-offset, 0px)))`;
     };
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx("style", { children: `
@@ -322,12 +486,13 @@ var MapDrawer = forwardRef(
               bottom: `calc(1rem + ${etaBarHeight}px)`
             },
             children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col h-full overflow-hidden pl-4 py-4 pr-1", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col h-full overflow-hidden pl-4 py-4 pr-1 relative", children: [
                 /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between pb-3 border-b border-white/10 mb-2", children: /* @__PURE__ */ jsx("span", { className: "text-sm font-bold tracking-wider text-zinc-400 uppercase", children: "Menu" }) }),
                 /* @__PURE__ */ jsx(
                   "div",
                   {
                     className: "flex-1 overflow-y-auto no-scrollbar pr-2",
+                    onScroll: handleScroll,
                     ref: scrollContainerRef,
                     children: menuContent ? menuContent : /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1.5", children: menuItems.map((item) => /* @__PURE__ */ jsxs(
                       "button",
@@ -351,6 +516,33 @@ var MapDrawer = forwardRef(
                       item.id
                     )) })
                   }
+                ),
+                showScrollToTopButton && showScrollTop && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    className: "absolute bottom-6 right-6 z-50 flex items-center justify-center w-10 h-10 rounded-full bg-cyan-500 hover:bg-cyan-400 active:scale-95 text-black shadow-lg shadow-cyan-500/25 transition-all duration-200 cursor-pointer",
+                    onClick: () => {
+                      scrollContainerRef.current?.scrollTo({
+                        behavior: "smooth",
+                        top: 0
+                      });
+                    },
+                    children: /* @__PURE__ */ jsx(
+                      "svg",
+                      {
+                        fill: "none",
+                        height: "20",
+                        stroke: "currentColor",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        strokeWidth: "2.5",
+                        viewBox: "0 0 24 24",
+                        width: "20",
+                        xmlns: "http://www.w3.org/2000/svg",
+                        children: /* @__PURE__ */ jsx("polyline", { points: "18 15 12 9 6 15" })
+                      }
+                    )
+                  }
                 )
               ] }),
               /* @__PURE__ */ jsx(
@@ -370,14 +562,11 @@ var MapDrawer = forwardRef(
           "div",
           {
             className: `absolute w-full bg-zinc-950/85 backdrop-blur-md border border-white/10 rounded-t-2xl shadow-2xl flex flex-col z-40 select-none ${isDragging ? "transition-none" : "transition-transform duration-300 ease-out"}`,
-            onTouchEnd: enableTouchDrag ? handleTouchEnd : void 0,
-            onTouchMove: enableTouchDrag ? handleTouchMove : void 0,
-            onTouchStart: enableTouchDrag ? handleTouchStart : void 0,
             ref: containerRef,
             style: {
               bottom: "0px",
-              marginBottom: state === "closed" ? `${safeAreaInsets.bottom}px` : "0px",
               height: typeof drawerFullHeight === "number" ? `${drawerFullHeight}px` : drawerFullHeight || "85%",
+              marginBottom: state === "closed" ? `${safeAreaInsets.bottom}px` : "0px",
               transform: getBottomDrawerTransform(),
               transition: isDragging ? "none" : "transform 300ms ease-out, margin-bottom 250ms ease-in-out"
             },
@@ -390,41 +579,77 @@ var MapDrawer = forwardRef(
                   children: /* @__PURE__ */ jsx("div", { className: "w-12 h-1 bg-white/25 rounded-full" })
                 }
               ),
-              /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsxs(
                 "div",
                 {
-                  className: "flex-1 flex flex-col overflow-hidden px-4 pb-4 pt-2 transition-[margin-top] duration-250 ease-in-out",
+                  className: "flex-1 flex flex-col overflow-hidden px-4 pb-4 pt-2 transition-[margin-top] duration-250 ease-in-out relative",
                   style: {
                     marginTop: state === "closed" ? `${safeAreaInsets.bottom}px` : "0px"
                   },
-                  children: /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      className: "flex-1 overflow-y-auto no-scrollbar",
-                      ref: scrollContainerRef,
-                      children: menuContent ? menuContent : /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: menuItems.map((item) => /* @__PURE__ */ jsxs(
-                        "button",
-                        {
-                          className: `flex items-center gap-3 w-full py-3 px-3.5 rounded-xl text-left cursor-pointer transition-all duration-150 ${item.disabled ? "opacity-45 cursor-not-allowed pointer-events-none" : "hover:bg-white/5 active:bg-white/10 text-white"}`,
-                          disabled: item.disabled,
-                          onClick: () => {
-                            if (!item.disabled) {
-                              item.onPress();
-                              onChangeState("closed");
-                            }
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: "flex-1 overflow-y-auto no-scrollbar",
+                        onScroll: handleScroll,
+                        ref: scrollContainerRef,
+                        style: {
+                          paddingBottom: state === "peek" ? `${shiftPx}px` : "0px"
+                        },
+                        children: menuContent ? menuContent : /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: menuItems.map((item) => /* @__PURE__ */ jsxs(
+                          "button",
+                          {
+                            className: `flex items-center gap-3 w-full py-3 px-3.5 rounded-xl text-left cursor-pointer transition-all duration-150 ${item.disabled ? "opacity-45 cursor-not-allowed pointer-events-none" : "hover:bg-white/5 active:bg-white/10 text-white"}`,
+                            disabled: item.disabled,
+                            onClick: () => {
+                              if (!item.disabled) {
+                                item.onPress();
+                                onChangeState("closed");
+                              }
+                            },
+                            children: [
+                              /* @__PURE__ */ jsxs("div", { className: "relative flex items-center justify-center w-8 h-8 rounded-lg bg-white/5 text-zinc-300", children: [
+                                item.icon,
+                                item.badge !== void 0 && /* @__PURE__ */ jsx("span", { className: "absolute -top-1 -right-1 bg-cyan-500 text-black text-[9px] font-extrabold min-w-[15px] h-3.5 rounded-full flex items-center justify-center px-1 border border-zinc-950 shadow", children: item.badge })
+                              ] }),
+                              /* @__PURE__ */ jsx("span", { className: "text-sm font-medium tracking-wide", children: item.label })
+                            ]
                           },
-                          children: [
-                            /* @__PURE__ */ jsxs("div", { className: "relative flex items-center justify-center w-8 h-8 rounded-lg bg-white/5 text-zinc-300", children: [
-                              item.icon,
-                              item.badge !== void 0 && /* @__PURE__ */ jsx("span", { className: "absolute -top-1 -right-1 bg-cyan-500 text-black text-[9px] font-extrabold min-w-[15px] h-3.5 rounded-full flex items-center justify-center px-1 border border-zinc-950 shadow", children: item.badge })
-                            ] }),
-                            /* @__PURE__ */ jsx("span", { className: "text-sm font-medium tracking-wide", children: item.label })
-                          ]
+                          item.id
+                        )) })
+                      }
+                    ),
+                    showScrollToTopButton && showScrollTop && /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        className: "absolute right-6 z-50 flex items-center justify-center w-10 h-10 rounded-full bg-cyan-500 hover:bg-cyan-400 active:scale-95 text-black shadow-lg shadow-cyan-500/25 transition-all duration-200 cursor-pointer",
+                        onClick: () => {
+                          scrollContainerRef.current?.scrollTo({
+                            behavior: "smooth",
+                            top: 0
+                          });
                         },
-                        item.id
-                      )) })
-                    }
-                  )
+                        style: {
+                          bottom: state === "peek" ? `calc(${24 + shiftPx}px + var(--drag-offset, 0px))` : `calc(24px + var(--drag-offset, 0px))`
+                        },
+                        children: /* @__PURE__ */ jsx(
+                          "svg",
+                          {
+                            fill: "none",
+                            height: "20",
+                            stroke: "currentColor",
+                            strokeLinecap: "round",
+                            strokeLinejoin: "round",
+                            strokeWidth: "2.5",
+                            viewBox: "0 0 24 24",
+                            width: "20",
+                            xmlns: "http://www.w3.org/2000/svg",
+                            children: /* @__PURE__ */ jsx("polyline", { points: "18 15 12 9 6 15" })
+                          }
+                        )
+                      }
+                    )
+                  ]
                 }
               )
             ]
@@ -678,7 +903,7 @@ var MapRightControls = ({
   customRecenterButton,
   customCompassButton,
   drawerPeekHeight,
-  insets = { top: 0, bottom: 0, left: 0, right: 0 }
+  insets = { bottom: 0, left: 0, right: 0, top: 0 }
 }) => {
   const aboveControls = customControls.filter(
     (c) => c.position === "above-recenter"
@@ -690,7 +915,7 @@ var MapRightControls = ({
   const closedHeightOffset = "32px";
   const activeEtaHeight = etaData ? etaBarHeight : drawerState === "closed" ? insets.bottom : 0;
   const peekStyle = typeof drawerPeekHeight === "number" ? `${drawerPeekHeight}px` : drawerPeekHeight || "15%";
-  const controlsBottom = side === "bottom" ? drawerState === "closed" ? `calc(${closedHeightOffset} + 1rem + ${activeEtaHeight}px - ${clampedDragOffset}px)` : `calc(${peekStyle} + 1rem + ${etaData ? etaBarHeight : 0}px - ${clampedDragOffset}px)` : `calc(1rem + ${insets.bottom}px)`;
+  const controlsBottom = side === "bottom" ? drawerState === "closed" ? `calc(${closedHeightOffset} + 1rem + ${activeEtaHeight}px - var(--drag-offset, 0px))` : `calc(${peekStyle} + 1rem + ${etaData ? etaBarHeight : 0}px - var(--drag-offset, 0px))` : `calc(1rem + ${insets.bottom}px)`;
   const isControlsVisible = side !== "bottom" || drawerState !== "full";
   return /* @__PURE__ */ jsxs3(
     "div",
@@ -820,7 +1045,7 @@ import {
   useContext,
   useMemo,
   useRef as useRef2,
-  useState
+  useState as useState2
 } from "react";
 import { jsx as jsx4 } from "react/jsx-runtime";
 var MapControlsContext = createContext(
@@ -829,19 +1054,19 @@ var MapControlsContext = createContext(
 var SDKMapProvider = ({
   children
 }) => {
-  const [isFollowing, setIsFollowing] = useState(true);
-  const [bearing, setBearingState] = useState(0);
-  const [pitch, setPitchState] = useState(0);
-  const [drawerState, setDrawerStateInternal] = useState("closed");
+  const [isFollowing, setIsFollowing] = useState2(true);
+  const [bearing, setBearingState] = useState2(0);
+  const [pitch, setPitchState] = useState2(0);
+  const [drawerState, setDrawerStateInternal] = useState2("closed");
   const drawerContentRef = useRef2(null);
   const setDrawerState = useCallback((val) => {
     setDrawerStateInternal(val);
   }, []);
-  const [hasControls, setHasControlsState] = useState(false);
+  const [hasControls, setHasControlsState] = useState2(false);
   const setHasControls = useCallback((val) => {
     setHasControlsState((prev) => prev === val ? prev : val);
   }, []);
-  const [etaData, setEtaDataState] = useState(void 0);
+  const [etaData, setEtaDataState] = useState2(void 0);
   const setEtaData = useCallback((newData) => {
     setEtaDataState((prev) => {
       if (!prev && !newData) return prev;
@@ -852,11 +1077,11 @@ var SDKMapProvider = ({
       return newData;
     });
   }, []);
-  const [insets, setInsetsState] = useState({
-    top: 0,
+  const [insets, setInsetsState] = useState2({
     bottom: 0,
     left: 0,
-    right: 0
+    right: 0,
+    top: 0
   });
   const setInsets = useCallback((newInsets) => {
     setInsetsState((prev) => ({ ...prev, ...newInsets }));
@@ -901,6 +1126,7 @@ var SDKMapProvider = ({
       drawerState,
       etaData,
       hasControls,
+      insets,
       isFollowing,
       pitch,
       resetBearing,
@@ -908,10 +1134,9 @@ var SDKMapProvider = ({
       setDrawerState,
       setEtaData,
       setHasControls,
+      setInsets,
       setIsFollowing,
-      setPitch,
-      insets,
-      setInsets
+      setPitch
     }),
     [
       _registerCenterCallback,
@@ -944,7 +1169,7 @@ var useMapControls = () => {
 };
 
 // src/components/Map/components/MapControls.tsx
-import { useCallback as useCallback2, useContext as useContext2, useEffect, useRef as useRef3, useState as useState2 } from "react";
+import { useCallback as useCallback2, useContext as useContext2, useEffect as useEffect2, useRef as useRef3, useState as useState3 } from "react";
 import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var resolveHeightToPixels2 = (height, containerHeight) => {
   if (typeof height === "number") {
@@ -975,6 +1200,8 @@ var MapControls = ({
   menuContent,
   children,
   enableTouchDrag = false,
+  showScrollToTopButton = true,
+  scrollToTopThreshold = 300,
   isInternal = false
 }) => {
   const mapContext = useContext2(MapControlsContext);
@@ -994,7 +1221,7 @@ var MapControls = ({
     },
     [drawerContentRef, contextRef]
   );
-  const [localDrawerState, setLocalDrawerState] = useState2(
+  const [localDrawerState, setLocalDrawerState] = useState3(
     defaultState ?? "closed"
   );
   const drawerState = mapContext ? mapContext.drawerState : localDrawerState;
@@ -1008,15 +1235,15 @@ var MapControls = ({
     },
     [mapContext]
   );
-  useEffect(() => {
+  useEffect2(() => {
     if (defaultState && mapContext) {
       mapContext.setDrawerState(defaultState);
     }
   }, []);
-  const [side, setSide] = useState2("left");
+  const [side, setSide] = useState3("left");
   const containerRef = useRef3(null);
-  const [mapHeight, setMapHeight] = useState2(600);
-  useEffect(() => {
+  const [mapHeight, setMapHeight] = useState3(600);
+  useEffect2(() => {
     const parent = containerRef.current?.parentElement;
     if (!parent) return;
     const updateHeight = () => {
@@ -1030,7 +1257,7 @@ var MapControls = ({
     };
   }, []);
   const setHasControls = mapContext?.setHasControls;
-  useEffect(() => {
+  useEffect2(() => {
     if (setHasControls && !isInternal) {
       setHasControls(true);
       return () => setHasControls(false);
@@ -1054,9 +1281,9 @@ var MapControls = ({
   };
   const mapPitch = mapContext ? mapContext.pitch : 0;
   const resolvedEtaData = etaData !== void 0 ? etaData : mapContext?.etaData;
-  const [touchStartY, setTouchStartY] = useState2(null);
-  const [currentTouchY, setCurrentTouchY] = useState2(null);
-  useEffect(() => {
+  const [touchStartY, setTouchStartY] = useState3(null);
+  const [currentTouchY, setCurrentTouchY] = useState3(null);
+  useEffect2(() => {
     if (typeof window === "undefined") return;
     const checkLayout = () => {
       if (drawerSide) {
@@ -1075,14 +1302,23 @@ var MapControls = ({
   }, [drawerSide]);
   const isDragging = touchStartY !== null && currentTouchY !== null;
   const dragOffset = isDragging ? currentTouchY - touchStartY : 0;
+  const fullPx = resolveHeightToPixels2(drawerFullHeight || "85%", mapHeight);
+  const peekPx = resolveHeightToPixels2(drawerPeekHeight || "15%", mapHeight);
+  const bottomInset = mapContext?.insets.bottom || 0;
+  const closedPx = 32 + (drawerState === "closed" ? bottomInset : 0);
   let clampedDragOffset = dragOffset;
   if (drawerState === "full") {
-    clampedDragOffset = Math.max(0, dragOffset);
+    clampedDragOffset = Math.max(0, Math.min(fullPx - closedPx, dragOffset));
+  } else if (drawerState === "peek") {
+    clampedDragOffset = Math.max(
+      -(fullPx - peekPx),
+      // up to full
+      Math.min(peekPx - closedPx, dragOffset)
+      // down to closed
+    );
   } else if (drawerState === "closed") {
-    clampedDragOffset = Math.min(0, dragOffset);
+    clampedDragOffset = Math.min(0, Math.max(-(fullPx - closedPx), dragOffset));
   }
-  const fullPx = resolveHeightToPixels2(drawerFullHeight || "85%", mapHeight);
-  const peekPx = resolveHeightToPixels2(drawerPeekHeight || "15%", mapHeight);
   let baseHeight = 32;
   if (drawerState === "peek") {
     baseHeight = peekPx;
@@ -1092,7 +1328,6 @@ var MapControls = ({
   const currentDrawerHeight = baseHeight - clampedDragOffset;
   const startFadeHeight = peekPx + 20;
   const endFadeHeight = peekPx + (fullPx - peekPx) * 0.35;
-  const bottomInset = mapContext?.insets.bottom || 0;
   let etaOpacity = 1;
   let etaBottomStyle = "1rem";
   if (side === "bottom") {
@@ -1105,7 +1340,7 @@ var MapControls = ({
       etaOpacity = 1 - fraction;
     }
     const effectiveInset = drawerState === "closed" ? bottomInset : 0;
-    etaBottomStyle = `${currentDrawerHeight + effectiveInset + 16}px`;
+    etaBottomStyle = `calc(${baseHeight + effectiveInset + 16}px - var(--drag-offset, 0px))`;
   } else {
     etaOpacity = drawerState === "full" ? 0 : 1;
     etaBottomStyle = `calc(1rem + ${bottomInset}px)`;
@@ -1129,8 +1364,10 @@ var MapControls = ({
         onChangeState: setDrawerState,
         ref: mergedRef,
         safeAreaInsets: mapContext?.insets,
+        scrollToTopThreshold,
         setCurrentTouchY,
         setTouchStartY,
+        showScrollToTopButton,
         side,
         state: drawerState,
         touchStartY
@@ -1272,10 +1509,10 @@ var GlobalEvent = /* @__PURE__ */ ((GlobalEvent2) => {
 })(GlobalEvent || {});
 
 // src/components/Map/hooks/useUserLocation.ts
-import { useCallback as useCallback3, useEffect as useEffect2, useRef as useRef4, useState as useState3 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect3, useRef as useRef4, useState as useState4 } from "react";
 var LERP_FACTOR = 0.12;
 var useUserLocation = () => {
-  const [locationState, setLocationState] = useState3({
+  const [locationState, setLocationState] = useState4({
     accuracy: null,
     coords: null,
     heading: null
@@ -1308,7 +1545,7 @@ var useUserLocation = () => {
       heading
     };
   }, []);
-  useEffect2(() => {
+  useEffect3(() => {
     let rafId;
     const animate = () => {
       let changed = false;
@@ -1387,7 +1624,7 @@ var useUserLocation = () => {
 };
 
 // src/components/Map/hooks/useLiveRouting.ts
-import { useCallback as useCallback4, useEffect as useEffect3, useMemo as useMemo2, useRef as useRef5, useState as useState4 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect4, useMemo as useMemo2, useRef as useRef5, useState as useState5 } from "react";
 var useLiveRouting = ({
   origin: manualOrigin,
   destination,
@@ -1396,11 +1633,11 @@ var useLiveRouting = ({
   enabled = true,
   initialMode = "preview"
 }) => {
-  const [route, setRoute] = useState4(null);
-  const [totalDistance, setTotalDistance] = useState4(null);
-  const [isCalculating, setIsCalculating] = useState4(false);
-  const [error, setError] = useState4(null);
-  const [mode, setMode] = useState4(initialMode);
+  const [route, setRoute] = useState5(null);
+  const [totalDistance, setTotalDistance] = useState5(null);
+  const [isCalculating, setIsCalculating] = useState5(false);
+  const [error, setError] = useState5(null);
+  const [mode, setMode] = useState5(initialMode);
   const userLocationState = useUserLocation();
   const userLocation = manualOrigin || userLocationState.coords;
   const lastCalcOrigin = useRef5(null);
@@ -1450,7 +1687,7 @@ var useLiveRouting = ({
     },
     [profile]
   );
-  useEffect3(() => {
+  useEffect4(() => {
     if (!enabled || !destination || !userLocation) {
       if (!enabled || !destination) {
         setRoute(null);
@@ -1491,10 +1728,10 @@ var useLiveRouting = ({
   };
 };
 var useRoute = (origin, destination, profile = "driving") => {
-  const [route, setRoute] = useState4(null);
-  const [isCalculating, setIsCalculating] = useState4(false);
-  const [error, setError] = useState4(null);
-  useEffect3(() => {
+  const [route, setRoute] = useState5(null);
+  const [isCalculating, setIsCalculating] = useState5(false);
+  const [error, setError] = useState5(null);
+  useEffect4(() => {
     if (!origin || !destination) {
       setRoute(null);
       return;
@@ -1599,16 +1836,16 @@ import { Map as MapLibre, MapProvider } from "@vis.gl/react-maplibre";
 import React, {
   useCallback as useCallback5,
   useContext as useContext4,
-  useEffect as useEffect5,
+  useEffect as useEffect6,
   useMemo as useMemo5,
   useRef as useRef6,
-  useState as useState6
+  useState as useState7
 } from "react";
 import "maplibre-gl/dist/maplibre-gl.css";
 
 // src/components/Map/layers/POILayers.tsx
 import { Layer as Layer2, Source as Source2, useMap } from "@vis.gl/react-maplibre";
-import { useEffect as useEffect4, useMemo as useMemo4, useState as useState5 } from "react";
+import { useEffect as useEffect5, useMemo as useMemo4, useState as useState6 } from "react";
 import { jsx as jsx8 } from "react/jsx-runtime";
 function createEmojiIcon(emoji, size = 64) {
   const canvas = document.createElement("canvas");
@@ -1622,13 +1859,13 @@ function createEmojiIcon(emoji, size = 64) {
   return ctx.getImageData(0, 0, size, size);
 }
 var POILayers = ({ pois }) => {
-  const [loadedImages, setLoadedImages] = useState5(0);
+  const [loadedImages, setLoadedImages] = useState6(0);
   const { current: map } = useMap();
   const glPois = useMemo4(
     () => pois.filter((p) => !p.displayMode || p.displayMode === "gl"),
     [pois]
   );
-  useEffect4(() => {
+  useEffect5(() => {
     if (!map) return;
     const glMap = map.getMap();
     const defaults = [
@@ -1968,8 +2205,8 @@ var MapInternal = ({
   const mapControls = useContext4(MapControlsContext);
   const mapRef = useRef6(null);
   const userLocationState = useUserLocation();
-  const [progNav, setProgNav] = useState6(null);
-  useEffect5(() => {
+  const [progNav, setProgNav] = useState7(null);
+  useEffect6(() => {
     const unsubCreate = sdk.on("SDK_NAVIGATION_CREATE", (payload) => {
       setProgNav(payload);
     });
@@ -1994,7 +2231,7 @@ var MapInternal = ({
     profile: effectiveNavOptions?.profile || "driving",
     recalculateThreshold: effectiveNavOptions?.recalculateThreshold || 50
   });
-  useEffect5(() => {
+  useEffect6(() => {
     if (onNavigationModeChange && navigation) {
       onNavigationModeChange(internalNav.mode);
     }
@@ -2006,7 +2243,7 @@ var MapInternal = ({
   const resolvedInitialFollow = mapControls ? mapControls.isFollowing : initialFollowUser;
   const isFollowingRef = useRef6(resolvedInitialFollow);
   const isFlyingRef = useRef6(false);
-  const [localIsFollowingUI, setLocalIsFollowingUI] = useState6(
+  const [localIsFollowingUI, setLocalIsFollowingUI] = useState7(
     resolvedInitialFollow
   );
   const isFollowingUI = mapControls ? mapControls.isFollowing : localIsFollowingUI;
@@ -2021,7 +2258,7 @@ var MapInternal = ({
     },
     [setIsFollowingCtx]
   );
-  useEffect5(() => {
+  useEffect6(() => {
     if (mapControls && mapControls.isFollowing !== isFollowingRef.current) {
       isFollowingRef.current = mapControls.isFollowing;
     }
@@ -2031,7 +2268,7 @@ var MapInternal = ({
     mergedInteractiveLayerIds.push("sdk-poi-layer");
   }
   const prevInitialFollow = useRef6(initialFollowUser);
-  useEffect5(() => {
+  useEffect6(() => {
     if (initialFollowUser !== prevInitialFollow.current) {
       setFollowMode(initialFollowUser);
       prevInitialFollow.current = initialFollowUser;
@@ -2050,7 +2287,7 @@ var MapInternal = ({
     }
   }, [initialFollowUser, setFollowMode, userLocationState.coords]);
   const lastAutoLockedRouteRef = useRef6(null);
-  useEffect5(() => {
+  useEffect6(() => {
     if (!route || !mapRef.current) {
       if (!route) lastAutoLockedRouteRef.current = null;
       return;
@@ -2083,7 +2320,7 @@ var MapInternal = ({
     }
     lastAutoLockedRouteRef.current = route;
   }, [route, mode, setFollowMode]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (isFollowingRef.current && !isFlyingRef.current && userLocationState.coords && mapRef.current) {
       mapRef.current.easeTo({
         center: userLocationState.coords,
@@ -2126,13 +2363,13 @@ var MapInternal = ({
     onNavigationAbort
   ]);
   const setEtaDataCtx = mapControls?.setEtaData;
-  useEffect5(() => {
+  useEffect6(() => {
     if (setEtaDataCtx) {
       setEtaDataCtx(showEtaData);
     }
   }, [showEtaData, setEtaDataCtx]);
   const setDrawerStateCtx = mapControls?.setDrawerState;
-  useEffect5(() => {
+  useEffect6(() => {
     if (setDrawerStateCtx && propDrawerState !== void 0) {
       setDrawerStateCtx(propDrawerState);
     }
@@ -2252,7 +2489,7 @@ var MapInternal = ({
       });
     }
   }, []);
-  useEffect5(() => {
+  useEffect6(() => {
     if (mapControls) {
       mapControls._registerCenterCallback(handleCenterOnUser);
       mapControls._registerResetBearingCallback(handleResetBearing);
@@ -2368,7 +2605,7 @@ function renderMap(containerId, props = {}) {
 }
 
 // package.json
-var version = "0.2.0";
+var version = "0.2.1";
 
 // src/sdk.ts
 function deepFreeze(obj) {
@@ -2700,7 +2937,7 @@ var MiniAppSDK = class {
 var sdk = deepFreeze(new MiniAppSDK());
 
 // src/components/BridgeMocker.tsx
-import { useCallback as useCallback6, useEffect as useEffect6, useRef as useRef7, useState as useState7 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect7, useRef as useRef7, useState as useState8 } from "react";
 import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
 var getBearing = (p1, p2) => {
   const lat1 = p1[1] * Math.PI / 180;
@@ -2720,12 +2957,12 @@ var BridgeMocker = ({
   mockJWTToken,
   children
 }) => {
-  const [autoMove, setAutoMove] = useState7(isMoving);
-  const [location, setLocation] = useState7(initialLocation);
-  const [heading, setHeading] = useState7(0);
-  const [speedMultiplier, setSpeedMultiplier] = useState7(simulationSpeed);
-  const [isReady, setIsReady] = useState7(false);
-  const [isMinimized, setIsMinimized] = useState7(true);
+  const [autoMove, setAutoMove] = useState8(isMoving);
+  const [location, setLocation] = useState8(initialLocation);
+  const [heading, setHeading] = useState8(0);
+  const [speedMultiplier, setSpeedMultiplier] = useState8(simulationSpeed);
+  const [isReady, setIsReady] = useState8(false);
+  const [isMinimized, setIsMinimized] = useState8(true);
   const streamIntervalRef = useRef7(null);
   const pathIndexRef = useRef7(0);
   const activeConfigRef = useRef7(null);
@@ -2770,7 +3007,7 @@ var BridgeMocker = ({
       type: "EVENT"
     });
   }, []);
-  useEffect6(() => {
+  useEffect7(() => {
     stateRef.current = {
       autoMove,
       heading,
@@ -2791,19 +3028,19 @@ var BridgeMocker = ({
     speedMultiplier,
     mockJWTToken
   ]);
-  useEffect6(() => {
+  useEffect7(() => {
     setAutoMove(isMoving);
   }, [isMoving]);
-  useEffect6(() => {
+  useEffect7(() => {
     setSpeedMultiplier(simulationSpeed);
   }, [simulationSpeed]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (simulationPath && simulationPath.length > 0) {
       pathIndexRef.current = 0;
       setLocation(simulationPath[0]);
     }
   }, [simulationPath]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (streamIntervalRef.current && activeConfigRef.current) {
       sdk.bridge.send(
         "START_LOCATION_STREAM",
@@ -2811,7 +3048,7 @@ var BridgeMocker = ({
       );
     }
   }, [speedMultiplier]);
-  useEffect6(() => {
+  useEffect7(() => {
     const bridge = sdk.bridge;
     const originalSend = bridge.send.bind(bridge);
     const stopStream = () => {
@@ -3145,16 +3382,16 @@ var BridgeMocker = ({
 };
 
 // src/components/DebugConsole.tsx
-import { useCallback as useCallback7, useEffect as useEffect7, useRef as useRef8, useState as useState8 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect8, useRef as useRef8, useState as useState9 } from "react";
 import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
 var DebugConsole = ({
   isOpen: initialOpen = false,
   onClose
 }) => {
-  const [showConsole, setShowConsole] = useState8(initialOpen);
-  const [logs, setLogs] = useState8([]);
+  const [showConsole, setShowConsole] = useState9(initialOpen);
+  const [logs, setLogs] = useState9([]);
   const scrollRef = useRef8(null);
-  useEffect7(() => {
+  useEffect8(() => {
     setShowConsole(initialOpen);
   }, [initialOpen]);
   const clearLogs = () => setLogs([]);
@@ -3168,7 +3405,7 @@ var DebugConsole = ({
     };
     setLogs((prev) => [entry, ...prev].slice(0, 100));
   }, []);
-  useEffect7(() => {
+  useEffect8(() => {
     if (typeof window === "undefined") return;
     const bridge = sdk.bridge;
     const originalSend = bridge.send.bind(bridge);