@cloudparse/up-miniapps-sdk 0.2.0 → 0.2.2

package/dist/index.js

@@ -5,6 +5,58 @@ import {
   handleRouteRequest
 } from "./chunk-S4UHRBSM.js";
 
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/ui/button.tsx
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    defaultVariants: {
+      size: "default",
+      variant: "default"
+    },
+    variants: {
+      size: {
+        default: "h-10 px-4 py-2",
+        icon: "h-10 w-10",
+        lg: "h-11 rounded-md px-8",
+        sm: "h-9 rounded-md px-3"
+      },
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80"
+      }
+    }
+  }
+);
+var Button = React.forwardRef(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        className: cn(buttonVariants({ className, size, variant })),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
 // src/bridge.ts
 var Bridge = class {
   callbacks = /* @__PURE__ */ new Map();
@@ -166,9 +218,127 @@ var Bridge = class {
   }
 };
 
+// src/components/ui/sheet.tsx
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { cva as cva2 } from "class-variance-authority";
+import { X } from "lucide-react";
+import * as React2 from "react";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var Sheet = SheetPrimitive.Root;
+var SheetPortal = SheetPrimitive.Portal;
+var SheetOverlay = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
+  SheetPrimitive.Overlay,
+  {
+    className: cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    ),
+    ...props,
+    ref
+  }
+));
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
+var sheetVariants = cva2(
+  "z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  {
+    defaultVariants: {
+      side: "right"
+    },
+    variants: {
+      side: {
+        bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right: "inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top"
+      }
+    }
+  }
+);
+var SheetContent = React2.forwardRef(({ side = "right", className, children, portal = true, ...props }, ref) => {
+  const Content2 = /* @__PURE__ */ jsxs(
+    SheetPrimitive.Content,
+    {
+      className: cn(
+        sheetVariants({ side }),
+        portal ? "fixed" : "absolute",
+        className
+      ),
+      ref,
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsxs(SheetPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-105 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary", children: [
+          /* @__PURE__ */ jsx2(X, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx2("span", { className: "sr-only", children: "Close" })
+        ] })
+      ]
+    }
+  );
+  if (!portal) {
+    return Content2;
+  }
+  return /* @__PURE__ */ jsxs(SheetPortal, { children: [
+    /* @__PURE__ */ jsx2(SheetOverlay, {}),
+    Content2
+  ] });
+});
+SheetContent.displayName = SheetPrimitive.Content.displayName;
+var SheetHeader = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx2(
+  "div",
+  {
+    className: cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    ),
+    ...props
+  }
+);
+SheetHeader.displayName = "SheetHeader";
+var SheetFooter = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx2(
+  "div",
+  {
+    className: cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    ),
+    ...props
+  }
+);
+SheetFooter.displayName = "SheetFooter";
+var SheetTitle = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
+  SheetPrimitive.Title,
+  {
+    className: cn("text-lg font-semibold text-foreground", className),
+    ref,
+    ...props
+  }
+));
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
+var SheetDescription = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
+  SheetPrimitive.Description,
+  {
+    className: cn("text-sm text-muted-foreground", className),
+    ref,
+    ...props
+  }
+));
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
+
 // src/components/Map/components/MapDrawer.tsx
-import { forwardRef, useImperativeHandle, useRef } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef as forwardRef3,
+  useEffect,
+  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;
@@ -178,7 +348,7 @@ var resolveHeightToPixels = (height, containerHeight) => {
   }
   return parseFloat(height);
 };
-var MapDrawer = forwardRef(
+var MapDrawer = forwardRef3(
   ({
     menuItems,
     state,
@@ -197,7 +367,9 @@ var MapDrawer = forwardRef(
     containerHeight,
     menuContent,
     enableTouchDrag = false,
-    safeAreaInsets = { top: 0, bottom: 0, left: 0, right: 0 }
+    showScrollToTopButton = true,
+    scrollToTopThreshold = 300,
+    safeAreaInsets = { bottom: 0, left: 0, right: 0, top: 0 }
   }, ref) => {
     const scrollContainerRef = useRef(null);
     const containerRef = useRef(null);
@@ -218,84 +390,240 @@ var MapDrawer = forwardRef(
         }
       }
     };
-    const handleTouchStart = (e) => {
-      if (side !== "bottom") return;
-      setTouchStartY(e.targetTouches[0].clientY);
-      setCurrentTouchY(e.targetTouches[0].clientY);
+    const [showScrollTop, setShowScrollTop] = useState(false);
+    const handleScroll = (e) => {
+      const scrollTop = e.currentTarget.scrollTop;
+      setShowScrollTop(state !== "closed" && scrollTop > scrollToTopThreshold);
     };
-    const handleTouchMove = (e) => {
-      if (touchStartY === null || side !== "bottom") return;
-      const isScrollAtTop = scrollContainerRef.current ? scrollContainerRef.current.scrollTop === 0 : true;
-      const currentY = e.targetTouches[0].clientY;
-      const deltaY = touchStartY - currentY;
-      if (deltaY < 0 && !isScrollAtTop) {
-        return;
+    useEffect(() => {
+      if (state === "closed") {
+        setShowScrollTop(false);
+      } else {
+        const scrollTop = scrollContainerRef.current?.scrollTop || 0;
+        setShowScrollTop(scrollTop > scrollToTopThreshold);
       }
-      setCurrentTouchY(currentY);
-    };
-    const handleTouchEnd = (e) => {
-      if (touchStartY === null || currentTouchY === null || side !== "bottom")
-        return;
-      const touchEndY = e.changedTouches[0].clientY;
-      const dragDistance = Math.abs(touchEndY - touchStartY);
-      if (dragDistance < 10) {
+    }, [state, scrollToTopThreshold]);
+    const isDraggingSheet = useRef(false);
+    const hasDeterminedDirection = useRef(false);
+    const isTouchOnContent = useRef(false);
+    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;
+        const target = e.target;
+        isTouchOnContent.current = scrollContainerRef.current ? scrollContainerRef.current.contains(target) : false;
+      };
+      const handleNativeTouchMove = (e) => {
+        const startY = touchStartYRef.current;
+        if (startY === null) return;
+        const currentY = e.targetTouches[0].clientY;
+        const deltaY = startY - currentY;
+        const scrollTop = scrollContainerRef.current ? scrollContainerRef.current.scrollTop : 0;
+        const clientHeight = scrollContainerRef.current ? scrollContainerRef.current.clientHeight : 0;
+        const scrollHeight = scrollContainerRef.current ? scrollContainerRef.current.scrollHeight : 0;
+        const isAtBottom = scrollTop + clientHeight >= scrollHeight - 1;
+        const currentState = stateRef.current;
+        if (!hasDeterminedDirection.current) {
+          if (!isTouchOnContent.current) {
+            isDraggingSheet.current = true;
+            hasDeterminedDirection.current = true;
+          } else if (currentState !== "full") {
+            if (deltaY > 0 && isAtBottom) {
+              isDraggingSheet.current = true;
+              hasDeterminedDirection.current = true;
+            } else if (deltaY < 0 && scrollTop <= 0) {
+              isDraggingSheet.current = true;
+              hasDeterminedDirection.current = true;
+            } else {
+              isDraggingSheet.current = false;
+              hasDeterminedDirection.current = true;
+            }
+          } else {
+            if (deltaY < 0 && scrollTop <= 0) {
+              isDraggingSheet.current = true;
+              hasDeterminedDirection.current = true;
+            } else {
+              isDraggingSheet.current = false;
+              hasDeterminedDirection.current = true;
+            }
+          }
+        } else if (!isDraggingSheet.current && isTouchOnContent.current) {
+          if (deltaY < 0 && scrollTop <= 0) {
+            isDraggingSheet.current = true;
+            setTouchStartY(currentY);
+            return;
+          }
+          if (deltaY > 0 && isAtBottom && currentState !== "full") {
+            isDraggingSheet.current = true;
+            setTouchStartY(currentY);
+            return;
+          }
+        }
+        if (isDraggingSheet.current) {
+          if (e.cancelable) {
+            e.preventDefault();
+          }
+          const parentContainer = container.parentElement;
+          if (parentContainer) {
+            const containerH2 = containerHeight || parentContainer.getBoundingClientRect().height;
+            const fullPx2 = resolveHeightToPixels(
+              drawerFullHeight || "85%",
+              containerH2
+            );
+            const peekPx2 = resolveHeightToPixels(
+              drawerPeekHeight || "15%",
+              containerH2
+            );
+            const closedPx = 32 + (currentState === "closed" ? safeAreaInsets.bottom : 0);
+            const dragOffset = currentY - startY;
+            let localClamped = dragOffset;
+            if (currentState === "full") {
+              localClamped = Math.max(
+                0,
+                Math.min(fullPx2 - closedPx, dragOffset)
+              );
+            } else if (currentState === "peek") {
+              localClamped = Math.max(
+                -(fullPx2 - peekPx2),
+                Math.min(peekPx2 - closedPx, dragOffset)
+              );
+            } else if (currentState === "closed") {
+              localClamped = Math.min(
+                0,
+                Math.max(-(fullPx2 - closedPx), dragOffset)
+              );
+            }
+            parentContainer.style.setProperty(
+              "--drag-offset",
+              `${localClamped}px`
+            );
+          }
+        }
+      };
+      const handleNativeTouchEnd = (e) => {
+        const startY = touchStartYRef.current;
+        const currentY = currentTouchYRef.current;
+        const parentContainer = container.parentElement;
+        if (startY === null || currentY === null) {
+          if (parentContainer) {
+            parentContainer.style.setProperty("--drag-offset", "0px");
+          }
+          return;
+        }
+        if (!isDraggingSheet.current) {
+          setTouchStartY(null);
+          setCurrentTouchY(null);
+          if (parentContainer) {
+            parentContainer.style.setProperty("--drag-offset", "0px");
+          }
+          return;
+        }
+        const touchEndY = e.changedTouches[0].clientY;
+        const dragDistance = Math.abs(touchEndY - startY);
+        if (dragDistance < 10) {
+          setTouchStartY(null);
+          setCurrentTouchY(null);
+          if (parentContainer) {
+            parentContainer.style.setProperty("--drag-offset", "0px");
+          }
+          return;
+        }
+        const containerH2 = containerHeight || (parentContainer ? parentContainer.getBoundingClientRect().height : window.innerHeight);
+        const containerTop = parentContainer ? parentContainer.getBoundingClientRect().top : 0;
+        const touchYInContainer = touchEndY - containerTop;
+        const drawerHeightFromBottom = containerH2 - touchYInContainer;
+        const fullPx2 = resolveHeightToPixels(
+          drawerFullHeight || "85%",
+          containerH2
+        );
+        const peekPx2 = resolveHeightToPixels(
+          drawerPeekHeight || "15%",
+          containerH2
+        );
+        const currentState = stateRef.current;
+        const closedPx = 32 + (currentState === "closed" ? safeAreaInsets.bottom : 0);
+        const distToFull = Math.abs(drawerHeightFromBottom - fullPx2);
+        const distToPeek = Math.abs(drawerHeightFromBottom - peekPx2);
+        const distToClosed = Math.abs(drawerHeightFromBottom - closedPx);
+        const minDist = Math.min(distToFull, distToPeek, distToClosed);
+        let targetState = "closed";
+        if (minDist === distToFull) {
+          targetState = "full";
+        } else if (minDist === distToPeek) {
+          targetState = "peek";
+        } else {
+          targetState = "closed";
+        }
         setTouchStartY(null);
         setCurrentTouchY(null);
-        return;
-      }
-      const parentContainer = containerRef.current?.parentElement;
-      const containerH = containerHeight || (parentContainer ? parentContainer.getBoundingClientRect().height : window.innerHeight);
-      const containerTop = parentContainer ? parentContainer.getBoundingClientRect().top : 0;
-      const touchYInContainer = touchEndY - containerTop;
-      const drawerHeightFromBottom = containerH - touchYInContainer;
-      const fullPx = resolveHeightToPixels(
-        drawerFullHeight || "85%",
-        containerH
-      );
-      const peekPx = resolveHeightToPixels(
-        drawerPeekHeight || "15%",
-        containerH
-      );
-      const closedPx = 32 + (state === "closed" ? safeAreaInsets.bottom : 0);
-      const distToFull = Math.abs(drawerHeightFromBottom - fullPx);
-      const distToPeek = Math.abs(drawerHeightFromBottom - peekPx);
-      const distToClosed = Math.abs(drawerHeightFromBottom - closedPx);
-      const minDist = Math.min(distToFull, distToPeek, distToClosed);
-      if (minDist === distToFull) {
-        onChangeState("full");
-      } else if (minDist === distToPeek) {
-        onChangeState("peek");
-      } else {
-        onChangeState("closed");
-      }
-      setTouchStartY(null);
-      setCurrentTouchY(null);
-    };
+        onChangeState(targetState);
+        requestAnimationFrame(() => {
+          if (parentContainer) {
+            parentContainer.style.setProperty("--drag-offset", "0px");
+          }
+        });
+      };
+      container.addEventListener("touchstart", handleNativeTouchStart, {
+        passive: true
+      });
+      container.addEventListener("touchmove", handleNativeTouchMove, {
+        passive: false
+      });
+      container.addEventListener("touchend", handleNativeTouchEnd, {
+        passive: true
+      });
+      return () => {
+        container.removeEventListener("touchstart", handleNativeTouchStart);
+        container.removeEventListener("touchmove", handleNativeTouchMove);
+        container.removeEventListener("touchend", handleNativeTouchEnd);
+      };
+    }, [
+      side,
+      enableTouchDrag,
+      containerHeight,
+      drawerFullHeight,
+      drawerPeekHeight,
+      safeAreaInsets,
+      onChangeState,
+      setTouchStartY,
+      setCurrentTouchY
+    ]);
     const isBackdropActive = state === "full";
     const backdropStyles = isBackdropActive ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none";
+    const containerH = containerHeight || window.innerHeight;
+    const fullPx = resolveHeightToPixels(drawerFullHeight || "85%", containerH);
+    const peekPx = resolveHeightToPixels(drawerPeekHeight || "15%", containerH);
+    const shiftPx = fullPx - peekPx;
     const getBottomDrawerTransform = () => {
-      const containerH = containerHeight || window.innerHeight;
-      const fullPx = resolveHeightToPixels(
-        drawerFullHeight || "85%",
-        containerH
-      );
-      const peekPx = resolveHeightToPixels(
-        drawerPeekHeight || "15%",
-        containerH
-      );
       if (state === "full") {
-        return `translateY(${clampedDragOffset}px)`;
+        return "translateY(var(--drag-offset, 0px))";
       }
       if (state === "peek") {
-        const shiftPx2 = fullPx - peekPx;
-        return `translateY(calc(${shiftPx2}px + ${clampedDragOffset}px))`;
+        return `translateY(calc(${shiftPx}px + var(--drag-offset, 0px)))`;
       }
       const closedVisibleHeight = 32;
-      const shiftPx = fullPx - closedVisibleHeight;
-      return `translateY(calc(${shiftPx}px + ${clampedDragOffset}px))`;
+      const closedShiftPx = fullPx - closedVisibleHeight;
+      return `translateY(calc(${closedShiftPx}px + var(--drag-offset, 0px)))`;
     };
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("style", { children: `
+    return /* @__PURE__ */ jsxs2(Fragment, { children: [
+      /* @__PURE__ */ jsx3("style", { children: `
         .no-scrollbar {
           -ms-overflow-style: none;
           scrollbar-width: none;
@@ -304,127 +632,213 @@ var MapDrawer = forwardRef(
           display: none;
         }
       ` }),
-      /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx3(
         "div",
         {
           className: `absolute inset-0 bg-black/45 backdrop-blur-[1px] transition-opacity duration-300 z-30 ${backdropStyles}`,
           onClick: () => onChangeState("closed")
         }
       ),
-      side === "left" ? (
-        /* Left Drawer Panel */
-        /* @__PURE__ */ jsxs(
-          "div",
+      side === "left" ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+        state === "closed" && /* @__PURE__ */ jsx3(
+          Button,
           {
-            className: `absolute top-4 left-0 w-80 bg-zinc-950/85 backdrop-blur-md border-r border-y border-white/10 rounded-r-2xl shadow-2xl flex z-40 transition-transform duration-300 ease-out select-none ${state !== "closed" ? "translate-x-0" : "translate-x-[calc(-100%+24px)]"}`,
-            ref: containerRef,
-            style: {
-              bottom: `calc(1rem + ${etaBarHeight}px)`
-            },
-            children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col h-full overflow-hidden pl-4 py-4 pr-1", children: [
-                /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between pb-3 border-b border-white/10 mb-2", children: /* @__PURE__ */ jsx("span", { className: "text-sm font-bold tracking-wider text-zinc-400 uppercase", children: "Menu" }) }),
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: "flex-1 overflow-y-auto no-scrollbar pr-2",
-                    ref: scrollContainerRef,
-                    children: menuContent ? menuContent : /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1.5", children: menuItems.map((item) => /* @__PURE__ */ jsxs(
-                      "button",
-                      {
-                        className: `flex items-center gap-3 w-full py-3 px-3.5 rounded-xl text-left cursor-pointer transition-all duration-150 ${item.disabled ? "opacity-45 cursor-not-allowed pointer-events-none" : "hover:bg-white/5 active:bg-white/10 text-white"}`,
-                        disabled: item.disabled,
-                        onClick: () => {
-                          if (!item.disabled) {
-                            item.onPress();
-                            onChangeState("closed");
-                          }
+            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 })
+                          ]
                         },
-                        children: [
-                          /* @__PURE__ */ jsxs("div", { className: "relative flex items-center justify-center w-8 h-8 rounded-lg bg-white/5 text-zinc-300", children: [
-                            item.icon,
-                            item.badge !== void 0 && /* @__PURE__ */ jsx("span", { className: "absolute -top-1 -right-1 bg-cyan-500 text-black text-[9px] font-extrabold min-w-[15px] h-3.5 rounded-full flex items-center justify-center px-1 border border-zinc-950 shadow", children: item.badge })
-                          ] }),
-                          /* @__PURE__ */ jsx("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
+                        });
                       },
-                      item.id
-                    )) })
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: "w-6 flex items-center justify-center cursor-pointer hover:bg-white/5 active:bg-white/10 transition-colors border-l border-white/5 rounded-r-2xl",
-                  onClick: handleHandleClick,
-                  children: /* @__PURE__ */ jsx("div", { className: "w-1.5 h-12 bg-white/20 rounded-full transition-colors group-hover:bg-white/40" })
-                }
-              )
-            ]
+                      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__ */ jsxs(
+        /* @__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"}`,
-            onTouchEnd: enableTouchDrag ? handleTouchEnd : void 0,
-            onTouchMove: enableTouchDrag ? handleTouchMove : void 0,
-            onTouchStart: enableTouchDrag ? handleTouchStart : void 0,
             ref: containerRef,
             style: {
               bottom: "0px",
-              marginBottom: state === "closed" ? `${safeAreaInsets.bottom}px` : "0px",
               height: typeof drawerFullHeight === "number" ? `${drawerFullHeight}px` : drawerFullHeight || "85%",
+              marginBottom: state === "closed" ? `${safeAreaInsets.bottom}px` : "0px",
               transform: getBottomDrawerTransform(),
               transition: isDragging ? "none" : "transform 300ms ease-out, margin-bottom 250ms ease-in-out"
             },
             children: [
-              /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx3(
                 "div",
                 {
                   className: "w-full h-8 flex flex-col items-center justify-center cursor-pointer hover:bg-white/5 rounded-t-2xl transition-colors border-b border-white/5",
                   onClick: handleHandleClick,
-                  children: /* @__PURE__ */ jsx("div", { className: "w-12 h-1 bg-white/25 rounded-full" })
+                  children: /* @__PURE__ */ jsx3("div", { className: "w-12 h-1 bg-white/25 rounded-full" })
                 }
               ),
-              /* @__PURE__ */ jsx(
+              /* @__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",
+                  className: "flex-1 flex flex-col overflow-hidden px-4 pb-4 pt-2 transition-[margin-top] duration-250 ease-in-out relative",
                   style: {
                     marginTop: state === "closed" ? `${safeAreaInsets.bottom}px` : "0px"
                   },
-                  children: /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      className: "flex-1 overflow-y-auto no-scrollbar",
-                      ref: scrollContainerRef,
-                      children: menuContent ? menuContent : /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: menuItems.map((item) => /* @__PURE__ */ jsxs(
-                        "button",
-                        {
-                          className: `flex items-center gap-3 w-full py-3 px-3.5 rounded-xl text-left cursor-pointer transition-all duration-150 ${item.disabled ? "opacity-45 cursor-not-allowed pointer-events-none" : "hover:bg-white/5 active:bg-white/10 text-white"}`,
-                          disabled: item.disabled,
-                          onClick: () => {
-                            if (!item.disabled) {
-                              item.onPress();
-                              onChangeState("closed");
-                            }
+                  children: [
+                    /* @__PURE__ */ 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 })
+                            ]
                           },
-                          children: [
-                            /* @__PURE__ */ jsxs("div", { className: "relative flex items-center justify-center w-8 h-8 rounded-lg bg-white/5 text-zinc-300", children: [
-                              item.icon,
-                              item.badge !== void 0 && /* @__PURE__ */ jsx("span", { className: "absolute -top-1 -right-1 bg-cyan-500 text-black text-[9px] font-extrabold min-w-[15px] h-3.5 rounded-full flex items-center justify-center px-1 border border-zinc-950 shadow", children: item.badge })
-                            ] }),
-                            /* @__PURE__ */ jsx("span", { className: "text-sm font-medium tracking-wide", children: item.label })
-                          ]
+                          item.id
+                        )) })
+                      }
+                    ),
+                    showScrollToTopButton && showScrollTop && /* @__PURE__ */ jsx3(
+                      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!",
+                        onClick: () => {
+                          scrollContainerRef.current?.scrollTo({
+                            behavior: "smooth",
+                            top: 0
+                          });
                         },
-                        item.id
-                      )) })
-                    }
-                  )
+                        style: {
+                          bottom: state === "peek" ? `calc(${24 + shiftPx}px + var(--drag-offset, 0px))` : `calc(24px + var(--drag-offset, 0px))`
+                        },
+                        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" })
+                          }
+                        )
+                      }
+                    )
+                  ]
                 }
               )
             ]
