@cloudparse/up-miniapps-sdk 0.2.0 → 0.2.2

package/dist/index.cjs

@@ -62,6 +62,58 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 
+// src/lib/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/components/ui/button.tsx
+var import_react_slot = require("@radix-ui/react-slot");
+var import_class_variance_authority = require("class-variance-authority");
+var React = __toESM(require("react"), 1);
+var import_jsx_runtime = require("react/jsx-runtime");
+var buttonVariants = (0, import_class_variance_authority.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 ? import_react_slot.Slot : "button";
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      Comp,
+      {
+        className: cn(buttonVariants({ className, size, variant })),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
 // src/bridge.ts
 var Bridge = class {
   callbacks = /* @__PURE__ */ new Map();
@@ -223,9 +275,121 @@ var Bridge = class {
   }
 };
 
+// src/components/ui/sheet.tsx
+var SheetPrimitive = __toESM(require("@radix-ui/react-dialog"), 1);
+var import_class_variance_authority2 = require("class-variance-authority");
+var import_lucide_react = require("lucide-react");
+var React2 = __toESM(require("react"), 1);
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Sheet = SheetPrimitive.Root;
+var SheetPortal = SheetPrimitive.Portal;
+var SheetOverlay = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  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 = (0, import_class_variance_authority2.cva)(
+  "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__ */ (0, import_jsx_runtime2.jsxs)(
+    SheetPrimitive.Content,
+    {
+      className: cn(
+        sheetVariants({ side }),
+        portal ? "fixed" : "absolute",
+        className
+      ),
+      ref,
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ (0, import_jsx_runtime2.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__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.X, { className: "h-4 w-4" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "sr-only", children: "Close" })
+        ] })
+      ]
+    }
+  );
+  if (!portal) {
+    return Content2;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(SheetPortal, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SheetOverlay, {}),
+    Content2
+  ] });
+});
+SheetContent.displayName = SheetPrimitive.Content.displayName;
+var SheetHeader = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  "div",
+  {
+    className: cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    ),
+    ...props
+  }
+);
+SheetHeader.displayName = "SheetHeader";
+var SheetFooter = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  "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__ */ (0, import_jsx_runtime2.jsx)(
+  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__ */ (0, import_jsx_runtime2.jsx)(
+  SheetPrimitive.Description,
+  {
+    className: cn("text-sm text-muted-foreground", className),
+    ref,
+    ...props
+  }
+));
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
+
 // src/components/Map/components/MapDrawer.tsx
 var import_react = require("react");
-var import_jsx_runtime = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var resolveHeightToPixels = (height, containerHeight) => {
   if (typeof height === "number") {
     return height;
@@ -254,7 +418,9 @@ var MapDrawer = (0, import_react.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 = (0, import_react.useRef)(null);
     const containerRef = (0, import_react.useRef)(null);
@@ -275,84 +441,240 @@ var MapDrawer = (0, import_react.forwardRef)(
         }
       }
     };
-    const handleTouchStart = (e) => {
-      if (side !== "bottom") return;
-      setTouchStartY(e.targetTouches[0].clientY);
-      setCurrentTouchY(e.targetTouches[0].clientY);
+    const [showScrollTop, setShowScrollTop] = (0, import_react.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;
+    (0, import_react.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 = (0, import_react.useRef)(false);
+    const hasDeterminedDirection = (0, import_react.useRef)(false);
+    const isTouchOnContent = (0, import_react.useRef)(false);
+    const stateRef = (0, import_react.useRef)(state);
+    const touchStartYRef = (0, import_react.useRef)(touchStartY);
+    const currentTouchYRef = (0, import_react.useRef)(currentTouchY);
+    (0, import_react.useEffect)(() => {
+      stateRef.current = state;
+    }, [state]);
+    (0, import_react.useEffect)(() => {
+      touchStartYRef.current = touchStartY;
+    }, [touchStartY]);
+    (0, import_react.useEffect)(() => {
+      currentTouchYRef.current = currentTouchY;
+    }, [currentTouchY]);
+    (0, import_react.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__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: `
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("style", { children: `
         .no-scrollbar {
           -ms-overflow-style: none;
           scrollbar-width: none;
@@ -361,127 +683,213 @@ var MapDrawer = (0, import_react.forwardRef)(
           display: none;
         }
       ` }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         "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__ */ (0, import_jsx_runtime.jsxs)(
-          "div",
+      side === "left" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+        state === "closed" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          Button,
           {
-            className: `absolute top-4 left-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__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex-1 flex flex-col h-full overflow-hidden pl-4 py-4 pr-1", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex items-center justify-between pb-3 border-b border-white/10 mb-2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-sm font-bold tracking-wider text-zinc-400 uppercase", children: "Menu" }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  "div",
-                  {
-                    className: "flex-1 overflow-y-auto no-scrollbar pr-2",
-                    ref: scrollContainerRef,
-                    children: menuContent ? menuContent : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-col gap-1.5", children: menuItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime3.jsxs)(
+              "svg",
+              {
+                fill: "none",
+                height: "24",
+                stroke: "currentColor",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: "2",
+                viewBox: "0 0 24 24",
+                width: "24",
+                xmlns: "http://www.w3.org/2000/svg",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "4", x2: "20", y1: "12", y2: "12" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "4", x2: "20", y1: "6", y2: "6" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "4", x2: "20", y1: "18", y2: "18" })
+                ]
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          Sheet,
+          {
+            onOpenChange: (open) => onChangeState(open ? "full" : "closed"),
+            open: state !== "closed",
+            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+              SheetContent,
+              {
+                className: "w-80 bg-zinc-950/85 backdrop-blur-md border-r border-y border-white/10 rounded-r-2xl shadow-2xl p-4 text-white flex flex-col h-full overflow-hidden",
+                portal: false,
+                side: "left",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SheetHeader, { className: "pb-3 border-b border-white/10 mb-2 text-left", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SheetTitle, { className: "text-sm font-bold tracking-wider text-zinc-400 uppercase", children: "Menu" }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    "div",
+                    {
+                      className: "flex-1 overflow-y-auto no-scrollbar pr-2",
+                      onScroll: handleScroll,
+                      ref: scrollContainerRef,
+                      children: menuContent ? menuContent : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex flex-col gap-1.5", children: menuItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                        Button,
+                        {
+                          className: `flex items-center gap-3 w-full py-3 px-3.5 rounded-xl text-left cursor-pointer transition-all duration-150 justify-start hover:bg-white/5 hover:text-white active:bg-white/10 text-white ${item.disabled ? "opacity-45 cursor-not-allowed pointer-events-none" : ""}`,
+                          disabled: item.disabled,
+                          onClick: () => {
+                            if (!item.disabled) {
+                              item.onPress();
+                              onChangeState("closed");
+                            }
+                          },
+                          variant: "ghost",
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "relative flex items-center justify-center w-8 h-8 rounded-lg bg-white/5 text-zinc-300", children: [
+                              item.icon,
+                              item.badge !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "absolute -top-1 -right-1 bg-cyan-500 text-black text-[9px] font-extrabold min-w-[15px] h-3.5 rounded-full flex items-center justify-center px-1 border border-zinc-950 shadow", children: item.badge })
+                            ] }),
+                            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-sm font-medium tracking-wide flex-1", children: item.label })
+                          ]
                         },
-                        children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative flex items-center justify-center w-8 h-8 rounded-lg bg-white/5 text-zinc-300", children: [
-                            item.icon,
-                            item.badge !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "absolute -top-1 -right-1 bg-cyan-500 text-black text-[9px] font-extrabold min-w-[15px] h-3.5 rounded-full flex items-center justify-center px-1 border border-zinc-950 shadow", children: item.badge })
-                          ] }),
-                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-sm font-medium tracking-wide flex-1", children: item.label })
-                        ]
+                        item.id
+                      )) })
+                    }
+                  ),
+                  showScrollToTopButton && showScrollTop && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    Button,
+                    {
+                      className: "absolute bottom-6 right-6 z-50 flex items-center justify-center w-10 h-10 rounded-full bg-cyan-500 hover:bg-cyan-400 active:scale-95 text-black hover:text-black shadow-lg shadow-cyan-500/25 transition-all duration-200 cursor-pointer p-0!",
+                      onClick: () => {
+                        scrollContainerRef.current?.scrollTo({
+                          behavior: "smooth",
+                          top: 0
+                        });
                       },
-                      item.id
-                    )) })
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("div", { className: "w-1.5 h-12 bg-white/20 rounded-full transition-colors group-hover:bg-white/40" })
-                }
-              )
-            ]
+                      variant: "ghost",
+                      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                        "svg",
+                        {
+                          fill: "none",
+                          height: "20",
+                          stroke: "currentColor",
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round",
+                          strokeWidth: "2.5",
+                          viewBox: "0 0 24 24",
+                          width: "20",
+                          xmlns: "http://www.w3.org/2000/svg",
+                          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("polyline", { points: "18 15 12 9 6 15" })
+                        }
+                      )
+                    }
+                  )
+                ]
+              }
+            )
           }
         )
