@cloudparse/up-miniapps-sdk 0.6.7 → 0.7.0

package/dist/index.cjs

@@ -65,6 +65,7 @@ __export(src_exports, {
   useMapControls: () => useMapControls,
   useMockLocation: () => useMockLocation,
   useRoute: () => useRoute,
+  useTapAction: () => useTapAction,
   useTrimmedRoute: () => useTrimmedRoute,
   useUserLocation: () => useUserLocation
 });
@@ -137,6 +138,58 @@ function isRunningInsideNativeShell() {
 // src/bridge.ts
 var BridgeTimeoutError = class extends Error {
 };
+var MOCK_ACHIEVEMENTS = [
+  {
+    completed: false,
+    description: "Discover 5 points of interest around Annecy.",
+    imageUrl: "https://api.dicebear.com/9.x/icons/svg?seed=explore",
+    playerActionCount: 3,
+    slug: "explore-5-pois",
+    title: "Explorer",
+    totalActionCount: 5,
+    upReward: 50,
+    xpReward: 100
+  },
+  {
+    completed: true,
+    description: "Complete your first navigation journey.",
+    imageUrl: "https://api.dicebear.com/9.x/icons/svg?seed=journey",
+    playerActionCount: 1,
+    slug: "first-journey",
+    title: "First Steps",
+    totalActionCount: 1,
+    upReward: 20,
+    xpReward: 40
+  },
+  {
+    completed: false,
+    description: "Scan 10 QR codes at partner venues.",
+    imageUrl: "https://api.dicebear.com/9.x/icons/svg?seed=scan",
+    playerActionCount: 4,
+    slug: "scan-10-qrcodes",
+    title: "Code Breaker",
+    totalActionCount: 10,
+    upReward: 80,
+    xpReward: 150
+  }
+];
+function mockAchievement(slug) {
+  const found = MOCK_ACHIEVEMENTS.find((a) => a.slug === slug);
+  if (found) return found;
+  return {
+    completed: false,
+    description: "Mocked achievement (no native shell attached).",
+    playerActionCount: 0,
+    slug: slug || "unknown-achievement",
+    title: slug || "Unknown Achievement",
+    totalActionCount: 1,
+    upReward: 0,
+    xpReward: 0
+  };
+}
+function mockAchievements() {
+  return MOCK_ACHIEVEMENTS;
+}
 var Bridge = class {
   callbacks = /* @__PURE__ */ new Map();
   eventListeners = /* @__PURE__ */ new Map();
@@ -287,6 +340,12 @@ var Bridge = class {
         return this.mockSaveImage(
           payload
         );
+      case "GET_ACHIEVEMENT":
+        return Promise.resolve(
+          mockAchievement(payload?.slug)
+        );
+      case "GET_ACHIEVEMENTS":
+        return Promise.resolve(mockAchievements());
       default:
         console.warn(
           `[Bridge] Mock mode active: Unhandled message type ${type}`
@@ -475,412 +534,27 @@ SheetDescription.displayName = SheetPrimitive.Description.displayName;
 // src/components/Map/components/MapDrawer.tsx
 var import_react2 = require("react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var resolveHeightToPixels = (height, containerHeight) => {
-  if (typeof height === "number") {
-    return height;
-  }
-  if (height.endsWith("%")) {
-    return parseFloat(height) / 100 * containerHeight;
-  }
-  return parseFloat(height);
-};
-var CONTENT_EDGE_PULL_THRESHOLD_PX = 24;
-var HANDLE_BAR_HEIGHT_PX = 32;
-var HANDLE_TAP_CLICK_SUPPRESSION_MS = 400;
 var MapDrawer = (0, import_react2.forwardRef)(
   ({
     menuItems,
     state,
     onChangeState,
-    side,
-    etaBarHeight = 0,
-    etaData,
-    touchStartY,
-    setTouchStartY,
-    currentTouchY,
-    setCurrentTouchY,
-    isDragging,
-    clampedDragOffset,
-    drawerPeekHeight,
-    drawerFullHeight,
-    drawerAutoMaxHeight,
-    containerHeight,
     menuContent,
-    enableTouchDrag = false,
-    handleVisible = true,
-    onAutoContentHeightChange,
     showScrollToTopButton = true,
-    scrollToTopThreshold = 300,
-    safeAreaInsets = { bottom: 0, left: 0, right: 0, top: 0 }
+    scrollToTopThreshold = 300
   }, ref) => {
     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
     );
-    const handleHandleClick = () => {
-      if (side === "left") {
-        onChangeState(state === "closed" ? "full" : "closed");
-      } else {
-        if (state === "closed") {
-          onChangeState("peek");
-        } else if (state === "peek") {
-          onChangeState("full");
-        } else if (state === "auto") {
-          onChangeState("closed");
-        } else {
-          onChangeState("peek");
-        }
-      }
-    };
-    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_react2.useEffect)(() => {
-      if (state === "closed") {
-        setShowScrollTop(false);
-      } else {
-        const scrollTop = scrollContainerRef.current?.scrollTop || 0;
-        setShowScrollTop(scrollTop > scrollToTopThreshold);
-      }
-    }, [state, scrollToTopThreshold]);
-    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_react2.useEffect)(() => {
-      touchStartYRef.current = touchStartY;
-    }, [touchStartY]);
-    (0, import_react2.useEffect)(() => {
-      currentTouchYRef.current = currentTouchY;
-    }, [currentTouchY]);
-    (0, import_react2.useEffect)(() => {
-      const container = containerRef.current;
-      if (!container || side !== "bottom" || !enableTouchDrag) return;
-      const handleNativeTouchStart = (e) => {
-        const clientY = e.targetTouches[0].clientY;
-        setTouchStartY(clientY);
-        setCurrentTouchY(clientY);
-        isDraggingSheet.current = false;
-        hasDeterminedDirection.current = false;
-        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;
-        if (startY === null) return;
-        const currentY = e.targetTouches[0].clientY;
-        const deltaY = startY - currentY;
-        const scrollTop = scrollContainerRef.current ? scrollContainerRef.current.scrollTop : 0;
-        const clientHeight = scrollContainerRef.current ? scrollContainerRef.current.clientHeight : 0;
-        const scrollHeight = scrollContainerRef.current ? scrollContainerRef.current.scrollHeight : 0;
-        const isAtBottom = scrollTop + clientHeight >= scrollHeight - 1;
-        const currentState = stateRef.current;
-        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) {
-            if (Math.abs(deltaY) < CONTENT_EDGE_PULL_THRESHOLD_PX) {
-              return;
-            }
-            commitDrag();
-            hasDeterminedDirection.current = true;
-          } else if (currentState !== "full") {
-            if (deltaY > 0 && isAtBottom && pullPastBottom >= CONTENT_EDGE_PULL_THRESHOLD_PX) {
-              commitDrag();
-              hasDeterminedDirection.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 && 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 && pullPastTop >= CONTENT_EDGE_PULL_THRESHOLD_PX) {
-            commitDrag();
-            return;
-          }
-          if (deltaY > 0 && isAtBottom && currentState !== "full" && pullPastBottom >= CONTENT_EDGE_PULL_THRESHOLD_PX) {
-            commitDrag();
-            return;
-          }
-        }
-        if (isDraggingSheet.current) {
-          if (e.cancelable) {
-            e.preventDefault();
-          }
-          const parentContainer = container.parentElement;
-          if (parentContainer) {
-            const dragOffset = currentY - (dragStartYRef.current ?? currentY);
-            let localClamped = dragOffset;
-            if (currentState === "full") {
-              localClamped = Math.max(
-                0,
-                Math.min(fullPxNow - closedPxNow, dragOffset)
-              );
-            } else if (currentState === "peek") {
-              localClamped = Math.max(
-                -(fullPxNow - peekPxNow),
-                Math.min(peekPxNow - closedPxNow, dragOffset)
-              );
-            } else if (currentState === "closed") {
-              localClamped = Math.min(
-                0,
-                Math.max(-(fullPxNow - closedPxNow), dragOffset)
-              );
-            } else if (currentState === "auto") {
-              localClamped = Math.max(0, dragOffset);
-            }
-            parentContainer.style.setProperty(
-              "--drag-offset",
-              `${localClamped}px`
-            );
-          }
-        }
-      };
-      const handleNativeTouchEnd = (e) => {
-        const startY = touchStartYRef.current;
-        const currentY = currentTouchYRef.current;
-        const parentContainer = container.parentElement;
-        if (startY === null || currentY === null) {
-          if (parentContainer) {
-            parentContainer.style.setProperty("--drag-offset", "0px");
-          }
-          return;
-        }
-        if (!isDraggingSheet.current) {
-          if (isTouchOnHandle.current) {
-            handleHandleClickRef.current();
-            suppressNextClickRef.current = true;
-            setTimeout(() => {
-              suppressNextClickRef.current = false;
-            }, HANDLE_TAP_CLICK_SUPPRESSION_MS);
-          }
-          setTouchStartY(null);
-          setCurrentTouchY(null);
-          if (parentContainer) {
-            parentContainer.style.setProperty("--drag-offset", "0px");
-          }
-          return;
-        }
-        const touchEndY = e.changedTouches[0].clientY;
-        const dragStartY = dragStartYRef.current ?? startY;
-        const dragDistance = Math.abs(touchEndY - dragStartY);
-        if (dragDistance < 10) {
-          setTouchStartY(null);
-          setCurrentTouchY(null);
-          if (parentContainer) {
-            parentContainer.style.setProperty("--drag-offset", "0px");
-          }
-          return;
-        }
-        const containerH2 = containerHeight || (parentContainer ? parentContainer.getBoundingClientRect().height : window.innerHeight);
-        const fullPx2 = resolveHeightToPixels(
-          drawerFullHeight || "85%",
-          containerH2
-        );
-        const peekPx2 = resolveHeightToPixels(
-          drawerPeekHeight || "15%",
-          containerH2
-        );
-        const currentState = stateRef.current;
-        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);
-        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 {
-          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);
-        onChangeState(targetState);
-        requestAnimationFrame(() => {
-          if (parentContainer) {
-            parentContainer.style.setProperty("--drag-offset", "0px");
-          }
-        });
-      };
-      const handleNativeClickCapture = (e) => {
-        if (!suppressNextClickRef.current) return;
-        suppressNextClickRef.current = false;
-        e.preventDefault();
-        e.stopPropagation();
-      };
-      container.addEventListener("touchstart", handleNativeTouchStart, {
-        passive: true
-      });
-      container.addEventListener("touchmove", handleNativeTouchMove, {
-        passive: false
-      });
-      container.addEventListener("touchend", handleNativeTouchEnd, {
-        passive: true
-      });
-      container.addEventListener("click", handleNativeClickCapture, {
-        capture: true
-      });
-      return () => {
-        container.removeEventListener("touchstart", handleNativeTouchStart);
-        container.removeEventListener("touchmove", handleNativeTouchMove);
-        container.removeEventListener("touchend", handleNativeTouchEnd);
-        container.removeEventListener("click", handleNativeClickCapture, {
-          capture: true
-        });
-      };
-    }, [
-      side,
-      enableTouchDrag,
-      containerHeight,
-      drawerFullHeight,
-      drawerPeekHeight,
-      drawerAutoMaxHeight,
-      safeAreaInsets,
-      onChangeState,
-      setTouchStartY,
-      setCurrentTouchY,
-      autoContentPx,
-      handleVisible
-    ]);
-    const isBackdropActive = state === "full" || state === "auto";
+    const isBackdropActive = state !== "closed";
     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))";
-      }
-      if (state === "peek") {
-        return `translateY(calc(${shiftPx}px + var(--drag-offset, 0px)))`;
-      }
-      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)))`;
-    };
     return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("style", { children: `
         .no-scrollbar {
@@ -898,233 +572,113 @@ var MapDrawer = (0, import_react2.forwardRef)(
           onClick: () => onChangeState("closed")
         }
       ),
