@ericchen1990/pano-view 3.7.0 → 3.8.0

package/dist/index.mjs

@@ -9011,7 +9011,7 @@ var PanoViewer = forwardRef2(
             contextMenuOverlay,
             hotspotAccessibilityControls
           ] }),
-          /* @__PURE__ */ jsx13(PanoModalHostContext.Provider, { value: modalHost, children: /* @__PURE__ */ jsx13(PanoOverlayContext.Provider, { value: overlayContext, children: /* @__PURE__ */ jsx13(
+          /* @__PURE__ */ jsx13(PanoEventBusContext.Provider, { value: eventBus, children: /* @__PURE__ */ jsx13(PanoModalHostContext.Provider, { value: modalHost, children: /* @__PURE__ */ jsx13(PanoOverlayContext.Provider, { value: overlayContext, children: /* @__PURE__ */ jsx13(
             "div",
             {
               "data-pano-overlay": "",
@@ -9019,7 +9019,7 @@ var PanoViewer = forwardRef2(
               style: { position: "absolute", inset: 0, zIndex: 30, pointerEvents: "none" },
               children: renderOverlay?.(overlayContext)
             }
-          ) }) })
+          ) }) }) })
         ]
       }
     );
@@ -19240,6 +19240,976 @@ function PanoVideo({
     captionsEnabled ? /* @__PURE__ */ jsx41(PanoVideoCaptions, { appearance: typeof captions === "object" ? captions : void 0 }) : null
   ] });
 }
