@cloudparse/up-miniapps-sdk 0.6.8 → 0.7.0

package/dist/index.js

@@ -72,6 +72,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();
@@ -222,6 +274,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}`
@@ -408,420 +466,29 @@ var SheetDescription = React2.forwardRef(({ className, ...props }, ref) => /* @_
 SheetDescription.displayName = SheetPrimitive.Description.displayName;
 
 // src/components/Map/components/MapDrawer.tsx
-import {
-  forwardRef as forwardRef3,
-  useEffect,
-  useImperativeHandle,
-  useRef,
-  useState
-} from "react";
+import { forwardRef as forwardRef3, useImperativeHandle, useRef, useState } from "react";
 import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "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 = forwardRef3(
   ({
     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 = useRef(null);
-    const containerRef = useRef(null);
-    const handleBarRef = useRef(null);
-    const contentAreaRef = useRef(null);
     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 = useRef(handleHandleClick);
-    handleHandleClickRef.current = handleHandleClick;
-    const [autoContentPx, setAutoContentPx] = useState(0);
-    useEffect(() => {
-      if (state !== "auto") return;
-      const scrollEl = scrollContainerRef.current;
-      const contentAreaEl = contentAreaRef.current;
-      if (!scrollEl || !contentAreaEl) return;
-      const handleHeight = handleVisible ? handleBarRef.current?.offsetHeight ?? 0 : 0;
-      const contentEl = scrollEl.firstElementChild;
-      const measure = () => {
-        const contentAreaStyle = window.getComputedStyle(contentAreaEl);
-        const verticalPadding = parseFloat(contentAreaStyle.paddingTop || "0") + parseFloat(contentAreaStyle.paddingBottom || "0");
-        const contentHeight = contentEl?.scrollHeight ?? scrollEl.scrollHeight;
-        const px = handleHeight + verticalPadding + contentHeight;
-        setAutoContentPx(px);
-        onAutoContentHeightChange?.(px);
-      };
-      measure();
-      const ro = new ResizeObserver(measure);
-      ro.observe(contentEl ?? scrollEl);
-      return () => ro.disconnect();
-    }, [state, handleVisible, onAutoContentHeightChange]);
     const [showScrollTop, setShowScrollTop] = useState(false);
     const handleScroll = (e) => {
       const scrollTop = e.currentTarget.scrollTop;
       setShowScrollTop(state !== "closed" && scrollTop > scrollToTopThreshold);
     };
-    useEffect(() => {
-      if (state === "closed") {
-        setShowScrollTop(false);
-      } else {
-        const scrollTop = scrollContainerRef.current?.scrollTop || 0;
-        setShowScrollTop(scrollTop > scrollToTopThreshold);
-      }
-    }, [state, scrollToTopThreshold]);
-    const isDraggingSheet = useRef(false);
-    const hasDeterminedDirection = useRef(false);
-    const isTouchOnContent = useRef(false);
-    const isTouchOnHandle = useRef(false);
-    const suppressNextClickRef = useRef(false);
-    const contentAtTopSinceY = useRef(null);
-    const contentAtBottomSinceY = useRef(null);
-    const dragStartYRef = useRef(null);
-    const dragBaseHeightPxRef = useRef(0);
-    const stateRef = useRef(state);
-    const touchStartYRef = useRef(touchStartY);
-    const currentTouchYRef = useRef(currentTouchY);
-    useEffect(() => {
-      stateRef.current = state;
-    }, [state]);
-    useEffect(() => {
-      touchStartYRef.current = touchStartY;
-    }, [touchStartY]);
-    useEffect(() => {
-      currentTouchYRef.current = currentTouchY;
-    }, [currentTouchY]);
-    useEffect(() => {
-      const container = containerRef.current;
-      if (!container || side !== "bottom" || !enableTouchDrag) return;
-      const handleNativeTouchStart = (e) => {
-        const clientY = e.targetTouches[0].clientY;
-        setTouchStartY(clientY);
-        setCurrentTouchY(clientY);
-        isDraggingSheet.current = false;
-        hasDeterminedDirection.current = false;
-        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 targetState2;
-        if (currentState === "auto") {
-          const autoMaxPx2 = resolveHeightToPixels(
-            drawerAutoMaxHeight || "100%",
-            containerH2
-          );
-          const autoPx2 = Math.min(autoMaxPx2, autoContentPx);
-          const distToAuto = Math.abs(drawerHeightFromBottom - autoPx2);
-          targetState2 = 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) {
-            targetState2 = "full";
-          } else if (minDist === distToPeek) {
-            targetState2 = "peek";
-          } else {
-            targetState2 = "closed";
-          }
-        }
-        setTouchStartY(null);
-        setCurrentTouchY(null);
-        onChangeState(targetState2);
-        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__ */ jsxs2(Fragment, { children: [
       /* @__PURE__ */ jsx3("style", { children: `
         .no-scrollbar {
@@ -839,233 +506,113 @@ var MapDrawer = forwardRef3(
           onClick: () => onChangeState("closed")
         }
       ),
-      side === "left" ? /* @__PURE__ */ jsxs2(Fragment, { children: [
-        state === "closed" && /* @__PURE__ */ jsx3(
-          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__ */ jsxs2(
-              "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__ */ jsx3("line", { x1: "4", x2: "20", y1: "12", y2: "12" }),
-                  /* @__PURE__ */ jsx3("line", { x1: "4", x2: "20", y1: "6", y2: "6" }),
-                  /* @__PURE__ */ jsx3("line", { x1: "4", x2: "20", y1: "18", y2: "18" })
-                ]
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx3(
-          Sheet,
-          {
-            onOpenChange: (open) => onChangeState(open ? "full" : "closed"),
-            open: state !== "closed",
-            children: /* @__PURE__ */ jsxs2(
-              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__ */ jsx3(SheetHeader, { className: "pb-3 border-b border-white/10 mb-2 text-left", children: /* @__PURE__ */ jsx3(SheetTitle, { className: "text-sm font-bold tracking-wider text-zinc-400 uppercase", children: "Menu" }) }),
-                  /* @__PURE__ */ jsx3(
-                    "div",
-                    {
-                      className: "flex-1 overflow-y-auto no-scrollbar pr-2",
-                      onScroll: handleScroll,
-                      ref: scrollContainerRef,
-                      children: menuContent ? menuContent : /* @__PURE__ */ jsx3("div", { className: "flex flex-col gap-1.5", children: menuItems.map((item) => /* @__PURE__ */ jsxs2(
-                        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__ */ jsxs2("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__ */ jsx3("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__ */ jsx3("span", { className: "text-sm font-medium tracking-wide flex-1", children: item.label })
-                          ]
-                        },
-                        item.id
-                      )) })
-                    }
-                  ),
-                  showScrollToTopButton && showScrollTop && /* @__PURE__ */ jsx3(
-                    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__ */ jsx3(
-                        "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__ */ jsx3("polyline", { points: "18 15 12 9 6 15" })
-                        }
-                      )
-                    }
-                  )
-                ]
-              }
-            )
-          }
-        )
-      ] }) : (
-        /* Bottom Sheet Panel - Hardware accelerated translateY transitions */
-        /* @__PURE__ */ jsxs2(
-          "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__ */ jsx3(
-                "div",
-                {
-                  className: "w-full h-8 flex flex-col items-center justify-center cursor-pointer hover:bg-white/5 rounded-t-2xl transition-colors border-b border-white/5",
-                  onClick: () => {
-                    if (suppressNextClickRef.current) return;
-                    handleHandleClick();
-                  },
-                  ref: handleBarRef,
-                  children: /* @__PURE__ */ jsx3("div", { className: "w-12 h-1 bg-white/25 rounded-full" })
-                }
-              ),
-              /* @__PURE__ */ jsxs2(
-                "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__ */ jsx3(
-                      "div",
-                      {
-                        className: "flex-1 overflow-y-auto no-scrollbar",
-                        onScroll: handleScroll,
-                        ref: scrollContainerRef,
-                        style: {
-                          paddingBottom: state === "peek" ? `${shiftPx}px` : "0px"
-                        },
-                        children: menuContent ? menuContent : /* @__PURE__ */ jsx3("div", { className: "flex flex-col gap-1", children: menuItems.map((item) => /* @__PURE__ */ jsxs2(
-                          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__ */ jsxs2("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__ */ jsx3("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__ */ jsx3("span", { className: "text-sm font-medium tracking-wide", children: item.label })
-                            ]
-                          },
-                          item.id
-                        )) })
-                      }
-                    ),
-                    showScrollToTopButton && showScrollTop && /* @__PURE__ */ jsx3(
+      state === "closed" && /* @__PURE__ */ jsx3(
+        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__ */ jsxs2(
+            "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__ */ jsx3("line", { x1: "4", x2: "20", y1: "12", y2: "12" }),
+                /* @__PURE__ */ jsx3("line", { x1: "4", x2: "20", y1: "6", y2: "6" }),
+                /* @__PURE__ */ jsx3("line", { x1: "4", x2: "20", y1: "18", y2: "18" })
+              ]
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx3(
+        Sheet,
+        {
+          onOpenChange: (open) => onChangeState(open ? "full" : "closed"),
+          open: state !== "closed",
+          children: /* @__PURE__ */ jsxs2(
+            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__ */ jsx3(SheetHeader, { className: "pb-3 border-b border-white/10 mb-2 text-left", children: /* @__PURE__ */ jsx3(SheetTitle, { className: "text-sm font-bold tracking-wider text-zinc-400 uppercase", children: "Menu" }) }),
+                /* @__PURE__ */ jsx3(
+                  "div",
+                  {
+                    className: "flex-1 overflow-y-auto no-scrollbar pr-2",
+                    onScroll: handleScroll,
+                    ref: scrollContainerRef,
+                    children: menuContent ? menuContent : /* @__PURE__ */ jsx3("div", { className: "flex flex-col gap-1.5", children: menuItems.map((item) => /* @__PURE__ */ jsxs2(
                       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__ */ jsx3(
-                          "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__ */ jsx3("polyline", { points: "18 15 12 9 6 15" })
-                          }
-                        )
+                        children: [
+                          /* @__PURE__ */ jsxs2("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__ */ jsx3("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__ */ jsx3("span", { className: "text-sm font-medium tracking-wide flex-1", children: item.label })
+                        ]
+                      },
+                      item.id
+                    )) })
+                  }
+                ),
+                showScrollToTopButton && showScrollTop && /* @__PURE__ */ jsx3(
+                  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__ */ jsx3(
+                      "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__ */ jsx3("polyline", { points: "18 15 12 9 6 15" })
                       }
                     )
-                  ]
-                }
-              )
-            ]
-          }
-        )
+                  }
+                )
+              ]
+            }
+          )
+        }
       )
     ] });
   }
 );
+MapDrawer.displayName = "MapDrawer";
 
 // src/components/ui/card.tsx
 import * as React3 from "react";
@@ -1516,40 +1063,348 @@ var MapRightControls = ({
   );
 };
 