-      ) : (
+      ] }) : (
         /* Bottom Sheet Panel - Hardware accelerated translateY transitions */
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
           "div",
           {
             className: `absolute w-full bg-zinc-950/85 backdrop-blur-md border border-white/10 rounded-t-2xl shadow-2xl flex flex-col z-40 select-none ${isDragging ? "transition-none" : "transition-transform duration-300 ease-out"}`,
-            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__ */ (0, import_jsx_runtime.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                 "div",
                 {
                   className: "w-full h-8 flex flex-col items-center justify-center cursor-pointer hover:bg-white/5 rounded-t-2xl transition-colors border-b border-white/5",
                   onClick: handleHandleClick,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "w-12 h-1 bg-white/25 rounded-full" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "w-12 h-1 bg-white/25 rounded-full" })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
                 "div",
                 {
-                  className: "flex-1 flex flex-col overflow-hidden px-4 pb-4 pt-2 transition-[margin-top] duration-250 ease-in-out",
+                  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__ */ (0, import_jsx_runtime.jsx)(
-                    "div",
-                    {
-                      className: "flex-1 overflow-y-auto no-scrollbar",
-                      ref: scrollContainerRef,
-                      children: menuContent ? menuContent : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-col gap-1", children: menuItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime3.jsx)(
+                      "div",
+                      {
+                        className: "flex-1 overflow-y-auto no-scrollbar",
+                        onScroll: handleScroll,
+                        ref: scrollContainerRef,
+                        style: {
+                          paddingBottom: state === "peek" ? `${shiftPx}px` : "0px"
+                        },
+                        children: menuContent ? menuContent : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex flex-col gap-1", children: menuItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                          Button,
+                          {
+                            className: `flex items-center gap-3 w-full py-3 px-3.5 rounded-xl text-left cursor-pointer transition-all duration-150 justify-start hover:bg-white/5 hover:text-white active:bg-white/10 text-white ${item.disabled ? "opacity-45 cursor-not-allowed pointer-events-none" : ""}`,
+                            disabled: item.disabled,
+                            onClick: () => {
+                              if (!item.disabled) {
+                                item.onPress();
+                                onChangeState("closed");
+                              }
+                            },
+                            variant: "ghost",
+                            children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "relative flex items-center justify-center w-8 h-8 rounded-lg bg-white/5 text-zinc-300", children: [
+                                item.icon,
+                                item.badge !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "absolute -top-1 -right-1 bg-cyan-500 text-black text-[9px] font-extrabold min-w-[15px] h-3.5 rounded-full flex items-center justify-center px-1 border border-zinc-950 shadow", children: item.badge })
+                              ] }),
+                              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-sm font-medium tracking-wide", children: item.label })
+                            ]
                           },
-                          children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative flex items-center justify-center w-8 h-8 rounded-lg bg-white/5 text-zinc-300", children: [
-                              item.icon,
-                              item.badge !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "absolute -top-1 -right-1 bg-cyan-500 text-black text-[9px] font-extrabold min-w-[15px] h-3.5 rounded-full flex items-center justify-center px-1 border border-zinc-950 shadow", children: item.badge })
-                            ] }),
-                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-sm font-medium tracking-wide", children: item.label })
-                          ]
+                          item.id
+                        )) })
+                      }
+                    ),
+                    showScrollToTopButton && showScrollTop && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      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__ */ (0, import_jsx_runtime3.jsx)(
+                          "svg",
+                          {
+                            fill: "none",
+                            height: "20",
+                            stroke: "currentColor",
+                            strokeLinecap: "round",
+                            strokeLinejoin: "round",
+                            strokeWidth: "2.5",
+                            viewBox: "0 0 24 24",
+                            width: "20",
+                            xmlns: "http://www.w3.org/2000/svg",
+                            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("polyline", { points: "18 15 12 9 6 15" })
+                          }
+                        )
+                      }
+                    )
+                  ]
                 }
               )
             ]
@@ -492,8 +900,65 @@ var MapDrawer = (0, import_react.forwardRef)(
   }
 );
 
+// src/components/ui/card.tsx
+var React3 = __toESM(require("react"), 1);
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Card = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  "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__ */ (0, import_jsx_runtime4.jsx)(
+  "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__ */ (0, import_jsx_runtime4.jsx)(
+  "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__ */ (0, import_jsx_runtime4.jsx)(
+  "div",
+  {
+    className: cn("text-sm text-muted-foreground", className),
+    ref,
+    ...props
+  }
+));
+CardDescription.displayName = "CardDescription";
+var CardContent = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: cn("p-6 pt-0", className), ref, ...props }));
+CardContent.displayName = "CardContent";
+var CardFooter = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  "div",
+  {
+    className: cn("flex items-center p-6 pt-0", className),
+    ref,
+    ...props
+  }
+));
+CardFooter.displayName = "CardFooter";
+
 // src/components/Map/components/MapEtaPanel.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var MapEtaPanel = ({
   etaData,
   layoutMode,
@@ -502,15 +967,15 @@ var MapEtaPanel = ({
   isDragging = false
 }) => {
   if (layoutMode === "closed-banner") {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("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__ */ (0, import_jsx_runtime2.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("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__ */ (0, import_jsx_runtime5.jsxs)(
         "div",
         {
           className: "flex items-center gap-2 cursor-pointer flex-1",
           onClick: onHeaderClick,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "w-2 h-2 rounded-full bg-emerald-500 animate-pulse" }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "text-xs font-bold text-emerald-400", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "w-2 h-2 rounded-full bg-emerald-500 animate-pulse" }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "text-xs font-bold text-emerald-400", children: [
               etaData.etaMins,
               " min (",
               etaData.distanceRemainingKm.toFixed(1),
@@ -519,36 +984,37 @@ var MapEtaPanel = ({
           ]
         }
       ),
-      etaData.onAbort && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-        "button",
+      etaData.onAbort && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        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__ */ (0, import_jsx_runtime2.jsxs)(
+          variant: "ghost",
+          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
             "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__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M18 6 6 18" }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m6 6 12 12" })
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M18 6 6 18" }),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "m6 6 12 12" })
               ]
             }
           )
         }
       ),