+
+// src/map/pano-map.tsx
+import {
+  useCallback as useCallback12,
+  useEffect as useEffect43,
+  useId as useId3,
+  useLayoutEffect as useLayoutEffect10,
+  useMemo as useMemo29,
+  useRef as useRef43,
+  useState as useState27
+} from "react";
+
+// src/map/geometry.ts
+function sectorRotation(heading, yaw) {
+  return heading + yaw;
+}
+function horizontalFov(verticalFov, aspect) {
+  if (!(aspect > 0) || !(verticalFov > 0) || verticalFov >= 180) return verticalFov;
+  const verticalRad = verticalFov * Math.PI / 180;
+  const horizontalRad = 2 * Math.atan(Math.tan(verticalRad / 2) * aspect);
+  return horizontalRad * 180 / Math.PI;
+}
+function containRect(containerWidth, containerHeight, imageWidth, imageHeight) {
+  if (!(containerWidth > 0) || !(containerHeight > 0) || !(imageWidth > 0) || !(imageHeight > 0)) {
+    return { left: 0, top: 0, width: 0, height: 0 };
+  }
+  const scale = Math.min(
+    containerWidth / imageWidth,
+    containerHeight / imageHeight
+  );
+  const width = imageWidth * scale;
+  const height = imageHeight * scale;
+  return {
+    left: (containerWidth - width) / 2,
+    top: (containerHeight - height) / 2,
+    width,
+    height
+  };
+}
+function imagePointToContainer(point, viewport) {
+  const { fit, scale, panX, panY } = viewport;
+  return {
+    x: fit.left + panX + point.x * fit.width * scale,
+    y: fit.top + panY + point.y * fit.height * scale
+  };
+}
+function containerPointToImage(point, viewport) {
+  const { fit, scale, panX, panY } = viewport;
+  const width = fit.width * scale;
+  const height = fit.height * scale;
+  if (!(width > 0) || !(height > 0)) return null;
+  return {
+    x: (point.x - fit.left - panX) / width,
+    y: (point.y - fit.top - panY) / height
+  };
+}
+function clamp012(value) {
+  return Math.min(1, Math.max(0, value));
+}
+function headingFromVector(dx, dy) {
+  if (dx === 0 && dy === 0) return 0;
+  const radians = Math.atan2(dx, -dy);
+  return radians * 180 / Math.PI;
+}
+function normalizeDegrees(value) {
+  const wrapped = (value % 360 + 360) % 360;
+  return wrapped > 180 ? wrapped - 360 : wrapped;
+}
+
+// src/map/use-map-view.ts
+import { useContext as useContext29, useEffect as useEffect42, useRef as useRef42, useState as useState26 } from "react";
+var DEFAULT_VIEW2 = { yaw: 0, pitch: 0, fov: 75 };
+function useMapView(controlled) {
+  const eventBus = useContext29(PanoEventBusContext);
+  const [view, setView] = useState26(controlled ?? DEFAULT_VIEW2);
+  const controlledRef = useRef42(controlled);
+  controlledRef.current = controlled;
+  useEffect42(() => {
+    if (controlled !== void 0) {
+      setView(controlled);
+      return;
+    }
+    if (!eventBus) return;
+    return eventBus.subscribe("viewchange", (next) => {
+      if (controlledRef.current !== void 0) return;
+      setView(next);
+    });
+  }, [controlled, eventBus]);
+  return controlled ?? view;
+}
+
+// src/map/pano-map.tsx
+import { Fragment as Fragment8, jsx as jsx42, jsxs as jsxs23 } from "react/jsx-runtime";
+var DEFAULT_ICON_SIZE2 = 28;
+var DEFAULT_SECTOR_COLOR = "#ffffff";
+var DEFAULT_SECTOR_OPACITY = 0.55;
+var MIN_SCALE = 1;
+var DEFAULT_MAX_SCALE = 8;
+var ZOOM_STEP = 1.25;
+function defaultGradientId(prefix) {
+  return `${prefix}-sector-gradient`;
+}
+function SectorShape({
+  sector,
+  angle,
+  rotation,
+  gradientId,
+  interactive,
+  onHeadingPointerDown,
+  transformRef
+}) {
+  const half = angle / 2;
+  const start = (-half - 90) * Math.PI / 180;
+  const end = (half - 90) * Math.PI / 180;
+  const radius = sector.radius;
+  const largeArc = angle > 180 ? 1 : 0;
+  const x1 = Math.cos(start) * radius;
+  const y1 = Math.sin(start) * radius;
+  const x2 = Math.cos(end) * radius;
+  const y2 = Math.sin(end) * radius;
+  const path = `M 0 0 L ${x1} ${y1} A ${radius} ${radius} 0 ${largeArc} 1 ${x2} ${y2} Z`;
+  const opacity = sector.opacity ?? DEFAULT_SECTOR_OPACITY;
+  const color = sector.color ?? DEFAULT_SECTOR_COLOR;
+  const gradient = sector.gradient;
+  const strokeWidth = sector.strokeWidth ?? 0;
+  const strokeColor = sector.strokeColor ?? color;
+  const strokeOpacity = sector.strokeOpacity ?? 1;
+  const gradientStrength = gradient && gradient.stops.length > 0 ? Math.max(
+    ...gradient.stops.map((stop) => stop.opacity ?? 1),
+    Number.EPSILON
+  ) : 1;
+  return /* @__PURE__ */ jsxs23("g", { ref: transformRef, transform: `rotate(${rotation})`, style: { pointerEvents: "none" }, children: [
+    gradient ? /* @__PURE__ */ jsx42("defs", { children: gradient.type === "radial" ? /* @__PURE__ */ jsx42("radialGradient", { id: gradientId, cx: "0", cy: "0", r: radius, gradientUnits: "userSpaceOnUse", children: gradient.stops.map((stop, index) => /* @__PURE__ */ jsx42(
+      "stop",
+      {
+        offset: `${stop.offset * 100}%`,
+        stopColor: stop.color,
+        stopOpacity: (stop.opacity ?? 1) / gradientStrength
+      },
+      `${stop.offset}:${index}`
+    )) }) : /* @__PURE__ */ jsx42(
+      "linearGradient",
+      {
+        id: gradientId,
+        x1: "0",
+        y1: "0",
+        x2: "0",
+        y2: -radius,
+        gradientUnits: "userSpaceOnUse",
+        children: gradient.stops.map((stop, index) => /* @__PURE__ */ jsx42(
+          "stop",
+          {
+            offset: `${stop.offset * 100}%`,
+            stopColor: stop.color,
+            stopOpacity: (stop.opacity ?? 1) / gradientStrength
+          },
+          `${stop.offset}:${index}`
+        ))
+      }
+    ) }) : null,
+    /* @__PURE__ */ jsx42(
+      "path",
+      {
+        d: path,
+        fill: gradient ? `url(#${gradientId})` : color,
+        fillOpacity: opacity,
+        stroke: strokeWidth > 0 ? strokeColor : "none",
+        strokeWidth: strokeWidth > 0 ? strokeWidth : void 0,
+        strokeOpacity: strokeWidth > 0 ? strokeOpacity : void 0,
+        vectorEffect: "non-scaling-stroke",
+        style: {
+          pointerEvents: interactive ? "auto" : "none",
+          cursor: interactive ? "grab" : void 0
+        },
+        onPointerDown: interactive ? onHeadingPointerDown : void 0
+      }
+    )
+  ] });
+}
+function DefaultSpotIcon({ active, size }) {
+  return /* @__PURE__ */ jsxs23(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 32 32",
+      "aria-hidden": "true",
+      style: { display: "block" },
+      children: [
+        /* @__PURE__ */ jsx42(
+          "rect",
+          {
+            x: "3",
+            y: "7",
+            width: "26",
+            height: "18",
+            rx: "5",
+            fill: active ? "rgba(15,23,42,0.92)" : "rgba(15,23,42,0.72)",
+            stroke: "rgba(255,255,255,0.92)",
+            strokeWidth: "2"
+          }
+        ),
+        /* @__PURE__ */ jsx42("circle", { cx: "16", cy: "16", r: "5", fill: "none", stroke: "rgba(255,255,255,0.92)", strokeWidth: "2" }),
+        /* @__PURE__ */ jsx42("circle", { cx: "16", cy: "16", r: "2", fill: active ? "#ef4444" : "rgba(255,255,255,0.85)" })
+      ]
+    }
+  );
+}
+function PanoMap({
+  map,
+  activeSceneId,
+  onSelectScene,
+  view: controlledView,
+  mode = "view",
+  selectedSpotId = null,
+  onSelectedSpotIdChange,
+  onEditChange,
+  placementSceneId,
+  className,
+  style,
+  showZoomControls,
+  showCollapseControl,
+  collapsed: controlledCollapsed,
+  onCollapsedChange,
+  renderChrome
+}) {
+  const reactId = useId3().replace(/:/g, "");
+  const view = useMapView(controlledView);
+  const rootRef = useRef43(null);
+  const containerRef = useRef43(null);
+  const sectorNodeRef = useRef43(null);
+  const yawRef = useRef43(view.yaw);
+  const [size, setSize] = useState27({ width: 0, height: 0 });
+  const [imageSize2, setImageSize] = useState27({ width: 0, height: 0 });
+  const [scale, setScale] = useState27(1);
+  const [pan, setPan] = useState27({ x: 0, y: 0 });
+  const [uncontrolledCollapsed, setUncontrolledCollapsed] = useState27(false);
+  const dragRef = useRef43(null);
+  const spots = map.spots;
+  const iconSize = map.iconSize ?? DEFAULT_ICON_SIZE2;
+  const interaction = map.interaction ?? "fixed";
+  const gestureZoom = interaction === "zoom";
+  const maxScale = Math.max(MIN_SCALE, map.maxScale ?? DEFAULT_MAX_SCALE);
+  const zoomControls = gestureZoom && (showZoomControls ?? map.controls?.zoom === true);
+  const collapseControl = showCollapseControl ?? map.controls?.collapse === true;
+  const collapsed = controlledCollapsed ?? uncontrolledCollapsed;
+  const editing = mode === "edit";
+  const fit = useMemo29(
+    () => containRect(size.width, size.height, imageSize2.width, imageSize2.height),
+    [size, imageSize2]
+  );
+  const viewport = useMemo29(
+    () => ({ fit, scale, panX: pan.x, panY: pan.y }),
+    [fit, scale, pan]
+  );
+  useLayoutEffect10(() => {
+    if (collapsed) return;
+    const node = containerRef.current;
+    if (!node) return;
+    const measure = () => {
+      const width = node.clientWidth;
+      const height = node.clientHeight;
+      if (!(width > 0) || !(height > 0)) return;
+      setSize(
+        (previous) => previous.width === width && previous.height === height ? previous : { width, height }
+      );
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [collapsed]);
+  useEffect43(() => {
+    yawRef.current = view.yaw;
+    const node = sectorNodeRef.current;
+    if (!node) return;
+    const active = spots.find((spot) => spot.sceneId === activeSceneId);
+    if (!active || !map.sector) return;
+    node.setAttribute(
+      "transform",
+      `rotate(${sectorRotation(active.heading, view.yaw)})`
+    );
+  }, [view.yaw, activeSceneId, spots, map.sector]);
+  const setCollapsed = (next) => {
+    onCollapsedChange?.(next);
+    if (controlledCollapsed === void 0) setUncontrolledCollapsed(next);
+  };
+  const clampPan = useCallback12(
+    (nextScale, nextPan) => {
+      const width = fit.width * nextScale;
+      const height = fit.height * nextScale;
+      if (!(fit.width > 0) || !(fit.height > 0)) return nextPan;
+      const minX = Math.min(0, size.width - (fit.left + width));
+      const maxX = Math.max(0, -fit.left);
+      const minY = Math.min(0, size.height - (fit.top + height));
+      const maxY = Math.max(0, -fit.top);
+      return {
+        x: Math.min(maxX, Math.max(minX, nextPan.x)),
+        y: Math.min(maxY, Math.max(minY, nextPan.y))
+      };
+    },
+    [fit, size]
+  );
+  useEffect43(() => {
+    if (!gestureZoom) {
+      setScale(1);
+      setPan({ x: 0, y: 0 });
+      return;
+    }
+    setScale((previous) => {
+      const next = Math.min(previous, maxScale);
+      if (next !== previous) {
+        setPan((currentPan) => clampPan(next, currentPan));
+      }
+      return next;
+    });
+  }, [clampPan, gestureZoom, maxScale]);
+  const applyZoom = useCallback12(
+    (nextScale, origin) => {
+      if (!gestureZoom) return;
+      const clamped = Math.min(maxScale, Math.max(MIN_SCALE, nextScale));
+      const pivot = origin ?? { x: size.width / 2, y: size.height / 2 };
+      const ratio = clamped / scale;
+      const nextPan = {
+        x: pivot.x - (pivot.x - (fit.left + pan.x)) * ratio - fit.left,
+        y: pivot.y - (pivot.y - (fit.top + pan.y)) * ratio - fit.top
+      };
+      setScale(clamped);
+      setPan(clampPan(clamped, nextPan));
+    },
+    [
+      clampPan,
+      fit.left,
+      fit.top,
+      gestureZoom,
+      maxScale,
+      pan.x,
+      pan.y,
+      scale,
+      size.height,
+      size.width
+    ]
+  );
+  useEffect43(() => {
+    const root = rootRef.current;
+    if (!root) return;
+    const onWheel = (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      if (!gestureZoom || collapsed) return;
+      const viewport2 = containerRef.current;
+      if (!viewport2) return;
+      const rect = viewport2.getBoundingClientRect();
+      const factor = event.deltaY < 0 ? ZOOM_STEP : 1 / ZOOM_STEP;
+      applyZoom(scale * factor, {
+        x: event.clientX - rect.left,
+        y: event.clientY - rect.top
+      });
+    };
+    root.addEventListener("wheel", onWheel, { passive: false });
+    return () => root.removeEventListener("wheel", onWheel);
+  }, [applyZoom, collapsed, gestureZoom, scale]);
+  const updateSpots = (next, selected) => {
+    onEditChange?.({
+      spots: next,
+      ...selected === void 0 ? {} : { selectedSpotId: selected }
+    });
+  };
+  const localPoint = (event) => {
+    const rect = containerRef.current?.getBoundingClientRect();
+    if (!rect) return null;
+    return { x: event.clientX - rect.left, y: event.clientY - rect.top };
+  };
+  const onPointerDownSurface = (event) => {
+    if (collapsed) return;
+    if (event.button !== 0) return;
+    const point = localPoint(event);
+    if (!point) return;
+    if (editing && placementSceneId) {
+      const image = containerPointToImage(point, viewport);
+      if (!image) return;
+      const spot = {
+        id: crypto.randomUUID(),
+        sceneId: placementSceneId,
+        x: clamp012(image.x),
+        y: clamp012(image.y),
+        heading: normalizeDegrees(-view.yaw)
+      };
+      updateSpots([...spots, spot], spot.id);
+      onSelectedSpotIdChange?.(spot.id);
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
+    if (gestureZoom && scale > 1) {
+      dragRef.current = {
+        kind: "pan",
+        pointerId: event.pointerId,
+        originX: point.x,
+        originY: point.y,
+        panX: pan.x,
+        panY: pan.y
+      };
+      event.currentTarget.setPointerCapture(event.pointerId);
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  };
+  const onPointerMoveSurface = (event) => {
+    const drag = dragRef.current;
+    if (!drag || drag.pointerId !== event.pointerId) return;
+    const point = localPoint(event);
+    if (!point) return;
+    if (drag.kind === "pan") {
+      setPan(
+        clampPan(scale, {
+          x: drag.panX + (point.x - drag.originX),
+          y: drag.panY + (point.y - drag.originY)
+        })
+      );
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
+    if (drag.kind === "spot") {
+      const image = containerPointToImage(
+        { x: point.x - drag.offsetX, y: point.y - drag.offsetY },
+        viewport
+      );
+      if (!image) return;
+      updateSpots(
+        spots.map(
+          (spot2) => spot2.id === drag.spotId ? { ...spot2, x: clamp012(image.x), y: clamp012(image.y) } : spot2
+        )
+      );
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
+    const spot = spots.find((entry) => entry.id === drag.spotId);
+    if (!spot) return;
+    const center = imagePointToContainer(spot, viewport);
+    const heading = normalizeDegrees(
+      headingFromVector(point.x - center.x, point.y - center.y) - view.yaw
+    );
+    updateSpots(
+      spots.map(
+        (entry) => entry.id === drag.spotId ? { ...entry, heading } : entry
+      )
+    );
+    if (sectorNodeRef.current && spot.sceneId === activeSceneId) {
+      sectorNodeRef.current.setAttribute(
+        "transform",
+        `rotate(${sectorRotation(heading, view.yaw)})`
+      );
+    }
+    event.preventDefault();
+    event.stopPropagation();
+  };
+  const endDrag = (event) => {
+    if (dragRef.current?.pointerId !== event.pointerId) return;
+    dragRef.current = null;
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    }
+  };
+  const sectorAngle = (() => {
+    if (!map.sector) return 0;
+    if (!map.sector.followFov) return map.sector.angle;
+    const aspect = size.width > 0 && size.height > 0 ? size.width / size.height : 1;
+    return horizontalFov(view.fov, aspect);
+  })();
+  const activeSpot = spots.find((spot) => spot.sceneId === activeSceneId);
+  const selectedSpot = spots.find((spot) => spot.id === selectedSpotId);
+  const controls = /* @__PURE__ */ jsxs23("div", { className: "pano-map-controls", style: { pointerEvents: "auto" }, children: [
+    collapseControl ? /* @__PURE__ */ jsx42(
+      "button",
+      {
+        type: "button",
+        className: "pano-map-control",
+        "aria-label": collapsed ? "Expand map" : "Collapse map",
+        "aria-pressed": !collapsed,
+        style: {
+          background: "rgba(15, 23, 42, 0.92)",
+          border: "1px solid rgba(255, 255, 255, 0.28)",
+          color: "#f8fafc"
+        },
+        onClick: () => setCollapsed(!collapsed),
+        children: collapsed ? "\u25A3" : "\u25A2"
+      }
+    ) : null,
+    zoomControls && !collapsed ? /* @__PURE__ */ jsxs23(Fragment8, { children: [
+      /* @__PURE__ */ jsx42(
+        "button",
+        {
+          type: "button",
+          className: "pano-map-control",
+          "aria-label": "Zoom in",
+          style: {
+            background: "rgba(15, 23, 42, 0.92)",
+            border: "1px solid rgba(255, 255, 255, 0.28)",
+            color: "#f8fafc"
+          },
+          onClick: () => applyZoom(scale * ZOOM_STEP),
+          children: "+"
+        }
+      ),
+      /* @__PURE__ */ jsx42(
+        "button",
+        {
+          type: "button",
+          className: "pano-map-control",
+          "aria-label": "Zoom out",
+          style: {
+            background: "rgba(15, 23, 42, 0.92)",
+            border: "1px solid rgba(255, 255, 255, 0.28)",
+            color: "#f8fafc"
+          },
+          onClick: () => applyZoom(scale / ZOOM_STEP),
+          children: "\u2212"
+        }
+      )
+    ] }) : null
+  ] });
+  const syncImageSize = (image) => {
+    if (!(image.naturalWidth > 0) || !(image.naturalHeight > 0)) return;
+    setImageSize(
+      (previous) => previous.width === image.naturalWidth && previous.height === image.naturalHeight ? previous : { width: image.naturalWidth, height: image.naturalHeight }
+    );
+  };
+  return /* @__PURE__ */ jsxs23(
+    "div",
+    {
+      ref: rootRef,
+      className: ["pano-map", collapsed ? "pano-map-collapsed" : "", className].filter(Boolean).join(" "),
+      style: {
+        position: "relative",
+        overflow: "hidden",
+        width: "100%",
+        height: "100%",
+        pointerEvents: "auto",
+        touchAction: gestureZoom && !collapsed ? "none" : "auto",
+        ...style
+      },
+      "data-pano-map": "",
+      "data-mode": mode,
+      "data-collapsed": collapsed ? "true" : void 0,
+      children: [
+        renderChrome ? renderChrome(controls) : /* @__PURE__ */ jsx42("div", { className: "pano-map-chrome", children: controls }),
+        /* @__PURE__ */ jsxs23(
+          "div",
+          {
+            ref: containerRef,
+            className: "pano-map-viewport",
+            hidden: collapsed,
+            style: {
+              position: "absolute",
+              inset: 0,
+              overflow: "hidden",
+              visibility: collapsed ? "hidden" : "visible"
+            },
+            onPointerDown: onPointerDownSurface,
+            onPointerMove: onPointerMoveSurface,
+            onPointerUp: endDrag,
+            onPointerCancel: endDrag,
+            children: [
+              fit.width > 0 && fit.height > 0 ? /* @__PURE__ */ jsx42(
+                "div",
+                {
+                  className: "pano-map-image-layer",
+                  style: {
+                    position: "absolute",
+                    left: fit.left + pan.x,
+                    top: fit.top + pan.y,
+                    width: fit.width * scale,
+                    height: fit.height * scale,
+                    transformOrigin: "0 0"
+                  },
+                  children: /* @__PURE__ */ jsx42(
+                    "img",
+                    {
+                      src: map.image,
+                      alt: "",
+                      draggable: false,
+                      ref: (node) => {
+                        if (node) syncImageSize(node);
+                      },
+                      onLoad: (event) => {
+                        syncImageSize(event.currentTarget);
+                      },
+                      style: {
+                        width: "100%",
+                        height: "100%",
+                        display: "block",
+                        userSelect: "none",
+                        pointerEvents: "none"
+                      }
+                    }
+                  )
+                }
+              ) : /* @__PURE__ */ jsx42(
+                "img",
+                {
+                  src: map.image,
+                  alt: "",
+                  hidden: true,
+                  ref: (node) => {
+                    if (node) syncImageSize(node);
+                  },
+                  onLoad: (event) => {
+                    syncImageSize(event.currentTarget);
+                  }
+                }
+              ),
+              activeSpot && map.sector ? /* @__PURE__ */ jsx42(
+                "svg",
+                {
+                  className: "pano-map-sector-layer",
+                  width: size.width,
+                  height: size.height,
+                  style: {
+                    position: "absolute",
+                    inset: 0,
+                    overflow: "visible",
+                    pointerEvents: "none"
+                  },
+                  children: /* @__PURE__ */ jsx42(
+                    "g",
+                    {
+                      transform: `translate(${imagePointToContainer(activeSpot, viewport).x} ${imagePointToContainer(activeSpot, viewport).y})`,
+                      children: /* @__PURE__ */ jsx42(
+                        SectorShape,
+                        {
+                          sector: map.sector,
+                          angle: sectorAngle,
+                          rotation: sectorRotation(activeSpot.heading, view.yaw),
+                          gradientId: defaultGradientId(reactId),
+                          interactive: editing,
+                          onHeadingPointerDown: (event) => {
+                            event.stopPropagation();
+                            if (event.button !== 0) return;
+                            onSelectedSpotIdChange?.(activeSpot.id);
+                            dragRef.current = {
+                              kind: "heading",
+                              pointerId: event.pointerId,
+                              spotId: activeSpot.id
+                            };
+                            event.currentTarget.setPointerCapture(event.pointerId);
+                          },
+                          transformRef: (node) => {
+                            sectorNodeRef.current = node;
+                          }
+                        }
+                      )
+                    }
+                  )
+                }
+              ) : null,
+              spots.map((spot) => {
+                const point = imagePointToContainer(spot, viewport);
+                const active = spot.sceneId === activeSceneId;
+                const selected = spot.id === selectedSpotId;
+                return /* @__PURE__ */ jsx42(
+                  "button",
+                  {
+                    type: "button",
+                    className: "pano-map-spot",
+                    "aria-label": spot.sceneId,
+                    "aria-current": active ? "true" : void 0,
+                    "data-active": active ? "true" : void 0,
+                    "data-selected": selected ? "true" : void 0,
+                    style: {
+                      position: "absolute",
+                      left: point.x,
+                      top: point.y,
+                      width: iconSize,
+                      height: iconSize,
+                      transform: "translate(-50%, -50%)",
+                      padding: 0,
+                      border: selected ? "2px solid #38bdf8" : "0",
+                      borderRadius: 8,
+                      background: "transparent",
+                      cursor: editing ? "grab" : "pointer",
+                      pointerEvents: "auto"
+                    },
+                    onPointerDown: (event) => {
+                      event.stopPropagation();
+                      if (event.button !== 0) return;
+                      onSelectedSpotIdChange?.(spot.id);
+                      if (!editing) return;
+                      const pointLocal = localPoint(event);
+                      if (!pointLocal) return;
+                      const center = imagePointToContainer(spot, viewport);
+                      dragRef.current = {
+                        kind: "spot",
+                        pointerId: event.pointerId,
+                        spotId: spot.id,
+                        offsetX: pointLocal.x - center.x,
+                        offsetY: pointLocal.y - center.y
+                      };
+                      event.currentTarget.setPointerCapture(event.pointerId);
+                    },
+                    onClick: (event) => {
+                      event.stopPropagation();
+                      if (editing) return;
+                      onSelectScene?.(spot.sceneId, spot);
+                    },
+                    children: spot.icon ? /* @__PURE__ */ jsx42(
+                      "img",
+                      {
+                        src: spot.icon,
+                        alt: "",
+                        draggable: false,
+                        style: { width: "100%", height: "100%", display: "block", pointerEvents: "none" }
+                      }
+                    ) : /* @__PURE__ */ jsx42(DefaultSpotIcon, { active, size: iconSize })
+                  },
+                  spot.id
+                );
+              })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/map/pano-map-overlay.tsx
+import {
+  useEffect as useEffect44,
+  useId as useId4,
+  useMemo as useMemo30,
+  useRef as useRef44,
+  useState as useState28
+} from "react";
+import { Fragment as Fragment9, jsx as jsx43, jsxs as jsxs24 } from "react/jsx-runtime";
+function dockedBox(corner, offsetX, offsetY, width, height) {
+  const horizontal = corner === "top-right" || corner === "bottom-right" ? { left: "auto", right: offsetX } : { left: offsetX, right: "auto" };
+  const vertical = corner === "bottom-left" || corner === "bottom-right" ? { top: "auto", bottom: offsetY } : { top: offsetY, bottom: "auto" };
+  return { ...horizontal, ...vertical, width, height };
+}
+function PanoMapDialogShell({
+  open,
+  onOpenChange,
+  title,
+  closeLabel,
+  children
+}) {
+  usePanoModal(open);
+  const { size } = usePanoOverlay();
+  const titleId = useId4();
+  const panelRef = useRef44(null);
+  const previouslyFocused = useRef44(null);
+  useEffect44(() => {
+    if (!open) return;
+    const active = panelRef.current?.ownerDocument.activeElement;
+    previouslyFocused.current = active instanceof HTMLElement ? active : null;
+    const close = panelRef.current?.querySelector("[data-pano-map-dialog-close]");
+    close?.focus({ preventScroll: true });
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        event.stopPropagation();
+        onOpenChange(false);
+      }
+    };
+    const doc = panelRef.current?.ownerDocument;
+    doc?.addEventListener("keydown", onKeyDown, true);
+    return () => {
+      doc?.removeEventListener("keydown", onKeyDown, true);
+      const previous = previouslyFocused.current;
+      if (previous?.isConnected) previous.focus({ preventScroll: true });
+    };
+  }, [open, onOpenChange]);
+  if (!open) return null;
+  const width = Math.min(720, Math.max(0, size.width - 32));
+  const height = Math.min(520, Math.max(0, size.height - 32));
+  const left = Math.max(0, (size.width - width) / 2);
+  const top = Math.max(0, (size.height - height) / 2);
+  return /* @__PURE__ */ jsxs24(Fragment9, { children: [
+    /* @__PURE__ */ jsx43(
+      "div",
+      {
+        className: "pano-map-dialog-backdrop",
+        "aria-hidden": "true",
+        style: {
+          position: "absolute",
+          inset: 0,
+          pointerEvents: "auto"
+        },
+        onClick: () => onOpenChange(false)
+      }
+    ),
+    /* @__PURE__ */ jsxs24(
+      "div",
+      {
+        ref: panelRef,
+        className: "pano-map-dialog",
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": titleId,
+        "data-pano-map-dialog": "",
+        style: {
+          position: "absolute",
+          left,
+          top,
+          width,
+          height,
+          boxSizing: "border-box",
+          display: "flex",
+          flexDirection: "column",
+          overflow: "hidden",
+          pointerEvents: "auto",
+          zIndex: 1
+        },
+        children: [
+          /* @__PURE__ */ jsxs24("header", { className: "pano-map-dialog-header", style: { flexShrink: 0 }, children: [
+            /* @__PURE__ */ jsx43("h2", { id: titleId, className: "pano-map-dialog-title", children: title }),
+            /* @__PURE__ */ jsx43(
+              "button",
+              {
+                type: "button",
+                className: "pano-map-dialog-close",
+                "data-pano-map-dialog-close": "",
+                "aria-label": closeLabel,
+                onClick: () => onOpenChange(false),
+                children: /* @__PURE__ */ jsx43("svg", { "aria-hidden": "true", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: /* @__PURE__ */ jsx43("path", { d: "m4 4 8 8M12 4l-8 8" }) })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx43("div", { className: "pano-map-dialog-body", style: { minHeight: 0, flex: 1 }, children })
+        ]
+      }
+    )
+  ] });
+}
+function PanoMapOverlay({
+  map,
+  activeSceneId,
+  onSelectScene,
+  view,
+  mode = "view",
+  selectedSpotId,
+  onSelectedSpotIdChange,
+  onEditChange,
+  placementSceneId,
+  presentationOverride,
+  openLabel = "Map",
+  closeLabel = "Close",
+  title = "Map",
+  className,
+  style,
+  editorSurface = false
+}) {
+  const { size } = usePanoOverlay();
+  const [open, setOpen] = useState28(false);
+  const [collapsed, setCollapsed] = useState28(false);
+  const presentation = presentationOverride ?? map.presentation ?? {
+    mode: "docked",
+    corner: "bottom-left",
+    width: 220,
+    height: 160,
+    offsetX: 16,
+    offsetY: 16
+  };
+  const corner = presentation.corner ?? "bottom-left";
+  const offsetX = presentation.offsetX ?? 16;
+  const offsetY = presentation.offsetY ?? 16;
+  const width = presentation.width ?? (presentation.mode === "dialog" ? 48 : 220);
+  const height = presentation.height ?? (presentation.mode === "dialog" ? 48 : 160);
+  const mapProps = {
+    map,
+    activeSceneId,
+    view,
+    mode,
+    selectedSpotId,
+    onSelectedSpotIdChange,
+    onEditChange,
+    placementSceneId,
+    onSelectScene: (sceneId, spot) => {
+      onSelectScene?.(sceneId, spot);
+      if (presentation.mode === "dialog") setOpen(false);
+    }
+  };
+  const editorBox = useMemo30(() => {
+    const panelWidth2 = Math.min(420, Math.max(240, size.width * 0.45));
+    const panelHeight2 = Math.min(320, Math.max(180, size.height * 0.45));
+    return {
+      left: 16,
+      right: "auto",
+      top: "auto",
+      bottom: 16,
+      width: panelWidth2,
+      height: panelHeight2
+    };
+  }, [size.height, size.width]);
+  if (editorSurface) {
+    return /* @__PURE__ */ jsx43(
+      "div",
+      {
+        className: ["pano-map-overlay", "pano-map-overlay-editor", className].filter(Boolean).join(" "),
+        style: {
+          position: "absolute",
+          pointerEvents: "auto",
+          ...editorBox,
+          ...style
+        },
+        "data-pano-map-overlay": "",
+        children: /* @__PURE__ */ jsx43(PanoMap, { ...mapProps, showCollapseControl: false })
+      }
+    );
+  }
+  if (presentation.mode === "dialog") {
+    const launcherBox = dockedBox(corner, offsetX, offsetY, width, height);
+    return /* @__PURE__ */ jsxs24("div", { className: ["pano-map-overlay", className].filter(Boolean).join(" "), "data-pano-map-overlay": "", children: [
+      /* @__PURE__ */ jsx43(
+        "button",
+        {
+          type: "button",
+          className: "pano-map-launcher",
+          "aria-label": openLabel,
+          style: {
+            position: "absolute",
+            pointerEvents: "auto",
+            ...launcherBox,
+            ...style
+          },
+          onClick: () => setOpen(true),
+          children: openLabel
+        }
+      ),
+      /* @__PURE__ */ jsx43(
+        PanoMapDialogShell,
+        {
+          open,
+          onOpenChange: setOpen,
+          title,
+          closeLabel,
+          children: /* @__PURE__ */ jsx43("div", { style: { height: "100%" }, children: /* @__PURE__ */ jsx43(PanoMap, { ...mapProps, showCollapseControl: false }) })
+        }
+      )
+    ] });
+  }
+  const panelWidth = collapsed ? Math.max(44, Math.min(width, 56)) : width;
+  const panelHeight = collapsed ? Math.max(44, Math.min(height, 56)) : height;
+  const box = dockedBox(corner, offsetX, offsetY, panelWidth, panelHeight);
+  return /* @__PURE__ */ jsx43(
+    "div",
+    {
+      className: ["pano-map-overlay", className].filter(Boolean).join(" "),
+      style: {
+        position: "absolute",
+        pointerEvents: "auto",
+        ...box,
+        ...style
+      },
+      "data-pano-map-overlay": "",
+      "data-presentation": "docked",
+      children: /* @__PURE__ */ jsx43(
+        PanoMap,
+        {
+          ...mapProps,
+          collapsed,
+          onCollapsedChange: setCollapsed
+        }
+      )
+    }
+  );
+}
 export {
   AudioHotspot,
   AutoRotate,
@@ -19264,6 +20234,8 @@ export {
   PanoContextMenu,
   PanoEvents,
   PanoFilter,
+  PanoMap,
+  PanoMapOverlay,
   PanoOverlayPortalProvider,
   PanoVideo,
   PanoVideoControls,
@@ -19284,13 +20256,19 @@ export {
   WebVR,
   clampPanoPitch,
   composePanoContextMenuItems,
+  containRect,
+  containerPointToImage,
   createDefaultPanoContextMenuItems,
   createPanoContextMenuPresets,
   cycleSceneId,
+  headingFromVector,
+  horizontalFov,
+  imagePointToContainer,
   normalizePanoPosition,
   normalizePanoYaw,
   panoPositionToVector3,
   resolvePanoContextMenuEntries,
+  sectorRotation,
   unwrapPolygonVertices,
   usePanoEvents,
   usePanoModal,