-// src/components/Map/MapContext.tsx
+// src/components/Map/components/MobileBottomDrawer.tsx
+import { interpolate, useTransform } from "motion/react";
 import {
-  createContext as createContext2,
+  forwardRef as forwardRef5,
   useCallback,
-  useContext as useContext2,
+  useEffect,
+  useImperativeHandle as useImperativeHandle2,
   useMemo,
   useRef as useRef2,
   useState as useState2
 } from "react";
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { Sheet as Sheet2 } from "react-modal-sheet";
+import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs5 } from "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 = forwardRef5(
+  ({
+    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 = useRef2(null);
+    useImperativeHandle2(ref, () => scrollRef.current);
+    const headerRef = useRef2(null);
+    const contentWrapperRef = useRef2(null);
+    const [viewportHeight, setViewportHeight] = useState2(
+      () => containerHeight ?? (typeof window !== "undefined" ? window.innerHeight : 800)
+    );
+    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] = useState2(0);
+    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 } = 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 = useRef2(null);
+    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 = 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] = useState2(false);
+    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]);
+    useEffect(() => {
+      if (state === "closed") setShowScrollTop(false);
+    }, [state]);
+    const dragDisabled = !enableTouchDrag;
+    return /* @__PURE__ */ jsxs5(Fragment2, { children: [
+      /* @__PURE__ */ jsx7("style", { children: `
+          .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
+          .no-scrollbar::-webkit-scrollbar { display: none; }
+        ` }),
+      /* @__PURE__ */ jsxs5(
+        Sheet2,
+        {
+          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__ */ jsxs5(
+              Sheet2.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__ */ jsx7(
+                    Sheet2.Header,
+                    {
+                      className: "!bg-transparent cursor-pointer hover:!bg-white/5 transition-colors",
+                      onClick: handleHandleClick,
+                      ref: headerRef
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs5(
+                    Sheet2.Content,
+                    {
+                      className: "!bg-transparent",
+                      disableDrag: (info) => dragDisabled || info.scrollPosition === "middle",
+                      disableScroll: (info) => !dragDisabled && info.currentSnap !== snapPoints.length - 1,
+                      scrollClassName: "no-scrollbar",
+                      scrollRef,
+                      children: [
+                        /* @__PURE__ */ jsx7("div", { className: "px-4 pb-4 pt-2 relative", ref: contentWrapperRef, children: menuContent ? menuContent : /* @__PURE__ */ jsx7("div", { className: "flex flex-col gap-1", children: menuItems.map((item) => /* @__PURE__ */ jsxs5(
+                          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__ */ jsxs5("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__ */ jsx7("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__ */ jsx7("span", { className: "text-sm font-medium tracking-wide", children: item.label })
+                            ]
+                          },
+                          item.id
+                        )) }) }),
+                        showScrollToTopButton && showScrollTop && /* @__PURE__ */ jsx7(
+                          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__ */ jsx7(
+                              "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__ */ jsx7("polyline", { points: "18 15 12 9 6 15" })
+                              }
+                            )
+                          }
+                        )
+                      ]
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx7(
+              DrawerBackdrop,
+              {
+                active: state === "full" || state === "auto",
+                onTap: () => onChangeState("closed"),
+                output: backdropOutput
+              }
+            )
+          ]
+        }
+      )
+    ] });
+  }
+);
+MobileBottomDrawer.displayName = "MobileBottomDrawer";
+function DrawerBackdrop({
+  active,
+  output,
+  onTap
+}) {
+  const { y, snapPoints } = Sheet2.useContext();
+  const opacity = useTransform(y, (value) => {
+    if (snapPoints.length === 0 || output.length !== snapPoints.length) {
+      return 0;
+    }
+    const mix = interpolate(
+      snapPoints.map((point) => point.snapValueY),
+      output
+    );
+    return mix(value) * 0.45;
+  });
+  return /* @__PURE__ */ jsx7(
+    Sheet2.Backdrop,
+    {
+      className: "!bg-black !backdrop-blur-[1px]",
+      onTap: active ? onTap : void 0,
+      style: { opacity }
+    }
+  );
+}
+
+// src/components/Map/MapContext.tsx
+import {
+  createContext as createContext2,
+  useCallback as useCallback2,
+  useContext as useContext2,
+  useMemo as useMemo2,
+  useRef as useRef3,
+  useState as useState3
+} from "react";
+import { jsx as jsx8 } from "react/jsx-runtime";
 var MapControlsContext = createContext2(
   null
 );
 var SDKMapProvider = ({
   children
 }) => {
-  const [isFollowing, setIsFollowing] = useState2(true);
-  const [bearing, setBearingState] = useState2(0);
-  const [pitch, setPitchState] = useState2(0);
-  const [drawerState, setDrawerStateInternal] = useState2("closed");
-  const drawerContentRef = useRef2(null);
-  const setDrawerState = useCallback((val) => {
+  const [isFollowing, setIsFollowing] = useState3(true);
+  const [bearing, setBearingState] = useState3(0);
+  const [pitch, setPitchState] = useState3(0);
+  const [drawerState, setDrawerStateInternal] = useState3("closed");
+  const drawerContentRef = useRef3(null);
+  const setDrawerState = useCallback2((val) => {
     setDrawerStateInternal(val);
   }, []);
-  const [drawerHandleVisible, setDrawerHandleVisibleState] = useState2(true);
-  const setDrawerHandleVisible = useCallback((val) => {
+  const [drawerHandleVisible, setDrawerHandleVisibleState] = useState3(true);
+  const setDrawerHandleVisible = useCallback2((val) => {
     setDrawerHandleVisibleState((prev) => prev === val ? prev : val);
   }, []);
-  const [hasControls, setHasControlsState] = useState2(false);
-  const setHasControls = useCallback((val) => {
+  const [hasControls, setHasControlsState] = useState3(false);
+  const setHasControls = useCallback2((val) => {
     setHasControlsState((prev) => prev === val ? prev : val);
   }, []);
-  const [etaData, setEtaDataState] = useState2(void 0);
-  const setEtaData = useCallback((newData) => {
+  const [etaData, setEtaDataState] = useState3(void 0);
+  const setEtaData = useCallback2((newData) => {
     setEtaDataState((prev) => {
       if (!prev && !newData) return prev;
       if (!prev || !newData) return newData;
@@ -1559,29 +1414,29 @@ var SDKMapProvider = ({
       return newData;
     });
   }, []);
-  const [insets, setInsetsState] = useState2({
+  const [insets, setInsetsState] = useState3({
     bottom: 0,
     left: 0,
     right: 0,
     top: 0
   });
-  const setInsets = useCallback((newInsets) => {
+  const setInsets = useCallback2((newInsets) => {
     setInsetsState((prev) => ({ ...prev, ...newInsets }));
   }, []);
-  const centerCallbackRef = useRef2(null);
-  const resetBearingCallbackRef = useRef2(null);
-  const flyToCallbackRef = useRef2(null);
-  const centerOnUser = useCallback((params) => {
+  const centerCallbackRef = useRef3(null);
+  const resetBearingCallbackRef = useRef3(null);
+  const flyToCallbackRef = useRef3(null);
+  const centerOnUser = useCallback2((params) => {
     if (centerCallbackRef.current) {
       centerCallbackRef.current(params);
     }
   }, []);
-  const resetBearing = useCallback((params) => {
+  const resetBearing = useCallback2((params) => {
     if (resetBearingCallbackRef.current) {
       resetBearingCallbackRef.current(params);
     }
   }, []);
-  const flyTo = useCallback(
+  const flyTo = useCallback2(
     (coords, params) => {
       if (flyToCallbackRef.current) {
         flyToCallbackRef.current(coords, params);
@@ -1589,31 +1444,31 @@ var SDKMapProvider = ({
     },
     []
   );
-  const _registerCenterCallback = useCallback(
+  const _registerCenterCallback = useCallback2(
     (cb) => {
       centerCallbackRef.current = cb;
     },
     []
   );
-  const _registerResetBearingCallback = useCallback(
+  const _registerResetBearingCallback = useCallback2(
     (cb) => {
       resetBearingCallbackRef.current = cb;
     },
     []
   );
-  const _registerFlyToCallback = useCallback(
+  const _registerFlyToCallback = useCallback2(
     (cb) => {
       flyToCallbackRef.current = cb;
     },
     []
   );
-  const setBearing = useCallback((b) => {
+  const setBearing = useCallback2((b) => {
     setBearingState(b);
   }, []);
-  const setPitch = useCallback((p) => {
+  const setPitch = useCallback2((p) => {
     setPitchState(p);
   }, []);
-  const contextValue = useMemo(
+  const contextValue = useMemo2(
     () => ({
       _registerCenterCallback,
       _registerFlyToCallback,
@@ -1663,7 +1518,7 @@ var SDKMapProvider = ({
       setInsets
     ]
   );
-  return /* @__PURE__ */ jsx7(MapControlsContext.Provider, { value: contextValue, children });
+  return /* @__PURE__ */ jsx8(MapControlsContext.Provider, { value: contextValue, children });
 };
 var useMapControls = () => {
   const context = useContext2(MapControlsContext);
@@ -1674,8 +1529,8 @@ var useMapControls = () => {
 };
 
 // src/components/Map/components/MapControls.tsx
-import { useCallback as useCallback2, useContext as useContext3, useEffect as useEffect2, useRef as useRef3, useState as useState3 } from "react";
-import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+import { useCallback as useCallback3, useContext as useContext3, useEffect as useEffect2, useRef as useRef4, useState as useState4 } from "react";
+import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 var resolveHeightToPixels2 = (height, containerHeight) => {
   if (typeof height === "number") {
     return height;
@@ -1713,7 +1568,7 @@ var MapControls = ({
 }) => {
   const mapContext = useContext3(MapControlsContext);
   const contextRef = mapContext?.drawerContentRef;
-  const mergedRef = useCallback2(
+  const mergedRef = useCallback3(
     (node) => {
       if (drawerContentRef) {
         if (typeof drawerContentRef === "function") {
@@ -1728,11 +1583,11 @@ var MapControls = ({
     },
     [drawerContentRef, contextRef]
   );
-  const [localDrawerState, setLocalDrawerState] = useState3(
+  const [localDrawerState, setLocalDrawerState] = useState4(
     defaultState ?? "closed"
   );
   const drawerState = mapContext ? mapContext.drawerState : localDrawerState;
-  const setDrawerState = useCallback2(
+  const setDrawerState = useCallback3(
     (state) => {
       if (mapContext) {
         mapContext.setDrawerState(state);
@@ -1747,9 +1602,9 @@ var MapControls = ({
       mapContext.setDrawerState(defaultState);
     }
   }, []);
-  const [side, setSide] = useState3("left");
-  const containerRef = useRef3(null);
-  const [mapHeight, setMapHeight] = useState3(600);
+  const [side, setSide] = useState4("left");
+  const containerRef = useRef4(null);
+  const [mapHeight, setMapHeight] = useState4(600);
   useEffect2(() => {
     const parent = containerRef.current?.parentElement;
     if (!parent) return;
@@ -1788,9 +1643,7 @@ var MapControls = ({
   };
   const mapPitch = mapContext ? mapContext.pitch : 0;
   const resolvedEtaData = etaData !== void 0 ? etaData : mapContext?.etaData;
-  const [touchStartY, setTouchStartY] = useState3(null);
-  const [currentTouchY, setCurrentTouchY] = useState3(null);
-  const [autoContentPx, setAutoContentPx] = useState3(0);
+  const [autoContentPx, setAutoContentPx] = useState4(0);
   useEffect2(() => {
     if (typeof window === "undefined") return;
     const checkLayout = () => {
@@ -1808,8 +1661,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(
@@ -1819,22 +1672,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;
@@ -1843,7 +1680,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;
@@ -1863,22 +1700,17 @@ var MapControls = ({
     etaOpacity = drawerState === "full" ? 0 : 1;
     etaBottomStyle = `calc(1rem + ${bottomInset}px)`;
   }
-  return /* @__PURE__ */ jsxs5(Fragment2, { children: [
-    /* @__PURE__ */ jsx8("div", { ref: containerRef, style: { display: "none" } }),
-    /* @__PURE__ */ jsx8(
-      MapDrawer,
+  return /* @__PURE__ */ jsxs6(Fragment3, { children: [
+    /* @__PURE__ */ jsx9("div", { ref: containerRef, style: { display: "none" } }),
+    side === "bottom" ? /* @__PURE__ */ jsx9(
+      MobileBottomDrawer,
       {
-        clampedDragOffset,
         containerHeight: mapHeight,
-        currentTouchY,
         drawerAutoMaxHeight,
         drawerFullHeight,
         drawerPeekHeight,
         enableTouchDrag,
-        etaBarHeight,
-        etaData: resolvedEtaData,
         handleVisible,
-        isDragging,
         menuContent: children || menuContent,
         menuItems,
         onAutoContentHeightChange: setAutoContentPx,
@@ -1886,15 +1718,22 @@ var MapControls = ({
         ref: mergedRef,
         safeAreaInsets: mapContext?.insets,
         scrollToTopThreshold,
-        setCurrentTouchY,
-        setTouchStartY,
         showScrollToTopButton,
-        side,
-        state: drawerState,
-        touchStartY
+        state: drawerState
+      }
+    ) : /* @__PURE__ */ jsx9(
+      MapDrawer,
+      {
+        menuContent: children || menuContent,
+        menuItems,
+        onChangeState: setDrawerState,
+        ref: mergedRef,
+        scrollToTopThreshold,
+        showScrollToTopButton,
+        state: drawerState
       }
     ),
-    /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx9(
       MapRightControls,
       {
         bottomOffset: controlsBottomOffset,
@@ -1917,7 +1756,7 @@ var MapControls = ({
         side
       }
     ),
-    resolvedEtaData && /* @__PURE__ */ jsx8(
+    resolvedEtaData && /* @__PURE__ */ jsx9(
       MapEtaPanel,
       {
         etaData: resolvedEtaData,
@@ -1936,9 +1775,9 @@ var MapControls = ({
 
 // src/components/Map/components/MapMenu.tsx
 import { useContext as useContext4 } from "react";
-import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 var MapMenu = ({ children }) => {
-  return /* @__PURE__ */ jsx9("div", { className: "flex flex-col gap-1.5", children });
+  return /* @__PURE__ */ jsx10("div", { className: "flex flex-col gap-1.5", children });
 };
 var MapMenuItem = ({
   id,
@@ -1957,7 +1796,7 @@ var MapMenuItem = ({
       context.setDrawerState("closed");
     }
   };
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7(
     "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"}`,
@@ -1965,12 +1804,12 @@ var MapMenuItem = ({
       onClick: handleClick,
       type: "button",
       children: [
-        icon && /* @__PURE__ */ jsxs6("div", { className: "relative flex items-center justify-center w-8 h-8 rounded-lg bg-white/5 text-zinc-300", children: [
+        icon && /* @__PURE__ */ jsxs7("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__ */ jsx9("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__ */ jsx10("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__ */ jsxs6("div", { className: "flex-1 flex flex-col justify-center", children: [
-          /* @__PURE__ */ jsx9("span", { className: "text-sm font-medium tracking-wide flex-1", children: label }),
+        /* @__PURE__ */ jsxs7("div", { className: "flex-1 flex flex-col justify-center", children: [
+          /* @__PURE__ */ jsx10("span", { className: "text-sm font-medium tracking-wide flex-1", children: label }),
           children
         ] })
       ]
@@ -1984,7 +1823,7 @@ var MapMenuTitle = ({
   showDivider = true,
   className = ""
 }) => {
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(
     "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" : ""}`,
@@ -1996,14 +1835,14 @@ MapMenuTitle.displayName = "MapMenuTitle";
 var MapMenuDivider = ({
   className = ""
 }) => {
-  return /* @__PURE__ */ jsx9("div", { className: `h-[1px] bg-white/10 my-3 mx-3.5 ${className}` });
+  return /* @__PURE__ */ jsx10("div", { className: `h-[1px] bg-white/10 my-3 mx-3.5 ${className}` });
 };
 MapMenuDivider.displayName = "MapMenuDivider";
 var MapMenuFooter = ({
   children,
   className = ""
 }) => {
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(
     "div",
     {
       className: `mt-auto pt-4 border-t border-white/10 px-3.5 text-xs text-zinc-500 font-medium ${className}`,
@@ -2031,7 +1870,7 @@ var GlobalEvent = /* @__PURE__ */ ((GlobalEvent2) => {
 })(GlobalEvent || {});
 
 // src/components/Map/hooks/useUserLocation.ts
-import { useEffect as useEffect3, useState as useState4 } from "react";
+import { useEffect as useEffect3, useState as useState5 } from "react";
 var LERP_FACTOR = 0.12;
 var EMPTY_STATE = {
   accuracy: null,
@@ -2152,7 +1991,7 @@ function stopSharedStream() {
   currentInterpolated = { coords: null, heading: null };
 }
 var useUserLocation = () => {
-  const [locationState, setLocationState] = useState4(getSnapshot);
+  const [locationState, setLocationState] = useState5(getSnapshot);
   useEffect3(() => {
     refCount++;
     if (refCount === 1) {
@@ -2173,7 +2012,7 @@ var useUserLocation = () => {
 };
 
 // src/components/Map/hooks/useLiveRouting.ts
-import { useCallback as useCallback3, useEffect as useEffect4, useMemo as useMemo2, useRef as useRef4, useState as useState5 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect4, useMemo as useMemo3, useRef as useRef5, useState as useState6 } from "react";
 var useLiveRouting = ({
   origin: manualOrigin,
   destination,
@@ -2182,19 +2021,19 @@ var useLiveRouting = ({
   enabled = true,
   initialMode = "preview"
 }) => {
-  const [route, setRoute] = useState5(null);
-  const [totalDistance, setTotalDistance] = useState5(null);
-  const [isCalculating, setIsCalculating] = useState5(false);
-  const [error, setError] = useState5(null);
-  const [mode, setMode] = useState5(initialMode);
+  const [route, setRoute] = useState6(null);
+  const [totalDistance, setTotalDistance] = useState6(null);
+  const [isCalculating, setIsCalculating] = useState6(false);
+  const [error, setError] = useState6(null);
+  const [mode, setMode] = useState6(initialMode);
   const userLocationState = useUserLocation();
   const calculationOrigin = manualOrigin || userLocationState.coords;
   const trackingLocation = userLocationState.coords || manualOrigin;
-  const lastCalcOrigin = useRef4(null);
-  const lastCalcDest = useRef4(null);
-  const isRequestInProgress = useRef4(false);
-  const lastResetDestKey = useRef4(null);
-  const getDistance = useCallback3(
+  const lastCalcOrigin = useRef5(null);
+  const lastCalcDest = useRef5(null);
+  const isRequestInProgress = useRef5(false);
+  const lastResetDestKey = useRef5(null);
+  const getDistance = useCallback4(
     (p1, p2) => {
       const R = 6371e3;
       const \u03C61 = p1[1] * Math.PI / 180;
@@ -2207,7 +2046,7 @@ var useLiveRouting = ({
     },
     []
   );
-  const currentDistanceMeters = useMemo2(() => {
+  const currentDistanceMeters = useMemo3(() => {
     if (!trackingLocation || !route || route.geometry.coordinates.length < 2) {
       if (trackingLocation && destination) {
         return getDistance(trackingLocation, destination);
@@ -2234,7 +2073,7 @@ var useLiveRouting = ({
     }
     return dist;
   }, [trackingLocation, route, destination, getDistance]);
-  const calculate = useCallback3(
+  const calculate = useCallback4(
     async (origin, dest, isNewDest) => {
       if (isRequestInProgress.current) return;
       isRequestInProgress.current = true;
@@ -2325,9 +2164,9 @@ var useLiveRouting = ({
   };
 };
 var useRoute = (origin, destination, profile = "driving") => {
-  const [route, setRoute] = useState5(null);
-  const [isCalculating, setIsCalculating] = useState5(false);
-  const [error, setError] = useState5(null);
+  const [route, setRoute] = useState6(null);
+  const [isCalculating, setIsCalculating] = useState6(false);
+  const [error, setError] = useState6(null);
   useEffect4(() => {
     if (!origin || !destination) {
       setRoute(null);
@@ -2355,11 +2194,11 @@ var useRoute = (origin, destination, profile = "driving") => {
 };
 
 // src/components/Map/hooks/useJourney.ts
-import { useCallback as useCallback4, useEffect as useEffect5, useRef as useRef5, useState as useState6 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect5, useRef as useRef6, useState as useState7 } from "react";
 var useJourney = (options = {}) => {
   const { navigation, onAbort, onModeChange } = options;
-  const [progNav, setProgNav] = useState6(null);
-  const [isAborted, setIsAborted] = useState6(false);
+  const [progNav, setProgNav] = useState7(null);
+  const [isAborted, setIsAborted] = useState7(false);
   useEffect5(() => {
     const unsubCreate = sdk.on("SDK_NAVIGATION_CREATE", (payload) => {
       setIsAborted(false);
@@ -2388,7 +2227,7 @@ var useJourney = (options = {}) => {
     profile: effectiveOptions?.profile || "driving",
     recalculateThreshold: effectiveOptions?.recalculateThreshold || 50
   });
-  const prevDest = useRef5(null);
+  const prevDest = useRef6(null);
   const currentDest = effectiveOptions?.destination;
   useEffect5(() => {
     if (currentDest && (!prevDest.current || prevDest.current[0] !== currentDest[0] || prevDest.current[1] !== currentDest[1])) {
@@ -2396,7 +2235,7 @@ var useJourney = (options = {}) => {
     }
     prevDest.current = currentDest;
   }, [currentDest]);
-  const onModeChangeRef = useRef5(onModeChange);
+  const onModeChangeRef = useRef6(onModeChange);
   onModeChangeRef.current = onModeChange;
   useEffect5(() => {
     onModeChangeRef.current?.(internalNav.mode);
@@ -2420,13 +2259,13 @@ var useJourney = (options = {}) => {
       (totalDistanceMeters - remainingMeters) / totalDistanceMeters * 100
     )
   ) : 0;
-  const cancel = useCallback4(() => {
+  const cancel = useCallback5(() => {
     setIsAborted(true);
     setProgNav(null);
     sdk.navigation.abort();
     if (onAbort) onAbort();
   }, [onAbort]);
-  const start = useCallback4(() => {
+  const start = useCallback5(() => {
     sdk.navigation.start();
     internalNav.start();
   }, [internalNav.start]);
@@ -2448,9 +2287,9 @@ var useJourney = (options = {}) => {
 };
 
 // src/components/Map/hooks/useTrimmedRoute.ts
-import { useMemo as useMemo3 } from "react";
+import { useMemo as useMemo4 } from "react";
 var useTrimmedRoute = (route, userLocation) => {
-  return useMemo3(() => {
+  return useMemo4(() => {
     if (!route || !userLocation || route.coordinates.length < 2) return route;
     const coords = route.coordinates;
     let minDistance = Infinity;
@@ -2475,7 +2314,7 @@ var useTrimmedRoute = (route, userLocation) => {
 
 // src/components/Map/layers/RouteLayer.tsx
 import { Layer, Source } from "@vis.gl/react-maplibre";
-import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
 var RouteLayer = ({
   geometry,
   color = "#3b82f6",
@@ -2488,8 +2327,8 @@ var RouteLayer = ({
     properties: {},
     type: "Feature"
   };
-  return /* @__PURE__ */ jsxs7(Source, { data, id: "sdk-route-source", type: "geojson", children: [
-    /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsxs8(Source, { data, id: "sdk-route-source", type: "geojson", children: [
+    /* @__PURE__ */ jsx11(
       Layer,
       {
         id: "sdk-route-layer-casing",
@@ -2502,7 +2341,7 @@ var RouteLayer = ({
         type: "line"
       }
     ),
-    /* @__PURE__ */ jsx10(
+    /* @__PURE__ */ jsx11(
       Layer,
       {
         id: "sdk-route-layer",
@@ -2545,8 +2384,8 @@ var buildGeoCircle = (center, radiusMeters, points = 64) => {
 
 // src/components/Map/layers/MockRadiusLayer.tsx
 import { Layer as Layer2, Source as Source2 } from "@vis.gl/react-maplibre";
-import { useMemo as useMemo4 } from "react";
-import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+import { useMemo as useMemo5 } from "react";
+import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
 var MockRadiusLayer = ({
   center,
   radiusMeters,
@@ -2559,12 +2398,12 @@ var MockRadiusLayer = ({
   // pastel palette with no neon accents at all).
   color = "#e2e8f0"
 }) => {
-  const data = useMemo4(
+  const data = useMemo5(
     () => buildGeoCircle(center, radiusMeters),
     [center, radiusMeters]
   );
-  return /* @__PURE__ */ jsxs8(Source2, { data, id: "sdk-mock-radius-source", type: "geojson", children: [
-    /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsxs9(Source2, { data, id: "sdk-mock-radius-source", type: "geojson", children: [
+    /* @__PURE__ */ jsx12(
       Layer2,
       {
         id: "sdk-mock-radius-fill",
@@ -2575,7 +2414,7 @@ var MockRadiusLayer = ({
         type: "fill"
       }
     ),
-    /* @__PURE__ */ jsx11(
+    /* @__PURE__ */ jsx12(
       Layer2,
       {
         id: "sdk-mock-radius-outline",
@@ -2592,8 +2431,8 @@ var MockRadiusLayer = ({
 
 // src/components/Map/layers/POILayers.tsx
 import { Layer as Layer3, Source as Source3, useMap } from "@vis.gl/react-maplibre";
-import { useEffect as useEffect6, useMemo as useMemo5, useState as useState7 } from "react";
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { useEffect as useEffect6, useMemo as useMemo6, useState as useState8 } from "react";
+import { jsx as jsx13 } from "react/jsx-runtime";
 function createEmojiIcon(emoji, size = 64) {
   const canvas = document.createElement("canvas");
   canvas.width = size;
@@ -2606,9 +2445,9 @@ function createEmojiIcon(emoji, size = 64) {
   return ctx.getImageData(0, 0, size, size);
 }
 var POILayers = ({ pois }) => {
-  const [loadedImages, setLoadedImages] = useState7(0);
+  const [loadedImages, setLoadedImages] = useState8(0);
   const { current: map } = useMap();
-  const glPois = useMemo5(
+  const glPois = useMemo6(
     () => pois.filter((p) => !p.displayMode || p.displayMode === "gl"),
     [pois]
   );
@@ -2652,7 +2491,7 @@ var POILayers = ({ pois }) => {
       setLoadedImages((prev) => prev + updates);
     }
   }, [map, glPois]);
-  const geojson = useMemo5(
+  const geojson = useMemo6(
     () => ({
       features: glPois.map((poi) => ({
         geometry: {
@@ -2670,7 +2509,7 @@ var POILayers = ({ pois }) => {
     }),
     [glPois]
   );
-  return /* @__PURE__ */ jsx12(Source3, { data: geojson, id: "sdk-pois", type: "geojson", children: /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx13(Source3, { data: geojson, id: "sdk-pois", type: "geojson", children: /* @__PURE__ */ jsx13(
     Layer3,
     {
       id: "sdk-poi-layer",
@@ -2707,11 +2546,11 @@ var POILayers = ({ pois }) => {
 
 // src/components/Map/layers/POIMarkers.tsx
 import { Marker } from "@vis.gl/react-maplibre";
-import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
 var POIMarkers = ({ pois, onClick }) => {
   const markerPois = pois.filter((p) => p.displayMode === "marker");
   if (markerPois.length === 0) return null;
-  return /* @__PURE__ */ jsx13(Fragment3, { children: markerPois.map((poi) => /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx14(Fragment4, { children: markerPois.map((poi) => /* @__PURE__ */ jsx14(
     Marker,
     {
       anchor: "bottom",
@@ -2721,7 +2560,7 @@ var POIMarkers = ({ pois, onClick }) => {
         e.originalEvent.stopPropagation();
         if (onClick) onClick(poi);
       },
-      children: poi.markerComponent ? poi.markerComponent : /* @__PURE__ */ jsxs9(
+      children: poi.markerComponent ? poi.markerComponent : /* @__PURE__ */ jsxs10(
         "div",
         {
           style: {
@@ -2730,7 +2569,7 @@ var POIMarkers = ({ pois, onClick }) => {
             transform: "transition-transform duration-200 hover:scale-110"
           },
           children: [
-            /* @__PURE__ */ jsx13(
+            /* @__PURE__ */ jsx14(
               "div",
               {
                 style: {
@@ -2743,7 +2582,7 @@ var POIMarkers = ({ pois, onClick }) => {
                   justifyContent: "center",
                   width: "32px"
                 },
-                children: poi.emoji ? /* @__PURE__ */ jsx13("span", { style: { fontSize: "16px" }, children: poi.emoji }) : /* @__PURE__ */ jsx13(
+                children: poi.emoji ? /* @__PURE__ */ jsx14("span", { style: { fontSize: "16px" }, children: poi.emoji }) : /* @__PURE__ */ jsx14(
                   "div",
                   {
                     style: {
@@ -2756,7 +2595,7 @@ var POIMarkers = ({ pois, onClick }) => {
                 )
               }
             ),
-            /* @__PURE__ */ jsx13(
+            /* @__PURE__ */ jsx14(
               "div",
               {
                 style: {
@@ -2779,19 +2618,19 @@ var POIMarkers = ({ pois, onClick }) => {
 
 // src/components/Map/layers/UserLocationLayer.tsx
 import { Marker as Marker2 } from "@vis.gl/react-maplibre";
-import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
 var UserLocationLayer = ({
   forcedLocation,
   heading
 }) => {
   if (!forcedLocation) return null;
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(
     Marker2,
     {
       anchor: "center",
       latitude: forcedLocation[1],
       longitude: forcedLocation[0],
-      children: /* @__PURE__ */ jsxs10(
+      children: /* @__PURE__ */ jsxs11(
         "div",
         {
           style: {
@@ -2801,7 +2640,7 @@ var UserLocationLayer = ({
             position: "relative"
           },
           children: [
-            /* @__PURE__ */ jsx14(
+            /* @__PURE__ */ jsx15(
               "div",
               {
                 style: {
@@ -2814,7 +2653,7 @@ var UserLocationLayer = ({
                 }
               }
             ),
-            heading !== void 0 && heading !== null && /* @__PURE__ */ jsx14(
+            heading !== void 0 && heading !== null && /* @__PURE__ */ jsx15(
               "div",
               {
                 style: {
@@ -2824,13 +2663,13 @@ var UserLocationLayer = ({
                   width: "60px",
                   zIndex: 0
                 },
-                children: /* @__PURE__ */ jsxs10(
+                children: /* @__PURE__ */ jsxs11(
                   "svg",
                   {
                     style: { height: "100%", width: "100%" },
                     viewBox: "0 0 100 100",
                     children: [
-                      /* @__PURE__ */ jsx14("defs", { children: /* @__PURE__ */ jsxs10(
+                      /* @__PURE__ */ jsx15("defs", { children: /* @__PURE__ */ jsxs11(
                         "radialGradient",
                         {
                           cx: "50%",
@@ -2840,7 +2679,7 @@ var UserLocationLayer = ({
                           id: "grad1",
                           r: "50%",
                           children: [
-                            /* @__PURE__ */ jsx14(
+                            /* @__PURE__ */ jsx15(
                               "stop",
                               {
                                 offset: "0%",
@@ -2850,7 +2689,7 @@ var UserLocationLayer = ({
                                 }
                               }
                             ),
-                            /* @__PURE__ */ jsx14(
+                            /* @__PURE__ */ jsx15(
                               "stop",
                               {
                                 offset: "100%",
@@ -2863,7 +2702,7 @@ var UserLocationLayer = ({
                           ]
                         }
                       ) }),
-                      /* @__PURE__ */ jsx14(
+                      /* @__PURE__ */ jsx15(
                         "path",
                         {
                           d: "M 50 50 L 35 0 A 50 50 0 0 1 65 0 Z",
@@ -2875,7 +2714,7 @@ var UserLocationLayer = ({
                 )
               }
             ),
-            /* @__PURE__ */ jsx14(
+            /* @__PURE__ */ jsx15(
               "div",
               {
                 style: {
@@ -2889,7 +2728,7 @@ var UserLocationLayer = ({
                   width: "20px",
                   zIndex: 1
                 },
-                children: /* @__PURE__ */ jsx14(
+                children: /* @__PURE__ */ jsx15(
                   "div",
                   {
                     style: {
@@ -2903,7 +2742,7 @@ var UserLocationLayer = ({
                 )
               }
             ),
-            /* @__PURE__ */ jsx14("style", { children: `@keyframes pulse { 0% { transform: scale(0.95); opacity: 0.7; } 70% { transform: scale(1.5); opacity: 0; } 100% { transform: scale(0.95); opacity: 0; } }` })
+            /* @__PURE__ */ jsx15("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; } }` })
           ]
         }
       )
@@ -2914,15 +2753,15 @@ var UserLocationLayer = ({
 // src/components/Map/Map.tsx
 import { Map as MapLibre, MapProvider } from "@vis.gl/react-maplibre";
 import React4, {
-  useCallback as useCallback5,
+  useCallback as useCallback6,
   useContext as useContext5,
   useEffect as useEffect7,
-  useMemo as useMemo6,
-  useRef as useRef6,
-  useState as useState8
+  useMemo as useMemo7,
+  useRef as useRef7,
+  useState as useState9
 } from "react";
 import "maplibre-gl/dist/maplibre-gl.css";
-import { Fragment as Fragment4, jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
 var MapInternal = ({
   initialViewState = {
     latitude: 45.90583599233422,
@@ -2962,7 +2801,7 @@ var MapInternal = ({
 }) => {
   const mapControls = useContext5(MapControlsContext);
   const mockLocation = useContext5(MockLocationContext);
-  const mapRef = useRef6(null);
+  const mapRef = useRef7(null);
   const userLocationState = useUserLocation();
   const journey = useJourney({
     navigation,
@@ -2980,24 +2819,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 = useRef6(resolvedInitialFollow);
-  const isFlyingRef = useRef6(false);
-  const flyingGenerationRef = useRef6(0);
-  const lockFlying = useCallback5(() => {
+  const isFollowingRef = useRef7(resolvedInitialFollow);
+  const isFlyingRef = useRef7(false);
+  const flyingGenerationRef = useRef7(0);
+  const lockFlying = useCallback6(() => {
     isFlyingRef.current = true;
     return ++flyingGenerationRef.current;
   }, []);
-  const releaseFlyingIfCurrent = useCallback5((flightId) => {
+  const releaseFlyingIfCurrent = useCallback6((flightId) => {
     if (flyingGenerationRef.current === flightId) {
       isFlyingRef.current = false;
     }
   }, []);
-  const [localIsFollowingUI, setLocalIsFollowingUI] = useState8(
+  const [localIsFollowingUI, setLocalIsFollowingUI] = useState9(
     resolvedInitialFollow
   );
   const isFollowingUI = mapControls ? mapControls.isFollowing : localIsFollowingUI;
   const setIsFollowingCtx = mapControls?.setIsFollowing;
-  const setFollowMode = useCallback5(
+  const setFollowMode = useCallback6(
     (follow) => {
       isFollowingRef.current = follow;
       setLocalIsFollowingUI(follow);
@@ -3016,7 +2855,7 @@ var MapInternal = ({
   if (pois.length > 0 && !mergedInteractiveLayerIds.includes("sdk-poi-layer")) {
     mergedInteractiveLayerIds.push("sdk-poi-layer");
   }
-  const prevInitialFollow = useRef6(initialFollowUser);
+  const prevInitialFollow = useRef7(initialFollowUser);
   useEffect7(() => {
     if (initialFollowUser !== prevInitialFollow.current) {
       setFollowMode(initialFollowUser);
@@ -3041,8 +2880,8 @@ var MapInternal = ({
     lockFlying,
     releaseFlyingIfCurrent
   ]);
-  const lastAutoLockedRouteRef = useRef6(null);
-  const lastModeRef = useRef6(null);
+  const lastAutoLockedRouteRef = useRef7(null);
+  const lastModeRef = useRef7(null);
   useEffect7(() => {
     if (!route || !mapRef.current) {
       if (!route) lastAutoLockedRouteRef.current = null;
@@ -3155,7 +2994,7 @@ var MapInternal = ({
     }
   }, [propDrawerState, setDrawerStateCtx]);
   const resolvedMenuItems = menuItems ?? [];
-  const { mapLibreChildren, menuContentFromChildren } = useMemo6(() => {
+  const { mapLibreChildren, menuContentFromChildren } = useMemo7(() => {
     const mapLibreChildren2 = [];
     const extractedMenuItems = [];
     React4.Children.forEach(children, (child) => {
@@ -3187,7 +3026,7 @@ var MapInternal = ({
         mapLibreChildren2.push(child);
       }
     });
-    const menuContentFromChildren2 = extractedMenuItems.length > 0 ? /* @__PURE__ */ jsx15(MapMenu, { children: extractedMenuItems }) : null;
+    const menuContentFromChildren2 = extractedMenuItems.length > 0 ? /* @__PURE__ */ jsx16(MapMenu, { children: extractedMenuItems }) : null;
     return { mapLibreChildren: mapLibreChildren2, menuContentFromChildren: menuContentFromChildren2 };
   }, [children]);
   const handleMapClick = (e) => {
@@ -3215,7 +3054,7 @@ var MapInternal = ({
     }
     if (onClick) onClick(e);
   };
-  const handleCenterOnUser = useCallback5(
+  const handleCenterOnUser = useCallback6(
     (payload) => {
       if (userLocationState.coords && mapRef.current) {
         setFollowMode(true);
@@ -3240,7 +3079,7 @@ var MapInternal = ({
       releaseFlyingIfCurrent
     ]
   );
-  const handleFlyTo = useCallback5(
+  const handleFlyTo = useCallback6(
     (coords, params) => {
       const map = mapRef.current;
       if (!map) return;
@@ -3260,7 +3099,7 @@ var MapInternal = ({
     },
     [setFollowMode, lockFlying, releaseFlyingIfCurrent]
   );
-  const handleResetBearing = useCallback5((params) => {
+  const handleResetBearing = useCallback6((params) => {
     if (mapRef.current) {
       mapRef.current.easeTo({
         bearing: 0,
@@ -3277,7 +3116,7 @@ var MapInternal = ({
       mapControls._registerFlyToCallback(handleFlyTo);
     }
   }, [mapControls, handleCenterOnUser, handleResetBearing, handleFlyTo]);
-  const handleMove = useCallback5(() => {
+  const handleMove = useCallback6(() => {
     if (mapRef.current && mapControls) {
       mapControls.setBearing(mapRef.current.getBearing());
       mapControls.setPitch(mapRef.current.getPitch());
@@ -3292,13 +3131,13 @@ var MapInternal = ({
       }
     }
   };
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs12(
     "div",
     {
       className: `w-full h-full overflow-hidden relative ${mockLocation?.isPlacingLocation ? "cursor-crosshair" : ""} ${className}`,
       style,
       children: [
-        /* @__PURE__ */ jsxs11(
+        /* @__PURE__ */ jsxs12(
           MapLibre,
           {
             attributionControl: false,
@@ -3328,30 +3167,30 @@ var MapInternal = ({
               showUserLocation && userLocationState.coords && (renderUserLocation ? renderUserLocation({
                 coords: userLocationState.coords,
                 heading: userLocationState.heading
-              }) : /* @__PURE__ */ jsx15(
+              }) : /* @__PURE__ */ jsx16(
                 UserLocationLayer,
                 {
                   forcedLocation: userLocationState.coords,
                   heading: userLocationState.heading
                 }
               )),
-              mockLocation && mockLocation.radiusMeters > 0 && userLocationState.coords && /* @__PURE__ */ jsx15(
+              mockLocation && mockLocation.radiusMeters > 0 && userLocationState.coords && /* @__PURE__ */ jsx16(
                 MockRadiusLayer,
                 {
                   center: userLocationState.coords,
                   radiusMeters: mockLocation.radiusMeters
                 }
               ),
-              displayRoute && /* @__PURE__ */ jsx15(RouteLayer, { geometry: displayRoute }),
-              pois.length > 0 && /* @__PURE__ */ jsxs11(Fragment4, { children: [
-                /* @__PURE__ */ jsx15(POILayers, { pois }),
-                /* @__PURE__ */ jsx15(POIMarkers, { onClick: onPoiClick, pois })
+              displayRoute && /* @__PURE__ */ jsx16(RouteLayer, { geometry: displayRoute }),
+              pois.length > 0 && /* @__PURE__ */ jsxs12(Fragment5, { children: [
+                /* @__PURE__ */ jsx16(POILayers, { pois }),
+                /* @__PURE__ */ jsx16(POIMarkers, { onClick: onPoiClick, pois })
               ] }),
               mapLibreChildren
             ]
           }
         ),
-        showControls && mapControls && !mapControls.hasControls && /* @__PURE__ */ jsx15(
+        showControls && mapControls && !mapControls.hasControls && /* @__PURE__ */ jsx16(
           MapControls,
           {
             drawerContentRef,
@@ -3373,12 +3212,12 @@ var SDKMapProviderWrapper = ({
 }) => {
   const context = useContext5(MapControlsContext);
   if (context) {
-    return /* @__PURE__ */ jsx15(Fragment4, { children });
+    return /* @__PURE__ */ jsx16(Fragment5, { children });
   }
-  return /* @__PURE__ */ jsx15(SDKMapProvider, { children });
+  return /* @__PURE__ */ jsx16(SDKMapProvider, { children });
 };
 var Map2 = (props) => {
-  return /* @__PURE__ */ jsx15(SDKMapProviderWrapper, { children: /* @__PURE__ */ jsx15(MapProvider, { children: /* @__PURE__ */ jsx15(MapInternal, { ...props }) }) });
+  return /* @__PURE__ */ jsx16(SDKMapProviderWrapper, { children: /* @__PURE__ */ jsx16(MapProvider, { children: /* @__PURE__ */ jsx16(MapInternal, { ...props }) }) });
 };
 
 // src/components/MapWrapper.tsx
@@ -3567,7 +3406,7 @@ var loadImage2 = (src) => new Promise((resolve, reject) => {
 });
 
 // package.json
-var version = "0.6.8";
+var version = "0.7.0";
 
 // src/sdk.ts
 function deepFreeze(obj) {
@@ -3913,6 +3752,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);
   }
@@ -3953,6 +3794,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.
@@ -3974,8 +3832,43 @@ var MiniAppSDK = class {
 var sdk = deepFreeze(new MiniAppSDK());
 
 // src/components/BridgeMocker.tsx
-import { useCallback as useCallback6, useEffect as useEffect8, useMemo as useMemo7, useRef as useRef7, useState as useState9 } from "react";
-import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
+import { useCallback as useCallback7, useEffect as useEffect8, useMemo as useMemo8, useRef as useRef8, useState as useState10 } from "react";
+import { jsx as jsx17, jsxs as jsxs13 } from "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",
   "variant07",
@@ -4062,19 +3955,19 @@ var BridgeMocker = ({
   mockJWTToken,
   children
 }) => {
-  const [autoMove, setAutoMove] = useState9(isMoving);
-  const [location, setLocation] = useState9(initialLocation);
-  const [heading, setHeading] = useState9(0);
-  const [speedMultiplier, setSpeedMultiplier] = useState9(simulationSpeed);
-  const [isReady, setIsReady] = useState9(false);
-  const [isMinimized, setIsMinimized] = useState9(true);
-  const [radiusMeters, setRadiusMeters] = useState9(0);
-  const [radiusUnit, setRadiusUnit] = useState9("m");
-  const [isPlacingLocation, setIsPlacingLocation] = useState9(false);
-  const streamIntervalRef = useRef7(null);
-  const pathIndexRef = useRef7(0);
-  const activeConfigRef = useRef7(null);
-  const stateRef = useRef7({
+  const [autoMove, setAutoMove] = useState10(isMoving);
+  const [location, setLocation] = useState10(initialLocation);
+  const [heading, setHeading] = useState10(0);
+  const [speedMultiplier, setSpeedMultiplier] = useState10(simulationSpeed);
+  const [isReady, setIsReady] = useState10(false);
+  const [isMinimized, setIsMinimized] = useState10(true);
+  const [radiusMeters, setRadiusMeters] = useState10(0);
+  const [radiusUnit, setRadiusUnit] = useState10("m");
+  const [isPlacingLocation, setIsPlacingLocation] = useState10(false);
+  const streamIntervalRef = useRef8(null);
+  const pathIndexRef = useRef8(0);
+  const activeConfigRef = useRef8(null);
+  const stateRef = useRef8({
     autoMove,
     heading,
     location,
@@ -4086,7 +3979,7 @@ var BridgeMocker = ({
     simulationPath,
     speedMultiplier
   });
-  const pushLocationUpdateFor = useCallback6(
+  const pushLocationUpdateFor = useCallback7(
     (coords, headingDeg) => {
       const currentState = stateRef.current;
       const payload = {
@@ -4118,11 +4011,11 @@ var BridgeMocker = ({
     },
     []
   );
-  const pushLocationUpdate = useCallback6(() => {
+  const pushLocationUpdate = useCallback7(() => {
     const currentState = stateRef.current;
     pushLocationUpdateFor(currentState.location, currentState.heading);
   }, [pushLocationUpdateFor]);
-  const placeLocation = useCallback6(
+  const placeLocation = useCallback7(
     (coords) => {
       setLocation(coords);
       setIsPlacingLocation(false);
@@ -4332,6 +4225,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,
@@ -4350,7 +4261,7 @@ var BridgeMocker = ({
     };
   }, [appId]);
   const radiusInMeters = radiusUnit === "km" ? radiusMeters * 1e3 : radiusMeters;
-  const mockLocationContextValue = useMemo7(
+  const mockLocationContextValue = useMemo8(
     () => ({
       isPlacingLocation,
       placeLocation,
@@ -4359,9 +4270,9 @@ var BridgeMocker = ({
     [isPlacingLocation, placeLocation, radiusInMeters]
   );
   if (!isReady) return null;
-  return /* @__PURE__ */ jsxs12("div", { className: "relative w-full h-full", children: [
-    /* @__PURE__ */ jsx16("div", { className: "w-full h-full", children: /* @__PURE__ */ jsx16(MockLocationContext.Provider, { value: mockLocationContextValue, children }) }),
-    isMinimized ? /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsxs13("div", { className: "relative w-full h-full", children: [
+    /* @__PURE__ */ jsx17("div", { className: "w-full h-full", children: /* @__PURE__ */ jsx17(MockLocationContext.Provider, { value: mockLocationContextValue, children }) }),
+    isMinimized ? /* @__PURE__ */ jsx17(
       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!",
@@ -4369,7 +4280,7 @@ var BridgeMocker = ({
         title: "Open Simulation Controls",
         type: "button",
         variant: "ghost",
-        children: /* @__PURE__ */ jsxs12(
+        children: /* @__PURE__ */ jsxs13(
           "svg",
           {
             className: "group-hover:scale-110 transition-transform",
@@ -4383,34 +4294,34 @@ var BridgeMocker = ({
             width: "14",
             xmlns: "http://www.w3.org/2000/svg",
             children: [
-              /* @__PURE__ */ jsx16("path", { d: "M21 4H3" }),
-              /* @__PURE__ */ jsx16("path", { d: "M10 8H3" }),
-              /* @__PURE__ */ jsx16("path", { d: "M21 12H3" }),
-              /* @__PURE__ */ jsx16("path", { d: "M10 16H3" }),
-              /* @__PURE__ */ jsx16("path", { d: "M21 20H3" }),
-              /* @__PURE__ */ jsx16("circle", { cx: "14", cy: "8", r: "2" }),
-              /* @__PURE__ */ jsx16("circle", { cx: "14", cy: "16", r: "2" })
+              /* @__PURE__ */ jsx17("path", { d: "M21 4H3" }),
+              /* @__PURE__ */ jsx17("path", { d: "M10 8H3" }),
+              /* @__PURE__ */ jsx17("path", { d: "M21 12H3" }),
+              /* @__PURE__ */ jsx17("path", { d: "M10 16H3" }),
+              /* @__PURE__ */ jsx17("path", { d: "M21 20H3" }),
+              /* @__PURE__ */ jsx17("circle", { cx: "14", cy: "8", r: "2" }),
+              /* @__PURE__ */ jsx17("circle", { cx: "14", cy: "16", r: "2" })
             ]
           }
         )
       }
-    ) : /* @__PURE__ */ jsxs12(
+    ) : /* @__PURE__ */ jsxs13(
       "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__ */ jsxs12(
+          /* @__PURE__ */ jsxs13(
             "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__ */ jsxs12("span", { className: "font-bold text-slate-100 flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsx16("span", { className: "text-lg", children: "\u{1F6E0}\uFE0F" }),
+                /* @__PURE__ */ jsxs13("span", { className: "font-bold text-slate-100 flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx17("span", { className: "text-lg", children: "\u{1F6E0}\uFE0F" }),
                   " Simulation Controls"
                 ] }),
-                /* @__PURE__ */ jsx16(
+                /* @__PURE__ */ jsx17(
                   Button,
                   {
                     className: "text-slate-500 hover:text-white p-0 h-auto hover:bg-transparent cursor-pointer",
@@ -4422,10 +4333,10 @@ var BridgeMocker = ({
               ]
             }
           ),
-          /* @__PURE__ */ jsxs12("div", { className: "p-4 flex flex-col gap-3", children: [
-            /* @__PURE__ */ jsxs12("div", { className: "flex justify-between items-center", children: [
-              /* @__PURE__ */ jsxs12("label", { className: "flex items-center gap-2 cursor-pointer", children: [
-                /* @__PURE__ */ jsx16(
+          /* @__PURE__ */ jsxs13("div", { className: "p-4 flex flex-col gap-3", children: [
+            /* @__PURE__ */ jsxs13("div", { className: "flex justify-between items-center", children: [
+              /* @__PURE__ */ jsxs13("label", { className: "flex items-center gap-2 cursor-pointer", children: [
+                /* @__PURE__ */ jsx17(
                   "input",
                   {
                     checked: autoMove,
@@ -4434,20 +4345,20 @@ var BridgeMocker = ({
                     type: "checkbox"
                   }
                 ),
-                /* @__PURE__ */ jsxs12("span", { className: "text-slate-200 font-bold", children: [
+                /* @__PURE__ */ jsxs13("span", { className: "text-slate-200 font-bold", children: [
                   "Auto-Move ",
                   simulationPath ? "(Path)" : "(Random)"
                 ] })
               ] }),
-              /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ jsx16("span", { className: "text-[10px] text-slate-500", children: "Speed:" }),
-                /* @__PURE__ */ jsx16(
+              /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx17("span", { className: "text-[10px] text-slate-500", children: "Speed:" }),
+                /* @__PURE__ */ jsx17(
                   "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__ */ jsxs12("option", { value: s, children: [
+                    children: [1, 2, 5, 10, 50, 100, 250].map((s) => /* @__PURE__ */ jsxs13("option", { value: s, children: [
                       s,
                       "x"
                     ] }, s))
@@ -4455,10 +4366,10 @@ var BridgeMocker = ({
                 )
               ] })
             ] }),
-            /* @__PURE__ */ jsxs12("div", { className: "grid grid-cols-2 gap-2", children: [
-              /* @__PURE__ */ jsxs12("div", { className: "flex flex-col gap-1", children: [
-                /* @__PURE__ */ jsx16("span", { className: "text-[10px] text-slate-500 text-left", children: "Lng" }),
-                /* @__PURE__ */ jsx16(
+            /* @__PURE__ */ jsxs13("div", { className: "grid grid-cols-2 gap-2", children: [
+              /* @__PURE__ */ jsxs13("div", { className: "flex flex-col gap-1", children: [
+                /* @__PURE__ */ jsx17("span", { className: "text-[10px] text-slate-500 text-left", children: "Lng" }),
+                /* @__PURE__ */ jsx17(
                   "input",
                   {
                     className: "bg-slate-800 border border-slate-700 rounded px-2 py-1 text-white focus:outline-none focus:border-blue-500",
@@ -4473,9 +4384,9 @@ var BridgeMocker = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxs12("div", { className: "flex flex-col gap-1", children: [
-                /* @__PURE__ */ jsx16("span", { className: "text-[10px] text-slate-500 text-left", children: "Lat" }),
-                /* @__PURE__ */ jsx16(
+              /* @__PURE__ */ jsxs13("div", { className: "flex flex-col gap-1", children: [
+                /* @__PURE__ */ jsx17("span", { className: "text-[10px] text-slate-500 text-left", children: "Lat" }),
+                /* @__PURE__ */ jsx17(
                   "input",
                   {
                     className: "bg-slate-800 border border-slate-700 rounded px-2 py-1 text-white focus:outline-none focus:border-blue-500",
@@ -4490,9 +4401,9 @@ var BridgeMocker = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxs12("div", { className: "flex flex-col gap-1 col-span-2", children: [
-                /* @__PURE__ */ jsx16("span", { className: "text-[10px] text-slate-500", children: "Heading (Degrees)" }),
-                /* @__PURE__ */ jsx16(
+              /* @__PURE__ */ jsxs13("div", { className: "flex flex-col gap-1 col-span-2", children: [
+                /* @__PURE__ */ jsx17("span", { className: "text-[10px] text-slate-500", children: "Heading (Degrees)" }),
+                /* @__PURE__ */ jsx17(
                   "input",
                   {
                     className: "w-full accent-blue-500",
@@ -4506,13 +4417,13 @@ var BridgeMocker = ({
                     value: heading
                   }
                 ),
-                /* @__PURE__ */ jsxs12("div", { className: "text-right text-slate-400", children: [
+                /* @__PURE__ */ jsxs13("div", { className: "text-right text-slate-400", children: [
                   heading,
                   "\xB0"
                 ] })
               ] })
             ] }),
-            /* @__PURE__ */ jsx16(
+            /* @__PURE__ */ jsx17(
               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"}`,
@@ -4522,11 +4433,11 @@ var BridgeMocker = ({
                 children: isPlacingLocation ? "\u{1F4CD} Click the map to drop location\u2026" : "\u{1F4CD} Drop location on map"
               }
             ),
-            /* @__PURE__ */ jsxs12("div", { className: "flex flex-col gap-1 border-t border-slate-800 pt-3", children: [
-              /* @__PURE__ */ jsxs12("div", { className: "flex justify-between items-center", children: [
-                /* @__PURE__ */ jsx16("span", { className: "text-[10px] text-slate-500", children: "Scan Radius" }),
-                /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-1", children: [
-                  /* @__PURE__ */ jsx16(
+            /* @__PURE__ */ jsxs13("div", { className: "flex flex-col gap-1 border-t border-slate-800 pt-3", children: [
+              /* @__PURE__ */ jsxs13("div", { className: "flex justify-between items-center", children: [
+                /* @__PURE__ */ jsx17("span", { className: "text-[10px] text-slate-500", children: "Scan Radius" }),
+                /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-1", children: [
+                  /* @__PURE__ */ jsx17(
                     "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",
@@ -4536,21 +4447,21 @@ var BridgeMocker = ({
                       value: radiusMeters
                     }
                   ),
-                  /* @__PURE__ */ jsxs12(
+                  /* @__PURE__ */ jsxs13(
                     "select",
                     {
                       className: "bg-slate-800 border border-slate-700 rounded px-1 py-0.5 text-white text-[10px] focus:outline-none focus:border-blue-500",
                       onChange: (e) => setRadiusUnit(e.target.value),
                       value: radiusUnit,
                       children: [
-                        /* @__PURE__ */ jsx16("option", { value: "m", children: "m" }),
-                        /* @__PURE__ */ jsx16("option", { value: "km", children: "km" })
+                        /* @__PURE__ */ jsx17("option", { value: "m", children: "m" }),
+                        /* @__PURE__ */ jsx17("option", { value: "km", children: "km" })
                       ]
                     }
                   )
                 ] })
               ] }),
-              /* @__PURE__ */ jsx16(
+              /* @__PURE__ */ jsx17(
                 "input",
                 {
                   className: "w-full accent-blue-500",
@@ -4562,7 +4473,7 @@ var BridgeMocker = ({
                   value: radiusMeters
                 }
               ),
-              /* @__PURE__ */ jsx16("div", { className: "text-right text-slate-400", children: radiusMeters === 0 ? "hidden" : `${radiusMeters}${radiusUnit} radius around user` })
+              /* @__PURE__ */ jsx17("div", { className: "text-right text-slate-400", children: radiusMeters === 0 ? "hidden" : `${radiusMeters}${radiusUnit} radius around user` })
             ] })
           ] })
         ]
@@ -4572,20 +4483,20 @@ var BridgeMocker = ({
 };
 
 // src/components/DebugConsole.tsx
-import { useCallback as useCallback7, useEffect as useEffect9, useRef as useRef8, useState as useState10 } from "react";
-import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
+import { useCallback as useCallback8, useEffect as useEffect9, useRef as useRef9, useState as useState11 } from "react";
+import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
 var DebugConsole = ({
   isOpen: initialOpen = false,
   onClose
 }) => {
-  const [showConsole, setShowConsole] = useState10(initialOpen);
-  const [logs, setLogs] = useState10([]);
-  const scrollRef = useRef8(null);
+  const [showConsole, setShowConsole] = useState11(initialOpen);
+  const [logs, setLogs] = useState11([]);
+  const scrollRef = useRef9(null);
   useEffect9(() => {
     setShowConsole(initialOpen);
   }, [initialOpen]);
   const clearLogs = () => setLogs([]);
-  const addLog = useCallback7((label, data) => {
+  const addLog = useCallback8((label, data) => {
     if (label.includes("LOCATION_STREAM_UPDATE" /* LOCATION_STREAM_UPDATE */)) return;
     const entry = {
       content: typeof data === "string" ? data : JSON.stringify(data, null, 2),
@@ -4617,7 +4528,7 @@ var DebugConsole = ({
     };
   }, [addLog]);
   if (!showConsole) {
-    return /* @__PURE__ */ jsx17(
+    return /* @__PURE__ */ jsx18(
       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!",
@@ -4625,7 +4536,7 @@ var DebugConsole = ({
         title: "Open Debug Console",
         type: "button",
         variant: "ghost",
-        children: /* @__PURE__ */ jsxs13(
+        children: /* @__PURE__ */ jsxs14(
           "svg",
           {
             className: "group-hover:scale-110 transition-transform",
@@ -4639,31 +4550,31 @@ var DebugConsole = ({
             width: "14",
             xmlns: "http://www.w3.org/2000/svg",
             children: [
-              /* @__PURE__ */ jsx17("path", { d: "m8 2 1.88 1.88" }),
-              /* @__PURE__ */ jsx17("path", { d: "M14.12 3.88 16 2" }),
-              /* @__PURE__ */ jsx17("path", { d: "M9 7.13v-1a3.003 3.003 0 1 1 6 0v1" }),
-              /* @__PURE__ */ jsx17("path", { d: "M12 20c-3.3 0-6-2.7-6-6v-3a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v3c0 3.3-2.7 6-6 6" }),
-              /* @__PURE__ */ jsx17("path", { d: "M12 20v-9" }),
-              /* @__PURE__ */ jsx17("path", { d: "M6.53 9C4.6 8.8 3 7.1 3 5" }),
-              /* @__PURE__ */ jsx17("path", { d: "M6 13H2" }),
-              /* @__PURE__ */ jsx17("path", { d: "M3 21c0-2.1 1.7-3.9 3.8-4" }),
-              /* @__PURE__ */ jsx17("path", { d: "M20.97 5c0 2.1-1.6 3.8-3.5 4" }),
-              /* @__PURE__ */ jsx17("path", { d: "M22 13h-4" }),
-              /* @__PURE__ */ jsx17("path", { d: "M17.2 17c2.1.1 3.8 1.9 3.8 4" })
+              /* @__PURE__ */ jsx18("path", { d: "m8 2 1.88 1.88" }),
+              /* @__PURE__ */ jsx18("path", { d: "M14.12 3.88 16 2" }),
+              /* @__PURE__ */ jsx18("path", { d: "M9 7.13v-1a3.003 3.003 0 1 1 6 0v1" }),
+              /* @__PURE__ */ jsx18("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__ */ jsx18("path", { d: "M12 20v-9" }),
+              /* @__PURE__ */ jsx18("path", { d: "M6.53 9C4.6 8.8 3 7.1 3 5" }),
+              /* @__PURE__ */ jsx18("path", { d: "M6 13H2" }),
+              /* @__PURE__ */ jsx18("path", { d: "M3 21c0-2.1 1.7-3.9 3.8-4" }),
+              /* @__PURE__ */ jsx18("path", { d: "M20.97 5c0 2.1-1.6 3.8-3.5 4" }),
+              /* @__PURE__ */ jsx18("path", { d: "M22 13h-4" }),
+              /* @__PURE__ */ jsx18("path", { d: "M17.2 17c2.1.1 3.8 1.9 3.8 4" })
             ]
           }
         )
       }
     );
   }
-  return /* @__PURE__ */ jsxs13("div", { className: "fixed inset-x-0 bottom-0 w-full bg-[#0a080f] border-t border-slate-800 z-[9998] p-4 shadow-2xl flex flex-col animate-in slide-in-from-bottom duration-300", children: [
-    /* @__PURE__ */ jsxs13("div", { className: "flex items-center justify-between mb-2", children: [
-      /* @__PURE__ */ jsxs13("span", { className: "text-[10px] font-bold uppercase tracking-widest text-slate-400 flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx17("span", { className: "w-2 h-2 rounded-full bg-emerald-500 animate-pulse" }),
+  return /* @__PURE__ */ jsxs14("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__ */ jsxs14("div", { className: "flex items-center justify-between mb-2", children: [
+      /* @__PURE__ */ jsxs14("span", { className: "text-[10px] font-bold uppercase tracking-widest text-slate-400 flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx18("span", { className: "w-2 h-2 rounded-full bg-emerald-500 animate-pulse" }),
         "UP SDK Debug Console"
       ] }),
-      /* @__PURE__ */ jsxs13("div", { className: "flex gap-4", children: [
-        /* @__PURE__ */ jsx17(
+      /* @__PURE__ */ jsxs14("div", { className: "flex gap-4", children: [
+        /* @__PURE__ */ jsx18(
           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",
@@ -4673,7 +4584,7 @@ var DebugConsole = ({
             children: "Clear"
           }
         ),
-        /* @__PURE__ */ jsx17(
+        /* @__PURE__ */ jsx18(
           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",
@@ -4688,21 +4599,21 @@ var DebugConsole = ({
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsx17(
+    /* @__PURE__ */ jsx18(
       "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__ */ jsx17("div", { className: "text-slate-600 italic text-center py-8", children: "No logs yet. Interacting with the SDK will show events here." }) : logs.map((log) => /* @__PURE__ */ jsxs13(
+        children: logs.length === 0 ? /* @__PURE__ */ jsx18("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__ */ jsxs14(
           "div",
           {
             className: "mb-3 pb-3 border-b border-slate-900/50 last:border-0 last:mb-0 last:pb-0",
             children: [
-              /* @__PURE__ */ jsxs13("div", { className: "flex gap-2 text-slate-500 mb-1 items-center", children: [
-                /* @__PURE__ */ jsx17("span", { className: "text-[8px]", children: log.time }),
-                /* @__PURE__ */ jsx17("span", { className: "font-bold text-white uppercase text-[8px] bg-slate-800 px-1.5 py-0.5 rounded leading-none", children: log.label })
+              /* @__PURE__ */ jsxs14("div", { className: "flex gap-2 text-slate-500 mb-1 items-center", children: [
+                /* @__PURE__ */ jsx18("span", { className: "text-[8px]", children: log.time }),
+                /* @__PURE__ */ jsx18("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__ */ jsx17("pre", { className: "whitespace-pre-wrap break-all opacity-90", children: log.content })
+              /* @__PURE__ */ jsx18("pre", { className: "whitespace-pre-wrap break-all opacity-90", children: log.content })
             ]
           },
           log.id
@@ -4713,8 +4624,8 @@ var DebugConsole = ({
 };
 
 // src/components/PullToRefresh.tsx
-import { useEffect as useEffect10, useRef as useRef9, useState as useState11 } from "react";
-import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
+import { useEffect as useEffect10, useRef as useRef10, useState as useState12 } from "react";
+import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
 var DEFAULT_PULL_THRESHOLD = 64;
 var DEFAULT_MAX_PULL = 96;
 var RESISTANCE = 0.5;
@@ -4725,7 +4636,7 @@ function DefaultIndicator({
   progress,
   isRefreshing
 }) {
-  return /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsxs15(
     "div",
     {
       style: {
@@ -4740,7 +4651,7 @@ function DefaultIndicator({
         width: 28
       },
       children: [
-        /* @__PURE__ */ jsxs14(
+        /* @__PURE__ */ jsxs15(
           "svg",
           {
             height: 14,
@@ -4752,8 +4663,8 @@ function DefaultIndicator({
             viewBox: "0 0 24 24",
             width: 14,
             children: [
-              /* @__PURE__ */ jsx18("title", { children: "Refreshing" }),
-              /* @__PURE__ */ jsx18(
+              /* @__PURE__ */ jsx19("title", { children: "Refreshing" }),
+              /* @__PURE__ */ jsx19(
                 "path",
                 {
                   d: "M21 12a9 9 0 1 1-2.64-6.36",
@@ -4766,7 +4677,7 @@ function DefaultIndicator({
             ]
           }
         ),
-        /* @__PURE__ */ jsx18("style", { children: "@keyframes up-sdk-ptr-spin { to { transform: rotate(360deg); } }" })
+        /* @__PURE__ */ jsx19("style", { children: "@keyframes up-sdk-ptr-spin { to { transform: rotate(360deg); } }" })
       ]
     }
   );
@@ -4780,26 +4691,45 @@ var PullToRefresh = ({
   maxPull = DEFAULT_MAX_PULL,
   renderIndicator
 }) => {
-  const containerRef = useRef9(null);
-  const startYRef = useRef9(null);
-  const lastYRef = useRef9(0);
-  const lastMoveTimeRef = useRef9(0);
-  const velocityRef = useRef9(0);
-  const pointerIdRef = useRef9(null);
-  const isPullingRef = useRef9(false);
-  const pullDistanceRef = useRef9(0);
-  const flingRafRef = useRef9(null);
-  const [pullDistance, setPullDistance] = useState11(0);
-  const [isRefreshing, setIsRefreshing] = useState11(false);
-  const [isTracking, setIsTracking] = useState11(false);
-  const disabledRef = useRef9(disabled);
+  const containerRef = useRef10(null);
+  const startYRef = useRef10(null);
+  const lastYRef = useRef10(0);
+  const lastMoveTimeRef = useRef10(0);
+  const velocityRef = useRef10(0);
+  const pointerIdRef = useRef10(null);
+  const isPullingRef = useRef10(false);
+  const pullDistanceRef = useRef10(0);
+  const flingRafRef = useRef10(null);
+  const [pullDistance, setPullDistance] = useState12(0);
+  const [isRefreshing, setIsRefreshing] = useState12(false);
+  const [isTracking, setIsTracking] = useState12(false);
+  const disabledRef = useRef10(disabled);
   disabledRef.current = disabled;
-  const onRefreshRef = useRef9(onRefresh);
+  const onRefreshRef = useRef10(onRefresh);
   onRefreshRef.current = onRefresh;
-  const pullThresholdRef = useRef9(pullThreshold);
+  const pullThresholdRef = useRef10(pullThreshold);
   pullThresholdRef.current = pullThreshold;
-  const maxPullRef = useRef9(maxPull);
+  const maxPullRef = useRef10(maxPull);
   maxPullRef.current = maxPull;
+  useEffect10(() => {
+    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);
+    };
+  }, []);
   useEffect10(() => {
     const el = containerRef.current;
     if (!el) return;
@@ -4931,7 +4861,7 @@ var PullToRefresh = ({
   const indicatorHeight = isRefreshing ? pullThreshold : pullDistance;
   const progress = Math.min(indicatorHeight / pullThreshold, 1);
   const isSettling = pullDistance === 0 && !isRefreshing && !isTracking;
-  return /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsxs15(
     "div",
     {
       className: `up-sdk-pull-to-refresh ${className}`,
@@ -4942,8 +4872,8 @@ var PullToRefresh = ({
         touchAction: "none"
       },
       children: [
-        /* @__PURE__ */ jsx18("style", { children: ".up-sdk-pull-to-refresh::-webkit-scrollbar { display: none; } .up-sdk-pull-to-refresh { scrollbar-width: none; -ms-overflow-style: none; }" }),
-        /* @__PURE__ */ jsx18(
+        /* @__PURE__ */ jsx19("style", { children: ".up-sdk-pull-to-refresh::-webkit-scrollbar { display: none; } .up-sdk-pull-to-refresh { scrollbar-width: none; -ms-overflow-style: none; }" }),
+        /* @__PURE__ */ jsx19(
           "div",
           {
             style: {
@@ -4956,7 +4886,7 @@ var PullToRefresh = ({
               userSelect: "none",
               width: "100%"
             },
-            children: renderIndicator ? renderIndicator({ isRefreshing, progress }) : /* @__PURE__ */ jsx18(DefaultIndicator, { isRefreshing, progress })
+            children: renderIndicator ? renderIndicator({ isRefreshing, progress }) : /* @__PURE__ */ jsx19(DefaultIndicator, { isRefreshing, progress })
           }
         ),
         children
@@ -4967,15 +4897,15 @@ var PullToRefresh = ({
 
 // src/components/QRScanner.tsx
 import jsQR2 from "jsqr";
-import { useEffect as useEffect11, useRef as useRef10, useState as useState12 } from "react";
-import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
+import { useEffect as useEffect11, useRef as useRef11, useState as useState13 } from "react";
+import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
 function QRScanner({ onScan, onError, className = "" }) {
-  const videoRef = useRef10(null);
-  const canvasRef = useRef10(null);
-  const streamRef = useRef10(null);
-  const tickRequestRef = useRef10(null);
-  const hasScannedRef = useRef10(false);
-  const [isReady, setIsReady] = useState12(false);
+  const videoRef = useRef11(null);
+  const canvasRef = useRef11(null);
+  const streamRef = useRef11(null);
+  const tickRequestRef = useRef11(null);
+  const hasScannedRef = useRef11(false);
+  const [isReady, setIsReady] = useState13(false);
   useEffect11(() => {
     let cancelled = false;
     hasScannedRef.current = false;
@@ -5059,7 +4989,7 @@ function QRScanner({ onScan, onError, className = "" }) {
       cleanup();
     };
   }, []);
-  return /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs16(
     "div",
     {
       className,
@@ -5071,7 +5001,7 @@ function QRScanner({ onScan, onError, className = "" }) {
         position: "relative"
       },
       children: [
-        /* @__PURE__ */ jsx19(
+        /* @__PURE__ */ jsx20(
           "video",
           {
             playsInline: true,
@@ -5079,8 +5009,8 @@ function QRScanner({ onScan, onError, className = "" }) {
             style: { height: "100%", objectFit: "cover", width: "100%" }
           }
         ),
-        /* @__PURE__ */ jsx19("canvas", { ref: canvasRef, style: { display: "none" } }),
-        isReady && /* @__PURE__ */ jsx19(
+        /* @__PURE__ */ jsx20("canvas", { ref: canvasRef, style: { display: "none" } }),
+        isReady && /* @__PURE__ */ jsx20(
           "div",
           {
             style: {
@@ -5101,8 +5031,8 @@ function QRScanner({ onScan, onError, className = "" }) {
 }
 
 // src/components/SDKProvider.tsx
-import { createContext as createContext3, useContext as useContext6, useMemo as useMemo8 } from "react";
-import { Fragment as Fragment5, jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
+import { createContext as createContext3, useContext as useContext6, useMemo as useMemo9 } from "react";
+import { Fragment as Fragment6, jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
 var SDKContext = createContext3({ isMocked: false });
 var useIsMocked = () => useContext6(SDKContext).isMocked;
 var SDKProvider = ({
@@ -5111,25 +5041,25 @@ var SDKProvider = ({
   ...mockerProps
 }) => {
   const isMocked = typeof window !== "undefined" && !(window.__UP_REACT_NATIVE_APP__ === true || !!window.ReactNativeWebView);
-  const value = useMemo8(() => ({ isMocked }), [isMocked]);
-  const content = /* @__PURE__ */ jsxs16(Fragment5, { children: [
+  const value = useMemo9(() => ({ isMocked }), [isMocked]);
+  const content = /* @__PURE__ */ jsxs17(Fragment6, { children: [
     children,
-    (debug || isMocked) && /* @__PURE__ */ jsx20(DebugConsole, {})
+    (debug || isMocked) && /* @__PURE__ */ jsx21(DebugConsole, {})
   ] });
   if (isMocked) {
-    return /* @__PURE__ */ jsx20(SDKContext.Provider, { value, children: /* @__PURE__ */ jsx20(BridgeMocker, { ...mockerProps, children: content }) });
+    return /* @__PURE__ */ jsx21(SDKContext.Provider, { value, children: /* @__PURE__ */ jsx21(BridgeMocker, { ...mockerProps, children: content }) });
   }
-  return /* @__PURE__ */ jsx20(SDKContext.Provider, { value, children: content });
+  return /* @__PURE__ */ jsx21(SDKContext.Provider, { value, children: content });
 };
 
 // src/components/SwipeCarousel.tsx
 import {
   useEffect as useEffect12,
   useLayoutEffect,
-  useRef as useRef11,
-  useState as useState13
+  useRef as useRef12,
+  useState as useState14
 } from "react";
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 var DIRECTION_LOCK_THRESHOLD_PX = 8;
 var SWIPE_DISTANCE_THRESHOLD_PX = 40;
 var SWIPE_VELOCITY_THRESHOLD = 0.4;
@@ -5156,21 +5086,21 @@ var SwipeCarousel = ({
   overscan = DEFAULT_OVERSCAN,
   visibleOverscan = DEFAULT_VISIBLE_OVERSCAN
 }) => {
-  const containerRef = useRef11(null);
-  const [containerWidth, setContainerWidth] = useState13(0);
-  const [dragX, setDragX] = useState13(0);
-  const [dragY, setDragY] = useState13(0);
-  const [isDraggingX, setIsDraggingX] = useState13(false);
-  const [isDraggingY, setIsDraggingY] = useState13(false);
-  const touchStateRef = useRef11(null);
-  const [internalIndex, setInternalIndex] = useState13(
+  const containerRef = useRef12(null);
+  const [containerWidth, setContainerWidth] = useState14(0);
+  const [dragX, setDragX] = useState14(0);
+  const [dragY, setDragY] = useState14(0);
+  const [isDraggingX, setIsDraggingX] = useState14(false);
+  const [isDraggingY, setIsDraggingY] = useState14(false);
+  const touchStateRef = useRef12(null);
+  const [internalIndex, setInternalIndex] = useState14(
     () => Math.max(
       0,
       items.findIndex((item) => item.id === activeId)
     )
   );
-  const prevActiveIdRef = useRef11(activeId);
-  const [timingWaiting, setTimingWaiting] = useState13(true);
+  const prevActiveIdRef = useRef12(activeId);
+  const [timingWaiting, setTimingWaiting] = useState14(true);
   useEffect12(() => {
     const timer = setTimeout(() => {
       setTimingWaiting(false);
@@ -5306,7 +5236,7 @@ var SwipeCarousel = ({
   };
   const windowStart = Math.max(0, activeIndex - overscan);
   const windowEnd = Math.min(items.length - 1, activeIndex + overscan);
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     "div",
     {
       className: `relative overflow-hidden touch-pan-y ${className ?? ""}`,
@@ -5315,7 +5245,7 @@ var SwipeCarousel = ({
       onTouchMove: handleTouchMove,
       onTouchStart: handleTouchStart,
       ref: containerRef,
-      children: /* @__PURE__ */ jsx21(
+      children: /* @__PURE__ */ jsx22(
         "div",
         {
           className: "relative h-full",
@@ -5330,7 +5260,7 @@ var SwipeCarousel = ({
             const verticalOffset = isActive ? dragY : 0;
             const distance = Math.abs(index - activeIndex);
             const isVisible = distance <= visibleOverscan;
-            return /* @__PURE__ */ jsx21(
+            return /* @__PURE__ */ jsx22(
               "div",
               {
                 className: `absolute top-0 left-0 h-full shrink-0 ${itemClassName ?? ""} ${item.className ?? ""}`,
@@ -5358,6 +5288,40 @@ var SwipeCarousel = ({
   );
 };
 
+// src/hooks/useTapAction.ts
+import { useRef as useRef13 } from "react";
+var TAP_MOVE_TOLERANCE_PX = 10;
+var CLICK_SUPPRESS_WINDOW_MS = 500;
+var useTapAction = (action) => {
+  const startRef = useRef13(null);
+  const handledByTouchRef = useRef13(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/services/apiService.ts
 function buildUrl(baseUrl, path) {
   if (path.startsWith("http://") || path.startsWith("https://")) {
@@ -5626,6 +5590,7 @@ export {
   useMapControls,
   useMockLocation,
   useRoute,
+  useTapAction,
   useTrimmedRoute,
   useUserLocation
 };