-      side === "left" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-        state === "closed" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          Button,
-          {
-            className: "absolute top-4 left-4 z-40 w-12 h-12 rounded-full bg-zinc-950/80 backdrop-blur-md border border-white/10 shadow-lg flex items-center justify-center text-white active:scale-95 transition-all cursor-pointer hover:bg-zinc-900 hover:text-white p-0!",
-            onClick: () => onChangeState("full"),
-            variant: "ghost",
-            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-              "svg",
-              {
-                fill: "none",
-                height: "24",
-                stroke: "currentColor",
-                strokeLinecap: "round",
-                strokeLinejoin: "round",
-                strokeWidth: "2",
-                viewBox: "0 0 24 24",
-                width: "24",
-                xmlns: "http://www.w3.org/2000/svg",
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "4", x2: "20", y1: "12", y2: "12" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "4", x2: "20", y1: "6", y2: "6" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "4", x2: "20", y1: "18", y2: "18" })
-                ]
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          Sheet,
-          {
-            onOpenChange: (open) => onChangeState(open ? "full" : "closed"),
-            open: state !== "closed",
-            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-              SheetContent,
-              {
-                className: "w-80 bg-zinc-950/85 backdrop-blur-md border-r border-y border-white/10 rounded-r-2xl shadow-2xl p-4 text-white flex flex-col h-full overflow-hidden",
-                portal: false,
-                side: "left",
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SheetHeader, { className: "pb-3 border-b border-white/10 mb-2 text-left", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SheetTitle, { className: "text-sm font-bold tracking-wider text-zinc-400 uppercase", children: "Menu" }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                    "div",
-                    {
-                      className: "flex-1 overflow-y-auto no-scrollbar pr-2",
-                      onScroll: handleScroll,
-                      ref: scrollContainerRef,
-                      children: menuContent ? menuContent : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex flex-col gap-1.5", children: menuItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-                        Button,
-                        {
-                          className: `flex items-center gap-3 w-full py-3 px-3.5 rounded-xl text-left cursor-pointer transition-all duration-150 justify-start hover:bg-white/5 hover:text-white active:bg-white/10 text-white ${item.disabled ? "opacity-45 cursor-not-allowed pointer-events-none" : ""}`,
-                          disabled: item.disabled,
-                          onClick: () => {
-                            if (!item.disabled) {
-                              item.onPress();
-                              onChangeState("closed");
-                            }
-                          },
-                          variant: "ghost",
-                          children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "relative flex items-center justify-center w-8 h-8 rounded-lg bg-white/5 text-zinc-300", children: [
-                              item.icon,
-                              item.badge !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "absolute -top-1 -right-1 bg-cyan-500 text-black text-[9px] font-extrabold min-w-[15px] h-3.5 rounded-full flex items-center justify-center px-1 border border-zinc-950 shadow", children: item.badge })
-                            ] }),
-                            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-sm font-medium tracking-wide flex-1", children: item.label })
-                          ]
-                        },
-                        item.id
-                      )) })
-                    }
-                  ),
-                  showScrollToTopButton && showScrollTop && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                    Button,
-                    {
-                      className: "absolute bottom-6 right-6 z-50 flex items-center justify-center w-10 h-10 rounded-full bg-cyan-500 hover:bg-cyan-400 active:scale-95 text-black hover:text-black shadow-lg shadow-cyan-500/25 transition-all duration-200 cursor-pointer p-0!",
-                      onClick: () => {
-                        scrollContainerRef.current?.scrollTo({
-                          behavior: "smooth",
-                          top: 0
-                        });
-                      },
-                      variant: "ghost",
-                      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                        "svg",
-                        {
-                          fill: "none",
-                          height: "20",
-                          stroke: "currentColor",
-                          strokeLinecap: "round",
-                          strokeLinejoin: "round",
-                          strokeWidth: "2.5",
-                          viewBox: "0 0 24 24",
-                          width: "20",
-                          xmlns: "http://www.w3.org/2000/svg",
-                          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("polyline", { points: "18 15 12 9 6 15" })
-                        }
-                      )
-                    }
-                  )
-                ]
-              }
-            )
-          }
-        )
-      ] }) : (
-        /* Bottom Sheet Panel - Hardware accelerated translateY transitions */
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-          "div",
-          {
-            className: `absolute w-full bg-zinc-950/85 backdrop-blur-md border border-white/10 rounded-t-2xl shadow-2xl flex flex-col z-40 select-none ${isDragging ? "transition-none" : "transition-transform duration-300 ease-out"}`,
-            ref: containerRef,
-            style: {
-              bottom: "0px",
-              // 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(),
-              // `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: [
-              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: () => {
-                    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" })
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-                "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"
-                  },
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                      "div",
-                      {
-                        className: "flex-1 overflow-y-auto no-scrollbar",
-                        onScroll: handleScroll,
-                        ref: scrollContainerRef,
-                        style: {
-                          paddingBottom: state === "peek" ? `${shiftPx}px` : "0px"
-                        },
-                        children: menuContent ? menuContent : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex flex-col gap-1", children: menuItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-                          Button,
-                          {
-                            className: `flex items-center gap-3 w-full py-3 px-3.5 rounded-xl text-left cursor-pointer transition-all duration-150 justify-start hover:bg-white/5 hover:text-white active:bg-white/10 text-white ${item.disabled ? "opacity-45 cursor-not-allowed pointer-events-none" : ""}`,
-                            disabled: item.disabled,
-                            onClick: () => {
-                              if (!item.disabled) {
-                                item.onPress();
-                                onChangeState("closed");
-                              }
-                            },
-                            variant: "ghost",
-                            children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "relative flex items-center justify-center w-8 h-8 rounded-lg bg-white/5 text-zinc-300", children: [
-                                item.icon,
-                                item.badge !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "absolute -top-1 -right-1 bg-cyan-500 text-black text-[9px] font-extrabold min-w-[15px] h-3.5 rounded-full flex items-center justify-center px-1 border border-zinc-950 shadow", children: item.badge })
-                              ] }),
-                              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-sm font-medium tracking-wide", children: item.label })
-                            ]
-                          },
-                          item.id
-                        )) })
-                      }
-                    ),
-                    showScrollToTopButton && showScrollTop && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      state === "closed" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        Button,
+        {
+          className: "absolute top-4 left-4 z-40 w-12 h-12 rounded-full bg-zinc-950/80 backdrop-blur-md border border-white/10 shadow-lg flex items-center justify-center text-white active:scale-95 transition-all cursor-pointer hover:bg-zinc-900 hover:text-white p-0!",
+          onClick: () => onChangeState("full"),
+          variant: "ghost",
+          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            "svg",
+            {
+              fill: "none",
+              height: "24",
+              stroke: "currentColor",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              strokeWidth: "2",
+              viewBox: "0 0 24 24",
+              width: "24",
+              xmlns: "http://www.w3.org/2000/svg",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "4", x2: "20", y1: "12", y2: "12" }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "4", x2: "20", y1: "6", y2: "6" }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "4", x2: "20", y1: "18", y2: "18" })
+              ]
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        Sheet,
+        {
+          onOpenChange: (open) => onChangeState(open ? "full" : "closed"),
+          open: state !== "closed",
+          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            SheetContent,
+            {
+              className: "w-80 bg-zinc-950/85 backdrop-blur-md border-r border-y border-white/10 rounded-r-2xl shadow-2xl p-4 text-white flex flex-col h-full overflow-hidden",
+              portal: false,
+              side: "left",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SheetHeader, { className: "pb-3 border-b border-white/10 mb-2 text-left", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SheetTitle, { className: "text-sm font-bold tracking-wider text-zinc-400 uppercase", children: "Menu" }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "div",
+                  {
+                    className: "flex-1 overflow-y-auto no-scrollbar pr-2",
+                    onScroll: handleScroll,
+                    ref: scrollContainerRef,
+                    children: menuContent ? menuContent : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex flex-col gap-1.5", children: menuItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
                       Button,
                       {
-                        className: "absolute right-6 z-50 flex items-center justify-center w-10 h-10 rounded-full bg-cyan-500 hover:bg-cyan-400 active:scale-95 text-black hover:text-black shadow-lg shadow-cyan-500/25 transition-all duration-200 cursor-pointer p-0!",
+                        className: `flex items-center gap-3 w-full py-3 px-3.5 rounded-xl text-left cursor-pointer transition-all duration-150 justify-start hover:bg-white/5 hover:text-white active:bg-white/10 text-white ${item.disabled ? "opacity-45 cursor-not-allowed pointer-events-none" : ""}`,
+                        disabled: item.disabled,
                         onClick: () => {
-                          scrollContainerRef.current?.scrollTo({
-                            behavior: "smooth",
-                            top: 0
-                          });
-                        },
-                        style: {
-                          bottom: state === "peek" ? `calc(${24 + shiftPx}px + var(--drag-offset, 0px))` : `calc(24px + var(--drag-offset, 0px))`
+                          if (!item.disabled) {
+                            item.onPress();
+                            onChangeState("closed");
+                          }
                         },
                         variant: "ghost",
-                        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                          "svg",
-                          {
-                            fill: "none",
-                            height: "20",
-                            stroke: "currentColor",
-                            strokeLinecap: "round",
-                            strokeLinejoin: "round",
-                            strokeWidth: "2.5",
-                            viewBox: "0 0 24 24",
-                            width: "20",
-                            xmlns: "http://www.w3.org/2000/svg",
-                            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("polyline", { points: "18 15 12 9 6 15" })
-                          }
-                        )
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "relative flex items-center justify-center w-8 h-8 rounded-lg bg-white/5 text-zinc-300", children: [
+                            item.icon,
+                            item.badge !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "absolute -top-1 -right-1 bg-cyan-500 text-black text-[9px] font-extrabold min-w-[15px] h-3.5 rounded-full flex items-center justify-center px-1 border border-zinc-950 shadow", children: item.badge })
+                          ] }),
+                          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-sm font-medium tracking-wide flex-1", children: item.label })
+                        ]
+                      },
+                      item.id
+                    )) })
+                  }
+                ),
+                showScrollToTopButton && showScrollTop && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  Button,
+                  {
+                    className: "absolute bottom-6 right-6 z-50 flex items-center justify-center w-10 h-10 rounded-full bg-cyan-500 hover:bg-cyan-400 active:scale-95 text-black hover:text-black shadow-lg shadow-cyan-500/25 transition-all duration-200 cursor-pointer p-0!",
+                    onClick: () => {
+                      scrollContainerRef.current?.scrollTo({
+                        behavior: "smooth",
+                        top: 0
+                      });
+                    },
+                    variant: "ghost",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      "svg",
+                      {
+                        fill: "none",
+                        height: "20",
+                        stroke: "currentColor",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        strokeWidth: "2.5",
+                        viewBox: "0 0 24 24",
+                        width: "20",
+                        xmlns: "http://www.w3.org/2000/svg",
+                        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("polyline", { points: "18 15 12 9 6 15" })
                       }
                     )
-                  ]
-                }
-              )
-            ]
-          }
-        )
+                  }
+                )
+              ]
+            }
+          )
+        }
       )
     ] });
   }
 );
+MapDrawer.displayName = "MapDrawer";
 
 // src/components/ui/card.tsx
 var React3 = __toESM(require("react"), 1);
@@ -1556,52 +1110,352 @@ var MapRightControls = ({
                 }
               )
             )
