npm - @cloudparse/up-miniapps-sdk - Versions diffs - 0.2.7 → 0.5.2 - Mend

@cloudparse/up-miniapps-sdk 0.2.7 → 0.5.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/dist/index.browser.min.js +55 -55
package/dist/index.browser.min.js.map +1 -1
package/dist/index.cjs +1092 -430
package/dist/index.cjs.map +1 -1
package/dist/index.d.cts +241 -39
package/dist/index.d.ts +241 -39
package/dist/index.js +1013 -350
package/dist/index.js.map +1 -1
package/dist/style.css +100 -0
package/package.json +1 -1

package/dist/index.js CHANGED Viewed

@@ -5,6 +5,11 @@ import {
   handleRouteRequest
 } from "./chunk-S4UHRBSM.js";
+// src/components/Map/MockLocationContext.tsx
+import { createContext, useContext } from "react";
+var MockLocationContext = createContext(null);
+var useMockLocation = () => useContext(MockLocationContext);
 // src/lib/utils.ts
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
@@ -348,6 +353,8 @@ var resolveHeightToPixels = (height, containerHeight) => {
   }
   return parseFloat(height);
 };
+var CONTENT_EDGE_PULL_THRESHOLD_PX = 24;
+var HANDLE_BAR_HEIGHT_PX = 32;
 var MapDrawer = forwardRef3(
   ({
     menuItems,
@@ -364,15 +371,20 @@ var MapDrawer = forwardRef3(
     clampedDragOffset,
     drawerPeekHeight,
     drawerFullHeight,
+    drawerAutoMaxHeight,
     containerHeight,
     menuContent,
     enableTouchDrag = false,
+    handleVisible = true,
+    onAutoContentHeightChange,
     showScrollToTopButton = true,
     scrollToTopThreshold = 300,
     safeAreaInsets = { bottom: 0, left: 0, right: 0, top: 0 }
   }, ref) => {
     const scrollContainerRef = useRef(null);
     const containerRef = useRef(null);
+    const handleBarRef = useRef(null);
+    const contentAreaRef = useRef(null);
     useImperativeHandle(
       ref,
       () => scrollContainerRef.current
@@ -385,11 +397,36 @@ var MapDrawer = forwardRef3(
           onChangeState("peek");
         } else if (state === "peek") {
           onChangeState("full");
+        } else if (state === "auto") {
+          onChangeState("closed");
         } else {
           onChangeState("peek");
         }
       }
     };
+    const handleHandleClickRef = useRef(handleHandleClick);
+    handleHandleClickRef.current = handleHandleClick;
+    const [autoContentPx, setAutoContentPx] = useState(0);
+    useEffect(() => {
+      if (state !== "auto") return;
+      const scrollEl = scrollContainerRef.current;
+      const contentAreaEl = contentAreaRef.current;
+      if (!scrollEl || !contentAreaEl) return;
+      const handleHeight = handleVisible ? handleBarRef.current?.offsetHeight ?? 0 : 0;
+      const contentEl = scrollEl.firstElementChild;
+      const measure = () => {
+        const contentAreaStyle = window.getComputedStyle(contentAreaEl);
+        const verticalPadding = parseFloat(contentAreaStyle.paddingTop || "0") + parseFloat(contentAreaStyle.paddingBottom || "0");
+        const contentHeight = contentEl?.scrollHeight ?? scrollEl.scrollHeight;
+        const px = handleHeight + verticalPadding + contentHeight;
+        setAutoContentPx(px);
+        onAutoContentHeightChange?.(px);
+      };
+      measure();
+      const ro = new ResizeObserver(measure);
+      ro.observe(contentEl ?? scrollEl);
+      return () => ro.disconnect();
+    }, [state, handleVisible, onAutoContentHeightChange]);
     const [showScrollTop, setShowScrollTop] = useState(false);
     const handleScroll = (e) => {
       const scrollTop = e.currentTarget.scrollTop;
@@ -406,6 +443,12 @@ var MapDrawer = forwardRef3(
     const isDraggingSheet = useRef(false);
     const hasDeterminedDirection = useRef(false);
     const isTouchOnContent = useRef(false);
+    const isTouchOnHandle = useRef(false);
+    const suppressNextClickRef = useRef(false);
+    const contentAtTopSinceY = useRef(null);
+    const contentAtBottomSinceY = useRef(null);
+    const dragStartYRef = useRef(null);
+    const dragBaseHeightPxRef = useRef(0);
     const stateRef = useRef(state);
     const touchStartYRef = useRef(touchStartY);
     const currentTouchYRef = useRef(currentTouchY);
@@ -427,8 +470,12 @@ var MapDrawer = forwardRef3(
         setCurrentTouchY(clientY);
         isDraggingSheet.current = false;
         hasDeterminedDirection.current = false;
+        contentAtTopSinceY.current = null;
+        contentAtBottomSinceY.current = null;
+        dragStartYRef.current = null;
         const target = e.target;
         isTouchOnContent.current = scrollContainerRef.current ? scrollContainerRef.current.contains(target) : false;
+        isTouchOnHandle.current = handleBarRef.current ? handleBarRef.current.contains(target) : false;
       };
       const handleNativeTouchMove = (e) => {
         const startY = touchStartYRef.current;
@@ -440,39 +487,86 @@ var MapDrawer = forwardRef3(
         const scrollHeight = scrollContainerRef.current ? scrollContainerRef.current.scrollHeight : 0;
         const isAtBottom = scrollTop + clientHeight >= scrollHeight - 1;
         const currentState = stateRef.current;
+        const containerHForHeights = containerHeight || container.parentElement?.getBoundingClientRect().height || window.innerHeight;
+        const fullPxNow = resolveHeightToPixels(
+          drawerFullHeight || "85%",
+          containerHForHeights
+        );
+        const peekPxNow = resolveHeightToPixels(
+          drawerPeekHeight || "15%",
+          containerHForHeights
+        );
+        const closedPxNow = (handleVisible ? HANDLE_BAR_HEIGHT_PX : 0) + (currentState === "closed" ? safeAreaInsets.bottom : 0);
+        const autoMaxPxNow = resolveHeightToPixels(
+          drawerAutoMaxHeight || "100%",
+          containerHForHeights
+        );
+        const autoPxNow = Math.min(autoMaxPxNow, autoContentPx);
+        const baselineHeightPxForState = (s) => {
+          if (s === "full") return fullPxNow;
+          if (s === "peek") return peekPxNow;
+          if (s === "auto") return autoPxNow;
+          return closedPxNow;
+        };
+        const commitDrag = () => {
+          isDraggingSheet.current = true;
+          dragStartYRef.current = currentY;
+          dragBaseHeightPxRef.current = baselineHeightPxForState(currentState);
+        };
+        if (scrollTop <= 0) {
+          if (contentAtTopSinceY.current === null) {
+            contentAtTopSinceY.current = currentY;
+          }
+        } else {
+          contentAtTopSinceY.current = null;
+        }
+        if (isAtBottom) {
+          if (contentAtBottomSinceY.current === null) {
+            contentAtBottomSinceY.current = currentY;
+          }
+        } else {
+          contentAtBottomSinceY.current = null;
+        }
+        const pullPastTop = contentAtTopSinceY.current !== null ? currentY - contentAtTopSinceY.current : 0;
+        const pullPastBottom = contentAtBottomSinceY.current !== null ? contentAtBottomSinceY.current - currentY : 0;
         if (!hasDeterminedDirection.current) {
           if (!isTouchOnContent.current) {
-            isDraggingSheet.current = true;
+            if (Math.abs(deltaY) < CONTENT_EDGE_PULL_THRESHOLD_PX) {
+              return;
+            }
+            commitDrag();
             hasDeterminedDirection.current = true;
           } else if (currentState !== "full") {
-            if (deltaY > 0 && isAtBottom) {
-              isDraggingSheet.current = true;
+            if (deltaY > 0 && isAtBottom && pullPastBottom >= CONTENT_EDGE_PULL_THRESHOLD_PX) {
+              commitDrag();
               hasDeterminedDirection.current = true;
-            } else if (deltaY < 0 && scrollTop <= 0) {
-              isDraggingSheet.current = true;
+            } else if (deltaY < 0 && scrollTop <= 0 && pullPastTop >= CONTENT_EDGE_PULL_THRESHOLD_PX) {
+              commitDrag();
               hasDeterminedDirection.current = true;
+            } else if (deltaY > 0 && isAtBottom || deltaY < 0 && scrollTop <= 0) {
+              return;
             } else {
               isDraggingSheet.current = false;
               hasDeterminedDirection.current = true;
             }
           } else {
-            if (deltaY < 0 && scrollTop <= 0) {
-              isDraggingSheet.current = true;
+            if (deltaY < 0 && scrollTop <= 0 && pullPastTop >= CONTENT_EDGE_PULL_THRESHOLD_PX) {
+              commitDrag();
               hasDeterminedDirection.current = true;
+            } else if (deltaY < 0 && scrollTop <= 0) {
+              return;
             } else {
               isDraggingSheet.current = false;
               hasDeterminedDirection.current = true;
             }
           }
         } else if (!isDraggingSheet.current && isTouchOnContent.current) {
-          if (deltaY < 0 && scrollTop <= 0) {
-            isDraggingSheet.current = true;
-            setTouchStartY(currentY);
+          if (deltaY < 0 && scrollTop <= 0 && pullPastTop >= CONTENT_EDGE_PULL_THRESHOLD_PX) {
+            commitDrag();
             return;
           }
-          if (deltaY > 0 && isAtBottom && currentState !== "full") {
-            isDraggingSheet.current = true;
-            setTouchStartY(currentY);
+          if (deltaY > 0 && isAtBottom && currentState !== "full" && pullPastBottom >= CONTENT_EDGE_PULL_THRESHOLD_PX) {
+            commitDrag();
             return;
           }
         }
@@ -482,33 +576,25 @@ var MapDrawer = forwardRef3(
           }
           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;
+            const dragOffset = currentY - (dragStartYRef.current ?? currentY);
             let localClamped = dragOffset;
             if (currentState === "full") {
               localClamped = Math.max(
                 0,
-                Math.min(fullPx2 - closedPx, dragOffset)
+                Math.min(fullPxNow - closedPxNow, dragOffset)
               );
             } else if (currentState === "peek") {
               localClamped = Math.max(
-                -(fullPx2 - peekPx2),
-                Math.min(peekPx2 - closedPx, dragOffset)
+                -(fullPxNow - peekPxNow),
+                Math.min(peekPxNow - closedPxNow, dragOffset)
               );
             } else if (currentState === "closed") {
               localClamped = Math.min(
                 0,
-                Math.max(-(fullPx2 - closedPx), dragOffset)
+                Math.max(-(fullPxNow - closedPxNow), dragOffset)
               );
+            } else if (currentState === "auto") {
+              localClamped = Math.max(0, dragOffset);
             }
             parentContainer.style.setProperty(
               "--drag-offset",
@@ -528,6 +614,13 @@ var MapDrawer = forwardRef3(
           return;
         }
         if (!isDraggingSheet.current) {
+          if (isTouchOnHandle.current) {
+            handleHandleClickRef.current();
+            suppressNextClickRef.current = true;
+            setTimeout(() => {
+              suppressNextClickRef.current = false;
+            }, 500);
+          }
           setTouchStartY(null);
           setCurrentTouchY(null);
           if (parentContainer) {
@@ -536,7 +629,8 @@ var MapDrawer = forwardRef3(
           return;
         }
         const touchEndY = e.changedTouches[0].clientY;
-        const dragDistance = Math.abs(touchEndY - startY);
+        const dragStartY = dragStartYRef.current ?? startY;
+        const dragDistance = Math.abs(touchEndY - dragStartY);
         if (dragDistance < 10) {
           setTouchStartY(null);
           setCurrentTouchY(null);
@@ -546,9 +640,6 @@ var MapDrawer = forwardRef3(
           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
@@ -558,18 +649,30 @@ var MapDrawer = forwardRef3(
           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 closedPx = (handleVisible ? HANDLE_BAR_HEIGHT_PX : 0) + (currentState === "closed" ? safeAreaInsets.bottom : 0);
+        const dragDelta = touchEndY - dragStartY;
+        const drawerHeightFromBottom = dragBaseHeightPxRef.current - dragDelta;
         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";
+        let targetState;
+        if (currentState === "auto") {
+          const autoMaxPx2 = resolveHeightToPixels(
+            drawerAutoMaxHeight || "100%",
+            containerH2
+          );
+          const autoPx2 = Math.min(autoMaxPx2, autoContentPx);
+          const distToAuto = Math.abs(drawerHeightFromBottom - autoPx2);
+          targetState = distToAuto <= distToClosed ? "auto" : "closed";
         } else {
-          targetState = "closed";
+          const distToFull = Math.abs(drawerHeightFromBottom - fullPx2);
+          const distToPeek = Math.abs(drawerHeightFromBottom - peekPx2);
+          const minDist = Math.min(distToFull, distToPeek, distToClosed);
+          if (minDist === distToFull) {
+            targetState = "full";
+          } else if (minDist === distToPeek) {
+            targetState = "peek";
+          } else {
+            targetState = "closed";
+          }
         }
         setTouchStartY(null);
         setCurrentTouchY(null);
@@ -600,17 +703,26 @@ var MapDrawer = forwardRef3(
       containerHeight,
       drawerFullHeight,
       drawerPeekHeight,
+      drawerAutoMaxHeight,
       safeAreaInsets,
       onChangeState,
       setTouchStartY,
-      setCurrentTouchY
+      setCurrentTouchY,
+      autoContentPx,
+      handleVisible
     ]);
-    const isBackdropActive = state === "full";
+    const isBackdropActive = state === "full" || state === "auto";
     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 autoMaxPx = resolveHeightToPixels(
+      drawerAutoMaxHeight || "100%",
+      containerH
+    );
     const shiftPx = fullPx - peekPx;
+    const autoPx = Math.min(autoMaxPx, autoContentPx);
+    const autoShiftPx = Math.max(fullPx - autoPx, 0);
     const getBottomDrawerTransform = () => {
       if (state === "full") {
         return "translateY(var(--drag-offset, 0px))";
@@ -618,7 +730,10 @@ var MapDrawer = forwardRef3(
       if (state === "peek") {
         return `translateY(calc(${shiftPx}px + var(--drag-offset, 0px)))`;
       }
-      const closedVisibleHeight = 32;
+      if (state === "auto") {
+        return `translateY(calc(${autoShiftPx}px + var(--drag-offset, 0px)))`;
+      }
+      const closedVisibleHeight = handleVisible ? HANDLE_BAR_HEIGHT_PX : 0;
       const closedShiftPx = fullPx - closedVisibleHeight;
       return `translateY(calc(${closedShiftPx}px + var(--drag-offset, 0px)))`;
     };
@@ -752,17 +867,34 @@ var MapDrawer = forwardRef3(
             ref: containerRef,
             style: {
               bottom: "0px",
-              height: typeof drawerFullHeight === "number" ? `${drawerFullHeight}px` : drawerFullHeight || "85%",
+              // Box height must stay exactly fullPx for "closed"/"peek"/
+              // "full" — every other transform calc in this component
+              // assumes the box IS fullPx tall. Only "auto" grows it (up to
+              // autoMaxPx) when content needs more room than fullPx offers;
+              // getBottomDrawerTransform()'s auto branch is derived to match
+              // (shift = max(fullPx - autoPx, 0), so a taller box needs zero
+              // extra shift to fully reveal itself).
+              height: `${state === "auto" ? Math.max(fullPx, autoPx) : fullPx}px`,
               marginBottom: state === "closed" ? `${safeAreaInsets.bottom}px` : "0px",
               transform: getBottomDrawerTransform(),
-              transition: isDragging ? "none" : "transform 300ms ease-out, margin-bottom 250ms ease-in-out"
+              // `height` is animated too (not just transform/margin-bottom):
+              // entering/leaving "auto" with content taller than fullPx
+              // changes the box's actual CSS height, and without this it
+              // would snap instantly while transform eases in over 300ms —
+              // a visible pop of content before the slide animation catches
+              // up.
+              transition: isDragging ? "none" : "transform 300ms ease-out, height 300ms ease-out, margin-bottom 250ms ease-in-out"
             },
             children: [
-              /* @__PURE__ */ jsx3(
+              handleVisible && /* @__PURE__ */ jsx3(
                 "div",
                 {
                   className: "w-full h-8 flex flex-col items-center justify-center cursor-pointer hover:bg-white/5 rounded-t-2xl transition-colors border-b border-white/5",
-                  onClick: handleHandleClick,
+                  onClick: () => {
+                    if (suppressNextClickRef.current) return;
+                    handleHandleClick();
+                  },
+                  ref: handleBarRef,
                   children: /* @__PURE__ */ jsx3("div", { className: "w-12 h-1 bg-white/25 rounded-full" })
                 }
               ),
@@ -770,6 +902,7 @@ var MapDrawer = forwardRef3(
                 "div",
                 {
                   className: "flex-1 flex flex-col overflow-hidden px-4 pb-4 pt-2 transition-[margin-top] duration-250 ease-in-out relative",
+                  ref: contentAreaRef,
                   style: {
                     marginTop: state === "closed" ? `${safeAreaInsets.bottom}px` : "0px"
                   },
@@ -1158,7 +1291,8 @@ var MapRightControls = ({
   customRecenterButton,
   customCompassButton,
   drawerPeekHeight,
-  insets = { bottom: 0, left: 0, right: 0, top: 0 }
+  insets = { bottom: 0, left: 0, right: 0, top: 0 },
+  bottomOffset = 0
 }) => {
   const aboveControls = customControls.filter(
     (c) => c.position === "above-recenter"
@@ -1170,7 +1304,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 - var(--drag-offset, 0px))` : `calc(${peekStyle} + 1rem + ${etaData ? etaBarHeight : 0}px - var(--drag-offset, 0px))` : `calc(1rem + ${insets.bottom}px)`;
+  const controlsBottom = side === "bottom" ? drawerState === "closed" ? `calc(${closedHeightOffset} + 1rem + ${activeEtaHeight}px + ${bottomOffset}px - var(--drag-offset, 0px))` : `calc(${peekStyle} + 1rem + ${etaData ? etaBarHeight : 0}px + ${bottomOffset}px - var(--drag-offset, 0px))` : `calc(1rem + ${insets.bottom}px + ${bottomOffset}px)`;
   const isControlsVisible = side !== "bottom" || drawerState !== "full";
   return /* @__PURE__ */ jsxs4(
     "div",
@@ -1299,15 +1433,15 @@ var MapRightControls = ({
 // src/components/Map/MapContext.tsx
 import {
-  createContext,
+  createContext as createContext2,
   useCallback,
-  useContext,
+  useContext as useContext2,
   useMemo,
   useRef as useRef2,
   useState as useState2
 } from "react";
 import { jsx as jsx7 } from "react/jsx-runtime";
-var MapControlsContext = createContext(
+var MapControlsContext = createContext2(
   null
 );
 var SDKMapProvider = ({
@@ -1321,6 +1455,10 @@ var SDKMapProvider = ({
   const setDrawerState = useCallback((val) => {
     setDrawerStateInternal(val);
   }, []);
+  const [drawerHandleVisible, setDrawerHandleVisibleState] = useState2(true);
+  const setDrawerHandleVisible = useCallback((val) => {
+    setDrawerHandleVisibleState((prev) => prev === val ? prev : val);
+  }, []);
   const [hasControls, setHasControlsState] = useState2(false);
   const setHasControls = useCallback((val) => {
     setHasControlsState((prev) => prev === val ? prev : val);
@@ -1347,6 +1485,7 @@ var SDKMapProvider = ({
   }, []);
   const centerCallbackRef = useRef2(null);
   const resetBearingCallbackRef = useRef2(null);
+  const flyToCallbackRef = useRef2(null);
   const centerOnUser = useCallback((params) => {
     if (centerCallbackRef.current) {
       centerCallbackRef.current(params);
@@ -1357,6 +1496,14 @@ var SDKMapProvider = ({
       resetBearingCallbackRef.current(params);
     }
   }, []);
+  const flyTo = useCallback(
+    (coords, params) => {
+      if (flyToCallbackRef.current) {
+        flyToCallbackRef.current(coords, params);
+      }
+    },
+    []
+  );
   const _registerCenterCallback = useCallback(
     (cb) => {
       centerCallbackRef.current = cb;
@@ -1369,6 +1516,12 @@ var SDKMapProvider = ({
     },
     []
   );
+  const _registerFlyToCallback = useCallback(
+    (cb) => {
+      flyToCallbackRef.current = cb;
+    },
+    []
+  );
   const setBearing = useCallback((b) => {
     setBearingState(b);
   }, []);
@@ -1378,18 +1531,22 @@ var SDKMapProvider = ({
   const contextValue = useMemo(
     () => ({
       _registerCenterCallback,
+      _registerFlyToCallback,
       _registerResetBearingCallback,
       bearing,
       centerOnUser,
       drawerContentRef,
+      drawerHandleVisible,
       drawerState,
       etaData,
+      flyTo,
       hasControls,
       insets,
       isFollowing,
       pitch,
       resetBearing,
       setBearing,
+      setDrawerHandleVisible,
       setDrawerState,
       setEtaData,
       setHasControls,
@@ -1399,16 +1556,20 @@ var SDKMapProvider = ({
     }),
     [
       _registerCenterCallback,
+      _registerFlyToCallback,
       _registerResetBearingCallback,
       bearing,
       centerOnUser,
+      drawerHandleVisible,
       drawerState,
       etaData,
+      flyTo,
       hasControls,
       isFollowing,
       pitch,
       resetBearing,
       setBearing,
+      setDrawerHandleVisible,
       setDrawerState,
       setEtaData,
       setHasControls,
@@ -1420,7 +1581,7 @@ var SDKMapProvider = ({
   return /* @__PURE__ */ jsx7(MapControlsContext.Provider, { value: contextValue, children });
 };
 var useMapControls = () => {
-  const context = useContext(MapControlsContext);
+  const context = useContext2(MapControlsContext);
   if (!context) {
     throw new Error("useMapControls must be used within a MapControlsProvider");
   }
@@ -1428,7 +1589,7 @@ var useMapControls = () => {
 };
 // src/components/Map/components/MapControls.tsx
-import { useCallback as useCallback2, useContext as useContext2, useEffect as useEffect2, useRef as useRef3, useState as useState3 } from "react";
+import { useCallback as useCallback2, useContext as useContext3, useEffect as useEffect2, useRef as useRef3, useState as useState3 } from "react";
 import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 var resolveHeightToPixels2 = (height, containerHeight) => {
   if (typeof height === "number") {
@@ -1455,15 +1616,17 @@ var MapControls = ({
   customCompassButton,
   drawerPeekHeight,
   drawerFullHeight,
+  drawerAutoMaxHeight,
   drawerContentRef,
   menuContent,
   children,
   enableTouchDrag = false,
   showScrollToTopButton = true,
   scrollToTopThreshold = 300,
+  controlsBottomOffset = 0,
   isInternal = false
 }) => {
-  const mapContext = useContext2(MapControlsContext);
+  const mapContext = useContext3(MapControlsContext);
   const contextRef = mapContext?.drawerContentRef;
   const mergedRef = useCallback2(
     (node) => {
@@ -1542,6 +1705,7 @@ var MapControls = ({
   const resolvedEtaData = etaData !== void 0 ? etaData : mapContext?.etaData;
   const [touchStartY, setTouchStartY] = useState3(null);
   const [currentTouchY, setCurrentTouchY] = useState3(null);
+  const [autoContentPx, setAutoContentPx] = useState3(0);
   useEffect2(() => {
     if (typeof window === "undefined") return;
     const checkLayout = () => {
@@ -1563,8 +1727,14 @@ var MapControls = ({
   const dragOffset = isDragging ? currentTouchY - touchStartY : 0;
   const fullPx = resolveHeightToPixels2(drawerFullHeight || "85%", mapHeight);
   const peekPx = resolveHeightToPixels2(drawerPeekHeight || "15%", mapHeight);
+  const autoMaxPx = resolveHeightToPixels2(
+    drawerAutoMaxHeight || "100%",
+    mapHeight
+  );
+  const autoPx = Math.min(autoMaxPx, autoContentPx);
   const bottomInset = mapContext?.insets.bottom || 0;
-  const closedPx = 32 + (drawerState === "closed" ? bottomInset : 0);
+  const handleVisible = mapContext ? mapContext.drawerHandleVisible : true;
+  const closedPx = (handleVisible ? 32 : 0) + (drawerState === "closed" ? bottomInset : 0);
   let clampedDragOffset = dragOffset;
   if (drawerState === "full") {
     clampedDragOffset = Math.max(0, Math.min(fullPx - closedPx, dragOffset));
@@ -1577,12 +1747,16 @@ var MapControls = ({
     );
   } else if (drawerState === "closed") {
     clampedDragOffset = Math.min(0, Math.max(-(fullPx - closedPx), dragOffset));
+  } else if (drawerState === "auto") {
+    clampedDragOffset = Math.max(0, dragOffset);
   }
-  let baseHeight = 32;
+  let baseHeight = handleVisible ? 32 : 0;
   if (drawerState === "peek") {
     baseHeight = peekPx;
   } else if (drawerState === "full") {
     baseHeight = fullPx;
+  } else if (drawerState === "auto") {
+    baseHeight = autoPx;
   }
   const currentDrawerHeight = baseHeight - clampedDragOffset;
   const startFadeHeight = peekPx + 20;
@@ -1612,14 +1786,17 @@ var MapControls = ({
         clampedDragOffset,
         containerHeight: mapHeight,
         currentTouchY,
+        drawerAutoMaxHeight,
         drawerFullHeight,
         drawerPeekHeight,
         enableTouchDrag,
         etaBarHeight,
         etaData: resolvedEtaData,
+        handleVisible,
         isDragging,
         menuContent: children || menuContent,
         menuItems,
+        onAutoContentHeightChange: setAutoContentPx,
         onChangeState: setDrawerState,
         ref: mergedRef,
         safeAreaInsets: mapContext?.insets,
@@ -1635,6 +1812,7 @@ var MapControls = ({
     /* @__PURE__ */ jsx8(
       MapRightControls,
       {
+        bottomOffset: controlsBottomOffset,
         clampedDragOffset,
         customCompassButton,
         customControls,
@@ -1672,7 +1850,7 @@ var MapControls = ({
 };
 // src/components/Map/components/MapMenu.tsx
-import { useContext as useContext3 } from "react";
+import { useContext as useContext4 } from "react";
 import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 var MapMenu = ({ children }) => {
   return /* @__PURE__ */ jsx9("div", { className: "flex flex-col gap-1.5", children });
@@ -1686,7 +1864,7 @@ var MapMenuItem = ({
   disabled = false,
   children
 }) => {
-  const context = useContext3(MapControlsContext);
+  const context = useContext4(MapControlsContext);
   const handleClick = (e) => {
     if (disabled) return;
     if (onPress) onPress();
@@ -1903,6 +2081,7 @@ var useLiveRouting = ({
   const lastCalcOrigin = useRef5(null);
   const lastCalcDest = useRef5(null);
   const isRequestInProgress = useRef5(false);
+  const lastResetDestKey = useRef5(null);
   const getDistance = useCallback4(
     (p1, p2) => {
       const R = 6371e3;
@@ -1978,6 +2157,11 @@ var useLiveRouting = ({
     },
     [profile, getDistance]
   );
+  useEffect4(() => {
+    if (initialMode === "navigation") {
+      setMode("navigation");
+    }
+  }, [initialMode]);
   useEffect4(() => {
     if (!enabled || !destination || !calculationOrigin) {
       if (!enabled || !destination) {
@@ -1985,10 +2169,17 @@ var useLiveRouting = ({
         setTotalDistance(null);
         lastCalcOrigin.current = null;
         lastCalcDest.current = null;
+        lastResetDestKey.current = null;
+        setMode(initialMode);
       }
       return;
     }
     const destChanged = !lastCalcDest.current || lastCalcDest.current[0] !== destination[0] || lastCalcDest.current[1] !== destination[1];
+    const destKey = `${destination[0]},${destination[1]}`;
+    if (lastResetDestKey.current !== destKey) {
+      lastResetDestKey.current = destKey;
+      setMode(initialMode);
+    }
     if (destChanged) {
       calculate(calculationOrigin, destination, true);
     } else if (lastCalcOrigin.current) {
@@ -2005,6 +2196,7 @@ var useLiveRouting = ({
     trackingLocation,
     destination,
     enabled,
+    initialMode,
     recalculateThreshold,
     calculate,
     getDistance
@@ -2050,6 +2242,99 @@ var useRoute = (origin, destination, profile = "driving") => {
   return { error, isCalculating, route };
 };
+// src/components/Map/hooks/useJourney.ts
+import { useCallback as useCallback5, useEffect as useEffect5, useRef as useRef6, useState as useState6 } from "react";
+var useJourney = (options = {}) => {
+  const { navigation, onAbort, onModeChange } = options;
+  const [progNav, setProgNav] = useState6(null);
+  const [isAborted, setIsAborted] = useState6(false);
+  useEffect5(() => {
+    const unsubCreate = sdk.on("SDK_NAVIGATION_CREATE", (payload) => {
+      setIsAborted(false);
+      setProgNav(payload);
+    });
+    const unsubStart = sdk.on("SDK_NAVIGATION_START", () => {
+      setIsAborted(false);
+      setProgNav((prev) => prev ? { ...prev, mode: "navigation" } : null);
+    });
+    const unsubAbort = sdk.on("SDK_NAVIGATION_ABORT", () => {
+      setIsAborted(true);
+      setProgNav(null);
+    });
+    return () => {
+      unsubCreate();
+      unsubStart();
+      unsubAbort();
+    };
+  }, []);
+  const effectiveOptions = progNav || navigation;
+  const internalNav = useLiveRouting({
+    destination: effectiveOptions?.destination || null,
+    enabled: !isAborted && !!effectiveOptions?.destination,
+    initialMode: effectiveOptions?.mode || "preview",
+    origin: effectiveOptions?.origin,
+    profile: effectiveOptions?.profile || "driving",
+    recalculateThreshold: effectiveOptions?.recalculateThreshold || 50
+  });
+  const prevDest = useRef6(null);
+  const currentDest = effectiveOptions?.destination;
+  useEffect5(() => {
+    if (currentDest && (!prevDest.current || prevDest.current[0] !== currentDest[0] || prevDest.current[1] !== currentDest[1])) {
+      setIsAborted(false);
+    }
+    prevDest.current = currentDest;
+  }, [currentDest]);
+  const onModeChangeRef = useRef6(onModeChange);
+  onModeChangeRef.current = onModeChange;
+  useEffect5(() => {
+    onModeChangeRef.current?.(internalNav.mode);
+  }, [internalNav.mode]);
+  const isActive = !isAborted && !!effectiveOptions?.destination;
+  const distanceRemainingMeters = isActive ? internalNav.currentDistanceMeters : null;
+  const totalDistanceMeters = isActive ? internalNav.totalDistance : null;
+  const routeDurationSeconds = internalNav.route?.durationSeconds ?? null;
+  const remainingMeters = distanceRemainingMeters ?? 0;
+  const distanceRemainingKm = remainingMeters / 1e3;
+  const etaMinutes = (() => {
+    if (!routeDurationSeconds || !totalDistanceMeters || !distanceRemainingMeters)
+      return 0;
+    const ratio = distanceRemainingMeters / totalDistanceMeters;
+    return Math.ceil(routeDurationSeconds * ratio / 60);
+  })();
+  const progress = totalDistanceMeters && totalDistanceMeters > 0 ? Math.min(
+    100,
+    Math.max(
+      0,
+      (totalDistanceMeters - remainingMeters) / totalDistanceMeters * 100
+    )
+  ) : 0;
+  const cancel = useCallback5(() => {
+    setIsAborted(true);
+    setProgNav(null);
+    sdk.navigation.abort();
+    if (onAbort) onAbort();
+  }, [onAbort]);
+  const start = useCallback5(() => {
+    sdk.navigation.start();
+    internalNav.start();
+  }, [internalNav.start]);
+  return {
+    cancel,
+    distanceRemainingKm,
+    distanceRemainingMeters,
+    error: isActive ? internalNav.error : null,
+    etaMinutes,
+    isActive,
+    isCalculating: isActive ? internalNav.isCalculating : false,
+    mode: isActive ? internalNav.mode : "preview",
+    progress,
+    recalculate: internalNav.recalculate,
+    route: isActive ? internalNav.route : null,
+    start,
+    totalDistanceMeters
+  };
+};
 // src/components/Map/hooks/useTrimmedRoute.ts
 import { useMemo as useMemo3 } from "react";
 var useTrimmedRoute = (route, userLocation) => {
@@ -2127,19 +2412,81 @@ var RouteLayer = ({
 // src/components/Map/Map.tsx
 import { Map as MapLibre, MapProvider } from "@vis.gl/react-maplibre";
 import React4, {
-  useCallback as useCallback5,
-  useContext as useContext4,
-  useEffect as useEffect6,
-  useMemo as useMemo5,
-  useRef as useRef6,
-  useState as useState7
+  useCallback as useCallback6,
+  useContext as useContext5,
+  useEffect as useEffect7,
+  useMemo as useMemo6,
+  useRef as useRef7,
+  useState as useState8
 } from "react";
 import "maplibre-gl/dist/maplibre-gl.css";
+// src/components/Map/utils/geoCircle.ts
+var EARTH_RADIUS_METERS = 6371e3;
+var buildGeoCircle = (center, radiusMeters, points = 64) => {
+  const [lng, lat] = center;
+  const latRad = lat * Math.PI / 180;
+  const coordinates = [];
+  for (let i = 0; i <= points; i++) {
+    const angle = i / points * 2 * Math.PI;
+    const dLat = radiusMeters * Math.cos(angle) / EARTH_RADIUS_METERS * (180 / Math.PI);
+    const dLng = radiusMeters * Math.sin(angle) / (EARTH_RADIUS_METERS * Math.cos(latRad)) * (180 / Math.PI);
+    coordinates.push([lng + dLng, lat + dLat]);
+  }
+  return {
+    geometry: {
+      coordinates: [coordinates],
+      type: "Polygon"
+    },
+    properties: {},
+    type: "Feature"
+  };
+};
+// src/components/Map/layers/MockRadiusLayer.tsx
+import { Layer as Layer2, Source as Source2 } from "@vis.gl/react-maplibre";
+import { useMemo as useMemo4 } from "react";
+import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+var MockRadiusLayer = ({
+  center,
+  radiusMeters,
+  color = "#39ff88"
+}) => {
+  const data = useMemo4(
+    () => buildGeoCircle(center, radiusMeters),
+    [center, radiusMeters]
+  );
+  return /* @__PURE__ */ jsxs8(Source2, { data, id: "sdk-mock-radius-source", type: "geojson", children: [
+    /* @__PURE__ */ jsx11(
+      Layer2,
+      {
+        id: "sdk-mock-radius-fill",
+        paint: {
+          "fill-color": color,
+          "fill-opacity": 0.12
+        },
+        type: "fill"
+      }
+    ),
+    /* @__PURE__ */ jsx11(
+      Layer2,
+      {
+        id: "sdk-mock-radius-outline",
+        paint: {
+          "line-color": color,
+          "line-dasharray": [2, 2],
+          "line-width": 2
+        },
+        type: "line"
+      }
+    )
+  ] });
+};
 // src/components/Map/layers/POILayers.tsx
-import { Layer as Layer2, Source as Source2, useMap } from "@vis.gl/react-maplibre";
-import { useEffect as useEffect5, useMemo as useMemo4, useState as useState6 } from "react";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { Layer as Layer3, Source as Source3, useMap } from "@vis.gl/react-maplibre";
+import { useEffect as useEffect6, useMemo as useMemo5, useState as useState7 } from "react";
+import { jsx as jsx12 } from "react/jsx-runtime";
 function createEmojiIcon(emoji, size = 64) {
   const canvas = document.createElement("canvas");
   canvas.width = size;
@@ -2152,13 +2499,13 @@ function createEmojiIcon(emoji, size = 64) {
   return ctx.getImageData(0, 0, size, size);
 }
 var POILayers = ({ pois }) => {
-  const [loadedImages, setLoadedImages] = useState6(0);
+  const [loadedImages, setLoadedImages] = useState7(0);
   const { current: map } = useMap();
-  const glPois = useMemo4(
+  const glPois = useMemo5(
     () => pois.filter((p) => !p.displayMode || p.displayMode === "gl"),
     [pois]
   );
-  useEffect5(() => {
+  useEffect6(() => {
     if (!map) return;
     const glMap = map.getMap();
     const defaults = [
@@ -2198,7 +2545,7 @@ var POILayers = ({ pois }) => {
       setLoadedImages((prev) => prev + updates);
     }
   }, [map, glPois]);
-  const geojson = useMemo4(
+  const geojson = useMemo5(
     () => ({
       features: glPois.map((poi) => ({
         geometry: {
@@ -2216,8 +2563,8 @@ var POILayers = ({ pois }) => {
     }),
     [glPois]
   );
-  return /* @__PURE__ */ jsx11(Source2, { data: geojson, id: "sdk-pois", type: "geojson", children: /* @__PURE__ */ jsx11(
-    Layer2,
+  return /* @__PURE__ */ jsx12(Source3, { data: geojson, id: "sdk-pois", type: "geojson", children: /* @__PURE__ */ jsx12(
+    Layer3,
     {
       id: "sdk-poi-layer",
       layout: {
@@ -2253,11 +2600,11 @@ var POILayers = ({ pois }) => {
 // src/components/Map/layers/POIMarkers.tsx
 import { Marker } from "@vis.gl/react-maplibre";
-import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
 var POIMarkers = ({ pois, onClick }) => {
   const markerPois = pois.filter((p) => p.displayMode === "marker");
   if (markerPois.length === 0) return null;
-  return /* @__PURE__ */ jsx12(Fragment3, { children: markerPois.map((poi) => /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx13(Fragment3, { children: markerPois.map((poi) => /* @__PURE__ */ jsx13(
     Marker,
     {
       anchor: "bottom",
@@ -2267,7 +2614,7 @@ var POIMarkers = ({ pois, onClick }) => {
         e.originalEvent.stopPropagation();
         if (onClick) onClick(poi);
       },
-      children: poi.markerComponent ? poi.markerComponent : /* @__PURE__ */ jsxs8(
+      children: poi.markerComponent ? poi.markerComponent : /* @__PURE__ */ jsxs9(
         "div",
         {
           style: {
@@ -2276,7 +2623,7 @@ var POIMarkers = ({ pois, onClick }) => {
             transform: "transition-transform duration-200 hover:scale-110"
           },
           children: [
-            /* @__PURE__ */ jsx12(
+            /* @__PURE__ */ jsx13(
               "div",
               {
                 style: {
@@ -2289,7 +2636,7 @@ var POIMarkers = ({ pois, onClick }) => {
                   justifyContent: "center",
                   width: "32px"
                 },
-                children: poi.emoji ? /* @__PURE__ */ jsx12("span", { style: { fontSize: "16px" }, children: poi.emoji }) : /* @__PURE__ */ jsx12(
+                children: poi.emoji ? /* @__PURE__ */ jsx13("span", { style: { fontSize: "16px" }, children: poi.emoji }) : /* @__PURE__ */ jsx13(
                   "div",
                   {
                     style: {
@@ -2302,7 +2649,7 @@ var POIMarkers = ({ pois, onClick }) => {
                 )
               }
             ),
-            /* @__PURE__ */ jsx12(
+            /* @__PURE__ */ jsx13(
               "div",
               {
                 style: {
@@ -2325,19 +2672,19 @@ var POIMarkers = ({ pois, onClick }) => {
 // src/components/Map/layers/UserLocationLayer.tsx
 import { Marker as Marker2 } from "@vis.gl/react-maplibre";
-import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
 var UserLocationLayer = ({
   forcedLocation,
   heading
 }) => {
   if (!forcedLocation) return null;
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx14(
     Marker2,
     {
       anchor: "center",
       latitude: forcedLocation[1],
       longitude: forcedLocation[0],
-      children: /* @__PURE__ */ jsxs9(
+      children: /* @__PURE__ */ jsxs10(
         "div",
         {
           style: {
@@ -2347,7 +2694,7 @@ var UserLocationLayer = ({
             position: "relative"
           },
           children: [
-            /* @__PURE__ */ jsx13(
+            /* @__PURE__ */ jsx14(
               "div",
               {
                 style: {
@@ -2360,7 +2707,7 @@ var UserLocationLayer = ({
                 }
               }
             ),
-            heading !== void 0 && heading !== null && /* @__PURE__ */ jsx13(
+            heading !== void 0 && heading !== null && /* @__PURE__ */ jsx14(
               "div",
               {
                 style: {
@@ -2370,13 +2717,13 @@ var UserLocationLayer = ({
                   width: "60px",
                   zIndex: 0
                 },
-                children: /* @__PURE__ */ jsxs9(
+                children: /* @__PURE__ */ jsxs10(
                   "svg",
                   {
                     style: { height: "100%", width: "100%" },
                     viewBox: "0 0 100 100",
                     children: [
-                      /* @__PURE__ */ jsx13("defs", { children: /* @__PURE__ */ jsxs9(
+                      /* @__PURE__ */ jsx14("defs", { children: /* @__PURE__ */ jsxs10(
                         "radialGradient",
                         {
                           cx: "50%",
@@ -2386,7 +2733,7 @@ var UserLocationLayer = ({
                           id: "grad1",
                           r: "50%",
                           children: [
-                            /* @__PURE__ */ jsx13(
+                            /* @__PURE__ */ jsx14(
                               "stop",
                               {
                                 offset: "0%",
@@ -2396,7 +2743,7 @@ var UserLocationLayer = ({
                                 }
                               }
                             ),
-                            /* @__PURE__ */ jsx13(
+                            /* @__PURE__ */ jsx14(
                               "stop",
                               {
                                 offset: "100%",
@@ -2409,7 +2756,7 @@ var UserLocationLayer = ({
                           ]
                         }
                       ) }),
-                      /* @__PURE__ */ jsx13(
+                      /* @__PURE__ */ jsx14(
                         "path",
                         {
                           d: "M 50 50 L 35 0 A 50 50 0 0 1 65 0 Z",
@@ -2421,7 +2768,7 @@ var UserLocationLayer = ({
                 )
               }
             ),
-            /* @__PURE__ */ jsx13(
+            /* @__PURE__ */ jsx14(
               "div",
               {
                 style: {
@@ -2435,7 +2782,7 @@ var UserLocationLayer = ({
                   width: "20px",
                   zIndex: 1
                 },
-                children: /* @__PURE__ */ jsx13(
+                children: /* @__PURE__ */ jsx14(
                   "div",
                   {
                     style: {
@@ -2449,7 +2796,7 @@ var UserLocationLayer = ({
                 )
               }
             ),
-            /* @__PURE__ */ jsx13("style", { children: `@keyframes pulse { 0% { transform: scale(0.95); opacity: 0.7; } 70% { transform: scale(1.5); opacity: 0; } 100% { transform: scale(0.95); opacity: 0; } }` })
+            /* @__PURE__ */ jsx14("style", { children: `@keyframes pulse { 0% { transform: scale(0.95); opacity: 0.7; } 70% { transform: scale(1.5); opacity: 0; } 100% { transform: scale(0.95); opacity: 0; } }` })
           ]
         }
       )
@@ -2458,7 +2805,7 @@ var UserLocationLayer = ({
 };
 // src/components/Map/Map.tsx
-import { Fragment as Fragment4, jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
 var MapInternal = ({
   initialViewState = {
     latitude: 45.90583599233422,
@@ -2477,6 +2824,7 @@ var MapInternal = ({
   onLoad,
   showUserLocation = true,
   followUser: initialFollowUser = false,
+  lockToUser = false,
   showUserLocationButton = true,
   renderUserLocation,
   pois = [],
@@ -2495,67 +2843,44 @@ var MapInternal = ({
   controlProps = {},
   enableTouchDrag = false
 }) => {
-  const mapControls = useContext4(MapControlsContext);
-  const mapRef = useRef6(null);
+  const mapControls = useContext5(MapControlsContext);
+  const mockLocation = useContext5(MockLocationContext);
+  const mapRef = useRef7(null);
   const userLocationState = useUserLocation();
-  const [progNav, setProgNav] = useState7(null);
-  const [isAborted, setIsAborted] = useState7(false);
-  useEffect6(() => {
-    const unsubCreate = sdk.on("SDK_NAVIGATION_CREATE", (payload) => {
-      setIsAborted(false);
-      setProgNav(payload);
-    });
-    const unsubStart = sdk.on("SDK_NAVIGATION_START", () => {
-      setIsAborted(false);
-      setProgNav((prev) => prev ? { ...prev, mode: "navigation" } : null);
-    });
-    const unsubAbort = sdk.on("SDK_NAVIGATION_ABORT", () => {
-      setIsAborted(true);
-      setProgNav(null);
-    });
-    return () => {
-      unsubCreate();
-      unsubStart();
-      unsubAbort();
-    };
-  }, []);
-  const effectiveNavOptions = progNav || navigation;
-  const internalNav = useLiveRouting({
-    destination: effectiveNavOptions?.destination || null,
-    enabled: !!effectiveNavOptions?.destination,
-    initialMode: effectiveNavOptions?.mode || "preview",
-    origin: effectiveNavOptions?.origin,
-    profile: effectiveNavOptions?.profile || "driving",
-    recalculateThreshold: effectiveNavOptions?.recalculateThreshold || 50
+  const journey = useJourney({
+    navigation,
+    onModeChange: navigation ? onNavigationModeChange : void 0
   });
-  useEffect6(() => {
-    if (onNavigationModeChange && navigation) {
-      onNavigationModeChange(internalNav.mode);
-    }
-  }, [internalNav.mode, onNavigationModeChange, navigation]);
-  const prevDest = useRef6(null);
-  const currentDest = effectiveNavOptions?.destination;
-  useEffect6(() => {
-    if (currentDest) {
-      if (!prevDest.current || prevDest.current[0] !== currentDest[0] || prevDest.current[1] !== currentDest[1]) {
-        setIsAborted(false);
-      }
-    }
-    prevDest.current = currentDest;
-  }, [currentDest]);
-  const navigationData = !isAborted ? effectiveNavOptions ? internalNav : externalNavigationData : void 0;
-  const route = !isAborted ? effectiveNavOptions ? internalNav.route?.geometry : externalRoute : void 0;
-  const showNavigationUI = !isAborted && effectiveNavOptions?.showUI !== false && (effectiveNavOptions ? !!effectiveNavOptions.destination : externalShowNavigationUI);
+  const hasIntegratedNav = journey.isActive;
+  const navigationData = hasIntegratedNav ? {
+    currentDistanceMeters: journey.distanceRemainingMeters,
+    mode: journey.mode,
+    route: journey.route,
+    start: journey.start,
+    totalDistance: journey.totalDistanceMeters
+  } : externalNavigationData;
+  const route = hasIntegratedNav ? journey.route?.geometry : externalRoute;
+  const showNavigationUI = hasIntegratedNav ? externalShowNavigationUI !== false && navigation?.showUI !== false : externalShowNavigationUI;
   const mode = navigationData?.mode || "preview";
   const resolvedInitialFollow = mapControls ? mapControls.isFollowing : initialFollowUser;
-  const isFollowingRef = useRef6(resolvedInitialFollow);
-  const isFlyingRef = useRef6(false);
-  const [localIsFollowingUI, setLocalIsFollowingUI] = useState7(
+  const isFollowingRef = useRef7(resolvedInitialFollow);
+  const isFlyingRef = useRef7(false);
+  const flyingGenerationRef = useRef7(0);
+  const lockFlying = useCallback6(() => {
+    isFlyingRef.current = true;
+    return ++flyingGenerationRef.current;
+  }, []);
+  const releaseFlyingIfCurrent = useCallback6((flightId) => {
+    if (flyingGenerationRef.current === flightId) {
+      isFlyingRef.current = false;
+    }
+  }, []);
+  const [localIsFollowingUI, setLocalIsFollowingUI] = useState8(
     resolvedInitialFollow
   );
   const isFollowingUI = mapControls ? mapControls.isFollowing : localIsFollowingUI;
   const setIsFollowingCtx = mapControls?.setIsFollowing;
-  const setFollowMode = useCallback5(
+  const setFollowMode = useCallback6(
     (follow) => {
       isFollowingRef.current = follow;
       setLocalIsFollowingUI(follow);
@@ -2565,7 +2890,7 @@ var MapInternal = ({
     },
     [setIsFollowingCtx]
   );
-  useEffect6(() => {
+  useEffect7(() => {
     if (mapControls && mapControls.isFollowing !== isFollowingRef.current) {
       isFollowingRef.current = mapControls.isFollowing;
     }
@@ -2574,13 +2899,13 @@ var MapInternal = ({
   if (pois.length > 0 && !mergedInteractiveLayerIds.includes("sdk-poi-layer")) {
     mergedInteractiveLayerIds.push("sdk-poi-layer");
   }
-  const prevInitialFollow = useRef6(initialFollowUser);
-  useEffect6(() => {
+  const prevInitialFollow = useRef7(initialFollowUser);
+  useEffect7(() => {
     if (initialFollowUser !== prevInitialFollow.current) {
       setFollowMode(initialFollowUser);
       prevInitialFollow.current = initialFollowUser;
       if (initialFollowUser && userLocationState.coords && mapRef.current) {
-        isFlyingRef.current = true;
+        const flightId = lockFlying();
         mapRef.current.flyTo({
           center: userLocationState.coords,
           duration: 1e3,
@@ -2588,14 +2913,20 @@ var MapInternal = ({
           zoom: Math.max(mapRef.current.getZoom(), 16)
         });
         setTimeout(() => {
-          isFlyingRef.current = false;
+          releaseFlyingIfCurrent(flightId);
         }, 1050);
       }
     }
-  }, [initialFollowUser, setFollowMode, userLocationState.coords]);
-  const lastAutoLockedRouteRef = useRef6(null);
-  const lastModeRef = useRef6(null);
-  useEffect6(() => {
+  }, [
+    initialFollowUser,
+    setFollowMode,
+    userLocationState.coords,
+    lockFlying,
+    releaseFlyingIfCurrent
+  ]);
+  const lastAutoLockedRouteRef = useRef7(null);
+  const lastModeRef = useRef7(null);
+  useEffect7(() => {
     if (!route || !mapRef.current) {
       if (!route) lastAutoLockedRouteRef.current = null;
       return;
@@ -2603,9 +2934,11 @@ var MapInternal = ({
     const isNewRoute = route !== lastAutoLockedRouteRef.current;
     const modeChanged = lastModeRef.current !== mode;
     if (mode === "navigation") {
-      setFollowMode(true);
+      if (modeChanged || isNewRoute) {
+        setFollowMode(true);
+      }
       if ((modeChanged || isNewRoute) && userLocationState.coords && mapRef.current) {
-        isFlyingRef.current = true;
+        const flightId = lockFlying();
         mapRef.current.flyTo({
           center: userLocationState.coords,
           duration: 1e3,
@@ -2614,7 +2947,7 @@ var MapInternal = ({
           // Zoomed in on user for active guidance
         });
         setTimeout(() => {
-          isFlyingRef.current = false;
+          releaseFlyingIfCurrent(flightId);
         }, 1050);
       }
     } else if (mode === "preview" && isNewRoute) {
@@ -2641,8 +2974,15 @@ var MapInternal = ({
     }
     lastAutoLockedRouteRef.current = route;
     lastModeRef.current = mode;
-  }, [route, mode, setFollowMode, userLocationState.coords]);
-  useEffect6(() => {
+  }, [
+    route,
+    mode,
+    setFollowMode,
+    userLocationState.coords,
+    lockFlying,
+    releaseFlyingIfCurrent
+  ]);
+  useEffect7(() => {
     if (isFollowingRef.current && !isFlyingRef.current && userLocationState.coords && mapRef.current) {
       mapRef.current.easeTo({
         center: userLocationState.coords,
@@ -2671,15 +3011,13 @@ var MapInternal = ({
     100,
     Math.max(0, (totalDist - remainingMeters) / totalDist * 100)
   ) : 0;
-  const showEtaData = navigationData && route ? {
+  const showEtaData = showNavigationUI && navigationData && route ? {
     distanceRemainingKm: kmRemaining,
     etaMins,
     label: mode === "navigation" ? "Walking Guidance Active" : "Route Preview",
     mode,
     onAbort: () => {
-      setIsAborted(true);
-      setProgNav(null);
-      sdk.navigation.abort();
+      journey.cancel();
       if (onNavigationAbort) {
         onNavigationAbort();
       }
@@ -2688,48 +3026,19 @@ var MapInternal = ({
     progress: progressValue
   } : void 0;
   const setEtaDataCtx = mapControls?.setEtaData;
-  useEffect6(() => {
+  useEffect7(() => {
     if (setEtaDataCtx) {
       setEtaDataCtx(showEtaData);
     }
   }, [showEtaData, setEtaDataCtx]);
   const setDrawerStateCtx = mapControls?.setDrawerState;
-  useEffect6(() => {
+  useEffect7(() => {
     if (setDrawerStateCtx && propDrawerState !== void 0) {
       setDrawerStateCtx(propDrawerState);
     }
   }, [propDrawerState, setDrawerStateCtx]);
-  const defaultMenuItems = useMemo5(
-    () => [
-      {
-        icon: /* @__PURE__ */ jsx14(
-          "svg",
-          {
-            className: "w-5 h-5",
-            fill: "none",
-            stroke: "currentColor",
-            strokeWidth: "2",
-            viewBox: "0 0 24 24",
-            children: /* @__PURE__ */ jsx14(
-              "path",
-              {
-                d: "M12 11c0 3.517-1.009 6.799-2.753 9.571m-3.44-2.04l.054-.09A13.916 13.916 0 008 11a4 4 0 118 0c0 1.017-.07 2.019-.203 3m-2.118 6.844A21.88 21.88 0 0015.171 17m3.839 1.132c.645-2.266.99-4.659.99-7.132A8 8 0 008 4.07M3 15.364c.64-1.319 1-2.8 1-4.364 0-1.457.39-2.823 1.07-4",
-                strokeLinecap: "round",
-                strokeLinejoin: "round"
-              }
-            )
-          }
-        ),
-        id: "walking",
-        label: "Walking Mode",
-        onPress: () => {
-        }
-      }
-    ],
-    []
-  );
-  const resolvedMenuItems = menuItems || defaultMenuItems;
-  const { mapLibreChildren, menuContentFromChildren } = useMemo5(() => {
+  const resolvedMenuItems = menuItems ?? [];
+  const { mapLibreChildren, menuContentFromChildren } = useMemo6(() => {
     const mapLibreChildren2 = [];
     const extractedMenuItems = [];
     React4.Children.forEach(children, (child) => {
@@ -2761,10 +3070,14 @@ var MapInternal = ({
         mapLibreChildren2.push(child);
       }
     });
-    const menuContentFromChildren2 = extractedMenuItems.length > 0 ? /* @__PURE__ */ jsx14(MapMenu, { children: extractedMenuItems }) : null;
+    const menuContentFromChildren2 = extractedMenuItems.length > 0 ? /* @__PURE__ */ jsx15(MapMenu, { children: extractedMenuItems }) : null;
     return { mapLibreChildren: mapLibreChildren2, menuContentFromChildren: menuContentFromChildren2 };
   }, [children]);
   const handleMapClick = (e) => {
+    if (mockLocation?.isPlacingLocation) {
+      mockLocation.placeLocation([e.lngLat.lng, e.lngLat.lat]);
+      return;
+    }
     const clickedFeatures = e.features || [];
     if (onPoiClick) {
       const poiFeature = clickedFeatures.find(
@@ -2785,26 +3098,52 @@ var MapInternal = ({
     }
     if (onClick) onClick(e);
   };
-  const handleCenterOnUser = useCallback5(
+  const handleCenterOnUser = useCallback6(
     (payload) => {
       if (userLocationState.coords && mapRef.current) {
         setFollowMode(true);
-        isFlyingRef.current = true;
+        const flightId = lockFlying();
         mapRef.current.flyTo({
           center: userLocationState.coords,
           duration: 1e3,
           essential: true,
           pitch: payload?.pitch || 0,
-          zoom: Math.max(mapRef.current.getZoom(), 16)
+          zoom: Math.max(mapRef.current.getZoom(), 16),
+          ...payload?.bearing !== void 0 ? { bearing: payload.bearing } : {}
         });
         setTimeout(() => {
-          isFlyingRef.current = false;
+          releaseFlyingIfCurrent(flightId);
         }, 1050);
       }
     },
-    [userLocationState.coords, setFollowMode]
+    [
+      userLocationState.coords,
+      setFollowMode,
+      lockFlying,
+      releaseFlyingIfCurrent
+    ]
   );
-  const handleResetBearing = useCallback5((params) => {
+  const handleFlyTo = useCallback6(
+    (coords, params) => {
+      const map = mapRef.current;
+      if (!map) return;
+      setFollowMode(false);
+      const flightId = lockFlying();
+      map.flyTo({
+        center: coords,
+        essential: true,
+        pitch: params?.pitch ?? 0,
+        zoom: params?.zoom ?? map.getZoom(),
+        // Omit entirely (rather than defaulting to a fixed number) when
+        // not given, so MapLibre computes its own distance-based duration.
+        ...params?.duration !== void 0 ? { duration: params.duration } : {},
+        ...params?.bearing !== void 0 ? { bearing: params.bearing } : {}
+      });
+      map.once("moveend", () => releaseFlyingIfCurrent(flightId));
+    },
+    [setFollowMode, lockFlying, releaseFlyingIfCurrent]
+  );
+  const handleResetBearing = useCallback6((params) => {
     if (mapRef.current) {
       mapRef.current.easeTo({
         bearing: 0,
@@ -2814,34 +3153,35 @@ var MapInternal = ({
       });
     }
   }, []);
-  useEffect6(() => {
+  useEffect7(() => {
     if (mapControls) {
       mapControls._registerCenterCallback(handleCenterOnUser);
       mapControls._registerResetBearingCallback(handleResetBearing);
+      mapControls._registerFlyToCallback(handleFlyTo);
     }
-  }, [mapControls, handleCenterOnUser, handleResetBearing]);
-  const handleMove = useCallback5(() => {
+  }, [mapControls, handleCenterOnUser, handleResetBearing, handleFlyTo]);
+  const handleMove = useCallback6(() => {
     if (mapRef.current && mapControls) {
       mapControls.setBearing(mapRef.current.getBearing());
       mapControls.setPitch(mapRef.current.getPitch());
     }
   }, [mapControls]);
   const handleUserInteraction = () => {
+    if (lockToUser) return;
     if (isFollowingRef.current) {
-      console.log("[SDK:Map] Manual interaction detected. Halting tracking.");
       setFollowMode(false);
       if (mapRef.current) {
         mapRef.current.stop();
       }
     }
   };
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs11(
     "div",
     {
-      className: `w-full h-full overflow-hidden relative ${className}`,
+      className: `w-full h-full overflow-hidden relative ${mockLocation?.isPlacingLocation ? "cursor-crosshair" : ""} ${className}`,
       style,
       children: [
-        /* @__PURE__ */ jsxs10(
+        /* @__PURE__ */ jsxs11(
           MapLibre,
           {
             attributionControl: false,
@@ -2863,6 +3203,7 @@ var MapInternal = ({
             },
             onMouseDown: handleUserInteraction,
             onMove: handleMove,
+            onRotateStart: handleUserInteraction,
             onTouchStart: handleUserInteraction,
             onWheel: handleUserInteraction,
             ref: mapRef,
@@ -2870,23 +3211,30 @@ var MapInternal = ({
               showUserLocation && userLocationState.coords && (renderUserLocation ? renderUserLocation({
                 coords: userLocationState.coords,
                 heading: userLocationState.heading
-              }) : /* @__PURE__ */ jsx14(
+              }) : /* @__PURE__ */ jsx15(
                 UserLocationLayer,
                 {
                   forcedLocation: userLocationState.coords,
                   heading: userLocationState.heading
                 }
               )),
-              displayRoute && /* @__PURE__ */ jsx14(RouteLayer, { geometry: displayRoute }),
-              pois.length > 0 && /* @__PURE__ */ jsxs10(Fragment4, { children: [
-                /* @__PURE__ */ jsx14(POILayers, { pois }),
-                /* @__PURE__ */ jsx14(POIMarkers, { onClick: onPoiClick, pois })
+              mockLocation && mockLocation.radiusMeters > 0 && userLocationState.coords && /* @__PURE__ */ jsx15(
+                MockRadiusLayer,
+                {
+                  center: userLocationState.coords,
+                  radiusMeters: mockLocation.radiusMeters
+                }
+              ),
+              displayRoute && /* @__PURE__ */ jsx15(RouteLayer, { geometry: displayRoute }),
+              pois.length > 0 && /* @__PURE__ */ jsxs11(Fragment4, { children: [
+                /* @__PURE__ */ jsx15(POILayers, { pois }),
+                /* @__PURE__ */ jsx15(POIMarkers, { onClick: onPoiClick, pois })
               ] }),
               mapLibreChildren
             ]
           }
         ),
-        showControls && mapControls && !mapControls.hasControls && /* @__PURE__ */ jsx14(
+        showControls && mapControls && !mapControls.hasControls && /* @__PURE__ */ jsx15(
           MapControls,
           {
             drawerContentRef,
@@ -2906,14 +3254,14 @@ var MapInternal = ({
 var SDKMapProviderWrapper = ({
   children
 }) => {
-  const context = useContext4(MapControlsContext);
+  const context = useContext5(MapControlsContext);
   if (context) {
-    return /* @__PURE__ */ jsx14(Fragment4, { children });
+    return /* @__PURE__ */ jsx15(Fragment4, { children });
   }
-  return /* @__PURE__ */ jsx14(SDKMapProvider, { children });
+  return /* @__PURE__ */ jsx15(SDKMapProvider, { children });
 };
 var Map2 = (props) => {
-  return /* @__PURE__ */ jsx14(SDKMapProviderWrapper, { children: /* @__PURE__ */ jsx14(MapProvider, { children: /* @__PURE__ */ jsx14(MapInternal, { ...props }) }) });
+  return /* @__PURE__ */ jsx15(SDKMapProviderWrapper, { children: /* @__PURE__ */ jsx15(MapProvider, { children: /* @__PURE__ */ jsx15(MapInternal, { ...props }) }) });
 };
 // src/components/MapWrapper.tsx
@@ -2930,7 +3278,7 @@ function renderMap(containerId, props = {}) {
 }
 // package.json
-var version = "0.2.7";
+var version = "0.5.2";
 // src/sdk.ts
 function deepFreeze(obj) {
@@ -3133,8 +3481,11 @@ var MiniAppSDK = class {
     getFidelityHistory: (params) => this.bridge.send("GET_FIDELITY_HISTORY", params),
     /**
      * Triggers the native fidelity history view.
+     * @param options.isDark Theme to render the native view in. Pass the
+     * mini-app's current theme explicitly — the native history screen is a
+     * standalone view and does not read it from `updateContext`.
      */
-    showHistory: () => this.bridge.send("SHOW_FIDELITY_HISTORY"),
+    showHistory: (options) => this.bridge.send("SHOW_FIDELITY_HISTORY", options),
     /**
      * Authorize spending fidelity points (FPoints) via Two-Phase Authorization.
      * @param intentUuid UUID generated by your backend for the transaction.
@@ -3269,8 +3620,8 @@ var MiniAppSDK = class {
 var sdk = deepFreeze(new MiniAppSDK());
 // src/components/BridgeMocker.tsx
-import { useCallback as useCallback6, useEffect as useEffect7, useRef as useRef7, useState as useState8 } from "react";
-import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+import { useCallback as useCallback7, useEffect as useEffect8, useMemo as useMemo7, useRef as useRef8, useState as useState9 } from "react";
+import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
 var getBearing = (p1, p2) => {
   const lat1 = p1[1] * Math.PI / 180;
   const lat2 = p2[1] * Math.PI / 180;
@@ -3289,16 +3640,19 @@ var BridgeMocker = ({
   mockJWTToken,
   children
 }) => {
-  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);
-  const stateRef = useRef7({
+  const [autoMove, setAutoMove] = useState9(isMoving);
+  const [location, setLocation] = useState9(initialLocation);
+  const [heading, setHeading] = useState9(0);
+  const [speedMultiplier, setSpeedMultiplier] = useState9(simulationSpeed);
+  const [isReady, setIsReady] = useState9(false);
+  const [isMinimized, setIsMinimized] = useState9(true);
+  const [radiusMeters, setRadiusMeters] = useState9(0);
+  const [radiusUnit, setRadiusUnit] = useState9("m");
+  const [isPlacingLocation, setIsPlacingLocation] = useState9(false);
+  const streamIntervalRef = useRef8(null);
+  const pathIndexRef = useRef8(0);
+  const activeConfigRef = useRef8(null);
+  const stateRef = useRef8({
     autoMove,
     heading,
     location,
@@ -3310,36 +3664,51 @@ var BridgeMocker = ({
     simulationPath,
     speedMultiplier
   });
-  const pushLocationUpdate = useCallback6(() => {
-    const currentState = stateRef.current;
-    const payload = {
-      accelerometer: null,
-      heading: {
-        accuracy: 3,
-        magneticHeading: currentState.heading,
-        trueHeading: currentState.heading
-      },
-      location: {
-        coords: {
-          accuracy: 10,
-          altitude: 0,
-          altitudeAccuracy: null,
-          heading: currentState.heading,
-          latitude: currentState.location[1],
-          longitude: currentState.location[0],
-          speed: currentState.autoMove ? 1.5 * currentState.speedMultiplier : 0
+  const pushLocationUpdateFor = useCallback7(
+    (coords, headingDeg) => {
+      const currentState = stateRef.current;
+      const payload = {
+        accelerometer: null,
+        heading: {
+          accuracy: 3,
+          magneticHeading: headingDeg,
+          trueHeading: headingDeg
+        },
+        location: {
+          coords: {
+            accuracy: 10,
+            altitude: 0,
+            altitudeAccuracy: null,
+            heading: headingDeg,
+            latitude: coords[1],
+            longitude: coords[0],
+            speed: currentState.autoMove ? 1.5 * currentState.speedMultiplier : 0
+          },
+          timestamp: Date.now()
         },
         timestamp: Date.now()
-      },
-      timestamp: Date.now()
-    };
-    window.__MiniAppBridge?.onNativeMessage({
-      eventName: "LOCATION_STREAM_UPDATE" /* LOCATION_STREAM_UPDATE */,
-      payload,
-      type: "EVENT"
-    });
-  }, []);
-  useEffect7(() => {
+      };
+      window.__MiniAppBridge?.onNativeMessage({
+        eventName: "LOCATION_STREAM_UPDATE" /* LOCATION_STREAM_UPDATE */,
+        payload,
+        type: "EVENT"
+      });
+    },
+    []
+  );
+  const pushLocationUpdate = useCallback7(() => {
+    const currentState = stateRef.current;
+    pushLocationUpdateFor(currentState.location, currentState.heading);
+  }, [pushLocationUpdateFor]);
+  const placeLocation = useCallback7(
+    (coords) => {
+      setLocation(coords);
+      setIsPlacingLocation(false);
+      pushLocationUpdateFor(coords, stateRef.current.heading);
+    },
+    [pushLocationUpdateFor]
+  );
+  useEffect8(() => {
     stateRef.current = {
       autoMove,
       heading,
@@ -3360,19 +3729,19 @@ var BridgeMocker = ({
     speedMultiplier,
     mockJWTToken
   ]);
-  useEffect7(() => {
+  useEffect8(() => {
     setAutoMove(isMoving);
   }, [isMoving]);
-  useEffect7(() => {
+  useEffect8(() => {
     setSpeedMultiplier(simulationSpeed);
   }, [simulationSpeed]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (simulationPath && simulationPath.length > 0) {
       pathIndexRef.current = 0;
       setLocation(simulationPath[0]);
     }
   }, [simulationPath]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (streamIntervalRef.current && activeConfigRef.current) {
       sdk.bridge.send(
         "START_LOCATION_STREAM",
@@ -3380,7 +3749,7 @@ var BridgeMocker = ({
       );
     }
   }, [speedMultiplier]);
-  useEffect7(() => {
+  useEffect8(() => {
     const bridge = sdk.bridge;
     const originalSend = bridge.send.bind(bridge);
     const stopStream = () => {
@@ -3586,10 +3955,19 @@ var BridgeMocker = ({
       bridge.send = originalSend;
     };
   }, [appId]);
+  const radiusInMeters = radiusUnit === "km" ? radiusMeters * 1e3 : radiusMeters;
+  const mockLocationContextValue = useMemo7(
+    () => ({
+      isPlacingLocation,
+      placeLocation,
+      radiusMeters: radiusInMeters
+    }),
+    [isPlacingLocation, placeLocation, radiusInMeters]
+  );
   if (!isReady) return null;
-  return /* @__PURE__ */ jsxs11("div", { className: "relative w-full h-full", children: [
-    /* @__PURE__ */ jsx15("div", { className: "w-full h-full", children }),
-    isMinimized ? /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsxs12("div", { className: "relative w-full h-full", children: [
+    /* @__PURE__ */ jsx16("div", { className: "w-full h-full", children: /* @__PURE__ */ jsx16(MockLocationContext.Provider, { value: mockLocationContextValue, children }) }),
+    isMinimized ? /* @__PURE__ */ jsx16(
       Button,
       {
         className: "fixed bottom-4 right-4 w-8 h-8 rounded-full bg-slate-900/60 backdrop-blur-sm border border-slate-700/50 flex items-center justify-center text-slate-400 hover:text-blue-400 hover:bg-slate-900/80 z-[9999] transition-all shadow-lg group p-0!",
@@ -3597,7 +3975,7 @@ var BridgeMocker = ({
         title: "Open Simulation Controls",
         type: "button",
         variant: "ghost",
-        children: /* @__PURE__ */ jsxs11(
+        children: /* @__PURE__ */ jsxs12(
           "svg",
           {
             className: "group-hover:scale-110 transition-transform",
@@ -3611,34 +3989,34 @@ var BridgeMocker = ({
             width: "14",
             xmlns: "http://www.w3.org/2000/svg",
             children: [
-              /* @__PURE__ */ jsx15("path", { d: "M21 4H3" }),
-              /* @__PURE__ */ jsx15("path", { d: "M10 8H3" }),
-              /* @__PURE__ */ jsx15("path", { d: "M21 12H3" }),
-              /* @__PURE__ */ jsx15("path", { d: "M10 16H3" }),
-              /* @__PURE__ */ jsx15("path", { d: "M21 20H3" }),
-              /* @__PURE__ */ jsx15("circle", { cx: "14", cy: "8", r: "2" }),
-              /* @__PURE__ */ jsx15("circle", { cx: "14", cy: "16", r: "2" })
+              /* @__PURE__ */ jsx16("path", { d: "M21 4H3" }),
+              /* @__PURE__ */ jsx16("path", { d: "M10 8H3" }),
+              /* @__PURE__ */ jsx16("path", { d: "M21 12H3" }),
+              /* @__PURE__ */ jsx16("path", { d: "M10 16H3" }),
+              /* @__PURE__ */ jsx16("path", { d: "M21 20H3" }),
+              /* @__PURE__ */ jsx16("circle", { cx: "14", cy: "8", r: "2" }),
+              /* @__PURE__ */ jsx16("circle", { cx: "14", cy: "16", r: "2" })
             ]
           }
         )
       }
-    ) : /* @__PURE__ */ jsxs11(
+    ) : /* @__PURE__ */ jsxs12(
       "div",
       {
         className: "fixed bottom-4 right-4 bg-slate-900 text-slate-300 font-mono text-xs rounded-xl shadow-2xl border border-slate-700 pointer-events-auto flex flex-col w-80 overflow-hidden animate-in slide-in-from-right duration-300",
         style: { zIndex: 9998 },
         children: [
-          /* @__PURE__ */ jsxs11(
+          /* @__PURE__ */ jsxs12(
             "div",
             {
               className: "flex justify-between items-center p-3 border-b border-slate-800 cursor-pointer bg-slate-800/50 hover:bg-slate-800 transition-colors",
               onClick: () => setIsMinimized(true),
               children: [
-                /* @__PURE__ */ jsxs11("span", { className: "font-bold text-slate-100 flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsx15("span", { className: "text-lg", children: "\u{1F6E0}\uFE0F" }),
+                /* @__PURE__ */ jsxs12("span", { className: "font-bold text-slate-100 flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx16("span", { className: "text-lg", children: "\u{1F6E0}\uFE0F" }),
                   " Simulation Controls"
                 ] }),
-                /* @__PURE__ */ jsx15(
+                /* @__PURE__ */ jsx16(
                   Button,
                   {
                     className: "text-slate-500 hover:text-white p-0 h-auto hover:bg-transparent cursor-pointer",
@@ -3650,10 +4028,10 @@ var BridgeMocker = ({
               ]
             }
           ),
-          /* @__PURE__ */ jsxs11("div", { className: "p-4 flex flex-col gap-3", children: [
-            /* @__PURE__ */ jsxs11("div", { className: "flex justify-between items-center", children: [
-              /* @__PURE__ */ jsxs11("label", { className: "flex items-center gap-2 cursor-pointer", children: [
-                /* @__PURE__ */ jsx15(
+          /* @__PURE__ */ jsxs12("div", { className: "p-4 flex flex-col gap-3", children: [
+            /* @__PURE__ */ jsxs12("div", { className: "flex justify-between items-center", children: [
+              /* @__PURE__ */ jsxs12("label", { className: "flex items-center gap-2 cursor-pointer", children: [
+                /* @__PURE__ */ jsx16(
                   "input",
                   {
                     checked: autoMove,
@@ -3662,20 +4040,20 @@ var BridgeMocker = ({
                     type: "checkbox"
                   }
                 ),
-                /* @__PURE__ */ jsxs11("span", { className: "text-slate-200 font-bold", children: [
+                /* @__PURE__ */ jsxs12("span", { className: "text-slate-200 font-bold", children: [
                   "Auto-Move ",
                   simulationPath ? "(Path)" : "(Random)"
                 ] })
               ] }),
-              /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ jsx15("span", { className: "text-[10px] text-slate-500", children: "Speed:" }),
-                /* @__PURE__ */ jsx15(
+              /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx16("span", { className: "text-[10px] text-slate-500", children: "Speed:" }),
+                /* @__PURE__ */ jsx16(
                   "select",
                   {
                     className: "bg-slate-800 border border-slate-700 rounded px-1 py-0.5 text-white focus:outline-none focus:border-blue-500 text-[10px]",
                     onChange: (e) => setSpeedMultiplier(Number(e.target.value)),
                     value: speedMultiplier,
-                    children: [1, 2, 5, 10, 50, 100, 250].map((s) => /* @__PURE__ */ jsxs11("option", { value: s, children: [
+                    children: [1, 2, 5, 10, 50, 100, 250].map((s) => /* @__PURE__ */ jsxs12("option", { value: s, children: [
                       s,
                       "x"
                     ] }, s))
@@ -3683,10 +4061,10 @@ var BridgeMocker = ({
                 )
               ] })
             ] }),
-            /* @__PURE__ */ jsxs11("div", { className: "grid grid-cols-2 gap-2", children: [
-              /* @__PURE__ */ jsxs11("div", { className: "flex flex-col gap-1", children: [
-                /* @__PURE__ */ jsx15("span", { className: "text-[10px] text-slate-500 text-left", children: "Lng" }),
-                /* @__PURE__ */ jsx15(
+            /* @__PURE__ */ jsxs12("div", { className: "grid grid-cols-2 gap-2", children: [
+              /* @__PURE__ */ jsxs12("div", { className: "flex flex-col gap-1", children: [
+                /* @__PURE__ */ jsx16("span", { className: "text-[10px] text-slate-500 text-left", children: "Lng" }),
+                /* @__PURE__ */ jsx16(
                   "input",
                   {
                     className: "bg-slate-800 border border-slate-700 rounded px-2 py-1 text-white focus:outline-none focus:border-blue-500",
@@ -3701,9 +4079,9 @@ var BridgeMocker = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxs11("div", { className: "flex flex-col gap-1", children: [
-                /* @__PURE__ */ jsx15("span", { className: "text-[10px] text-slate-500 text-left", children: "Lat" }),
-                /* @__PURE__ */ jsx15(
+              /* @__PURE__ */ jsxs12("div", { className: "flex flex-col gap-1", children: [
+                /* @__PURE__ */ jsx16("span", { className: "text-[10px] text-slate-500 text-left", children: "Lat" }),
+                /* @__PURE__ */ jsx16(
                   "input",
                   {
                     className: "bg-slate-800 border border-slate-700 rounded px-2 py-1 text-white focus:outline-none focus:border-blue-500",
@@ -3718,9 +4096,9 @@ var BridgeMocker = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxs11("div", { className: "flex flex-col gap-1 col-span-2", children: [
-                /* @__PURE__ */ jsx15("span", { className: "text-[10px] text-slate-500", children: "Heading (Degrees)" }),
-                /* @__PURE__ */ jsx15(
+              /* @__PURE__ */ jsxs12("div", { className: "flex flex-col gap-1 col-span-2", children: [
+                /* @__PURE__ */ jsx16("span", { className: "text-[10px] text-slate-500", children: "Heading (Degrees)" }),
+                /* @__PURE__ */ jsx16(
                   "input",
                   {
                     className: "w-full accent-blue-500",
@@ -3734,11 +4112,63 @@ var BridgeMocker = ({
                     value: heading
                   }
                 ),
-                /* @__PURE__ */ jsxs11("div", { className: "text-right text-slate-400", children: [
+                /* @__PURE__ */ jsxs12("div", { className: "text-right text-slate-400", children: [
                   heading,
                   "\xB0"
                 ] })
               ] })
+            ] }),
+            /* @__PURE__ */ jsx16(
+              Button,
+              {
+                className: `w-full rounded px-2 py-1.5 text-[10px] font-bold border cursor-pointer ${isPlacingLocation ? "bg-blue-500/20 border-blue-500 text-blue-300" : "bg-slate-800 border-slate-700 text-slate-200 hover:bg-slate-700"}`,
+                onClick: () => setIsPlacingLocation((prev) => !prev),
+                type: "button",
+                variant: "ghost",
+                children: isPlacingLocation ? "\u{1F4CD} Click the map to drop location\u2026" : "\u{1F4CD} Drop location on map"
+              }
+            ),
+            /* @__PURE__ */ jsxs12("div", { className: "flex flex-col gap-1 border-t border-slate-800 pt-3", children: [
+              /* @__PURE__ */ jsxs12("div", { className: "flex justify-between items-center", children: [
+                /* @__PURE__ */ jsx16("span", { className: "text-[10px] text-slate-500", children: "Scan Radius" }),
+                /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-1", children: [
+                  /* @__PURE__ */ jsx16(
+                    "input",
+                    {
+                      className: "w-16 bg-slate-800 border border-slate-700 rounded px-1.5 py-0.5 text-white text-[10px] focus:outline-none focus:border-blue-500",
+                      min: "0",
+                      onChange: (e) => setRadiusMeters(Math.max(0, Number(e.target.value) || 0)),
+                      type: "number",
+                      value: radiusMeters
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs12(
+                    "select",
+                    {
+                      className: "bg-slate-800 border border-slate-700 rounded px-1 py-0.5 text-white text-[10px] focus:outline-none focus:border-blue-500",
+                      onChange: (e) => setRadiusUnit(e.target.value),
+                      value: radiusUnit,
+                      children: [
+                        /* @__PURE__ */ jsx16("option", { value: "m", children: "m" }),
+                        /* @__PURE__ */ jsx16("option", { value: "km", children: "km" })
+                      ]
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx16(
+                "input",
+                {
+                  className: "w-full accent-blue-500",
+                  max: radiusUnit === "km" ? 10 : 500,
+                  min: "0",
+                  onChange: (e) => setRadiusMeters(Number(e.target.value)),
+                  step: radiusUnit === "km" ? 0.1 : 5,
+                  type: "range",
+                  value: radiusMeters
+                }
+              ),
+              /* @__PURE__ */ jsx16("div", { className: "text-right text-slate-400", children: radiusMeters === 0 ? "hidden" : `${radiusMeters}${radiusUnit} radius around user` })
             ] })
           ] })
         ]
@@ -3748,20 +4178,20 @@ var BridgeMocker = ({
 };
 // src/components/DebugConsole.tsx
-import { useCallback as useCallback7, useEffect as useEffect8, useRef as useRef8, useState as useState9 } from "react";
-import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
+import { useCallback as useCallback8, useEffect as useEffect9, useRef as useRef9, useState as useState10 } from "react";
+import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
 var DebugConsole = ({
   isOpen: initialOpen = false,
   onClose
 }) => {
-  const [showConsole, setShowConsole] = useState9(initialOpen);
-  const [logs, setLogs] = useState9([]);
-  const scrollRef = useRef8(null);
-  useEffect8(() => {
+  const [showConsole, setShowConsole] = useState10(initialOpen);
+  const [logs, setLogs] = useState10([]);
+  const scrollRef = useRef9(null);
+  useEffect9(() => {
     setShowConsole(initialOpen);
   }, [initialOpen]);
   const clearLogs = () => setLogs([]);
-  const addLog = useCallback7((label, data) => {
+  const addLog = useCallback8((label, data) => {
     if (label.includes("LOCATION_STREAM_UPDATE" /* LOCATION_STREAM_UPDATE */)) return;
     const entry = {
       content: typeof data === "string" ? data : JSON.stringify(data, null, 2),
@@ -3771,7 +4201,7 @@ var DebugConsole = ({
     };
     setLogs((prev) => [entry, ...prev].slice(0, 100));
   }, []);
-  useEffect8(() => {
+  useEffect9(() => {
     if (typeof window === "undefined") return;
     const bridge = sdk.bridge;
     const originalSend = bridge.send.bind(bridge);
@@ -3793,7 +4223,7 @@ var DebugConsole = ({
     };
   }, [addLog]);
   if (!showConsole) {
-    return /* @__PURE__ */ jsx16(
+    return /* @__PURE__ */ jsx17(
       Button,
       {
         className: "fixed bottom-4 left-4 w-8 h-8 rounded-full bg-slate-900/60 backdrop-blur-sm border border-slate-700/50 flex items-center justify-center text-slate-400 hover:text-emerald-400 hover:bg-slate-900/80 transition-all z-[9998] shadow-lg group p-0!",
@@ -3801,7 +4231,7 @@ var DebugConsole = ({
         title: "Open Debug Console",
         type: "button",
         variant: "ghost",
-        children: /* @__PURE__ */ jsxs12(
+        children: /* @__PURE__ */ jsxs13(
           "svg",
           {
             className: "group-hover:scale-110 transition-transform",
@@ -3815,31 +4245,31 @@ var DebugConsole = ({
             width: "14",
             xmlns: "http://www.w3.org/2000/svg",
             children: [
-              /* @__PURE__ */ jsx16("path", { d: "m8 2 1.88 1.88" }),
-              /* @__PURE__ */ jsx16("path", { d: "M14.12 3.88 16 2" }),
-              /* @__PURE__ */ jsx16("path", { d: "M9 7.13v-1a3.003 3.003 0 1 1 6 0v1" }),
-              /* @__PURE__ */ jsx16("path", { d: "M12 20c-3.3 0-6-2.7-6-6v-3a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v3c0 3.3-2.7 6-6 6" }),
-              /* @__PURE__ */ jsx16("path", { d: "M12 20v-9" }),
-              /* @__PURE__ */ jsx16("path", { d: "M6.53 9C4.6 8.8 3 7.1 3 5" }),
-              /* @__PURE__ */ jsx16("path", { d: "M6 13H2" }),
-              /* @__PURE__ */ jsx16("path", { d: "M3 21c0-2.1 1.7-3.9 3.8-4" }),
-              /* @__PURE__ */ jsx16("path", { d: "M20.97 5c0 2.1-1.6 3.8-3.5 4" }),
-              /* @__PURE__ */ jsx16("path", { d: "M22 13h-4" }),
-              /* @__PURE__ */ jsx16("path", { d: "M17.2 17c2.1.1 3.8 1.9 3.8 4" })
+              /* @__PURE__ */ jsx17("path", { d: "m8 2 1.88 1.88" }),
+              /* @__PURE__ */ jsx17("path", { d: "M14.12 3.88 16 2" }),
+              /* @__PURE__ */ jsx17("path", { d: "M9 7.13v-1a3.003 3.003 0 1 1 6 0v1" }),
+              /* @__PURE__ */ jsx17("path", { d: "M12 20c-3.3 0-6-2.7-6-6v-3a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v3c0 3.3-2.7 6-6 6" }),
+              /* @__PURE__ */ jsx17("path", { d: "M12 20v-9" }),
+              /* @__PURE__ */ jsx17("path", { d: "M6.53 9C4.6 8.8 3 7.1 3 5" }),
+              /* @__PURE__ */ jsx17("path", { d: "M6 13H2" }),
+              /* @__PURE__ */ jsx17("path", { d: "M3 21c0-2.1 1.7-3.9 3.8-4" }),
+              /* @__PURE__ */ jsx17("path", { d: "M20.97 5c0 2.1-1.6 3.8-3.5 4" }),
+              /* @__PURE__ */ jsx17("path", { d: "M22 13h-4" }),
+              /* @__PURE__ */ jsx17("path", { d: "M17.2 17c2.1.1 3.8 1.9 3.8 4" })
             ]
           }
         )
       }
     );
   }
-  return /* @__PURE__ */ jsxs12("div", { className: "fixed inset-x-0 bottom-0 w-full bg-[#0a080f] border-t border-slate-800 z-[9998] p-4 shadow-2xl flex flex-col animate-in slide-in-from-bottom duration-300", children: [
-    /* @__PURE__ */ jsxs12("div", { className: "flex items-center justify-between mb-2", children: [
-      /* @__PURE__ */ jsxs12("span", { className: "text-[10px] font-bold uppercase tracking-widest text-slate-400 flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx16("span", { className: "w-2 h-2 rounded-full bg-emerald-500 animate-pulse" }),
+  return /* @__PURE__ */ jsxs13("div", { className: "fixed inset-x-0 bottom-0 w-full bg-[#0a080f] border-t border-slate-800 z-[9998] p-4 shadow-2xl flex flex-col animate-in slide-in-from-bottom duration-300", children: [
+    /* @__PURE__ */ jsxs13("div", { className: "flex items-center justify-between mb-2", children: [
+      /* @__PURE__ */ jsxs13("span", { className: "text-[10px] font-bold uppercase tracking-widest text-slate-400 flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx17("span", { className: "w-2 h-2 rounded-full bg-emerald-500 animate-pulse" }),
         "UP SDK Debug Console"
       ] }),
-      /* @__PURE__ */ jsxs12("div", { className: "flex gap-4", children: [
-        /* @__PURE__ */ jsx16(
+      /* @__PURE__ */ jsxs13("div", { className: "flex gap-4", children: [
+        /* @__PURE__ */ jsx17(
           Button,
           {
             className: "text-[10px] text-slate-500 font-bold uppercase hover:text-slate-300 hover:bg-transparent transition-colors p-0 h-auto cursor-pointer",
@@ -3849,7 +4279,7 @@ var DebugConsole = ({
             children: "Clear"
           }
         ),
-        /* @__PURE__ */ jsx16(
+        /* @__PURE__ */ jsx17(
           Button,
           {
             className: "text-[10px] text-pink-500 font-bold uppercase hover:text-pink-400 hover:bg-transparent transition-colors p-0 h-auto cursor-pointer",
@@ -3864,21 +4294,21 @@ var DebugConsole = ({
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsx16(
+    /* @__PURE__ */ jsx17(
       "div",
       {
         className: "bg-black/80 rounded-xl p-3 font-mono text-[10px] text-emerald-400 min-h-[120px] max-h-[240px] overflow-y-auto border border-slate-900 custom-scrollbar",
         ref: scrollRef,
-        children: logs.length === 0 ? /* @__PURE__ */ jsx16("div", { className: "text-slate-600 italic text-center py-8", children: "No logs yet. Interacting with the SDK will show events here." }) : logs.map((log) => /* @__PURE__ */ jsxs12(
+        children: logs.length === 0 ? /* @__PURE__ */ jsx17("div", { className: "text-slate-600 italic text-center py-8", children: "No logs yet. Interacting with the SDK will show events here." }) : logs.map((log) => /* @__PURE__ */ jsxs13(
           "div",
           {
             className: "mb-3 pb-3 border-b border-slate-900/50 last:border-0 last:mb-0 last:pb-0",
             children: [
-              /* @__PURE__ */ jsxs12("div", { className: "flex gap-2 text-slate-500 mb-1 items-center", children: [
-                /* @__PURE__ */ jsx16("span", { className: "text-[8px]", children: log.time }),
-                /* @__PURE__ */ jsx16("span", { className: "font-bold text-white uppercase text-[8px] bg-slate-800 px-1.5 py-0.5 rounded leading-none", children: log.label })
+              /* @__PURE__ */ jsxs13("div", { className: "flex gap-2 text-slate-500 mb-1 items-center", children: [
+                /* @__PURE__ */ jsx17("span", { className: "text-[8px]", children: log.time }),
+                /* @__PURE__ */ jsx17("span", { className: "font-bold text-white uppercase text-[8px] bg-slate-800 px-1.5 py-0.5 rounded leading-none", children: log.label })
               ] }),
-              /* @__PURE__ */ jsx16("pre", { className: "whitespace-pre-wrap break-all opacity-90", children: log.content })
+              /* @__PURE__ */ jsx17("pre", { className: "whitespace-pre-wrap break-all opacity-90", children: log.content })
             ]
           },
           log.id
@@ -3889,25 +4319,254 @@ var DebugConsole = ({
 };
 // src/components/SDKProvider.tsx
-import { createContext as createContext2, useContext as useContext5, useMemo as useMemo6 } from "react";
-import { Fragment as Fragment5, jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
-var SDKContext = createContext2({ isMocked: false });
-var useIsMocked = () => useContext5(SDKContext).isMocked;
+import { createContext as createContext3, useContext as useContext6, useMemo as useMemo8 } from "react";
+import { Fragment as Fragment5, jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
+var SDKContext = createContext3({ isMocked: false });
+var useIsMocked = () => useContext6(SDKContext).isMocked;
 var SDKProvider = ({
   children,
   debug = false,
   ...mockerProps
 }) => {
   const isMocked = typeof window !== "undefined" && !(window.__UP_REACT_NATIVE_APP__ === true || !!window.ReactNativeWebView);
-  const value = useMemo6(() => ({ isMocked }), [isMocked]);
-  const content = /* @__PURE__ */ jsxs13(Fragment5, { children: [
+  const value = useMemo8(() => ({ isMocked }), [isMocked]);
+  const content = /* @__PURE__ */ jsxs14(Fragment5, { children: [
     children,
-    (debug || isMocked) && /* @__PURE__ */ jsx17(DebugConsole, {})
+    (debug || isMocked) && /* @__PURE__ */ jsx18(DebugConsole, {})
   ] });
   if (isMocked) {
-    return /* @__PURE__ */ jsx17(SDKContext.Provider, { value, children: /* @__PURE__ */ jsx17(BridgeMocker, { ...mockerProps, children: content }) });
+    return /* @__PURE__ */ jsx18(SDKContext.Provider, { value, children: /* @__PURE__ */ jsx18(BridgeMocker, { ...mockerProps, children: content }) });
   }
-  return /* @__PURE__ */ jsx17(SDKContext.Provider, { value, children: content });
+  return /* @__PURE__ */ jsx18(SDKContext.Provider, { value, children: content });
+};
+// src/components/SwipeCarousel.tsx
+import {
+  useEffect as useEffect10,
+  useLayoutEffect,
+  useRef as useRef10,
+  useState as useState11
+} from "react";
+import { jsx as jsx19 } from "react/jsx-runtime";
+var DIRECTION_LOCK_THRESHOLD_PX = 8;
+var SWIPE_DISTANCE_THRESHOLD_PX = 40;
+var SWIPE_VELOCITY_THRESHOLD = 0.4;
+var EDGE_RESISTANCE = 0.35;
+var SNAP_EASING = "cubic-bezier(0.16, 1, 0.3, 1)";
+var SNAP_DURATION_MS = 300;
+var VERTICAL_DEAD_ZONE_PX = 15;
+var DEFAULT_VERTICAL_DISMISS_THRESHOLD_PX = 200;
+var DEFAULT_VERTICAL_DISMISS_VELOCITY = 0.5;
+var DEFAULT_OVERSCAN = 2;
+var DEFAULT_VISIBLE_OVERSCAN = 1;
+var DEFAULT_SCROLL_ROOT_SELECTOR = "[data-swipe-scroll-root]";
+var SNAP_TRANSITION = `transform ${SNAP_DURATION_MS}ms ${SNAP_EASING}`;
+var SwipeCarousel = ({
+  items,
+  activeId,
+  onActiveChange,
+  peek = 1.1,
+  gap = 10,
+  className,
+  itemClassName,
+  axisPriority = "horizontal",
+  verticalDrag,
+  overscan = DEFAULT_OVERSCAN,
+  visibleOverscan = DEFAULT_VISIBLE_OVERSCAN
+}) => {
+  const containerRef = useRef10(null);
+  const [containerWidth, setContainerWidth] = useState11(0);
+  const [dragX, setDragX] = useState11(0);
+  const [dragY, setDragY] = useState11(0);
+  const [isDraggingX, setIsDraggingX] = useState11(false);
+  const [isDraggingY, setIsDraggingY] = useState11(false);
+  const touchStateRef = useRef10(null);
+  const [internalIndex, setInternalIndex] = useState11(
+    () => Math.max(
+      0,
+      items.findIndex((item) => item.id === activeId)
+    )
+  );
+  const prevActiveIdRef = useRef10(activeId);
+  useEffect10(() => {
+    if (activeId !== prevActiveIdRef.current) {
+      const idx = items.findIndex((item) => item.id === activeId);
+      if (idx !== -1) setInternalIndex(idx);
+      prevActiveIdRef.current = activeId;
+    }
+  }, [activeId, items]);
+  const activeIndex = Math.min(
+    Math.max(internalIndex, 0),
+    Math.max(items.length - 1, 0)
+  );
+  useLayoutEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const update = () => setContainerWidth(el.clientWidth);
+    update();
+    const observer = new ResizeObserver(update);
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+  const slideWidth = containerWidth / peek;
+  const step = slideWidth + gap;
+  const baseOffset = (containerWidth - slideWidth) / 2;
+  const translateX = baseOffset - activeIndex * step + dragX;
+  const commitIndex = (nextIndex) => {
+    setInternalIndex(nextIndex);
+    const nextItem = items[nextIndex];
+    if (nextItem && nextItem.id !== activeId) onActiveChange(nextItem.id);
+  };
+  const handleTouchStart = (e) => {
+    const touch = e.targetTouches[0];
+    if (!touch) return;
+    let verticalAllowed = false;
+    if (verticalDrag) {
+      const selector = verticalDrag.scrollRootSelector ?? DEFAULT_SCROLL_ROOT_SELECTOR;
+      const scrollRoot = e.target.closest(
+        selector
+      );
+      verticalAllowed = !scrollRoot || scrollRoot.scrollTop <= 2;
+    }
+    touchStateRef.current = {
+      lastT: e.timeStamp,
+      lastX: touch.clientX,
+      lastY: touch.clientY,
+      lockedAxis: null,
+      startX: touch.clientX,
+      startY: touch.clientY,
+      velocityX: 0,
+      velocityY: 0,
+      verticalAllowed
+    };
+  };
+  const handleTouchMove = (e) => {
+    const touch = e.targetTouches[0];
+    const state = touchStateRef.current;
+    if (!touch || !state) return;
+    const rawDx = touch.clientX - state.startX;
+    const rawDy = touch.clientY - state.startY;
+    if (!state.lockedAxis) {
+      if (Math.abs(rawDx) < DIRECTION_LOCK_THRESHOLD_PX && Math.abs(rawDy) < DIRECTION_LOCK_THRESHOLD_PX) {
+        return;
+      }
+      const horizontalWins = Math.abs(rawDx) > Math.abs(rawDy) || Math.abs(rawDx) === Math.abs(rawDy) && axisPriority === "horizontal";
+      if (horizontalWins) {
+        state.lockedAxis = "x";
+      } else if (verticalDrag && state.verticalAllowed) {
+        state.lockedAxis = "y";
+      } else {
+        state.lockedAxis = "passthrough";
+      }
+    }
+    if (state.lockedAxis === "passthrough") return;
+    const dt = e.timeStamp - state.lastT;
+    if (dt > 0) {
+      state.velocityX = (touch.clientX - state.lastX) / dt;
+      state.velocityY = (touch.clientY - state.lastY) / dt;
+    }
+    state.lastX = touch.clientX;
+    state.lastY = touch.clientY;
+    state.lastT = e.timeStamp;
+    if (state.lockedAxis === "x") {
+      if (!isDraggingX) setIsDraggingX(true);
+      const atStart = activeIndex === 0 && rawDx > 0;
+      const atEnd = activeIndex === items.length - 1 && rawDx < 0;
+      setDragX(atStart || atEnd ? rawDx * EDGE_RESISTANCE : rawDx);
+    } else if (verticalDrag) {
+      const direction = verticalDrag.direction ?? "down";
+      let clamped = rawDy;
+      if (direction === "down") clamped = Math.max(0, rawDy);
+      if (direction === "up") clamped = Math.min(0, rawDy);
+      const beyondDeadZone = Math.sign(clamped) * Math.max(0, Math.abs(clamped) - VERTICAL_DEAD_ZONE_PX);
+      if (!isDraggingY) setIsDraggingY(true);
+      setDragY(beyondDeadZone);
+      verticalDrag.onDragChange?.(beyondDeadZone, true);
+    }
+    if (e.cancelable) {
+      e.preventDefault();
+    }
+  };
+  const endDrag = () => {
+    const state = touchStateRef.current;
+    touchStateRef.current = null;
+    setIsDraggingX(false);
+    setIsDraggingY(false);
+    if (!state) {
+      setDragX(0);
+      setDragY(0);
+      return;
+    }
+    if (state.lockedAxis === "x") {
+      const horizontalTriggered = Math.abs(dragX) > SWIPE_DISTANCE_THRESHOLD_PX || Math.abs(state.velocityX) > SWIPE_VELOCITY_THRESHOLD;
+      if (horizontalTriggered) {
+        const nextIndex = dragX < 0 ? Math.min(items.length - 1, activeIndex + 1) : Math.max(0, activeIndex - 1);
+        commitIndex(nextIndex);
+      }
+    } else if (state.lockedAxis === "y") {
+      const verticalThreshold = verticalDrag?.dismissThreshold ?? DEFAULT_VERTICAL_DISMISS_THRESHOLD_PX;
+      const verticalVelocityThreshold = verticalDrag?.dismissVelocity ?? DEFAULT_VERTICAL_DISMISS_VELOCITY;
+      const direction = verticalDrag?.direction ?? "down";
+      const directionalVelocityY = direction === "down" ? Math.max(0, state.velocityY) : direction === "up" ? Math.max(0, -state.velocityY) : Math.abs(state.velocityY);
+      const verticalTriggered = Math.abs(dragY) > verticalThreshold || directionalVelocityY > verticalVelocityThreshold;
+      if (verticalTriggered) verticalDrag?.onDismiss?.();
+    }
+    setDragX(0);
+    setDragY(0);
+    verticalDrag?.onDragChange?.(0, false);
+  };
+  const windowStart = Math.max(0, activeIndex - overscan);
+  const windowEnd = Math.min(items.length - 1, activeIndex + overscan);
+  return /* @__PURE__ */ jsx19(
+    "div",
+    {
+      className: `relative overflow-hidden touch-pan-y ${className ?? ""}`,
+      onTouchCancel: endDrag,
+      onTouchEnd: endDrag,
+      onTouchMove: handleTouchMove,
+      onTouchStart: handleTouchStart,
+      ref: containerRef,
+      children: /* @__PURE__ */ jsx19(
+        "div",
+        {
+          className: "relative h-full",
+          style: {
+            transform: `translateX(${translateX}px)`,
+            transition: isDraggingX ? "none" : SNAP_TRANSITION,
+            willChange: "transform"
+          },
+          children: items.map((item, index) => {
+            if (index < windowStart || index > windowEnd) return null;
+            const isActive = index === activeIndex;
+            const verticalOffset = isActive ? dragY : 0;
+            const distance = Math.abs(index - activeIndex);
+            const isVisible = distance <= visibleOverscan;
+            return /* @__PURE__ */ jsx19(
+              "div",
+              {
+                className: `absolute top-0 left-0 h-full shrink-0 ${itemClassName ?? ""} ${item.className ?? ""}`,
+                style: {
+                  opacity: isVisible ? 1 : 0,
+                  pointerEvents: isVisible ? void 0 : "none",
+                  transform: `translateX(${index * step}px) translateY(${verticalOffset}px)`,
+                  transition: isActive && isDraggingY ? "none" : SNAP_TRANSITION,
+                  width: `${slideWidth}px`,
+                  // Layer by distance from the active slide (not DOM/index
+                  // order) so it always paints above its neighbors on BOTH
+                  // sides symmetrically — with `peek` this close, unstyled
+                  // z-index left neighbor bleed (shadow/blur) showing through
+                  // asymmetrically depending on swipe direction.
+                  zIndex: overscan + 1 - distance
+                },
+                children: item.content
+              },
+              item.id
+            );
+          })
+        }
+      )
+    }
+  );
 };
 // src/index.ts
@@ -3926,9 +4585,11 @@ export {
   MapMenuItem,
   MapMenuTitle,
   MiniAppSDK,
+  MockLocationContext,
   RouteLayer,
   SDKMapProvider,
   SDKProvider,
+  SwipeCarousel,
   UIEvent,
   src_default as default,
   handleClearRoute,
@@ -3937,8 +4598,10 @@ export {
   renderMap,
   sdk,
   useIsMocked,
+  useJourney,
   useLiveRouting,
   useMapControls,
+  useMockLocation,
   useRoute,
   useTrimmedRoute,
   useUserLocation