@cloudparse/up-miniapps-sdk 0.2.0 → 0.2.1

package/dist/index.cjs

@@ -254,7 +254,9 @@ var MapDrawer = (0, import_react.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 = (0, import_react.useRef)(null);
     const containerRef = (0, import_react.useRef)(null);
@@ -275,81 +277,237 @@ var MapDrawer = (0, import_react.forwardRef)(
         }
       }
     };
-    const handleTouchStart = (e) => {
-      if (side !== "bottom") return;
-      setTouchStartY(e.targetTouches[0].clientY);
-      setCurrentTouchY(e.targetTouches[0].clientY);
+    const [showScrollTop, setShowScrollTop] = (0, import_react.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;
-      }
-      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) {
+    (0, import_react.useEffect)(() => {
+      if (state === "closed") {
+        setShowScrollTop(false);
+      } else {
+        const scrollTop = scrollContainerRef.current?.scrollTop || 0;
+        setShowScrollTop(scrollTop > scrollToTopThreshold);
+      }
+    }, [state, scrollToTopThreshold]);
+    const isDraggingSheet = (0, import_react.useRef)(false);
+    const hasDeterminedDirection = (0, import_react.useRef)(false);
+    const isTouchOnContent = (0, import_react.useRef)(false);
+    const stateRef = (0, import_react.useRef)(state);
+    const touchStartYRef = (0, import_react.useRef)(touchStartY);
+    const currentTouchYRef = (0, import_react.useRef)(currentTouchY);
+    (0, import_react.useEffect)(() => {
+      stateRef.current = state;
+    }, [state]);
+    (0, import_react.useEffect)(() => {
+      touchStartYRef.current = touchStartY;
+    }, [touchStartY]);
+    (0, import_react.useEffect)(() => {
+      currentTouchYRef.current = currentTouchY;
+    }, [currentTouchY]);
+    (0, import_react.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__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: `
@@ -379,12 +537,13 @@ var MapDrawer = (0, import_react.forwardRef)(
               bottom: `calc(1rem + ${etaBarHeight}px)`
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex-1 flex flex-col h-full overflow-hidden pl-4 py-4 pr-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex-1 flex flex-col h-full overflow-hidden pl-4 py-4 pr-1 relative", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex items-center justify-between pb-3 border-b border-white/10 mb-2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-sm font-bold tracking-wider text-zinc-400 uppercase", children: "Menu" }) }),
                 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                   "div",
                   {
                     className: "flex-1 overflow-y-auto no-scrollbar pr-2",
+                    onScroll: handleScroll,
                     ref: scrollContainerRef,
                     children: menuContent ? menuContent : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-col gap-1.5", children: menuItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
                       "button",
@@ -408,6 +567,33 @@ var MapDrawer = (0, import_react.forwardRef)(
                       item.id
                     )) })
                   }
+                ),
+                showScrollToTopButton && showScrollTop && /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "18 15 12 9 6 15" })
+                      }
+                    )
+                  }
                 )
               ] }),
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -427,14 +613,11 @@ var MapDrawer = (0, import_react.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"
             },
@@ -447,41 +630,77 @@ var MapDrawer = (0, import_react.forwardRef)(
                   children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "w-12 h-1 bg-white/25 rounded-full" })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(
-                    "div",
-                    {
-                      className: "flex-1 overflow-y-auto no-scrollbar",
-                      ref: scrollContainerRef,
-                      children: menuContent ? menuContent : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-col gap-1", children: menuItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-col gap-1", children: menuItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-sm font-medium tracking-wide", children: item.label })
+                            ]
                           },
-                          children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-sm font-medium tracking-wide", children: item.label })
-                          ]
+                          item.id
+                        )) })
+                      }
+                    ),
+                    showScrollToTopButton && showScrollTop && /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "18 15 12 9 6 15" })
+                          }
+                        )
+                      }
+                    )
+                  ]
                 }
               )
             ]
@@ -735,7 +954,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"
@@ -747,7 +966,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__ */ (0, import_jsx_runtime3.jsxs)(
     "div",
@@ -903,10 +1122,10 @@ var SDKMapProvider = ({
     });
   }, []);
   const [insets, setInsetsState] = (0, import_react2.useState)({
-    top: 0,
     bottom: 0,
     left: 0,
-    right: 0
+    right: 0,
+    top: 0
   });
   const setInsets = (0, import_react2.useCallback)((newInsets) => {
     setInsetsState((prev) => ({ ...prev, ...newInsets }));
@@ -951,6 +1170,7 @@ var SDKMapProvider = ({
       drawerState,
       etaData,
       hasControls,
+      insets,
       isFollowing,
       pitch,
       resetBearing,
@@ -958,10 +1178,9 @@ var SDKMapProvider = ({
       setDrawerState,
       setEtaData,
       setHasControls,
+      setInsets,
       setIsFollowing,
-      setPitch,
-      insets,
-      setInsets
+      setPitch
     }),
     [
       _registerCenterCallback,
@@ -1025,6 +1244,8 @@ var MapControls = ({
   menuContent,
   children,
   enableTouchDrag = false,
+  showScrollToTopButton = true,
+  scrollToTopThreshold = 300,
   isInternal = false
 }) => {
   const mapContext = (0, import_react3.useContext)(MapControlsContext);
@@ -1125,14 +1346,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;
@@ -1142,7 +1372,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") {
@@ -1155,7 +1384,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)`;
@@ -1179,8 +1408,10 @@ var MapControls = ({
         onChangeState: setDrawerState,
         ref: mergedRef,
         safeAreaInsets: mapContext?.insets,
+        scrollToTopThreshold,
         setCurrentTouchY,
         setTouchStartY,
+        showScrollToTopButton,
         side,
         state: drawerState,
         touchStartY
@@ -2591,7 +2822,7 @@ var RoutingService = {
 };
 
 // package.json
-var version = "0.2.0";
+var version = "0.2.1";
 
 // src/sdk.ts
 function deepFreeze(obj) {