-          }
-        ) }),
-        belowControls.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex flex-col gap-2 pointer-events-auto", children: belowControls.map((control) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "relative group flex items-center", children: [
-          control.tooltip && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "absolute right-14 pointer-events-none opacity-0 scale-95 origin-right group-hover:opacity-100 group-hover:scale-100 transition-all duration-150 bg-zinc-900/95 border border-white/10 text-white text-xs px-2.5 py-1.5 rounded-lg shadow-xl whitespace-nowrap", children: control.tooltip }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-            Button,
-            {
-              className: `w-12 h-12 rounded-full bg-zinc-950/80 backdrop-blur-md border border-white/10 shadow-lg flex items-center justify-center text-white active:scale-95 transition-all cursor-pointer p-0! hover:bg-zinc-900 hover:text-white ${control.activeState ? "ring-2 ring-cyan-400 ring-offset-2 ring-offset-zinc-950" : ""}`,
-              onClick: control.onPress,
-              variant: "ghost",
-              children: control.icon
-            }
-          )
-        ] }, control.id)) })
-      ]
+          }
+        ) }),
+        belowControls.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex flex-col gap-2 pointer-events-auto", children: belowControls.map((control) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "relative group flex items-center", children: [
+          control.tooltip && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "absolute right-14 pointer-events-none opacity-0 scale-95 origin-right group-hover:opacity-100 group-hover:scale-100 transition-all duration-150 bg-zinc-900/95 border border-white/10 text-white text-xs px-2.5 py-1.5 rounded-lg shadow-xl whitespace-nowrap", children: control.tooltip }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            Button,
+            {
+              className: `w-12 h-12 rounded-full bg-zinc-950/80 backdrop-blur-md border border-white/10 shadow-lg flex items-center justify-center text-white active:scale-95 transition-all cursor-pointer p-0! hover:bg-zinc-900 hover:text-white ${control.activeState ? "ring-2 ring-cyan-400 ring-offset-2 ring-offset-zinc-950" : ""}`,
+              onClick: control.onPress,
+              variant: "ghost",
+              children: control.icon
+            }
+          )
+        ] }, control.id)) })
+      ]
+    }
+  );
+};
+
+// src/components/Map/components/MobileBottomDrawer.tsx
+var import_react3 = require("motion/react");
+var import_react4 = require("react");
+var import_react_modal_sheet = require("react-modal-sheet");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var resolveHeightToPixels = (height, containerHeight) => {
+  if (typeof height === "number") {
+    return height;
+  }
+  if (height.endsWith("%")) {
+    return parseFloat(height) / 100 * containerHeight;
+  }
+  return parseFloat(height);
+};
+var HANDLE_HEIGHT_PX = 32;
+var SHEET_TWEEN_CONFIG = {
+  duration: 0.4,
+  ease: [0.32, 0.72, 0, 1]
+};
+var SHEET_DRAG_VELOCITY_THRESHOLD = 1700;
+var MobileBottomDrawer = (0, import_react4.forwardRef)(
+  ({
+    menuItems,
+    state,
+    onChangeState,
+    drawerPeekHeight,
+    drawerFullHeight,
+    drawerAutoMaxHeight,
+    containerHeight,
+    menuContent,
+    enableTouchDrag = true,
+    handleVisible = true,
+    onAutoContentHeightChange,
+    showScrollToTopButton = true,
+    scrollToTopThreshold = 300,
+    safeAreaInsets = { bottom: 0, left: 0, right: 0, top: 0 }
+  }, ref) => {
+    const scrollRef = (0, import_react4.useRef)(null);
+    (0, import_react4.useImperativeHandle)(ref, () => scrollRef.current);
+    const headerRef = (0, import_react4.useRef)(null);
+    const contentWrapperRef = (0, import_react4.useRef)(null);
+    const [viewportHeight, setViewportHeight] = (0, import_react4.useState)(
+      () => containerHeight ?? (typeof window !== "undefined" ? window.innerHeight : 800)
+    );
+    (0, import_react4.useEffect)(() => {
+      if (containerHeight) {
+        setViewportHeight(containerHeight);
+        return;
+      }
+      if (typeof window === "undefined") return;
+      const update = () => setViewportHeight(window.innerHeight);
+      update();
+      window.addEventListener("resize", update);
+      return () => window.removeEventListener("resize", update);
+    }, [containerHeight]);
+    const [autoContentPx, setAutoContentPx] = (0, import_react4.useState)(0);
+    (0, import_react4.useEffect)(() => {
+      const contentEl = contentWrapperRef.current;
+      if (!contentEl) return;
+      const measure = () => {
+        const headerHeight = handleVisible ? headerRef.current?.offsetHeight ?? 0 : 0;
+        const px = headerHeight + contentEl.scrollHeight;
+        setAutoContentPx(px);
+        onAutoContentHeightChange?.(px);
+      };
+      measure();
+      const ro = new ResizeObserver(measure);
+      ro.observe(contentEl);
+      return () => ro.disconnect();
+    }, [handleVisible, onAutoContentHeightChange]);
+    const closedPx = (handleVisible ? HANDLE_HEIGHT_PX : 0) + safeAreaInsets.bottom;
+    const peekPx = resolveHeightToPixels(
+      drawerPeekHeight ?? "15%",
+      viewportHeight
+    );
+    const autoMaxPx = resolveHeightToPixels(
+      drawerAutoMaxHeight ?? "100%",
+      viewportHeight
+    );
+    const autoPx = Math.min(autoMaxPx, Math.max(autoContentPx, closedPx + 1));
+    const { snapPoints, snapLabels, backdropOutput } = (0, import_react4.useMemo)(() => {
+      const normalize = (raw) => raw > 0 && raw <= 1 ? raw * viewportHeight : raw;
+      const unsorted = [
+        { label: "closed", raw: 0 },
+        { label: "closed", raw: closedPx },
+        { label: "peek", raw: peekPx },
+        { label: "auto", raw: autoPx },
+        { label: "full", raw: 1 }
+      ];
+      const entries = unsorted.sort(
+        (a, b) => normalize(a.raw) - normalize(b.raw)
+      );
+      const deduped = [];
+      for (const entry of entries) {
+        const prev = deduped[deduped.length - 1];
+        if (prev && Math.abs(normalize(prev.raw) - normalize(entry.raw)) < 0.5) {
+          deduped[deduped.length - 1] = entry;
+          continue;
+        }
+        deduped.push(entry);
+      }
+      return {
+        backdropOutput: deduped.map(
+          (d) => d.label === "full" || d.label === "auto" ? 1 : 0
+        ),
+        snapLabels: deduped.map((d) => d.label),
+        snapPoints: deduped.map((d) => d.raw)
+      };
+    }, [closedPx, peekPx, autoPx, viewportHeight]);
+    const currentIndex = Math.max(0, snapLabels.lastIndexOf(state));
+    const sheetRef = (0, import_react4.useRef)(null);
+    (0, import_react4.useEffect)(() => {
+      let cancelled = false;
+      let attempts = 0;
+      const trySnap = () => {
+        if (cancelled) return;
+        const ref2 = sheetRef.current;
+        if (ref2 && ref2.snapPoints.length > 0) {
+          ref2.snapTo(currentIndex);
+          return;
+        }
+        attempts += 1;
+        if (attempts > 60) return;
+        requestAnimationFrame(trySnap);
+      };
+      trySnap();
+      return () => {
+        cancelled = true;
+      };
+    }, [currentIndex]);
+    const handleSnap = (0, import_react4.useCallback)(
+      (index) => {
+        const label = snapLabels[index] ?? "closed";
+        if (label !== state) onChangeState(label);
+      },
+      [snapLabels, state, onChangeState]
+    );
+    const handleHandleClick = () => {
+      if (state === "closed") {
+        onChangeState("peek");
+      } else if (state === "peek") {
+        onChangeState("full");
+      } else if (state === "auto") {
+        onChangeState("closed");
+      } else {
+        onChangeState("peek");
+      }
+    };
+    const [showScrollTop, setShowScrollTop] = (0, import_react4.useState)(false);
+    (0, import_react4.useEffect)(() => {
+      const el = scrollRef.current;
+      if (!el) return;
+      const onScroll = () => {
+        setShowScrollTop(
+          state !== "closed" && el.scrollTop > scrollToTopThreshold
+        );
+      };
+      el.addEventListener("scroll", onScroll);
+      return () => el.removeEventListener("scroll", onScroll);
+    }, [state, scrollToTopThreshold]);
+    (0, import_react4.useEffect)(() => {
+      if (state === "closed") setShowScrollTop(false);
+    }, [state]);
+    const dragDisabled = !enableTouchDrag;
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("style", { children: `
+          .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
+          .no-scrollbar::-webkit-scrollbar { display: none; }
+        ` }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+        import_react_modal_sheet.Sheet,
+        {
+          disableDismiss: true,
+          disableDrag: dragDisabled,
+          dragVelocityThreshold: SHEET_DRAG_VELOCITY_THRESHOLD,
+          initialSnap: currentIndex,
+          isOpen: true,
+          onClose: () => onChangeState("closed"),
+          onSnap: handleSnap,
+          ref: sheetRef,
+          snapPoints,
+          tweenConfig: SHEET_TWEEN_CONFIG,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+              import_react_modal_sheet.Sheet.Container,
+              {
+                className: "!bg-zinc-950/85 !backdrop-blur-md !border !border-white/10 !border-b-0 !rounded-t-2xl !shadow-2xl ",
+                style: { paddingBottom: safeAreaInsets.bottom },
+                children: [
+                  handleVisible && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                    import_react_modal_sheet.Sheet.Header,
+                    {
+                      className: "!bg-transparent cursor-pointer hover:!bg-white/5 transition-colors",
+                      onClick: handleHandleClick,
+                      ref: headerRef
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+                    import_react_modal_sheet.Sheet.Content,
+                    {
+                      className: "!bg-transparent",
+                      disableDrag: (info) => dragDisabled || info.scrollPosition === "middle",
+                      disableScroll: (info) => !dragDisabled && info.currentSnap !== snapPoints.length - 1,
+                      scrollClassName: "no-scrollbar",
+                      scrollRef,
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "px-4 pb-4 pt-2 relative", ref: contentWrapperRef, children: menuContent ? menuContent : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex flex-col gap-1", children: menuItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+                          Button,
+                          {
+                            className: `flex items-center gap-3 w-full py-3 px-3.5 rounded-xl text-left cursor-pointer transition-all duration-150 justify-start hover:bg-white/5 hover:text-white active:bg-white/10 text-white ${item.disabled ? "opacity-45 cursor-not-allowed pointer-events-none" : ""}`,
+                            disabled: item.disabled,
+                            onClick: () => {
+                              if (!item.disabled) {
+                                item.onPress();
+                                onChangeState("closed");
+                              }
+                            },
+                            variant: "ghost",
+                            children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "relative flex items-center justify-center w-8 h-8 rounded-lg bg-white/5 text-zinc-300", children: [
+                                item.icon,
+                                item.badge !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "absolute -top-1 -right-1 bg-cyan-500 text-black text-[9px] font-extrabold min-w-[15px] h-3.5 rounded-full flex items-center justify-center px-1 border border-zinc-950 shadow", children: item.badge })
+                              ] }),
+                              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-sm font-medium tracking-wide", children: item.label })
+                            ]
+                          },
+                          item.id
+                        )) }) }),
+                        showScrollToTopButton && showScrollTop && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                          Button,
+                          {
+                            className: "absolute bottom-4 right-6 z-50 flex items-center justify-center w-10 h-10 rounded-full bg-cyan-500 hover:bg-cyan-400 active:scale-95 text-black hover:text-black shadow-lg shadow-cyan-500/25 transition-all duration-200 cursor-pointer p-0!",
+                            onClick: () => {
+                              scrollRef.current?.scrollTo({ behavior: "smooth", top: 0 });
+                            },
+                            variant: "ghost",
+                            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                              "svg",
+                              {
+                                fill: "none",
+                                height: "20",
+                                stroke: "currentColor",
+                                strokeLinecap: "round",
+                                strokeLinejoin: "round",
+                                strokeWidth: "2.5",
+                                viewBox: "0 0 24 24",
+                                width: "20",
+                                xmlns: "http://www.w3.org/2000/svg",
+                                children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("polyline", { points: "18 15 12 9 6 15" })
+                              }
+                            )
+                          }
+                        )
+                      ]
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              DrawerBackdrop,
+              {
+                active: state === "full" || state === "auto",
+                onTap: () => onChangeState("closed"),
+                output: backdropOutput
+              }
+            )
+          ]
+        }
+      )
+    ] });
+  }
+);
+MobileBottomDrawer.displayName = "MobileBottomDrawer";
+function DrawerBackdrop({
+  active,
+  output,
+  onTap
+}) {
+  const { y, snapPoints } = import_react_modal_sheet.Sheet.useContext();
+  const opacity = (0, import_react3.useTransform)(y, (value) => {
+    if (snapPoints.length === 0 || output.length !== snapPoints.length) {
+      return 0;
+    }
+    const mix = (0, import_react3.interpolate)(
+      snapPoints.map((point) => point.snapValueY),
+      output
+    );
+    return mix(value) * 0.45;
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    import_react_modal_sheet.Sheet.Backdrop,
+    {
+      className: "!bg-black !backdrop-blur-[1px]",
+      onTap: active ? onTap : void 0,
+      style: { opacity }
     }
   );
-};
+}
 
 // src/components/Map/MapContext.tsx