@@ -435,8 +849,65 @@ var MapDrawer = forwardRef(
   }
 );
 
+// src/components/ui/card.tsx
+import * as React3 from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var Card = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx4(
+  "div",
+  {
+    className: cn(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      className
+    ),
+    ref,
+    ...props
+  }
+));
+Card.displayName = "Card";
+var CardHeader = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx4(
+  "div",
+  {
+    className: cn("flex flex-col space-y-1.5 p-6", className),
+    ref,
+    ...props
+  }
+));
+CardHeader.displayName = "CardHeader";
+var CardTitle = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx4(
+  "div",
+  {
+    className: cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    ),
+    ref,
+    ...props
+  }
+));
+CardTitle.displayName = "CardTitle";
+var CardDescription = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx4(
+  "div",
+  {
+    className: cn("text-sm text-muted-foreground", className),
+    ref,
+    ...props
+  }
+));
+CardDescription.displayName = "CardDescription";
+var CardContent = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx4("div", { className: cn("p-6 pt-0", className), ref, ...props }));
+CardContent.displayName = "CardContent";
+var CardFooter = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx4(
+  "div",
+  {
+    className: cn("flex items-center p-6 pt-0", className),
+    ref,
+    ...props
+  }
+));
+CardFooter.displayName = "CardFooter";
+
 // src/components/Map/components/MapEtaPanel.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 var MapEtaPanel = ({
   etaData,
   layoutMode,