-      etaData.progress !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "absolute bottom-0 left-0 right-0 h-[2px] bg-white/5", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      etaData.progress !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "absolute bottom-0 left-0 right-0 h-[2px] bg-white/5", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         "div",
         {
           className: "h-full bg-cyan-400",
@@ -558,166 +1024,174 @@ var MapEtaPanel = ({
     ] });
   }
   if (layoutMode === "open-card") {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mx-4 mt-2 p-4 bg-white/5 border border-white/10 rounded-xl flex flex-col", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center justify-between mb-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "w-2 h-2 rounded-full bg-emerald-500 animate-pulse" }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-[10px] font-bold text-emerald-400 uppercase tracking-wider", children: etaData.label || "Journey Active" })
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(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__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center justify-between mb-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "w-2 h-2 rounded-full bg-emerald-500 animate-pulse" }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-[10px] font-bold text-emerald-400 uppercase tracking-wider", children: etaData.label || "Journey Active" })
         ] }),
-        etaData.onAbort && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-          "button",
+        etaData.onAbort && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          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__ */ (0, import_jsx_runtime2.jsxs)(
+            variant: "ghost",
+            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
               "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__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M18 6 6 18" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m6 6 12 12" })
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M18 6 6 18" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "m6 6 12 12" })
                 ]
               }
             )
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "grid grid-cols-2 divide-x divide-white/10 py-1.5 mb-2.5", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "text-center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "text-xl font-black text-white leading-none", children: [
-            etaData.etaMins,
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-xs text-zinc-400 font-normal", children: " min" })
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(CardContent, { className: "p-0 flex flex-col", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "grid grid-cols-2 divide-x divide-white/10 py-1.5 mb-2.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "text-center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "text-xl font-black text-white leading-none", children: [
+              etaData.etaMins,
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-xs text-zinc-400 font-normal", children: " min" })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "text-[8px] text-zinc-500 font-bold uppercase tracking-wider mt-1", children: "Time Remaining" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "text-[8px] text-zinc-500 font-bold uppercase tracking-wider mt-1", children: "Time Remaining" })
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "text-center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "text-xl font-black text-white leading-none", children: [
+              etaData.distanceRemainingKm.toFixed(1),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-xs text-zinc-400 font-normal", children: " km" })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "text-[8px] text-zinc-500 font-bold uppercase tracking-wider mt-1", children: "Distance Remaining" })
+          ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "text-center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "text-xl font-black text-white leading-none", children: [
-            etaData.distanceRemainingKm.toFixed(1),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-xs text-zinc-400 font-normal", children: " km" })
+        etaData.progress !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mb-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex justify-between text-[9px] font-bold text-zinc-400 mb-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "Progress" }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { children: [
+              Math.round(etaData.progress),
+              "%"
+            ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "text-[8px] text-zinc-500 font-bold uppercase tracking-wider mt-1", children: "Distance Remaining" })
-        ] })
-      ] }),
-      etaData.progress !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mb-3", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex justify-between text-[9px] font-bold text-zinc-450 mb-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Progress" }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { children: [
-            Math.round(etaData.progress),
-            "%"
-          ] })
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "h-1 bg-white/10 rounded-full overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "div",
+            {
+              className: "h-full bg-cyan-400 rounded-full",
+              style: { width: `${etaData.progress}%` }
+            }
+          ) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "h-1 bg-white/10 rounded-full overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-          "div",
+        etaData.mode === "preview" && etaData.onStart && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          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__ */ (0, import_jsx_runtime2.jsx)(
-        "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__ */ (0, import_jsx_runtime2.jsxs)(
-    "div",
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    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__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center justify-between mb-2 sm:mb-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "w-1.5 h-1.5 sm:w-2 sm:h-2 rounded-full bg-emerald-500 animate-pulse" }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-[9px] sm:text-[10px] font-bold text-emerald-400 uppercase tracking-wider", children: etaData.label || "Guidance Active" })
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center justify-between mb-2 sm:mb-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "w-1.5 h-1.5 sm:w-2 sm:h-2 rounded-full bg-emerald-500 animate-pulse" }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-[9px] sm:text-[10px] font-bold text-emerald-400 uppercase tracking-wider", children: etaData.label || "Guidance Active" })
           ] }),