-var import_react3 = require("react");
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var MapControlsContext = (0, import_react3.createContext)(
+var import_react5 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var MapControlsContext = (0, import_react5.createContext)(
   null
 );
 var SDKMapProvider = ({
   children
 }) => {
-  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) => {
+  const [isFollowing, setIsFollowing] = (0, import_react5.useState)(true);
+  const [bearing, setBearingState] = (0, import_react5.useState)(0);
+  const [pitch, setPitchState] = (0, import_react5.useState)(0);
+  const [drawerState, setDrawerStateInternal] = (0, import_react5.useState)("closed");
+  const drawerContentRef = (0, import_react5.useRef)(null);
+  const setDrawerState = (0, import_react5.useCallback)((val) => {
     setDrawerStateInternal(val);
   }, []);
-  const [drawerHandleVisible, setDrawerHandleVisibleState] = (0, import_react3.useState)(true);
-  const setDrawerHandleVisible = (0, import_react3.useCallback)((val) => {
+  const [drawerHandleVisible, setDrawerHandleVisibleState] = (0, import_react5.useState)(true);
+  const setDrawerHandleVisible = (0, import_react5.useCallback)((val) => {
     setDrawerHandleVisibleState((prev) => prev === val ? prev : val);
   }, []);
-  const [hasControls, setHasControlsState] = (0, import_react3.useState)(false);
-  const setHasControls = (0, import_react3.useCallback)((val) => {
+  const [hasControls, setHasControlsState] = (0, import_react5.useState)(false);
+  const setHasControls = (0, import_react5.useCallback)((val) => {
     setHasControlsState((prev) => prev === val ? prev : val);
   }, []);
-  const [etaData, setEtaDataState] = (0, import_react3.useState)(void 0);
-  const setEtaData = (0, import_react3.useCallback)((newData) => {
+  const [etaData, setEtaDataState] = (0, import_react5.useState)(void 0);
+  const setEtaData = (0, import_react5.useCallback)((newData) => {
     setEtaDataState((prev) => {
       if (!prev && !newData) return prev;
       if (!prev || !newData) return newData;
@@ -1611,29 +1465,29 @@ var SDKMapProvider = ({
       return newData;
     });
   }, []);
-  const [insets, setInsetsState] = (0, import_react3.useState)({
+  const [insets, setInsetsState] = (0, import_react5.useState)({
     bottom: 0,
     left: 0,
     right: 0,
     top: 0
   });
-  const setInsets = (0, import_react3.useCallback)((newInsets) => {
+  const setInsets = (0, import_react5.useCallback)((newInsets) => {
     setInsetsState((prev) => ({ ...prev, ...newInsets }));
   }, []);
-  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) => {
+  const centerCallbackRef = (0, import_react5.useRef)(null);
+  const resetBearingCallbackRef = (0, import_react5.useRef)(null);
+  const flyToCallbackRef = (0, import_react5.useRef)(null);
+  const centerOnUser = (0, import_react5.useCallback)((params) => {
     if (centerCallbackRef.current) {
       centerCallbackRef.current(params);
     }
   }, []);
-  const resetBearing = (0, import_react3.useCallback)((params) => {
+  const resetBearing = (0, import_react5.useCallback)((params) => {
     if (resetBearingCallbackRef.current) {
       resetBearingCallbackRef.current(params);
     }
   }, []);
-  const flyTo = (0, import_react3.useCallback)(
+  const flyTo = (0, import_react5.useCallback)(
     (coords, params) => {
       if (flyToCallbackRef.current) {
         flyToCallbackRef.current(coords, params);
@@ -1641,31 +1495,31 @@ var SDKMapProvider = ({
     },
     []
   );
-  const _registerCenterCallback = (0, import_react3.useCallback)(
+  const _registerCenterCallback = (0, import_react5.useCallback)(
     (cb) => {
       centerCallbackRef.current = cb;
     },
     []
   );
-  const _registerResetBearingCallback = (0, import_react3.useCallback)(
+  const _registerResetBearingCallback = (0, import_react5.useCallback)(
     (cb) => {
       resetBearingCallbackRef.current = cb;
     },
     []
   );
-  const _registerFlyToCallback = (0, import_react3.useCallback)(
+  const _registerFlyToCallback = (0, import_react5.useCallback)(
     (cb) => {
       flyToCallbackRef.current = cb;
     },
     []
   );
-  const setBearing = (0, import_react3.useCallback)((b) => {
+  const setBearing = (0, import_react5.useCallback)((b) => {
     setBearingState(b);
   }, []);
-  const setPitch = (0, import_react3.useCallback)((p) => {
+  const setPitch = (0, import_react5.useCallback)((p) => {
     setPitchState(p);
   }, []);
-  const contextValue = (0, import_react3.useMemo)(
+  const contextValue = (0, import_react5.useMemo)(
     () => ({
       _registerCenterCallback,
       _registerFlyToCallback,
@@ -1715,10 +1569,10 @@ var SDKMapProvider = ({
       setInsets
     ]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MapControlsContext.Provider, { value: contextValue, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(MapControlsContext.Provider, { value: contextValue, children });
 };
 var useMapControls = () => {
-  const context = (0, import_react3.useContext)(MapControlsContext);
+  const context = (0, import_react5.useContext)(MapControlsContext);
   if (!context) {
     throw new Error("useMapControls must be used within a MapControlsProvider");
   }
@@ -1726,8 +1580,8 @@ var useMapControls = () => {
 };
 
 // src/components/Map/components/MapControls.tsx
-var import_react4 = require("react");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_react6 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var resolveHeightToPixels2 = (height, containerHeight) => {
   if (typeof height === "number") {
     return height;
@@ -1763,9 +1617,9 @@ var MapControls = ({
   controlsBottomOffset = 0,
   isInternal = false
 }) => {
-  const mapContext = (0, import_react4.useContext)(MapControlsContext);
+  const mapContext = (0, import_react6.useContext)(MapControlsContext);
   const contextRef = mapContext?.drawerContentRef;
-  const mergedRef = (0, import_react4.useCallback)(
+  const mergedRef = (0, import_react6.useCallback)(
     (node) => {
       if (drawerContentRef) {
         if (typeof drawerContentRef === "function") {
@@ -1780,11 +1634,11 @@ var MapControls = ({
     },
     [drawerContentRef, contextRef]
   );
-  const [localDrawerState, setLocalDrawerState] = (0, import_react4.useState)(
+  const [localDrawerState, setLocalDrawerState] = (0, import_react6.useState)(
     defaultState ?? "closed"
   );
   const drawerState = mapContext ? mapContext.drawerState : localDrawerState;
-  const setDrawerState = (0, import_react4.useCallback)(
+  const setDrawerState = (0, import_react6.useCallback)(
     (state) => {
       if (mapContext) {
         mapContext.setDrawerState(state);
@@ -1794,15 +1648,15 @@ var MapControls = ({
     },
     [mapContext]
   );
-  (0, import_react4.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (defaultState && mapContext) {
       mapContext.setDrawerState(defaultState);
     }
   }, []);
-  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 [side, setSide] = (0, import_react6.useState)("left");
+  const containerRef = (0, import_react6.useRef)(null);
+  const [mapHeight, setMapHeight] = (0, import_react6.useState)(600);
+  (0, import_react6.useEffect)(() => {
     const parent = containerRef.current?.parentElement;
     if (!parent) return;
     const updateHeight = () => {
@@ -1816,7 +1670,7 @@ var MapControls = ({
     };
   }, []);
   const setHasControls = mapContext?.setHasControls;
-  (0, import_react4.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (setHasControls && !isInternal) {
       setHasControls(true);
       return () => setHasControls(false);
@@ -1840,10 +1694,8 @@ var MapControls = ({
   };
   const mapPitch = mapContext ? mapContext.pitch : 0;
   const resolvedEtaData = etaData !== void 0 ? etaData : mapContext?.etaData;
-  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)(() => {
+  const [autoContentPx, setAutoContentPx] = (0, import_react6.useState)(0);
+  (0, import_react6.useEffect)(() => {
     if (typeof window === "undefined") return;
     const checkLayout = () => {
       if (drawerSide) {
@@ -1860,8 +1712,8 @@ var MapControls = ({
     window.addEventListener("resize", checkLayout);
     return () => window.removeEventListener("resize", checkLayout);
   }, [drawerSide]);
-  const isDragging = touchStartY !== null && currentTouchY !== null;
-  const dragOffset = isDragging ? currentTouchY - touchStartY : 0;
+  const isDragging = false;
+  const clampedDragOffset = 0;
   const fullPx = resolveHeightToPixels2(drawerFullHeight || "85%", mapHeight);
   const peekPx = resolveHeightToPixels2(drawerPeekHeight || "15%", mapHeight);
   const autoMaxPx = resolveHeightToPixels2(
@@ -1871,22 +1723,6 @@ var MapControls = ({
   const autoPx = Math.min(autoMaxPx, autoContentPx);
   const bottomInset = mapContext?.insets.bottom || 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));
-  } else if (drawerState === "peek") {
-    clampedDragOffset = Math.max(
-      -(fullPx - peekPx),
-      // up to full
-      Math.min(peekPx - closedPx, dragOffset)
-      // down to closed
-    );
-  } else if (drawerState === "closed") {
-    clampedDragOffset = Math.min(0, Math.max(-(fullPx - closedPx), dragOffset));
-  } else if (drawerState === "auto") {
-    clampedDragOffset = Math.max(0, dragOffset);
-  }
   let baseHeight = handleVisible ? 32 : 0;
   if (drawerState === "peek") {
     baseHeight = peekPx;
@@ -1895,7 +1731,7 @@ var MapControls = ({
   } else if (drawerState === "auto") {
     baseHeight = autoPx;
   }
-  const currentDrawerHeight = baseHeight - clampedDragOffset;
+  const currentDrawerHeight = baseHeight;
   const startFadeHeight = peekPx + 20;
   const endFadeHeight = peekPx + (fullPx - peekPx) * 0.35;
   let etaOpacity = 1;
@@ -1915,22 +1751,17 @@ var MapControls = ({
     etaOpacity = drawerState === "full" ? 0 : 1;
     etaBottomStyle = `calc(1rem + ${bottomInset}px)`;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ref: containerRef, style: { display: "none" } }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-      MapDrawer,
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { ref: containerRef, style: { display: "none" } }),
+    side === "bottom" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      MobileBottomDrawer,
       {
-        clampedDragOffset,
         containerHeight: mapHeight,
-        currentTouchY,
         drawerAutoMaxHeight,
         drawerFullHeight,
         drawerPeekHeight,
         enableTouchDrag,
-        etaBarHeight,
-        etaData: resolvedEtaData,
         handleVisible,
-        isDragging,
         menuContent: children || menuContent,
         menuItems,
         onAutoContentHeightChange: setAutoContentPx,
@@ -1938,15 +1769,22 @@ var MapControls = ({
         ref: mergedRef,
         safeAreaInsets: mapContext?.insets,
         scrollToTopThreshold,
-        setCurrentTouchY,
-        setTouchStartY,
         showScrollToTopButton,
-        side,
-        state: drawerState,
-        touchStartY
+        state: drawerState
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      MapDrawer,
+      {
+        menuContent: children || menuContent,
+        menuItems,
+        onChangeState: setDrawerState,
+        ref: mergedRef,
+        scrollToTopThreshold,
+        showScrollToTopButton,
+        state: drawerState
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       MapRightControls,
       {
         bottomOffset: controlsBottomOffset,
@@ -1969,7 +1807,7 @@ var MapControls = ({
         side
       }
     ),
-    resolvedEtaData && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    resolvedEtaData && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       MapEtaPanel,
       {
         etaData: resolvedEtaData,
@@ -1987,10 +1825,10 @@ var MapControls = ({
 };
 
 // src/components/Map/components/MapMenu.tsx
-var import_react5 = require("react");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_react7 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var MapMenu = ({ children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex flex-col gap-1.5", children });
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex flex-col gap-1.5", children });
 };
 var MapMenuItem = ({
   id,
@@ -2001,7 +1839,7 @@ var MapMenuItem = ({
   disabled = false,
   children
 }) => {
-  const context = (0, import_react5.useContext)(MapControlsContext);
+  const context = (0, import_react7.useContext)(MapControlsContext);
   const handleClick = (e) => {
     if (disabled) return;
     if (onPress) onPress();
@@ -2009,7 +1847,7 @@ var MapMenuItem = ({
       context.setDrawerState("closed");
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     "button",
     {
       className: `flex items-center gap-3 w-full py-3 px-3.5 rounded-xl text-left cursor-pointer transition-all duration-150 ${disabled ? "opacity-45 cursor-not-allowed pointer-events-none" : "hover:bg-white/5 active:bg-white/10 text-white"}`,
@@ -2017,12 +1855,12 @@ var MapMenuItem = ({
       onClick: handleClick,
       type: "button",
       children: [
-        icon && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "relative flex items-center justify-center w-8 h-8 rounded-lg bg-white/5 text-zinc-300", children: [
+        icon && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "relative flex items-center justify-center w-8 h-8 rounded-lg bg-white/5 text-zinc-300", children: [
           icon,
-          badge !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "absolute -top-1 -right-1 bg-cyan-500 text-black text-[9px] font-extrabold min-w-[15px] h-3.5 rounded-full flex items-center justify-center px-1 border border-zinc-950 shadow", children: badge })
+          badge !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "absolute -top-1 -right-1 bg-cyan-500 text-black text-[9px] font-extrabold min-w-[15px] h-3.5 rounded-full flex items-center justify-center px-1 border border-zinc-950 shadow", children: badge })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex-1 flex flex-col justify-center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-sm font-medium tracking-wide flex-1", children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex-1 flex flex-col justify-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-sm font-medium tracking-wide flex-1", children: label }),
           children
         ] })
       ]
@@ -2036,7 +1874,7 @@ var MapMenuTitle = ({
   showDivider = true,
   className = ""
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     "div",
     {
       className: `flex items-center justify-between pb-3 first:mt-0 px-3.5 ${className} ${showDivider ? "border-b border-white/10 mb-2 mt-4" : ""}`,
@@ -2048,14 +1886,14 @@ MapMenuTitle.displayName = "MapMenuTitle";
 var MapMenuDivider = ({
   className = ""
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `h-[1px] bg-white/10 my-3 mx-3.5 ${className}` });
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: `h-[1px] bg-white/10 my-3 mx-3.5 ${className}` });
 };
 MapMenuDivider.displayName = "MapMenuDivider";
 var MapMenuFooter = ({
   children,
   className = ""
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     "div",
     {
       className: `mt-auto pt-4 border-t border-white/10 px-3.5 text-xs text-zinc-500 font-medium ${className}`,
@@ -2083,122 +1921,149 @@ var GlobalEvent = /* @__PURE__ */ ((GlobalEvent2) => {
 })(GlobalEvent || {});
 
 // src/components/Map/hooks/useUserLocation.ts
-var import_react6 = require("react");
+var import_react8 = require("react");
 var LERP_FACTOR = 0.12;
-var useUserLocation = () => {
-  const [locationState, setLocationState] = (0, import_react6.useState)({
-    accuracy: null,
-    coords: null,
-    heading: null
-  });
-  const targetRef = (0, import_react6.useRef)({
-    accuracy: null,
-    coords: null,
-    heading: null
-  });
-  const currentRef = (0, import_react6.useRef)({
-    accuracy: null,
-    coords: null,
-    heading: null
-  });
-  const mapPayload = (0, import_react6.useCallback)((payload) => {
-    const coords = payload.location?.coords || payload.coords;
-    const headingData = payload.heading;
-    const newCoords = coords ? [coords.longitude, coords.latitude] : null;
-    let heading = null;
-    if (headingData?.trueHeading !== void 0 && headingData.trueHeading >= 0) {
-      heading = headingData.trueHeading;
-    } else if (headingData?.magneticHeading !== void 0 && headingData.magneticHeading >= 0) {
-      heading = headingData.magneticHeading;
-    } else if (headingData?.heading !== null && headingData?.heading >= 0) {
-      heading = headingData.heading;
-    }
-    return {
-      accuracy: coords?.accuracy || null,
-      coords: newCoords,
-      heading
-    };
-  }, []);
-  (0, import_react6.useEffect)(() => {
-    let rafId;
-    const animate = () => {
-      let changed = false;
-      if (targetRef.current.coords) {
-        if (!currentRef.current.coords) {
-          currentRef.current.coords = [...targetRef.current.coords];
-          changed = true;
-        } else {
-          const [tLng, tLat] = targetRef.current.coords;
-          const [cLng, cLat] = currentRef.current.coords;
-          const nLng = cLng + (tLng - cLng) * LERP_FACTOR;
-          const nLat = cLat + (tLat - cLat) * LERP_FACTOR;
-          if (Math.abs(nLng - cLng) > 1e-7 || Math.abs(nLat - cLat) > 1e-7) {
-            currentRef.current.coords = [nLng, nLat];
-            changed = true;
-          }
-        }
-      }
-      if (targetRef.current.heading !== null) {
-        if (currentRef.current.heading === null) {
-          currentRef.current.heading = targetRef.current.heading;
-          changed = true;
-        } else {
-          const target = targetRef.current.heading;
-          const current = currentRef.current.heading;
-          let delta = target - current;
-          if (delta > 180) delta -= 360;
-          if (delta < -180) delta += 360;
-          const nHeading = current + delta * LERP_FACTOR;
-          const normalized = (nHeading % 360 + 360) % 360;
-          if (Math.abs(delta) > 0.1) {
-            currentRef.current.heading = normalized;
-            changed = true;
-          }
-        }
-      }
-      if (changed) {
-        setLocationState({
-          accuracy: targetRef.current.accuracy,
-          coords: currentRef.current.coords ? [...currentRef.current.coords] : null,
-          heading: currentRef.current.heading
-        });
-      }
-      rafId = requestAnimationFrame(animate);
-    };
-    rafId = requestAnimationFrame(animate);
-    sdk.location.getCurrentPosition().then((data) => {
-      const payload = mapPayload(data);
-      targetRef.current = payload;
-    }).catch((e) => console.warn("Initial location fetch failed", e));
-    const unsubscribeStream = sdk.on(
-      "LOCATION_STREAM_UPDATE" /* LOCATION_STREAM_UPDATE */,
-      (payload) => {
-        targetRef.current = mapPayload(payload);
+var EMPTY_STATE = {
+  accuracy: null,
+  coords: null,
+  heading: null
+};
+function mapPayload(payload) {
+  const coords = payload.location?.coords || payload.coords;
+  const headingData = payload.heading;
+  const newCoords = coords ? [coords.longitude, coords.latitude] : null;
+  let heading = null;
+  if (headingData?.trueHeading !== void 0 && headingData.trueHeading >= 0) {
+    heading = headingData.trueHeading;
+  } else if (headingData?.magneticHeading !== void 0 && headingData.magneticHeading >= 0) {
+    heading = headingData.magneticHeading;
+  } else if (headingData?.heading !== null && headingData?.heading >= 0) {
+    heading = headingData.heading;
+  }
+  return {
+    accuracy: coords?.accuracy || null,
+    coords: newCoords,
+    heading
+  };
+}
+var refCount = 0;
+var generation = 0;
+var subscribers = /* @__PURE__ */ new Set();
+var targetState = { ...EMPTY_STATE };
+var currentInterpolated = { coords: null, heading: null };
+var rafId = null;
+var unsubscribeStream = null;
+var unsubscribeLegacy = null;
+function getSnapshot() {
+  return {
+    accuracy: targetState.accuracy,
+    coords: currentInterpolated.coords ? [...currentInterpolated.coords] : null,
+    heading: currentInterpolated.heading
+  };
+}
+function notify() {
+  const snapshot = getSnapshot();
+  for (const callback of subscribers) callback(snapshot);
+}
+function animate() {
+  let changed = false;
+  if (targetState.coords) {
+    if (!currentInterpolated.coords) {
+      currentInterpolated.coords = [...targetState.coords];
+      changed = true;
+    } else {
+      const [tLng, tLat] = targetState.coords;
+      const [cLng, cLat] = currentInterpolated.coords;
+      const nLng = cLng + (tLng - cLng) * LERP_FACTOR;
+      const nLat = cLat + (tLat - cLat) * LERP_FACTOR;
+      if (Math.abs(nLng - cLng) > 1e-7 || Math.abs(nLat - cLat) > 1e-7) {
+        currentInterpolated.coords = [nLng, nLat];
+        changed = true;
       }
-    );
-    const unsubscribeLegacy = sdk.on(
-      "LOCATION_UPDATE" /* LOCATION_UPDATE */,
-      (payload) => {
-        targetRef.current = mapPayload(payload);
+    }
+  }
+  if (targetState.heading !== null) {
+    if (currentInterpolated.heading === null) {
+      currentInterpolated.heading = targetState.heading;
+      changed = true;
+    } else {
+      const target = targetState.heading;
+      const current = currentInterpolated.heading;
+      let delta = target - current;
+      if (delta > 180) delta -= 360;
+      if (delta < -180) delta += 360;
+      const nHeading = current + delta * LERP_FACTOR;
+      const normalized = (nHeading % 360 + 360) % 360;
+      if (Math.abs(delta) > 0.1) {
+        currentInterpolated.heading = normalized;
+        changed = true;
       }
-    );
-    sdk.location.startStream({
-      distanceFilter: 1,
-      headingThreshold: 2
-    }).catch((e) => console.warn("Failed to start location stream", e));
+    }
+  }
+  if (changed) notify();
+  rafId = requestAnimationFrame(animate);
+}
+function startSharedStream() {
+  rafId = requestAnimationFrame(animate);
+  generation++;
+  const thisGeneration = generation;
+  sdk.location.getCurrentPosition().then((data) => {
+    if (thisGeneration !== generation) return;
+    targetState = mapPayload(data);
+  }).catch((e) => console.warn("Initial location fetch failed", e));
+  unsubscribeStream = sdk.on(
+    "LOCATION_STREAM_UPDATE" /* LOCATION_STREAM_UPDATE */,
+    (payload) => {
+      targetState = mapPayload(payload);
+    }
+  );
+  unsubscribeLegacy = sdk.on(
+    "LOCATION_UPDATE" /* LOCATION_UPDATE */,
+    (payload) => {
+      targetState = mapPayload(payload);
+    }
+  );
+  sdk.location.startStream({
+    distanceFilter: 1,
+    headingThreshold: 2
+  }).catch((e) => console.warn("Failed to start location stream", e));
+}
+function stopSharedStream() {
+  generation++;
+  if (rafId !== null) cancelAnimationFrame(rafId);
+  rafId = null;
+  unsubscribeStream?.();
+  unsubscribeLegacy?.();
+  unsubscribeStream = null;
+  unsubscribeLegacy = null;
+  sdk.location.stopStream().catch(() => {
+  });
+  targetState = { ...EMPTY_STATE };
+  currentInterpolated = { coords: null, heading: null };
+}
+var useUserLocation = () => {
+  const [locationState, setLocationState] = (0, import_react8.useState)(getSnapshot);
+  (0, import_react8.useEffect)(() => {
+    refCount++;
+    if (refCount === 1) {
+      startSharedStream();
+    } else {
+      setLocationState(getSnapshot());
+    }
+    subscribers.add(setLocationState);
     return () => {
-      cancelAnimationFrame(rafId);
-      unsubscribeStream();
-      unsubscribeLegacy();
-      sdk.location.stopStream().catch(() => {
-      });
+      subscribers.delete(setLocationState);
+      refCount--;
+      if (refCount === 0) {
+        stopSharedStream();
+      }
     };
-  }, [mapPayload]);
+  }, []);
   return locationState;
 };
 
 // src/components/Map/hooks/useLiveRouting.ts
-var import_react7 = require("react");
+var import_react9 = require("react");
 var useLiveRouting = ({
   origin: manualOrigin,
   destination,
@@ -2207,19 +2072,19 @@ var useLiveRouting = ({
   enabled = true,
   initialMode = "preview"
 }) => {
-  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 [route, setRoute] = (0, import_react9.useState)(null);
+  const [totalDistance, setTotalDistance] = (0, import_react9.useState)(null);
+  const [isCalculating, setIsCalculating] = (0, import_react9.useState)(false);
+  const [error, setError] = (0, import_react9.useState)(null);
+  const [mode, setMode] = (0, import_react9.useState)(initialMode);
   const userLocationState = useUserLocation();
   const calculationOrigin = manualOrigin || userLocationState.coords;
   const trackingLocation = userLocationState.coords || manualOrigin;
-  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)(
+  const lastCalcOrigin = (0, import_react9.useRef)(null);
+  const lastCalcDest = (0, import_react9.useRef)(null);
+  const isRequestInProgress = (0, import_react9.useRef)(false);
+  const lastResetDestKey = (0, import_react9.useRef)(null);
+  const getDistance = (0, import_react9.useCallback)(
     (p1, p2) => {
       const R = 6371e3;
       const \u03C61 = p1[1] * Math.PI / 180;
@@ -2232,7 +2097,7 @@ var useLiveRouting = ({
     },
     []
   );
-  const currentDistanceMeters = (0, import_react7.useMemo)(() => {
+  const currentDistanceMeters = (0, import_react9.useMemo)(() => {
     if (!trackingLocation || !route || route.geometry.coordinates.length < 2) {
       if (trackingLocation && destination) {
         return getDistance(trackingLocation, destination);
@@ -2259,7 +2124,7 @@ var useLiveRouting = ({
     }
     return dist;
   }, [trackingLocation, route, destination, getDistance]);
-  const calculate = (0, import_react7.useCallback)(
+  const calculate = (0, import_react9.useCallback)(
     async (origin, dest, isNewDest) => {
       if (isRequestInProgress.current) return;
       isRequestInProgress.current = true;
@@ -2294,12 +2159,12 @@ var useLiveRouting = ({
     },
     [profile, getDistance]
   );
-  (0, import_react7.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (initialMode === "navigation") {
       setMode("navigation");
     }
   }, [initialMode]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (!enabled || !destination || !calculationOrigin) {
       if (!enabled || !destination) {
         setRoute(null);
@@ -2350,10 +2215,10 @@ var useLiveRouting = ({
   };
 };
 var useRoute = (origin, destination, profile = "driving") => {
-  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)(() => {
+  const [route, setRoute] = (0, import_react9.useState)(null);
+  const [isCalculating, setIsCalculating] = (0, import_react9.useState)(false);
+  const [error, setError] = (0, import_react9.useState)(null);
+  (0, import_react9.useEffect)(() => {
     if (!origin || !destination) {
       setRoute(null);
       return;
@@ -2380,12 +2245,12 @@ var useRoute = (origin, destination, profile = "driving") => {
 };
 
 // src/components/Map/hooks/useJourney.ts
-var import_react8 = require("react");
+var import_react10 = 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 [progNav, setProgNav] = (0, import_react10.useState)(null);
+  const [isAborted, setIsAborted] = (0, import_react10.useState)(false);
+  (0, import_react10.useEffect)(() => {
     const unsubCreate = sdk.on("SDK_NAVIGATION_CREATE", (payload) => {
       setIsAborted(false);
       setProgNav(payload);
@@ -2413,17 +2278,17 @@ var useJourney = (options = {}) => {
     profile: effectiveOptions?.profile || "driving",
     recalculateThreshold: effectiveOptions?.recalculateThreshold || 50
   });
-  const prevDest = (0, import_react8.useRef)(null);
+  const prevDest = (0, import_react10.useRef)(null);
   const currentDest = effectiveOptions?.destination;
-  (0, import_react8.useEffect)(() => {
+  (0, import_react10.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);
+  const onModeChangeRef = (0, import_react10.useRef)(onModeChange);
   onModeChangeRef.current = onModeChange;
-  (0, import_react8.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     onModeChangeRef.current?.(internalNav.mode);
   }, [internalNav.mode]);
   const isActive = !isAborted && !!effectiveOptions?.destination;
@@ -2445,13 +2310,13 @@ var useJourney = (options = {}) => {
       (totalDistanceMeters - remainingMeters) / totalDistanceMeters * 100
     )
   ) : 0;
-  const cancel = (0, import_react8.useCallback)(() => {
+  const cancel = (0, import_react10.useCallback)(() => {
     setIsAborted(true);
     setProgNav(null);
     sdk.navigation.abort();
     if (onAbort) onAbort();
   }, [onAbort]);
-  const start = (0, import_react8.useCallback)(() => {
+  const start = (0, import_react10.useCallback)(() => {
     sdk.navigation.start();
     internalNav.start();
   }, [internalNav.start]);
@@ -2473,9 +2338,9 @@ var useJourney = (options = {}) => {
 };
 
 // src/components/Map/hooks/useTrimmedRoute.ts
-var import_react9 = require("react");
+var import_react11 = require("react");
 var useTrimmedRoute = (route, userLocation) => {
-  return (0, import_react9.useMemo)(() => {
+  return (0, import_react11.useMemo)(() => {
     if (!route || !userLocation || route.coordinates.length < 2) return route;
     const coords = route.coordinates;
     let minDistance = Infinity;
@@ -2500,7 +2365,7 @@ var useTrimmedRoute = (route, userLocation) => {
 
 // src/components/Map/layers/RouteLayer.tsx
 var import_react_maplibre = require("@vis.gl/react-maplibre");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var RouteLayer = ({
   geometry,
   color = "#3b82f6",
@@ -2513,8 +2378,8 @@ var RouteLayer = ({
     properties: {},
     type: "Feature"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_maplibre.Source, { data, id: "sdk-route-source", type: "geojson", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_maplibre.Source, { data, id: "sdk-route-source", type: "geojson", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       import_react_maplibre.Layer,
       {
         id: "sdk-route-layer-casing",
@@ -2527,7 +2392,7 @@ var RouteLayer = ({
         type: "line"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       import_react_maplibre.Layer,
       {
         id: "sdk-route-layer",
@@ -2570,8 +2435,8 @@ var buildGeoCircle = (center, radiusMeters, points = 64) => {
 
 // src/components/Map/layers/MockRadiusLayer.tsx
 var import_react_maplibre2 = require("@vis.gl/react-maplibre");
-var import_react10 = require("react");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_react12 = require("react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var MockRadiusLayer = ({
   center,
   radiusMeters,
@@ -2584,12 +2449,12 @@ var MockRadiusLayer = ({
   // pastel palette with no neon accents at all).
   color = "#e2e8f0"
 }) => {
-  const data = (0, import_react10.useMemo)(
+  const data = (0, import_react12.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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react_maplibre2.Source, { data, id: "sdk-mock-radius-source", type: "geojson", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       import_react_maplibre2.Layer,
       {
         id: "sdk-mock-radius-fill",
@@ -2600,7 +2465,7 @@ var MockRadiusLayer = ({
         type: "fill"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       import_react_maplibre2.Layer,
       {
         id: "sdk-mock-radius-outline",
@@ -2617,8 +2482,8 @@ var MockRadiusLayer = ({
 
 // 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");
+var import_react13 = require("react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function createEmojiIcon(emoji, size = 64) {
   const canvas = document.createElement("canvas");
   canvas.width = size;
@@ -2631,13 +2496,13 @@ function createEmojiIcon(emoji, size = 64) {
   return ctx.getImageData(0, 0, size, size);
 }
 var POILayers = ({ pois }) => {
-  const [loadedImages, setLoadedImages] = (0, import_react11.useState)(0);
+  const [loadedImages, setLoadedImages] = (0, import_react13.useState)(0);
   const { current: map } = (0, import_react_maplibre3.useMap)();
-  const glPois = (0, import_react11.useMemo)(
+  const glPois = (0, import_react13.useMemo)(
     () => pois.filter((p) => !p.displayMode || p.displayMode === "gl"),
     [pois]
   );
-  (0, import_react11.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (!map) return;
     const glMap = map.getMap();
     const defaults = [
@@ -2677,7 +2542,7 @@ var POILayers = ({ pois }) => {
       setLoadedImages((prev) => prev + updates);
     }
   }, [map, glPois]);
-  const geojson = (0, import_react11.useMemo)(
+  const geojson = (0, import_react13.useMemo)(
     () => ({
       features: glPois.map((poi) => ({
         geometry: {
@@ -2695,7 +2560,7 @@ var POILayers = ({ pois }) => {
     }),
     [glPois]
   );
-  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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_maplibre3.Source, { data: geojson, id: "sdk-pois", type: "geojson", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     import_react_maplibre3.Layer,
     {
       id: "sdk-poi-layer",
@@ -2732,11 +2597,11 @@ var POILayers = ({ pois }) => {
 
 // src/components/Map/layers/POIMarkers.tsx
 var import_react_maplibre4 = require("@vis.gl/react-maplibre");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = 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_runtime13.jsx)(import_jsx_runtime13.Fragment, { children: markerPois.map((poi) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, { children: markerPois.map((poi) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     import_react_maplibre4.Marker,
     {
       anchor: "bottom",
@@ -2746,7 +2611,7 @@ var POIMarkers = ({ pois, onClick }) => {
         e.originalEvent.stopPropagation();
         if (onClick) onClick(poi);
       },
-      children: poi.markerComponent ? poi.markerComponent : /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+      children: poi.markerComponent ? poi.markerComponent : /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
         "div",
         {
           style: {
@@ -2755,7 +2620,7 @@ var POIMarkers = ({ pois, onClick }) => {
             transform: "transition-transform duration-200 hover:scale-110"
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
               "div",
               {
                 style: {
@@ -2768,7 +2633,7 @@ var POIMarkers = ({ pois, onClick }) => {
                   justifyContent: "center",
                   width: "32px"
                 },
-                children: poi.emoji ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { style: { fontSize: "16px" }, children: poi.emoji }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                children: poi.emoji ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { style: { fontSize: "16px" }, children: poi.emoji }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
                   "div",
                   {
                     style: {
@@ -2781,7 +2646,7 @@ var POIMarkers = ({ pois, onClick }) => {
                 )
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
               "div",
               {
                 style: {
@@ -2804,19 +2669,19 @@ var POIMarkers = ({ pois, onClick }) => {
 
 // src/components/Map/layers/UserLocationLayer.tsx
 var import_react_maplibre5 = require("@vis.gl/react-maplibre");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var UserLocationLayer = ({
   forcedLocation,
   heading
 }) => {
   if (!forcedLocation) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     import_react_maplibre5.Marker,
     {
       anchor: "center",
       latitude: forcedLocation[1],
       longitude: forcedLocation[0],
-      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
         "div",
         {
           style: {
@@ -2826,7 +2691,7 @@ var UserLocationLayer = ({
             position: "relative"
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
               "div",
               {
                 style: {
@@ -2839,7 +2704,7 @@ var UserLocationLayer = ({
                 }
               }
             ),
-            heading !== void 0 && heading !== null && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            heading !== void 0 && heading !== null && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
               "div",
               {
                 style: {
@@ -2849,13 +2714,13 @@ var UserLocationLayer = ({
                   width: "60px",
                   zIndex: 0
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
                   "svg",
                   {
                     style: { height: "100%", width: "100%" },
                     viewBox: "0 0 100 100",
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+                      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
                         "radialGradient",
                         {
                           cx: "50%",
@@ -2865,7 +2730,7 @@ var UserLocationLayer = ({
                           id: "grad1",
                           r: "50%",
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                               "stop",
                               {
                                 offset: "0%",
@@ -2875,7 +2740,7 @@ var UserLocationLayer = ({
                                 }
                               }
                             ),
-                            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                               "stop",
                               {
                                 offset: "100%",
@@ -2888,7 +2753,7 @@ var UserLocationLayer = ({
                           ]
                         }
                       ) }),
-                      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                         "path",
                         {
                           d: "M 50 50 L 35 0 A 50 50 0 0 1 65 0 Z",
@@ -2900,7 +2765,7 @@ var UserLocationLayer = ({
                 )
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
               "div",
               {
                 style: {
@@ -2914,7 +2779,7 @@ var UserLocationLayer = ({
                   width: "20px",
                   zIndex: 1
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                   "div",
                   {
                     style: {
@@ -2928,7 +2793,7 @@ var UserLocationLayer = ({
                 )
               }
             ),
-            /* @__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; } }` })
+            /* @__PURE__ */ (0, import_jsx_runtime15.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; } }` })
           ]
         }
       )
@@ -2938,9 +2803,9 @@ var UserLocationLayer = ({
 
 // src/components/Map/Map.tsx
 var import_react_maplibre6 = require("@vis.gl/react-maplibre");
-var import_react12 = __toESM(require("react"), 1);
+var import_react14 = __toESM(require("react"), 1);
 var import_maplibre_gl = require("maplibre-gl/dist/maplibre-gl.css");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var MapInternal = ({
   initialViewState = {
     latitude: 45.90583599233422,
@@ -2978,9 +2843,9 @@ var MapInternal = ({
   controlProps = {},
   enableTouchDrag = false
 }) => {
-  const mapControls = (0, import_react12.useContext)(MapControlsContext);
-  const mockLocation = (0, import_react12.useContext)(MockLocationContext);
-  const mapRef = (0, import_react12.useRef)(null);
+  const mapControls = (0, import_react14.useContext)(MapControlsContext);
+  const mockLocation = (0, import_react14.useContext)(MockLocationContext);
+  const mapRef = (0, import_react14.useRef)(null);
   const userLocationState = useUserLocation();
   const journey = useJourney({
     navigation,
@@ -2998,24 +2863,24 @@ var MapInternal = ({
   const showNavigationUI = hasIntegratedNav ? externalShowNavigationUI !== false && navigation?.showUI !== false : externalShowNavigationUI;
   const mode = navigationData?.mode || "preview";
   const resolvedInitialFollow = mapControls ? mapControls.isFollowing : initialFollowUser;
-  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)(() => {
+  const isFollowingRef = (0, import_react14.useRef)(resolvedInitialFollow);
+  const isFlyingRef = (0, import_react14.useRef)(false);
+  const flyingGenerationRef = (0, import_react14.useRef)(0);
+  const lockFlying = (0, import_react14.useCallback)(() => {
     isFlyingRef.current = true;
     return ++flyingGenerationRef.current;
   }, []);
-  const releaseFlyingIfCurrent = (0, import_react12.useCallback)((flightId) => {
+  const releaseFlyingIfCurrent = (0, import_react14.useCallback)((flightId) => {
     if (flyingGenerationRef.current === flightId) {
       isFlyingRef.current = false;
     }
   }, []);
-  const [localIsFollowingUI, setLocalIsFollowingUI] = (0, import_react12.useState)(
+  const [localIsFollowingUI, setLocalIsFollowingUI] = (0, import_react14.useState)(
     resolvedInitialFollow
   );
   const isFollowingUI = mapControls ? mapControls.isFollowing : localIsFollowingUI;
   const setIsFollowingCtx = mapControls?.setIsFollowing;
-  const setFollowMode = (0, import_react12.useCallback)(
+  const setFollowMode = (0, import_react14.useCallback)(
     (follow) => {
       isFollowingRef.current = follow;
       setLocalIsFollowingUI(follow);
@@ -3025,7 +2890,7 @@ var MapInternal = ({
     },
     [setIsFollowingCtx]
   );
-  (0, import_react12.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (mapControls && mapControls.isFollowing !== isFollowingRef.current) {
       isFollowingRef.current = mapControls.isFollowing;
     }
@@ -3034,8 +2899,8 @@ var MapInternal = ({
   if (pois.length > 0 && !mergedInteractiveLayerIds.includes("sdk-poi-layer")) {
     mergedInteractiveLayerIds.push("sdk-poi-layer");
   }
-  const prevInitialFollow = (0, import_react12.useRef)(initialFollowUser);
-  (0, import_react12.useEffect)(() => {
+  const prevInitialFollow = (0, import_react14.useRef)(initialFollowUser);
+  (0, import_react14.useEffect)(() => {
     if (initialFollowUser !== prevInitialFollow.current) {
       setFollowMode(initialFollowUser);
       prevInitialFollow.current = initialFollowUser;
@@ -3059,9 +2924,9 @@ var MapInternal = ({
     lockFlying,
     releaseFlyingIfCurrent
   ]);
-  const lastAutoLockedRouteRef = (0, import_react12.useRef)(null);
-  const lastModeRef = (0, import_react12.useRef)(null);
-  (0, import_react12.useEffect)(() => {
+  const lastAutoLockedRouteRef = (0, import_react14.useRef)(null);
+  const lastModeRef = (0, import_react14.useRef)(null);
+  (0, import_react14.useEffect)(() => {
     if (!route || !mapRef.current) {
       if (!route) lastAutoLockedRouteRef.current = null;
       return;
@@ -3117,7 +2982,7 @@ var MapInternal = ({
     lockFlying,
     releaseFlyingIfCurrent
   ]);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (isFollowingRef.current && !isFlyingRef.current && userLocationState.coords && mapRef.current) {
       mapRef.current.easeTo({
         center: userLocationState.coords,
@@ -3161,23 +3026,23 @@ var MapInternal = ({
     progress: progressValue
   } : void 0;
   const setEtaDataCtx = mapControls?.setEtaData;
-  (0, import_react12.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (setEtaDataCtx) {
       setEtaDataCtx(showEtaData);
     }
   }, [showEtaData, setEtaDataCtx]);
   const setDrawerStateCtx = mapControls?.setDrawerState;
-  (0, import_react12.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (setDrawerStateCtx && propDrawerState !== void 0) {
       setDrawerStateCtx(propDrawerState);
     }
   }, [propDrawerState, setDrawerStateCtx]);
   const resolvedMenuItems = menuItems ?? [];
-  const { mapLibreChildren, menuContentFromChildren } = (0, import_react12.useMemo)(() => {
+  const { mapLibreChildren, menuContentFromChildren } = (0, import_react14.useMemo)(() => {
     const mapLibreChildren2 = [];
     const extractedMenuItems = [];
-    import_react12.default.Children.forEach(children, (child) => {
-      if (import_react12.default.isValidElement(child)) {
+    import_react14.default.Children.forEach(children, (child) => {
+      if (import_react14.default.isValidElement(child)) {
         const type = child.type;
         const displayName = type?.displayName || type?.name;
         const isMenu = type === MapMenu || displayName === "MapMenu";
@@ -3188,7 +3053,7 @@ var MapInternal = ({
           "MapMenuFooter"
         ].includes(displayName);
         if (isMenu) {
-          import_react12.default.Children.forEach(
+          import_react14.default.Children.forEach(
             child.props.children,
             (nestedChild) => {
               if (nestedChild) {
@@ -3205,7 +3070,7 @@ var MapInternal = ({
         mapLibreChildren2.push(child);
       }
     });
-    const menuContentFromChildren2 = extractedMenuItems.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(MapMenu, { children: extractedMenuItems }) : null;
+    const menuContentFromChildren2 = extractedMenuItems.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(MapMenu, { children: extractedMenuItems }) : null;
     return { mapLibreChildren: mapLibreChildren2, menuContentFromChildren: menuContentFromChildren2 };
   }, [children]);
   const handleMapClick = (e) => {
@@ -3233,7 +3098,7 @@ var MapInternal = ({
     }
     if (onClick) onClick(e);
   };
-  const handleCenterOnUser = (0, import_react12.useCallback)(
+  const handleCenterOnUser = (0, import_react14.useCallback)(
     (payload) => {
       if (userLocationState.coords && mapRef.current) {
         setFollowMode(true);
@@ -3258,7 +3123,7 @@ var MapInternal = ({
       releaseFlyingIfCurrent
     ]
   );
-  const handleFlyTo = (0, import_react12.useCallback)(
+  const handleFlyTo = (0, import_react14.useCallback)(
     (coords, params) => {
       const map = mapRef.current;
       if (!map) return;
@@ -3278,7 +3143,7 @@ var MapInternal = ({
     },
     [setFollowMode, lockFlying, releaseFlyingIfCurrent]
   );
-  const handleResetBearing = (0, import_react12.useCallback)((params) => {
+  const handleResetBearing = (0, import_react14.useCallback)((params) => {
     if (mapRef.current) {
       mapRef.current.easeTo({
         bearing: 0,
@@ -3288,14 +3153,14 @@ var MapInternal = ({
       });
     }
   }, []);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (mapControls) {
       mapControls._registerCenterCallback(handleCenterOnUser);
       mapControls._registerResetBearingCallback(handleResetBearing);
       mapControls._registerFlyToCallback(handleFlyTo);
     }
   }, [mapControls, handleCenterOnUser, handleResetBearing, handleFlyTo]);
-  const handleMove = (0, import_react12.useCallback)(() => {
+  const handleMove = (0, import_react14.useCallback)(() => {
     if (mapRef.current && mapControls) {
       mapControls.setBearing(mapRef.current.getBearing());
       mapControls.setPitch(mapRef.current.getPitch());
@@ -3310,13 +3175,13 @@ var MapInternal = ({
       }
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
     "div",
     {
       className: `w-full h-full overflow-hidden relative ${mockLocation?.isPlacingLocation ? "cursor-crosshair" : ""} ${className}`,
       style,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
           import_react_maplibre6.Map,
           {
             attributionControl: false,
@@ -3346,30 +3211,30 @@ var MapInternal = ({
               showUserLocation && userLocationState.coords && (renderUserLocation ? renderUserLocation({
                 coords: userLocationState.coords,
                 heading: userLocationState.heading
-              }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+              }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                 UserLocationLayer,
                 {
                   forcedLocation: userLocationState.coords,
                   heading: userLocationState.heading
                 }
               )),
-              mockLocation && mockLocation.radiusMeters > 0 && userLocationState.coords && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+              mockLocation && mockLocation.radiusMeters > 0 && userLocationState.coords && /* @__PURE__ */ (0, import_jsx_runtime16.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 })
+              displayRoute && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(RouteLayer, { geometry: displayRoute }),
+              pois.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(POILayers, { pois }),
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(POIMarkers, { onClick: onPoiClick, pois })
               ] }),
               mapLibreChildren
             ]
           }
         ),
-        showControls && mapControls && !mapControls.hasControls && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        showControls && mapControls && !mapControls.hasControls && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           MapControls,
           {
             drawerContentRef,
@@ -3389,18 +3254,18 @@ var MapInternal = ({
 var SDKMapProviderWrapper = ({
   children
 }) => {
-  const context = (0, import_react12.useContext)(MapControlsContext);
+  const context = (0, import_react14.useContext)(MapControlsContext);
   if (context) {
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, { children });
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, { children });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SDKMapProvider, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SDKMapProvider, { children });
 };
 var Map2 = (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 }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SDKMapProviderWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_maplibre6.MapProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(MapInternal, { ...props }) }) });
 };
 
 // src/components/MapWrapper.tsx
-var import_react13 = __toESM(require("react"), 1);
+var import_react15 = __toESM(require("react"), 1);
 var import_client = require("react-dom/client");
 function renderMap(containerId, props = {}) {
   const container = document.getElementById(containerId);
@@ -3408,7 +3273,7 @@ function renderMap(containerId, props = {}) {
     throw new Error(`Container with id "${containerId}" not found.`);
   }
   const root = (0, import_client.createRoot)(container);
-  root.render(import_react13.default.createElement(Map2, props));
+  root.render(import_react15.default.createElement(Map2, props));
   return root;
 }
 
@@ -3765,7 +3630,7 @@ var RoutingService = {
 };
 
 // package.json
-var version = "0.6.7";
+var version = "0.7.0";
 
 // src/sdk.ts
 function deepFreeze(obj) {
@@ -4111,6 +3976,8 @@ var MiniAppSDK = class {
     );
     this.initialize = this.initialize.bind(this);
     this.getEnv = this.getEnv.bind(this);
+    this.achievement = this.achievement.bind(this);
+    this.achievements = this.achievements.bind(this);
     this.on = this.on.bind(this);
     this.off = this.off.bind(this);
   }
@@ -4151,6 +4018,23 @@ var MiniAppSDK = class {
   getEnv() {
     return lastKnownEnv;
   }
+  /**
+   * Fetches a single Achievement's current progress by slug — read-only, for
+   * rendering things like a progress bar. Progress is reported server-side
+   * by the mini-app's own backend calling the Hub's M2M endpoint directly;
+   * there is no corresponding "report progress" method on this SDK.
+   * @param slug Unique slug identifying the Achievement.
+   */
+  achievement(slug) {
+    return this.bridge.send("GET_ACHIEVEMENT", { slug });
+  }
+  /**
+   * Fetches every Achievement (with current progress) visible to this
+   * mini-app — read-only, same boundary as {@link MiniAppSDK.achievement}.
+   */
+  achievements() {
+    return this.bridge.send("GET_ACHIEVEMENTS");
+  }
   /**
    * Registers a callback for a specific event from the native shell.
    * @param event The name of the event to listen for.
@@ -4172,11 +4056,45 @@ var MiniAppSDK = class {
 var sdk = deepFreeze(new MiniAppSDK());
 
 // src/components/BridgeMocker.tsx
-var import_react14 = require("react");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_react16 = require("react");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var MOCK_ACHIEVEMENTS2 = [
+  {
+    completed: false,
+    description: "Discover 5 points of interest around Annecy.",
+    imageUrl: "https://api.dicebear.com/9.x/icons/svg?seed=explore",
+    playerActionCount: 3,
+    slug: "explore-5-pois",
+    title: "Explorer",
+    totalActionCount: 5,
+    upReward: 50,
+    xpReward: 100
+  },
+  {
+    completed: true,
+    description: "Complete your first navigation journey.",
+    imageUrl: "https://api.dicebear.com/9.x/icons/svg?seed=journey",
+    playerActionCount: 1,
+    slug: "first-journey",
+    title: "First Steps",
+    totalActionCount: 1,
+    upReward: 20,
+    xpReward: 40
+  },
+  {
+    completed: false,
+    description: "Scan 10 QR codes at partner venues.",
+    imageUrl: "https://api.dicebear.com/9.x/icons/svg?seed=scan",
+    playerActionCount: 4,
+    slug: "scan-10-qrcodes",
+    title: "Code Breaker",
+    totalActionCount: 10,
+    upReward: 80,
+    xpReward: 150
+  }
+];
 var AVATAR_MOUTH_VARIANTS = [
   "variant03",
-  "variant06",
   "variant07",
   "variant08",
   "variant09",
@@ -4261,19 +4179,19 @@ var BridgeMocker = ({
   mockJWTToken,
   children
 }) => {
-  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)({
+  const [autoMove, setAutoMove] = (0, import_react16.useState)(isMoving);
+  const [location, setLocation] = (0, import_react16.useState)(initialLocation);
+  const [heading, setHeading] = (0, import_react16.useState)(0);
+  const [speedMultiplier, setSpeedMultiplier] = (0, import_react16.useState)(simulationSpeed);
+  const [isReady, setIsReady] = (0, import_react16.useState)(false);
+  const [isMinimized, setIsMinimized] = (0, import_react16.useState)(true);
+  const [radiusMeters, setRadiusMeters] = (0, import_react16.useState)(0);
+  const [radiusUnit, setRadiusUnit] = (0, import_react16.useState)("m");
+  const [isPlacingLocation, setIsPlacingLocation] = (0, import_react16.useState)(false);
+  const streamIntervalRef = (0, import_react16.useRef)(null);
+  const pathIndexRef = (0, import_react16.useRef)(0);
+  const activeConfigRef = (0, import_react16.useRef)(null);
+  const stateRef = (0, import_react16.useRef)({
     autoMove,
     heading,
     location,
@@ -4285,7 +4203,7 @@ var BridgeMocker = ({
     simulationPath,
     speedMultiplier
   });
-  const pushLocationUpdateFor = (0, import_react14.useCallback)(
+  const pushLocationUpdateFor = (0, import_react16.useCallback)(
     (coords, headingDeg) => {
       const currentState = stateRef.current;
       const payload = {
@@ -4317,11 +4235,11 @@ var BridgeMocker = ({
     },
     []
   );
-  const pushLocationUpdate = (0, import_react14.useCallback)(() => {
+  const pushLocationUpdate = (0, import_react16.useCallback)(() => {
     const currentState = stateRef.current;
     pushLocationUpdateFor(currentState.location, currentState.heading);
   }, [pushLocationUpdateFor]);
-  const placeLocation = (0, import_react14.useCallback)(
+  const placeLocation = (0, import_react16.useCallback)(
     (coords) => {
       setLocation(coords);
       setIsPlacingLocation(false);
@@ -4329,7 +4247,7 @@ var BridgeMocker = ({
     },
     [pushLocationUpdateFor]
   );
-  (0, import_react14.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     stateRef.current = {
       autoMove,
       heading,
@@ -4350,19 +4268,19 @@ var BridgeMocker = ({
     speedMultiplier,
     mockJWTToken
   ]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     setAutoMove(isMoving);
   }, [isMoving]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     setSpeedMultiplier(simulationSpeed);
   }, [simulationSpeed]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (simulationPath && simulationPath.length > 0) {
       pathIndexRef.current = 0;
       setLocation(simulationPath[0]);
     }
   }, [simulationPath]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (streamIntervalRef.current && activeConfigRef.current) {
       sdk.bridge.send(
         "START_LOCATION_STREAM",
@@ -4370,7 +4288,7 @@ var BridgeMocker = ({
       );
     }
   }, [speedMultiplier]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     const bridge = sdk.bridge;
     const originalSend = bridge.send.bind(bridge);
     const stopStream = () => {
@@ -4531,6 +4449,24 @@ var BridgeMocker = ({
       if (type === "GET_FIDELITY_BALANCE") {
         return Promise.resolve({ balance: 1337, currency: "FPoints" });
       }
+      if (type === "GET_ACHIEVEMENTS") {
+        return Promise.resolve(MOCK_ACHIEVEMENTS2);
+      }
+      if (type === "GET_ACHIEVEMENT") {
+        const slug = payload?.slug;
+        return Promise.resolve(
+          MOCK_ACHIEVEMENTS2.find((a) => a.slug === slug) ?? {
+            completed: false,
+            description: "Mocked achievement (no native shell attached).",
+            playerActionCount: 0,
+            slug: slug || "unknown-achievement",
+            title: slug || "Unknown Achievement",
+            totalActionCount: 1,
+            upReward: 0,
+            xpReward: 0
+          }
+        );
+      }
       if (type === "PAYMENT_REQUEST") {
         return Promise.resolve({
           success: true,
@@ -4549,7 +4485,7 @@ var BridgeMocker = ({
     };
   }, [appId]);
   const radiusInMeters = radiusUnit === "km" ? radiusMeters * 1e3 : radiusMeters;
-  const mockLocationContextValue = (0, import_react14.useMemo)(
+  const mockLocationContextValue = (0, import_react16.useMemo)(
     () => ({
       isPlacingLocation,
       placeLocation,
@@ -4558,9 +4494,9 @@ var BridgeMocker = ({
     [isPlacingLocation, placeLocation, radiusInMeters]
   );
   if (!isReady) return null;
-  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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "relative w-full h-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "w-full h-full", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(MockLocationContext.Provider, { value: mockLocationContextValue, children }) }),
+    isMinimized ? /* @__PURE__ */ (0, import_jsx_runtime17.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!",
@@ -4568,7 +4504,7 @@ var BridgeMocker = ({
         title: "Open Simulation Controls",
         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",
@@ -4582,34 +4518,34 @@ var BridgeMocker = ({
             width: "14",
             xmlns: "http://www.w3.org/2000/svg",
             children: [
-              /* @__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_runtime17.jsx)("path", { d: "M21 4H3" }),
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M10 8H3" }),
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M21 12H3" }),
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M10 16H3" }),
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M21 20H3" }),
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("circle", { cx: "14", cy: "8", r: "2" }),
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("circle", { cx: "14", cy: "16", r: "2" })
             ]
           }
         )
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+    ) : /* @__PURE__ */ (0, import_jsx_runtime17.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_runtime16.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime17.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_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" }),
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "font-bold text-slate-100 flex items-center gap-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-lg", children: "\u{1F6E0}\uFE0F" }),
                   " Simulation Controls"
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
                   Button,
                   {
                     className: "text-slate-500 hover:text-white p-0 h-auto hover:bg-transparent cursor-pointer",
@@ -4621,10 +4557,10 @@ var BridgeMocker = ({
               ]
             }
           ),
-          /* @__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)(
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "p-4 flex flex-col gap-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex justify-between items-center", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("label", { className: "flex items-center gap-2 cursor-pointer", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
                   "input",
                   {
                     checked: autoMove,
@@ -4633,20 +4569,20 @@ var BridgeMocker = ({
                     type: "checkbox"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: "text-slate-200 font-bold", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "text-slate-200 font-bold", children: [
                   "Auto-Move ",
                   simulationPath ? "(Path)" : "(Random)"
                 ] })
               ] }),
-              /* @__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)(
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-[10px] text-slate-500", children: "Speed:" }),
+                /* @__PURE__ */ (0, import_jsx_runtime17.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_runtime16.jsxs)("option", { value: s, children: [
+                    children: [1, 2, 5, 10, 50, 100, 250].map((s) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("option", { value: s, children: [
                       s,
                       "x"
                     ] }, s))
@@ -4654,10 +4590,10 @@ var BridgeMocker = ({
                 )
               ] })
             ] }),
-            /* @__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)(
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "grid grid-cols-2 gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex flex-col gap-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-[10px] text-slate-500 text-left", children: "Lng" }),
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
                   "input",
                   {
                     className: "bg-slate-800 border border-slate-700 rounded px-2 py-1 text-white focus:outline-none focus:border-blue-500",
@@ -4672,9 +4608,9 @@ var BridgeMocker = ({
                   }
                 )
               ] }),
-              /* @__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)(
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex flex-col gap-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-[10px] text-slate-500 text-left", children: "Lat" }),
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
                   "input",
                   {
                     className: "bg-slate-800 border border-slate-700 rounded px-2 py-1 text-white focus:outline-none focus:border-blue-500",
@@ -4689,9 +4625,9 @@ var BridgeMocker = ({
                   }
                 )
               ] }),
-              /* @__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)(
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex flex-col gap-1 col-span-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-[10px] text-slate-500", children: "Heading (Degrees)" }),
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
                   "input",
                   {
                     className: "w-full accent-blue-500",
@@ -4705,13 +4641,13 @@ var BridgeMocker = ({
                     value: heading
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "text-right text-slate-400", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "text-right text-slate-400", children: [
                   heading,
                   "\xB0"
                 ] })
               ] })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime17.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"}`,
@@ -4721,11 +4657,11 @@ var BridgeMocker = ({
                 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)(
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex flex-col gap-1 border-t border-slate-800 pt-3", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex justify-between items-center", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-[10px] text-slate-500", children: "Scan Radius" }),
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex items-center gap-1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime17.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",
@@ -4735,21 +4671,21 @@ var BridgeMocker = ({
                       value: radiusMeters
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+                  /* @__PURE__ */ (0, import_jsx_runtime17.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_runtime17.jsx)("option", { value: "m", children: "m" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("option", { value: "km", children: "km" })
                       ]
                     }
                   )
                 ] })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
                 "input",
                 {
                   className: "w-full accent-blue-500",
@@ -4761,7 +4697,7 @@ var BridgeMocker = ({
                   value: radiusMeters
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "text-right text-slate-400", children: radiusMeters === 0 ? "hidden" : `${radiusMeters}${radiusUnit} radius around user` })
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "text-right text-slate-400", children: radiusMeters === 0 ? "hidden" : `${radiusMeters}${radiusUnit} radius around user` })
             ] })
           ] })
         ]
@@ -4771,20 +4707,20 @@ var BridgeMocker = ({
 };
 
 // src/components/DebugConsole.tsx
-var import_react15 = require("react");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_react17 = require("react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var DebugConsole = ({
   isOpen: initialOpen = false,
   onClose
 }) => {
-  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)(() => {
+  const [showConsole, setShowConsole] = (0, import_react17.useState)(initialOpen);
+  const [logs, setLogs] = (0, import_react17.useState)([]);
+  const scrollRef = (0, import_react17.useRef)(null);
+  (0, import_react17.useEffect)(() => {
     setShowConsole(initialOpen);
   }, [initialOpen]);
   const clearLogs = () => setLogs([]);
-  const addLog = (0, import_react15.useCallback)((label, data) => {
+  const addLog = (0, import_react17.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),
@@ -4794,7 +4730,7 @@ var DebugConsole = ({
     };
     setLogs((prev) => [entry, ...prev].slice(0, 100));
   }, []);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (typeof window === "undefined") return;
     const bridge = sdk.bridge;
     const originalSend = bridge.send.bind(bridge);
@@ -4816,7 +4752,7 @@ var DebugConsole = ({
     };
   }, [addLog]);
   if (!showConsole) {
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime18.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!",
@@ -4824,7 +4760,7 @@ var DebugConsole = ({
         title: "Open Debug Console",
         type: "button",
         variant: "ghost",
-        children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
           "svg",
           {
             className: "group-hover:scale-110 transition-transform",
@@ -4838,31 +4774,31 @@ var DebugConsole = ({
             width: "14",
             xmlns: "http://www.w3.org/2000/svg",
             children: [
-              /* @__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" })
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { d: "m8 2 1.88 1.88" }),
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { d: "M14.12 3.88 16 2" }),
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { d: "M9 7.13v-1a3.003 3.003 0 1 1 6 0v1" }),
+              /* @__PURE__ */ (0, import_jsx_runtime18.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_runtime18.jsx)("path", { d: "M12 20v-9" }),
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { d: "M6.53 9C4.6 8.8 3 7.1 3 5" }),
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { d: "M6 13H2" }),
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { d: "M3 21c0-2.1 1.7-3.9 3.8-4" }),
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { d: "M20.97 5c0 2.1-1.6 3.8-3.5 4" }),
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { d: "M22 13h-4" }),
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { d: "M17.2 17c2.1.1 3.8 1.9 3.8 4" })
             ]
           }
         )
       }
     );
   }
-  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" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime18.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_runtime18.jsxs)("div", { className: "flex items-center justify-between mb-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { className: "text-[10px] font-bold uppercase tracking-widest text-slate-400 flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "w-2 h-2 rounded-full bg-emerald-500 animate-pulse" }),
         "UP SDK Debug Console"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex gap-4", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex gap-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.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",
@@ -4872,7 +4808,7 @@ var DebugConsole = ({
             children: "Clear"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime18.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",
@@ -4887,21 +4823,21 @@ var DebugConsole = ({
         )
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime18.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_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)(
+        children: logs.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime18.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_runtime18.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_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_runtime18.jsxs)("div", { className: "flex gap-2 text-slate-500 mb-1 items-center", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-[8px]", children: log.time }),
+                /* @__PURE__ */ (0, import_jsx_runtime18.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.jsx)("pre", { className: "whitespace-pre-wrap break-all opacity-90", children: log.content })
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("pre", { className: "whitespace-pre-wrap break-all opacity-90", children: log.content })
             ]
           },
           log.id
@@ -4912,8 +4848,8 @@ var DebugConsole = ({
 };
 
 // src/components/PullToRefresh.tsx
-var import_react16 = require("react");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_react18 = require("react");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var DEFAULT_PULL_THRESHOLD = 64;
 var DEFAULT_MAX_PULL = 96;
 var RESISTANCE = 0.5;
@@ -4924,7 +4860,7 @@ function DefaultIndicator({
   progress,
   isRefreshing
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
     "div",
     {
       style: {
@@ -4939,7 +4875,7 @@ function DefaultIndicator({
         width: 28
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
           "svg",
           {
             height: 14,
@@ -4951,8 +4887,8 @@ function DefaultIndicator({
             viewBox: "0 0 24 24",
             width: 14,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("title", { children: "Refreshing" }),
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("title", { children: "Refreshing" }),
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                 "path",
                 {
                   d: "M21 12a9 9 0 1 1-2.64-6.36",
@@ -4965,7 +4901,7 @@ function DefaultIndicator({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("style", { children: "@keyframes up-sdk-ptr-spin { to { transform: rotate(360deg); } }" })
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("style", { children: "@keyframes up-sdk-ptr-spin { to { transform: rotate(360deg); } }" })
       ]
     }
   );
@@ -4979,27 +4915,46 @@ var PullToRefresh = ({
   maxPull = DEFAULT_MAX_PULL,
   renderIndicator
 }) => {
-  const containerRef = (0, import_react16.useRef)(null);
-  const startYRef = (0, import_react16.useRef)(null);
-  const lastYRef = (0, import_react16.useRef)(0);
-  const lastMoveTimeRef = (0, import_react16.useRef)(0);
-  const velocityRef = (0, import_react16.useRef)(0);
-  const pointerIdRef = (0, import_react16.useRef)(null);
-  const isPullingRef = (0, import_react16.useRef)(false);
-  const pullDistanceRef = (0, import_react16.useRef)(0);
-  const flingRafRef = (0, import_react16.useRef)(null);
-  const [pullDistance, setPullDistance] = (0, import_react16.useState)(0);
-  const [isRefreshing, setIsRefreshing] = (0, import_react16.useState)(false);
-  const [isTracking, setIsTracking] = (0, import_react16.useState)(false);
-  const disabledRef = (0, import_react16.useRef)(disabled);
+  const containerRef = (0, import_react18.useRef)(null);
+  const startYRef = (0, import_react18.useRef)(null);
+  const lastYRef = (0, import_react18.useRef)(0);
+  const lastMoveTimeRef = (0, import_react18.useRef)(0);
+  const velocityRef = (0, import_react18.useRef)(0);
+  const pointerIdRef = (0, import_react18.useRef)(null);
+  const isPullingRef = (0, import_react18.useRef)(false);
+  const pullDistanceRef = (0, import_react18.useRef)(0);
+  const flingRafRef = (0, import_react18.useRef)(null);
+  const [pullDistance, setPullDistance] = (0, import_react18.useState)(0);
+  const [isRefreshing, setIsRefreshing] = (0, import_react18.useState)(false);
+  const [isTracking, setIsTracking] = (0, import_react18.useState)(false);
+  const disabledRef = (0, import_react18.useRef)(disabled);
   disabledRef.current = disabled;
-  const onRefreshRef = (0, import_react16.useRef)(onRefresh);
+  const onRefreshRef = (0, import_react18.useRef)(onRefresh);
   onRefreshRef.current = onRefresh;
-  const pullThresholdRef = (0, import_react16.useRef)(pullThreshold);
+  const pullThresholdRef = (0, import_react18.useRef)(pullThreshold);
   pullThresholdRef.current = pullThreshold;
-  const maxPullRef = (0, import_react16.useRef)(maxPull);
+  const maxPullRef = (0, import_react18.useRef)(maxPull);
   maxPullRef.current = maxPull;
-  (0, import_react16.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
+    const el = containerRef.current;
+    if (!el || typeof window === "undefined") return;
+    const checkScrollChain = () => {
+      const noInternalOverflow = el.scrollHeight <= el.clientHeight;
+      const tallerThanViewport = el.clientHeight > window.innerHeight;
+      if (noInternalOverflow && tallerThanViewport) {
+        console.warn(
+          "[PullToRefresh] This container is taller than the viewport but has no internal scroll (scrollHeight <= clientHeight). Because this component disables native touch scrolling entirely (touch-action: none), scrolling is now completely broken here. This almost always means either: (1) an ancestor's flex-1 item is missing `min-h-0` (a flex item defaults to min-height:auto and refuses to shrink below its content size), or (2) an ancestor uses `min-h-screen`/`min-h-full` (a floor, not a ceiling) instead of `h-full`/`h-screen`/`h-dvh`. See the vault skill js/pull-to-refresh-scroll-chain.md for the fix pattern."
+        );
+      }
+    };
+    const raf = requestAnimationFrame(checkScrollChain);
+    window.addEventListener("resize", checkScrollChain);
+    return () => {
+      cancelAnimationFrame(raf);
+      window.removeEventListener("resize", checkScrollChain);
+    };
+  }, []);
+  (0, import_react18.useEffect)(() => {
     const el = containerRef.current;
     if (!el) return;
     const updatePullDistance = (value) => {
@@ -5130,7 +5085,7 @@ var PullToRefresh = ({
   const indicatorHeight = isRefreshing ? pullThreshold : pullDistance;
   const progress = Math.min(indicatorHeight / pullThreshold, 1);
   const isSettling = pullDistance === 0 && !isRefreshing && !isTracking;
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
     "div",
     {
       className: `up-sdk-pull-to-refresh ${className}`,
@@ -5141,8 +5096,8 @@ var PullToRefresh = ({
         touchAction: "none"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("style", { children: ".up-sdk-pull-to-refresh::-webkit-scrollbar { display: none; } .up-sdk-pull-to-refresh { scrollbar-width: none; -ms-overflow-style: none; }" }),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("style", { children: ".up-sdk-pull-to-refresh::-webkit-scrollbar { display: none; } .up-sdk-pull-to-refresh { scrollbar-width: none; -ms-overflow-style: none; }" }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           "div",
           {
             style: {
@@ -5155,7 +5110,7 @@ var PullToRefresh = ({
               userSelect: "none",
               width: "100%"
             },
-            children: renderIndicator ? renderIndicator({ isRefreshing, progress }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DefaultIndicator, { isRefreshing, progress })
+            children: renderIndicator ? renderIndicator({ isRefreshing, progress }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(DefaultIndicator, { isRefreshing, progress })
           }
         ),
         children
@@ -5166,16 +5121,16 @@ var PullToRefresh = ({
 
 // src/components/QRScanner.tsx
 var import_jsqr2 = __toESM(require("jsqr"), 1);
-var import_react17 = require("react");
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_react19 = require("react");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function QRScanner({ onScan, onError, className = "" }) {
-  const videoRef = (0, import_react17.useRef)(null);
-  const canvasRef = (0, import_react17.useRef)(null);
-  const streamRef = (0, import_react17.useRef)(null);
-  const tickRequestRef = (0, import_react17.useRef)(null);
-  const hasScannedRef = (0, import_react17.useRef)(false);
-  const [isReady, setIsReady] = (0, import_react17.useState)(false);
-  (0, import_react17.useEffect)(() => {
+  const videoRef = (0, import_react19.useRef)(null);
+  const canvasRef = (0, import_react19.useRef)(null);
+  const streamRef = (0, import_react19.useRef)(null);
+  const tickRequestRef = (0, import_react19.useRef)(null);
+  const hasScannedRef = (0, import_react19.useRef)(false);
+  const [isReady, setIsReady] = (0, import_react19.useState)(false);
+  (0, import_react19.useEffect)(() => {
     let cancelled = false;
     hasScannedRef.current = false;
     const cleanup = () => {
@@ -5258,7 +5213,7 @@ function QRScanner({ onScan, onError, className = "" }) {
       cleanup();
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
     "div",
     {
       className,
@@ -5270,7 +5225,7 @@ function QRScanner({ onScan, onError, className = "" }) {
         position: "relative"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
           "video",
           {
             playsInline: true,
@@ -5278,8 +5233,8 @@ function QRScanner({ onScan, onError, className = "" }) {
             style: { height: "100%", objectFit: "cover", width: "100%" }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("canvas", { ref: canvasRef, style: { display: "none" } }),
-        isReady && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("canvas", { ref: canvasRef, style: { display: "none" } }),
+        isReady && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
           "div",
           {
             style: {
@@ -5300,30 +5255,30 @@ function QRScanner({ onScan, onError, className = "" }) {
 }
 
 // src/components/SDKProvider.tsx
-var import_react18 = require("react");
-var import_jsx_runtime20 = require("react/jsx-runtime");
-var SDKContext = (0, import_react18.createContext)({ isMocked: false });
-var useIsMocked = () => (0, import_react18.useContext)(SDKContext).isMocked;
+var import_react20 = require("react");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var SDKContext = (0, import_react20.createContext)({ isMocked: false });
+var useIsMocked = () => (0, import_react20.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_react18.useMemo)(() => ({ isMocked }), [isMocked]);
-  const content = /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+  const value = (0, import_react20.useMemo)(() => ({ isMocked }), [isMocked]);
+  const content = /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
     children,
-    (debug || isMocked) && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DebugConsole, {})
+    (debug || isMocked) && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DebugConsole, {})
   ] });
   if (isMocked) {
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SDKContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BridgeMocker, { ...mockerProps, children: content }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SDKContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(BridgeMocker, { ...mockerProps, children: content }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SDKContext.Provider, { value, children: content });
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SDKContext.Provider, { value, children: content });
 };
 
 // src/components/SwipeCarousel.tsx
-var import_react19 = require("react");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_react21 = require("react");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var DIRECTION_LOCK_THRESHOLD_PX = 8;
 var SWIPE_DISTANCE_THRESHOLD_PX = 40;
 var SWIPE_VELOCITY_THRESHOLD = 0.4;
@@ -5350,28 +5305,28 @@ var SwipeCarousel = ({
   overscan = DEFAULT_OVERSCAN,
   visibleOverscan = DEFAULT_VISIBLE_OVERSCAN
 }) => {
-  const containerRef = (0, import_react19.useRef)(null);
-  const [containerWidth, setContainerWidth] = (0, import_react19.useState)(0);
-  const [dragX, setDragX] = (0, import_react19.useState)(0);
-  const [dragY, setDragY] = (0, import_react19.useState)(0);
-  const [isDraggingX, setIsDraggingX] = (0, import_react19.useState)(false);
-  const [isDraggingY, setIsDraggingY] = (0, import_react19.useState)(false);
-  const touchStateRef = (0, import_react19.useRef)(null);
-  const [internalIndex, setInternalIndex] = (0, import_react19.useState)(
+  const containerRef = (0, import_react21.useRef)(null);
+  const [containerWidth, setContainerWidth] = (0, import_react21.useState)(0);
+  const [dragX, setDragX] = (0, import_react21.useState)(0);
+  const [dragY, setDragY] = (0, import_react21.useState)(0);
+  const [isDraggingX, setIsDraggingX] = (0, import_react21.useState)(false);
+  const [isDraggingY, setIsDraggingY] = (0, import_react21.useState)(false);
+  const touchStateRef = (0, import_react21.useRef)(null);
+  const [internalIndex, setInternalIndex] = (0, import_react21.useState)(
     () => Math.max(
       0,
       items.findIndex((item) => item.id === activeId)
     )
   );
-  const prevActiveIdRef = (0, import_react19.useRef)(activeId);
-  const [timingWaiting, setTimingWaiting] = (0, import_react19.useState)(true);
-  (0, import_react19.useEffect)(() => {
+  const prevActiveIdRef = (0, import_react21.useRef)(activeId);
+  const [timingWaiting, setTimingWaiting] = (0, import_react21.useState)(true);
+  (0, import_react21.useEffect)(() => {
     const timer = setTimeout(() => {
       setTimingWaiting(false);
     }, 1e3);
     return () => clearTimeout(timer);
   }, []);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (activeId !== prevActiveIdRef.current) {
       const idx = items.findIndex((item) => item.id === activeId);
       if (idx !== -1) setInternalIndex(idx);
@@ -5382,7 +5337,7 @@ var SwipeCarousel = ({
     Math.max(internalIndex, 0),
     Math.max(items.length - 1, 0)
   );
-  (0, import_react19.useLayoutEffect)(() => {
+  (0, import_react21.useLayoutEffect)(() => {
     const el = containerRef.current;
     if (!el) return;
     const update = () => setContainerWidth(el.clientWidth);
@@ -5500,7 +5455,7 @@ var SwipeCarousel = ({
   };
   const windowStart = Math.max(0, activeIndex - overscan);
   const windowEnd = Math.min(items.length - 1, activeIndex + overscan);
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "div",
     {
       className: `relative overflow-hidden touch-pan-y ${className ?? ""}`,
@@ -5509,7 +5464,7 @@ var SwipeCarousel = ({
       onTouchMove: handleTouchMove,
       onTouchStart: handleTouchStart,
       ref: containerRef,
-      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         "div",
         {
           className: "relative h-full",
@@ -5524,7 +5479,7 @@ var SwipeCarousel = ({
             const verticalOffset = isActive ? dragY : 0;
             const distance = Math.abs(index - activeIndex);
             const isVisible = distance <= visibleOverscan;
-            return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
               "div",
               {
                 className: `absolute top-0 left-0 h-full shrink-0 ${itemClassName ?? ""} ${item.className ?? ""}`,
@@ -5552,6 +5507,40 @@ var SwipeCarousel = ({
   );
 };
 
+// src/hooks/useTapAction.ts
+var import_react22 = require("react");
+var TAP_MOVE_TOLERANCE_PX = 10;
+var CLICK_SUPPRESS_WINDOW_MS = 500;
+var useTapAction = (action) => {
+  const startRef = (0, import_react22.useRef)(null);
+  const handledByTouchRef = (0, import_react22.useRef)(false);
+  const onTouchStart = (e) => {
+    const touch = e.targetTouches[0];
+    startRef.current = touch ? { x: touch.clientX, y: touch.clientY } : null;
+  };
+  const onTouchEnd = (e) => {
+    const start = startRef.current;
+    const touch = e.changedTouches[0];
+    startRef.current = null;
+    if (!start || !touch) return;
+    const moved = Math.hypot(touch.clientX - start.x, touch.clientY - start.y);
+    if (moved > TAP_MOVE_TOLERANCE_PX) return;
+    handledByTouchRef.current = true;
+    setTimeout(() => {
+      handledByTouchRef.current = false;
+    }, CLICK_SUPPRESS_WINDOW_MS);
+    action();
+  };
+  const onClick = () => {
+    if (handledByTouchRef.current) {
+      handledByTouchRef.current = false;
+      return;
+    }
+    action();
+  };
+  return { onClick, onTouchEnd, onTouchStart };
+};
+
 // src/host/routingHandler.ts
 async function handleRouteRequest(req, config) {
   return RoutingService.fetchRoute(req, config);
@@ -5885,6 +5874,7 @@ var src_default = sdk;
   useMapControls,
   useMockLocation,
   useRoute,
+  useTapAction,
   useTrimmedRoute,
   useUserLocation
 });