@cloudparse/up-miniapps-sdk 0.2.7 → 0.5.2

package/dist/index.cjs

@@ -43,9 +43,11 @@ __export(src_exports, {
   MapMenuItem: () => MapMenuItem,
   MapMenuTitle: () => MapMenuTitle,
   MiniAppSDK: () => MiniAppSDK,
+  MockLocationContext: () => MockLocationContext,
   RouteLayer: () => RouteLayer,
   SDKMapProvider: () => SDKMapProvider,
   SDKProvider: () => SDKProvider,
+  SwipeCarousel: () => SwipeCarousel,
   UIEvent: () => UIEvent,
   default: () => src_default,
   handleClearRoute: () => handleClearRoute,
@@ -54,14 +56,21 @@ __export(src_exports, {
   renderMap: () => renderMap,
   sdk: () => sdk,
   useIsMocked: () => useIsMocked,
+  useJourney: () => useJourney,
   useLiveRouting: () => useLiveRouting,
   useMapControls: () => useMapControls,
+  useMockLocation: () => useMockLocation,
   useRoute: () => useRoute,
   useTrimmedRoute: () => useTrimmedRoute,
   useUserLocation: () => useUserLocation
 });
 module.exports = __toCommonJS(src_exports);
 
+// src/components/Map/MockLocationContext.tsx
+var import_react = require("react");
+var MockLocationContext = (0, import_react.createContext)(null);
+var useMockLocation = () => (0, import_react.useContext)(MockLocationContext);
+
 // src/lib/utils.ts
 var import_clsx = require("clsx");
 var import_tailwind_merge = require("tailwind-merge");
@@ -388,7 +397,7 @@ var SheetDescription = React2.forwardRef(({ className, ...props }, ref) => /* @_
 SheetDescription.displayName = SheetPrimitive.Description.displayName;
 
 // src/components/Map/components/MapDrawer.tsx
-var import_react = require("react");
+var import_react2 = require("react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var resolveHeightToPixels = (height, containerHeight) => {
   if (typeof height === "number") {
@@ -399,7 +408,9 @@ var resolveHeightToPixels = (height, containerHeight) => {
   }
   return parseFloat(height);
 };
-var MapDrawer = (0, import_react.forwardRef)(
+var CONTENT_EDGE_PULL_THRESHOLD_PX = 24;
+var HANDLE_BAR_HEIGHT_PX = 32;
+var MapDrawer = (0, import_react2.forwardRef)(
   ({
     menuItems,
     state,
@@ -415,16 +426,21 @@ var MapDrawer = (0, import_react.forwardRef)(
     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 = (0, import_react.useRef)(null);
-    const containerRef = (0, import_react.useRef)(null);
-    (0, import_react.useImperativeHandle)(
+    const scrollContainerRef = (0, import_react2.useRef)(null);
+    const containerRef = (0, import_react2.useRef)(null);
+    const handleBarRef = (0, import_react2.useRef)(null);
+    const contentAreaRef = (0, import_react2.useRef)(null);
+    (0, import_react2.useImperativeHandle)(
       ref,
       () => scrollContainerRef.current
     );
@@ -436,17 +452,42 @@ var MapDrawer = (0, import_react.forwardRef)(
           onChangeState("peek");
         } else if (state === "peek") {
           onChangeState("full");
+        } else if (state === "auto") {
+          onChangeState("closed");
         } else {
           onChangeState("peek");
         }
       }
     };
-    const [showScrollTop, setShowScrollTop] = (0, import_react.useState)(false);
+    const handleHandleClickRef = (0, import_react2.useRef)(handleHandleClick);
+    handleHandleClickRef.current = handleHandleClick;
+    const [autoContentPx, setAutoContentPx] = (0, import_react2.useState)(0);
+    (0, import_react2.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] = (0, import_react2.useState)(false);
     const handleScroll = (e) => {
       const scrollTop = e.currentTarget.scrollTop;
       setShowScrollTop(state !== "closed" && scrollTop > scrollToTopThreshold);
     };
-    (0, import_react.useEffect)(() => {
+    (0, import_react2.useEffect)(() => {
       if (state === "closed") {
         setShowScrollTop(false);
       } else {
@@ -454,22 +495,28 @@ var MapDrawer = (0, import_react.forwardRef)(
         setShowScrollTop(scrollTop > scrollToTopThreshold);
       }
     }, [state, scrollToTopThreshold]);
-    const isDraggingSheet = (0, import_react.useRef)(false);
-    const hasDeterminedDirection = (0, import_react.useRef)(false);
-    const isTouchOnContent = (0, import_react.useRef)(false);
-    const stateRef = (0, import_react.useRef)(state);
-    const touchStartYRef = (0, import_react.useRef)(touchStartY);
-    const currentTouchYRef = (0, import_react.useRef)(currentTouchY);
-    (0, import_react.useEffect)(() => {
+    const isDraggingSheet = (0, import_react2.useRef)(false);
+    const hasDeterminedDirection = (0, import_react2.useRef)(false);
+    const isTouchOnContent = (0, import_react2.useRef)(false);
+    const isTouchOnHandle = (0, import_react2.useRef)(false);
+    const suppressNextClickRef = (0, import_react2.useRef)(false);
+    const contentAtTopSinceY = (0, import_react2.useRef)(null);
+    const contentAtBottomSinceY = (0, import_react2.useRef)(null);
+    const dragStartYRef = (0, import_react2.useRef)(null);
+    const dragBaseHeightPxRef = (0, import_react2.useRef)(0);
+    const stateRef = (0, import_react2.useRef)(state);
+    const touchStartYRef = (0, import_react2.useRef)(touchStartY);
+    const currentTouchYRef = (0, import_react2.useRef)(currentTouchY);
+    (0, import_react2.useEffect)(() => {
       stateRef.current = state;
     }, [state]);
-    (0, import_react.useEffect)(() => {
+    (0, import_react2.useEffect)(() => {
       touchStartYRef.current = touchStartY;
     }, [touchStartY]);
-    (0, import_react.useEffect)(() => {
+    (0, import_react2.useEffect)(() => {
       currentTouchYRef.current = currentTouchY;
     }, [currentTouchY]);
-    (0, import_react.useEffect)(() => {
+    (0, import_react2.useEffect)(() => {
       const container = containerRef.current;
       if (!container || side !== "bottom" || !enableTouchDrag) return;
       const handleNativeTouchStart = (e) => {
@@ -478,8 +525,12 @@ var MapDrawer = (0, import_react.forwardRef)(
         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;
@@ -491,39 +542,86 @@ var MapDrawer = (0, import_react.forwardRef)(
         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;
           }
         }
@@ -533,33 +631,25 @@ var MapDrawer = (0, import_react.forwardRef)(
           }
           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",
@@ -579,6 +669,13 @@ var MapDrawer = (0, import_react.forwardRef)(
           return;
         }
         if (!isDraggingSheet.current) {
+          if (isTouchOnHandle.current) {
+            handleHandleClickRef.current();
+            suppressNextClickRef.current = true;
+            setTimeout(() => {
+              suppressNextClickRef.current = false;
+            }, 500);
+          }
           setTouchStartY(null);
           setCurrentTouchY(null);
           if (parentContainer) {
@@ -587,7 +684,8 @@ var MapDrawer = (0, import_react.forwardRef)(
           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);
@@ -597,9 +695,6 @@ var MapDrawer = (0, import_react.forwardRef)(
           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
@@ -609,18 +704,30 @@ var MapDrawer = (0, import_react.forwardRef)(
           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);
@@ -651,17 +758,26 @@ var MapDrawer = (0, import_react.forwardRef)(
       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))";
@@ -669,7 +785,10 @@ var MapDrawer = (0, import_react.forwardRef)(
       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)))`;
     };
@@ -803,17 +922,34 @@ var MapDrawer = (0, import_react.forwardRef)(
             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__ */ (0, import_jsx_runtime3.jsx)(
+              handleVisible && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                 "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__ */ (0, import_jsx_runtime3.jsx)("div", { className: "w-12 h-1 bg-white/25 rounded-full" })
                 }
               ),
@@ -821,6 +957,7 @@ var MapDrawer = (0, import_react.forwardRef)(
                 "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"
                   },
@@ -1209,7 +1346,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"
@@ -1221,7 +1359,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__ */ (0, import_jsx_runtime6.jsxs)(
     "div",
@@ -1349,28 +1487,32 @@ var MapRightControls = ({
 };
 
 // src/components/Map/MapContext.tsx
-var import_react2 = require("react");
+var import_react3 = require("react");
 var import_jsx_runtime7 = require("react/jsx-runtime");
-var MapControlsContext = (0, import_react2.createContext)(
+var MapControlsContext = (0, import_react3.createContext)(
   null
 );
 var SDKMapProvider = ({
   children
 }) => {
-  const [isFollowing, setIsFollowing] = (0, import_react2.useState)(true);
-  const [bearing, setBearingState] = (0, import_react2.useState)(0);
-  const [pitch, setPitchState] = (0, import_react2.useState)(0);
-  const [drawerState, setDrawerStateInternal] = (0, import_react2.useState)("closed");
-  const drawerContentRef = (0, import_react2.useRef)(null);
-  const setDrawerState = (0, import_react2.useCallback)((val) => {
+  const [isFollowing, setIsFollowing] = (0, import_react3.useState)(true);
+  const [bearing, setBearingState] = (0, import_react3.useState)(0);
+  const [pitch, setPitchState] = (0, import_react3.useState)(0);
+  const [drawerState, setDrawerStateInternal] = (0, import_react3.useState)("closed");
+  const drawerContentRef = (0, import_react3.useRef)(null);
+  const setDrawerState = (0, import_react3.useCallback)((val) => {
     setDrawerStateInternal(val);
   }, []);
-  const [hasControls, setHasControlsState] = (0, import_react2.useState)(false);
-  const setHasControls = (0, import_react2.useCallback)((val) => {
+  const [drawerHandleVisible, setDrawerHandleVisibleState] = (0, import_react3.useState)(true);
+  const setDrawerHandleVisible = (0, import_react3.useCallback)((val) => {
+    setDrawerHandleVisibleState((prev) => prev === val ? prev : val);
+  }, []);
+  const [hasControls, setHasControlsState] = (0, import_react3.useState)(false);
+  const setHasControls = (0, import_react3.useCallback)((val) => {
     setHasControlsState((prev) => prev === val ? prev : val);
   }, []);
-  const [etaData, setEtaDataState] = (0, import_react2.useState)(void 0);
-  const setEtaData = (0, import_react2.useCallback)((newData) => {
+  const [etaData, setEtaDataState] = (0, import_react3.useState)(void 0);
+  const setEtaData = (0, import_react3.useCallback)((newData) => {
     setEtaDataState((prev) => {
       if (!prev && !newData) return prev;
       if (!prev || !newData) return newData;
@@ -1380,60 +1522,79 @@ var SDKMapProvider = ({
       return newData;
     });
   }, []);
-  const [insets, setInsetsState] = (0, import_react2.useState)({
+  const [insets, setInsetsState] = (0, import_react3.useState)({
     bottom: 0,
     left: 0,
     right: 0,
     top: 0
   });
-  const setInsets = (0, import_react2.useCallback)((newInsets) => {
+  const setInsets = (0, import_react3.useCallback)((newInsets) => {
     setInsetsState((prev) => ({ ...prev, ...newInsets }));
   }, []);
-  const centerCallbackRef = (0, import_react2.useRef)(null);
-  const resetBearingCallbackRef = (0, import_react2.useRef)(null);
-  const centerOnUser = (0, import_react2.useCallback)((params) => {
+  const centerCallbackRef = (0, import_react3.useRef)(null);
+  const resetBearingCallbackRef = (0, import_react3.useRef)(null);
+  const flyToCallbackRef = (0, import_react3.useRef)(null);
+  const centerOnUser = (0, import_react3.useCallback)((params) => {
     if (centerCallbackRef.current) {
       centerCallbackRef.current(params);
     }
   }, []);
-  const resetBearing = (0, import_react2.useCallback)((params) => {
+  const resetBearing = (0, import_react3.useCallback)((params) => {
     if (resetBearingCallbackRef.current) {
       resetBearingCallbackRef.current(params);
     }
   }, []);
-  const _registerCenterCallback = (0, import_react2.useCallback)(
+  const flyTo = (0, import_react3.useCallback)(
+    (coords, params) => {
+      if (flyToCallbackRef.current) {
+        flyToCallbackRef.current(coords, params);
+      }
+    },
+    []
+  );
+  const _registerCenterCallback = (0, import_react3.useCallback)(
     (cb) => {
       centerCallbackRef.current = cb;
     },
     []
   );
-  const _registerResetBearingCallback = (0, import_react2.useCallback)(
+  const _registerResetBearingCallback = (0, import_react3.useCallback)(
     (cb) => {
       resetBearingCallbackRef.current = cb;
     },
     []
   );
-  const setBearing = (0, import_react2.useCallback)((b) => {
+  const _registerFlyToCallback = (0, import_react3.useCallback)(
+    (cb) => {
+      flyToCallbackRef.current = cb;
+    },
+    []
+  );
+  const setBearing = (0, import_react3.useCallback)((b) => {
     setBearingState(b);
   }, []);
-  const setPitch = (0, import_react2.useCallback)((p) => {
+  const setPitch = (0, import_react3.useCallback)((p) => {
     setPitchState(p);
   }, []);
-  const contextValue = (0, import_react2.useMemo)(
+  const contextValue = (0, import_react3.useMemo)(
     () => ({
       _registerCenterCallback,
+      _registerFlyToCallback,
       _registerResetBearingCallback,
       bearing,
       centerOnUser,
       drawerContentRef,
+      drawerHandleVisible,
       drawerState,
       etaData,
+      flyTo,
       hasControls,
       insets,
       isFollowing,
       pitch,
       resetBearing,
       setBearing,
+      setDrawerHandleVisible,
       setDrawerState,
       setEtaData,
       setHasControls,
@@ -1443,16 +1604,20 @@ var SDKMapProvider = ({
     }),
     [
       _registerCenterCallback,
+      _registerFlyToCallback,
       _registerResetBearingCallback,
       bearing,
       centerOnUser,
+      drawerHandleVisible,
       drawerState,
       etaData,
+      flyTo,
       hasControls,
       isFollowing,
       pitch,
       resetBearing,
       setBearing,
+      setDrawerHandleVisible,
       setDrawerState,
       setEtaData,
       setHasControls,
@@ -1464,7 +1629,7 @@ var SDKMapProvider = ({
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MapControlsContext.Provider, { value: contextValue, children });
 };
 var useMapControls = () => {
-  const context = (0, import_react2.useContext)(MapControlsContext);
+  const context = (0, import_react3.useContext)(MapControlsContext);
   if (!context) {
     throw new Error("useMapControls must be used within a MapControlsProvider");
   }
@@ -1472,7 +1637,7 @@ var useMapControls = () => {
 };
 
 // src/components/Map/components/MapControls.tsx
-var import_react3 = require("react");
+var import_react4 = require("react");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var resolveHeightToPixels2 = (height, containerHeight) => {
   if (typeof height === "number") {
@@ -1499,17 +1664,19 @@ var MapControls = ({
   customCompassButton,
   drawerPeekHeight,
   drawerFullHeight,
+  drawerAutoMaxHeight,
   drawerContentRef,
   menuContent,
   children,
   enableTouchDrag = false,
   showScrollToTopButton = true,
   scrollToTopThreshold = 300,
+  controlsBottomOffset = 0,
   isInternal = false
 }) => {
-  const mapContext = (0, import_react3.useContext)(MapControlsContext);
+  const mapContext = (0, import_react4.useContext)(MapControlsContext);
   const contextRef = mapContext?.drawerContentRef;
-  const mergedRef = (0, import_react3.useCallback)(
+  const mergedRef = (0, import_react4.useCallback)(
     (node) => {
       if (drawerContentRef) {
         if (typeof drawerContentRef === "function") {
@@ -1524,11 +1691,11 @@ var MapControls = ({
     },
     [drawerContentRef, contextRef]
   );
-  const [localDrawerState, setLocalDrawerState] = (0, import_react3.useState)(
+  const [localDrawerState, setLocalDrawerState] = (0, import_react4.useState)(
     defaultState ?? "closed"
   );
   const drawerState = mapContext ? mapContext.drawerState : localDrawerState;
-  const setDrawerState = (0, import_react3.useCallback)(
+  const setDrawerState = (0, import_react4.useCallback)(
     (state) => {
       if (mapContext) {
         mapContext.setDrawerState(state);
@@ -1538,15 +1705,15 @@ var MapControls = ({
     },
     [mapContext]
   );
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (defaultState && mapContext) {
       mapContext.setDrawerState(defaultState);
     }
   }, []);
-  const [side, setSide] = (0, import_react3.useState)("left");
-  const containerRef = (0, import_react3.useRef)(null);
-  const [mapHeight, setMapHeight] = (0, import_react3.useState)(600);
-  (0, import_react3.useEffect)(() => {
+  const [side, setSide] = (0, import_react4.useState)("left");
+  const containerRef = (0, import_react4.useRef)(null);
+  const [mapHeight, setMapHeight] = (0, import_react4.useState)(600);
+  (0, import_react4.useEffect)(() => {
     const parent = containerRef.current?.parentElement;
     if (!parent) return;
     const updateHeight = () => {
@@ -1560,7 +1727,7 @@ var MapControls = ({
     };
   }, []);
   const setHasControls = mapContext?.setHasControls;
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (setHasControls && !isInternal) {
       setHasControls(true);
       return () => setHasControls(false);
@@ -1584,9 +1751,10 @@ var MapControls = ({
   };
   const mapPitch = mapContext ? mapContext.pitch : 0;
   const resolvedEtaData = etaData !== void 0 ? etaData : mapContext?.etaData;
-  const [touchStartY, setTouchStartY] = (0, import_react3.useState)(null);
-  const [currentTouchY, setCurrentTouchY] = (0, import_react3.useState)(null);
-  (0, import_react3.useEffect)(() => {
+  const [touchStartY, setTouchStartY] = (0, import_react4.useState)(null);
+  const [currentTouchY, setCurrentTouchY] = (0, import_react4.useState)(null);
+  const [autoContentPx, setAutoContentPx] = (0, import_react4.useState)(0);
+  (0, import_react4.useEffect)(() => {
     if (typeof window === "undefined") return;
     const checkLayout = () => {
       if (drawerSide) {
@@ -1607,8 +1775,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));
@@ -1621,12 +1795,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;
@@ -1656,14 +1834,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,
@@ -1679,6 +1860,7 @@ var MapControls = ({
     /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       MapRightControls,
       {
+        bottomOffset: controlsBottomOffset,
         clampedDragOffset,
         customCompassButton,
         customControls,
@@ -1716,7 +1898,7 @@ var MapControls = ({
 };
 
 // src/components/Map/components/MapMenu.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var MapMenu = ({ children }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex flex-col gap-1.5", children });
@@ -1730,7 +1912,7 @@ var MapMenuItem = ({
   disabled = false,
   children
 }) => {
-  const context = (0, import_react4.useContext)(MapControlsContext);
+  const context = (0, import_react5.useContext)(MapControlsContext);
   const handleClick = (e) => {
     if (disabled) return;
     if (onPress) onPress();
@@ -1812,25 +1994,25 @@ var GlobalEvent = /* @__PURE__ */ ((GlobalEvent2) => {
 })(GlobalEvent || {});
 
 // src/components/Map/hooks/useUserLocation.ts
-var import_react5 = require("react");
+var import_react6 = require("react");
 var LERP_FACTOR = 0.12;
 var useUserLocation = () => {
-  const [locationState, setLocationState] = (0, import_react5.useState)({
+  const [locationState, setLocationState] = (0, import_react6.useState)({
     accuracy: null,
     coords: null,
     heading: null
   });
-  const targetRef = (0, import_react5.useRef)({
+  const targetRef = (0, import_react6.useRef)({
     accuracy: null,
     coords: null,
     heading: null
   });
-  const currentRef = (0, import_react5.useRef)({
+  const currentRef = (0, import_react6.useRef)({
     accuracy: null,
     coords: null,
     heading: null
   });
-  const mapPayload = (0, import_react5.useCallback)((payload) => {
+  const mapPayload = (0, import_react6.useCallback)((payload) => {
     const coords = payload.location?.coords || payload.coords;
     const headingData = payload.heading || payload.coords;
     const newCoords = coords ? [coords.longitude, coords.latitude] : null;
@@ -1848,7 +2030,7 @@ var useUserLocation = () => {
       heading
     };
   }, []);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     let rafId;
     const animate = () => {
       let changed = false;
@@ -1927,7 +2109,7 @@ var useUserLocation = () => {
 };
 
 // src/components/Map/hooks/useLiveRouting.ts
-var import_react6 = require("react");
+var import_react7 = require("react");
 var useLiveRouting = ({
   origin: manualOrigin,
   destination,
@@ -1936,18 +2118,19 @@ var useLiveRouting = ({
   enabled = true,
   initialMode = "preview"
 }) => {
-  const [route, setRoute] = (0, import_react6.useState)(null);
-  const [totalDistance, setTotalDistance] = (0, import_react6.useState)(null);
-  const [isCalculating, setIsCalculating] = (0, import_react6.useState)(false);
-  const [error, setError] = (0, import_react6.useState)(null);
-  const [mode, setMode] = (0, import_react6.useState)(initialMode);
+  const [route, setRoute] = (0, import_react7.useState)(null);
+  const [totalDistance, setTotalDistance] = (0, import_react7.useState)(null);
+  const [isCalculating, setIsCalculating] = (0, import_react7.useState)(false);
+  const [error, setError] = (0, import_react7.useState)(null);
+  const [mode, setMode] = (0, import_react7.useState)(initialMode);
   const userLocationState = useUserLocation();
   const calculationOrigin = manualOrigin || userLocationState.coords;
   const trackingLocation = userLocationState.coords || manualOrigin;
-  const lastCalcOrigin = (0, import_react6.useRef)(null);
-  const lastCalcDest = (0, import_react6.useRef)(null);
-  const isRequestInProgress = (0, import_react6.useRef)(false);
-  const getDistance = (0, import_react6.useCallback)(
+  const lastCalcOrigin = (0, import_react7.useRef)(null);
+  const lastCalcDest = (0, import_react7.useRef)(null);
+  const isRequestInProgress = (0, import_react7.useRef)(false);
+  const lastResetDestKey = (0, import_react7.useRef)(null);
+  const getDistance = (0, import_react7.useCallback)(
     (p1, p2) => {
       const R = 6371e3;
       const \u03C61 = p1[1] * Math.PI / 180;
@@ -1960,7 +2143,7 @@ var useLiveRouting = ({
     },
     []
   );
-  const currentDistanceMeters = (0, import_react6.useMemo)(() => {
+  const currentDistanceMeters = (0, import_react7.useMemo)(() => {
     if (!trackingLocation || !route || route.geometry.coordinates.length < 2) {
       if (trackingLocation && destination) {
         return getDistance(trackingLocation, destination);
@@ -1987,7 +2170,7 @@ var useLiveRouting = ({
     }
     return dist;
   }, [trackingLocation, route, destination, getDistance]);
-  const calculate = (0, import_react6.useCallback)(
+  const calculate = (0, import_react7.useCallback)(
     async (origin, dest, isNewDest) => {
       if (isRequestInProgress.current) return;
       isRequestInProgress.current = true;
@@ -2022,17 +2205,29 @@ var useLiveRouting = ({
     },
     [profile, getDistance]
   );
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
+    if (initialMode === "navigation") {
+      setMode("navigation");
+    }
+  }, [initialMode]);
+  (0, import_react7.useEffect)(() => {
     if (!enabled || !destination || !calculationOrigin) {
       if (!enabled || !destination) {
         setRoute(null);
         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) {
@@ -2049,6 +2244,7 @@ var useLiveRouting = ({
     trackingLocation,
     destination,
     enabled,
+    initialMode,
     recalculateThreshold,
     calculate,
     getDistance
@@ -2065,10 +2261,10 @@ var useLiveRouting = ({
   };
 };
 var useRoute = (origin, destination, profile = "driving") => {
-  const [route, setRoute] = (0, import_react6.useState)(null);
-  const [isCalculating, setIsCalculating] = (0, import_react6.useState)(false);
-  const [error, setError] = (0, import_react6.useState)(null);
-  (0, import_react6.useEffect)(() => {
+  const [route, setRoute] = (0, import_react7.useState)(null);
+  const [isCalculating, setIsCalculating] = (0, import_react7.useState)(false);
+  const [error, setError] = (0, import_react7.useState)(null);
+  (0, import_react7.useEffect)(() => {
     if (!origin || !destination) {
       setRoute(null);
       return;
@@ -2094,10 +2290,103 @@ var useRoute = (origin, destination, profile = "driving") => {
   return { error, isCalculating, route };
 };
 
+// src/components/Map/hooks/useJourney.ts
+var import_react8 = require("react");
+var useJourney = (options = {}) => {
+  const { navigation, onAbort, onModeChange } = options;
+  const [progNav, setProgNav] = (0, import_react8.useState)(null);
+  const [isAborted, setIsAborted] = (0, import_react8.useState)(false);
+  (0, import_react8.useEffect)(() => {
+    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 = (0, import_react8.useRef)(null);
+  const currentDest = effectiveOptions?.destination;
+  (0, import_react8.useEffect)(() => {
+    if (currentDest && (!prevDest.current || prevDest.current[0] !== currentDest[0] || prevDest.current[1] !== currentDest[1])) {
+      setIsAborted(false);
+    }
+    prevDest.current = currentDest;
+  }, [currentDest]);
+  const onModeChangeRef = (0, import_react8.useRef)(onModeChange);
+  onModeChangeRef.current = onModeChange;
+  (0, import_react8.useEffect)(() => {
+    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 = (0, import_react8.useCallback)(() => {
+    setIsAborted(true);
+    setProgNav(null);
+    sdk.navigation.abort();
+    if (onAbort) onAbort();
+  }, [onAbort]);
+  const start = (0, import_react8.useCallback)(() => {
+    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
-var import_react7 = require("react");
+var import_react9 = require("react");
 var useTrimmedRoute = (route, userLocation) => {
-  return (0, import_react7.useMemo)(() => {
+  return (0, import_react9.useMemo)(() => {
     if (!route || !userLocation || route.coordinates.length < 2) return route;
     const coords = route.coordinates;
     let minDistance = Infinity;
@@ -2169,14 +2458,76 @@ var RouteLayer = ({
 };
 
 // src/components/Map/Map.tsx
-var import_react_maplibre5 = require("@vis.gl/react-maplibre");
-var import_react9 = __toESM(require("react"), 1);
+var import_react_maplibre6 = require("@vis.gl/react-maplibre");
+var import_react12 = __toESM(require("react"), 1);
 var import_maplibre_gl = require("maplibre-gl/dist/maplibre-gl.css");
 
-// src/components/Map/layers/POILayers.tsx
+// 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
 var import_react_maplibre2 = require("@vis.gl/react-maplibre");
-var import_react8 = require("react");
+var import_react10 = require("react");
 var import_jsx_runtime11 = require("react/jsx-runtime");
+var MockRadiusLayer = ({
+  center,
+  radiusMeters,
+  color = "#39ff88"
+}) => {
+  const data = (0, import_react10.useMemo)(
+    () => buildGeoCircle(center, radiusMeters),
+    [center, radiusMeters]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_maplibre2.Source, { data, id: "sdk-mock-radius-source", type: "geojson", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      import_react_maplibre2.Layer,
+      {
+        id: "sdk-mock-radius-fill",
+        paint: {
+          "fill-color": color,
+          "fill-opacity": 0.12
+        },
+        type: "fill"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      import_react_maplibre2.Layer,
+      {
+        id: "sdk-mock-radius-outline",
+        paint: {
+          "line-color": color,
+          "line-dasharray": [2, 2],
+          "line-width": 2
+        },
+        type: "line"
+      }
+    )
+  ] });
+};
+
+// src/components/Map/layers/POILayers.tsx
+var import_react_maplibre3 = require("@vis.gl/react-maplibre");
+var import_react11 = require("react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function createEmojiIcon(emoji, size = 64) {
   const canvas = document.createElement("canvas");
   canvas.width = size;
@@ -2189,13 +2540,13 @@ function createEmojiIcon(emoji, size = 64) {
   return ctx.getImageData(0, 0, size, size);
 }
 var POILayers = ({ pois }) => {
-  const [loadedImages, setLoadedImages] = (0, import_react8.useState)(0);
-  const { current: map } = (0, import_react_maplibre2.useMap)();
-  const glPois = (0, import_react8.useMemo)(
+  const [loadedImages, setLoadedImages] = (0, import_react11.useState)(0);
+  const { current: map } = (0, import_react_maplibre3.useMap)();
+  const glPois = (0, import_react11.useMemo)(
     () => pois.filter((p) => !p.displayMode || p.displayMode === "gl"),
     [pois]
   );
-  (0, import_react8.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (!map) return;
     const glMap = map.getMap();
     const defaults = [
@@ -2235,7 +2586,7 @@ var POILayers = ({ pois }) => {
       setLoadedImages((prev) => prev + updates);
     }
   }, [map, glPois]);
-  const geojson = (0, import_react8.useMemo)(
+  const geojson = (0, import_react11.useMemo)(
     () => ({
       features: glPois.map((poi) => ({
         geometry: {
@@ -2253,8 +2604,8 @@ var POILayers = ({ pois }) => {
     }),
     [glPois]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_maplibre2.Source, { data: geojson, id: "sdk-pois", type: "geojson", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-    import_react_maplibre2.Layer,
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_maplibre3.Source, { data: geojson, id: "sdk-pois", type: "geojson", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    import_react_maplibre3.Layer,
     {
       id: "sdk-poi-layer",
       layout: {
@@ -2289,13 +2640,13 @@ var POILayers = ({ pois }) => {
 };
 
 // src/components/Map/layers/POIMarkers.tsx
-var import_react_maplibre3 = require("@vis.gl/react-maplibre");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_react_maplibre4 = require("@vis.gl/react-maplibre");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var POIMarkers = ({ pois, onClick }) => {
   const markerPois = pois.filter((p) => p.displayMode === "marker");
   if (markerPois.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children: markerPois.map((poi) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-    import_react_maplibre3.Marker,
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children: markerPois.map((poi) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    import_react_maplibre4.Marker,
     {
       anchor: "bottom",
       latitude: poi.latitude,
@@ -2304,7 +2655,7 @@ var POIMarkers = ({ pois, onClick }) => {
         e.originalEvent.stopPropagation();
         if (onClick) onClick(poi);
       },
-      children: poi.markerComponent ? poi.markerComponent : /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+      children: poi.markerComponent ? poi.markerComponent : /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
         "div",
         {
           style: {
@@ -2313,7 +2664,7 @@ var POIMarkers = ({ pois, onClick }) => {
             transform: "transition-transform duration-200 hover:scale-110"
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
               "div",
               {
                 style: {
@@ -2326,7 +2677,7 @@ var POIMarkers = ({ pois, onClick }) => {
                   justifyContent: "center",
                   width: "32px"
                 },
-                children: poi.emoji ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: { fontSize: "16px" }, children: poi.emoji }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                children: poi.emoji ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { style: { fontSize: "16px" }, children: poi.emoji }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                   "div",
                   {
                     style: {
@@ -2339,7 +2690,7 @@ var POIMarkers = ({ pois, onClick }) => {
                 )
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
               "div",
               {
                 style: {
@@ -2361,20 +2712,20 @@ var POIMarkers = ({ pois, onClick }) => {
 };
 
 // src/components/Map/layers/UserLocationLayer.tsx
-var import_react_maplibre4 = require("@vis.gl/react-maplibre");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_react_maplibre5 = require("@vis.gl/react-maplibre");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var UserLocationLayer = ({
   forcedLocation,
   heading
 }) => {
   if (!forcedLocation) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-    import_react_maplibre4.Marker,
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    import_react_maplibre5.Marker,
     {
       anchor: "center",
       latitude: forcedLocation[1],
       longitude: forcedLocation[0],
-      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
         "div",
         {
           style: {
@@ -2384,7 +2735,7 @@ var UserLocationLayer = ({
             position: "relative"
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
               "div",
               {
                 style: {
@@ -2397,7 +2748,7 @@ var UserLocationLayer = ({
                 }
               }
             ),
-            heading !== void 0 && heading !== null && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            heading !== void 0 && heading !== null && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
               "div",
               {
                 style: {
@@ -2407,13 +2758,13 @@ var UserLocationLayer = ({
                   width: "60px",
                   zIndex: 0
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
                   "svg",
                   {
                     style: { height: "100%", width: "100%" },
                     viewBox: "0 0 100 100",
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+                      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
                         "radialGradient",
                         {
                           cx: "50%",
@@ -2423,7 +2774,7 @@ var UserLocationLayer = ({
                           id: "grad1",
                           r: "50%",
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
                               "stop",
                               {
                                 offset: "0%",
@@ -2433,7 +2784,7 @@ var UserLocationLayer = ({
                                 }
                               }
                             ),
-                            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
                               "stop",
                               {
                                 offset: "100%",
@@ -2446,7 +2797,7 @@ var UserLocationLayer = ({
                           ]
                         }
                       ) }),
-                      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
                         "path",
                         {
                           d: "M 50 50 L 35 0 A 50 50 0 0 1 65 0 Z",
@@ -2458,7 +2809,7 @@ var UserLocationLayer = ({
                 )
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
               "div",
               {
                 style: {
@@ -2472,7 +2823,7 @@ var UserLocationLayer = ({
                   width: "20px",
                   zIndex: 1
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
                   "div",
                   {
                     style: {
@@ -2486,7 +2837,7 @@ var UserLocationLayer = ({
                 )
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("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__ */ (0, import_jsx_runtime14.jsx)("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; } }` })
           ]
         }
       )
@@ -2495,7 +2846,7 @@ var UserLocationLayer = ({
 };
 
 // src/components/Map/Map.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var MapInternal = ({
   initialViewState = {
     latitude: 45.90583599233422,
@@ -2514,6 +2865,7 @@ var MapInternal = ({
   onLoad,
   showUserLocation = true,
   followUser: initialFollowUser = false,
+  lockToUser = false,
   showUserLocationButton = true,
   renderUserLocation,
   pois = [],
@@ -2532,67 +2884,44 @@ var MapInternal = ({
   controlProps = {},
   enableTouchDrag = false
 }) => {
-  const mapControls = (0, import_react9.useContext)(MapControlsContext);
-  const mapRef = (0, import_react9.useRef)(null);
+  const mapControls = (0, import_react12.useContext)(MapControlsContext);
+  const mockLocation = (0, import_react12.useContext)(MockLocationContext);
+  const mapRef = (0, import_react12.useRef)(null);
   const userLocationState = useUserLocation();
-  const [progNav, setProgNav] = (0, import_react9.useState)(null);
-  const [isAborted, setIsAborted] = (0, import_react9.useState)(false);
-  (0, import_react9.useEffect)(() => {
-    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
   });
-  (0, import_react9.useEffect)(() => {
-    if (onNavigationModeChange && navigation) {
-      onNavigationModeChange(internalNav.mode);
-    }
-  }, [internalNav.mode, onNavigationModeChange, navigation]);
-  const prevDest = (0, import_react9.useRef)(null);
-  const currentDest = effectiveNavOptions?.destination;
-  (0, import_react9.useEffect)(() => {
-    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 = (0, import_react9.useRef)(resolvedInitialFollow);
-  const isFlyingRef = (0, import_react9.useRef)(false);
-  const [localIsFollowingUI, setLocalIsFollowingUI] = (0, import_react9.useState)(
+  const isFollowingRef = (0, import_react12.useRef)(resolvedInitialFollow);
+  const isFlyingRef = (0, import_react12.useRef)(false);
+  const flyingGenerationRef = (0, import_react12.useRef)(0);
+  const lockFlying = (0, import_react12.useCallback)(() => {
+    isFlyingRef.current = true;
+    return ++flyingGenerationRef.current;
+  }, []);
+  const releaseFlyingIfCurrent = (0, import_react12.useCallback)((flightId) => {
+    if (flyingGenerationRef.current === flightId) {
+      isFlyingRef.current = false;
+    }
+  }, []);
+  const [localIsFollowingUI, setLocalIsFollowingUI] = (0, import_react12.useState)(
     resolvedInitialFollow
   );
   const isFollowingUI = mapControls ? mapControls.isFollowing : localIsFollowingUI;
   const setIsFollowingCtx = mapControls?.setIsFollowing;
-  const setFollowMode = (0, import_react9.useCallback)(
+  const setFollowMode = (0, import_react12.useCallback)(
     (follow) => {
       isFollowingRef.current = follow;
       setLocalIsFollowingUI(follow);
@@ -2602,7 +2931,7 @@ var MapInternal = ({
     },
     [setIsFollowingCtx]
   );
-  (0, import_react9.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (mapControls && mapControls.isFollowing !== isFollowingRef.current) {
       isFollowingRef.current = mapControls.isFollowing;
     }
@@ -2611,13 +2940,13 @@ var MapInternal = ({
   if (pois.length > 0 && !mergedInteractiveLayerIds.includes("sdk-poi-layer")) {
     mergedInteractiveLayerIds.push("sdk-poi-layer");
   }
-  const prevInitialFollow = (0, import_react9.useRef)(initialFollowUser);
-  (0, import_react9.useEffect)(() => {
+  const prevInitialFollow = (0, import_react12.useRef)(initialFollowUser);
+  (0, import_react12.useEffect)(() => {
     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,
@@ -2625,14 +2954,20 @@ var MapInternal = ({
           zoom: Math.max(mapRef.current.getZoom(), 16)
         });
         setTimeout(() => {
-          isFlyingRef.current = false;
+          releaseFlyingIfCurrent(flightId);
         }, 1050);
       }
     }
-  }, [initialFollowUser, setFollowMode, userLocationState.coords]);
-  const lastAutoLockedRouteRef = (0, import_react9.useRef)(null);
-  const lastModeRef = (0, import_react9.useRef)(null);
-  (0, import_react9.useEffect)(() => {
+  }, [
+    initialFollowUser,
+    setFollowMode,
+    userLocationState.coords,
+    lockFlying,
+    releaseFlyingIfCurrent
+  ]);
+  const lastAutoLockedRouteRef = (0, import_react12.useRef)(null);
+  const lastModeRef = (0, import_react12.useRef)(null);
+  (0, import_react12.useEffect)(() => {
     if (!route || !mapRef.current) {
       if (!route) lastAutoLockedRouteRef.current = null;
       return;
@@ -2640,9 +2975,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,
@@ -2651,7 +2988,7 @@ var MapInternal = ({
           // Zoomed in on user for active guidance
         });
         setTimeout(() => {
-          isFlyingRef.current = false;
+          releaseFlyingIfCurrent(flightId);
         }, 1050);
       }
     } else if (mode === "preview" && isNewRoute) {
@@ -2678,8 +3015,15 @@ var MapInternal = ({
     }
     lastAutoLockedRouteRef.current = route;
     lastModeRef.current = mode;
-  }, [route, mode, setFollowMode, userLocationState.coords]);
-  (0, import_react9.useEffect)(() => {
+  }, [
+    route,
+    mode,
+    setFollowMode,
+    userLocationState.coords,
+    lockFlying,
+    releaseFlyingIfCurrent
+  ]);
+  (0, import_react12.useEffect)(() => {
     if (isFollowingRef.current && !isFlyingRef.current && userLocationState.coords && mapRef.current) {
       mapRef.current.easeTo({
         center: userLocationState.coords,
@@ -2708,15 +3052,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();
       }
@@ -2725,52 +3067,23 @@ var MapInternal = ({
     progress: progressValue
   } : void 0;
   const setEtaDataCtx = mapControls?.setEtaData;
-  (0, import_react9.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (setEtaDataCtx) {
       setEtaDataCtx(showEtaData);
     }
   }, [showEtaData, setEtaDataCtx]);
   const setDrawerStateCtx = mapControls?.setDrawerState;
-  (0, import_react9.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (setDrawerStateCtx && propDrawerState !== void 0) {
       setDrawerStateCtx(propDrawerState);
     }
   }, [propDrawerState, setDrawerStateCtx]);
-  const defaultMenuItems = (0, import_react9.useMemo)(
-    () => [
-      {
-        icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-          "svg",
-          {
-            className: "w-5 h-5",
-            fill: "none",
-            stroke: "currentColor",
-            strokeWidth: "2",
-            viewBox: "0 0 24 24",
-            children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-              "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 } = (0, import_react9.useMemo)(() => {
+  const resolvedMenuItems = menuItems ?? [];
+  const { mapLibreChildren, menuContentFromChildren } = (0, import_react12.useMemo)(() => {
     const mapLibreChildren2 = [];
     const extractedMenuItems = [];
-    import_react9.default.Children.forEach(children, (child) => {
-      if (import_react9.default.isValidElement(child)) {
+    import_react12.default.Children.forEach(children, (child) => {
+      if (import_react12.default.isValidElement(child)) {
         const type = child.type;
         const displayName = type?.displayName || type?.name;
         const isMenu = type === MapMenu || displayName === "MapMenu";
@@ -2781,7 +3094,7 @@ var MapInternal = ({
           "MapMenuFooter"
         ].includes(displayName);
         if (isMenu) {
-          import_react9.default.Children.forEach(
+          import_react12.default.Children.forEach(
             child.props.children,
             (nestedChild) => {
               if (nestedChild) {
@@ -2798,10 +3111,14 @@ var MapInternal = ({
         mapLibreChildren2.push(child);
       }
     });
-    const menuContentFromChildren2 = extractedMenuItems.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MapMenu, { children: extractedMenuItems }) : null;
+    const menuContentFromChildren2 = extractedMenuItems.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(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(
@@ -2822,26 +3139,52 @@ var MapInternal = ({
     }
     if (onClick) onClick(e);
   };
-  const handleCenterOnUser = (0, import_react9.useCallback)(
+  const handleCenterOnUser = (0, import_react12.useCallback)(
     (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 handleFlyTo = (0, import_react12.useCallback)(
+    (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 = (0, import_react9.useCallback)((params) => {
+  const handleResetBearing = (0, import_react12.useCallback)((params) => {
     if (mapRef.current) {
       mapRef.current.easeTo({
         bearing: 0,
@@ -2851,35 +3194,36 @@ var MapInternal = ({
       });
     }
   }, []);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (mapControls) {
       mapControls._registerCenterCallback(handleCenterOnUser);
       mapControls._registerResetBearingCallback(handleResetBearing);
+      mapControls._registerFlyToCallback(handleFlyTo);
     }
-  }, [mapControls, handleCenterOnUser, handleResetBearing]);
-  const handleMove = (0, import_react9.useCallback)(() => {
+  }, [mapControls, handleCenterOnUser, handleResetBearing, handleFlyTo]);
+  const handleMove = (0, import_react12.useCallback)(() => {
     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__ */ (0, import_jsx_runtime14.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
     "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__ */ (0, import_jsx_runtime14.jsxs)(
-          import_react_maplibre5.Map,
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+          import_react_maplibre6.Map,
           {
             attributionControl: false,
             initialViewState,
@@ -2900,6 +3244,7 @@ var MapInternal = ({
             },
             onMouseDown: handleUserInteraction,
             onMove: handleMove,
+            onRotateStart: handleUserInteraction,
             onTouchStart: handleUserInteraction,
             onWheel: handleUserInteraction,
             ref: mapRef,
@@ -2907,23 +3252,30 @@ var MapInternal = ({
               showUserLocation && userLocationState.coords && (renderUserLocation ? renderUserLocation({
                 coords: userLocationState.coords,
                 heading: userLocationState.heading
-              }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                 UserLocationLayer,
                 {
                   forcedLocation: userLocationState.coords,
                   heading: userLocationState.heading
                 }
               )),
-              displayRoute && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(RouteLayer, { geometry: displayRoute }),
-              pois.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(POILayers, { pois }),
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(POIMarkers, { onClick: onPoiClick, pois })
+              mockLocation && mockLocation.radiusMeters > 0 && userLocationState.coords && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                MockRadiusLayer,
+                {
+                  center: userLocationState.coords,
+                  radiusMeters: mockLocation.radiusMeters
+                }
+              ),
+              displayRoute && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(RouteLayer, { geometry: displayRoute }),
+              pois.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(POILayers, { pois }),
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(POIMarkers, { onClick: onPoiClick, pois })
               ] }),
               mapLibreChildren
             ]
           }
         ),
-        showControls && mapControls && !mapControls.hasControls && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        showControls && mapControls && !mapControls.hasControls && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           MapControls,
           {
             drawerContentRef,
@@ -2943,18 +3295,18 @@ var MapInternal = ({
 var SDKMapProviderWrapper = ({
   children
 }) => {
-  const context = (0, import_react9.useContext)(MapControlsContext);
+  const context = (0, import_react12.useContext)(MapControlsContext);
   if (context) {
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, { children });
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, { children });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SDKMapProvider, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SDKMapProvider, { children });
 };
 var Map2 = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SDKMapProviderWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_maplibre5.MapProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MapInternal, { ...props }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SDKMapProviderWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_maplibre6.MapProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(MapInternal, { ...props }) }) });
 };
 
 // src/components/MapWrapper.tsx
-var import_react10 = __toESM(require("react"), 1);
+var import_react13 = __toESM(require("react"), 1);
 var import_client = require("react-dom/client");
 function renderMap(containerId, props = {}) {
   const container = document.getElementById(containerId);
@@ -2962,7 +3314,7 @@ function renderMap(containerId, props = {}) {
     throw new Error(`Container with id "${containerId}" not found.`);
   }
   const root = (0, import_client.createRoot)(container);
-  root.render(import_react10.default.createElement(Map2, props));
+  root.render(import_react13.default.createElement(Map2, props));
   return root;
 }
 
@@ -3147,7 +3499,7 @@ var RoutingService = {
 };
 
 // package.json
-var version = "0.2.7";
+var version = "0.5.2";
 
 // src/sdk.ts
 function deepFreeze(obj) {
@@ -3350,8 +3702,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.
@@ -3486,8 +3841,8 @@ var MiniAppSDK = class {
 var sdk = deepFreeze(new MiniAppSDK());
 
 // src/components/BridgeMocker.tsx
-var import_react11 = require("react");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_react14 = require("react");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var getBearing = (p1, p2) => {
   const lat1 = p1[1] * Math.PI / 180;
   const lat2 = p2[1] * Math.PI / 180;
@@ -3506,16 +3861,19 @@ var BridgeMocker = ({
   mockJWTToken,
   children
 }) => {
-  const [autoMove, setAutoMove] = (0, import_react11.useState)(isMoving);
-  const [location, setLocation] = (0, import_react11.useState)(initialLocation);
-  const [heading, setHeading] = (0, import_react11.useState)(0);
-  const [speedMultiplier, setSpeedMultiplier] = (0, import_react11.useState)(simulationSpeed);
-  const [isReady, setIsReady] = (0, import_react11.useState)(false);
-  const [isMinimized, setIsMinimized] = (0, import_react11.useState)(true);
-  const streamIntervalRef = (0, import_react11.useRef)(null);
-  const pathIndexRef = (0, import_react11.useRef)(0);
-  const activeConfigRef = (0, import_react11.useRef)(null);
-  const stateRef = (0, import_react11.useRef)({
+  const [autoMove, setAutoMove] = (0, import_react14.useState)(isMoving);
+  const [location, setLocation] = (0, import_react14.useState)(initialLocation);
+  const [heading, setHeading] = (0, import_react14.useState)(0);
+  const [speedMultiplier, setSpeedMultiplier] = (0, import_react14.useState)(simulationSpeed);
+  const [isReady, setIsReady] = (0, import_react14.useState)(false);
+  const [isMinimized, setIsMinimized] = (0, import_react14.useState)(true);
+  const [radiusMeters, setRadiusMeters] = (0, import_react14.useState)(0);
+  const [radiusUnit, setRadiusUnit] = (0, import_react14.useState)("m");
+  const [isPlacingLocation, setIsPlacingLocation] = (0, import_react14.useState)(false);
+  const streamIntervalRef = (0, import_react14.useRef)(null);
+  const pathIndexRef = (0, import_react14.useRef)(0);
+  const activeConfigRef = (0, import_react14.useRef)(null);
+  const stateRef = (0, import_react14.useRef)({
     autoMove,
     heading,
     location,
@@ -3527,36 +3885,51 @@ var BridgeMocker = ({
     simulationPath,
     speedMultiplier
   });
-  const pushLocationUpdate = (0, import_react11.useCallback)(() => {
-    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 = (0, import_react14.useCallback)(
+    (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"
-    });
-  }, []);
-  (0, import_react11.useEffect)(() => {
+      };
+      window.__MiniAppBridge?.onNativeMessage({
+        eventName: "LOCATION_STREAM_UPDATE" /* LOCATION_STREAM_UPDATE */,
+        payload,
+        type: "EVENT"
+      });
+    },
+    []
+  );
+  const pushLocationUpdate = (0, import_react14.useCallback)(() => {
+    const currentState = stateRef.current;
+    pushLocationUpdateFor(currentState.location, currentState.heading);
+  }, [pushLocationUpdateFor]);
+  const placeLocation = (0, import_react14.useCallback)(
+    (coords) => {
+      setLocation(coords);
+      setIsPlacingLocation(false);
+      pushLocationUpdateFor(coords, stateRef.current.heading);
+    },
+    [pushLocationUpdateFor]
+  );
+  (0, import_react14.useEffect)(() => {
     stateRef.current = {
       autoMove,
       heading,
@@ -3577,19 +3950,19 @@ var BridgeMocker = ({
     speedMultiplier,
     mockJWTToken
   ]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     setAutoMove(isMoving);
   }, [isMoving]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     setSpeedMultiplier(simulationSpeed);
   }, [simulationSpeed]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (simulationPath && simulationPath.length > 0) {
       pathIndexRef.current = 0;
       setLocation(simulationPath[0]);
     }
   }, [simulationPath]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (streamIntervalRef.current && activeConfigRef.current) {
       sdk.bridge.send(
         "START_LOCATION_STREAM",
@@ -3597,7 +3970,7 @@ var BridgeMocker = ({
       );
     }
   }, [speedMultiplier]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     const bridge = sdk.bridge;
     const originalSend = bridge.send.bind(bridge);
     const stopStream = () => {
@@ -3803,10 +4176,19 @@ var BridgeMocker = ({
       bridge.send = originalSend;
     };
   }, [appId]);
+  const radiusInMeters = radiusUnit === "km" ? radiusMeters * 1e3 : radiusMeters;
+  const mockLocationContextValue = (0, import_react14.useMemo)(
+    () => ({
+      isPlacingLocation,
+      placeLocation,
+      radiusMeters: radiusInMeters
+    }),
+    [isPlacingLocation, placeLocation, radiusInMeters]
+  );
   if (!isReady) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "relative w-full h-full", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "w-full h-full", children }),
-    isMinimized ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "relative w-full h-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "w-full h-full", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(MockLocationContext.Provider, { value: mockLocationContextValue, children }) }),
+    isMinimized ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       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!",
@@ -3814,7 +4196,7 @@ var BridgeMocker = ({
         title: "Open Simulation Controls",
         type: "button",
         variant: "ghost",
-        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
           "svg",
           {
             className: "group-hover:scale-110 transition-transform",
@@ -3828,34 +4210,34 @@ var BridgeMocker = ({
             width: "14",
             xmlns: "http://www.w3.org/2000/svg",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: "M21 4H3" }),
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: "M10 8H3" }),
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: "M21 12H3" }),
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: "M10 16H3" }),
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: "M21 20H3" }),
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("circle", { cx: "14", cy: "8", r: "2" }),
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("circle", { cx: "14", cy: "16", r: "2" })
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M21 4H3" }),
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M10 8H3" }),
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M21 12H3" }),
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M10 16H3" }),
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M21 20H3" }),
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("circle", { cx: "14", cy: "8", r: "2" }),
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("circle", { cx: "14", cy: "16", r: "2" })
             ]
           }
         )
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    ) : /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
       "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__ */ (0, import_jsx_runtime15.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
             "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__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "font-bold text-slate-100 flex items-center gap-2", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-lg", children: "\u{1F6E0}\uFE0F" }),
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: "font-bold text-slate-100 flex items-center gap-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-lg", children: "\u{1F6E0}\uFE0F" }),
                   " Simulation Controls"
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                   Button,
                   {
                     className: "text-slate-500 hover:text-white p-0 h-auto hover:bg-transparent cursor-pointer",
@@ -3867,10 +4249,10 @@ var BridgeMocker = ({
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "p-4 flex flex-col gap-3", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex justify-between items-center", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("label", { className: "flex items-center gap-2 cursor-pointer", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "p-4 flex flex-col gap-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex justify-between items-center", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("label", { className: "flex items-center gap-2 cursor-pointer", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                   "input",
                   {
                     checked: autoMove,
@@ -3879,20 +4261,20 @@ var BridgeMocker = ({
                     type: "checkbox"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "text-slate-200 font-bold", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: "text-slate-200 font-bold", children: [
                   "Auto-Move ",
                   simulationPath ? "(Path)" : "(Random)"
                 ] })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-[10px] text-slate-500", children: "Speed:" }),
-                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-[10px] text-slate-500", children: "Speed:" }),
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                   "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__ */ (0, import_jsx_runtime15.jsxs)("option", { value: s, children: [
+                    children: [1, 2, 5, 10, 50, 100, 250].map((s) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("option", { value: s, children: [
                       s,
                       "x"
                     ] }, s))
@@ -3900,10 +4282,10 @@ var BridgeMocker = ({
                 )
               ] })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "grid grid-cols-2 gap-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex flex-col gap-1", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-[10px] text-slate-500 text-left", children: "Lng" }),
-                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "grid grid-cols-2 gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex flex-col gap-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-[10px] text-slate-500 text-left", children: "Lng" }),
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                   "input",
                   {
                     className: "bg-slate-800 border border-slate-700 rounded px-2 py-1 text-white focus:outline-none focus:border-blue-500",
@@ -3918,9 +4300,9 @@ var BridgeMocker = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex flex-col gap-1", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-[10px] text-slate-500 text-left", children: "Lat" }),
-                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex flex-col gap-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-[10px] text-slate-500 text-left", children: "Lat" }),
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                   "input",
                   {
                     className: "bg-slate-800 border border-slate-700 rounded px-2 py-1 text-white focus:outline-none focus:border-blue-500",
@@ -3935,9 +4317,9 @@ var BridgeMocker = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex flex-col gap-1 col-span-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-[10px] text-slate-500", children: "Heading (Degrees)" }),
-                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex flex-col gap-1 col-span-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-[10px] text-slate-500", children: "Heading (Degrees)" }),
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                   "input",
                   {
                     className: "w-full accent-blue-500",
@@ -3951,11 +4333,63 @@ var BridgeMocker = ({
                     value: heading
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "text-right text-slate-400", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "text-right text-slate-400", children: [
                   heading,
                   "\xB0"
                 ] })
               ] })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+              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__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex flex-col gap-1 border-t border-slate-800 pt-3", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex justify-between items-center", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-[10px] text-slate-500", children: "Scan Radius" }),
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center gap-1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                    "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__ */ (0, import_jsx_runtime16.jsxs)(
+                    "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__ */ (0, import_jsx_runtime16.jsx)("option", { value: "m", children: "m" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("option", { value: "km", children: "km" })
+                      ]
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                "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__ */ (0, import_jsx_runtime16.jsx)("div", { className: "text-right text-slate-400", children: radiusMeters === 0 ? "hidden" : `${radiusMeters}${radiusUnit} radius around user` })
             ] })
           ] })
         ]
@@ -3965,20 +4399,20 @@ var BridgeMocker = ({
 };
 
 // src/components/DebugConsole.tsx
-var import_react12 = require("react");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_react15 = require("react");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var DebugConsole = ({
   isOpen: initialOpen = false,
   onClose
 }) => {
-  const [showConsole, setShowConsole] = (0, import_react12.useState)(initialOpen);
-  const [logs, setLogs] = (0, import_react12.useState)([]);
-  const scrollRef = (0, import_react12.useRef)(null);
-  (0, import_react12.useEffect)(() => {
+  const [showConsole, setShowConsole] = (0, import_react15.useState)(initialOpen);
+  const [logs, setLogs] = (0, import_react15.useState)([]);
+  const scrollRef = (0, import_react15.useRef)(null);
+  (0, import_react15.useEffect)(() => {
     setShowConsole(initialOpen);
   }, [initialOpen]);
   const clearLogs = () => setLogs([]);
-  const addLog = (0, import_react12.useCallback)((label, data) => {
+  const addLog = (0, import_react15.useCallback)((label, data) => {
     if (label.includes("LOCATION_STREAM_UPDATE" /* LOCATION_STREAM_UPDATE */)) return;
     const entry = {
       content: typeof data === "string" ? data : JSON.stringify(data, null, 2),
@@ -3988,7 +4422,7 @@ var DebugConsole = ({
     };
     setLogs((prev) => [entry, ...prev].slice(0, 100));
   }, []);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (typeof window === "undefined") return;
     const bridge = sdk.bridge;
     const originalSend = bridge.send.bind(bridge);
@@ -4010,7 +4444,7 @@ var DebugConsole = ({
     };
   }, [addLog]);
   if (!showConsole) {
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       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!",
@@ -4018,7 +4452,7 @@ var DebugConsole = ({
         title: "Open Debug Console",
         type: "button",
         variant: "ghost",
-        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
           "svg",
           {
             className: "group-hover:scale-110 transition-transform",
@@ -4032,31 +4466,31 @@ var DebugConsole = ({
             width: "14",
             xmlns: "http://www.w3.org/2000/svg",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "m8 2 1.88 1.88" }),
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M14.12 3.88 16 2" }),
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M9 7.13v-1a3.003 3.003 0 1 1 6 0v1" }),
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("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__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M12 20v-9" }),
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M6.53 9C4.6 8.8 3 7.1 3 5" }),
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M6 13H2" }),
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M3 21c0-2.1 1.7-3.9 3.8-4" }),
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M20.97 5c0 2.1-1.6 3.8-3.5 4" }),
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M22 13h-4" }),
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M17.2 17c2.1.1 3.8 1.9 3.8 4" })
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "m8 2 1.88 1.88" }),
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M14.12 3.88 16 2" }),
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M9 7.13v-1a3.003 3.003 0 1 1 6 0v1" }),
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("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__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M12 20v-9" }),
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M6.53 9C4.6 8.8 3 7.1 3 5" }),
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M6 13H2" }),
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M3 21c0-2.1 1.7-3.9 3.8-4" }),
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M20.97 5c0 2.1-1.6 3.8-3.5 4" }),
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M22 13h-4" }),
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M17.2 17c2.1.1 3.8 1.9 3.8 4" })
             ]
           }
         )
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("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__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center justify-between mb-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: "text-[10px] font-bold uppercase tracking-widest text-slate-400 flex items-center gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "w-2 h-2 rounded-full bg-emerald-500 animate-pulse" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("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__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex items-center justify-between mb-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "text-[10px] font-bold uppercase tracking-widest text-slate-400 flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "w-2 h-2 rounded-full bg-emerald-500 animate-pulse" }),
         "UP SDK Debug Console"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex gap-4", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex gap-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           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",
@@ -4066,7 +4500,7 @@ var DebugConsole = ({
             children: "Clear"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           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",
@@ -4081,21 +4515,21 @@ var DebugConsole = ({
         )
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       "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__ */ (0, import_jsx_runtime16.jsx)("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__ */ (0, import_jsx_runtime16.jsxs)(
+        children: logs.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("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__ */ (0, import_jsx_runtime17.jsxs)(
           "div",
           {
             className: "mb-3 pb-3 border-b border-slate-900/50 last:border-0 last:mb-0 last:pb-0",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex gap-2 text-slate-500 mb-1 items-center", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-[8px]", children: log.time }),
-                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("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__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex gap-2 text-slate-500 mb-1 items-center", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-[8px]", children: log.time }),
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("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__ */ (0, import_jsx_runtime16.jsx)("pre", { className: "whitespace-pre-wrap break-all opacity-90", children: log.content })
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("pre", { className: "whitespace-pre-wrap break-all opacity-90", children: log.content })
             ]
           },
           log.id
@@ -4106,25 +4540,249 @@ var DebugConsole = ({
 };
 
 // src/components/SDKProvider.tsx
-var import_react13 = require("react");
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var SDKContext = (0, import_react13.createContext)({ isMocked: false });
-var useIsMocked = () => (0, import_react13.useContext)(SDKContext).isMocked;
+var import_react16 = require("react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var SDKContext = (0, import_react16.createContext)({ isMocked: false });
+var useIsMocked = () => (0, import_react16.useContext)(SDKContext).isMocked;
 var SDKProvider = ({
   children,
   debug = false,
   ...mockerProps
 }) => {
   const isMocked = typeof window !== "undefined" && !(window.__UP_REACT_NATIVE_APP__ === true || !!window.ReactNativeWebView);
-  const value = (0, import_react13.useMemo)(() => ({ isMocked }), [isMocked]);
-  const content = /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+  const value = (0, import_react16.useMemo)(() => ({ isMocked }), [isMocked]);
+  const content = /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
     children,
-    (debug || isMocked) && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DebugConsole, {})
+    (debug || isMocked) && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DebugConsole, {})
   ] });
   if (isMocked) {
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SDKContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(BridgeMocker, { ...mockerProps, children: content }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SDKContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(BridgeMocker, { ...mockerProps, children: content }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SDKContext.Provider, { value, children: content });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SDKContext.Provider, { value, children: content });
+};
+
+// src/components/SwipeCarousel.tsx
+var import_react17 = require("react");
+var import_jsx_runtime19 = require("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 = (0, import_react17.useRef)(null);
+  const [containerWidth, setContainerWidth] = (0, import_react17.useState)(0);
+  const [dragX, setDragX] = (0, import_react17.useState)(0);
+  const [dragY, setDragY] = (0, import_react17.useState)(0);
+  const [isDraggingX, setIsDraggingX] = (0, import_react17.useState)(false);
+  const [isDraggingY, setIsDraggingY] = (0, import_react17.useState)(false);
+  const touchStateRef = (0, import_react17.useRef)(null);
+  const [internalIndex, setInternalIndex] = (0, import_react17.useState)(
+    () => Math.max(
+      0,
+      items.findIndex((item) => item.id === activeId)
+    )
+  );
+  const prevActiveIdRef = (0, import_react17.useRef)(activeId);
+  (0, import_react17.useEffect)(() => {
+    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)
+  );
+  (0, import_react17.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__ */ (0, import_jsx_runtime19.jsx)(
+    "div",
+    {
+      className: `relative overflow-hidden touch-pan-y ${className ?? ""}`,
+      onTouchCancel: endDrag,
+      onTouchEnd: endDrag,
+      onTouchMove: handleTouchMove,
+      onTouchStart: handleTouchStart,
+      ref: containerRef,
+      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        "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__ */ (0, import_jsx_runtime19.jsx)(
+              "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/host/routingHandler.ts
@@ -4209,9 +4867,11 @@ var src_default = sdk;
   MapMenuItem,
   MapMenuTitle,
   MiniAppSDK,
+  MockLocationContext,
   RouteLayer,
   SDKMapProvider,
   SDKProvider,
+  SwipeCarousel,
   UIEvent,
   handleClearRoute,
   handleDrawRoute,
@@ -4219,8 +4879,10 @@ var src_default = sdk;
   renderMap,
   sdk,
   useIsMocked,
+  useJourney,
   useLiveRouting,
   useMapControls,
+  useMockLocation,
   useRoute,
   useTrimmedRoute,
   useUserLocation