-          etaData.onAbort && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-            "button",
+          etaData.onAbort && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            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__ */ (0, import_jsx_runtime2.jsxs)(
+              variant: "ghost",
+              children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
                 "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__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M18 6 6 18" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m6 6 12 12" })
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M18 6 6 18" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "m6 6 12 12" })
                   ]
                 }
               )
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "grid grid-cols-2 divide-x divide-white/10 py-0.5 sm:py-1 mb-2 sm:mb-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "text-center", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "text-base sm:text-lg font-black text-white leading-none", children: [
-            etaData.etaMins,
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "text-[10px] sm:text-xs text-zinc-400 font-normal", children: [
-              " ",
-              "min"
-            ] })
-          ] }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "text-center", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "text-base sm:text-lg font-black text-white leading-none", children: [
-            etaData.distanceRemainingKm.toFixed(1),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "text-[10px] sm:text-xs text-zinc-400 font-normal", children: [
-              " ",
-              "km"
-            ] })
-          ] }) })
-        ] }),
-        etaData.progress !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex justify-between text-[8px] sm:text-[9px] font-bold text-zinc-400 mb-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Progress" }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { children: [
-              Math.round(etaData.progress),
-              "%"
-            ] })
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(CardContent, { className: "p-0 flex flex-col", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "grid grid-cols-2 divide-x divide-white/10 py-0.5 sm:py-1 mb-2 sm:mb-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "text-center", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "text-base sm:text-lg font-black text-white leading-none", children: [
+              etaData.etaMins,
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "text-[10px] sm:text-xs text-zinc-400 font-normal", children: [
+                " ",
+                "min"
+              ] })
+            ] }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "text-center", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "text-base sm:text-lg font-black text-white leading-none", children: [
+              etaData.distanceRemainingKm.toFixed(1),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "text-[10px] sm:text-xs text-zinc-400 font-normal", children: [
+                " ",
+                "km"
+              ] })
+            ] }) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "h-1 sm:h-1.5 bg-white/10 rounded-full overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-            "div",
+          etaData.progress !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex justify-between text-[8px] sm:text-[9px] font-bold text-zinc-400 mb-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "Progress" }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { children: [
+                Math.round(etaData.progress),
+                "%"
+              ] })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "h-1 sm:h-1.5 bg-white/10 rounded-full overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "div",
+              {
+                className: "h-full bg-cyan-400 rounded-full",
+                style: { width: `${etaData.progress}%` }
+              }
+            ) })
+          ] }),
+          etaData.mode === "preview" && etaData.onStart && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            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__ */ (0, import_jsx_runtime2.jsx)(
-          "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
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var MapRightControls = ({
   customControls = [],
   etaBarHeight,
@@ -735,7 +1209,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"
@@ -747,9 +1221,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__ */ (0, import_jsx_runtime3.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "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"}`,
@@ -757,27 +1231,29 @@ var MapRightControls = ({
         bottom: controlsBottom
       },
       children: [
-        aboveControls.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex flex-col gap-2 pointer-events-auto", children: aboveControls.map((control) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "relative group flex items-center", children: [
-          control.tooltip && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "absolute right-14 pointer-events-none opacity-0 scale-95 origin-right group-hover:opacity-100 group-hover:scale-100 transition-all duration-150 bg-zinc-900/95 border border-white/10 text-white text-xs px-2.5 py-1.5 rounded-lg shadow-xl whitespace-nowrap", children: control.tooltip }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-            "button",
+        aboveControls.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex flex-col gap-2 pointer-events-auto", children: aboveControls.map((control) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "relative group flex items-center", children: [
+          control.tooltip && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "absolute right-14 pointer-events-none opacity-0 scale-95 origin-right group-hover:opacity-100 group-hover:scale-100 transition-all duration-150 bg-zinc-900/95 border border-white/10 text-white text-xs px-2.5 py-1.5 rounded-lg shadow-xl whitespace-nowrap", children: control.tooltip }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            Button,
             {
-              className: `w-12 h-12 rounded-full bg-zinc-950/80 backdrop-blur-md border border-white/10 shadow-lg flex items-center justify-center text-white active:scale-95 transition-all cursor-pointer ${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__ */ (0, import_jsx_runtime3.jsx)("div", { className: "pointer-events-auto", children: customCompassButton }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "pointer-events-auto", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          "button",
+        isCompassVisible && (customCompassButton ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "pointer-events-auto", children: customCompassButton }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "pointer-events-auto", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          Button,
           {
-            className: `w-12 h-12 rounded-full bg-zinc-950/80 backdrop-blur-md border border-white/10 shadow-lg flex items-center justify-center text-white active:scale-95 transition-all 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__ */ (0, import_jsx_runtime3.jsxs)(
+            variant: "ghost",
+            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
               "svg",
               {
                 className: "w-7 h-7 transition-transform duration-75 ease-out",
@@ -787,7 +1263,7 @@ var MapRightControls = ({
                 },
                 viewBox: "0 0 24 24",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                     "circle",
                     {
                       cx: "12",
@@ -798,23 +1274,24 @@ var MapRightControls = ({
                       strokeWidth: "1"
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 4.5L15 12H9L12 4.5Z", fill: "#ef4444" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 19.5L9 12H15L12 19.5Z", fill: "#f4f4f5" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "12", cy: "12", fill: "#18181b", r: "1.5" })
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M12 4.5L15 12H9L12 4.5Z", fill: "#ef4444" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M12 19.5L9 12H15L12 19.5Z", fill: "#f4f4f5" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { cx: "12", cy: "12", fill: "#18181b", r: "1.5" })
                 ]
               }
             )
           }
         ) })),
-        customRecenterButton ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "pointer-events-auto", children: customRecenterButton }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "pointer-events-auto", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          "button",
+        customRecenterButton ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "pointer-events-auto", children: customRecenterButton }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "pointer-events-auto", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          Button,
           {
-            className: `w-12 h-12 rounded-full bg-zinc-950/80 backdrop-blur-md border border-white/10 shadow-lg flex items-center justify-center text-white active:scale-95 transition-all cursor-pointer ${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__ */ (0, import_jsx_runtime3.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
                 "svg",
                 {
                   className: "w-6 h-6 text-cyan-400",
@@ -823,18 +1300,18 @@ var MapRightControls = ({
                   strokeWidth: "2.2",
                   viewBox: "0 0 24 24",
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "12", cy: "12", r: "8" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "12", cy: "12", fill: "currentColor", r: "3" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "12", x2: "12", y1: "2", y2: "4" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "12", x2: "12", y1: "20", y2: "22" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "2", x2: "4", y1: "12", y2: "12" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "20", x2: "22", y1: "12", y2: "12" })
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { cx: "12", cy: "12", r: "8" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { cx: "12", cy: "12", fill: "currentColor", r: "3" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "12", x2: "12", y1: "2", y2: "4" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "12", x2: "12", y1: "20", y2: "22" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "2", x2: "4", y1: "12", y2: "12" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "20", x2: "22", y1: "12", y2: "12" })
                   ]
                 }
               )
             ) : (
               /* Outlined drifted state */
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
                 "svg",
                 {
                   className: "w-6 h-6 text-zinc-300",
@@ -843,24 +1320,25 @@ var MapRightControls = ({
                   strokeWidth: "2",
                   viewBox: "0 0 24 24",
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "12", cy: "12", r: "8" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "12", x2: "12", y1: "2", y2: "4" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "12", x2: "12", y1: "20", y2: "22" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "2", x2: "4", y1: "12", y2: "12" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "20", x2: "22", y1: "12", y2: "12" })
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { cx: "12", cy: "12", r: "8" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "12", x2: "12", y1: "2", y2: "4" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "12", x2: "12", y1: "20", y2: "22" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "2", x2: "4", y1: "12", y2: "12" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "20", x2: "22", y1: "12", y2: "12" })
                   ]
                 }
               )
             )
           }
         ) }),
