@cloudparse/up-miniapps-sdk 0.1.6 → 0.2.1

package/dist/index.cjs

@@ -0,0 +1,3859 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  BridgeMocker: () => BridgeMocker,
+  DebugConsole: () => DebugConsole,
+  GeolocationEvent: () => GeolocationEvent,
+  GlobalEvent: () => GlobalEvent,
+  Map: () => Map2,
+  MapControls: () => MapControls,
+  MapControlsContext: () => MapControlsContext,
+  MapMenu: () => MapMenu,
+  MapMenuDivider: () => MapMenuDivider,
+  MapMenuFooter: () => MapMenuFooter,
+  MapMenuItem: () => MapMenuItem,
+  MapMenuTitle: () => MapMenuTitle,
+  MiniAppSDK: () => MiniAppSDK,
+  RouteLayer: () => RouteLayer,
+  SDKMapProvider: () => SDKMapProvider,
+  SDKProvider: () => SDKProvider,
+  UIEvent: () => UIEvent,
+  default: () => src_default,
+  handleClearRoute: () => handleClearRoute,
+  handleDrawRoute: () => handleDrawRoute,
+  handleRouteRequest: () => handleRouteRequest,
+  renderMap: () => renderMap,
+  sdk: () => sdk,
+  useIsMocked: () => useIsMocked,
+  useLiveRouting: () => useLiveRouting,
+  useMapControls: () => useMapControls,
+  useRoute: () => useRoute,
+  useTrimmedRoute: () => useTrimmedRoute,
+  useUserLocation: () => useUserLocation
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/bridge.ts
+var Bridge = class {
+  callbacks = /* @__PURE__ */ new Map();
+  eventListeners = /* @__PURE__ */ new Map();
+  /**
+   * Registers a global listener for messages coming from the native shell.
+   * Also listens for standard browser `message` events to support multiple
+   * communication channels (e.g., React Native WebView postMessage).
+   */
+  constructor() {
+    if (typeof window !== "undefined") {
+      const bridgeReceiver = Object.freeze({
+        onNativeMessage: (envelope) => this.handleNativeMessage(envelope)
+      });
+      if (typeof window.__MiniAppBridge === "undefined") {
+        Object.defineProperty(window, "__MiniAppBridge", {
+          configurable: true,
+          // MUST be true for React StrictMode / HMR unmount/remount cycles
+          value: bridgeReceiver,
+          writable: false
+        });
+      }
+      window.addEventListener("message", (event) => {
+        if (!event.data) return;
+        try {
+          const data = typeof event.data === "string" ? JSON.parse(event.data) : event.data;
+          if (data && typeof data === "object" && (data.callbackId || data.event || data.eventName)) {
+            this.handleNativeMessage(data);
+          }
+        } catch (_e) {
+        }
+      });
+    }
+  }
+  /**
+   * Subscribes to a pushed event from the native shell.
+   *
+   * @param event The event name to listen for.
+   * @param callback Function to execute when the event occurs.
+   * @returns An unsubscription function.
+   */
+  on(event, callback) {
+    let listeners = this.eventListeners.get(event);
+    if (!listeners) {
+      listeners = [];
+      this.eventListeners.set(event, listeners);
+    }
+    listeners.push(callback);
+    return () => this.off(event, callback);
+  }
+  /**
+   * Unsubscribes a specific callback from an event.
+   *
+   * @param event The event name.
+   * @param callback The callback function to remove.
+   */
+  off(event, callback) {
+    const listeners = this.eventListeners.get(event);
+    if (!listeners) return;
+    this.eventListeners.set(
+      event,
+      listeners.filter((cb) => cb !== callback)
+    );
+  }
+  /**
+   * Sends a message to the native shell and waits for a response.
+   *
+   * @template T The expected response type.
+   * @param type The action type (e.g., "GET_LOCATION").
+   * @param payload Data associated with the action.
+   * @param timeoutMs Time in milliseconds to wait for a response before rejecting.
+   * @returns A promise that resolves with the native response.
+   */
+  send(type, payload, timeoutMs = 3e4) {
+    if (!this.isNative()) {
+      return this.handleMockMessage(type, payload);
+    }
+    return new Promise((resolve, reject) => {
+      const callbackId = `${type}_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`;
+      const timeout = setTimeout(() => {
+        if (this.callbacks.has(callbackId)) {
+          this.callbacks.delete(callbackId);
+          reject(new Error(`Bridge request timeout: ${type}`));
+        }
+      }, timeoutMs);
+      this.callbacks.set(callbackId, {
+        reject,
+        resolve,
+        timeout
+      });
+      const message = {
+        callbackId,
+        payload,
+        type
+      };
+      const win = window;
+      if (win.ReactNativeWebView?.postMessage) {
+        win.ReactNativeWebView.postMessage(JSON.stringify(message));
+      } else {
+        clearTimeout(timeout);
+        this.callbacks.delete(callbackId);
+        reject(new Error("Bridge not available"));
+      }
+    });
+  }
+  /**
+   * Internal handler for all incoming messages from the native shell.
+   * Matches incoming payloads to either pending callbacks or event listeners.
+   *
+   * @internal
+   * @param envelope The message envelope received from native code.
+   */
+  handleNativeMessage(envelope) {
+    if (!envelope || typeof envelope !== "object") return;
+    const callbackId = envelope.callbackId;
+    if (callbackId && typeof callbackId === "string") {
+      const callback = this.callbacks.get(callbackId);
+      if (callback) {
+        clearTimeout(callback.timeout);
+        const { resolve, reject } = callback;
+        if (envelope.success === false || envelope.error) {
+          reject(envelope.error || "Unknown error");
+        } else {
+          resolve(envelope.value ?? envelope.payload ?? envelope);
+        }
+        this.callbacks.delete(callbackId);
+        return;
+      }
+    }
+    const eventName = envelope.eventName || envelope.event;
+    if (eventName) {
+      if (envelope.type === "EVENT" || !envelope.type || envelope.event) {
+        const listeners = this.eventListeners.get(eventName);
+        if (listeners) {
+          for (const listener of listeners) {
+            try {
+              listener(envelope.payload || envelope.value);
+            } catch (e) {
+              console.error(`Error in event listener for ${eventName}:`, e);
+            }
+          }
+        }
+      }
+    }
+  }
+  /**
+   * Internal handler for mock message processing, overrideable in test environments
+   */
+  handleMockMessage(type, payload) {
+    console.warn(`[Bridge] Mock mode active: Unhandled message type ${type}`);
+    return Promise.resolve();
+  }
+  /**
+   * Determine environment. Check flag or cache result.
+   */
+  isNative() {
+    if (typeof window === "undefined") return false;
+    return window.__UP_REACT_NATIVE_APP__ === true || !!window.ReactNativeWebView;
+  }
+};
+
+// src/components/Map/components/MapDrawer.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var resolveHeightToPixels = (height, containerHeight) => {
+  if (typeof height === "number") {
+    return height;
+  }
+  if (height.endsWith("%")) {
+    return parseFloat(height) / 100 * containerHeight;
+  }
+  return parseFloat(height);
+};
+var MapDrawer = (0, import_react.forwardRef)(
+  ({
+    menuItems,
+    state,
+    onChangeState,
+    side,
+    etaBarHeight = 0,
+    etaData,
+    touchStartY,
+    setTouchStartY,
+    currentTouchY,
+    setCurrentTouchY,
+    isDragging,
+    clampedDragOffset,
+    drawerPeekHeight,
+    drawerFullHeight,
+    containerHeight,
+    menuContent,
+    enableTouchDrag = false,
+    showScrollToTopButton = true,
+    scrollToTopThreshold = 300,
+    safeAreaInsets = { bottom: 0, left: 0, right: 0, top: 0 }
+  }, ref) => {
+    const scrollContainerRef = (0, import_react.useRef)(null);
+    const containerRef = (0, import_react.useRef)(null);
+    (0, import_react.useImperativeHandle)(
+      ref,
+      () => scrollContainerRef.current
+    );
+    const handleHandleClick = () => {
+      if (side === "left") {
+        onChangeState(state === "closed" ? "full" : "closed");
+      } else {
+        if (state === "closed") {
+          onChangeState("peek");
+        } else if (state === "peek") {
+          onChangeState("full");
+        } else {
+          onChangeState("peek");
+        }
+      }
+    };
+    const [showScrollTop, setShowScrollTop] = (0, import_react.useState)(false);
+    const handleScroll = (e) => {
+      const scrollTop = e.currentTarget.scrollTop;
+      setShowScrollTop(state !== "closed" && scrollTop > scrollToTopThreshold);
+    };
+    (0, import_react.useEffect)(() => {
+      if (state === "closed") {
+        setShowScrollTop(false);
+      } else {
+        const scrollTop = scrollContainerRef.current?.scrollTop || 0;
+        setShowScrollTop(scrollTop > scrollToTopThreshold);
+      }
+    }, [state, scrollToTopThreshold]);
+    const isDraggingSheet = (0, import_react.useRef)(false);
+    const hasDeterminedDirection = (0, import_react.useRef)(false);
+    const isTouchOnContent = (0, import_react.useRef)(false);
+    const stateRef = (0, import_react.useRef)(state);
+    const touchStartYRef = (0, import_react.useRef)(touchStartY);
+    const currentTouchYRef = (0, import_react.useRef)(currentTouchY);
+    (0, import_react.useEffect)(() => {
+      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);
+        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 = () => {
+      if (state === "full") {
+        return "translateY(var(--drag-offset, 0px))";
+      }
+      if (state === "peek") {
+        return `translateY(calc(${shiftPx}px + var(--drag-offset, 0px)))`;
+      }
+      const closedVisibleHeight = 32;
+      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: `
+        .no-scrollbar {
+          -ms-overflow-style: none;
+          scrollbar-width: none;
+        }
+        .no-scrollbar::-webkit-scrollbar {
+          display: none;
+        }
+      ` }),
+      /* @__PURE__ */ (0, import_jsx_runtime.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",
+          {
+            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 relative", 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",
+                    onScroll: handleScroll,
+                    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");
+                          }
+                        },
+                        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_runtime.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 shadow-lg shadow-cyan-500/25 transition-all duration-200 cursor-pointer",
+                    onClick: () => {
+                      scrollContainerRef.current?.scrollTo({
+                        behavior: "smooth",
+                        top: 0
+                      });
+                    },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime.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_runtime.jsx)("polyline", { points: "18 15 12 9 6 15" })
+                      }
+                    )
+                  }
+                )
+              ] }),
+              /* @__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" })
+                }
+              )
+            ]
+          }
+        )
+      ) : (
+        /* Bottom Sheet Panel - Hardware accelerated translateY transitions */
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "div",
+          {
+            className: `absolute w-full bg-zinc-950/85 backdrop-blur-md border border-white/10 rounded-t-2xl shadow-2xl flex flex-col z-40 select-none ${isDragging ? "transition-none" : "transition-transform duration-300 ease-out"}`,
+            ref: containerRef,
+            style: {
+              bottom: "0px",
+              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)(
+                "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" })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                "div",
+                {
+                  className: "flex-1 flex flex-col overflow-hidden px-4 pb-4 pt-2 transition-[margin-top] duration-250 ease-in-out relative",
+                  style: {
+                    marginTop: state === "closed" ? `${safeAreaInsets.bottom}px` : "0px"
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.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_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_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_runtime.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 shadow-lg shadow-cyan-500/25 transition-all duration-200 cursor-pointer",
+                        onClick: () => {
+                          scrollContainerRef.current?.scrollTo({
+                            behavior: "smooth",
+                            top: 0
+                          });
+                        },
+                        style: {
+                          bottom: state === "peek" ? `calc(${24 + shiftPx}px + var(--drag-offset, 0px))` : `calc(24px + var(--drag-offset, 0px))`
+                        },
+                        children: /* @__PURE__ */ (0, import_jsx_runtime.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_runtime.jsx)("polyline", { points: "18 15 12 9 6 15" })
+                          }
+                        )
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      )
+    ] });
+  }
+);
+
+// src/components/Map/components/MapEtaPanel.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var MapEtaPanel = ({
+  etaData,
+  layoutMode,
+  onHeaderClick,
+  style,
+  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)(
+        "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: [
+              etaData.etaMins,
+              " min (",
+              etaData.distanceRemainingKm.toFixed(1),
+              " km)"
+            ] })
+          ]
+        }
+      ),
+      etaData.onAbort && /* @__PURE__ */ (0, import_jsx_runtime2.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",
+          onClick: (e) => {
+            e.stopPropagation();
+            etaData.onAbort?.();
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+            "svg",
+            {
+              className: "lucide lucide-x",
+              fill: "none",
+              height: "18",
+              stroke: "currentColor",
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round",
+              "stroke-width": "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" })
+              ]
+            }
+          )
+        }
+      ),
+      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)(
+        "div",
+        {
+          className: "h-full bg-cyan-400",
+          style: { width: `${etaData.progress}%` }
+        }
+      ) })
+    ] });
+  }
+  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" })
+        ] }),
+        etaData.onAbort && /* @__PURE__ */ (0, import_jsx_runtime2.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",
+            onClick: etaData.onAbort,
+            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+              "svg",
+              {
+                className: "lucide lucide-x",
+                fill: "none",
+                height: "18",
+                stroke: "currentColor",
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round",
+                "stroke-width": "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_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_runtime2.jsx)("div", { className: "text-[8px] text-zinc-500 font-bold uppercase tracking-wider mt-1", children: "Time 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" })
+          ] }),
+          /* @__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_runtime2.jsx)("div", { className: "h-1 bg-white/10 rounded-full overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "div",
+          {
+            className: "h-full bg-cyan-400 rounded-full",
+            style: { width: `${etaData.progress}%` }
+          }
+        ) })
+      ] }),
+      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",
+    {
+      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"}`,
+      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" })
+          ] }),
+          etaData.onAbort && /* @__PURE__ */ (0, import_jsx_runtime2.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",
+              onClick: etaData.onAbort,
+              children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                "svg",
+                {
+                  className: "lucide lucide-x",
+                  fill: "none",
+                  height: "18",
+                  stroke: "currentColor",
+                  "stroke-linecap": "round",
+                  "stroke-linejoin": "round",
+                  "stroke-width": "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_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_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",
+            {
+              className: "h-full bg-cyan-400 rounded-full",
+              style: { width: `${etaData.progress}%` }
+            }
+          ) })
+        ] }),
+        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 MapRightControls = ({
+  customControls = [],
+  etaBarHeight,
+  onRecenter,
+  isMapCentered,
+  mapBearing,
+  mapPitch,
+  onResetBearing,
+  initialViewState,
+  drawerState,
+  side,
+  etaData,
+  isDragging,
+  clampedDragOffset,
+  customRecenterButton,
+  customCompassButton,
+  drawerPeekHeight,
+  insets = { bottom: 0, left: 0, right: 0, top: 0 }
+}) => {
+  const aboveControls = customControls.filter(
+    (c) => c.position === "above-recenter"
+  );
+  const belowControls = customControls.filter(
+    (c) => c.position === "below-recenter"
+  );
+  const isCompassVisible = Math.abs(mapBearing) >= 0.5 || Math.abs(mapPitch) >= 0.5;
+  const closedHeightOffset = "32px";
+  const activeEtaHeight = etaData ? etaBarHeight : drawerState === "closed" ? insets.bottom : 0;
+  const peekStyle = typeof drawerPeekHeight === "number" ? `${drawerPeekHeight}px` : drawerPeekHeight || "15%";
+  const controlsBottom = side === "bottom" ? drawerState === "closed" ? `calc(${closedHeightOffset} + 1rem + ${activeEtaHeight}px - var(--drag-offset, 0px))` : `calc(${peekStyle} + 1rem + ${etaData ? etaBarHeight : 0}px - var(--drag-offset, 0px))` : `calc(1rem + ${insets.bottom}px)`;
+  const isControlsVisible = side !== "bottom" || drawerState !== "full";
+  return /* @__PURE__ */ (0, import_jsx_runtime3.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"}`,
+      style: {
+        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",
+            {
+              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"}`,
+              onClick: control.onPress,
+              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",
+          {
+            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"}`,
+            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)(
+              "svg",
+              {
+                className: "w-7 h-7 transition-transform duration-75 ease-out",
+                fill: "none",
+                style: {
+                  transform: `rotate(${-mapBearing}deg)`
+                },
+                viewBox: "0 0 24 24",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    "circle",
+                    {
+                      cx: "12",
+                      cy: "12",
+                      r: "9.5",
+                      stroke: "white",
+                      strokeOpacity: "0.2",
+                      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" })
+                ]
+              }
+            )
+          }
+        ) })),
+        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",
+          {
+            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"}`,
+            onClick: () => onRecenter(),
+            title: "Recenter Map",
+            children: isMapCentered ? (
+              /* Filled active lock state */
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                "svg",
+                {
+                  className: "w-6 h-6 text-cyan-400",
+                  fill: "none",
+                  stroke: "currentColor",
+                  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" })
+                  ]
+                }
+              )
+            ) : (
+              /* Outlined drifted state */
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                "svg",
+                {
+                  className: "w-6 h-6 text-zinc-300",
+                  fill: "none",
+                  stroke: "currentColor",
+                  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" })
+                  ]
+                }
+              )
+            )
+          }
+        ) }),
+        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",
+            {
+              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"}`,
+              onClick: control.onPress,
+              children: control.icon
+            }
+          )
+        ] }, control.id)) })
+      ]
+    }
+  );
+};
+
+// src/components/Map/MapContext.tsx
+var import_react2 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var MapControlsContext = (0, import_react2.createContext)(
+  null
+);
+var SDKMapProvider = ({
+  children
+}) => {
+  const [isFollowing, setIsFollowing] = (0, import_react2.useState)(true);
+  const [bearing, setBearingState] = (0, import_react2.useState)(0);
+  const [pitch, setPitchState] = (0, import_react2.useState)(0);
+  const [drawerState, setDrawerStateInternal] = (0, import_react2.useState)("closed");
+  const drawerContentRef = (0, import_react2.useRef)(null);
+  const setDrawerState = (0, import_react2.useCallback)((val) => {
+    setDrawerStateInternal(val);
+  }, []);
+  const [hasControls, setHasControlsState] = (0, import_react2.useState)(false);
+  const setHasControls = (0, import_react2.useCallback)((val) => {
+    setHasControlsState((prev) => prev === val ? prev : val);
+  }, []);
+  const [etaData, setEtaDataState] = (0, import_react2.useState)(void 0);
+  const setEtaData = (0, import_react2.useCallback)((newData) => {
+    setEtaDataState((prev) => {
+      if (!prev && !newData) return prev;
+      if (!prev || !newData) return newData;
+      if (prev.etaMins === newData.etaMins && prev.distanceRemainingKm === newData.distanceRemainingKm && prev.label === newData.label && prev.progress === newData.progress && prev.mode === newData.mode && prev.isCalculating === newData.isCalculating && prev.error === newData.error) {
+        return prev;
+      }
+      return newData;
+    });
+  }, []);
+  const [insets, setInsetsState] = (0, import_react2.useState)({
+    bottom: 0,
+    left: 0,
+    right: 0,
+    top: 0
+  });
+  const setInsets = (0, import_react2.useCallback)((newInsets) => {
+    setInsetsState((prev) => ({ ...prev, ...newInsets }));
+  }, []);
+  const centerCallbackRef = (0, import_react2.useRef)(null);
+  const resetBearingCallbackRef = (0, import_react2.useRef)(null);
+  const centerOnUser = (0, import_react2.useCallback)((params) => {
+    if (centerCallbackRef.current) {
+      centerCallbackRef.current(params);
+    }
+  }, []);
+  const resetBearing = (0, import_react2.useCallback)((params) => {
+    if (resetBearingCallbackRef.current) {
+      resetBearingCallbackRef.current(params);
+    }
+  }, []);
+  const _registerCenterCallback = (0, import_react2.useCallback)(
+    (cb) => {
+      centerCallbackRef.current = cb;
+    },
+    []
+  );
+  const _registerResetBearingCallback = (0, import_react2.useCallback)(
+    (cb) => {
+      resetBearingCallbackRef.current = cb;
+    },
+    []
+  );
+  const setBearing = (0, import_react2.useCallback)((b) => {
+    setBearingState(b);
+  }, []);
+  const setPitch = (0, import_react2.useCallback)((p) => {
+    setPitchState(p);
+  }, []);
+  const contextValue = (0, import_react2.useMemo)(
+    () => ({
+      _registerCenterCallback,
+      _registerResetBearingCallback,
+      bearing,
+      centerOnUser,
+      drawerContentRef,
+      drawerState,
+      etaData,
+      hasControls,
+      insets,
+      isFollowing,
+      pitch,
+      resetBearing,
+      setBearing,
+      setDrawerState,
+      setEtaData,
+      setHasControls,
+      setInsets,
+      setIsFollowing,
+      setPitch
+    }),
+    [
+      _registerCenterCallback,
+      _registerResetBearingCallback,
+      bearing,
+      centerOnUser,
+      drawerState,
+      etaData,
+      hasControls,
+      isFollowing,
+      pitch,
+      resetBearing,
+      setBearing,
+      setDrawerState,
+      setEtaData,
+      setHasControls,
+      setPitch,
+      insets,
+      setInsets
+    ]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MapControlsContext.Provider, { value: contextValue, children });
+};
+var useMapControls = () => {
+  const context = (0, import_react2.useContext)(MapControlsContext);
+  if (!context) {
+    throw new Error("useMapControls must be used within a MapControlsProvider");
+  }
+  return context;
+};
+
+// src/components/Map/components/MapControls.tsx
+var import_react3 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var resolveHeightToPixels2 = (height, containerHeight) => {
+  if (typeof height === "number") {
+    return height;
+  }
+  if (height.endsWith("%")) {
+    return parseFloat(height) / 100 * containerHeight;
+  }
+  return parseFloat(height);
+};
+var MapControls = ({
+  menuItems = [],
+  drawerSide,
+  customControls = [],
+  etaBarHeight = 100,
+  onRecenter: propRecenter,
+  isMapCentered: propMapCentered,
+  mapBearing: propMapBearing,
+  onResetBearing: propResetBearing,
+  etaData,
+  customRecenterButton,
+  defaultState,
+  initialViewState,
+  customCompassButton,
+  drawerPeekHeight,
+  drawerFullHeight,
+  drawerContentRef,
+  menuContent,
+  children,
+  enableTouchDrag = false,
+  showScrollToTopButton = true,
+  scrollToTopThreshold = 300,
+  isInternal = false
+}) => {
+  const mapContext = (0, import_react3.useContext)(MapControlsContext);
+  const contextRef = mapContext?.drawerContentRef;
+  const mergedRef = (0, import_react3.useCallback)(
+    (node) => {
+      if (drawerContentRef) {
+        if (typeof drawerContentRef === "function") {
+          drawerContentRef(node);
+        } else {
+          drawerContentRef.current = node;
+        }
+      }
+      if (contextRef) {
+        contextRef.current = node;
+      }
+    },
+    [drawerContentRef, contextRef]
+  );
+  const [localDrawerState, setLocalDrawerState] = (0, import_react3.useState)(
+    defaultState ?? "closed"
+  );
+  const drawerState = mapContext ? mapContext.drawerState : localDrawerState;
+  const setDrawerState = (0, import_react3.useCallback)(
+    (state) => {
+      if (mapContext) {
+        mapContext.setDrawerState(state);
+      } else {
+        setLocalDrawerState(state);
+      }
+    },
+    [mapContext]
+  );
+  (0, import_react3.useEffect)(() => {
+    if (defaultState && mapContext) {
+      mapContext.setDrawerState(defaultState);
+    }
+  }, []);
+  const [side, setSide] = (0, import_react3.useState)("left");
+  const containerRef = (0, import_react3.useRef)(null);
+  const [mapHeight, setMapHeight] = (0, import_react3.useState)(600);
+  (0, import_react3.useEffect)(() => {
+    const parent = containerRef.current?.parentElement;
+    if (!parent) return;
+    const updateHeight = () => {
+      setMapHeight(parent.getBoundingClientRect().height);
+    };
+    updateHeight();
+    const observer = new ResizeObserver(updateHeight);
+    observer.observe(parent);
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+  const setHasControls = mapContext?.setHasControls;
+  (0, import_react3.useEffect)(() => {
+    if (setHasControls && !isInternal) {
+      setHasControls(true);
+      return () => setHasControls(false);
+    }
+  }, [setHasControls, isInternal]);
+  const isMapCentered = propMapCentered !== void 0 ? propMapCentered : mapContext ? mapContext.isFollowing : true;
+  const mapBearing = propMapBearing !== void 0 ? propMapBearing : mapContext ? mapContext.bearing : 0;
+  const onRecenter = (params) => {
+    if (propRecenter) {
+      propRecenter(params);
+    } else if (mapContext) {
+      mapContext.centerOnUser(params);
+    }
+  };
+  const onResetBearing = (params) => {
+    if (propResetBearing) {
+      propResetBearing(params);
+    } else if (mapContext) {
+      mapContext.resetBearing(params);
+    }
+  };
+  const mapPitch = mapContext ? mapContext.pitch : 0;
+  const resolvedEtaData = etaData !== void 0 ? etaData : mapContext?.etaData;
+  const [touchStartY, setTouchStartY] = (0, import_react3.useState)(null);
+  const [currentTouchY, setCurrentTouchY] = (0, import_react3.useState)(null);
+  (0, import_react3.useEffect)(() => {
+    if (typeof window === "undefined") return;
+    const checkLayout = () => {
+      if (drawerSide) {
+        setSide(drawerSide);
+      } else {
+        if (window.innerWidth < 768) {
+          setSide("bottom");
+        } else {
+          setSide("left");
+        }
+      }
+    };
+    checkLayout();
+    window.addEventListener("resize", checkLayout);
+    return () => window.removeEventListener("resize", checkLayout);
+  }, [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, Math.min(fullPx - closedPx, dragOffset));
+  } else if (drawerState === "peek") {
+    clampedDragOffset = Math.max(
+      -(fullPx - peekPx),
+      // up to full
+      Math.min(peekPx - closedPx, dragOffset)
+      // down to closed
+    );
+  } else if (drawerState === "closed") {
+    clampedDragOffset = Math.min(0, Math.max(-(fullPx - closedPx), dragOffset));
+  }
+  let baseHeight = 32;
+  if (drawerState === "peek") {
+    baseHeight = peekPx;
+  } else if (drawerState === "full") {
+    baseHeight = fullPx;
+  }
+  const currentDrawerHeight = baseHeight - clampedDragOffset;
+  const startFadeHeight = peekPx + 20;
+  const endFadeHeight = peekPx + (fullPx - peekPx) * 0.35;
+  let etaOpacity = 1;
+  let etaBottomStyle = "1rem";
+  if (side === "bottom") {
+    if (currentDrawerHeight <= startFadeHeight) {
+      etaOpacity = 1;
+    } else if (currentDrawerHeight >= endFadeHeight) {
+      etaOpacity = 0;
+    } else {
+      const fraction = (currentDrawerHeight - startFadeHeight) / (endFadeHeight - startFadeHeight);
+      etaOpacity = 1 - fraction;
+    }
+    const effectiveInset = drawerState === "closed" ? bottomInset : 0;
+    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)(
+      MapDrawer,
+      {
+        clampedDragOffset,
+        containerHeight: mapHeight,
+        currentTouchY,
+        drawerFullHeight,
+        drawerPeekHeight,
+        enableTouchDrag,
+        etaBarHeight,
+        etaData: resolvedEtaData,
+        isDragging,
+        menuContent: children || menuContent,
+        menuItems,
+        onChangeState: setDrawerState,
+        ref: mergedRef,
+        safeAreaInsets: mapContext?.insets,
+        scrollToTopThreshold,
+        setCurrentTouchY,
+        setTouchStartY,
+        showScrollToTopButton,
+        side,
+        state: drawerState,
+        touchStartY
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      MapRightControls,
+      {
+        clampedDragOffset,
+        customCompassButton,
+        customControls,
+        customRecenterButton,
+        drawerPeekHeight,
+        drawerState,
+        etaBarHeight: etaBarHeight + (drawerState === "closed" ? bottomInset : 0),
+        etaData: resolvedEtaData,
+        initialViewState,
+        insets: mapContext?.insets,
+        isDragging,
+        isMapCentered,
+        mapBearing,
+        mapPitch,
+        onRecenter: () => onRecenter(),
+        onResetBearing,
+        side
+      }
+    ),
+    resolvedEtaData && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      MapEtaPanel,
+      {
+        etaData: resolvedEtaData,
+        isDragging,
+        layoutMode: "floating-card",
+        style: {
+          bottom: etaBottomStyle,
+          opacity: etaOpacity,
+          pointerEvents: etaOpacity > 0.1 ? "auto" : "none",
+          transition: isDragging ? "none" : "bottom 250ms ease-in-out, opacity 300ms ease-out"
+        }
+      }
+    )
+  ] });
+};
+
+// src/components/Map/components/MapMenu.tsx
+var import_react4 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var MapMenu = ({ children }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex flex-col gap-1.5", children });
+};
+var MapMenuItem = ({
+  id,
+  label,
+  icon,
+  onPress,
+  badge,
+  disabled = false,
+  children
+}) => {
+  const context = (0, import_react4.useContext)(MapControlsContext);
+  const handleClick = (e) => {
+    if (disabled) return;
+    if (onPress) onPress();
+    if (context && context.setDrawerState) {
+      context.setDrawerState("closed");
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime6.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"}`,
+      disabled,
+      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,
+          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 })
+        ] }),
+        /* @__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 }),
+          children
+        ] })
+      ]
+    }
+  );
+};
+MapMenu.displayName = "MapMenu";
+MapMenuItem.displayName = "MapMenuItem";
+var MapMenuTitle = ({
+  children,
+  showDivider = true,
+  className = ""
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.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" : ""}`,
+      children
+    }
+  );
+};
+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}` });
+};
+MapMenuDivider.displayName = "MapMenuDivider";
+var MapMenuFooter = ({
+  children,
+  className = ""
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "div",
+    {
+      className: `mt-auto pt-4 border-t border-white/10 px-3.5 text-xs text-zinc-500 font-medium ${className}`,
+      children
+    }
+  );
+};
+MapMenuFooter.displayName = "MapMenuFooter";
+
+// src/types/types.ts
+var UIEvent = /* @__PURE__ */ ((UIEvent2) => {
+  UIEvent2["TOP_SCROLL_MORE"] = "TOP_SCROLL_MORE";
+  UIEvent2["BOTTOM_SCROLL_MORE"] = "BOTTOM_SCROLL_MORE";
+  UIEvent2["BACK_GESTURE"] = "BACK_GESTURE";
+  return UIEvent2;
+})(UIEvent || {});
+var GeolocationEvent = /* @__PURE__ */ ((GeolocationEvent2) => {
+  GeolocationEvent2["LOCATION_UPDATE"] = "LOCATION_UPDATE";
+  GeolocationEvent2["LOCATION_STREAM_UPDATE"] = "LOCATION_STREAM_UPDATE";
+  return GeolocationEvent2;
+})(GeolocationEvent || {});
+var GlobalEvent = /* @__PURE__ */ ((GlobalEvent2) => {
+  GlobalEvent2["UPDATE_CONTEXT"] = "UPDATE_CONTEXT";
+  return GlobalEvent2;
+})(GlobalEvent || {});
+
+// src/components/Map/hooks/useUserLocation.ts
+var import_react5 = require("react");
+var LERP_FACTOR = 0.12;
+var useUserLocation = () => {
+  const [locationState, setLocationState] = (0, import_react5.useState)({
+    accuracy: null,
+    coords: null,
+    heading: null
+  });
+  const targetRef = (0, import_react5.useRef)({
+    accuracy: null,
+    coords: null,
+    heading: null
+  });
+  const currentRef = (0, import_react5.useRef)({
+    accuracy: null,
+    coords: null,
+    heading: null
+  });
+  const mapPayload = (0, import_react5.useCallback)((payload) => {
+    const coords = payload.location?.coords || payload.coords;
+    const headingData = payload.heading || payload.coords;
+    const newCoords = coords ? [coords.longitude, coords.latitude] : null;
+    let heading = null;
+    if (headingData?.trueHeading !== void 0 && headingData.trueHeading >= 0) {
+      heading = headingData.trueHeading;
+    } else if (headingData?.magneticHeading !== void 0 && headingData.magneticHeading >= 0) {
+      heading = headingData.magneticHeading;
+    } else if (headingData?.heading !== null && headingData.heading >= 0) {
+      heading = headingData.heading;
+    }
+    return {
+      accuracy: coords?.accuracy || null,
+      coords: newCoords,
+      heading
+    };
+  }, []);
+  (0, import_react5.useEffect)(() => {
+    let rafId;
+    const animate = () => {
+      let changed = false;
+      if (targetRef.current.coords) {
+        if (!currentRef.current.coords) {
+          currentRef.current.coords = [...targetRef.current.coords];
+          changed = true;
+        } else {
+          const [tLng, tLat] = targetRef.current.coords;
+          const [cLng, cLat] = currentRef.current.coords;
+          const nLng = cLng + (tLng - cLng) * LERP_FACTOR;
+          const nLat = cLat + (tLat - cLat) * LERP_FACTOR;
+          if (Math.abs(nLng - cLng) > 1e-7 || Math.abs(nLat - cLat) > 1e-7) {
+            currentRef.current.coords = [nLng, nLat];
+            changed = true;
+          }
+        }
+      }
+      if (targetRef.current.heading !== null) {
+        if (currentRef.current.heading === null) {
+          currentRef.current.heading = targetRef.current.heading;
+          changed = true;
+        } else {
+          const target = targetRef.current.heading;
+          const current = currentRef.current.heading;
+          let delta = target - current;
+          if (delta > 180) delta -= 360;
+          if (delta < -180) delta += 360;
+          const nHeading = current + delta * LERP_FACTOR;
+          const normalized = (nHeading % 360 + 360) % 360;
+          if (Math.abs(delta) > 0.1) {
+            currentRef.current.heading = normalized;
+            changed = true;
+          }
+        }
+      }
+      if (changed) {
+        setLocationState({
+          accuracy: targetRef.current.accuracy,
+          coords: currentRef.current.coords ? [...currentRef.current.coords] : null,
+          heading: currentRef.current.heading
+        });
+      }
+      rafId = requestAnimationFrame(animate);
+    };
+    rafId = requestAnimationFrame(animate);
+    sdk.location.getCurrentPosition().then((data) => {
+      const payload = mapPayload(data);
+      targetRef.current = payload;
+    }).catch((e) => console.warn("Initial location fetch failed", e));
+    const unsubscribeStream = sdk.on(
+      "LOCATION_STREAM_UPDATE" /* LOCATION_STREAM_UPDATE */,
+      (payload) => {
+        targetRef.current = mapPayload(payload);
+      }
+    );
+    const unsubscribeLegacy = sdk.on(
+      "LOCATION_UPDATE" /* LOCATION_UPDATE */,
+      (payload) => {
+        targetRef.current = mapPayload(payload);
+      }
+    );
+    sdk.location.startStream({
+      distanceFilter: 1,
+      headingThreshold: 2
+    }).catch((e) => console.warn("Failed to start location stream", e));
+    return () => {
+      cancelAnimationFrame(rafId);
+      unsubscribeStream();
+      unsubscribeLegacy();
+      sdk.location.stopStream().catch(() => {
+      });
+    };
+  }, [mapPayload]);
+  return locationState;
+};
+
+// src/components/Map/hooks/useLiveRouting.ts
+var import_react6 = require("react");
+var useLiveRouting = ({
+  origin: manualOrigin,
+  destination,
+  profile = "driving",
+  recalculateThreshold = 50,
+  enabled = true,
+  initialMode = "preview"
+}) => {
+  const [route, setRoute] = (0, import_react6.useState)(null);
+  const [totalDistance, setTotalDistance] = (0, import_react6.useState)(null);
+  const [isCalculating, setIsCalculating] = (0, import_react6.useState)(false);
+  const [error, setError] = (0, import_react6.useState)(null);
+  const [mode, setMode] = (0, import_react6.useState)(initialMode);
+  const userLocationState = useUserLocation();
+  const userLocation = manualOrigin || userLocationState.coords;
+  const lastCalcOrigin = (0, import_react6.useRef)(null);
+  const lastCalcDest = (0, import_react6.useRef)(null);
+  const isRequestInProgress = (0, import_react6.useRef)(false);
+  const getDistance = (0, import_react6.useCallback)(
+    (p1, p2) => {
+      const R = 6371e3;
+      const \u03C61 = p1[1] * Math.PI / 180;
+      const \u03C62 = p2[1] * Math.PI / 180;
+      const \u0394\u03C6 = (p2[1] - p1[1]) * Math.PI / 180;
+      const \u0394\u03BB = (p2[0] - p1[0]) * Math.PI / 180;
+      const a = Math.sin(\u0394\u03C6 / 2) * Math.sin(\u0394\u03C6 / 2) + Math.cos(\u03C61) * Math.cos(\u03C62) * Math.sin(\u0394\u03BB / 2) * Math.sin(\u0394\u03BB / 2);
+      const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+      return R * c;
+    },
+    []
+  );
+  const currentDistanceMeters = (0, import_react6.useMemo)(() => {
+    if (!userLocation || !destination) return null;
+    return getDistance(userLocation, destination);
+  }, [userLocation, destination, getDistance]);
+  const calculate = (0, import_react6.useCallback)(
+    async (origin, dest, isNewDest) => {
+      if (isRequestInProgress.current) return;
+      isRequestInProgress.current = true;
+      setIsCalculating(true);
+      try {
+        const data = await sdk.routing.getRoute({
+          destination: dest,
+          origin,
+          profile
+        });
+        setRoute(data);
+        setError(null);
+        if (isNewDest) {
+          setTotalDistance(data.distanceMeters);
+        }
+        lastCalcOrigin.current = origin;
+        lastCalcDest.current = dest;
+      } catch (err) {
+        setError(err.message || "Failed to fetch route");
+      } finally {
+        setIsCalculating(false);
+        isRequestInProgress.current = false;
+      }
+    },
+    [profile]
+  );
+  (0, import_react6.useEffect)(() => {
+    if (!enabled || !destination || !userLocation) {
+      if (!enabled || !destination) {
+        setRoute(null);
+        setTotalDistance(null);
+        lastCalcOrigin.current = null;
+        lastCalcDest.current = null;
+      }
+      return;
+    }
+    const destChanged = !lastCalcDest.current || lastCalcDest.current[0] !== destination[0] || lastCalcDest.current[1] !== destination[1];
+    if (destChanged) {
+      calculate(userLocation, destination, true);
+    } else if (lastCalcOrigin.current) {
+      const dist = getDistance(userLocation, lastCalcOrigin.current);
+      if (dist > recalculateThreshold) {
+        calculate(userLocation, destination, false);
+      }
+    } else {
+      calculate(userLocation, destination, true);
+    }
+  }, [
+    userLocation,
+    destination,
+    enabled,
+    recalculateThreshold,
+    calculate,
+    getDistance
+  ]);
+  return {
+    currentDistanceMeters,
+    error,
+    isCalculating,
+    mode,
+    recalculate: () => userLocation && destination && calculate(userLocation, destination, false),
+    route,
+    start: () => setMode("navigation"),
+    totalDistance
+  };
+};
+var useRoute = (origin, destination, profile = "driving") => {
+  const [route, setRoute] = (0, import_react6.useState)(null);
+  const [isCalculating, setIsCalculating] = (0, import_react6.useState)(false);
+  const [error, setError] = (0, import_react6.useState)(null);
+  (0, import_react6.useEffect)(() => {
+    if (!origin || !destination) {
+      setRoute(null);
+      return;
+    }
+    const fetchRoute = async () => {
+      setIsCalculating(true);
+      try {
+        const data = await sdk.routing.getRoute({
+          destination,
+          origin,
+          profile
+        });
+        setRoute(data);
+        setError(null);
+      } catch (err) {
+        setError(err.message || "Failed to fetch route");
+      } finally {
+        setIsCalculating(false);
+      }
+    };
+    fetchRoute();
+  }, [origin, destination, profile]);
+  return { error, isCalculating, route };
+};
+
+// src/components/Map/hooks/useTrimmedRoute.ts
+var import_react7 = require("react");
+var useTrimmedRoute = (route, userLocation) => {
+  return (0, import_react7.useMemo)(() => {
+    if (!route || !userLocation || route.coordinates.length < 2) return route;
+    const coords = route.coordinates;
+    let minDistance = Infinity;
+    let closestIndex = 0;
+    const getDistSq = (p1, p2) => {
+      return (p1[0] - p2[0]) ** 2 + (p1[1] - p2[1]) ** 2;
+    };
+    for (let i = 0; i < coords.length; i++) {
+      const dist = getDistSq(userLocation, coords[i]);
+      if (dist < minDistance) {
+        minDistance = dist;
+        closestIndex = i;
+      }
+    }
+    const remainingCoords = coords.slice(closestIndex + 1);
+    return {
+      coordinates: [userLocation, ...remainingCoords],
+      type: "LineString"
+    };
+  }, [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 RouteLayer = ({
+  geometry,
+  color = "#3b82f6",
+  width = 5,
+  opacity = 0.8
+}) => {
+  if (!geometry) return null;
+  const data = {
+    geometry,
+    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)(
+      import_react_maplibre.Layer,
+      {
+        id: "sdk-route-layer-casing",
+        paint: {
+          "line-blur": 1,
+          "line-color": "#ffffff",
+          "line-opacity": opacity,
+          "line-width": width + 2
+        },
+        type: "line"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      import_react_maplibre.Layer,
+      {
+        id: "sdk-route-layer",
+        layout: {
+          "line-cap": "round",
+          "line-join": "round"
+        },
+        paint: {
+          "line-color": color,
+          "line-opacity": opacity,
+          "line-width": width
+        },
+        type: "line"
+      }
+    )
+  ] });
+};
+
+// src/components/Map/Map.tsx
+var import_react_maplibre5 = require("@vis.gl/react-maplibre");
+var import_react9 = __toESM(require("react"), 1);
+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");
+function createEmojiIcon(emoji, size = 64) {
+  const canvas = document.createElement("canvas");
+  canvas.width = size;
+  canvas.height = size;
+  const ctx = canvas.getContext("2d");
+  ctx.font = `${size * 0.75}px serif`;
+  ctx.textAlign = "center";
+  ctx.textBaseline = "middle";
+  ctx.fillText(emoji, size / 2, size / 2);
+  return ctx.getImageData(0, 0, size, size);
+}
+var POILayers = ({ pois }) => {
+  const [loadedImages, setLoadedImages] = (0, import_react8.useState)(0);
+  const { current: map } = (0, import_react_maplibre2.useMap)();
+  const glPois = (0, import_react8.useMemo)(
+    () => pois.filter((p) => !p.displayMode || p.displayMode === "gl"),
+    [pois]
+  );
+  (0, import_react8.useEffect)(() => {
+    if (!map) return;
+    const glMap = map.getMap();
+    const defaults = [
+      { emoji: "\u{1F37A}", name: "sdk-default-bar" },
+      { emoji: "\u{1F37D}\uFE0F", name: "sdk-default-restaurant" },
+      { emoji: "\u{1F4CD}", name: "sdk-default-poi" }
+    ];
+    defaults.forEach((def) => {
+      if (!glMap.hasImage(def.name)) {
+        glMap.addImage(def.name, createEmojiIcon(def.emoji), { pixelRatio: 2 });
+      }
+    });
+    let updates = 0;
+    glPois.forEach((poi) => {
+      if (poi.imageUrl) {
+        const name = `custom-url-${poi.id}`;
+        if (!glMap.hasImage(name)) {
+          glMap.loadImage(poi.imageUrl, (error, image) => {
+            if (!error && image) {
+              if (!glMap.hasImage(name)) {
+                glMap.addImage(name, image);
+                setLoadedImages((prev) => prev + 1);
+              }
+            }
+          });
+        }
+      }
+      if (poi.emoji) {
+        const name = `custom-emoji-${poi.emoji}`;
+        if (!glMap.hasImage(name)) {
+          glMap.addImage(name, createEmojiIcon(poi.emoji), { pixelRatio: 2 });
+          updates++;
+        }
+      }
+    });
+    if (updates > 0) {
+      setLoadedImages((prev) => prev + updates);
+    }
+  }, [map, glPois]);
+  const geojson = (0, import_react8.useMemo)(
+    () => ({
+      features: glPois.map((poi) => ({
+        geometry: {
+          coordinates: [poi.longitude, poi.latitude],
+          type: "Point"
+        },
+        properties: {
+          ...poi,
+          // Selection logic for the icon in GL
+          "sdk-icon": poi.imageUrl ? `custom-url-${poi.id}` : poi.spriteName ? poi.spriteName : poi.emoji ? `custom-emoji-${poi.emoji}` : poi.type === "bar" ? "sdk-default-bar" : poi.type === "restaurant" ? "sdk-default-restaurant" : "sdk-default-poi"
+        },
+        type: "Feature"
+      })),
+      type: "FeatureCollection"
+    }),
+    [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)(
+    import_react_maplibre2.Layer,
+    {
+      id: "sdk-poi-layer",
+      layout: {
+        "icon-allow-overlap": true,
+        "icon-image": ["get", "sdk-icon"],
+        "icon-size": 1,
+        "text-anchor": "top",
+        "text-field": [
+          "step",
+          ["zoom"],
+          "",
+          // Show nothing when zoomed out
+          14,
+          ["get", "name"]
+          // Show name when zoomed in
+        ],
+        "text-font": ["Open Sans Bold"],
+        "text-offset": [0, 1.5],
+        "text-optional": true,
+        "text-size": 11
+      },
+      paint: {
+        "icon-opacity": ["interpolate", ["linear"], ["zoom"], 11, 0, 12, 1],
+        "text-color": "#ffffff",
+        "text-halo-color": "#000000",
+        "text-halo-width": 1,
+        "text-opacity": ["interpolate", ["linear"], ["zoom"], 13.5, 0, 14, 1]
+      },
+      type: "symbol"
+    }
+  ) });
+};
+
+// src/components/Map/layers/POIMarkers.tsx
+var import_react_maplibre3 = require("@vis.gl/react-maplibre");
+var import_jsx_runtime9 = 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)(
+    import_react_maplibre3.Marker,
+    {
+      anchor: "bottom",
+      latitude: poi.latitude,
+      longitude: poi.longitude,
+      onClick: (e) => {
+        e.originalEvent.stopPropagation();
+        if (onClick) onClick(poi);
+      },
+      children: poi.markerComponent ? poi.markerComponent : /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+        "div",
+        {
+          style: {
+            cursor: "pointer",
+            filter: "drop-shadow(0 4px 6px rgba(0,0,0,0.1))",
+            transform: "transition-transform duration-200 hover:scale-110"
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              "div",
+              {
+                style: {
+                  alignItems: "center",
+                  backgroundColor: poi.type === "bar" ? "#f97316" : "#10b981",
+                  border: "2px solid white",
+                  borderRadius: "50%",
+                  display: "flex",
+                  height: "32px",
+                  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)(
+                  "div",
+                  {
+                    style: {
+                      backgroundColor: "white",
+                      borderRadius: "50%",
+                      height: "8px",
+                      width: "8px"
+                    }
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              "div",
+              {
+                style: {
+                  borderLeft: "6px solid transparent",
+                  borderRight: "6px solid transparent",
+                  borderTop: `8px solid ${poi.type === "bar" ? "#f97316" : "#10b981"}`,
+                  height: 0,
+                  margin: "-2px auto 0",
+                  width: 0
+                }
+              }
+            )
+          ]
+        }
+      )
+    },
+    poi.id
+  )) });
+};
+
+// src/components/Map/layers/UserLocationLayer.tsx
+var import_react_maplibre4 = require("@vis.gl/react-maplibre");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var UserLocationLayer = ({
+  forcedLocation,
+  heading
+}) => {
+  if (!forcedLocation) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    import_react_maplibre4.Marker,
+    {
+      anchor: "center",
+      latitude: forcedLocation[1],
+      longitude: forcedLocation[0],
+      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+        "div",
+        {
+          style: {
+            alignItems: "center",
+            display: "flex",
+            justifyContent: "center",
+            position: "relative"
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              "div",
+              {
+                style: {
+                  animation: "pulse 2s infinite",
+                  backgroundColor: "rgba(59, 130, 246, 0.4)",
+                  borderRadius: "50%",
+                  height: "40px",
+                  position: "absolute",
+                  width: "40px"
+                }
+              }
+            ),
+            heading !== void 0 && heading !== null && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              "div",
+              {
+                style: {
+                  height: "60px",
+                  position: "absolute",
+                  transform: `rotate(${heading}deg)`,
+                  width: "60px",
+                  zIndex: 0
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime10.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)(
+                        "radialGradient",
+                        {
+                          cx: "50%",
+                          cy: "50%",
+                          fx: "50%",
+                          fy: "50%",
+                          id: "grad1",
+                          r: "50%",
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                              "stop",
+                              {
+                                offset: "0%",
+                                style: {
+                                  stopColor: "rgba(37, 99, 235, 0.6)",
+                                  stopOpacity: 1
+                                }
+                              }
+                            ),
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                              "stop",
+                              {
+                                offset: "100%",
+                                style: {
+                                  stopColor: "rgba(37, 99, 235, 0)",
+                                  stopOpacity: 0
+                                }
+                              }
+                            )
+                          ]
+                        }
+                      ) }),
+                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                        "path",
+                        {
+                          d: "M 50 50 L 35 0 A 50 50 0 0 1 65 0 Z",
+                          fill: "url(#grad1)"
+                        }
+                      )
+                    ]
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              "div",
+              {
+                style: {
+                  alignItems: "center",
+                  backgroundColor: "white",
+                  borderRadius: "50%",
+                  boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 0 0 2px rgba(37, 99, 235, 0.2)",
+                  display: "flex",
+                  height: "20px",
+                  justifyContent: "center",
+                  width: "20px",
+                  zIndex: 1
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                  "div",
+                  {
+                    style: {
+                      backgroundColor: "#2563eb",
+                      border: "2px solid white",
+                      borderRadius: "50%",
+                      height: "12px",
+                      width: "12px"
+                    }
+                  }
+                )
+              }
+            ),
+            /* @__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; } }` })
+          ]
+        }
+      )
+    }
+  );
+};
+
+// src/components/Map/Map.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var MapInternal = ({
+  initialViewState = {
+    latitude: 45.90583599233422,
+    longitude: 6.12589018919138,
+    zoom: 12
+  },
+  style = {},
+  mapStyle = "https://tiles.cloudparse.fr/style/up_dark_matter",
+  className = "",
+  maxBounds,
+  children,
+  onClick,
+  onMapClickMiss,
+  onContextMenu,
+  interactiveLayerIds = [],
+  onLoad,
+  showUserLocation = true,
+  followUser: initialFollowUser = false,
+  showUserLocationButton = true,
+  renderUserLocation,
+  pois = [],
+  onPoiClick,
+  route: externalRoute,
+  showNavigationUI: externalShowNavigationUI,
+  navigationData: externalNavigationData,
+  onNavigationAbort,
+  onNavigationModeChange,
+  navigation,
+  showControls = true,
+  menuItems,
+  menuContent,
+  drawerState: propDrawerState,
+  drawerContentRef,
+  controlProps = {},
+  enableTouchDrag = false
+}) => {
+  const mapControls = (0, import_react9.useContext)(MapControlsContext);
+  const mapRef = (0, import_react9.useRef)(null);
+  const userLocationState = useUserLocation();
+  const [progNav, setProgNav] = (0, import_react9.useState)(null);
+  (0, import_react9.useEffect)(() => {
+    const unsubCreate = sdk.on("SDK_NAVIGATION_CREATE", (payload) => {
+      setProgNav(payload);
+    });
+    const unsubStart = sdk.on("SDK_NAVIGATION_START", () => {
+      setProgNav((prev) => prev ? { ...prev, mode: "navigation" } : null);
+    });
+    const unsubAbort = sdk.on("SDK_NAVIGATION_ABORT", () => {
+      setProgNav(null);
+    });
+    return () => {
+      unsubCreate();
+      unsubStart();
+      unsubAbort();
+    };
+  }, []);
+  const effectiveNavOptions = progNav || navigation;
+  const internalNav = useLiveRouting({
+    destination: effectiveNavOptions?.destination || null,
+    enabled: !!effectiveNavOptions?.destination,
+    initialMode: effectiveNavOptions?.mode || "preview",
+    origin: effectiveNavOptions?.origin,
+    profile: effectiveNavOptions?.profile || "driving",
+    recalculateThreshold: effectiveNavOptions?.recalculateThreshold || 50
+  });
+  (0, import_react9.useEffect)(() => {
+    if (onNavigationModeChange && navigation) {
+      onNavigationModeChange(internalNav.mode);
+    }
+  }, [internalNav.mode, onNavigationModeChange, navigation]);
+  const navigationData = effectiveNavOptions ? internalNav : externalNavigationData;
+  const route = effectiveNavOptions ? internalNav.route?.geometry : externalRoute;
+  const showNavigationUI = effectiveNavOptions?.showUI !== false && (effectiveNavOptions ? !!effectiveNavOptions.destination : externalShowNavigationUI);
+  const mode = navigationData?.mode || "preview";
+  const resolvedInitialFollow = mapControls ? mapControls.isFollowing : initialFollowUser;
+  const isFollowingRef = (0, import_react9.useRef)(resolvedInitialFollow);
+  const isFlyingRef = (0, import_react9.useRef)(false);
+  const [localIsFollowingUI, setLocalIsFollowingUI] = (0, import_react9.useState)(
+    resolvedInitialFollow
+  );
+  const isFollowingUI = mapControls ? mapControls.isFollowing : localIsFollowingUI;
+  const setIsFollowingCtx = mapControls?.setIsFollowing;
+  const setFollowMode = (0, import_react9.useCallback)(
+    (follow) => {
+      isFollowingRef.current = follow;
+      setLocalIsFollowingUI(follow);
+      if (setIsFollowingCtx) {
+        setIsFollowingCtx(follow);
+      }
+    },
+    [setIsFollowingCtx]
+  );
+  (0, import_react9.useEffect)(() => {
+    if (mapControls && mapControls.isFollowing !== isFollowingRef.current) {
+      isFollowingRef.current = mapControls.isFollowing;
+    }
+  }, [mapControls?.isFollowing, mapControls]);
+  const mergedInteractiveLayerIds = [...interactiveLayerIds];
+  if (pois.length > 0 && !mergedInteractiveLayerIds.includes("sdk-poi-layer")) {
+    mergedInteractiveLayerIds.push("sdk-poi-layer");
+  }
+  const prevInitialFollow = (0, import_react9.useRef)(initialFollowUser);
+  (0, import_react9.useEffect)(() => {
+    if (initialFollowUser !== prevInitialFollow.current) {
+      setFollowMode(initialFollowUser);
+      prevInitialFollow.current = initialFollowUser;
+      if (initialFollowUser && userLocationState.coords && mapRef.current) {
+        isFlyingRef.current = true;
+        mapRef.current.flyTo({
+          center: userLocationState.coords,
+          duration: 1e3,
+          essential: true,
+          zoom: Math.max(mapRef.current.getZoom(), 16)
+        });
+        setTimeout(() => {
+          isFlyingRef.current = false;
+        }, 1050);
+      }
+    }
+  }, [initialFollowUser, setFollowMode, userLocationState.coords]);
+  const lastAutoLockedRouteRef = (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;
+    if (mode === "navigation") {
+      setFollowMode(true);
+    } else if (mode === "preview" && isNewRoute) {
+      setFollowMode(false);
+      const coords = route.coordinates;
+      if (coords.length > 0) {
+        const bounds = coords.reduce(
+          (acc, coord) => {
+            return [
+              [Math.min(acc[0][0], coord[0]), Math.min(acc[0][1], coord[1])],
+              [Math.max(acc[1][0], coord[0]), Math.max(acc[1][1], coord[1])]
+            ];
+          },
+          [
+            [coords[0][0], coords[0][1]],
+            [coords[0][0], coords[0][1]]
+          ]
+        );
+        mapRef.current.fitBounds(
+          [bounds[0][0], bounds[0][1], bounds[1][0], bounds[1][1]],
+          { padding: 100, speed: 1.2 }
+        );
+      }
+    }
+    lastAutoLockedRouteRef.current = route;
+  }, [route, mode, setFollowMode]);
+  (0, import_react9.useEffect)(() => {
+    if (isFollowingRef.current && !isFlyingRef.current && userLocationState.coords && mapRef.current) {
+      mapRef.current.easeTo({
+        center: userLocationState.coords,
+        duration: 50,
+        // Ultra-short for high-frequency interpolated stream
+        easing: (t) => t,
+        essential: true
+      });
+    }
+  }, [userLocationState.coords]);
+  const displayRoute = useTrimmedRoute(
+    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 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,
+    etaMins,
+    kmRemaining,
+    mode,
+    progressValue,
+    onNavigationAbort
+  ]);
+  const setEtaDataCtx = mapControls?.setEtaData;
+  (0, import_react9.useEffect)(() => {
+    if (setEtaDataCtx) {
+      setEtaDataCtx(showEtaData);
+    }
+  }, [showEtaData, setEtaDataCtx]);
+  const setDrawerStateCtx = mapControls?.setDrawerState;
+  (0, import_react9.useEffect)(() => {
+    if (setDrawerStateCtx && propDrawerState !== void 0) {
+      setDrawerStateCtx(propDrawerState);
+    }
+  }, [propDrawerState, setDrawerStateCtx]);
+  const defaultMenuItems = (0, import_react9.useMemo)(
+    () => [
+      {
+        icon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          "svg",
+          {
+            className: "w-5 h-5",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            viewBox: "0 0 24 24",
+            children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              "path",
+              {
+                d: "M12 11c0 3.517-1.009 6.799-2.753 9.571m-3.44-2.04l.054-.09A13.916 13.916 0 008 11a4 4 0 118 0c0 1.017-.07 2.019-.203 3m-2.118 6.844A21.88 21.88 0 0015.171 17m3.839 1.132c.645-2.266.99-4.659.99-7.132A8 8 0 008 4.07M3 15.364c.64-1.319 1-2.8 1-4.364 0-1.457.39-2.823 1.07-4",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              }
+            )
+          }
+        ),
+        id: "walking",
+        label: "Walking Mode",
+        onPress: () => {
+        }
+      }
+    ],
+    []
+  );
+  const resolvedMenuItems = menuItems || defaultMenuItems;
+  const { mapLibreChildren, menuContentFromChildren } = (0, import_react9.useMemo)(() => {
+    const mapLibreChildren2 = [];
+    const extractedMenuItems = [];
+    import_react9.default.Children.forEach(children, (child) => {
+      if (import_react9.default.isValidElement(child)) {
+        const type = child.type;
+        const displayName = type?.displayName || type?.name;
+        const isMenu = type === MapMenu || displayName === "MapMenu";
+        const isMenuComponent = isMenu || type === MapMenuItem || type === MapMenuTitle || type === MapMenuDivider || type === MapMenuFooter || [
+          "MapMenuItem",
+          "MapMenuTitle",
+          "MapMenuDivider",
+          "MapMenuFooter"
+        ].includes(displayName);
+        if (isMenu) {
+          import_react9.default.Children.forEach(
+            child.props.children,
+            (nestedChild) => {
+              if (nestedChild) {
+                extractedMenuItems.push(nestedChild);
+              }
+            }
+          );
+        } else if (isMenuComponent) {
+          extractedMenuItems.push(child);
+        } else {
+          mapLibreChildren2.push(child);
+        }
+      } else {
+        mapLibreChildren2.push(child);
+      }
+    });
+    const menuContentFromChildren2 = extractedMenuItems.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(MapMenu, { children: extractedMenuItems }) : null;
+    return { mapLibreChildren: mapLibreChildren2, menuContentFromChildren: menuContentFromChildren2 };
+  }, [children]);
+  const handleMapClick = (e) => {
+    const clickedFeatures = e.features || [];
+    if (onPoiClick) {
+      const poiFeature = clickedFeatures.find(
+        (f) => f.layer.id === "sdk-poi-layer"
+      );
+      if (poiFeature) {
+        onPoiClick(poiFeature.properties);
+        return;
+      }
+    }
+    const hitInteractive = clickedFeatures.some(
+      (f) => mergedInteractiveLayerIds.includes(f.layer.id)
+    );
+    if (!hitInteractive) {
+      if (onMapClickMiss) {
+        onMapClickMiss(e);
+      }
+    }
+    if (onClick) onClick(e);
+  };
+  const handleCenterOnUser = (0, import_react9.useCallback)(
+    (payload) => {
+      if (userLocationState.coords && mapRef.current) {
+        setFollowMode(true);
+        isFlyingRef.current = true;
+        mapRef.current.flyTo({
+          center: userLocationState.coords,
+          duration: 1e3,
+          essential: true,
+          pitch: payload?.pitch || 0,
+          zoom: Math.max(mapRef.current.getZoom(), 16)
+        });
+        setTimeout(() => {
+          isFlyingRef.current = false;
+        }, 1050);
+      }
+    },
+    [userLocationState.coords, setFollowMode]
+  );
+  const handleResetBearing = (0, import_react9.useCallback)((params) => {
+    if (mapRef.current) {
+      mapRef.current.easeTo({
+        bearing: 0,
+        duration: 500,
+        essential: true,
+        pitch: params?.pitch ?? 0
+      });
+    }
+  }, []);
+  (0, import_react9.useEffect)(() => {
+    if (mapControls) {
+      mapControls._registerCenterCallback(handleCenterOnUser);
+      mapControls._registerResetBearingCallback(handleResetBearing);
+    }
+  }, [mapControls, handleCenterOnUser, handleResetBearing]);
+  const handleMove = (0, import_react9.useCallback)(() => {
+    if (mapRef.current && mapControls) {
+      mapControls.setBearing(mapRef.current.getBearing());
+      mapControls.setPitch(mapRef.current.getPitch());
+    }
+  }, [mapControls]);
+  const handleUserInteraction = () => {
+    if (isFollowingRef.current) {
+      console.log("[SDK:Map] Manual interaction detected. Halting tracking.");
+      setFollowMode(false);
+      if (mapRef.current) {
+        mapRef.current.stop();
+      }
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    "div",
+    {
+      className: `w-full h-full overflow-hidden relative ${className}`,
+      style,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+          import_react_maplibre5.Map,
+          {
+            attributionControl: false,
+            initialViewState,
+            interactiveLayerIds: mergedInteractiveLayerIds,
+            mapStyle,
+            maxBounds,
+            onClick: handleMapClick,
+            onContextMenu,
+            onDragStart: handleUserInteraction,
+            onLoad: (e) => {
+              if (onLoad) onLoad(e);
+              if (initialFollowUser && userLocationState.coords && mapRef.current) {
+                mapRef.current.jumpTo({
+                  center: userLocationState.coords,
+                  zoom: 16
+                });
+              }
+            },
+            onMouseDown: handleUserInteraction,
+            onMove: handleMove,
+            onTouchStart: handleUserInteraction,
+            onWheel: handleUserInteraction,
+            ref: mapRef,
+            children: [
+              showUserLocation && userLocationState.coords && (renderUserLocation ? renderUserLocation({
+                coords: userLocationState.coords,
+                heading: userLocationState.heading
+              }) : /* @__PURE__ */ (0, import_jsx_runtime11.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 })
+              ] }),
+              mapLibreChildren
+            ]
+          }
+        ),
+        showControls && mapControls && !mapControls.hasControls && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          MapControls,
+          {
+            drawerContentRef,
+            enableTouchDrag,
+            etaData: showEtaData,
+            initialViewState,
+            isInternal: true,
+            menuContent: menuContent || menuContentFromChildren,
+            menuItems: resolvedMenuItems,
+            ...controlProps
+          }
+        )
+      ]
+    }
+  );
+};
+var SDKMapProviderWrapper = ({
+  children
+}) => {
+  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_runtime11.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 }) }) });
+};
+
+// src/components/MapWrapper.tsx
+var import_react10 = __toESM(require("react"), 1);
+var import_client = require("react-dom/client");
+function renderMap(containerId, props = {}) {
+  const container = document.getElementById(containerId);
+  if (!container) {
+    throw new Error(`Container with id "${containerId}" not found.`);
+  }
+  const root = (0, import_client.createRoot)(container);
+  root.render(import_react10.default.createElement(Map2, props));
+  return root;
+}
+
+// src/services/routingService.ts
+var RoutingService = {
+  createErrorResponse(req, code, message) {
+    return {
+      error: { code, message },
+      requestId: req.requestId,
+      sdkVersion: req.sdkVersion,
+      success: false,
+      type: "SDK_ROUTING_GETROUTE_RESPONSE"
+    };
+  },
+  decodePolyline(str, precision) {
+    let index = 0, lat = 0, lng = 0;
+    const coordinates = [];
+    const shift = 10 ** precision;
+    while (index < str.length) {
+      let b, shiftNum = 0, result = 0;
+      do {
+        b = str.charCodeAt(index++) - 63;
+        result |= (b & 31) << shiftNum;
+        shiftNum += 5;
+      } while (b >= 32);
+      const dlat = result & 1 ? ~(result >> 1) : result >> 1;
+      lat += dlat;
+      shiftNum = 0;
+      result = 0;
+      do {
+        b = str.charCodeAt(index++) - 63;
+        result |= (b & 31) << shiftNum;
+        shiftNum += 5;
+      } while (b >= 32);
+      const dlng = result & 1 ? ~(result >> 1) : result >> 1;
+      lng += dlng;
+      coordinates.push([lng / shift, lat / shift]);
+    }
+    return coordinates;
+  },
+  async fetchOSRMRoute(req, coords, profile, baseUrl) {
+    const coordsString = coords.map((c) => `${c[0]},${c[1]}`).join(";");
+    const osrmProfile = profile === "walking" ? "foot" : profile === "driving" ? "car" : "bike";
+    const url = `${baseUrl}/route/v1/${osrmProfile}/${coordsString}?overview=full&geometries=geojson&steps=true`;
+    const response = await fetch(url);
+    if (!response.ok) {
+      throw new Error(`OSRM Error: ${response.statusText}`);
+    }
+    const data = await response.json();
+    if (data.code !== "Ok" || !data.routes || data.routes.length === 0) {
+      throw new Error("NO_ROUTE");
+    }
+    const route = data.routes[0];
+    const steps = route.legs?.flatMap(
+      (leg) => leg.steps?.map((step) => ({
+        distance: step.distance,
+        duration: step.duration,
+        instruction: step.maneuver?.instruction || "Continue"
+      }))
+    ) || [];
+    return {
+      data: {
+        distanceMeters: route.distance,
+        durationSeconds: route.duration,
+        geometry: route.geometry,
+        steps
+      },
+      requestId: req.requestId,
+      sdkVersion: req.sdkVersion,
+      success: true,
+      type: "SDK_ROUTING_GETROUTE_RESPONSE"
+    };
+  },
+  async fetchRoute(req, config) {
+    const { origin, destination, waypoints, profile, language } = req.payload;
+    if (!this.isValidCoordinate(origin) || !this.isValidCoordinate(destination)) {
+      return this.createErrorResponse(
+        req,
+        "INVALID_INPUT",
+        "Origin or destination coordinates are invalid."
+      );
+    }
+    if (waypoints && !waypoints.every(this.isValidCoordinate)) {
+      return this.createErrorResponse(
+        req,
+        "INVALID_INPUT",
+        "One or more waypoints are invalid."
+      );
+    }
+    const allCoords = [origin, ...waypoints || [], destination];
+    try {
+      if (config.backend === "osrm") {
+        return await this.fetchOSRMRoute(
+          req,
+          allCoords,
+          profile,
+          config.baseUrl
+        );
+      } else {
+        return await this.fetchValhallaRoute(
+          req,
+          allCoords,
+          profile,
+          language,
+          config.baseUrl
+        );
+      }
+    } catch (error) {
+      if (error instanceof Error && error.message.includes("NO_ROUTE")) {
+        return this.createErrorResponse(
+          req,
+          "NO_ROUTE",
+          "No route could be found for the given points."
+        );
+      }
+      if (error instanceof TypeError) {
+        return this.createErrorResponse(
+          req,
+          "NETWORK_ERROR",
+          "Failed to connect to the routing backend."
+        );
+      }
+      return this.createErrorResponse(
+        req,
+        "BACKEND_ERROR",
+        `Routing backend error: ${error instanceof Error ? error.message : "Unknown error"}`
+      );
+    }
+  },
+  async fetchValhallaRoute(req, coords, profile, language, baseUrl) {
+    const valhallaProfile = profile === "driving" ? "auto" : profile === "walking" ? "pedestrian" : "bicycle";
+    const body = {
+      costing: valhallaProfile,
+      directions_options: {
+        language: language || "en-US"
+      },
+      locations: coords.map((c) => ({ lat: c[1], lon: c[0] }))
+    };
+    const response = await fetch(`${baseUrl}/route`, {
+      body: JSON.stringify(body),
+      headers: { "Content-Type": "application/json" },
+      method: "POST"
+    });
+    if (!response.ok) {
+      throw new Error(`Valhalla Error: ${response.statusText}`);
+    }
+    const data = await response.json();
+    if (!data.trip || !data.trip.legs || data.trip.legs.length === 0) {
+      throw new Error("NO_ROUTE");
+    }
+    const trip = data.trip;
+    const decodedCoordinates = this.decodePolyline(trip.legs[0].shape, 6);
+    const steps = trip.legs.flatMap(
+      (leg) => leg.maneuvers?.map((maneuver) => ({
+        distance: maneuver.length * 1e3,
+        // Valhalla returns km
+        duration: maneuver.time,
+        instruction: maneuver.instruction || "Continue"
+      }))
+    ) || [];
+    return {
+      data: {
+        distanceMeters: trip.summary.length * 1e3,
+        // km to m
+        durationSeconds: trip.summary.time,
+        geometry: {
+          coordinates: decodedCoordinates,
+          type: "LineString"
+        },
+        steps
+      },
+      requestId: req.requestId,
+      sdkVersion: req.sdkVersion,
+      success: true,
+      type: "SDK_ROUTING_GETROUTE_RESPONSE"
+    };
+  },
+  isValidCoordinate(coord) {
+    const [lng, lat] = coord;
+    return lng >= -180 && lng <= 180 && lat >= -90 && lat <= 90;
+  }
+};
+
+// package.json
+var version = "0.2.1";
+
+// src/sdk.ts
+function deepFreeze(obj) {
+  const propNames = Object.getOwnPropertyNames(obj);
+  for (const name of propNames) {
+    const value = obj[name];
+    if (value && typeof value === "object" && !Object.isFrozen(value) && // Skip freezing of native objects or circular refs if any (though not expected here)
+    !(value instanceof Bridge)) {
+      deepFreeze(value);
+    }
+  }
+  return Object.freeze(obj);
+}
+var globalRoutingConfig = null;
+var MiniAppSDK = class {
+  /**
+   * Map services.
+   * Provides access to MapLibre-based mapping components.
+   */
+  maps = Object.freeze({
+    /**
+     * Renders a MapLibre map into a DOM element.
+     * Useful for non-React environments.
+     */
+    render: renderMap
+  });
+  bridge;
+  /**
+   * Local SQLite Storage.
+   * Data is persisted on the device and is isolated per Mini-App.
+   */
+  storage = Object.freeze({
+    /** Retrieves a value by key. */
+    get: (key) => this.bridge.send("STORAGE_GET", { key }),
+    /** Retrieves all key-value pairs stored for this Mini-App. */
+    getAll: () => this.bridge.send("STORAGE_GET_ALL"),
+    /** Sets a value for a specific key. */
+    set: (key, value) => this.bridge.send("STORAGE_SET", { key, value })
+  });
+  /**
+   * Hardware-level Secure Storage.
+   * Data is stored in the device's secure enclave (Keychain/Keystore) and is isolated per Mini-App.
+   */
+  secureStore = Object.freeze({
+    /** Retrieves a value by key from secure storage. */
+    get: (key) => this.bridge.send("SECURE_GET", { key }),
+    /** Sets a value for a specific key in secure storage. */
+    set: (key, value) => this.bridge.send("SECURE_SET", { key, value })
+  });
+  /**
+   * Database Storage.
+   * Access to user-app specific persistent database storage.
+   */
+  database = Object.freeze({
+    /** Retrieves the user data stored in the backend database. */
+    getUserData: () => this.bridge.send("DATABASE_GET_USER_DATA"),
+    /** Updates the user data stored in the backend database. */
+    setUserData: (data) => this.bridge.send("DATABASE_SET_USER_DATA", { data })
+  });
+  /**
+   * Device Location services.
+   */
+  location = Object.freeze({
+    /**
+     * Retrieves the current GPS position of the device.
+     */
+    getCurrentPosition: () => this.bridge.send("GET_CURRENT_POSITION"),
+    /**
+     * Starts the continuous location and sensor stream.
+     * @param config Optional configuration for thresholds and intervals.
+     */
+    startStream: (config) => this.bridge.send("START_LOCATION_STREAM", config),
+    /**
+     * Stops the continuous location and sensor stream.
+     */
+    stopStream: () => this.bridge.send("STOP_LOCATION_STREAM")
+  });
+  /**
+   * Identity & Profile management.
+   */
+  user = Object.freeze({
+    /**
+     * Fetch user profile data.
+     * @param fields Optional list of specific fields to retrieve (e.g., ['fullName', 'username']).
+     */
+    getProfile: (fields) => this.bridge.send("GET_USER_PROFILE", { fields })
+  });
+  /**
+   * Explicit Permission Management.
+   * Allows requesting access to sensitive device features or user data.
+   */
+  permission = Object.freeze({
+    /**
+     * Explicitly request access to sensitive data.
+     * @param type The type of permission to request ('location' or 'profile').
+     * @param fields If requesting 'profile', the specific fields required.
+     */
+    request: ((type, fields) => {
+      return this.bridge.send("REQUEST_PERMISSION", { fields, type });
+    })
+  });
+  /**
+   * Payments integration.
+   */
+  payment = Object.freeze({
+    /**
+     * Triggers the native payment flow.
+     * @param payload Amount, currency, and itemized list for the payment.
+     */
+    request: (payload) => this.bridge.send("PAYMENT_REQUEST", payload)
+  });
+  /**
+   * Live Activities & Notifications.
+   * Allows the Mini-App to display real-time updates in the host shell.
+   */
+  activity = Object.freeze({
+    /**
+     * Starts a new live activity.
+     * @param id Unique identifier for the activity.
+     * @param title Display title for the activity.
+     * @param status Initial status message.
+     */
+    start: (id, title, status) => this.bridge.send("START_ACTIVITY", { id, status, title })
+  });
+  /**
+   * Haptic feedback.
+   */
+  haptic = Object.freeze({
+    /**
+     * Triggers a haptic vibration on the device.
+     * @param style The style of haptic feedback (e.g., 'light', 'medium', 'heavy', 'success', 'warning', 'error').
+     */
+    trigger: (style) => this.bridge.send("TRIGGER_HAPTIC", { style })
+  });
+  /**
+   * Network Proxy.
+   * Allows the Mini-App to make network requests through the host shell to bypass CORS or use host-level authentication.
+   */
+  network = Object.freeze({
+    /**
+     * Performs a network request via the host shell.
+     * @param options Request method, URL, headers, and body.
+     */
+    request: async (options) => {
+      return this.bridge.send("NETWORK_REQUEST", options);
+    }
+  });
+  /**
+   * Navigation and Journey controls.
+   * Allows programmatically starting itineraries and managing navigation state.
+   */
+  navigation = Object.freeze({
+    /**
+     * Aborts the current navigation journey.
+     */
+    abort: () => {
+      this.bridge.handleNativeMessage({
+        eventName: "SDK_NAVIGATION_ABORT",
+        type: "EVENT"
+      });
+    },
+    /**
+     * Creates a new itinerary preview.
+     * @param options Destination and routing options.
+     */
+    createJourney: (options) => {
+      this.bridge.handleNativeMessage({
+        eventName: "SDK_NAVIGATION_CREATE",
+        payload: { ...options, mode: "preview" },
+        type: "EVENT"
+      });
+    },
+    /**
+     * Starts the active navigation (active guidance).
+     */
+    start: () => {
+      this.bridge.handleNativeMessage({
+        eventName: "SDK_NAVIGATION_START",
+        type: "EVENT"
+      });
+    }
+  });
+  /**
+   * Fidelity & Rewards program integration.
+   */
+  fidelity = Object.freeze({
+    /** Returns current fidelity balance. */
+    getFidelityBalance: () => this.bridge.send("GET_FIDELITY_BALANCE"),
+    /**
+     * Retrieves fidelity transaction history.
+     * @param params Filtering and pagination parameters.
+     */
+    getFidelityHistory: (params) => this.bridge.send("GET_FIDELITY_HISTORY", params),
+    /**
+     * Triggers the native fidelity history view.
+     */
+    showHistory: () => this.bridge.send("SHOW_FIDELITY_HISTORY"),
+    /**
+     * Authorize spending fidelity points (FPoints) via Two-Phase Authorization.
+     * @param intentUuid UUID generated by your backend for the transaction.
+     */
+    spendFPoints: (intentUuid) => this.bridge.send("SPEND_FPOINTS", { intentUuid })
+  });
+  /**
+   * UI and Navigation controls.
+   */
+  ui = Object.freeze({
+    /** Closes the Mini-App and returns to the host shell. */
+    exit: () => this.bridge.send("EXIT"),
+    /**
+     * Configures native scroll behaviors like Pull-to-Refresh and Infinite Scroll.
+     * @param config Scroll configuration for top/bottom detection.
+     */
+    setScrollConfig: (config) => this.bridge.send("SET_SCROLL_CONFIG", config)
+  });
+  /**
+   * Debug controls
+   */
+  debug = Object.freeze({
+    /**
+     * Log to the shell app
+     * @param message
+     */
+    log: (...message) => this.bridge.send("DEBUG_LOG", { message })
+  });
+  /**
+   * Routing integration (OSRM / Valhalla).
+   * Provides access to route calculation and rendering on the host map.
+   */
+  routing = Object.freeze({
+    /**
+     * Clears the currently rendered route.
+     */
+    clearRoute: () => {
+      const requestId = crypto.randomUUID ? crypto.randomUUID() : Math.random().toString(36).substring(2);
+      return this.bridge.send("SDK_ROUTING_CLEARROUTE", {
+        requestId,
+        sdkVersion: version
+      });
+    },
+    /**
+     * Draws the calculated route on the host map.
+     * @param routeData The route data returned by getRoute.
+     */
+    drawRoute: (routeData) => {
+      const requestId = crypto.randomUUID ? crypto.randomUUID() : Math.random().toString(36).substring(2);
+      return this.bridge.send("SDK_ROUTING_DRAWROUTE", {
+        payload: { routeData },
+        requestId,
+        sdkVersion: version
+      });
+    },
+    /**
+     * Calculates a route between points.
+     * @param payload Request payload containing origin, destination, and options.
+     */
+    getRoute: async (payload) => {
+      const requestId = crypto.randomUUID ? crypto.randomUUID() : Math.random().toString(36).substring(2);
+      const request = {
+        payload,
+        requestId,
+        sdkVersion: version,
+        type: "SDK_ROUTING_GETROUTE"
+      };
+      if (globalRoutingConfig) {
+        const response = await RoutingService.fetchRoute(
+          request,
+          globalRoutingConfig
+        );
+        if (response.success && response.data) {
+          return response.data;
+        }
+        throw new Error(response.error?.message || "Routing failed");
+      }
+      return this.bridge.send("SDK_ROUTING_GETROUTE", {
+        payload,
+        requestId,
+        sdkVersion: version
+      });
+    }
+  });
+  constructor() {
+    this.bridge = new Bridge();
+    this.initialize = this.initialize.bind(this);
+    this.on = this.on.bind(this);
+    this.off = this.off.bind(this);
+  }
+  /**
+   * Configures global SDK settings.
+   */
+  config(options) {
+    if (options.routingBackend) {
+      globalRoutingConfig = options.routingBackend;
+    }
+  }
+  /**
+   * Updates the global context shared between the Mini-App and the native shell.
+   * Useful for synchronizing state like theme preferences, UI flags, or custom app-specific context.
+   * @param context Partial context object to merge into the existing shell context.
+   */
+  updateContext(context) {
+    return this.bridge.send("UPDATE_CONTEXT", context);
+  }
+  /**
+   * The starting point for the Mini-App. Must be called before any other SDK methods.
+   * @param options The options to provide to the shell app
+   */
+  initialize(options) {
+    return this.bridge.send("INITIALIZE", options);
+  }
+  /**
+   * Registers a callback for a specific event from the native shell.
+   * @param event The name of the event to listen for.
+   * @param callback The function to execute when the event is triggered.
+   * @returns A function to unregister the listener.
+   */
+  on(event, callback) {
+    return this.bridge.on(event, callback);
+  }
+  /**
+   * Unregisters a previously registered event listener.
+   * @param event The name of the event.
+   * @param callback The callback function to remove.
+   */
+  off(event, callback) {
+    this.bridge.off(event, callback);
+  }
+};
+var sdk = deepFreeze(new MiniAppSDK());
+
+// src/components/BridgeMocker.tsx
+var import_react11 = require("react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var getBearing = (p1, p2) => {
+  const lat1 = p1[1] * Math.PI / 180;
+  const lat2 = p2[1] * Math.PI / 180;
+  const dLon = (p2[0] - p1[0]) * Math.PI / 180;
+  const y = Math.sin(dLon) * Math.cos(lat2);
+  const x = Math.cos(lat1) * Math.sin(lat2) - Math.sin(lat1) * Math.cos(lat2) * Math.cos(dLon);
+  return (Math.atan2(y, x) * 180 / Math.PI + 360) % 360;
+};
+var BridgeMocker = ({
+  appId,
+  initialLocation = [6.1258, 45.9058],
+  // Annecy default
+  isMoving = false,
+  simulationPath,
+  simulationSpeed = 1,
+  mockJWTToken,
+  children
+}) => {
+  const [autoMove, setAutoMove] = (0, import_react11.useState)(isMoving);
+  const [location, setLocation] = (0, import_react11.useState)(initialLocation);
+  const [heading, setHeading] = (0, import_react11.useState)(0);
+  const [speedMultiplier, setSpeedMultiplier] = (0, import_react11.useState)(simulationSpeed);
+  const [isReady, setIsReady] = (0, import_react11.useState)(false);
+  const [isMinimized, setIsMinimized] = (0, import_react11.useState)(true);
+  const streamIntervalRef = (0, import_react11.useRef)(null);
+  const pathIndexRef = (0, import_react11.useRef)(0);
+  const activeConfigRef = (0, import_react11.useRef)(null);
+  const stateRef = (0, import_react11.useRef)({
+    autoMove,
+    heading,
+    location,
+    mockJWTToken,
+    pushLocationUpdate: () => {
+    },
+    setHeading,
+    setLocation,
+    simulationPath,
+    speedMultiplier
+  });
+  const pushLocationUpdate = (0, import_react11.useCallback)(() => {
+    const currentState = stateRef.current;
+    const payload = {
+      accelerometer: null,
+      heading: {
+        accuracy: 3,
+        magneticHeading: currentState.heading,
+        trueHeading: currentState.heading
+      },
+      location: {
+        coords: {
+          accuracy: 10,
+          altitude: 0,
+          altitudeAccuracy: null,
+          heading: currentState.heading,
+          latitude: currentState.location[1],
+          longitude: currentState.location[0],
+          speed: currentState.autoMove ? 1.5 * currentState.speedMultiplier : 0
+        },
+        timestamp: Date.now()
+      },
+      timestamp: Date.now()
+    };
+    window.__MiniAppBridge?.onNativeMessage({
+      eventName: "LOCATION_STREAM_UPDATE" /* LOCATION_STREAM_UPDATE */,
+      payload,
+      type: "EVENT"
+    });
+  }, []);
+  (0, import_react11.useEffect)(() => {
+    stateRef.current = {
+      autoMove,
+      heading,
+      location,
+      mockJWTToken,
+      pushLocationUpdate,
+      setHeading,
+      setLocation,
+      simulationPath,
+      speedMultiplier
+    };
+  }, [
+    location,
+    heading,
+    autoMove,
+    pushLocationUpdate,
+    simulationPath,
+    speedMultiplier,
+    mockJWTToken
+  ]);
+  (0, import_react11.useEffect)(() => {
+    setAutoMove(isMoving);
+  }, [isMoving]);
+  (0, import_react11.useEffect)(() => {
+    setSpeedMultiplier(simulationSpeed);
+  }, [simulationSpeed]);
+  (0, import_react11.useEffect)(() => {
+    if (simulationPath && simulationPath.length > 0) {
+      pathIndexRef.current = 0;
+      setLocation(simulationPath[0]);
+    }
+  }, [simulationPath]);
+  (0, import_react11.useEffect)(() => {
+    if (streamIntervalRef.current && activeConfigRef.current) {
+      sdk.bridge.send(
+        "START_LOCATION_STREAM",
+        activeConfigRef.current
+      );
+    }
+  }, [speedMultiplier]);
+  (0, import_react11.useEffect)(() => {
+    const bridge = sdk.bridge;
+    const originalSend = bridge.send.bind(bridge);
+    const stopStream = () => {
+      if (streamIntervalRef.current) {
+        clearInterval(streamIntervalRef.current);
+        streamIntervalRef.current = null;
+      }
+      activeConfigRef.current = null;
+    };
+    const startStream = (config) => {
+      stopStream();
+      activeConfigRef.current = config || {};
+      const baseInterval = config?.interval || 500;
+      const interval = Math.max(
+        10,
+        baseInterval / stateRef.current.speedMultiplier
+      );
+      streamIntervalRef.current = setInterval(() => {
+        const state = stateRef.current;
+        if (state.autoMove) {
+          if (state.simulationPath && state.simulationPath.length > 0) {
+            if (pathIndexRef.current < state.simulationPath.length - 1) {
+              const currentPoint = state.simulationPath[pathIndexRef.current];
+              const nextPoint = state.simulationPath[pathIndexRef.current + 1];
+              pathIndexRef.current += 1;
+              const newHeading = getBearing(currentPoint, nextPoint);
+              state.setHeading(newHeading);
+              state.setLocation(nextPoint);
+            } else {
+              state.setLocation(
+                state.simulationPath[state.simulationPath.length - 1]
+              );
+            }
+          } else {
+            state.setLocation((prev) => [
+              prev[0] + (Math.random() - 0.5) * 1e-4,
+              prev[1] + (Math.random() - 0.5) * 1e-4
+            ]);
+          }
+        }
+        state.pushLocationUpdate();
+      }, interval);
+    };
+    const simulateNetworkRequest = async (payload) => {
+      const {
+        url,
+        method = "GET",
+        headers: incomingHeaders = {},
+        body
+      } = payload;
+      const state = stateRef.current;
+      const headers = new Headers(incomingHeaders);
+      if (state.mockJWTToken) {
+        headers.set(
+          "Authorization",
+          `Bearer ${state.mockJWTToken.replace("Bearer ", "")}`
+        );
+      }
+      if (body && typeof body === "object" && !headers.has("Content-Type")) {
+        headers.set("Content-Type", "application/json");
+      }
+      try {
+        const response = await fetch(url, {
+          body: body ? typeof body === "string" ? body : JSON.stringify(body) : void 0,
+          headers,
+          method
+        });
+        const contentType = response.headers.get("content-type");
+        let responseData;
+        if (contentType?.includes("application/json")) {
+          responseData = await response.json();
+        } else {
+          responseData = await response.text();
+        }
+        const headersObj = {};
+        response.headers.forEach((value, key) => {
+          headersObj[key] = value;
+        });
+        return {
+          data: responseData,
+          headers: headersObj,
+          status: response.status,
+          statusText: response.statusText
+        };
+      } catch (error) {
+        throw {
+          error: error.message || "Network request failed",
+          status: 0
+        };
+      }
+    };
+    bridge.send = async (type, payload) => {
+      if (type === "INITIALIZE") {
+        return Promise.resolve({
+          appId,
+          // Legacy support
+          context: { theme: "dark" },
+          // Legacy support
+          description: "Mocked for Dev",
+          env: {},
+          insets: { bottom: 0, left: 0, right: 0, top: 0 },
+          name: "Vite Dev (Mock)",
+          params: {},
+          profile: {
+            countryCode: "FR",
+            email: "caveman@up.app",
+            fullName: "Smart Caveman",
+            localNumber: "0600000000",
+            username: "smart_caveman",
+            uuid: "mock-user-42"
+          },
+          success: true,
+          userData: {},
+          uuid: appId || "mock-app-id",
+          version: "1.0.0"
+        });
+      }
+      if (type === "GET_CURRENT_POSITION") {
+        const state = stateRef.current;
+        return Promise.resolve({
+          coords: {
+            accuracy: 10,
+            altitude: 0,
+            altitudeAccuracy: 0,
+            heading: state.heading,
+            latitude: state.location[1],
+            longitude: state.location[0],
+            speed: state.autoMove ? 1.5 * state.speedMultiplier : 0
+          },
+          timestamp: Date.now()
+        });
+      }
+      if (type === "START_LOCATION_STREAM") {
+        startStream(payload);
+        return Promise.resolve();
+      }
+      if (type === "STOP_LOCATION_STREAM") {
+        stopStream();
+        return Promise.resolve();
+      }
+      if (type === "NETWORK_REQUEST") {
+        return simulateNetworkRequest(payload);
+      }
+      if (type === "STORAGE_GET" || type === "SECURE_GET") {
+        return Promise.resolve(localStorage.getItem(`mock_sdk_${payload.key}`));
+      }
+      if (type === "STORAGE_SET" || type === "SECURE_SET") {
+        localStorage.setItem(`mock_sdk_${payload.key}`, payload.value);
+        return Promise.resolve();
+      }
+      if (type === "GET_USER_PROFILE") {
+        return Promise.resolve({
+          countryCode: "FR",
+          email: "caveman@up.app",
+          fullName: "Smart Caveman",
+          localNumber: "0600000000",
+          username: "smart_caveman",
+          uuid: "mock-user-42"
+        });
+      }
+      if (type === "GET_FIDELITY_BALANCE") {
+        return Promise.resolve({ balance: 1337, currency: "FPoints" });
+      }
+      if (type === "PAYMENT_REQUEST") {
+        return Promise.resolve({
+          success: true,
+          transactionId: `tx_${Math.random().toString(36).slice(2)}`
+        });
+      }
+      if (type === "TRIGGER_HAPTIC" || type === "EXIT" || type === "UPDATE_CONTEXT") {
+        return Promise.resolve({ success: true });
+      }
+      return originalSend(type, payload);
+    };
+    setIsReady(true);
+    return () => {
+      stopStream();
+      bridge.send = originalSend;
+    };
+  }, [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",
+      {
+        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",
+        onClick: () => setIsMinimized(false),
+        title: "Open Simulation Controls",
+        type: "button",
+        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+          "svg",
+          {
+            className: "group-hover:scale-110 transition-transform",
+            fill: "none",
+            height: "14",
+            stroke: "currentColor",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: "2",
+            viewBox: "0 0 24 24",
+            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_runtime12.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)(
+            "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" }),
+                  " Simulation Controls"
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { className: "text-slate-500 hover:text-white", type: "button", 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)(
+                  "input",
+                  {
+                    checked: autoMove,
+                    className: "accent-blue-500 w-4 h-4",
+                    onChange: (e) => setAutoMove(e.target.checked),
+                    type: "checkbox"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime12.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)(
+                  "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: [
+                      s,
+                      "x"
+                    ] }, s))
+                  }
+                )
+              ] })
+            ] }),
+            /* @__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)(
+                  "input",
+                  {
+                    className: "bg-slate-800 border border-slate-700 rounded px-2 py-1 text-white focus:outline-none focus:border-blue-500",
+                    onChange: (e) => {
+                      const lng = parseFloat(e.target.value) || 0;
+                      setLocation([lng, location[1]]);
+                      pushLocationUpdate();
+                    },
+                    step: "0.001",
+                    type: "number",
+                    value: location[0]
+                  }
+                )
+              ] }),
+              /* @__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)(
+                  "input",
+                  {
+                    className: "bg-slate-800 border border-slate-700 rounded px-2 py-1 text-white focus:outline-none focus:border-blue-500",
+                    onChange: (e) => {
+                      const lat = parseFloat(e.target.value) || 0;
+                      setLocation([location[0], lat]);
+                      pushLocationUpdate();
+                    },
+                    step: "0.001",
+                    type: "number",
+                    value: location[1]
+                  }
+                )
+              ] }),
+              /* @__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)(
+                  "input",
+                  {
+                    className: "w-full accent-blue-500",
+                    max: "360",
+                    min: "0",
+                    onChange: (e) => {
+                      setHeading(parseInt(e.target.value, 10));
+                      pushLocationUpdate();
+                    },
+                    type: "range",
+                    value: heading
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "text-right text-slate-400", children: [
+                  heading,
+                  "\xB0"
+                ] })
+              ] })
+            ] })
+          ] })
+        ]
+      }
+    )
+  ] });
+};
+
+// src/components/DebugConsole.tsx
+var import_react12 = require("react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var DebugConsole = ({
+  isOpen: initialOpen = false,
+  onClose
+}) => {
+  const [showConsole, setShowConsole] = (0, import_react12.useState)(initialOpen);
+  const [logs, setLogs] = (0, import_react12.useState)([]);
+  const scrollRef = (0, import_react12.useRef)(null);
+  (0, import_react12.useEffect)(() => {
+    setShowConsole(initialOpen);
+  }, [initialOpen]);
+  const clearLogs = () => setLogs([]);
+  const addLog = (0, import_react12.useCallback)((label, data) => {
+    if (label.includes("LOCATION_STREAM_UPDATE" /* LOCATION_STREAM_UPDATE */)) return;
+    const entry = {
+      content: typeof data === "string" ? data : JSON.stringify(data, null, 2),
+      id: Math.random().toString(36).slice(2),
+      label,
+      time: (/* @__PURE__ */ new Date()).toLocaleTimeString()
+    };
+    setLogs((prev) => [entry, ...prev].slice(0, 100));
+  }, []);
+  (0, import_react12.useEffect)(() => {
+    if (typeof window === "undefined") return;
+    const bridge = sdk.bridge;
+    const originalSend = bridge.send.bind(bridge);
+    bridge.send = async (type, payload) => {
+      addLog(`OUT: ${type}`, payload);
+      return originalSend(type, payload);
+    };
+    const originalHandle = bridge.handleNativeMessage.bind(bridge);
+    bridge.handleNativeMessage = (envelope) => {
+      const type = envelope.eventName || envelope.event || envelope.type || "MSG";
+      if (typeof type === "string") {
+        addLog(`IN: ${type}`, envelope.payload || envelope.value || envelope);
+        originalHandle(envelope);
+      }
+    };
+    return () => {
+      bridge.send = originalSend;
+      bridge.handleNativeMessage = originalHandle;
+    };
+  }, [addLog]);
+  if (!showConsole) {
+    return /* @__PURE__ */ (0, import_jsx_runtime13.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",
+        onClick: () => setShowConsole(true),
+        title: "Open Debug Console",
+        type: "button",
+        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+          "svg",
+          {
+            className: "group-hover:scale-110 transition-transform",
+            fill: "none",
+            height: "14",
+            stroke: "currentColor",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: "2",
+            viewBox: "0 0 24 24",
+            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" })
+            ]
+          }
+        )
+      }
+    );
+  }
+  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" }),
+        "UP SDK Debug Console"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex gap-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          "button",
+          {
+            className: "text-[10px] text-slate-500 font-bold uppercase hover:text-slate-300 transition-colors",
+            onClick: clearLogs,
+            type: "button",
+            children: "Clear"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          "button",
+          {
+            className: "text-[10px] text-pink-500 font-bold uppercase hover:underline transition-colors",
+            onClick: () => {
+              setShowConsole(false);
+              if (onClose) onClose();
+            },
+            type: "button",
+            children: "Close"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.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)(
+          "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_runtime13.jsx)("pre", { className: "whitespace-pre-wrap break-all opacity-90", children: log.content })
+            ]
+          },
+          log.id
+        ))
+      }
+    )
+  ] });
+};
+
+// src/components/SDKProvider.tsx
+var import_react13 = require("react");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var SDKContext = (0, import_react13.createContext)({ isMocked: false });
+var useIsMocked = () => (0, import_react13.useContext)(SDKContext).isMocked;
+var SDKProvider = ({
+  children,
+  debug = false,
+  ...mockerProps
+}) => {
+  const isMocked = typeof window !== "undefined" && !(window.__UP_REACT_NATIVE_APP__ === true || !!window.ReactNativeWebView);
+  const value = (0, import_react13.useMemo)(() => ({ isMocked }), [isMocked]);
+  const content = /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+    children,
+    debug && /* @__PURE__ */ (0, import_jsx_runtime14.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_runtime14.jsx)(SDKContext.Provider, { value, children: content });
+};
+
+// src/host/routingHandler.ts
+async function handleRouteRequest(req, config) {
+  return RoutingService.fetchRoute(req, config);
+}
+function handleDrawRoute(map, miniAppId, req) {
+  const sourceId = `sdk-route-${miniAppId}`;
+  const casingLayerId = `sdk-route-casing-${miniAppId}`;
+  const lineLayerId = `sdk-route-line-${miniAppId}`;
+  const geojson = {
+    features: [
+      {
+        geometry: req.payload.routeData.geometry,
+        properties: {},
+        type: "Feature"
+      }
+    ],
+    type: "FeatureCollection"
+  };
+  const source = map.getSource(sourceId);
+  if (source) {
+    source.setData(geojson);
+  } else {
+    map.addSource(sourceId, {
+      data: geojson,
+      type: "geojson"
+    });
+    map.addLayer({
+      id: casingLayerId,
+      layout: {
+        "line-cap": "round",
+        "line-join": "round"
+      },
+      paint: {
+        "line-color": "#111111",
+        "line-opacity": 0.8,
+        "line-width": 8
+      },
+      source: sourceId,
+      type: "line"
+    });
+    map.addLayer({
+      id: lineLayerId,
+      layout: {
+        "line-cap": "round",
+        "line-join": "round"
+      },
+      paint: {
+        "line-color": "#3b82f6",
+        // Bright blue
+        "line-width": 4
+      },
+      source: sourceId,
+      type: "line"
+    });
+  }
+}
+function handleClearRoute(map, miniAppId) {
+  const sourceId = `sdk-route-${miniAppId}`;
+  const casingLayerId = `sdk-route-casing-${miniAppId}`;
+  const lineLayerId = `sdk-route-line-${miniAppId}`;
+  if (map.getLayer(lineLayerId)) map.removeLayer(lineLayerId);
+  if (map.getLayer(casingLayerId)) map.removeLayer(casingLayerId);
+  if (map.getSource(sourceId)) map.removeSource(sourceId);
+}
+
+// src/index.ts
+var src_default = sdk;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BridgeMocker,
+  DebugConsole,
+  GeolocationEvent,
+  GlobalEvent,
+  Map,
+  MapControls,
+  MapControlsContext,
+  MapMenu,
+  MapMenuDivider,
+  MapMenuFooter,
+  MapMenuItem,
+  MapMenuTitle,
+  MiniAppSDK,
+  RouteLayer,
+  SDKMapProvider,
+  SDKProvider,
+  UIEvent,
+  handleClearRoute,
+  handleDrawRoute,
+  handleRouteRequest,
+  renderMap,
+  sdk,
+  useIsMocked,
+  useLiveRouting,
+  useMapControls,
+  useRoute,
+  useTrimmedRoute,
+  useUserLocation
+});
+//# sourceMappingURL=index.cjs.map