@@ -445,15 +916,15 @@ var MapEtaPanel = ({
   isDragging = false
 }) => {
   if (layoutMode === "closed-banner") {
-    return /* @__PURE__ */ jsxs2("div", { className: "w-full h-10 flex items-center justify-between px-4 pb-2 pt-1 border-b border-white/5 bg-zinc-950/15 relative overflow-hidden", children: [
-      /* @__PURE__ */ jsxs2(
+    return /* @__PURE__ */ jsxs3("div", { className: "w-full h-10 flex items-center justify-between px-4 pb-2 pt-1 border-b border-white/5 bg-zinc-950/15 relative overflow-hidden", children: [
+      /* @__PURE__ */ jsxs3(
         "div",
         {
           className: "flex items-center gap-2 cursor-pointer flex-1",
           onClick: onHeaderClick,
           children: [
-            /* @__PURE__ */ jsx2("span", { className: "w-2 h-2 rounded-full bg-emerald-500 animate-pulse" }),
-            /* @__PURE__ */ jsxs2("span", { className: "text-xs font-bold text-emerald-400", children: [
+            /* @__PURE__ */ jsx5("span", { className: "w-2 h-2 rounded-full bg-emerald-500 animate-pulse" }),
+            /* @__PURE__ */ jsxs3("span", { className: "text-xs font-bold text-emerald-400", children: [
               etaData.etaMins,
               " min (",
               etaData.distanceRemainingKm.toFixed(1),
@@ -462,36 +933,37 @@ var MapEtaPanel = ({
           ]
         }
       ),
-      etaData.onAbort && /* @__PURE__ */ jsx2(
-        "button",
+      etaData.onAbort && /* @__PURE__ */ jsx5(
+        Button,
         {
-          className: "px-1 py-1 text-[10px] font-black bg-red-500/20 text-red-400 hover:bg-red-500/30 border border-red-500/25 active:scale-95 rounded-md transition-all cursor-pointer pointer-events-auto",
+          className: "px-1 py-1 text-[10px] font-black bg-red-500/20 text-red-400 hover:bg-red-500/30 border border-red-500/25 active:scale-95 rounded-md transition-all cursor-pointer pointer-events-auto h-auto p-0!",
           onClick: (e) => {
             e.stopPropagation();
             etaData.onAbort?.();
           },
-          children: /* @__PURE__ */ jsxs2(
+          variant: "ghost",
+          children: /* @__PURE__ */ jsxs3(
             "svg",
             {
               className: "lucide lucide-x",
               fill: "none",
               height: "18",
               stroke: "currentColor",
-              "stroke-linecap": "round",
-              "stroke-linejoin": "round",
-              "stroke-width": "2.5",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              strokeWidth: "2.5",
               viewBox: "0 0 24 24",
               width: "18",
               xmlns: "http://www.w3.org/2000/svg",
               children: [
-                /* @__PURE__ */ jsx2("path", { d: "M18 6 6 18" }),
-                /* @__PURE__ */ jsx2("path", { d: "m6 6 12 12" })
+                /* @__PURE__ */ jsx5("path", { d: "M18 6 6 18" }),
+                /* @__PURE__ */ jsx5("path", { d: "m6 6 12 12" })
               ]
             }
           )
         }
       ),
-      etaData.progress !== void 0 && /* @__PURE__ */ jsx2("div", { className: "absolute bottom-0 left-0 right-0 h-[2px] bg-white/5", children: /* @__PURE__ */ jsx2(
+      etaData.progress !== void 0 && /* @__PURE__ */ jsx5("div", { className: "absolute bottom-0 left-0 right-0 h-[2px] bg-white/5", children: /* @__PURE__ */ jsx5(
         "div",
         {
           className: "h-full bg-cyan-400",
@@ -501,166 +973,174 @@ var MapEtaPanel = ({
     ] });
   }
   if (layoutMode === "open-card") {
-    return /* @__PURE__ */ jsxs2("div", { className: "mx-4 mt-2 p-4 bg-white/5 border border-white/10 rounded-xl flex flex-col", children: [
-      /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between mb-2", children: [
-        /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx2("span", { className: "w-2 h-2 rounded-full bg-emerald-500 animate-pulse" }),
-          /* @__PURE__ */ jsx2("span", { className: "text-[10px] font-bold text-emerald-400 uppercase tracking-wider", children: etaData.label || "Journey Active" })
+    return /* @__PURE__ */ jsxs3(Card, { className: "mx-4 mt-2 p-4 bg-white/5 border border-white/10 rounded-xl flex flex-col text-card-foreground", children: [
+      /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between mb-2", children: [
+        /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx5("span", { className: "w-2 h-2 rounded-full bg-emerald-500 animate-pulse" }),
+          /* @__PURE__ */ jsx5("span", { className: "text-[10px] font-bold text-emerald-400 uppercase tracking-wider", children: etaData.label || "Journey Active" })
         ] }),
-        etaData.onAbort && /* @__PURE__ */ jsx2(
-          "button",
+        etaData.onAbort && /* @__PURE__ */ jsx5(
+          Button,
           {
-            className: "px-1 px-1 text-xs font-bold bg-red-500/20 text-red-400 hover:bg-red-500/30 border border-red-500/30 active:scale-95 rounded-lg transition-all cursor-pointer pointer-events-auto",
+            className: "px-1 py-1 text-xs font-bold bg-red-500/20 text-red-400 hover:bg-red-500/30 border border-red-500/30 active:scale-95 rounded-lg transition-all cursor-pointer pointer-events-auto h-auto p-0!",
             onClick: etaData.onAbort,
-            children: /* @__PURE__ */ jsxs2(
+            variant: "ghost",
+            children: /* @__PURE__ */ jsxs3(
               "svg",
               {
                 className: "lucide lucide-x",
                 fill: "none",
                 height: "18",
                 stroke: "currentColor",
-                "stroke-linecap": "round",
-                "stroke-linejoin": "round",
-                "stroke-width": "2.5",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: "2.5",
                 viewBox: "0 0 24 24",
                 width: "18",
                 xmlns: "http://www.w3.org/2000/svg",
                 children: [
-                  /* @__PURE__ */ jsx2("path", { d: "M18 6 6 18" }),
-                  /* @__PURE__ */ jsx2("path", { d: "m6 6 12 12" })
+                  /* @__PURE__ */ jsx5("path", { d: "M18 6 6 18" }),
+                  /* @__PURE__ */ jsx5("path", { d: "m6 6 12 12" })
                 ]
               }
             )
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs2("div", { className: "grid grid-cols-2 divide-x divide-white/10 py-1.5 mb-2.5", children: [
-        /* @__PURE__ */ jsxs2("div", { className: "text-center", children: [
-          /* @__PURE__ */ jsxs2("div", { className: "text-xl font-black text-white leading-none", children: [
-            etaData.etaMins,
-            /* @__PURE__ */ jsx2("span", { className: "text-xs text-zinc-400 font-normal", children: " min" })
+      /* @__PURE__ */ jsxs3(CardContent, { className: "p-0 flex flex-col", children: [
+        /* @__PURE__ */ jsxs3("div", { className: "grid grid-cols-2 divide-x divide-white/10 py-1.5 mb-2.5", children: [
+          /* @__PURE__ */ jsxs3("div", { className: "text-center", children: [
+            /* @__PURE__ */ jsxs3("div", { className: "text-xl font-black text-white leading-none", children: [
+              etaData.etaMins,
+              /* @__PURE__ */ jsx5("span", { className: "text-xs text-zinc-400 font-normal", children: " min" })
+            ] }),
+            /* @__PURE__ */ jsx5("div", { className: "text-[8px] text-zinc-500 font-bold uppercase tracking-wider mt-1", children: "Time Remaining" })
           ] }),
-          /* @__PURE__ */ jsx2("div", { className: "text-[8px] text-zinc-500 font-bold uppercase tracking-wider mt-1", children: "Time Remaining" })
+          /* @__PURE__ */ jsxs3("div", { className: "text-center", children: [
+            /* @__PURE__ */ jsxs3("div", { className: "text-xl font-black text-white leading-none", children: [
+              etaData.distanceRemainingKm.toFixed(1),
+              /* @__PURE__ */ jsx5("span", { className: "text-xs text-zinc-400 font-normal", children: " km" })
+            ] }),
+            /* @__PURE__ */ jsx5("div", { className: "text-[8px] text-zinc-500 font-bold uppercase tracking-wider mt-1", children: "Distance Remaining" })
+          ] })
         ] }),
-        /* @__PURE__ */ jsxs2("div", { className: "text-center", children: [
-          /* @__PURE__ */ jsxs2("div", { className: "text-xl font-black text-white leading-none", children: [
-            etaData.distanceRemainingKm.toFixed(1),
-            /* @__PURE__ */ jsx2("span", { className: "text-xs text-zinc-400 font-normal", children: " km" })
+        etaData.progress !== void 0 && /* @__PURE__ */ jsxs3("div", { className: "mb-3", children: [
+          /* @__PURE__ */ jsxs3("div", { className: "flex justify-between text-[9px] font-bold text-zinc-400 mb-1", children: [
+            /* @__PURE__ */ jsx5("span", { children: "Progress" }),
+            /* @__PURE__ */ jsxs3("span", { children: [
+              Math.round(etaData.progress),
+              "%"
+            ] })
           ] }),
-          /* @__PURE__ */ jsx2("div", { className: "text-[8px] text-zinc-500 font-bold uppercase tracking-wider mt-1", children: "Distance Remaining" })
-        ] })
-      ] }),
-      etaData.progress !== void 0 && /* @__PURE__ */ jsxs2("div", { className: "mb-3", children: [
-        /* @__PURE__ */ jsxs2("div", { className: "flex justify-between text-[9px] font-bold text-zinc-450 mb-1", children: [
-          /* @__PURE__ */ jsx2("span", { children: "Progress" }),
-          /* @__PURE__ */ jsxs2("span", { children: [
-            Math.round(etaData.progress),
-            "%"
-          ] })
+          /* @__PURE__ */ jsx5("div", { className: "h-1 bg-white/10 rounded-full overflow-hidden", children: /* @__PURE__ */ jsx5(
+            "div",
+            {
+              className: "h-full bg-cyan-400 rounded-full",
+              style: { width: `${etaData.progress}%` }
+            }
+          ) })
         ] }),
-        /* @__PURE__ */ jsx2("div", { className: "h-1 bg-white/10 rounded-full overflow-hidden", children: /* @__PURE__ */ jsx2(
-          "div",
+        etaData.mode === "preview" && etaData.onStart && /* @__PURE__ */ jsx5(
+          Button,
           {
-            className: "h-full bg-cyan-400 rounded-full",
-            style: { width: `${etaData.progress}%` }
+            className: "w-full py-2.5 text-xs font-bold bg-cyan-500 text-black hover:bg-cyan-400 hover:text-black active:scale-95 rounded-lg transition-all cursor-pointer h-auto",
+            onClick: etaData.onStart,
+            variant: "ghost",
+            children: "Start Guidance"
           }
-        ) })
-      ] }),
-      etaData.mode === "preview" && etaData.onStart && /* @__PURE__ */ jsx2(
-        "button",
-        {
-          className: "w-full py-2.5 text-xs font-bold bg-cyan-500 text-black hover:bg-cyan-400 active:scale-95 rounded-lg transition-all cursor-pointer",
-          onClick: etaData.onStart,
-          children: "Start Guidance"
-        }
-      )
+        )
+      ] })
     ] });
   }
-  return /* @__PURE__ */ jsxs2(
-    "div",
+  return /* @__PURE__ */ jsxs3(
+    Card,
     {
-      className: `absolute left-1/2 -translate-x-1/2 z-40 w-[calc(100%-2rem)] max-w-[320px] sm:max-w-[380px] bg-zinc-950/85 backdrop-blur-md border border-white/10 rounded-2xl shadow-2xl p-3 sm:p-4 flex flex-col pointer-events-auto select-none ${isDragging ? "transition-none" : "transition-all duration-300 ease-out"}`,
+      className: `absolute left-1/2 -translate-x-1/2 z-40 w-[calc(100%-2rem)] max-w-[320px] sm:max-w-[380px] bg-zinc-950/85 backdrop-blur-md border border-white/10 rounded-2xl shadow-2xl p-3 sm:p-4 flex flex-col pointer-events-auto select-none text-card-foreground ${isDragging ? "transition-none" : "transition-all duration-300 ease-out"}`,
       style,
       children: [
-        /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between mb-2 sm:mb-3", children: [
-          /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx2("span", { className: "w-1.5 h-1.5 sm:w-2 sm:h-2 rounded-full bg-emerald-500 animate-pulse" }),
-            /* @__PURE__ */ jsx2("span", { className: "text-[9px] sm:text-[10px] font-bold text-emerald-400 uppercase tracking-wider", children: etaData.label || "Guidance Active" })
+        /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between mb-2 sm:mb-3", children: [
+          /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx5("span", { className: "w-1.5 h-1.5 sm:w-2 sm:h-2 rounded-full bg-emerald-500 animate-pulse" }),
+            /* @__PURE__ */ jsx5("span", { className: "text-[9px] sm:text-[10px] font-bold text-emerald-400 uppercase tracking-wider", children: etaData.label || "Guidance Active" })
           ] }),
-          etaData.onAbort && /* @__PURE__ */ jsx2(
-            "button",
+          etaData.onAbort && /* @__PURE__ */ jsx5(
+            Button,
             {
-              className: "px-1 py-1 text-[10px] sm:text-xs font-bold bg-red-500/20 text-red-400 hover:bg-red-500/30 border border-red-500/30 active:scale-95 rounded-lg transition-all cursor-pointer",
+              className: "px-1 py-1 text-[10px] sm:text-xs font-bold bg-red-500/20 text-red-400 hover:bg-red-500/30 border border-red-500/30 active:scale-95 rounded-lg transition-all cursor-pointer h-auto p-0!",
               onClick: etaData.onAbort,
-              children: /* @__PURE__ */ jsxs2(
+              variant: "ghost",
+              children: /* @__PURE__ */ jsxs3(
                 "svg",
                 {
                   className: "lucide lucide-x",
                   fill: "none",
                   height: "18",
                   stroke: "currentColor",
-                  "stroke-linecap": "round",
-                  "stroke-linejoin": "round",
-                  "stroke-width": "2.5",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: "2.5",
                   viewBox: "0 0 24 24",
                   width: "18",
                   xmlns: "http://www.w3.org/2000/svg",
                   children: [
-                    /* @__PURE__ */ jsx2("path", { d: "M18 6 6 18" }),
-                    /* @__PURE__ */ jsx2("path", { d: "m6 6 12 12" })
+                    /* @__PURE__ */ jsx5("path", { d: "M18 6 6 18" }),
+                    /* @__PURE__ */ jsx5("path", { d: "m6 6 12 12" })
                   ]
                 }
               )
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs2("div", { className: "grid grid-cols-2 divide-x divide-white/10 py-0.5 sm:py-1 mb-2 sm:mb-3", children: [
-          /* @__PURE__ */ jsx2("div", { className: "text-center", children: /* @__PURE__ */ jsxs2("div", { className: "text-base sm:text-lg font-black text-white leading-none", children: [
-            etaData.etaMins,
-            /* @__PURE__ */ jsxs2("span", { className: "text-[10px] sm:text-xs text-zinc-400 font-normal", children: [
-              " ",
-              "min"
-            ] })
-          ] }) }),
-          /* @__PURE__ */ jsx2("div", { className: "text-center", children: /* @__PURE__ */ jsxs2("div", { className: "text-base sm:text-lg font-black text-white leading-none", children: [
-            etaData.distanceRemainingKm.toFixed(1),
-            /* @__PURE__ */ jsxs2("span", { className: "text-[10px] sm:text-xs text-zinc-400 font-normal", children: [
-              " ",
-              "km"
-            ] })
-          ] }) })
-        ] }),
-        etaData.progress !== void 0 && /* @__PURE__ */ jsxs2("div", { children: [
-          /* @__PURE__ */ jsxs2("div", { className: "flex justify-between text-[8px] sm:text-[9px] font-bold text-zinc-400 mb-1", children: [
-            /* @__PURE__ */ jsx2("span", { children: "Progress" }),
-            /* @__PURE__ */ jsxs2("span", { children: [
-              Math.round(etaData.progress),
-              "%"
-            ] })
+        /* @__PURE__ */ jsxs3(CardContent, { className: "p-0 flex flex-col", children: [
+          /* @__PURE__ */ jsxs3("div", { className: "grid grid-cols-2 divide-x divide-white/10 py-0.5 sm:py-1 mb-2 sm:mb-3", children: [
+            /* @__PURE__ */ jsx5("div", { className: "text-center", children: /* @__PURE__ */ jsxs3("div", { className: "text-base sm:text-lg font-black text-white leading-none", children: [
+              etaData.etaMins,
+              /* @__PURE__ */ jsxs3("span", { className: "text-[10px] sm:text-xs text-zinc-400 font-normal", children: [
+                " ",
+                "min"
+              ] })
+            ] }) }),
+            /* @__PURE__ */ jsx5("div", { className: "text-center", children: /* @__PURE__ */ jsxs3("div", { className: "text-base sm:text-lg font-black text-white leading-none", children: [
+              etaData.distanceRemainingKm.toFixed(1),
+              /* @__PURE__ */ jsxs3("span", { className: "text-[10px] sm:text-xs text-zinc-400 font-normal", children: [
+                " ",
+                "km"
+              ] })
+            ] }) })
           ] }),
-          /* @__PURE__ */ jsx2("div", { className: "h-1 sm:h-1.5 bg-white/10 rounded-full overflow-hidden", children: /* @__PURE__ */ jsx2(
-            "div",
+          etaData.progress !== void 0 && /* @__PURE__ */ jsxs3("div", { children: [
+            /* @__PURE__ */ jsxs3("div", { className: "flex justify-between text-[8px] sm:text-[9px] font-bold text-zinc-400 mb-1", children: [
+              /* @__PURE__ */ jsx5("span", { children: "Progress" }),
+              /* @__PURE__ */ jsxs3("span", { children: [
+                Math.round(etaData.progress),
+                "%"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx5("div", { className: "h-1 sm:h-1.5 bg-white/10 rounded-full overflow-hidden", children: /* @__PURE__ */ jsx5(
+              "div",
+              {
+                className: "h-full bg-cyan-400 rounded-full",
+                style: { width: `${etaData.progress}%` }
+              }
+            ) })
+          ] }),
+          etaData.mode === "preview" && etaData.onStart && /* @__PURE__ */ jsx5(
+            Button,
             {
-              className: "h-full bg-cyan-400 rounded-full",
-              style: { width: `${etaData.progress}%` }
+              className: "mt-2.5 sm:mt-3 py-1.5 sm:py-2 text-[11px] sm:text-xs font-bold bg-cyan-500 text-black hover:bg-cyan-400 hover:text-black active:scale-95 rounded-lg transition-all cursor-pointer h-auto",
+              onClick: etaData.onStart,
+              variant: "ghost",
+              children: "Start Guidance"
             }
-          ) })
-        ] }),
-        etaData.mode === "preview" && etaData.onStart && /* @__PURE__ */ jsx2(
-          "button",
-          {
-            className: "mt-2.5 sm:mt-3 py-1.5 sm:py-2 text-[11px] sm:text-xs font-bold bg-cyan-500 text-black hover:bg-cyan-400 active:scale-95 rounded-lg transition-all cursor-pointer",
-            onClick: etaData.onStart,
-            children: "Start Guidance"
-          }
-        )
+          )
+        ] })
       ]
     }
   );
 };
 
 // src/components/Map/components/MapRightControls.tsx
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var MapRightControls = ({
   customControls = [],
   etaBarHeight,
@@ -678,7 +1158,7 @@ var MapRightControls = ({
   customRecenterButton,
   customCompassButton,
   drawerPeekHeight,
-  insets = { top: 0, bottom: 0, left: 0, right: 0 }
+  insets = { bottom: 0, left: 0, right: 0, top: 0 }
 }) => {
   const aboveControls = customControls.filter(
     (c) => c.position === "above-recenter"
@@ -690,9 +1170,9 @@ var MapRightControls = ({
   const closedHeightOffset = "32px";
   const activeEtaHeight = etaData ? etaBarHeight : drawerState === "closed" ? insets.bottom : 0;
   const peekStyle = typeof drawerPeekHeight === "number" ? `${drawerPeekHeight}px` : drawerPeekHeight || "15%";
-  const controlsBottom = side === "bottom" ? drawerState === "closed" ? `calc(${closedHeightOffset} + 1rem + ${activeEtaHeight}px - ${clampedDragOffset}px)` : `calc(${peekStyle} + 1rem + ${etaData ? etaBarHeight : 0}px - ${clampedDragOffset}px)` : `calc(1rem + ${insets.bottom}px)`;
+  const controlsBottom = side === "bottom" ? drawerState === "closed" ? `calc(${closedHeightOffset} + 1rem + ${activeEtaHeight}px - var(--drag-offset, 0px))` : `calc(${peekStyle} + 1rem + ${etaData ? etaBarHeight : 0}px - var(--drag-offset, 0px))` : `calc(1rem + ${insets.bottom}px)`;
   const isControlsVisible = side !== "bottom" || drawerState !== "full";
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4(
     "div",
     {
       className: `absolute right-4 z-30 flex flex-col items-center gap-3 select-none pointer-events-none ${isDragging ? "transition-none" : "transition-all duration-300 ease-out"} ${isControlsVisible ? "opacity-100 scale-100 pointer-events-auto" : "opacity-0 scale-75 pointer-events-none"}`,
@@ -700,27 +1180,29 @@ var MapRightControls = ({
         bottom: controlsBottom
       },
       children: [
-        aboveControls.length > 0 && /* @__PURE__ */ jsx3("div", { className: "flex flex-col gap-2 pointer-events-auto", children: aboveControls.map((control) => /* @__PURE__ */ jsxs3("div", { className: "relative group flex items-center", children: [
-          control.tooltip && /* @__PURE__ */ jsx3("div", { className: "absolute right-14 pointer-events-none opacity-0 scale-95 origin-right group-hover:opacity-100 group-hover:scale-100 transition-all duration-150 bg-zinc-900/95 border border-white/10 text-white text-xs px-2.5 py-1.5 rounded-lg shadow-xl whitespace-nowrap", children: control.tooltip }),
-          /* @__PURE__ */ jsx3(
-            "button",
+        aboveControls.length > 0 && /* @__PURE__ */ jsx6("div", { className: "flex flex-col gap-2 pointer-events-auto", children: aboveControls.map((control) => /* @__PURE__ */ jsxs4("div", { className: "relative group flex items-center", children: [
+          control.tooltip && /* @__PURE__ */ jsx6("div", { className: "absolute right-14 pointer-events-none opacity-0 scale-95 origin-right group-hover:opacity-100 group-hover:scale-100 transition-all duration-150 bg-zinc-900/95 border border-white/10 text-white text-xs px-2.5 py-1.5 rounded-lg shadow-xl whitespace-nowrap", children: control.tooltip }),
+          /* @__PURE__ */ jsx6(
+            Button,
             {
-              className: `w-12 h-12 rounded-full bg-zinc-950/80 backdrop-blur-md border border-white/10 shadow-lg flex items-center justify-center text-white active:scale-95 transition-all cursor-pointer ${control.activeState ? "ring-2 ring-cyan-400 ring-offset-2 ring-offset-zinc-950" : "hover:bg-zinc-900"}`,
+              className: `w-12 h-12 rounded-full bg-zinc-950/80 backdrop-blur-md border border-white/10 shadow-lg flex items-center justify-center text-white active:scale-95 transition-all cursor-pointer p-0! hover:bg-zinc-900 hover:text-white ${control.activeState ? "ring-2 ring-cyan-400 ring-offset-2 ring-offset-zinc-950" : ""}`,
               onClick: control.onPress,
+              variant: "ghost",
               children: control.icon
             }
           )
         ] }, control.id)) }),
-        isCompassVisible && (customCompassButton ? /* @__PURE__ */ jsx3("div", { className: "pointer-events-auto", children: customCompassButton }) : /* @__PURE__ */ jsx3("div", { className: "pointer-events-auto", children: /* @__PURE__ */ jsx3(
-          "button",
+        isCompassVisible && (customCompassButton ? /* @__PURE__ */ jsx6("div", { className: "pointer-events-auto", children: customCompassButton }) : /* @__PURE__ */ jsx6("div", { className: "pointer-events-auto", children: /* @__PURE__ */ jsx6(
+          Button,
           {
-            className: `w-12 h-12 rounded-full bg-zinc-950/80 backdrop-blur-md border border-white/10 shadow-lg flex items-center justify-center text-white active:scale-95 transition-all duration-300 ${isCompassVisible ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none h-0 w-0 border-none m-0 p-0 overflow-hidden"}`,
+            className: `w-12 h-12 rounded-full bg-zinc-950/80 backdrop-blur-md border border-white/10 shadow-lg flex items-center justify-center text-white active:scale-95 transition-all duration-300 p-0! hover:bg-zinc-900 hover:text-white ${isCompassVisible ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none h-0 w-0 border-none m-0 p-0 overflow-hidden"}`,
             onClick: () => onResetBearing({ pitch: initialViewState?.pitch ?? 0 }),
             style: {
               transform: isCompassVisible ? "scale(1) rotate(0deg)" : "scale(0.7) rotate(0deg)"
             },
             title: "Reset bearing to North",
-            children: /* @__PURE__ */ jsxs3(
+            variant: "ghost",
+            children: /* @__PURE__ */ jsxs4(
               "svg",
               {
                 className: "w-7 h-7 transition-transform duration-75 ease-out",
@@ -730,7 +1212,7 @@ var MapRightControls = ({
                 },
                 viewBox: "0 0 24 24",
                 children: [
-                  /* @__PURE__ */ jsx3(
+                  /* @__PURE__ */ jsx6(
                     "circle",
                     {
                       cx: "12",
@@ -741,23 +1223,24 @@ var MapRightControls = ({
                       strokeWidth: "1"
                     }
                   ),
-                  /* @__PURE__ */ jsx3("path", { d: "M12 4.5L15 12H9L12 4.5Z", fill: "#ef4444" }),
-                  /* @__PURE__ */ jsx3("path", { d: "M12 19.5L9 12H15L12 19.5Z", fill: "#f4f4f5" }),
-                  /* @__PURE__ */ jsx3("circle", { cx: "12", cy: "12", fill: "#18181b", r: "1.5" })
+                  /* @__PURE__ */ jsx6("path", { d: "M12 4.5L15 12H9L12 4.5Z", fill: "#ef4444" }),
+                  /* @__PURE__ */ jsx6("path", { d: "M12 19.5L9 12H15L12 19.5Z", fill: "#f4f4f5" }),
+                  /* @__PURE__ */ jsx6("circle", { cx: "12", cy: "12", fill: "#18181b", r: "1.5" })
                 ]
               }
             )
           }
         ) })),
-        customRecenterButton ? /* @__PURE__ */ jsx3("div", { className: "pointer-events-auto", children: customRecenterButton }) : /* @__PURE__ */ jsx3("div", { className: "pointer-events-auto", children: /* @__PURE__ */ jsx3(
-          "button",
+        customRecenterButton ? /* @__PURE__ */ jsx6("div", { className: "pointer-events-auto", children: customRecenterButton }) : /* @__PURE__ */ jsx6("div", { className: "pointer-events-auto", children: /* @__PURE__ */ jsx6(
+          Button,
           {
-            className: `w-12 h-12 rounded-full bg-zinc-950/80 backdrop-blur-md border border-white/10 shadow-lg flex items-center justify-center text-white active:scale-95 transition-all cursor-pointer ${isMapCentered ? "ring-2 ring-cyan-400 ring-offset-2 ring-offset-zinc-950" : "hover:bg-zinc-900"}`,
+            className: `w-12 h-12 rounded-full bg-zinc-950/80 backdrop-blur-md border border-white/10 shadow-lg flex items-center justify-center text-white active:scale-95 transition-all cursor-pointer p-0! hover:bg-zinc-900 hover:text-white ${isMapCentered ? "ring-2 ring-cyan-400 ring-offset-2 ring-offset-zinc-950" : ""}`,
             onClick: () => onRecenter(),
             title: "Recenter Map",
+            variant: "ghost",
             children: isMapCentered ? (
               /* Filled active lock state */
-              /* @__PURE__ */ jsxs3(
+              /* @__PURE__ */ jsxs4(
                 "svg",
                 {
                   className: "w-6 h-6 text-cyan-400",
@@ -766,18 +1249,18 @@ var MapRightControls = ({
                   strokeWidth: "2.2",
                   viewBox: "0 0 24 24",
                   children: [
-                    /* @__PURE__ */ jsx3("circle", { cx: "12", cy: "12", r: "8" }),
-                    /* @__PURE__ */ jsx3("circle", { cx: "12", cy: "12", fill: "currentColor", r: "3" }),
-                    /* @__PURE__ */ jsx3("line", { x1: "12", x2: "12", y1: "2", y2: "4" }),
-                    /* @__PURE__ */ jsx3("line", { x1: "12", x2: "12", y1: "20", y2: "22" }),
-                    /* @__PURE__ */ jsx3("line", { x1: "2", x2: "4", y1: "12", y2: "12" }),
-                    /* @__PURE__ */ jsx3("line", { x1: "20", x2: "22", y1: "12", y2: "12" })
+                    /* @__PURE__ */ jsx6("circle", { cx: "12", cy: "12", r: "8" }),
+                    /* @__PURE__ */ jsx6("circle", { cx: "12", cy: "12", fill: "currentColor", r: "3" }),
+                    /* @__PURE__ */ jsx6("line", { x1: "12", x2: "12", y1: "2", y2: "4" }),
+                    /* @__PURE__ */ jsx6("line", { x1: "12", x2: "12", y1: "20", y2: "22" }),
+                    /* @__PURE__ */ jsx6("line", { x1: "2", x2: "4", y1: "12", y2: "12" }),
+                    /* @__PURE__ */ jsx6("line", { x1: "20", x2: "22", y1: "12", y2: "12" })
                   ]
                 }
               )
             ) : (
               /* Outlined drifted state */
-              /* @__PURE__ */ jsxs3(
+              /* @__PURE__ */ jsxs4(
                 "svg",
                 {
                   className: "w-6 h-6 text-zinc-300",
@@ -786,24 +1269,25 @@ var MapRightControls = ({
                   strokeWidth: "2",
                   viewBox: "0 0 24 24",
                   children: [
-                    /* @__PURE__ */ jsx3("circle", { cx: "12", cy: "12", r: "8" }),
-                    /* @__PURE__ */ jsx3("line", { x1: "12", x2: "12", y1: "2", y2: "4" }),
-                    /* @__PURE__ */ jsx3("line", { x1: "12", x2: "12", y1: "20", y2: "22" }),
-                    /* @__PURE__ */ jsx3("line", { x1: "2", x2: "4", y1: "12", y2: "12" }),
-                    /* @__PURE__ */ jsx3("line", { x1: "20", x2: "22", y1: "12", y2: "12" })
+                    /* @__PURE__ */ jsx6("circle", { cx: "12", cy: "12", r: "8" }),
+                    /* @__PURE__ */ jsx6("line", { x1: "12", x2: "12", y1: "2", y2: "4" }),
+                    /* @__PURE__ */ jsx6("line", { x1: "12", x2: "12", y1: "20", y2: "22" }),
+                    /* @__PURE__ */ jsx6("line", { x1: "2", x2: "4", y1: "12", y2: "12" }),
+                    /* @__PURE__ */ jsx6("line", { x1: "20", x2: "22", y1: "12", y2: "12" })
                   ]
                 }
               )
             )
           }
         ) }),
-        belowControls.length > 0 && /* @__PURE__ */ jsx3("div", { className: "flex flex-col gap-2 pointer-events-auto", children: belowControls.map((control) => /* @__PURE__ */ jsxs3("div", { className: "relative group flex items-center", children: [
-          control.tooltip && /* @__PURE__ */ jsx3("div", { className: "absolute right-14 pointer-events-none opacity-0 scale-95 origin-right group-hover:opacity-100 group-hover:scale-100 transition-all duration-150 bg-zinc-900/95 border border-white/10 text-white text-xs px-2.5 py-1.5 rounded-lg shadow-xl whitespace-nowrap", children: control.tooltip }),
-          /* @__PURE__ */ jsx3(
-            "button",
+        belowControls.length > 0 && /* @__PURE__ */ jsx6("div", { className: "flex flex-col gap-2 pointer-events-auto", children: belowControls.map((control) => /* @__PURE__ */ jsxs4("div", { className: "relative group flex items-center", children: [
+          control.tooltip && /* @__PURE__ */ jsx6("div", { className: "absolute right-14 pointer-events-none opacity-0 scale-95 origin-right group-hover:opacity-100 group-hover:scale-100 transition-all duration-150 bg-zinc-900/95 border border-white/10 text-white text-xs px-2.5 py-1.5 rounded-lg shadow-xl whitespace-nowrap", children: control.tooltip }),
+          /* @__PURE__ */ jsx6(
+            Button,
             {
-              className: `w-12 h-12 rounded-full bg-zinc-950/80 backdrop-blur-md border border-white/10 shadow-lg flex items-center justify-center text-white active:scale-95 transition-all cursor-pointer ${control.activeState ? "ring-2 ring-cyan-400 ring-offset-2 ring-offset-zinc-950" : "hover:bg-zinc-900"}`,
+              className: `w-12 h-12 rounded-full bg-zinc-950/80 backdrop-blur-md border border-white/10 shadow-lg flex items-center justify-center text-white active:scale-95 transition-all cursor-pointer p-0! hover:bg-zinc-900 hover:text-white ${control.activeState ? "ring-2 ring-cyan-400 ring-offset-2 ring-offset-zinc-950" : ""}`,
               onClick: control.onPress,
+              variant: "ghost",
               children: control.icon
             }
           )
@@ -820,28 +1304,28 @@ import {
   useContext,
   useMemo,
   useRef as useRef2,
-  useState
+  useState as useState2
 } from "react";
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var MapControlsContext = createContext(
   null
 );
 var SDKMapProvider = ({
   children
 }) => {
-  const [isFollowing, setIsFollowing] = useState(true);
-  const [bearing, setBearingState] = useState(0);
-  const [pitch, setPitchState] = useState(0);
-  const [drawerState, setDrawerStateInternal] = useState("closed");
+  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) => {
     setDrawerStateInternal(val);
   }, []);
-  const [hasControls, setHasControlsState] = useState(false);
+  const [hasControls, setHasControlsState] = useState2(false);
   const setHasControls = useCallback((val) => {
     setHasControlsState((prev) => prev === val ? prev : val);
   }, []);
-  const [etaData, setEtaDataState] = useState(void 0);
+  const [etaData, setEtaDataState] = useState2(void 0);
   const setEtaData = useCallback((newData) => {
     setEtaDataState((prev) => {
       if (!prev && !newData) return prev;
@@ -852,11 +1336,11 @@ var SDKMapProvider = ({
       return newData;
     });
   }, []);
-  const [insets, setInsetsState] = useState({
-    top: 0,
+  const [insets, setInsetsState] = useState2({
     bottom: 0,
     left: 0,
-    right: 0
+    right: 0,
+    top: 0
   });
   const setInsets = useCallback((newInsets) => {
     setInsetsState((prev) => ({ ...prev, ...newInsets }));
@@ -901,6 +1385,7 @@ var SDKMapProvider = ({
       drawerState,
       etaData,
       hasControls,
+      insets,
       isFollowing,
       pitch,
       resetBearing,
@@ -908,10 +1393,9 @@ var SDKMapProvider = ({
       setDrawerState,
       setEtaData,
       setHasControls,
+      setInsets,
       setIsFollowing,
-      setPitch,
-      insets,
-      setInsets
+      setPitch
     }),
     [
       _registerCenterCallback,
@@ -933,7 +1417,7 @@ var SDKMapProvider = ({
       setInsets
     ]
   );
-  return /* @__PURE__ */ jsx4(MapControlsContext.Provider, { value: contextValue, children });
+  return /* @__PURE__ */ jsx7(MapControlsContext.Provider, { value: contextValue, children });
 };
 var useMapControls = () => {
   const context = useContext(MapControlsContext);
@@ -944,8 +1428,8 @@ var useMapControls = () => {
 };
 
 // src/components/Map/components/MapControls.tsx
-import { useCallback as useCallback2, useContext as useContext2, useEffect, useRef as useRef3, useState as useState2 } from "react";
-import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { useCallback as useCallback2, useContext as useContext2, useEffect as useEffect2, useRef as useRef3, useState as useState3 } from "react";
+import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 var resolveHeightToPixels2 = (height, containerHeight) => {
   if (typeof height === "number") {
     return height;
@@ -975,6 +1459,8 @@ var MapControls = ({
   menuContent,
   children,
   enableTouchDrag = false,
+  showScrollToTopButton = true,
+  scrollToTopThreshold = 300,
   isInternal = false
 }) => {
   const mapContext = useContext2(MapControlsContext);
@@ -994,7 +1480,7 @@ var MapControls = ({
     },
     [drawerContentRef, contextRef]
   );
-  const [localDrawerState, setLocalDrawerState] = useState2(
+  const [localDrawerState, setLocalDrawerState] = useState3(
     defaultState ?? "closed"
   );
   const drawerState = mapContext ? mapContext.drawerState : localDrawerState;
@@ -1008,15 +1494,15 @@ var MapControls = ({
     },
     [mapContext]
   );
-  useEffect(() => {
+  useEffect2(() => {
     if (defaultState && mapContext) {
       mapContext.setDrawerState(defaultState);
     }
   }, []);
-  const [side, setSide] = useState2("left");
+  const [side, setSide] = useState3("left");
   const containerRef = useRef3(null);
-  const [mapHeight, setMapHeight] = useState2(600);
-  useEffect(() => {
+  const [mapHeight, setMapHeight] = useState3(600);
+  useEffect2(() => {
     const parent = containerRef.current?.parentElement;
     if (!parent) return;
     const updateHeight = () => {
@@ -1030,7 +1516,7 @@ var MapControls = ({
     };
   }, []);
   const setHasControls = mapContext?.setHasControls;
-  useEffect(() => {
+  useEffect2(() => {
     if (setHasControls && !isInternal) {
       setHasControls(true);
       return () => setHasControls(false);
@@ -1054,9 +1540,9 @@ var MapControls = ({
   };
   const mapPitch = mapContext ? mapContext.pitch : 0;
   const resolvedEtaData = etaData !== void 0 ? etaData : mapContext?.etaData;
-  const [touchStartY, setTouchStartY] = useState2(null);
-  const [currentTouchY, setCurrentTouchY] = useState2(null);
-  useEffect(() => {
+  const [touchStartY, setTouchStartY] = useState3(null);
+  const [currentTouchY, setCurrentTouchY] = useState3(null);
+  useEffect2(() => {
     if (typeof window === "undefined") return;
     const checkLayout = () => {
       if (drawerSide) {
@@ -1075,14 +1561,23 @@ var MapControls = ({
   }, [drawerSide]);
   const isDragging = touchStartY !== null && currentTouchY !== null;
   const dragOffset = isDragging ? currentTouchY - touchStartY : 0;
+  const fullPx = resolveHeightToPixels2(drawerFullHeight || "85%", mapHeight);
+  const peekPx = resolveHeightToPixels2(drawerPeekHeight || "15%", mapHeight);
+  const bottomInset = mapContext?.insets.bottom || 0;
+  const closedPx = 32 + (drawerState === "closed" ? bottomInset : 0);
   let clampedDragOffset = dragOffset;
   if (drawerState === "full") {
-    clampedDragOffset = Math.max(0, dragOffset);
+    clampedDragOffset = Math.max(0, Math.min(fullPx - closedPx, dragOffset));
+  } else if (drawerState === "peek") {
+    clampedDragOffset = Math.max(
+      -(fullPx - peekPx),
+      // up to full
+      Math.min(peekPx - closedPx, dragOffset)
+      // down to closed
+    );
   } else if (drawerState === "closed") {
-    clampedDragOffset = Math.min(0, dragOffset);
+    clampedDragOffset = Math.min(0, Math.max(-(fullPx - closedPx), dragOffset));
   }
-  const fullPx = resolveHeightToPixels2(drawerFullHeight || "85%", mapHeight);
-  const peekPx = resolveHeightToPixels2(drawerPeekHeight || "15%", mapHeight);
   let baseHeight = 32;
   if (drawerState === "peek") {
     baseHeight = peekPx;
@@ -1092,7 +1587,6 @@ var MapControls = ({
   const currentDrawerHeight = baseHeight - clampedDragOffset;
   const startFadeHeight = peekPx + 20;
   const endFadeHeight = peekPx + (fullPx - peekPx) * 0.35;
-  const bottomInset = mapContext?.insets.bottom || 0;
   let etaOpacity = 1;
   let etaBottomStyle = "1rem";
   if (side === "bottom") {
@@ -1105,14 +1599,14 @@ var MapControls = ({
       etaOpacity = 1 - fraction;
     }
     const effectiveInset = drawerState === "closed" ? bottomInset : 0;
-    etaBottomStyle = `${currentDrawerHeight + effectiveInset + 16}px`;
+    etaBottomStyle = `calc(${baseHeight + effectiveInset + 16}px - var(--drag-offset, 0px))`;
   } else {
     etaOpacity = drawerState === "full" ? 0 : 1;
     etaBottomStyle = `calc(1rem + ${bottomInset}px)`;
   }
-  return /* @__PURE__ */ jsxs4(Fragment2, { children: [
-    /* @__PURE__ */ jsx5("div", { ref: containerRef, style: { display: "none" } }),
-    /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsxs5(Fragment2, { children: [
+    /* @__PURE__ */ jsx8("div", { ref: containerRef, style: { display: "none" } }),
+    /* @__PURE__ */ jsx8(
       MapDrawer,
       {
         clampedDragOffset,
@@ -1129,14 +1623,16 @@ var MapControls = ({
         onChangeState: setDrawerState,
         ref: mergedRef,
         safeAreaInsets: mapContext?.insets,
+        scrollToTopThreshold,
         setCurrentTouchY,
         setTouchStartY,
+        showScrollToTopButton,
         side,
         state: drawerState,
         touchStartY
       }
     ),
-    /* @__PURE__ */ jsx5(
+    /* @__PURE__ */ jsx8(
       MapRightControls,
       {
         clampedDragOffset,
@@ -1158,7 +1654,7 @@ var MapControls = ({
         side
       }
     ),
-    resolvedEtaData && /* @__PURE__ */ jsx5(
+    resolvedEtaData && /* @__PURE__ */ jsx8(
       MapEtaPanel,
       {
         etaData: resolvedEtaData,
@@ -1177,9 +1673,9 @@ var MapControls = ({
 
 // src/components/Map/components/MapMenu.tsx
 import { useContext as useContext3 } from "react";
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 var MapMenu = ({ children }) => {
-  return /* @__PURE__ */ jsx6("div", { className: "flex flex-col gap-1.5", children });
+  return /* @__PURE__ */ jsx9("div", { className: "flex flex-col gap-1.5", children });
 };
 var MapMenuItem = ({
   id,
@@ -1198,7 +1694,7 @@ var MapMenuItem = ({
       context.setDrawerState("closed");
     }
   };
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     "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"}`,
@@ -1206,12 +1702,12 @@ var MapMenuItem = ({
       onClick: handleClick,
       type: "button",
       children: [
-        icon && /* @__PURE__ */ jsxs5("div", { className: "relative flex items-center justify-center w-8 h-8 rounded-lg bg-white/5 text-zinc-300", 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,
-          badge !== void 0 && /* @__PURE__ */ jsx6("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__ */ 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 })
         ] }),
-        /* @__PURE__ */ jsxs5("div", { className: "flex-1 flex flex-col justify-center", children: [
-          /* @__PURE__ */ jsx6("span", { className: "text-sm font-medium tracking-wide flex-1", children: label }),
+        /* @__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 }),
           children
         ] })
       ]
@@ -1225,7 +1721,7 @@ var MapMenuTitle = ({
   showDivider = true,
   className = ""
 }) => {
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx9(
     "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" : ""}`,
@@ -1237,14 +1733,14 @@ MapMenuTitle.displayName = "MapMenuTitle";
 var MapMenuDivider = ({
   className = ""
 }) => {
-  return /* @__PURE__ */ jsx6("div", { className: `h-[1px] bg-white/10 my-3 mx-3.5 ${className}` });
+  return /* @__PURE__ */ jsx9("div", { className: `h-[1px] bg-white/10 my-3 mx-3.5 ${className}` });
 };
 MapMenuDivider.displayName = "MapMenuDivider";
 var MapMenuFooter = ({
   children,
   className = ""
 }) => {
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx9(
     "div",
     {
       className: `mt-auto pt-4 border-t border-white/10 px-3.5 text-xs text-zinc-500 font-medium ${className}`,
@@ -1272,10 +1768,10 @@ var GlobalEvent = /* @__PURE__ */ ((GlobalEvent2) => {
 })(GlobalEvent || {});
 
 // src/components/Map/hooks/useUserLocation.ts
-import { useCallback as useCallback3, useEffect as useEffect2, useRef as useRef4, useState as useState3 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect3, useRef as useRef4, useState as useState4 } from "react";
 var LERP_FACTOR = 0.12;
 var useUserLocation = () => {
-  const [locationState, setLocationState] = useState3({
+  const [locationState, setLocationState] = useState4({
     accuracy: null,
     coords: null,
     heading: null
@@ -1308,7 +1804,7 @@ var useUserLocation = () => {
       heading
     };
   }, []);
-  useEffect2(() => {
+  useEffect3(() => {
     let rafId;
     const animate = () => {
       let changed = false;
@@ -1387,7 +1883,7 @@ var useUserLocation = () => {
 };
 
 // src/components/Map/hooks/useLiveRouting.ts
-import { useCallback as useCallback4, useEffect as useEffect3, useMemo as useMemo2, useRef as useRef5, useState as useState4 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect4, useMemo as useMemo2, useRef as useRef5, useState as useState5 } from "react";
 var useLiveRouting = ({
   origin: manualOrigin,
   destination,
@@ -1396,13 +1892,14 @@ var useLiveRouting = ({
   enabled = true,
   initialMode = "preview"
 }) => {
-  const [route, setRoute] = useState4(null);
-  const [totalDistance, setTotalDistance] = useState4(null);
-  const [isCalculating, setIsCalculating] = useState4(false);
-  const [error, setError] = useState4(null);
-  const [mode, setMode] = useState4(initialMode);
+  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 userLocationState = useUserLocation();
-  const userLocation = manualOrigin || userLocationState.coords;
+  const calculationOrigin = manualOrigin || userLocationState.coords;
+  const trackingLocation = userLocationState.coords || manualOrigin;
   const lastCalcOrigin = useRef5(null);
   const lastCalcDest = useRef5(null);
   const isRequestInProgress = useRef5(false);
@@ -1420,9 +1917,32 @@ var useLiveRouting = ({
     []
   );
   const currentDistanceMeters = useMemo2(() => {
-    if (!userLocation || !destination) return null;
-    return getDistance(userLocation, destination);
-  }, [userLocation, destination, getDistance]);
+    if (!trackingLocation || !route || route.geometry.coordinates.length < 2) {
+      if (trackingLocation && destination) {
+        return getDistance(trackingLocation, destination);
+      }
+      return null;
+    }
+    const coords = route.geometry.coordinates;
+    let minDistSq = Infinity;
+    let closestIndex = 0;
+    const getDistSq = (p1, p2) => (p1[0] - p2[0]) ** 2 + (p1[1] - p2[1]) ** 2;
+    for (let i = 0; i < coords.length; i++) {
+      const d = getDistSq(trackingLocation, coords[i]);
+      if (d < minDistSq) {
+        minDistSq = d;
+        closestIndex = i;
+      }
+    }
+    const remainingCoords = coords.slice(closestIndex + 1);
+    let dist = 0;
+    let prev = trackingLocation;
+    for (const coord of remainingCoords) {
+      dist += getDistance(prev, coord);
+      prev = coord;
+    }
+    return dist;
+  }, [trackingLocation, route, destination, getDistance]);
   const calculate = useCallback4(
     async (origin, dest, isNewDest) => {
       if (isRequestInProgress.current) return;
@@ -1437,7 +1957,15 @@ var useLiveRouting = ({
         setRoute(data);
         setError(null);
         if (isNewDest) {
-          setTotalDistance(data.distanceMeters);
+          const coords = data.geometry.coordinates;
+          let sum = 0;
+          for (let i = 0; i < coords.length - 1; i++) {
+            sum += getDistance(
+              coords[i],
+              coords[i + 1]
+            );
+          }
+          setTotalDistance(sum);
         }
         lastCalcOrigin.current = origin;
         lastCalcDest.current = dest;
@@ -1448,10 +1976,10 @@ var useLiveRouting = ({
         isRequestInProgress.current = false;
       }
     },
-    [profile]
+    [profile, getDistance]
   );
-  useEffect3(() => {
-    if (!enabled || !destination || !userLocation) {
+  useEffect4(() => {
+    if (!enabled || !destination || !calculationOrigin) {
       if (!enabled || !destination) {
         setRoute(null);
         setTotalDistance(null);
@@ -1462,17 +1990,19 @@ var useLiveRouting = ({
     }
     const destChanged = !lastCalcDest.current || lastCalcDest.current[0] !== destination[0] || lastCalcDest.current[1] !== destination[1];
     if (destChanged) {
-      calculate(userLocation, destination, true);
+      calculate(calculationOrigin, destination, true);
     } else if (lastCalcOrigin.current) {
-      const dist = getDistance(userLocation, lastCalcOrigin.current);
+      const livePos = trackingLocation || calculationOrigin;
+      const dist = getDistance(livePos, lastCalcOrigin.current);
       if (dist > recalculateThreshold) {
-        calculate(userLocation, destination, false);
+        calculate(livePos, destination, false);
       }
     } else {
-      calculate(userLocation, destination, true);
+      calculate(calculationOrigin, destination, true);
     }
   }, [
-    userLocation,
+    calculationOrigin,
+    trackingLocation,
     destination,
     enabled,
     recalculateThreshold,
@@ -1484,17 +2014,17 @@ var useLiveRouting = ({
     error,
     isCalculating,
     mode,
-    recalculate: () => userLocation && destination && calculate(userLocation, destination, false),
+    recalculate: () => calculationOrigin && destination && calculate(calculationOrigin, destination, false),
     route,
     start: () => setMode("navigation"),
     totalDistance
   };
 };
 var useRoute = (origin, destination, profile = "driving") => {
-  const [route, setRoute] = useState4(null);
-  const [isCalculating, setIsCalculating] = useState4(false);
-  const [error, setError] = useState4(null);
-  useEffect3(() => {
+  const [route, setRoute] = useState5(null);
+  const [isCalculating, setIsCalculating] = useState5(false);
+  const [error, setError] = useState5(null);
+  useEffect4(() => {
     if (!origin || !destination) {
       setRoute(null);
       return;
@@ -1548,7 +2078,7 @@ var useTrimmedRoute = (route, userLocation) => {
 
 // src/components/Map/layers/RouteLayer.tsx
 import { Layer, Source } from "@vis.gl/react-maplibre";
-import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 var RouteLayer = ({
   geometry,
   color = "#3b82f6",
@@ -1561,8 +2091,8 @@ var RouteLayer = ({
     properties: {},
     type: "Feature"
   };
-  return /* @__PURE__ */ jsxs6(Source, { data, id: "sdk-route-source", type: "geojson", children: [
-    /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsxs7(Source, { data, id: "sdk-route-source", type: "geojson", children: [
+    /* @__PURE__ */ jsx10(
       Layer,
       {
         id: "sdk-route-layer-casing",
@@ -1575,7 +2105,7 @@ var RouteLayer = ({
         type: "line"
       }
     ),
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx10(
       Layer,
       {
         id: "sdk-route-layer",
@@ -1596,20 +2126,20 @@ var RouteLayer = ({
 
 // src/components/Map/Map.tsx
 import { Map as MapLibre, MapProvider } from "@vis.gl/react-maplibre";
-import React, {
+import React4, {
   useCallback as useCallback5,
   useContext as useContext4,
-  useEffect as useEffect5,
+  useEffect as useEffect6,
   useMemo as useMemo5,
   useRef as useRef6,
-  useState as useState6
+  useState as useState7
 } from "react";
 import "maplibre-gl/dist/maplibre-gl.css";
 
 // src/components/Map/layers/POILayers.tsx
 import { Layer as Layer2, Source as Source2, useMap } from "@vis.gl/react-maplibre";
-import { useEffect as useEffect4, useMemo as useMemo4, useState as useState5 } from "react";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { useEffect as useEffect5, useMemo as useMemo4, useState as useState6 } from "react";
+import { jsx as jsx11 } from "react/jsx-runtime";
 function createEmojiIcon(emoji, size = 64) {
   const canvas = document.createElement("canvas");
   canvas.width = size;
@@ -1622,13 +2152,13 @@ function createEmojiIcon(emoji, size = 64) {
   return ctx.getImageData(0, 0, size, size);
 }
 var POILayers = ({ pois }) => {
-  const [loadedImages, setLoadedImages] = useState5(0);
+  const [loadedImages, setLoadedImages] = useState6(0);
   const { current: map } = useMap();
   const glPois = useMemo4(
     () => pois.filter((p) => !p.displayMode || p.displayMode === "gl"),
     [pois]
   );
-  useEffect4(() => {
+  useEffect5(() => {
     if (!map) return;
     const glMap = map.getMap();
     const defaults = [
@@ -1686,7 +2216,7 @@ var POILayers = ({ pois }) => {
     }),
     [glPois]
   );
-  return /* @__PURE__ */ jsx8(Source2, { data: geojson, id: "sdk-pois", type: "geojson", children: /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx11(Source2, { data: geojson, id: "sdk-pois", type: "geojson", children: /* @__PURE__ */ jsx11(
     Layer2,
     {
       id: "sdk-poi-layer",
@@ -1723,11 +2253,11 @@ var POILayers = ({ pois }) => {
 
 // src/components/Map/layers/POIMarkers.tsx
 import { Marker } from "@vis.gl/react-maplibre";
-import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
 var POIMarkers = ({ pois, onClick }) => {
   const markerPois = pois.filter((p) => p.displayMode === "marker");
   if (markerPois.length === 0) return null;
-  return /* @__PURE__ */ jsx9(Fragment3, { children: markerPois.map((poi) => /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx12(Fragment3, { children: markerPois.map((poi) => /* @__PURE__ */ jsx12(
     Marker,
     {
       anchor: "bottom",
@@ -1737,7 +2267,7 @@ var POIMarkers = ({ pois, onClick }) => {
         e.originalEvent.stopPropagation();
         if (onClick) onClick(poi);
       },
-      children: poi.markerComponent ? poi.markerComponent : /* @__PURE__ */ jsxs7(
+      children: poi.markerComponent ? poi.markerComponent : /* @__PURE__ */ jsxs8(
         "div",
         {
           style: {
@@ -1746,7 +2276,7 @@ var POIMarkers = ({ pois, onClick }) => {
             transform: "transition-transform duration-200 hover:scale-110"
           },
           children: [
-            /* @__PURE__ */ jsx9(
+            /* @__PURE__ */ jsx12(
               "div",
               {
                 style: {
@@ -1759,7 +2289,7 @@ var POIMarkers = ({ pois, onClick }) => {
                   justifyContent: "center",
                   width: "32px"
                 },
-                children: poi.emoji ? /* @__PURE__ */ jsx9("span", { style: { fontSize: "16px" }, children: poi.emoji }) : /* @__PURE__ */ jsx9(
+                children: poi.emoji ? /* @__PURE__ */ jsx12("span", { style: { fontSize: "16px" }, children: poi.emoji }) : /* @__PURE__ */ jsx12(
                   "div",
                   {
                     style: {
@@ -1772,7 +2302,7 @@ var POIMarkers = ({ pois, onClick }) => {
                 )
               }
             ),
-            /* @__PURE__ */ jsx9(
+            /* @__PURE__ */ jsx12(
               "div",
               {
                 style: {
@@ -1795,19 +2325,19 @@ var POIMarkers = ({ pois, onClick }) => {
 
 // src/components/Map/layers/UserLocationLayer.tsx
 import { Marker as Marker2 } from "@vis.gl/react-maplibre";
-import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
 var UserLocationLayer = ({
   forcedLocation,
   heading
 }) => {
   if (!forcedLocation) return null;
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx13(
     Marker2,
     {
       anchor: "center",
       latitude: forcedLocation[1],
       longitude: forcedLocation[0],
-      children: /* @__PURE__ */ jsxs8(
+      children: /* @__PURE__ */ jsxs9(
         "div",
         {
           style: {
@@ -1817,7 +2347,7 @@ var UserLocationLayer = ({
             position: "relative"
           },
           children: [
-            /* @__PURE__ */ jsx10(
+            /* @__PURE__ */ jsx13(
               "div",
               {
                 style: {
@@ -1830,7 +2360,7 @@ var UserLocationLayer = ({
                 }
               }
             ),
-            heading !== void 0 && heading !== null && /* @__PURE__ */ jsx10(
+            heading !== void 0 && heading !== null && /* @__PURE__ */ jsx13(
               "div",
               {
                 style: {
@@ -1840,13 +2370,13 @@ var UserLocationLayer = ({
                   width: "60px",
                   zIndex: 0
                 },
-                children: /* @__PURE__ */ jsxs8(
+                children: /* @__PURE__ */ jsxs9(
                   "svg",
                   {
                     style: { height: "100%", width: "100%" },
                     viewBox: "0 0 100 100",
                     children: [
-                      /* @__PURE__ */ jsx10("defs", { children: /* @__PURE__ */ jsxs8(
+                      /* @__PURE__ */ jsx13("defs", { children: /* @__PURE__ */ jsxs9(
                         "radialGradient",
                         {
                           cx: "50%",
@@ -1856,7 +2386,7 @@ var UserLocationLayer = ({
                           id: "grad1",
                           r: "50%",
                           children: [
-                            /* @__PURE__ */ jsx10(
+                            /* @__PURE__ */ jsx13(
                               "stop",
                               {
                                 offset: "0%",
@@ -1866,7 +2396,7 @@ var UserLocationLayer = ({
                                 }
                               }
                             ),
-                            /* @__PURE__ */ jsx10(
+                            /* @__PURE__ */ jsx13(
                               "stop",
                               {
                                 offset: "100%",
@@ -1879,7 +2409,7 @@ var UserLocationLayer = ({
                           ]
                         }
                       ) }),
-                      /* @__PURE__ */ jsx10(
+                      /* @__PURE__ */ jsx13(
                         "path",
                         {
                           d: "M 50 50 L 35 0 A 50 50 0 0 1 65 0 Z",
@@ -1891,7 +2421,7 @@ var UserLocationLayer = ({
                 )
               }
             ),
-            /* @__PURE__ */ jsx10(
+            /* @__PURE__ */ jsx13(
               "div",
               {
                 style: {
@@ -1905,7 +2435,7 @@ var UserLocationLayer = ({
                   width: "20px",
                   zIndex: 1
                 },
-                children: /* @__PURE__ */ jsx10(
+                children: /* @__PURE__ */ jsx13(
                   "div",
                   {
                     style: {
@@ -1919,7 +2449,7 @@ var UserLocationLayer = ({
                 )
               }
             ),
-            /* @__PURE__ */ jsx10("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__ */ jsx13("style", { children: `@keyframes pulse { 0% { transform: scale(0.95); opacity: 0.7; } 70% { transform: scale(1.5); opacity: 0; } 100% { transform: scale(0.95); opacity: 0; } }` })
           ]
         }
       )
@@ -1928,7 +2458,7 @@ var UserLocationLayer = ({
 };
 
 // src/components/Map/Map.tsx
-import { Fragment as Fragment4, jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
 var MapInternal = ({
   initialViewState = {
     latitude: 45.90583599233422,
@@ -1968,15 +2498,19 @@ var MapInternal = ({
   const mapControls = useContext4(MapControlsContext);
   const mapRef = useRef6(null);
   const userLocationState = useUserLocation();
-  const [progNav, setProgNav] = useState6(null);
-  useEffect5(() => {
+  const [progNav, setProgNav] = useState7(null);
+  const [isAborted, setIsAborted] = useState7(false);
+  useEffect6(() => {
     const unsubCreate = sdk.on("SDK_NAVIGATION_CREATE", (payload) => {
+      setIsAborted(false);
       setProgNav(payload);
     });
     const unsubStart = sdk.on("SDK_NAVIGATION_START", () => {
+      setIsAborted(false);
       setProgNav((prev) => prev ? { ...prev, mode: "navigation" } : null);
     });
     const unsubAbort = sdk.on("SDK_NAVIGATION_ABORT", () => {
+      setIsAborted(true);
       setProgNav(null);
     });
     return () => {
@@ -1994,19 +2528,29 @@ var MapInternal = ({
     profile: effectiveNavOptions?.profile || "driving",
     recalculateThreshold: effectiveNavOptions?.recalculateThreshold || 50
   });
-  useEffect5(() => {
+  useEffect6(() => {
     if (onNavigationModeChange && navigation) {
       onNavigationModeChange(internalNav.mode);
     }
   }, [internalNav.mode, onNavigationModeChange, navigation]);
-  const navigationData = effectiveNavOptions ? internalNav : externalNavigationData;
-  const route = effectiveNavOptions ? internalNav.route?.geometry : externalRoute;
-  const showNavigationUI = effectiveNavOptions?.showUI !== false && (effectiveNavOptions ? !!effectiveNavOptions.destination : externalShowNavigationUI);
+  const prevDest = useRef6(null);
+  const currentDest = effectiveNavOptions?.destination;
+  useEffect6(() => {
+    if (currentDest) {
+      if (!prevDest.current || prevDest.current[0] !== currentDest[0] || prevDest.current[1] !== currentDest[1]) {
+        setIsAborted(false);
+      }
+    }
+    prevDest.current = currentDest;
+  }, [currentDest]);
+  const navigationData = !isAborted ? effectiveNavOptions ? internalNav : externalNavigationData : void 0;
+  const route = !isAborted ? effectiveNavOptions ? internalNav.route?.geometry : externalRoute : void 0;
+  const showNavigationUI = !isAborted && effectiveNavOptions?.showUI !== false && (effectiveNavOptions ? !!effectiveNavOptions.destination : externalShowNavigationUI);
   const mode = navigationData?.mode || "preview";
   const resolvedInitialFollow = mapControls ? mapControls.isFollowing : initialFollowUser;
   const isFollowingRef = useRef6(resolvedInitialFollow);
   const isFlyingRef = useRef6(false);
-  const [localIsFollowingUI, setLocalIsFollowingUI] = useState6(
+  const [localIsFollowingUI, setLocalIsFollowingUI] = useState7(
     resolvedInitialFollow
   );
   const isFollowingUI = mapControls ? mapControls.isFollowing : localIsFollowingUI;
@@ -2021,7 +2565,7 @@ var MapInternal = ({
     },
     [setIsFollowingCtx]
   );
-  useEffect5(() => {
+  useEffect6(() => {
     if (mapControls && mapControls.isFollowing !== isFollowingRef.current) {
       isFollowingRef.current = mapControls.isFollowing;
     }
@@ -2031,7 +2575,7 @@ var MapInternal = ({
     mergedInteractiveLayerIds.push("sdk-poi-layer");
   }
   const prevInitialFollow = useRef6(initialFollowUser);
-  useEffect5(() => {
+  useEffect6(() => {
     if (initialFollowUser !== prevInitialFollow.current) {
       setFollowMode(initialFollowUser);
       prevInitialFollow.current = initialFollowUser;
@@ -2050,15 +2594,29 @@ var MapInternal = ({
     }
   }, [initialFollowUser, setFollowMode, userLocationState.coords]);
   const lastAutoLockedRouteRef = useRef6(null);
-  useEffect5(() => {
+  const lastModeRef = useRef6(null);
+  useEffect6(() => {
     if (!route || !mapRef.current) {
       if (!route) lastAutoLockedRouteRef.current = null;
       return;
     }
     const isNewRoute = route !== lastAutoLockedRouteRef.current;
-    if (!isNewRoute && mode === "navigation") return;
+    const modeChanged = lastModeRef.current !== mode;
     if (mode === "navigation") {
       setFollowMode(true);
+      if ((modeChanged || isNewRoute) && userLocationState.coords && mapRef.current) {
+        isFlyingRef.current = true;
+        mapRef.current.flyTo({
+          center: userLocationState.coords,
+          duration: 1e3,
+          essential: true,
+          zoom: 17
+          // Zoomed in on user for active guidance
+        });
+        setTimeout(() => {
+          isFlyingRef.current = false;
+        }, 1050);
+      }
     } else if (mode === "preview" && isNewRoute) {
       setFollowMode(false);
       const coords = route.coordinates;
@@ -2082,8 +2640,9 @@ var MapInternal = ({
       }
     }
     lastAutoLockedRouteRef.current = route;
-  }, [route, mode, setFollowMode]);
-  useEffect5(() => {
+    lastModeRef.current = mode;
+  }, [route, mode, setFollowMode, userLocationState.coords]);
+  useEffect6(() => {
     if (isFollowingRef.current && !isFlyingRef.current && userLocationState.coords && mapRef.current) {
       mapRef.current.easeTo({
         center: userLocationState.coords,
@@ -2098,41 +2657,41 @@ var MapInternal = ({
     route,
     showUserLocation ? userLocationState.coords : null
   );
-  const remainingMeters = navigationData?.currentDistanceMeters ?? navigationData?.route?.distanceMeters ?? 0;
-  const etaMins = navigationData?.route?.durationSeconds ? Math.ceil(navigationData.route.durationSeconds / 60) : 0;
+  const currentDistMeters = navigationData?.currentDistanceMeters ?? null;
+  const totalDist = navigationData?.totalDistance ?? null;
+  const routeDurationSeconds = navigationData?.route?.durationSeconds ?? null;
+  const remainingMeters = currentDistMeters ?? 0;
+  const etaMins = (() => {
+    if (!routeDurationSeconds || !totalDist || !currentDistMeters) return 0;
+    const ratio = currentDistMeters / totalDist;
+    return Math.ceil(routeDurationSeconds * ratio / 60);
+  })();
   const kmRemaining = remainingMeters / 1e3;
-  const totalDist = navigationData?.totalDistance ?? 0;
-  const progressValue = totalDist > 0 ? (totalDist - remainingMeters) / totalDist * 100 : 0;
-  const showEtaData = useMemo5(() => {
-    if (!navigationData || !route) return void 0;
-    return {
-      distanceRemainingKm: kmRemaining,
-      etaMins,
-      label: mode === "navigation" ? "Walking Guidance Active" : "Route Preview",
-      mode,
-      onAbort: onNavigationAbort || (() => {
-        setProgNav(null);
-      }),
-      onStart: navigationData.start,
-      progress: progressValue
-    };
-  }, [
-    navigationData,
-    route,
+  const progressValue = totalDist && totalDist > 0 ? Math.min(100, Math.max(0, (totalDist - remainingMeters) / totalDist * 100)) : 0;
+  const showEtaData = navigationData && route ? {
+    distanceRemainingKm: kmRemaining,
     etaMins,
-    kmRemaining,
+    label: mode === "navigation" ? "Walking Guidance Active" : "Route Preview",
     mode,
-    progressValue,
-    onNavigationAbort
-  ]);
+    onAbort: () => {
+      setIsAborted(true);
+      setProgNav(null);
+      sdk.navigation.abort();
+      if (onNavigationAbort) {
+        onNavigationAbort();
+      }
+    },
+    onStart: navigationData.start,
+    progress: progressValue
+  } : void 0;
   const setEtaDataCtx = mapControls?.setEtaData;
-  useEffect5(() => {
+  useEffect6(() => {
     if (setEtaDataCtx) {
       setEtaDataCtx(showEtaData);
     }
   }, [showEtaData, setEtaDataCtx]);
   const setDrawerStateCtx = mapControls?.setDrawerState;
-  useEffect5(() => {
+  useEffect6(() => {
     if (setDrawerStateCtx && propDrawerState !== void 0) {
       setDrawerStateCtx(propDrawerState);
     }
@@ -2140,7 +2699,7 @@ var MapInternal = ({
   const defaultMenuItems = useMemo5(
     () => [
       {
-        icon: /* @__PURE__ */ jsx11(
+        icon: /* @__PURE__ */ jsx14(
           "svg",
           {
             className: "w-5 h-5",
@@ -2148,7 +2707,7 @@ var MapInternal = ({
             stroke: "currentColor",
             strokeWidth: "2",
             viewBox: "0 0 24 24",
-            children: /* @__PURE__ */ jsx11(
+            children: /* @__PURE__ */ jsx14(
               "path",
               {
                 d: "M12 11c0 3.517-1.009 6.799-2.753 9.571m-3.44-2.04l.054-.09A13.916 13.916 0 008 11a4 4 0 118 0c0 1.017-.07 2.019-.203 3m-2.118 6.844A21.88 21.88 0 0015.171 17m3.839 1.132c.645-2.266.99-4.659.99-7.132A8 8 0 008 4.07M3 15.364c.64-1.319 1-2.8 1-4.364 0-1.457.39-2.823 1.07-4",
@@ -2170,8 +2729,8 @@ var MapInternal = ({
   const { mapLibreChildren, menuContentFromChildren } = useMemo5(() => {
     const mapLibreChildren2 = [];
     const extractedMenuItems = [];
-    React.Children.forEach(children, (child) => {
-      if (React.isValidElement(child)) {
+    React4.Children.forEach(children, (child) => {
+      if (React4.isValidElement(child)) {
         const type = child.type;
         const displayName = type?.displayName || type?.name;
         const isMenu = type === MapMenu || displayName === "MapMenu";
@@ -2182,7 +2741,7 @@ var MapInternal = ({
           "MapMenuFooter"
         ].includes(displayName);
         if (isMenu) {
-          React.Children.forEach(
+          React4.Children.forEach(
             child.props.children,
             (nestedChild) => {
               if (nestedChild) {
@@ -2199,7 +2758,7 @@ var MapInternal = ({
         mapLibreChildren2.push(child);
       }
     });
-    const menuContentFromChildren2 = extractedMenuItems.length > 0 ? /* @__PURE__ */ jsx11(MapMenu, { children: extractedMenuItems }) : null;
+    const menuContentFromChildren2 = extractedMenuItems.length > 0 ? /* @__PURE__ */ jsx14(MapMenu, { children: extractedMenuItems }) : null;
     return { mapLibreChildren: mapLibreChildren2, menuContentFromChildren: menuContentFromChildren2 };
   }, [children]);
   const handleMapClick = (e) => {
@@ -2252,7 +2811,7 @@ var MapInternal = ({
       });
     }
   }, []);
-  useEffect5(() => {
+  useEffect6(() => {
     if (mapControls) {
       mapControls._registerCenterCallback(handleCenterOnUser);
       mapControls._registerResetBearingCallback(handleResetBearing);
@@ -2273,13 +2832,13 @@ var MapInternal = ({
       }
     }
   };
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs10(
     "div",
     {
       className: `w-full h-full overflow-hidden relative ${className}`,
       style,
       children: [
-        /* @__PURE__ */ jsxs9(
+        /* @__PURE__ */ jsxs10(
           MapLibre,
           {
             attributionControl: false,
@@ -2308,23 +2867,23 @@ var MapInternal = ({
               showUserLocation && userLocationState.coords && (renderUserLocation ? renderUserLocation({
                 coords: userLocationState.coords,
                 heading: userLocationState.heading
-              }) : /* @__PURE__ */ jsx11(
+              }) : /* @__PURE__ */ jsx14(
                 UserLocationLayer,
                 {
                   forcedLocation: userLocationState.coords,
                   heading: userLocationState.heading
                 }
               )),
-              displayRoute && /* @__PURE__ */ jsx11(RouteLayer, { geometry: displayRoute }),
-              pois.length > 0 && /* @__PURE__ */ jsxs9(Fragment4, { children: [
-                /* @__PURE__ */ jsx11(POILayers, { pois }),
-                /* @__PURE__ */ jsx11(POIMarkers, { onClick: onPoiClick, pois })
+              displayRoute && /* @__PURE__ */ jsx14(RouteLayer, { geometry: displayRoute }),
+              pois.length > 0 && /* @__PURE__ */ jsxs10(Fragment4, { children: [
+                /* @__PURE__ */ jsx14(POILayers, { pois }),
+                /* @__PURE__ */ jsx14(POIMarkers, { onClick: onPoiClick, pois })
               ] }),
               mapLibreChildren
             ]
           }
         ),
-        showControls && mapControls && !mapControls.hasControls && /* @__PURE__ */ jsx11(
+        showControls && mapControls && !mapControls.hasControls && /* @__PURE__ */ jsx14(
           MapControls,
           {
             drawerContentRef,
@@ -2346,16 +2905,16 @@ var SDKMapProviderWrapper = ({
 }) => {
   const context = useContext4(MapControlsContext);
   if (context) {
-    return /* @__PURE__ */ jsx11(Fragment4, { children });
+    return /* @__PURE__ */ jsx14(Fragment4, { children });
   }
-  return /* @__PURE__ */ jsx11(SDKMapProvider, { children });
+  return /* @__PURE__ */ jsx14(SDKMapProvider, { children });
 };
 var Map2 = (props) => {
-  return /* @__PURE__ */ jsx11(SDKMapProviderWrapper, { children: /* @__PURE__ */ jsx11(MapProvider, { children: /* @__PURE__ */ jsx11(MapInternal, { ...props }) }) });
+  return /* @__PURE__ */ jsx14(SDKMapProviderWrapper, { children: /* @__PURE__ */ jsx14(MapProvider, { children: /* @__PURE__ */ jsx14(MapInternal, { ...props }) }) });
 };
 
 // src/components/MapWrapper.tsx
-import React2 from "react";
+import React5 from "react";
 import { createRoot } from "react-dom/client";
 function renderMap(containerId, props = {}) {
   const container = document.getElementById(containerId);
@@ -2363,12 +2922,12 @@ function renderMap(containerId, props = {}) {
     throw new Error(`Container with id "${containerId}" not found.`);
   }
   const root = createRoot(container);
-  root.render(React2.createElement(Map2, props));
+  root.render(React5.createElement(Map2, props));
   return root;
 }
 
 // package.json
-var version = "0.2.0";
+var version = "0.2.2";
 
 // src/sdk.ts
 function deepFreeze(obj) {
@@ -2700,8 +3259,8 @@ var MiniAppSDK = class {
 var sdk = deepFreeze(new MiniAppSDK());
 
 // src/components/BridgeMocker.tsx
-import { useCallback as useCallback6, useEffect as useEffect6, useRef as useRef7, useState as useState7 } from "react";
-import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+import { useCallback as useCallback6, useEffect as useEffect7, useRef as useRef7, useState as useState8 } from "react";
+import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
 var getBearing = (p1, p2) => {
   const lat1 = p1[1] * Math.PI / 180;
   const lat2 = p2[1] * Math.PI / 180;
@@ -2720,12 +3279,12 @@ var BridgeMocker = ({
   mockJWTToken,
   children
 }) => {
-  const [autoMove, setAutoMove] = useState7(isMoving);
-  const [location, setLocation] = useState7(initialLocation);
-  const [heading, setHeading] = useState7(0);
-  const [speedMultiplier, setSpeedMultiplier] = useState7(simulationSpeed);
-  const [isReady, setIsReady] = useState7(false);
-  const [isMinimized, setIsMinimized] = useState7(true);
+  const [autoMove, setAutoMove] = useState8(isMoving);
+  const [location, setLocation] = useState8(initialLocation);
+  const [heading, setHeading] = useState8(0);
+  const [speedMultiplier, setSpeedMultiplier] = useState8(simulationSpeed);
+  const [isReady, setIsReady] = useState8(false);
+  const [isMinimized, setIsMinimized] = useState8(true);
   const streamIntervalRef = useRef7(null);
   const pathIndexRef = useRef7(0);
   const activeConfigRef = useRef7(null);
@@ -2770,7 +3329,7 @@ var BridgeMocker = ({
       type: "EVENT"
     });
   }, []);
-  useEffect6(() => {
+  useEffect7(() => {
     stateRef.current = {
       autoMove,
       heading,
@@ -2791,19 +3350,19 @@ var BridgeMocker = ({
     speedMultiplier,
     mockJWTToken
   ]);
-  useEffect6(() => {
+  useEffect7(() => {
     setAutoMove(isMoving);
   }, [isMoving]);
-  useEffect6(() => {
+  useEffect7(() => {
     setSpeedMultiplier(simulationSpeed);
   }, [simulationSpeed]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (simulationPath && simulationPath.length > 0) {
       pathIndexRef.current = 0;
       setLocation(simulationPath[0]);
     }
   }, [simulationPath]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (streamIntervalRef.current && activeConfigRef.current) {
       sdk.bridge.send(
         "START_LOCATION_STREAM",
@@ -2811,7 +3370,7 @@ var BridgeMocker = ({
       );
     }
   }, [speedMultiplier]);
-  useEffect6(() => {
+  useEffect7(() => {
     const bridge = sdk.bridge;
     const originalSend = bridge.send.bind(bridge);
     const stopStream = () => {
@@ -2993,16 +3552,17 @@ var BridgeMocker = ({
     };
   }, [appId]);
   if (!isReady) return null;
-  return /* @__PURE__ */ jsxs10("div", { className: "relative w-full h-full", children: [
-    /* @__PURE__ */ jsx12("div", { className: "w-full h-full", children }),
-    isMinimized ? /* @__PURE__ */ jsx12(
-      "button",
+  return /* @__PURE__ */ jsxs11("div", { className: "relative w-full h-full", children: [
+    /* @__PURE__ */ jsx15("div", { className: "w-full h-full", children }),
+    isMinimized ? /* @__PURE__ */ jsx15(
+      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 z-[9999] transition-all shadow-lg group",
+        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!",
         onClick: () => setIsMinimized(false),
         title: "Open Simulation Controls",
         type: "button",
-        children: /* @__PURE__ */ jsxs10(
+        variant: "ghost",
+        children: /* @__PURE__ */ jsxs11(
           "svg",
           {
             className: "group-hover:scale-110 transition-transform",
@@ -3016,41 +3576,49 @@ var BridgeMocker = ({
             width: "14",
             xmlns: "http://www.w3.org/2000/svg",
             children: [
-              /* @__PURE__ */ jsx12("path", { d: "M21 4H3" }),
-              /* @__PURE__ */ jsx12("path", { d: "M10 8H3" }),
-              /* @__PURE__ */ jsx12("path", { d: "M21 12H3" }),
-              /* @__PURE__ */ jsx12("path", { d: "M10 16H3" }),
-              /* @__PURE__ */ jsx12("path", { d: "M21 20H3" }),
-              /* @__PURE__ */ jsx12("circle", { cx: "14", cy: "8", r: "2" }),
-              /* @__PURE__ */ jsx12("circle", { cx: "14", cy: "16", r: "2" })
+              /* @__PURE__ */ jsx15("path", { d: "M21 4H3" }),
+              /* @__PURE__ */ jsx15("path", { d: "M10 8H3" }),
+              /* @__PURE__ */ jsx15("path", { d: "M21 12H3" }),
+              /* @__PURE__ */ jsx15("path", { d: "M10 16H3" }),
+              /* @__PURE__ */ jsx15("path", { d: "M21 20H3" }),
+              /* @__PURE__ */ jsx15("circle", { cx: "14", cy: "8", r: "2" }),
+              /* @__PURE__ */ jsx15("circle", { cx: "14", cy: "16", r: "2" })
             ]
           }
         )
       }
-    ) : /* @__PURE__ */ jsxs10(
+    ) : /* @__PURE__ */ jsxs11(
       "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__ */ jsxs10(
+          /* @__PURE__ */ jsxs11(
             "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__ */ jsxs10("span", { className: "font-bold text-slate-100 flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsx12("span", { className: "text-lg", children: "\u{1F6E0}\uFE0F" }),
+                /* @__PURE__ */ jsxs11("span", { className: "font-bold text-slate-100 flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx15("span", { className: "text-lg", children: "\u{1F6E0}\uFE0F" }),
                   " Simulation Controls"
                 ] }),
-                /* @__PURE__ */ jsx12("button", { className: "text-slate-500 hover:text-white", type: "button", children: "\u25BC" })
+                /* @__PURE__ */ jsx15(
+                  Button,
+                  {
+                    className: "text-slate-500 hover:text-white p-0 h-auto hover:bg-transparent cursor-pointer",
+                    type: "button",
+                    variant: "ghost",
+                    children: "\u25BC"
+                  }
+                )
               ]
             }
           ),
-          /* @__PURE__ */ jsxs10("div", { className: "p-4 flex flex-col gap-3", children: [
-            /* @__PURE__ */ jsxs10("div", { className: "flex justify-between items-center", children: [
-              /* @__PURE__ */ jsxs10("label", { className: "flex items-center gap-2 cursor-pointer", children: [
-                /* @__PURE__ */ jsx12(
+          /* @__PURE__ */ jsxs11("div", { className: "p-4 flex flex-col gap-3", children: [
+            /* @__PURE__ */ jsxs11("div", { className: "flex justify-between items-center", children: [
+              /* @__PURE__ */ jsxs11("label", { className: "flex items-center gap-2 cursor-pointer", children: [
+                /* @__PURE__ */ jsx15(
                   "input",
                   {
                     checked: autoMove,
@@ -3059,20 +3627,20 @@ var BridgeMocker = ({
                     type: "checkbox"
                   }
                 ),
-                /* @__PURE__ */ jsxs10("span", { className: "text-slate-200 font-bold", children: [
+                /* @__PURE__ */ jsxs11("span", { className: "text-slate-200 font-bold", children: [
                   "Auto-Move ",
                   simulationPath ? "(Path)" : "(Random)"
                 ] })
               ] }),
-              /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ jsx12("span", { className: "text-[10px] text-slate-500", children: "Speed:" }),
-                /* @__PURE__ */ jsx12(
+              /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx15("span", { className: "text-[10px] text-slate-500", children: "Speed:" }),
+                /* @__PURE__ */ jsx15(
                   "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__ */ jsxs10("option", { value: s, children: [
+                    children: [1, 2, 5, 10, 50, 100, 250].map((s) => /* @__PURE__ */ jsxs11("option", { value: s, children: [
                       s,
                       "x"
                     ] }, s))
@@ -3080,10 +3648,10 @@ var BridgeMocker = ({
                 )
               ] })
             ] }),
-            /* @__PURE__ */ jsxs10("div", { className: "grid grid-cols-2 gap-2", children: [
-              /* @__PURE__ */ jsxs10("div", { className: "flex flex-col gap-1", children: [
-                /* @__PURE__ */ jsx12("span", { className: "text-[10px] text-slate-500 text-left", children: "Lng" }),
-                /* @__PURE__ */ jsx12(
+            /* @__PURE__ */ jsxs11("div", { className: "grid grid-cols-2 gap-2", children: [
+              /* @__PURE__ */ jsxs11("div", { className: "flex flex-col gap-1", children: [
+                /* @__PURE__ */ jsx15("span", { className: "text-[10px] text-slate-500 text-left", children: "Lng" }),
+                /* @__PURE__ */ jsx15(
                   "input",
                   {
                     className: "bg-slate-800 border border-slate-700 rounded px-2 py-1 text-white focus:outline-none focus:border-blue-500",
@@ -3098,9 +3666,9 @@ var BridgeMocker = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxs10("div", { className: "flex flex-col gap-1", children: [
-                /* @__PURE__ */ jsx12("span", { className: "text-[10px] text-slate-500 text-left", children: "Lat" }),
-                /* @__PURE__ */ jsx12(
+              /* @__PURE__ */ jsxs11("div", { className: "flex flex-col gap-1", children: [
+                /* @__PURE__ */ jsx15("span", { className: "text-[10px] text-slate-500 text-left", children: "Lat" }),
+                /* @__PURE__ */ jsx15(
                   "input",
                   {
                     className: "bg-slate-800 border border-slate-700 rounded px-2 py-1 text-white focus:outline-none focus:border-blue-500",
@@ -3115,9 +3683,9 @@ var BridgeMocker = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxs10("div", { className: "flex flex-col gap-1 col-span-2", children: [
-                /* @__PURE__ */ jsx12("span", { className: "text-[10px] text-slate-500", children: "Heading (Degrees)" }),
-                /* @__PURE__ */ jsx12(
+              /* @__PURE__ */ jsxs11("div", { className: "flex flex-col gap-1 col-span-2", children: [
+                /* @__PURE__ */ jsx15("span", { className: "text-[10px] text-slate-500", children: "Heading (Degrees)" }),
+                /* @__PURE__ */ jsx15(
                   "input",
                   {
                     className: "w-full accent-blue-500",
@@ -3131,7 +3699,7 @@ var BridgeMocker = ({
                     value: heading
                   }
                 ),
-                /* @__PURE__ */ jsxs10("div", { className: "text-right text-slate-400", children: [
+                /* @__PURE__ */ jsxs11("div", { className: "text-right text-slate-400", children: [
                   heading,
                   "\xB0"
                 ] })
@@ -3145,16 +3713,16 @@ var BridgeMocker = ({
 };
 
 // src/components/DebugConsole.tsx
-import { useCallback as useCallback7, useEffect as useEffect7, useRef as useRef8, useState as useState8 } from "react";
-import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+import { useCallback as useCallback7, useEffect as useEffect8, useRef as useRef8, useState as useState9 } from "react";
+import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
 var DebugConsole = ({
   isOpen: initialOpen = false,
   onClose
 }) => {
-  const [showConsole, setShowConsole] = useState8(initialOpen);
-  const [logs, setLogs] = useState8([]);
+  const [showConsole, setShowConsole] = useState9(initialOpen);
+  const [logs, setLogs] = useState9([]);
   const scrollRef = useRef8(null);
-  useEffect7(() => {
+  useEffect8(() => {
     setShowConsole(initialOpen);
   }, [initialOpen]);
   const clearLogs = () => setLogs([]);
@@ -3168,7 +3736,7 @@ var DebugConsole = ({
     };
     setLogs((prev) => [entry, ...prev].slice(0, 100));
   }, []);
-  useEffect7(() => {
+  useEffect8(() => {
     if (typeof window === "undefined") return;
     const bridge = sdk.bridge;
     const originalSend = bridge.send.bind(bridge);
@@ -3190,14 +3758,15 @@ var DebugConsole = ({
     };
   }, [addLog]);
   if (!showConsole) {
-    return /* @__PURE__ */ jsx13(
-      "button",
+    return /* @__PURE__ */ jsx16(
+      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 transition-all z-[9998] shadow-lg group",
+        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!",
         onClick: () => setShowConsole(true),
         title: "Open Debug Console",
         type: "button",
-        children: /* @__PURE__ */ jsxs11(
+        variant: "ghost",
+        children: /* @__PURE__ */ jsxs12(
           "svg",
           {
             className: "group-hover:scale-110 transition-transform",
@@ -3211,68 +3780,70 @@ var DebugConsole = ({
             width: "14",
             xmlns: "http://www.w3.org/2000/svg",
             children: [
-              /* @__PURE__ */ jsx13("path", { d: "m8 2 1.88 1.88" }),
-              /* @__PURE__ */ jsx13("path", { d: "M14.12 3.88 16 2" }),
-              /* @__PURE__ */ jsx13("path", { d: "M9 7.13v-1a3.003 3.003 0 1 1 6 0v1" }),
-              /* @__PURE__ */ jsx13("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__ */ jsx13("path", { d: "M12 20v-9" }),
-              /* @__PURE__ */ jsx13("path", { d: "M6.53 9C4.6 8.8 3 7.1 3 5" }),
-              /* @__PURE__ */ jsx13("path", { d: "M6 13H2" }),
-              /* @__PURE__ */ jsx13("path", { d: "M3 21c0-2.1 1.7-3.9 3.8-4" }),
-              /* @__PURE__ */ jsx13("path", { d: "M20.97 5c0 2.1-1.6 3.8-3.5 4" }),
-              /* @__PURE__ */ jsx13("path", { d: "M22 13h-4" }),
-              /* @__PURE__ */ jsx13("path", { d: "M17.2 17c2.1.1 3.8 1.9 3.8 4" })
+              /* @__PURE__ */ jsx16("path", { d: "m8 2 1.88 1.88" }),
+              /* @__PURE__ */ jsx16("path", { d: "M14.12 3.88 16 2" }),
+              /* @__PURE__ */ jsx16("path", { d: "M9 7.13v-1a3.003 3.003 0 1 1 6 0v1" }),
+              /* @__PURE__ */ jsx16("path", { d: "M12 20c-3.3 0-6-2.7-6-6v-3a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v3c0 3.3-2.7 6-6 6" }),
+              /* @__PURE__ */ jsx16("path", { d: "M12 20v-9" }),
+              /* @__PURE__ */ jsx16("path", { d: "M6.53 9C4.6 8.8 3 7.1 3 5" }),
+              /* @__PURE__ */ jsx16("path", { d: "M6 13H2" }),
+              /* @__PURE__ */ jsx16("path", { d: "M3 21c0-2.1 1.7-3.9 3.8-4" }),
+              /* @__PURE__ */ jsx16("path", { d: "M20.97 5c0 2.1-1.6 3.8-3.5 4" }),
+              /* @__PURE__ */ jsx16("path", { d: "M22 13h-4" }),
+              /* @__PURE__ */ jsx16("path", { d: "M17.2 17c2.1.1 3.8 1.9 3.8 4" })
             ]
           }
         )
       }
     );
   }
-  return /* @__PURE__ */ jsxs11("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__ */ jsxs11("div", { className: "flex items-center justify-between mb-2", children: [
-      /* @__PURE__ */ jsxs11("span", { className: "text-[10px] font-bold uppercase tracking-widest text-slate-400 flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx13("span", { className: "w-2 h-2 rounded-full bg-emerald-500 animate-pulse" }),
+  return /* @__PURE__ */ jsxs12("div", { className: "fixed inset-x-0 bottom-0 w-full bg-[#0a080f] border-t border-slate-800 z-[9998] p-4 shadow-2xl flex flex-col animate-in slide-in-from-bottom duration-300", children: [
+    /* @__PURE__ */ jsxs12("div", { className: "flex items-center justify-between mb-2", children: [
+      /* @__PURE__ */ jsxs12("span", { className: "text-[10px] font-bold uppercase tracking-widest text-slate-400 flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx16("span", { className: "w-2 h-2 rounded-full bg-emerald-500 animate-pulse" }),
         "UP SDK Debug Console"
       ] }),
-      /* @__PURE__ */ jsxs11("div", { className: "flex gap-4", children: [
-        /* @__PURE__ */ jsx13(
-          "button",
+      /* @__PURE__ */ jsxs12("div", { className: "flex gap-4", children: [
+        /* @__PURE__ */ jsx16(
+          Button,
           {
-            className: "text-[10px] text-slate-500 font-bold uppercase hover:text-slate-300 transition-colors",
+            className: "text-[10px] text-slate-500 font-bold uppercase hover:text-slate-300 hover:bg-transparent transition-colors p-0 h-auto cursor-pointer",
             onClick: clearLogs,
             type: "button",
+            variant: "ghost",
             children: "Clear"
           }
         ),
-        /* @__PURE__ */ jsx13(
-          "button",
+        /* @__PURE__ */ jsx16(
+          Button,
           {
-            className: "text-[10px] text-pink-500 font-bold uppercase hover:underline transition-colors",
+            className: "text-[10px] text-pink-500 font-bold uppercase hover:text-pink-400 hover:bg-transparent transition-colors p-0 h-auto cursor-pointer",
             onClick: () => {
               setShowConsole(false);
               if (onClose) onClose();
             },
             type: "button",
+            variant: "ghost",
             children: "Close"
           }
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsx13(
+    /* @__PURE__ */ jsx16(
       "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__ */ jsx13("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__ */ jsxs11(
+        children: logs.length === 0 ? /* @__PURE__ */ jsx16("div", { className: "text-slate-600 italic text-center py-8", children: "No logs yet. Interacting with the SDK will show events here." }) : logs.map((log) => /* @__PURE__ */ jsxs12(
           "div",
           {
             className: "mb-3 pb-3 border-b border-slate-900/50 last:border-0 last:mb-0 last:pb-0",
             children: [
-              /* @__PURE__ */ jsxs11("div", { className: "flex gap-2 text-slate-500 mb-1 items-center", children: [
-                /* @__PURE__ */ jsx13("span", { className: "text-[8px]", children: log.time }),
-                /* @__PURE__ */ jsx13("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__ */ jsxs12("div", { className: "flex gap-2 text-slate-500 mb-1 items-center", children: [
+                /* @__PURE__ */ jsx16("span", { className: "text-[8px]", children: log.time }),
+                /* @__PURE__ */ jsx16("span", { className: "font-bold text-white uppercase text-[8px] bg-slate-800 px-1.5 py-0.5 rounded leading-none", children: log.label })
               ] }),
-              /* @__PURE__ */ jsx13("pre", { className: "whitespace-pre-wrap break-all opacity-90", children: log.content })
+              /* @__PURE__ */ jsx16("pre", { className: "whitespace-pre-wrap break-all opacity-90", children: log.content })
             ]
           },
           log.id
@@ -3284,7 +3855,7 @@ var DebugConsole = ({
 
 // src/components/SDKProvider.tsx
 import { createContext as createContext2, useContext as useContext5, useMemo as useMemo6 } from "react";
-import { Fragment as Fragment5, jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
 var SDKContext = createContext2({ isMocked: false });
 var useIsMocked = () => useContext5(SDKContext).isMocked;
 var SDKProvider = ({
@@ -3294,14 +3865,14 @@ var SDKProvider = ({
 }) => {
   const isMocked = typeof window !== "undefined" && !(window.__UP_REACT_NATIVE_APP__ === true || !!window.ReactNativeWebView);
   const value = useMemo6(() => ({ isMocked }), [isMocked]);
-  const content = /* @__PURE__ */ jsxs12(Fragment5, { children: [
+  const content = /* @__PURE__ */ jsxs13(Fragment5, { children: [
     children,
-    debug && /* @__PURE__ */ jsx14(DebugConsole, {})
+    debug && /* @__PURE__ */ jsx17(DebugConsole, {})
   ] });
   if (isMocked) {
-    return /* @__PURE__ */ jsx14(SDKContext.Provider, { value, children: /* @__PURE__ */ jsx14(BridgeMocker, { ...mockerProps, children: content }) });
+    return /* @__PURE__ */ jsx17(SDKContext.Provider, { value, children: /* @__PURE__ */ jsx17(BridgeMocker, { ...mockerProps, children: content }) });
   }
-  return /* @__PURE__ */ jsx14(SDKContext.Provider, { value, children: content });
+  return /* @__PURE__ */ jsx17(SDKContext.Provider, { value, children: content });
 };
 
 // src/index.ts