-        belowControls.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex flex-col gap-2 pointer-events-auto", children: belowControls.map((control) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "relative group flex items-center", children: [
-          control.tooltip && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "absolute right-14 pointer-events-none opacity-0 scale-95 origin-right group-hover:opacity-100 group-hover:scale-100 transition-all duration-150 bg-zinc-900/95 border border-white/10 text-white text-xs px-2.5 py-1.5 rounded-lg shadow-xl whitespace-nowrap", children: control.tooltip }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-            "button",
+        belowControls.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex flex-col gap-2 pointer-events-auto", children: belowControls.map((control) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "relative group flex items-center", children: [
+          control.tooltip && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "absolute right-14 pointer-events-none opacity-0 scale-95 origin-right group-hover:opacity-100 group-hover:scale-100 transition-all duration-150 bg-zinc-900/95 border border-white/10 text-white text-xs px-2.5 py-1.5 rounded-lg shadow-xl whitespace-nowrap", children: control.tooltip }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            Button,
             {
-              className: `w-12 h-12 rounded-full bg-zinc-950/80 backdrop-blur-md border border-white/10 shadow-lg flex items-center justify-center text-white active:scale-95 transition-all cursor-pointer ${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
             }
           )
@@ -872,7 +1350,7 @@ var MapRightControls = ({
 
 // src/components/Map/MapContext.tsx
 var import_react2 = require("react");
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var MapControlsContext = (0, import_react2.createContext)(
   null
 );
@@ -903,10 +1381,10 @@ var SDKMapProvider = ({
     });
   }, []);
   const [insets, setInsetsState] = (0, import_react2.useState)({
-    top: 0,
     bottom: 0,
     left: 0,
-    right: 0
+    right: 0,
+    top: 0
   });
   const setInsets = (0, import_react2.useCallback)((newInsets) => {
     setInsetsState((prev) => ({ ...prev, ...newInsets }));
@@ -951,6 +1429,7 @@ var SDKMapProvider = ({
       drawerState,
       etaData,
       hasControls,
+      insets,
       isFollowing,
       pitch,
       resetBearing,
@@ -958,10 +1437,9 @@ var SDKMapProvider = ({
       setDrawerState,
       setEtaData,
       setHasControls,
+      setInsets,
       setIsFollowing,
-      setPitch,
-      insets,
-      setInsets
+      setPitch
     }),
     [
       _registerCenterCallback,
@@ -983,7 +1461,7 @@ var SDKMapProvider = ({
       setInsets
     ]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MapControlsContext.Provider, { value: contextValue, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MapControlsContext.Provider, { value: contextValue, children });
 };
 var useMapControls = () => {
   const context = (0, import_react2.useContext)(MapControlsContext);
@@ -995,7 +1473,7 @@ var useMapControls = () => {
 
 // src/components/Map/components/MapControls.tsx
 var import_react3 = require("react");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var resolveHeightToPixels2 = (height, containerHeight) => {
   if (typeof height === "number") {
     return height;
@@ -1025,6 +1503,8 @@ var MapControls = ({
   menuContent,
   children,
   enableTouchDrag = false,
+  showScrollToTopButton = true,
+  scrollToTopThreshold = 300,
   isInternal = false
 }) => {
   const mapContext = (0, import_react3.useContext)(MapControlsContext);
@@ -1125,14 +1605,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;
@@ -1142,7 +1631,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") {
@@ -1155,14 +1643,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__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ref: containerRef, style: { display: "none" } }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ref: containerRef, style: { display: "none" } }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       MapDrawer,
       {
         clampedDragOffset,
@@ -1179,14 +1667,16 @@ var MapControls = ({
         onChangeState: setDrawerState,
         ref: mergedRef,
         safeAreaInsets: mapContext?.insets,
+        scrollToTopThreshold,
         setCurrentTouchY,
         setTouchStartY,
+        showScrollToTopButton,
         side,
         state: drawerState,
         touchStartY
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       MapRightControls,
       {
         clampedDragOffset,
@@ -1208,7 +1698,7 @@ var MapControls = ({
         side
       }
     ),
-    resolvedEtaData && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    resolvedEtaData && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       MapEtaPanel,
       {
         etaData: resolvedEtaData,
@@ -1227,9 +1717,9 @@ var MapControls = ({
 
 // src/components/Map/components/MapMenu.tsx
 var import_react4 = require("react");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var MapMenu = ({ children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex flex-col gap-1.5", children });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex flex-col gap-1.5", children });
 };
 var MapMenuItem = ({
   id,
@@ -1248,7 +1738,7 @@ var MapMenuItem = ({
       context.setDrawerState("closed");
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "button",
     {
       className: `flex items-center gap-3 w-full py-3 px-3.5 rounded-xl text-left cursor-pointer transition-all duration-150 ${disabled ? "opacity-45 cursor-not-allowed pointer-events-none" : "hover:bg-white/5 active:bg-white/10 text-white"}`,
@@ -1256,12 +1746,12 @@ var MapMenuItem = ({
       onClick: handleClick,
       type: "button",
       children: [
-        icon && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "relative flex items-center justify-center w-8 h-8 rounded-lg bg-white/5 text-zinc-300", children: [
+        icon && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "relative flex items-center justify-center w-8 h-8 rounded-lg bg-white/5 text-zinc-300", children: [
           icon,
-          badge !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "absolute -top-1 -right-1 bg-cyan-500 text-black text-[9px] font-extrabold min-w-[15px] h-3.5 rounded-full flex items-center justify-center px-1 border border-zinc-950 shadow", children: badge })
+          badge !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "absolute -top-1 -right-1 bg-cyan-500 text-black text-[9px] font-extrabold min-w-[15px] h-3.5 rounded-full flex items-center justify-center px-1 border border-zinc-950 shadow", children: badge })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex-1 flex flex-col justify-center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-sm font-medium tracking-wide flex-1", children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex-1 flex flex-col justify-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-sm font-medium tracking-wide flex-1", children: label }),
           children
         ] })
       ]
@@ -1275,7 +1765,7 @@ var MapMenuTitle = ({
   showDivider = true,
   className = ""
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     "div",
     {
       className: `flex items-center justify-between pb-3 first:mt-0 px-3.5 ${className} ${showDivider ? "border-b border-white/10 mb-2 mt-4" : ""}`,
@@ -1287,14 +1777,14 @@ MapMenuTitle.displayName = "MapMenuTitle";
 var MapMenuDivider = ({
   className = ""
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: `h-[1px] bg-white/10 my-3 mx-3.5 ${className}` });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `h-[1px] bg-white/10 my-3 mx-3.5 ${className}` });
 };
 MapMenuDivider.displayName = "MapMenuDivider";
 var MapMenuFooter = ({
   children,
   className = ""
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     "div",
     {
       className: `mt-auto pt-4 border-t border-white/10 px-3.5 text-xs text-zinc-500 font-medium ${className}`,
@@ -1452,7 +1942,8 @@ var useLiveRouting = ({
   const [error, setError] = (0, import_react6.useState)(null);
   const [mode, setMode] = (0, import_react6.useState)(initialMode);
   const userLocationState = useUserLocation();
-  const userLocation = manualOrigin || userLocationState.coords;
+  const calculationOrigin = manualOrigin || userLocationState.coords;
+  const trackingLocation = userLocationState.coords || manualOrigin;
   const lastCalcOrigin = (0, import_react6.useRef)(null);
   const lastCalcDest = (0, import_react6.useRef)(null);
   const isRequestInProgress = (0, import_react6.useRef)(false);
@@ -1470,9 +1961,32 @@ var useLiveRouting = ({
     []
   );
   const currentDistanceMeters = (0, import_react6.useMemo)(() => {
-    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 = (0, import_react6.useCallback)(
     async (origin, dest, isNewDest) => {
       if (isRequestInProgress.current) return;
@@ -1487,7 +2001,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;
@@ -1498,10 +2020,10 @@ var useLiveRouting = ({
         isRequestInProgress.current = false;
       }
     },
-    [profile]
+    [profile, getDistance]
   );
   (0, import_react6.useEffect)(() => {
-    if (!enabled || !destination || !userLocation) {
+    if (!enabled || !destination || !calculationOrigin) {
       if (!enabled || !destination) {
         setRoute(null);
         setTotalDistance(null);
@@ -1512,17 +2034,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,
@@ -1534,7 +2058,7 @@ var useLiveRouting = ({
     error,
     isCalculating,
     mode,
-    recalculate: () => userLocation && destination && calculate(userLocation, destination, false),
+    recalculate: () => calculationOrigin && destination && calculate(calculationOrigin, destination, false),
     route,
     start: () => setMode("navigation"),
     totalDistance
@@ -1598,7 +2122,7 @@ var useTrimmedRoute = (route, userLocation) => {
 
 // src/components/Map/layers/RouteLayer.tsx
 var import_react_maplibre = require("@vis.gl/react-maplibre");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var RouteLayer = ({
   geometry,
   color = "#3b82f6",
@@ -1611,8 +2135,8 @@ var RouteLayer = ({
     properties: {},
     type: "Feature"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_maplibre.Source, { data, id: "sdk-route-source", type: "geojson", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_maplibre.Source, { data, id: "sdk-route-source", type: "geojson", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       import_react_maplibre.Layer,
       {
         id: "sdk-route-layer-casing",
@@ -1625,7 +2149,7 @@ var RouteLayer = ({
         type: "line"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       import_react_maplibre.Layer,
       {
         id: "sdk-route-layer",
@@ -1652,7 +2176,7 @@ var import_maplibre_gl = require("maplibre-gl/dist/maplibre-gl.css");
 // src/components/Map/layers/POILayers.tsx
 var import_react_maplibre2 = require("@vis.gl/react-maplibre");
 var import_react8 = require("react");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function createEmojiIcon(emoji, size = 64) {
   const canvas = document.createElement("canvas");
   canvas.width = size;
@@ -1729,7 +2253,7 @@ var POILayers = ({ pois }) => {
     }),
     [glPois]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_maplibre2.Source, { data: geojson, id: "sdk-pois", type: "geojson", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_maplibre2.Source, { data: geojson, id: "sdk-pois", type: "geojson", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     import_react_maplibre2.Layer,
     {
       id: "sdk-poi-layer",
@@ -1766,11 +2290,11 @@ var POILayers = ({ pois }) => {
 
 // src/components/Map/layers/POIMarkers.tsx
 var import_react_maplibre3 = require("@vis.gl/react-maplibre");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var POIMarkers = ({ pois, onClick }) => {
   const markerPois = pois.filter((p) => p.displayMode === "marker");
   if (markerPois.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: markerPois.map((poi) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children: markerPois.map((poi) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     import_react_maplibre3.Marker,
     {
       anchor: "bottom",
@@ -1780,7 +2304,7 @@ var POIMarkers = ({ pois, onClick }) => {
         e.originalEvent.stopPropagation();
         if (onClick) onClick(poi);
       },
-      children: poi.markerComponent ? poi.markerComponent : /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+      children: poi.markerComponent ? poi.markerComponent : /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
         "div",
         {
           style: {
@@ -1789,7 +2313,7 @@ var POIMarkers = ({ pois, onClick }) => {
             transform: "transition-transform duration-200 hover:scale-110"
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
               "div",
               {
                 style: {
@@ -1802,7 +2326,7 @@ var POIMarkers = ({ pois, onClick }) => {
                   justifyContent: "center",
                   width: "32px"
                 },
-                children: poi.emoji ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { fontSize: "16px" }, children: poi.emoji }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                children: poi.emoji ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: { fontSize: "16px" }, children: poi.emoji }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                   "div",
                   {
                     style: {
@@ -1815,7 +2339,7 @@ var POIMarkers = ({ pois, onClick }) => {
                 )
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
               "div",
               {
                 style: {
@@ -1838,19 +2362,19 @@ var POIMarkers = ({ pois, onClick }) => {
 
 // src/components/Map/layers/UserLocationLayer.tsx
 var import_react_maplibre4 = require("@vis.gl/react-maplibre");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var UserLocationLayer = ({
   forcedLocation,
   heading
 }) => {
   if (!forcedLocation) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     import_react_maplibre4.Marker,
     {
       anchor: "center",
       latitude: forcedLocation[1],
       longitude: forcedLocation[0],
-      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
         "div",
         {
           style: {
@@ -1860,7 +2384,7 @@ var UserLocationLayer = ({
             position: "relative"
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
               "div",
               {
                 style: {
@@ -1873,7 +2397,7 @@ var UserLocationLayer = ({
                 }
               }
             ),
-            heading !== void 0 && heading !== null && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            heading !== void 0 && heading !== null && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
               "div",
               {
                 style: {
@@ -1883,13 +2407,13 @@ var UserLocationLayer = ({
                   width: "60px",
                   zIndex: 0
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
                   "svg",
                   {
                     style: { height: "100%", width: "100%" },
                     viewBox: "0 0 100 100",
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
                         "radialGradient",
                         {
                           cx: "50%",
@@ -1899,7 +2423,7 @@ var UserLocationLayer = ({
                           id: "grad1",
                           r: "50%",
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                               "stop",
                               {
                                 offset: "0%",
@@ -1909,7 +2433,7 @@ var UserLocationLayer = ({
                                 }
                               }
                             ),
-                            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                               "stop",
                               {
                                 offset: "100%",
@@ -1922,7 +2446,7 @@ var UserLocationLayer = ({
                           ]
                         }
                       ) }),
-                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                         "path",
                         {
                           d: "M 50 50 L 35 0 A 50 50 0 0 1 65 0 Z",
@@ -1934,7 +2458,7 @@ var UserLocationLayer = ({
                 )
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
               "div",
               {
                 style: {
@@ -1948,7 +2472,7 @@ var UserLocationLayer = ({
                   width: "20px",
                   zIndex: 1
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                   "div",
                   {
                     style: {
@@ -1962,7 +2486,7 @@ var UserLocationLayer = ({
                 )
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("style", { children: `@keyframes pulse { 0% { transform: scale(0.95); opacity: 0.7; } 70% { transform: scale(1.5); opacity: 0; } 100% { transform: scale(0.95); opacity: 0; } }` })
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("style", { children: `@keyframes pulse { 0% { transform: scale(0.95); opacity: 0.7; } 70% { transform: scale(1.5); opacity: 0; } 100% { transform: scale(0.95); opacity: 0; } }` })
           ]
         }
       )
@@ -1971,7 +2495,7 @@ var UserLocationLayer = ({
 };
 
 // src/components/Map/Map.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var MapInternal = ({
   initialViewState = {
     latitude: 45.90583599233422,
@@ -2012,14 +2536,18 @@ var MapInternal = ({
   const mapRef = (0, import_react9.useRef)(null);
   const userLocationState = useUserLocation();
   const [progNav, setProgNav] = (0, import_react9.useState)(null);
+  const [isAborted, setIsAborted] = (0, import_react9.useState)(false);
   (0, import_react9.useEffect)(() => {
     const unsubCreate = sdk.on("SDK_NAVIGATION_CREATE", (payload) => {
+      setIsAborted(false);
       setProgNav(payload);
     });
     const unsubStart = sdk.on("SDK_NAVIGATION_START", () => {
+      setIsAborted(false);
       setProgNav((prev) => prev ? { ...prev, mode: "navigation" } : null);
     });
     const unsubAbort = sdk.on("SDK_NAVIGATION_ABORT", () => {
+      setIsAborted(true);
       setProgNav(null);
     });
     return () => {
@@ -2042,9 +2570,19 @@ var MapInternal = ({
       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 = (0, import_react9.useRef)(null);
+  const currentDest = effectiveNavOptions?.destination;
+  (0, import_react9.useEffect)(() => {
+    if (currentDest) {
+      if (!prevDest.current || prevDest.current[0] !== currentDest[0] || prevDest.current[1] !== currentDest[1]) {
+        setIsAborted(false);
+      }
+    }
+    prevDest.current = currentDest;
+  }, [currentDest]);
+  const navigationData = !isAborted ? effectiveNavOptions ? internalNav : externalNavigationData : void 0;
+  const route = !isAborted ? effectiveNavOptions ? internalNav.route?.geometry : externalRoute : void 0;
+  const showNavigationUI = !isAborted && effectiveNavOptions?.showUI !== false && (effectiveNavOptions ? !!effectiveNavOptions.destination : externalShowNavigationUI);
   const mode = navigationData?.mode || "preview";
   const resolvedInitialFollow = mapControls ? mapControls.isFollowing : initialFollowUser;
   const isFollowingRef = (0, import_react9.useRef)(resolvedInitialFollow);
@@ -2093,15 +2631,29 @@ var MapInternal = ({
     }
   }, [initialFollowUser, setFollowMode, userLocationState.coords]);
   const lastAutoLockedRouteRef = (0, import_react9.useRef)(null);
+  const lastModeRef = (0, import_react9.useRef)(null);
   (0, import_react9.useEffect)(() => {
     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;
@@ -2125,7 +2677,8 @@ var MapInternal = ({
       }
     }
     lastAutoLockedRouteRef.current = route;
-  }, [route, mode, setFollowMode]);
+    lastModeRef.current = mode;
+  }, [route, mode, setFollowMode, userLocationState.coords]);
   (0, import_react9.useEffect)(() => {
     if (isFollowingRef.current && !isFlyingRef.current && userLocationState.coords && mapRef.current) {
       mapRef.current.easeTo({
@@ -2141,33 +2694,33 @@ 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 = (0, import_react9.useMemo)(() => {
-    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;
   (0, import_react9.useEffect)(() => {
     if (setEtaDataCtx) {
@@ -2183,7 +2736,7 @@ var MapInternal = ({
   const defaultMenuItems = (0, import_react9.useMemo)(
     () => [
       {
-        icon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           "svg",
           {
             className: "w-5 h-5",
@@ -2191,7 +2744,7 @@ var MapInternal = ({
             stroke: "currentColor",
             strokeWidth: "2",
             viewBox: "0 0 24 24",
-            children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
               "path",
               {
                 d: "M12 11c0 3.517-1.009 6.799-2.753 9.571m-3.44-2.04l.054-.09A13.916 13.916 0 008 11a4 4 0 118 0c0 1.017-.07 2.019-.203 3m-2.118 6.844A21.88 21.88 0 0015.171 17m3.839 1.132c.645-2.266.99-4.659.99-7.132A8 8 0 008 4.07M3 15.364c.64-1.319 1-2.8 1-4.364 0-1.457.39-2.823 1.07-4",
@@ -2242,7 +2795,7 @@ var MapInternal = ({
         mapLibreChildren2.push(child);
       }
     });
-    const menuContentFromChildren2 = extractedMenuItems.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(MapMenu, { children: extractedMenuItems }) : null;
+    const menuContentFromChildren2 = extractedMenuItems.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MapMenu, { children: extractedMenuItems }) : null;
     return { mapLibreChildren: mapLibreChildren2, menuContentFromChildren: menuContentFromChildren2 };
   }, [children]);
   const handleMapClick = (e) => {
@@ -2316,13 +2869,13 @@ var MapInternal = ({
       }
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
     "div",
     {
       className: `w-full h-full overflow-hidden relative ${className}`,
       style,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
           import_react_maplibre5.Map,
           {
             attributionControl: false,
@@ -2351,23 +2904,23 @@ var MapInternal = ({
               showUserLocation && userLocationState.coords && (renderUserLocation ? renderUserLocation({
                 coords: userLocationState.coords,
                 heading: userLocationState.heading
-              }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
                 UserLocationLayer,
                 {
                   forcedLocation: userLocationState.coords,
                   heading: userLocationState.heading
                 }
               )),
-              displayRoute && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(RouteLayer, { geometry: displayRoute }),
-              pois.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(POILayers, { pois }),
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(POIMarkers, { onClick: onPoiClick, pois })
+              displayRoute && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(RouteLayer, { geometry: displayRoute }),
+              pois.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(POILayers, { pois }),
+                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(POIMarkers, { onClick: onPoiClick, pois })
               ] }),
               mapLibreChildren
             ]
           }
         ),
-        showControls && mapControls && !mapControls.hasControls && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        showControls && mapControls && !mapControls.hasControls && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           MapControls,
           {
             drawerContentRef,
@@ -2389,12 +2942,12 @@ var SDKMapProviderWrapper = ({
 }) => {
   const context = (0, import_react9.useContext)(MapControlsContext);
   if (context) {
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, { children });
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, { children });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SDKMapProvider, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SDKMapProvider, { children });
 };
 var Map2 = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SDKMapProviderWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_maplibre5.MapProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(MapInternal, { ...props }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SDKMapProviderWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_maplibre5.MapProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MapInternal, { ...props }) }) });
 };
 
 // src/components/MapWrapper.tsx
@@ -2591,7 +3144,7 @@ var RoutingService = {
 };
 
 // package.json
-var version = "0.2.0";
+var version = "0.2.2";
 
 // src/sdk.ts
 function deepFreeze(obj) {
@@ -2924,7 +3477,7 @@ var sdk = deepFreeze(new MiniAppSDK());
 
 // src/components/BridgeMocker.tsx
 var import_react11 = require("react");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var getBearing = (p1, p2) => {
   const lat1 = p1[1] * Math.PI / 180;
   const lat2 = p2[1] * Math.PI / 180;
@@ -3216,16 +3769,17 @@ var BridgeMocker = ({
     };
   }, [appId]);
   if (!isReady) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "relative w-full h-full", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "w-full h-full", children }),
-    isMinimized ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-      "button",
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "relative w-full h-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "w-full h-full", children }),
+    isMinimized ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      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__ */ (0, import_jsx_runtime12.jsxs)(
+        variant: "ghost",
+        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
           "svg",
           {
             className: "group-hover:scale-110 transition-transform",
@@ -3239,41 +3793,49 @@ var BridgeMocker = ({
             width: "14",
             xmlns: "http://www.w3.org/2000/svg",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M21 4H3" }),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M10 8H3" }),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M21 12H3" }),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M10 16H3" }),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M21 20H3" }),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("circle", { cx: "14", cy: "8", r: "2" }),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("circle", { cx: "14", cy: "16", r: "2" })
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: "M21 4H3" }),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: "M10 8H3" }),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: "M21 12H3" }),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: "M10 16H3" }),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: "M21 20H3" }),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("circle", { cx: "14", cy: "8", r: "2" }),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("circle", { cx: "14", cy: "16", r: "2" })
             ]
           }
         )
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    ) : /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
       "div",
       {
         className: "fixed bottom-4 right-4 bg-slate-900 text-slate-300 font-mono text-xs rounded-xl shadow-2xl border border-slate-700 pointer-events-auto flex flex-col w-80 overflow-hidden animate-in slide-in-from-right duration-300",
         style: { zIndex: 9998 },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
             "div",
             {
               className: "flex justify-between items-center p-3 border-b border-slate-800 cursor-pointer bg-slate-800/50 hover:bg-slate-800 transition-colors",
               onClick: () => setIsMinimized(true),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "font-bold text-slate-100 flex items-center gap-2", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-lg", children: "\u{1F6E0}\uFE0F" }),
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "font-bold text-slate-100 flex items-center gap-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-lg", children: "\u{1F6E0}\uFE0F" }),
                   " Simulation Controls"
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { className: "text-slate-500 hover:text-white", type: "button", children: "\u25BC" })
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                  Button,
+                  {
+                    className: "text-slate-500 hover:text-white p-0 h-auto hover:bg-transparent cursor-pointer",
+                    type: "button",
+                    variant: "ghost",
+                    children: "\u25BC"
+                  }
+                )
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "p-4 flex flex-col gap-3", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex justify-between items-center", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("label", { className: "flex items-center gap-2 cursor-pointer", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "p-4 flex flex-col gap-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex justify-between items-center", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("label", { className: "flex items-center gap-2 cursor-pointer", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                   "input",
                   {
                     checked: autoMove,
@@ -3282,20 +3844,20 @@ var BridgeMocker = ({
                     type: "checkbox"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "text-slate-200 font-bold", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "text-slate-200 font-bold", children: [
                   "Auto-Move ",
                   simulationPath ? "(Path)" : "(Random)"
                 ] })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-[10px] text-slate-500", children: "Speed:" }),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-[10px] text-slate-500", children: "Speed:" }),
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                   "select",
                   {
                     className: "bg-slate-800 border border-slate-700 rounded px-1 py-0.5 text-white focus:outline-none focus:border-blue-500 text-[10px]",
                     onChange: (e) => setSpeedMultiplier(Number(e.target.value)),
                     value: speedMultiplier,
-                    children: [1, 2, 5, 10, 50, 100, 250].map((s) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("option", { value: s, children: [
+                    children: [1, 2, 5, 10, 50, 100, 250].map((s) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("option", { value: s, children: [
                       s,
                       "x"
                     ] }, s))
@@ -3303,10 +3865,10 @@ var BridgeMocker = ({
                 )
               ] })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "grid grid-cols-2 gap-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-col gap-1", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-[10px] text-slate-500 text-left", children: "Lng" }),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "grid grid-cols-2 gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex flex-col gap-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-[10px] text-slate-500 text-left", children: "Lng" }),
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                   "input",
                   {
                     className: "bg-slate-800 border border-slate-700 rounded px-2 py-1 text-white focus:outline-none focus:border-blue-500",
@@ -3321,9 +3883,9 @@ var BridgeMocker = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-col gap-1", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-[10px] text-slate-500 text-left", children: "Lat" }),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex flex-col gap-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-[10px] text-slate-500 text-left", children: "Lat" }),
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                   "input",
                   {
                     className: "bg-slate-800 border border-slate-700 rounded px-2 py-1 text-white focus:outline-none focus:border-blue-500",
@@ -3338,9 +3900,9 @@ var BridgeMocker = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-col gap-1 col-span-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-[10px] text-slate-500", children: "Heading (Degrees)" }),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex flex-col gap-1 col-span-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-[10px] text-slate-500", children: "Heading (Degrees)" }),
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                   "input",
                   {
                     className: "w-full accent-blue-500",
@@ -3354,7 +3916,7 @@ var BridgeMocker = ({
                     value: heading
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "text-right text-slate-400", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "text-right text-slate-400", children: [
                   heading,
                   "\xB0"
                 ] })
@@ -3369,7 +3931,7 @@ var BridgeMocker = ({
 
 // src/components/DebugConsole.tsx
 var import_react12 = require("react");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var DebugConsole = ({
   isOpen: initialOpen = false,
   onClose
@@ -3413,14 +3975,15 @@ var DebugConsole = ({
     };
   }, [addLog]);
   if (!showConsole) {
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-      "button",
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      Button,
       {
-        className: "fixed bottom-4 left-4 w-8 h-8 rounded-full bg-slate-900/60 backdrop-blur-sm border border-slate-700/50 flex items-center justify-center text-slate-400 hover:text-emerald-400 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__ */ (0, import_jsx_runtime13.jsxs)(
+        variant: "ghost",
+        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
           "svg",
           {
             className: "group-hover:scale-110 transition-transform",
@@ -3434,68 +3997,70 @@ var DebugConsole = ({
             width: "14",
             xmlns: "http://www.w3.org/2000/svg",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "m8 2 1.88 1.88" }),
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M14.12 3.88 16 2" }),
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M9 7.13v-1a3.003 3.003 0 1 1 6 0v1" }),
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M12 20c-3.3 0-6-2.7-6-6v-3a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v3c0 3.3-2.7 6-6 6" }),
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M12 20v-9" }),
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M6.53 9C4.6 8.8 3 7.1 3 5" }),
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M6 13H2" }),
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M3 21c0-2.1 1.7-3.9 3.8-4" }),
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M20.97 5c0 2.1-1.6 3.8-3.5 4" }),
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M22 13h-4" }),
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M17.2 17c2.1.1 3.8 1.9 3.8 4" })
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "m8 2 1.88 1.88" }),
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M14.12 3.88 16 2" }),
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M9 7.13v-1a3.003 3.003 0 1 1 6 0v1" }),
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M12 20c-3.3 0-6-2.7-6-6v-3a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v3c0 3.3-2.7 6-6 6" }),
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M12 20v-9" }),
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M6.53 9C4.6 8.8 3 7.1 3 5" }),
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M6 13H2" }),
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M3 21c0-2.1 1.7-3.9 3.8-4" }),
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M20.97 5c0 2.1-1.6 3.8-3.5 4" }),
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M22 13h-4" }),
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M17.2 17c2.1.1 3.8 1.9 3.8 4" })
             ]
           }
         )
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "fixed inset-x-0 bottom-0 w-full bg-[#0a080f] border-t border-slate-800 z-[9998] p-4 shadow-2xl flex flex-col animate-in slide-in-from-bottom duration-300", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center justify-between mb-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "text-[10px] font-bold uppercase tracking-widest text-slate-400 flex items-center gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "w-2 h-2 rounded-full bg-emerald-500 animate-pulse" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "fixed inset-x-0 bottom-0 w-full bg-[#0a080f] border-t border-slate-800 z-[9998] p-4 shadow-2xl flex flex-col animate-in slide-in-from-bottom duration-300", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center justify-between mb-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: "text-[10px] font-bold uppercase tracking-widest text-slate-400 flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "w-2 h-2 rounded-full bg-emerald-500 animate-pulse" }),
         "UP SDK Debug Console"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex gap-4", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-          "button",
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex gap-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          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__ */ (0, import_jsx_runtime13.jsx)(
-          "button",
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          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__ */ (0, import_jsx_runtime13.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       "div",
       {
         className: "bg-black/80 rounded-xl p-3 font-mono text-[10px] text-emerald-400 min-h-[120px] max-h-[240px] overflow-y-auto border border-slate-900 custom-scrollbar",
         ref: scrollRef,
-        children: logs.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "text-slate-600 italic text-center py-8", children: "No logs yet. Interacting with the SDK will show events here." }) : logs.map((log) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+        children: logs.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "text-slate-600 italic text-center py-8", children: "No logs yet. Interacting with the SDK will show events here." }) : logs.map((log) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
           "div",
           {
             className: "mb-3 pb-3 border-b border-slate-900/50 last:border-0 last:mb-0 last:pb-0",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex gap-2 text-slate-500 mb-1 items-center", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-[8px]", children: log.time }),
-                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "font-bold text-white uppercase text-[8px] bg-slate-800 px-1.5 py-0.5 rounded leading-none", children: log.label })
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex gap-2 text-slate-500 mb-1 items-center", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-[8px]", children: log.time }),
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "font-bold text-white uppercase text-[8px] bg-slate-800 px-1.5 py-0.5 rounded leading-none", children: log.label })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("pre", { className: "whitespace-pre-wrap break-all opacity-90", children: log.content })
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("pre", { className: "whitespace-pre-wrap break-all opacity-90", children: log.content })
             ]
           },
           log.id
@@ -3507,7 +4072,7 @@ var DebugConsole = ({
 
 // src/components/SDKProvider.tsx
 var import_react13 = require("react");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var SDKContext = (0, import_react13.createContext)({ isMocked: false });
 var useIsMocked = () => (0, import_react13.useContext)(SDKContext).isMocked;
 var SDKProvider = ({
@@ -3517,14 +4082,14 @@ var SDKProvider = ({
 }) => {
   const isMocked = typeof window !== "undefined" && !(window.__UP_REACT_NATIVE_APP__ === true || !!window.ReactNativeWebView);
   const value = (0, import_react13.useMemo)(() => ({ isMocked }), [isMocked]);
-  const content = /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+  const content = /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
     children,
-    debug && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DebugConsole, {})
+    debug && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DebugConsole, {})
   ] });
   if (isMocked) {
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SDKContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(BridgeMocker, { ...mockerProps, children: content }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SDKContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(BridgeMocker, { ...mockerProps, children: content }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SDKContext.Provider, { value, children: content });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SDKContext.Provider, { value, children: content });
 };
 
 // src/host/routingHandler.ts