@ericchen1990/pano-view 3.7.0 → 3.9.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)
             }
-          ) }) })
+          ) }) }) })
         ]
       }
     );
@@ -18410,189 +18410,1097 @@ var WebVR = forwardRef4(function WebVR2({
   ] });
 });
 
-// src/use-pano-viewer.ts
-import { useMemo as useMemo27, useRef as useRef40 } from "react";
-function createPanoViewerHandle(ref) {
-  return {
-    getView: () => ref.current?.getView() ?? { yaw: 0, pitch: 0, fov: 75 },
-    setView: (view, options) => {
-      ref.current?.setView(view, options);
-    },
-    reset: () => {
-      ref.current?.reset();
-    },
-    lookTo: (position, options) => ref.current?.lookTo(position, options) ?? Promise.resolve({ status: "cancelled" }),
-    moveTo: (position, options) => ref.current?.moveTo(position, options) ?? Promise.resolve({ status: "cancelled" }),
-    zoomTo: (fov, options) => ref.current?.zoomTo(fov, options) ?? Promise.resolve({ status: "cancelled" }),
-    lookToHotspot: (id, options) => ref.current?.lookToHotspot(id, options) ?? Promise.resolve({ status: "not-found" }),
-    activateMedia: () => ref.current?.activateMedia() ?? Promise.resolve(),
-    enterFullscreen: () => ref.current?.enterFullscreen() ?? Promise.resolve(),
-    exitFullscreen: () => ref.current?.exitFullscreen() ?? Promise.resolve(),
-    toggleFullscreen: () => ref.current?.toggleFullscreen() ?? Promise.resolve(),
-    isFullscreen: () => ref.current?.isFullscreen() ?? false,
-    setScene: (id) => ref.current?.setScene(id) ?? false,
-    nextScene: () => ref.current?.nextScene() ?? false,
-    previousScene: () => ref.current?.previousScene() ?? false,
-    getActiveSceneId: () => ref.current?.getActiveSceneId() ?? null,
-    getSceneIds: () => ref.current?.getSceneIds() ?? [],
-    isSceneTransitioning: () => ref.current?.isSceneTransitioning() ?? false,
-    enterVR: () => ref.current?.enterVR() ?? Promise.resolve(false),
-    exitVR: () => ref.current?.exitVR() ?? Promise.resolve(),
-    toggleVR: () => ref.current?.toggleVR() ?? Promise.resolve(false),
-    isVRAvailable: () => ref.current?.isVRAvailable() ?? false,
-    isVREnabled: () => ref.current?.isVREnabled() ?? false,
-    getVRMode: () => ref.current?.getVRMode() ?? null,
-    requestVRPermission: () => ref.current?.requestVRPermission() ?? Promise.resolve(false),
-    getVideo: () => ref.current?.getVideo() ?? null,
-    subscribeVideo: (onStoreChange) => ref.current?.subscribeVideo(onStoreChange) ?? (() => {
-    }),
-    playVideo: () => ref.current?.playVideo() ?? Promise.resolve(),
-    pauseVideo: () => {
-      ref.current?.pauseVideo();
-    },
-    toggleVideo: () => {
-      ref.current?.toggleVideo();
-    },
-    seekVideo: (time) => {
-      ref.current?.seekVideo(time);
-    },
-    setVideoVolume: (volume) => {
-      ref.current?.setVideoVolume(volume);
-    },
-    setVideoMuted: (muted) => {
-      ref.current?.setVideoMuted(muted);
-    },
-    toggleVideoMuted: () => {
-      ref.current?.toggleVideoMuted();
-    },
-    getBackgroundAudio: () => ref.current?.getBackgroundAudio() ?? null,
-    subscribeBackgroundAudio: (onStoreChange) => ref.current?.subscribeBackgroundAudio(onStoreChange) ?? (() => {
-    }),
-    playBackgroundAudio: () => ref.current?.playBackgroundAudio() ?? Promise.resolve(),
-    pauseBackgroundAudio: () => {
-      ref.current?.pauseBackgroundAudio();
-    },
-    toggleBackgroundAudio: () => {
-      ref.current?.toggleBackgroundAudio();
-    },
-    setBackgroundAudioVolume: (volume) => {
-      ref.current?.setBackgroundAudioVolume(volume);
-    },
-    setBackgroundAudioMuted: (muted) => {
-      ref.current?.setBackgroundAudioMuted(muted);
-    },
-    toggleBackgroundAudioMuted: () => {
-      ref.current?.toggleBackgroundAudioMuted();
-    },
-    startAutoRotate: () => {
-      ref.current?.startAutoRotate();
-    },
-    stopAutoRotate: () => {
-      ref.current?.stopAutoRotate();
-    }
-  };
-}
-function usePanoViewer() {
-  const ref = useRef40(null);
-  const handle = useMemo27(() => createPanoViewerHandle(ref), []);
-  return useMemo27(() => ({ ref, ...handle }), [handle]);
-}
-
-// src/video/pano-video.tsx
-import { useThree as useThree29 } from "@react-three/fiber";
+// src/pano-scene-menu.tsx
 import {
   useCallback as useCallback11,
-  useContext as useContext28,
   useEffect as useEffect41,
+  useId as useId3,
   useLayoutEffect as useLayoutEffect9,
-  useMemo as useMemo28,
-  useRef as useRef41,
+  useMemo as useMemo27,
+  useRef as useRef40,
   useState as useState25
 } from "react";
-import {
-  BackSide as BackSide4,
-  LinearFilter as LinearFilter11,
-  LinearMipmapLinearFilter as LinearMipmapLinearFilter7,
-  MathUtils as MathUtils13,
-  RepeatWrapping as RepeatWrapping2,
-  SRGBColorSpace as SRGBColorSpace10,
-  TextureLoader as TextureLoader8,
-  VideoTexture as VideoTexture2
-} from "three";
-import { Fragment as Fragment7, jsx as jsx41, jsxs as jsxs22 } from "react/jsx-runtime";
-var EMPTY_TRACKS = [];
-var EMPTY_RATES = DEFAULT_PANO_VIDEO_PLAYBACK_RATES;
-function createEmptySnapshot() {
+
+// src/drag-motion.ts
+var DRAG_INERTIA_DAMPING = 8;
+var DRAG_FRICTION_STOP = 24;
+var DRAG_SPRING_STRENGTH = 28;
+var DRAG_RUBBER_CONSTANT = 0.55;
+var DRAG_SPRING_SETTLE_DISTANCE = 0.5;
+var DRAG_SPRING_SETTLE_VELOCITY = 12;
+function resolveDragMotion(motion) {
+  if (motion === false) {
+    return { inertia: false, bounce: false };
+  }
   return {
-    ready: false,
-    playing: false,
-    blocked: false,
-    ended: false,
-    currentTime: 0,
-    duration: 0,
-    volume: 1,
-    volumeAdjustable: true,
-    muted: true,
-    playbackRate: 1,
-    variantId: "default",
-    variants: [],
-    trackId: null,
-    tracks: [],
-    captionText: "",
-    captionAppearance: DEFAULT_PANO_VIDEO_CAPTION_APPEARANCE,
-    captionsEnabled: true,
-    playbackRates: EMPTY_RATES,
-    playbackState: "paused"
+    inertia: motion?.inertia !== false,
+    bounce: motion?.bounce !== false
   };
 }
-function playbackStateFromVideo(video, blocked) {
-  if (blocked) {
-    return "blocked";
+function clampAxis(value, min, max) {
+  if (max < min) return min;
+  return Math.min(max, Math.max(min, value));
+}
+function constrainDragPosition(raw, min, max, dimension, bounce) {
+  if (!(Number.isFinite(raw) && Number.isFinite(min) && Number.isFinite(max))) {
+    return 0;
   }
-  if (video.ended) {
-    return "ended";
+  if (raw >= min && raw <= max) {
+    return raw;
   }
-  if (!video.paused) {
-    return "playing";
+  if (!bounce) {
+    return clampAxis(raw, min, max);
   }
-  return "paused";
+  const size = Math.max(1, Math.abs(dimension) || 1);
+  if (raw < min) {
+    const overshoot2 = min - raw;
+    return min - rubberBandDistance(overshoot2, size);
+  }
+  const overshoot = raw - max;
+  return max + rubberBandDistance(overshoot, size);
 }
-function collectCaptionText(track) {
-  if (!track?.activeCues || track.activeCues.length === 0) {
-    return "";
+function rubberBandDistance(overshoot, dimension, constant = DRAG_RUBBER_CONSTANT) {
+  if (!(overshoot > 0)) return 0;
+  const size = Math.max(1, Math.abs(dimension) || 1);
+  return size * overshoot / (size + overshoot * constant);
+}
+function velocityFromSamples(samples, now) {
+  if (samples.length < 2) return 0;
+  const windowMs = 100;
+  let oldest = samples[0];
+  const newest = samples[samples.length - 1];
+  const referenceTime = now ?? newest.t;
+  for (let i = samples.length - 2; i >= 0; i -= 1) {
+    const sample = samples[i];
+    if (referenceTime - sample.t > windowMs) break;
+    oldest = sample;
+  }
+  const dt = (newest.t - oldest.t) / 1e3;
+  if (!(dt >= 1e-3)) return 0;
+  return (newest.position - oldest.position) / dt;
+}
+function integrateAxis(state, deltaSeconds, options) {
+  const dt = Math.max(0, deltaSeconds);
+  if (!(dt > 0)) {
+    return { ...state, settled: isAxisSettled(state, options) };
+  }
+  const damping = options.damping ?? DRAG_INERTIA_DAMPING;
+  const frictionStop = options.frictionStop ?? DRAG_FRICTION_STOP;
+  const spring = options.spring ?? DRAG_SPRING_STRENGTH;
+  const { min, max } = options;
+  let { position, velocity } = state;
+  const pastMin = position < min;
+  const pastMax = position > max;
+  if (pastMin || pastMax) {
+    if (!options.bounce) {
+      position = clampAxis(position, min, max);
+      return { position, velocity: 0, settled: true };
+    }
+    const edge = pastMin ? min : max;
+    if (pastMin && velocity < 0) velocity = 0;
+    if (pastMax && velocity > 0) velocity = 0;
+    const displacement = edge - position;
+    velocity += displacement * spring * dt;
+    const decay = Math.exp(-damping * dt);
+    velocity *= decay;
+    position += velocity * dt;
+    if (pastMin && position > min) {
+      position = min;
+      velocity = 0;
+    }
+    if (pastMax && position < max) {
+      position = max;
+      velocity = 0;
+    }
+    const settled = isAxisSettled({ position, velocity }, options);
+    if (settled) {
+      return { position: clampAxis(position, min, max), velocity: 0, settled: true };
+    }
+    return { position, velocity, settled: false };
+  }
+  if (!options.inertia || Math.abs(velocity) < frictionStop) {
+    return { position, velocity: 0, settled: true };
+  }
+  position += velocity * dt;
+  velocity *= Math.exp(-damping * dt);
+  if (position < min || position > max) {
+    if (!options.bounce) {
+      position = clampAxis(position, min, max);
+      return { position, velocity: 0, settled: true };
+    }
+    if (Math.abs(velocity) < frictionStop) {
+      velocity = 0;
+    }
+    return { position, velocity, settled: false };
+  }
+  if (Math.abs(velocity) < frictionStop) {
+    return { position, velocity: 0, settled: true };
+  }
+  return { position, velocity, settled: false };
+}
+function isAxisSettled(state, options) {
+  const frictionStop = options.frictionStop ?? DRAG_FRICTION_STOP;
+  const inside = state.position >= options.min - DRAG_SPRING_SETTLE_DISTANCE && state.position <= options.max + DRAG_SPRING_SETTLE_DISTANCE;
+  const slow = Math.abs(state.velocity) < (options.frictionStop ?? DRAG_SPRING_SETTLE_VELOCITY);
+  if (!inside) return false;
+  return slow || Math.abs(state.velocity) < frictionStop;
+}
+function pushSample(samples, sample, maxCount = 8) {
+  const next = samples.length >= maxCount ? samples.slice(samples.length - maxCount + 1) : samples.slice();
+  next.push(sample);
+  return next;
+}
+
+// src/pano-scene-menu.tsx
+import { jsx as jsx41, jsxs as jsxs22 } from "react/jsx-runtime";
+var SCENE_MENU_DRAG_THRESHOLD_PX = 6;
+var DEFAULT_PANO_SCENE_MENU_APPEARANCE = {
+  background: "rgba(16, 16, 16, 0.72)",
+  padding: "8px 10px",
+  itemWidth: 128,
+  itemHeight: 80,
+  gap: 8,
+  borderRadius: 8,
+  selectionColor: "#ffffff",
+  selectionWidth: 2,
+  labelBackground: "rgba(0, 0, 0, 0.55)",
+  labelColor: "#ffffff",
+  labelAlign: "start",
+  fontSize: 12,
+  controlColor: "#ffffff",
+  controlBackground: "rgba(255, 255, 255, 0.12)"
+};
+var DEFAULT_INSET = 12;
+function cssLength(value) {
+  return typeof value === "number" ? `${value}px` : value;
+}
+function resolveAppearance2(appearance) {
+  return {
+    ...DEFAULT_PANO_SCENE_MENU_APPEARANCE,
+    ...appearance
+  };
+}
+function resolveInset(inset) {
+  if (inset === void 0) {
+    const value = cssLength(DEFAULT_INSET);
+    return { top: value, right: value, bottom: value, left: value };
   }
-  const parts = [];
-  for (let index = 0; index < track.activeCues.length; index += 1) {
-    const cue = track.activeCues[index];
-    if (!cue) {
-      continue;
+  if (typeof inset === "number" || typeof inset === "string") {
+    const value = cssLength(inset);
+    return { top: value, right: value, bottom: value, left: value };
+  }
+  return {
+    top: cssLength(inset.top ?? DEFAULT_INSET),
+    right: cssLength(inset.right ?? DEFAULT_INSET),
+    bottom: cssLength(inset.bottom ?? DEFAULT_INSET),
+    left: cssLength(inset.left ?? DEFAULT_INSET)
+  };
+}
+function itemLabel(item) {
+  return item.title?.trim() || item.id;
+}
+function isHorizontal(placement) {
+  return placement === "top" || placement === "bottom";
+}
+var CHEVRON_PATHS = {
+  // Keep glyphs optically centered in the 16×16 viewBox.
+  up: "M3 11l5-6 5 6",
+  down: "M3 5l5 6 5-6",
+  left: "M11 3 5 8l6 5",
+  right: "M5 3l6 5-6 5"
+};
+function arrowChevron(direction, orientation2) {
+  if (direction === "prev") {
+    return orientation2 === "horizontal" ? "left" : "up";
+  }
+  return orientation2 === "horizontal" ? "right" : "down";
+}
+function toggleChevron(placement, expanded) {
+  switch (placement) {
+    case "bottom":
+      return expanded ? "down" : "up";
+    case "top":
+      return expanded ? "up" : "down";
+    case "left":
+      return expanded ? "left" : "right";
+    case "right":
+      return expanded ? "right" : "left";
+    default: {
+      const exhaustive = placement;
+      void exhaustive;
+      return "down";
     }
-    const text = cueText(cue);
-    if (text) {
-      parts.push(text);
+  }
+}
+function dockInset(placement, inset) {
+  switch (placement) {
+    case "top":
+      return inset.top;
+    case "bottom":
+      return inset.bottom;
+    case "left":
+      return inset.left;
+    case "right":
+      return inset.right;
+    default: {
+      const exhaustive = placement;
+      void exhaustive;
+      return inset.bottom;
     }
   }
-  return parts.join("\n");
 }
-function findTextTrack(video, tracks, trackId) {
-  if (!trackId) {
-    return null;
+function Chevron({ arrow }) {
+  return /* @__PURE__ */ jsx41(
+    "svg",
+    {
+      "aria-hidden": true,
+      fill: "none",
+      height: "16",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: "1.75",
+      viewBox: "0 0 16 16",
+      width: "16",
+      children: /* @__PURE__ */ jsx41("path", { d: CHEVRON_PATHS[arrow] })
+    }
+  );
+}
+function ControlButton({
+  className,
+  disabled,
+  label,
+  onClick,
+  children
+}) {
+  return /* @__PURE__ */ jsx41(
+    "button",
+    {
+      "aria-label": label,
+      className: cn("pano-scene-menu-control", className),
+      disabled,
+      onClick,
+      onPointerDown: (event) => {
+        event.stopPropagation();
+      },
+      title: label,
+      type: "button",
+      children
+    }
+  );
+}
+function horizontalAlignStyle(align, inset, widthValue) {
+  const left = `calc(${inset.left} + var(--pano-safe-left))`;
+  const right = `calc(${inset.right} + var(--pano-safe-right))`;
+  if (!widthValue) {
+    return { left, right, width: void 0, marginInline: void 0 };
+  }
+  switch (align) {
+    case "start":
+      return { left, right: "auto", width: widthValue, marginInline: void 0 };
+    case "end":
+      return { left: "auto", right, width: widthValue, marginInline: void 0 };
+    case "center":
+      return { left, right, width: widthValue, marginInline: "auto" };
+    default: {
+      const exhaustive = align;
+      void exhaustive;
+      return { left, right, width: widthValue, marginInline: "auto" };
+    }
   }
-  const configured = tracks.find((track) => panoVideoTrackId(track) === trackId);
-  if (!configured) {
-    return null;
+}
+function verticalAlignStyle(align, inset, heightValue) {
+  const top = `calc(${inset.top} + var(--pano-safe-top))`;
+  const bottom = `calc(${inset.bottom} + var(--pano-safe-bottom))`;
+  if (!heightValue) {
+    return { top, bottom, height: void 0, marginBlock: void 0 };
   }
-  const list = video.textTracks;
-  for (let index = 0; index < list.length; index += 1) {
-    const textTrack = list[index];
-    if (!textTrack) {
-      continue;
+  switch (align) {
+    case "start":
+      return { top, bottom: "auto", height: heightValue, marginBlock: void 0 };
+    case "end":
+      return { top: "auto", bottom, height: heightValue, marginBlock: void 0 };
+    case "center":
+      return { top, bottom, height: heightValue, marginBlock: "auto" };
+    default: {
+      const exhaustive = align;
+      void exhaustive;
+      return { top, bottom, height: heightValue, marginBlock: "auto" };
     }
-    if (textTrack.language === configured.srcLang || textTrack.label === configured.label) {
-      return textTrack;
+  }
+}
+function placementBoxStyle(placement, inset, width, height, align) {
+  const widthValue = width === void 0 ? void 0 : cssLength(width);
+  const heightValue = height === void 0 ? void 0 : cssLength(height);
+  const maxWidth = `calc(100% - ${inset.left} - ${inset.right} - var(--pano-safe-left) - var(--pano-safe-right))`;
+  const maxHeight = `calc(100% - ${inset.top} - ${inset.bottom} - var(--pano-safe-top) - var(--pano-safe-bottom))`;
+  switch (placement) {
+    case "top":
+      return {
+        ...horizontalAlignStyle(align, inset, widthValue),
+        top: `calc(${inset.top} + var(--pano-safe-top))`,
+        bottom: "auto",
+        maxWidth,
+        height: heightValue,
+        maxHeight
+      };
+    case "bottom":
+      return {
+        ...horizontalAlignStyle(align, inset, widthValue),
+        top: "auto",
+        bottom: `calc(${inset.bottom} + var(--pano-safe-bottom))`,
+        maxWidth,
+        height: heightValue,
+        maxHeight
+      };
+    case "left":
+      return {
+        ...verticalAlignStyle(align, inset, heightValue),
+        right: "auto",
+        left: `calc(${inset.left} + var(--pano-safe-left))`,
+        width: widthValue,
+        maxWidth,
+        maxHeight
+      };
+    case "right":
+      return {
+        ...verticalAlignStyle(align, inset, heightValue),
+        right: `calc(${inset.right} + var(--pano-safe-right))`,
+        left: "auto",
+        width: widthValue,
+        maxWidth,
+        maxHeight
+      };
+    default: {
+      const exhaustive = placement;
+      void exhaustive;
+      return {};
     }
   }
-  return list.length > 0 ? list[0] : null;
+}
+function PanoSceneMenu({
+  items,
+  activeId = null,
+  onSelect,
+  placement = "bottom",
+  align = "center",
+  inset,
+  width,
+  height,
+  collapsible = false,
+  defaultExpanded = true,
+  expanded: expandedProp,
+  onExpandedChange,
+  showArrows = false,
+  loop = false,
+  dragMotion: dragMotionProp,
+  appearance,
+  className,
+  style,
+  label = "Scenes",
+  previousLabel = "Previous scene",
+  nextLabel = "Next scene",
+  expandLabel = "Show scenes",
+  collapseLabel = "Hide scenes"
+}) {
+  const listId = useId3();
+  const listRef = useRef40(null);
+  const trackRef = useRef40(null);
+  const itemRefs = useRef40(/* @__PURE__ */ new Map());
+  const resolved = resolveAppearance2(appearance);
+  const resolvedInset = resolveInset(inset);
+  const horizontal = isHorizontal(placement);
+  const customDrag = dragMotionProp !== false;
+  const dragMotion = resolveDragMotion(
+    dragMotionProp === false ? false : dragMotionProp
+  );
+  const isExpandedControlled = expandedProp !== void 0;
+  const [internalExpanded, setInternalExpanded] = useState25(defaultExpanded);
+  const expanded = collapsible ? isExpandedControlled ? expandedProp : internalExpanded : true;
+  const [offset, setOffset] = useState25(0);
+  const [viewportSize, setViewportSize] = useState25(0);
+  const [contentSize, setContentSize] = useState25(0);
+  const offsetRef = useRef40(0);
+  const dragRef = useRef40(null);
+  const animRef = useRef40(null);
+  const maxOffset = Math.max(0, contentSize - viewportSize);
+  offsetRef.current = offset;
+  const activeIndex = useMemo27(() => {
+    if (activeId == null) {
+      return -1;
+    }
+    return items.findIndex((item) => item.id === activeId);
+  }, [activeId, items]);
+  const cancelScrollAnimation = useCallback11(() => {
+    const anim = animRef.current;
+    if (anim?.raf != null) {
+      cancelAnimationFrame(anim.raf);
+    }
+    animRef.current = null;
+  }, []);
+  const clampOffset = useCallback11(
+    (value) => Math.min(maxOffset, Math.max(0, value)),
+    [maxOffset]
+  );
+  const startScrollAnimation = useCallback11(
+    (velocity) => {
+      cancelScrollAnimation();
+      const current = offsetRef.current;
+      const needsSpring = dragMotion.bounce && (current < 0 || current > maxOffset);
+      const nextVelocity = dragMotion.inertia ? velocity : 0;
+      if (!needsSpring && Math.abs(nextVelocity) < 1) {
+        setOffset(clampOffset(current));
+        return;
+      }
+      if (!dragMotion.inertia && !dragMotion.bounce) {
+        setOffset(clampOffset(current));
+        return;
+      }
+      const anim = {
+        raf: null,
+        lastTime: performance.now(),
+        position: current,
+        velocity: nextVelocity
+      };
+      animRef.current = anim;
+      const tick = (now) => {
+        if (animRef.current !== anim) return;
+        const dt = Math.min(0.064, Math.max(0, (now - anim.lastTime) / 1e3));
+        anim.lastTime = now;
+        const next = integrateAxis(
+          { position: anim.position, velocity: anim.velocity },
+          dt,
+          {
+            min: 0,
+            max: maxOffset,
+            inertia: dragMotion.inertia,
+            bounce: dragMotion.bounce
+          }
+        );
+        anim.position = next.position;
+        anim.velocity = next.velocity;
+        setOffset(next.position);
+        if (next.settled) {
+          setOffset(clampOffset(next.position));
+          animRef.current = null;
+          return;
+        }
+        anim.raf = requestAnimationFrame(tick);
+      };
+      anim.raf = requestAnimationFrame(tick);
+    },
+    [
+      cancelScrollAnimation,
+      clampOffset,
+      dragMotion.bounce,
+      dragMotion.inertia,
+      maxOffset
+    ]
+  );
+  useEffect41(() => () => cancelScrollAnimation(), [cancelScrollAnimation]);
+  useLayoutEffect9(() => {
+    if (!customDrag || !expanded) return;
+    const list = listRef.current;
+    const track = trackRef.current;
+    if (!list || !track) return;
+    const measure = () => {
+      const nextViewport = horizontal ? list.clientWidth : list.clientHeight;
+      const nextContent = horizontal ? track.scrollWidth : track.scrollHeight;
+      setViewportSize(
+        (previous) => previous === nextViewport ? previous : nextViewport
+      );
+      setContentSize(
+        (previous) => previous === nextContent ? previous : nextContent
+      );
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(list);
+    observer.observe(track);
+    return () => observer.disconnect();
+  }, [customDrag, expanded, horizontal, items]);
+  useEffect41(() => {
+    if (!customDrag) return;
+    if (dragRef.current || animRef.current) return;
+    setOffset((previous) => Math.min(maxOffset, Math.max(0, previous)));
+  }, [customDrag, maxOffset]);
+  useEffect41(() => {
+    if (!expanded || activeId == null) {
+      return;
+    }
+    const node = itemRefs.current.get(activeId);
+    if (!node) return;
+    if (!customDrag) {
+      node.scrollIntoView({
+        behavior: "smooth",
+        block: "nearest",
+        inline: "nearest"
+      });
+      return;
+    }
+    const list = listRef.current;
+    if (!list) return;
+    const listRect = list.getBoundingClientRect();
+    const itemRect = node.getBoundingClientRect();
+    if (horizontal) {
+      const itemStart2 = itemRect.left - listRect.left + offsetRef.current;
+      const itemEnd2 = itemStart2 + itemRect.width;
+      let next2 = offsetRef.current;
+      if (itemStart2 < next2) next2 = itemStart2;
+      else if (itemEnd2 > next2 + listRect.width) next2 = itemEnd2 - listRect.width;
+      cancelScrollAnimation();
+      setOffset(clampOffset(next2));
+      return;
+    }
+    const itemStart = itemRect.top - listRect.top + offsetRef.current;
+    const itemEnd = itemStart + itemRect.height;
+    let next = offsetRef.current;
+    if (itemStart < next) next = itemStart;
+    else if (itemEnd > next + listRect.height) next = itemEnd - listRect.height;
+    cancelScrollAnimation();
+    setOffset(clampOffset(next));
+  }, [
+    activeId,
+    cancelScrollAnimation,
+    clampOffset,
+    customDrag,
+    expanded,
+    horizontal
+  ]);
+  const rootStyle = useMemo27(() => {
+    const vars = {
+      "--pano-scene-menu-background": resolved.background,
+      "--pano-scene-menu-padding": cssLength(resolved.padding),
+      "--pano-scene-menu-item-width": cssLength(resolved.itemWidth),
+      "--pano-scene-menu-item-height": cssLength(resolved.itemHeight),
+      "--pano-scene-menu-gap": cssLength(resolved.gap),
+      "--pano-scene-menu-radius": cssLength(resolved.borderRadius),
+      "--pano-scene-menu-selection-color": resolved.selectionColor,
+      "--pano-scene-menu-selection-width": cssLength(resolved.selectionWidth),
+      "--pano-scene-menu-label-background": resolved.labelBackground,
+      "--pano-scene-menu-label-color": resolved.labelColor,
+      "--pano-scene-menu-label-align": resolved.labelAlign,
+      "--pano-scene-menu-font-size": cssLength(resolved.fontSize),
+      "--pano-scene-menu-control-color": resolved.controlColor,
+      "--pano-scene-menu-control-background": resolved.controlBackground,
+      "--pano-scene-menu-dock-inset": dockInset(placement, resolvedInset)
+    };
+    return {
+      ...vars,
+      ...placementBoxStyle(placement, resolvedInset, width, height, align),
+      ...style
+    };
+  }, [align, height, placement, resolved, resolvedInset, style, width]);
+  const setExpanded = (next) => {
+    if (!collapsible) {
+      return;
+    }
+    if (!isExpandedControlled) {
+      setInternalExpanded(next);
+    }
+    onExpandedChange?.(next);
+  };
+  const selectAt = (index) => {
+    const item = items[index];
+    if (!item) {
+      return;
+    }
+    onSelect?.(item.id);
+    itemRefs.current.get(item.id)?.focus({ preventScroll: true });
+  };
+  const selectRelative = (delta) => {
+    if (items.length === 0) {
+      return;
+    }
+    const current = activeIndex >= 0 ? activeIndex : 0;
+    if (loop) {
+      const next = ((current + delta) % items.length + items.length) % items.length;
+      selectAt(next);
+      return;
+    }
+    selectAt(Math.max(0, Math.min(items.length - 1, current + delta)));
+  };
+  const onKeyDown = (event) => {
+    if (items.length === 0 || !expanded) {
+      return;
+    }
+    const current = activeIndex >= 0 ? activeIndex : Math.max(
+      0,
+      items.findIndex(
+        (item) => itemRefs.current.get(item.id) === event.target
+      )
+    );
+    const backward = horizontal ? event.key === "ArrowLeft" : event.key === "ArrowUp";
+    const forward = horizontal ? event.key === "ArrowRight" : event.key === "ArrowDown";
+    if (backward) {
+      event.preventDefault();
+      if (loop) {
+        selectAt((current - 1 + items.length) % items.length);
+      } else {
+        selectAt(Math.max(0, current - 1));
+      }
+      return;
+    }
+    if (forward) {
+      event.preventDefault();
+      if (loop) {
+        selectAt((current + 1) % items.length);
+      } else {
+        selectAt(Math.min(items.length - 1, current + 1));
+      }
+      return;
+    }
+    switch (event.key) {
+      case "Home": {
+        event.preventDefault();
+        selectAt(0);
+        break;
+      }
+      case "End": {
+        event.preventDefault();
+        selectAt(items.length - 1);
+        break;
+      }
+      default:
+        break;
+    }
+  };
+  const onWheel = (event) => {
+    const list = listRef.current;
+    if (!list) {
+      return;
+    }
+    if (!customDrag) {
+      if (horizontal) {
+        const canScroll2 = list.scrollWidth > list.clientWidth + 1;
+        if (!canScroll2 || Math.abs(event.deltaY) <= Math.abs(event.deltaX)) {
+          return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        list.scrollLeft += event.deltaY;
+        return;
+      }
+      const canScroll = list.scrollHeight > list.clientHeight + 1;
+      if (!canScroll || Math.abs(event.deltaX) <= Math.abs(event.deltaY)) {
+        return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      list.scrollTop += event.deltaX;
+      return;
+    }
+    if (horizontal) {
+      if (maxOffset <= 0 || Math.abs(event.deltaY) <= Math.abs(event.deltaX)) {
+        return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      cancelScrollAnimation();
+      setOffset((previous) => clampOffset(previous + event.deltaY));
+      return;
+    }
+    if (maxOffset <= 0 || Math.abs(event.deltaX) <= Math.abs(event.deltaY)) {
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    cancelScrollAnimation();
+    setOffset((previous) => clampOffset(previous + event.deltaX));
+  };
+  const axisPoint = (event) => horizontal ? event.clientX : event.clientY;
+  const endSuppressClickRef = useRef40(false);
+  const beginListDrag = (event, captureTarget) => {
+    if (!customDrag || event.button !== 0) return;
+    cancelScrollAnimation();
+    const now = performance.now();
+    const origin = axisPoint(event);
+    dragRef.current = {
+      pointerId: event.pointerId,
+      origin,
+      startOffset: offsetRef.current,
+      samples: [{ t: now, position: offsetRef.current }],
+      moved: false,
+      suppressClick: false
+    };
+    try {
+      captureTarget.setPointerCapture(event.pointerId);
+    } catch {
+    }
+  };
+  const onListPointerMove = (event) => {
+    const drag = dragRef.current;
+    if (!drag || drag.pointerId !== event.pointerId) return;
+    const point = axisPoint(event);
+    const delta = point - drag.origin;
+    if (!drag.moved && Math.abs(delta) >= SCENE_MENU_DRAG_THRESHOLD_PX) {
+      drag.moved = true;
+      drag.suppressClick = true;
+    }
+    if (!drag.moved) return;
+    const raw = drag.startOffset - delta;
+    const now = performance.now();
+    drag.samples = pushSample(drag.samples, { t: now, position: raw });
+    setOffset(
+      constrainDragPosition(
+        raw,
+        0,
+        maxOffset,
+        Math.max(1, viewportSize),
+        dragMotion.bounce
+      )
+    );
+    event.preventDefault();
+  };
+  const finishPointerWithClickGuard = (event) => {
+    const drag = dragRef.current;
+    if (!drag || drag.pointerId !== event.pointerId) return;
+    const suppress = drag.suppressClick;
+    dragRef.current = null;
+    try {
+      if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+        event.currentTarget.releasePointerCapture(event.pointerId);
+      }
+    } catch {
+    }
+    if (suppress) {
+      endSuppressClickRef.current = true;
+      queueMicrotask(() => {
+        endSuppressClickRef.current = false;
+      });
+    }
+    if (!drag.moved) return;
+    if (event.type === "pointercancel") {
+      setOffset(clampOffset(offsetRef.current));
+      return;
+    }
+    startScrollAnimation(velocityFromSamples(drag.samples));
+  };
+  const onItemClick = (event, id) => {
+    if (endSuppressClickRef.current) {
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
+    onSelect?.(id);
+  };
+  const canStep = items.length > 1;
+  const canGoPrevious = canStep && (loop || activeIndex !== 0);
+  const canGoNext = canStep && (loop || activeIndex !== items.length - 1);
+  const orientation2 = horizontal ? "horizontal" : "vertical";
+  const trackStyle = customDrag ? {
+    transform: horizontal ? `translate3d(${-offset}px, 0, 0)` : `translate3d(0, ${-offset}px, 0)`,
+    willChange: "transform"
+  } : void 0;
+  return /* @__PURE__ */ jsxs22(
+    "div",
+    {
+      "aria-label": label,
+      className: cn("pano-scene-menu", className),
+      "data-align": align,
+      "data-collapsible": collapsible ? "true" : void 0,
+      "data-drag-motion": customDrag ? "custom" : "native",
+      "data-expanded": expanded ? "true" : "false",
+      "data-orientation": orientation2,
+      "data-placement": placement,
+      role: "group",
+      style: rootStyle,
+      children: [
+        /* @__PURE__ */ jsxs22(
+          "div",
+          {
+            "aria-hidden": expanded ? void 0 : true,
+            className: "pano-scene-menu-body",
+            ...!expanded ? { inert: true } : null,
+            children: [
+              showArrows ? /* @__PURE__ */ jsx41(
+                ControlButton,
+                {
+                  className: "pano-scene-menu-arrow",
+                  disabled: !canGoPrevious || !expanded,
+                  label: previousLabel,
+                  onClick: () => selectRelative(-1),
+                  children: /* @__PURE__ */ jsx41(Chevron, { arrow: arrowChevron("prev", orientation2) })
+                }
+              ) : null,
+              /* @__PURE__ */ jsx41(
+                "div",
+                {
+                  "aria-label": label,
+                  className: "pano-scene-menu-list",
+                  id: listId,
+                  onKeyDown,
+                  onPointerCancel: customDrag ? finishPointerWithClickGuard : void 0,
+                  onPointerDown: customDrag ? (event) => beginListDrag(event, event.currentTarget) : void 0,
+                  onPointerMove: customDrag ? onListPointerMove : void 0,
+                  onPointerUp: customDrag ? finishPointerWithClickGuard : void 0,
+                  onWheel,
+                  ref: listRef,
+                  role: "radiogroup",
+                  children: /* @__PURE__ */ jsx41(
+                    "div",
+                    {
+                      className: "pano-scene-menu-track",
+                      ref: trackRef,
+                      style: trackStyle,
+                      children: items.map((item) => {
+                        const name = itemLabel(item);
+                        const selected = item.id === activeId;
+                        return /* @__PURE__ */ jsx41(
+                          "button",
+                          {
+                            "aria-checked": selected,
+                            className: "pano-scene-menu-item",
+                            "data-active": selected ? "true" : void 0,
+                            onClick: (event) => onItemClick(event, item.id),
+                            onPointerDown: (event) => {
+                              event.stopPropagation();
+                              const list = listRef.current;
+                              if (customDrag && list) {
+                                beginListDrag(event, list);
+                              }
+                            },
+                            ref: (node) => {
+                              if (node) {
+                                itemRefs.current.set(item.id, node);
+                              } else {
+                                itemRefs.current.delete(item.id);
+                              }
+                            },
+                            role: "radio",
+                            tabIndex: selected || activeId == null && item === items[0] ? 0 : -1,
+                            title: name,
+                            type: "button",
+                            children: /* @__PURE__ */ jsxs22("span", { className: "pano-scene-menu-thumb", children: [
+                              /* @__PURE__ */ jsx41(
+                                "img",
+                                {
+                                  alt: "",
+                                  decoding: "async",
+                                  draggable: false,
+                                  src: item.thumbnailUrl
+                                }
+                              ),
+                              /* @__PURE__ */ jsx41("span", { className: "pano-scene-menu-label", children: name })
+                            ] })
+                          },
+                          item.id
+                        );
+                      })
+                    }
+                  )
+                }
+              ),
+              showArrows ? /* @__PURE__ */ jsx41(
+                ControlButton,
+                {
+                  className: "pano-scene-menu-arrow",
+                  disabled: !canGoNext || !expanded,
+                  label: nextLabel,
+                  onClick: () => selectRelative(1),
+                  children: /* @__PURE__ */ jsx41(Chevron, { arrow: arrowChevron("next", orientation2) })
+                }
+              ) : null
+            ]
+          }
+        ),
+        collapsible ? /* @__PURE__ */ jsx41(
+          ControlButton,
+          {
+            className: "pano-scene-menu-toggle",
+            label: expanded ? collapseLabel : expandLabel,
+            onClick: () => setExpanded(!expanded),
+            children: /* @__PURE__ */ jsx41(Chevron, { arrow: toggleChevron(placement, expanded) })
+          }
+        ) : null
+      ]
+    }
+  );
+}
+
+// src/use-pano-viewer.ts
+import { useMemo as useMemo28, useRef as useRef41 } from "react";
+function createPanoViewerHandle(ref) {
+  return {
+    getView: () => ref.current?.getView() ?? { yaw: 0, pitch: 0, fov: 75 },
+    setView: (view, options) => {
+      ref.current?.setView(view, options);
+    },
+    reset: () => {
+      ref.current?.reset();
+    },
+    lookTo: (position, options) => ref.current?.lookTo(position, options) ?? Promise.resolve({ status: "cancelled" }),
+    moveTo: (position, options) => ref.current?.moveTo(position, options) ?? Promise.resolve({ status: "cancelled" }),
+    zoomTo: (fov, options) => ref.current?.zoomTo(fov, options) ?? Promise.resolve({ status: "cancelled" }),
+    lookToHotspot: (id, options) => ref.current?.lookToHotspot(id, options) ?? Promise.resolve({ status: "not-found" }),
+    activateMedia: () => ref.current?.activateMedia() ?? Promise.resolve(),
+    enterFullscreen: () => ref.current?.enterFullscreen() ?? Promise.resolve(),
+    exitFullscreen: () => ref.current?.exitFullscreen() ?? Promise.resolve(),
+    toggleFullscreen: () => ref.current?.toggleFullscreen() ?? Promise.resolve(),
+    isFullscreen: () => ref.current?.isFullscreen() ?? false,
+    setScene: (id) => ref.current?.setScene(id) ?? false,
+    nextScene: () => ref.current?.nextScene() ?? false,
+    previousScene: () => ref.current?.previousScene() ?? false,
+    getActiveSceneId: () => ref.current?.getActiveSceneId() ?? null,
+    getSceneIds: () => ref.current?.getSceneIds() ?? [],
+    isSceneTransitioning: () => ref.current?.isSceneTransitioning() ?? false,
+    enterVR: () => ref.current?.enterVR() ?? Promise.resolve(false),
+    exitVR: () => ref.current?.exitVR() ?? Promise.resolve(),
+    toggleVR: () => ref.current?.toggleVR() ?? Promise.resolve(false),
+    isVRAvailable: () => ref.current?.isVRAvailable() ?? false,
+    isVREnabled: () => ref.current?.isVREnabled() ?? false,
+    getVRMode: () => ref.current?.getVRMode() ?? null,
+    requestVRPermission: () => ref.current?.requestVRPermission() ?? Promise.resolve(false),
+    getVideo: () => ref.current?.getVideo() ?? null,
+    subscribeVideo: (onStoreChange) => ref.current?.subscribeVideo(onStoreChange) ?? (() => {
+    }),
+    playVideo: () => ref.current?.playVideo() ?? Promise.resolve(),
+    pauseVideo: () => {
+      ref.current?.pauseVideo();
+    },
+    toggleVideo: () => {
+      ref.current?.toggleVideo();
+    },
+    seekVideo: (time) => {
+      ref.current?.seekVideo(time);
+    },
+    setVideoVolume: (volume) => {
+      ref.current?.setVideoVolume(volume);
+    },
+    setVideoMuted: (muted) => {
+      ref.current?.setVideoMuted(muted);
+    },
+    toggleVideoMuted: () => {
+      ref.current?.toggleVideoMuted();
+    },
+    getBackgroundAudio: () => ref.current?.getBackgroundAudio() ?? null,
+    subscribeBackgroundAudio: (onStoreChange) => ref.current?.subscribeBackgroundAudio(onStoreChange) ?? (() => {
+    }),
+    playBackgroundAudio: () => ref.current?.playBackgroundAudio() ?? Promise.resolve(),
+    pauseBackgroundAudio: () => {
+      ref.current?.pauseBackgroundAudio();
+    },
+    toggleBackgroundAudio: () => {
+      ref.current?.toggleBackgroundAudio();
+    },
+    setBackgroundAudioVolume: (volume) => {
+      ref.current?.setBackgroundAudioVolume(volume);
+    },
+    setBackgroundAudioMuted: (muted) => {
+      ref.current?.setBackgroundAudioMuted(muted);
+    },
+    toggleBackgroundAudioMuted: () => {
+      ref.current?.toggleBackgroundAudioMuted();
+    },
+    startAutoRotate: () => {
+      ref.current?.startAutoRotate();
+    },
+    stopAutoRotate: () => {
+      ref.current?.stopAutoRotate();
+    }
+  };
+}
+function usePanoViewer() {
+  const ref = useRef41(null);
+  const handle = useMemo28(() => createPanoViewerHandle(ref), []);
+  return useMemo28(() => ({ ref, ...handle }), [handle]);
+}
+
+// src/video/pano-video.tsx
+import { useThree as useThree29 } from "@react-three/fiber";
+import {
+  useCallback as useCallback12,
+  useContext as useContext28,
+  useEffect as useEffect42,
+  useLayoutEffect as useLayoutEffect10,
+  useMemo as useMemo29,
+  useRef as useRef42,
+  useState as useState26
+} from "react";
+import {
+  BackSide as BackSide4,
+  LinearFilter as LinearFilter11,
+  LinearMipmapLinearFilter as LinearMipmapLinearFilter7,
+  MathUtils as MathUtils13,
+  RepeatWrapping as RepeatWrapping2,
+  SRGBColorSpace as SRGBColorSpace10,
+  TextureLoader as TextureLoader8,
+  VideoTexture as VideoTexture2
+} from "three";
+import { Fragment as Fragment7, jsx as jsx42, jsxs as jsxs23 } from "react/jsx-runtime";
+var EMPTY_TRACKS = [];
+var EMPTY_RATES = DEFAULT_PANO_VIDEO_PLAYBACK_RATES;
+function createEmptySnapshot() {
+  return {
+    ready: false,
+    playing: false,
+    blocked: false,
+    ended: false,
+    currentTime: 0,
+    duration: 0,
+    volume: 1,
+    volumeAdjustable: true,
+    muted: true,
+    playbackRate: 1,
+    variantId: "default",
+    variants: [],
+    trackId: null,
+    tracks: [],
+    captionText: "",
+    captionAppearance: DEFAULT_PANO_VIDEO_CAPTION_APPEARANCE,
+    captionsEnabled: true,
+    playbackRates: EMPTY_RATES,
+    playbackState: "paused"
+  };
+}
+function playbackStateFromVideo(video, blocked) {
+  if (blocked) {
+    return "blocked";
+  }
+  if (video.ended) {
+    return "ended";
+  }
+  if (!video.paused) {
+    return "playing";
+  }
+  return "paused";
+}
+function collectCaptionText(track) {
+  if (!track?.activeCues || track.activeCues.length === 0) {
+    return "";
+  }
+  const parts = [];
+  for (let index = 0; index < track.activeCues.length; index += 1) {
+    const cue = track.activeCues[index];
+    if (!cue) {
+      continue;
+    }
+    const text = cueText(cue);
+    if (text) {
+      parts.push(text);
+    }
+  }
+  return parts.join("\n");
+}
+function findTextTrack(video, tracks, trackId) {
+  if (!trackId) {
+    return null;
+  }
+  const configured = tracks.find((track) => panoVideoTrackId(track) === trackId);
+  if (!configured) {
+    return null;
+  }
+  const list = video.textTracks;
+  for (let index = 0; index < list.length; index += 1) {
+    const textTrack = list[index];
+    if (!textTrack) {
+      continue;
+    }
+    if (textTrack.language === configured.srcLang || textTrack.label === configured.label) {
+      return textTrack;
+    }
+  }
+  return list.length > 0 ? list[0] : null;
 }
 function applyEquirectangularLayout(texture, anisotropy) {
   texture.colorSpace = SRGBColorSpace10;
@@ -18604,10 +19512,10 @@ function applyEquirectangularLayout(texture, anisotropy) {
 }
 function usePosterTexture2(poster, onError) {
   const gl = useThree29((state) => state.gl);
-  const [texture, setTexture] = useState25(null);
-  const onErrorRef = useRef41(onError);
+  const [texture, setTexture] = useState26(null);
+  const onErrorRef = useRef42(onError);
   onErrorRef.current = onError;
-  useEffect41(() => {
+  useEffect42(() => {
     let active = true;
     setTexture(null);
     if (!poster) {
@@ -18644,7 +19552,7 @@ function usePosterTexture2(poster, onError) {
       active = false;
     };
   }, [gl, poster]);
-  useEffect41(
+  useEffect42(
     () => () => {
       texture?.dispose();
     },
@@ -18704,36 +19612,36 @@ function PanoVideo({
   usePanoMediaActivationIntent(autoPlay);
   const gl = useThree29((state) => state.gl);
   const host = useContext28(PanoVideoHostContext);
-  const variants = useMemo28(
+  const variants = useMemo29(
     () => resolvePanoVideoVariants({ poster, src, variants: variantsProp }),
     [poster, src, variantsProp]
   );
   const tracks = tracksProp ?? EMPTY_TRACKS;
   const captionsEnabled = captions !== false;
-  const captionAppearance = useMemo28(
+  const captionAppearance = useMemo29(
     () => resolvePanoVideoCaptionAppearance(
       typeof captions === "object" ? captions : void 0
     ),
     [captions]
   );
-  const [variantId, setVariantId] = useState25(
+  const [variantId, setVariantId] = useState26(
     () => resolvePanoVideoVariantId(variants, defaultVariantId)
   );
-  const [trackId, setTrackId] = useState25(
+  const [trackId, setTrackId] = useState26(
     () => captionsEnabled ? defaultPanoVideoTrackId(tracks) : null
   );
-  const [ready, setReady] = useState25(false);
-  const autoPlayRef = useRef41(autoPlay);
+  const [ready, setReady] = useState26(false);
+  const autoPlayRef = useRef42(autoPlay);
   autoPlayRef.current = autoPlay;
-  const blockedRef = useRef41(false);
-  const captionAppearanceOverrideRef = useRef41(
+  const blockedRef = useRef42(false);
+  const captionAppearanceOverrideRef = useRef42(
     {}
   );
-  const mediaCapabilitiesRef = useRef41({
+  const mediaCapabilitiesRef = useRef42({
     volumeAdjustable: true,
     playbackRates: [...DEFAULT_PANO_VIDEO_PLAYBACK_RATES]
   });
-  const storeRef = useRef41(null);
+  const storeRef = useRef42(null);
   if (!storeRef.current) {
     storeRef.current = {
       snapshot: {
@@ -18743,7 +19651,7 @@ function PanoVideo({
       listeners: /* @__PURE__ */ new Set()
     };
   }
-  const actionsRef = useRef41({
+  const actionsRef = useRef42({
     play: async () => {
     },
     pause: () => {
@@ -18763,19 +19671,19 @@ function PanoVideo({
     setCaptionAppearance: (_appearance) => {
     }
   });
-  const onLoadRef = useRef41(onLoad);
-  const onErrorRef = useRef41(onError);
-  const onPlaybackStateChangeRef = useRef41(onPlaybackStateChange);
-  const onEndedRef = useRef41(onEnded);
-  const onVariantChangeRef = useRef41(onVariantChange);
-  const onTrackChangeRef = useRef41(onTrackChange);
+  const onLoadRef = useRef42(onLoad);
+  const onErrorRef = useRef42(onError);
+  const onPlaybackStateChangeRef = useRef42(onPlaybackStateChange);
+  const onEndedRef = useRef42(onEnded);
+  const onVariantChangeRef = useRef42(onVariantChange);
+  const onTrackChangeRef = useRef42(onTrackChange);
   onLoadRef.current = onLoad;
   onErrorRef.current = onError;
   onPlaybackStateChangeRef.current = onPlaybackStateChange;
   onEndedRef.current = onEnded;
   onVariantChangeRef.current = onVariantChange;
   onTrackChangeRef.current = onTrackChange;
-  const resource = useMemo28(() => {
+  const resource = useMemo29(() => {
     if (typeof document === "undefined") {
       return null;
     }
@@ -18790,7 +19698,7 @@ function PanoVideo({
     texture.generateMipmaps = false;
     return { video, texture };
   }, []);
-  useEffect41(
+  useEffect42(
     () => () => {
       if (!resource) {
         return;
@@ -18805,13 +19713,13 @@ function PanoVideo({
     },
     [resource]
   );
-  useEffect41(() => {
+  useEffect42(() => {
     if (!resource) {
       return;
     }
     resource.texture.anisotropy = gl.capabilities.getMaxAnisotropy();
   }, [gl, resource]);
-  useLayoutEffect9(() => {
+  useLayoutEffect10(() => {
     if (!resource) {
       return;
     }
@@ -18827,7 +19735,7 @@ function PanoVideo({
     activeVariant?.poster ?? poster,
     onError
   );
-  const emitSnapshot = useCallback11(
+  const emitSnapshot = useCallback12(
     (patch) => {
       const store = storeRef.current;
       const video = resource?.video;
@@ -18879,7 +19787,7 @@ function PanoVideo({
       captionAppearance
     ]
   );
-  const controller = useMemo28(
+  const controller = useMemo29(
     () => ({
       subscribe: (onStoreChange) => {
         const store = storeRef.current;
@@ -18931,7 +19839,7 @@ function PanoVideo({
     }),
     []
   );
-  useLayoutEffect9(() => {
+  useLayoutEffect10(() => {
     if (!host || variants.length === 0) {
       return;
     }
@@ -18944,7 +19852,7 @@ function PanoVideo({
       notifyPanoVideoHost(host);
     };
   }, [captionsEnabled, controller, controls, host, variants.length]);
-  useLayoutEffect9(() => {
+  useLayoutEffect10(() => {
     if (!resource) {
       return;
     }
@@ -18957,10 +19865,10 @@ function PanoVideo({
     };
     emitSnapshot();
   }, [emitSnapshot, playbackRates, resource]);
-  useEffect41(() => {
+  useEffect42(() => {
     emitSnapshot();
   }, [emitSnapshot]);
-  useEffect41(() => {
+  useEffect42(() => {
     if (!resource || !activeVariant || !mediaKey) {
       return;
     }
@@ -19017,7 +19925,7 @@ function PanoVideo({
       video.removeEventListener("error", handleError);
     };
   }, [mediaKey, resource]);
-  useEffect41(() => {
+  useEffect42(() => {
     if (!resource) {
       return;
     }
@@ -19109,137 +20017,1306 @@ function PanoVideo({
       }
     };
   }, [emitSnapshot, resource]);
-  useLayoutEffect9(() => {
+  useLayoutEffect10(() => {
+    if (!resource) {
+      return;
+    }
+    const { video } = resource;
+    video.loop = loop;
+    video.muted = muted;
+    if (mediaCapabilitiesRef.current.volumeAdjustable) {
+      video.volume = clampVolume(volume);
+    }
+    applyInlineVideoPlayback(video, playsInline);
+    video.preload = preload;
+  }, [loop, muted, playsInline, preload, resource, volume]);
+  useEffect42(() => {
+    if (!resource) {
+      return;
+    }
+    const { video } = resource;
+    let active = true;
+    const handleTimeUpdate = () => {
+      if (active) {
+        emitSnapshot();
+      }
+    };
+    const handlePlay = () => {
+      blockedRef.current = false;
+      onPlaybackStateChangeRef.current?.("playing");
+      emitSnapshot();
+    };
+    const handlePause = () => {
+      onPlaybackStateChangeRef.current?.(
+        video.ended ? "ended" : "paused"
+      );
+      emitSnapshot();
+    };
+    const handleEnded = () => {
+      onPlaybackStateChangeRef.current?.("ended");
+      onEndedRef.current?.();
+      emitSnapshot();
+    };
+    const handleVolume = () => {
+      emitSnapshot();
+    };
+    video.addEventListener("timeupdate", handleTimeUpdate);
+    video.addEventListener("durationchange", handleTimeUpdate);
+    video.addEventListener("progress", handleTimeUpdate);
+    video.addEventListener("play", handlePlay);
+    video.addEventListener("pause", handlePause);
+    video.addEventListener("ended", handleEnded);
+    video.addEventListener("volumechange", handleVolume);
+    video.addEventListener("ratechange", handleVolume);
+    return () => {
+      active = false;
+      video.removeEventListener("timeupdate", handleTimeUpdate);
+      video.removeEventListener("durationchange", handleTimeUpdate);
+      video.removeEventListener("progress", handleTimeUpdate);
+      video.removeEventListener("play", handlePlay);
+      video.removeEventListener("pause", handlePause);
+      video.removeEventListener("ended", handleEnded);
+      video.removeEventListener("volumechange", handleVolume);
+      video.removeEventListener("ratechange", handleVolume);
+    };
+  }, [emitSnapshot, resource]);
+  useEffect42(() => {
     if (!resource) {
       return;
     }
-    const { video } = resource;
-    video.loop = loop;
-    video.muted = muted;
-    if (mediaCapabilitiesRef.current.volumeAdjustable) {
-      video.volume = clampVolume(volume);
-    }
-    applyInlineVideoPlayback(video, playsInline);
-    video.preload = preload;
-  }, [loop, muted, playsInline, preload, resource, volume]);
-  useEffect41(() => {
-    if (!resource) {
+    const { video } = resource;
+    const applyModes = () => {
+      const selected2 = findTextTrack(video, tracks, trackId);
+      const list = video.textTracks;
+      for (let index = 0; index < list.length; index += 1) {
+        const textTrack = list[index];
+        if (!textTrack) {
+          continue;
+        }
+        textTrack.mode = textTrack === selected2 ? "hidden" : "disabled";
+      }
+      emitSnapshot({ captionText: collectCaptionText(selected2) });
+    };
+    applyModes();
+    const selected = findTextTrack(video, tracks, trackId);
+    const handleCueChange = () => {
+      emitSnapshot({
+        captionText: collectCaptionText(
+          findTextTrack(video, tracks, trackId)
+        )
+      });
+    };
+    selected?.addEventListener("cuechange", handleCueChange);
+    video.textTracks.addEventListener("addtrack", applyModes);
+    video.textTracks.addEventListener("change", applyModes);
+    return () => {
+      selected?.removeEventListener("cuechange", handleCueChange);
+      video.textTracks.removeEventListener("addtrack", applyModes);
+      video.textTracks.removeEventListener("change", applyModes);
+    };
+  }, [emitSnapshot, resource, trackId, tracks]);
+  useEffect42(() => {
+    if (!captionsEnabled) {
+      setTrackId(null);
+      return;
+    }
+    setTrackId(defaultPanoVideoTrackId(tracks));
+  }, [captionsEnabled, tracks]);
+  const activeTexture = ready && resource ? resource.texture : posterTexture;
+  if (variants.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs23(Fragment7, { children: [
+    activeTexture ? /* @__PURE__ */ jsxs23(
+      "mesh",
+      {
+        rotation: [0, MathUtils13.degToRad(90 + yawOffset2), 0],
+        visible,
+        children: [
+          /* @__PURE__ */ jsx42("sphereGeometry", { args: [DEFAULT_PANORAMA_RADIUS, 128, 64] }),
+          /* @__PURE__ */ jsx42(
+            PanoBasicMaterial,
+            {
+              map: activeTexture,
+              side: BackSide4,
+              toneMapped: false
+            }
+          )
+        ]
+      }
+    ) : null,
+    captionsEnabled ? /* @__PURE__ */ jsx42(PanoVideoCaptions, { appearance: typeof captions === "object" ? captions : void 0 }) : null
+  ] });
+}
+
+// src/map/pano-map.tsx
+import {
+  useCallback as useCallback13,
+  useEffect as useEffect44,
+  useId as useId4,
+  useLayoutEffect as useLayoutEffect11,
+  useMemo as useMemo30,
+  useRef as useRef44,
+  useState as useState28
+} 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 useEffect43, useRef as useRef43, useState as useState27 } from "react";
+var DEFAULT_VIEW2 = { yaw: 0, pitch: 0, fov: 75 };
+function useMapView(controlled) {
+  const eventBus = useContext29(PanoEventBusContext);
+  const [view, setView] = useState27(controlled ?? DEFAULT_VIEW2);
+  const controlledRef = useRef43(controlled);
+  controlledRef.current = controlled;
+  useEffect43(() => {
+    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 jsx43, jsxs as jsxs24 } 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__ */ jsxs24("g", { ref: transformRef, transform: `rotate(${rotation})`, style: { pointerEvents: "none" }, children: [
+    gradient ? /* @__PURE__ */ jsx43("defs", { children: gradient.type === "radial" ? /* @__PURE__ */ jsx43("radialGradient", { id: gradientId, cx: "0", cy: "0", r: radius, gradientUnits: "userSpaceOnUse", children: gradient.stops.map((stop, index) => /* @__PURE__ */ jsx43(
+      "stop",
+      {
+        offset: `${stop.offset * 100}%`,
+        stopColor: stop.color,
+        stopOpacity: (stop.opacity ?? 1) / gradientStrength
+      },
+      `${stop.offset}:${index}`
+    )) }) : /* @__PURE__ */ jsx43(
+      "linearGradient",
+      {
+        id: gradientId,
+        x1: "0",
+        y1: "0",
+        x2: "0",
+        y2: -radius,
+        gradientUnits: "userSpaceOnUse",
+        children: gradient.stops.map((stop, index) => /* @__PURE__ */ jsx43(
+          "stop",
+          {
+            offset: `${stop.offset * 100}%`,
+            stopColor: stop.color,
+            stopOpacity: (stop.opacity ?? 1) / gradientStrength
+          },
+          `${stop.offset}:${index}`
+        ))
+      }
+    ) }) : null,
+    /* @__PURE__ */ jsx43(
+      "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__ */ jsxs24(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 32 32",
+      "aria-hidden": "true",
+      style: { display: "block" },
+      children: [
+        /* @__PURE__ */ jsx43(
+          "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__ */ jsx43("circle", { cx: "16", cy: "16", r: "5", fill: "none", stroke: "rgba(255,255,255,0.92)", strokeWidth: "2" }),
+        /* @__PURE__ */ jsx43("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,
+  initialScale
+}) {
+  const reactId = useId4().replace(/:/g, "");
+  const view = useMapView(controlledView);
+  const rootRef = useRef44(null);
+  const containerRef = useRef44(null);
+  const sectorNodeRef = useRef44(null);
+  const yawRef = useRef44(view.yaw);
+  const [size, setSize] = useState28({ width: 0, height: 0 });
+  const [imageSize2, setImageSize] = useState28({ width: 0, height: 0 });
+  const [scale, setScale] = useState28(1);
+  const [pan, setPan] = useState28({ x: 0, y: 0 });
+  const [uncontrolledCollapsed, setUncontrolledCollapsed] = useState28(false);
+  const dragRef = useRef44(null);
+  const panAnimRef = useRef44(null);
+  const panRef = useRef44(pan);
+  const scaleRef = useRef44(scale);
+  const initialViewKeyRef = useRef44(null);
+  const spots = map.spots;
+  const iconSize = map.iconSize ?? DEFAULT_ICON_SIZE2;
+  const interaction = map.interaction ?? "fixed";
+  const gestureZoom = interaction === "zoom";
+  const dragMotion = resolveDragMotion(map.dragMotion);
+  const maxScale = Math.max(MIN_SCALE, map.maxScale ?? DEFAULT_MAX_SCALE);
+  const resolvedInitialScale = Math.min(
+    maxScale,
+    Math.max(
+      MIN_SCALE,
+      Number.isFinite(initialScale) ? initialScale : MIN_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 = useMemo30(
+    () => containRect(size.width, size.height, imageSize2.width, imageSize2.height),
+    [size, imageSize2]
+  );
+  const viewport = useMemo30(
+    () => ({ fit, scale, panX: pan.x, panY: pan.y }),
+    [fit, scale, pan]
+  );
+  useLayoutEffect11(() => {
+    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]);
+  useEffect44(() => {
+    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);
+  };
+  panRef.current = pan;
+  scaleRef.current = scale;
+  const panBoundsFor = useCallback13(
+    (nextScale) => {
+      const width = fit.width * nextScale;
+      const height = fit.height * nextScale;
+      if (!(fit.width > 0) || !(fit.height > 0)) {
+        return { minX: 0, maxX: 0, minY: 0, maxY: 0 };
+      }
+      return {
+        minX: Math.min(0, size.width - (fit.left + width)),
+        maxX: Math.max(0, -fit.left),
+        minY: Math.min(0, size.height - (fit.top + height)),
+        maxY: Math.max(0, -fit.top)
+      };
+    },
+    [fit, size]
+  );
+  const clampPan = useCallback13(
+    (nextScale, nextPan) => {
+      const bounds = panBoundsFor(nextScale);
+      return {
+        x: Math.min(bounds.maxX, Math.max(bounds.minX, nextPan.x)),
+        y: Math.min(bounds.maxY, Math.max(bounds.minY, nextPan.y))
+      };
+    },
+    [panBoundsFor]
+  );
+  const cancelPanAnimation = useCallback13(() => {
+    const anim = panAnimRef.current;
+    if (anim?.raf != null) {
+      cancelAnimationFrame(anim.raf);
+    }
+    panAnimRef.current = null;
+  }, []);
+  const startPanAnimation = useCallback13(
+    (velocity) => {
+      cancelPanAnimation();
+      const current = panRef.current;
+      const currentScale = scaleRef.current;
+      const bounds = panBoundsFor(currentScale);
+      const needsSpring = dragMotion.bounce && (current.x < bounds.minX || current.x > bounds.maxX || current.y < bounds.minY || current.y > bounds.maxY);
+      const vx = dragMotion.inertia ? velocity.x : 0;
+      const vy = dragMotion.inertia ? velocity.y : 0;
+      if (!needsSpring && Math.abs(vx) < 1 && Math.abs(vy) < 1) {
+        setPan(clampPan(currentScale, current));
+        return;
+      }
+      if (!dragMotion.inertia && !dragMotion.bounce) {
+        setPan(clampPan(currentScale, current));
+        return;
+      }
+      const anim = {
+        raf: null,
+        lastTime: performance.now(),
+        x: { position: current.x, velocity: vx },
+        y: { position: current.y, velocity: vy }
+      };
+      panAnimRef.current = anim;
+      const tick = (now) => {
+        if (panAnimRef.current !== anim) return;
+        const dt = Math.min(0.064, Math.max(0, (now - anim.lastTime) / 1e3));
+        anim.lastTime = now;
+        const liveBounds = panBoundsFor(scaleRef.current);
+        const nextX = integrateAxis(anim.x, dt, {
+          min: liveBounds.minX,
+          max: liveBounds.maxX,
+          inertia: dragMotion.inertia,
+          bounce: dragMotion.bounce
+        });
+        const nextY = integrateAxis(anim.y, dt, {
+          min: liveBounds.minY,
+          max: liveBounds.maxY,
+          inertia: dragMotion.inertia,
+          bounce: dragMotion.bounce
+        });
+        anim.x = { position: nextX.position, velocity: nextX.velocity };
+        anim.y = { position: nextY.position, velocity: nextY.velocity };
+        setPan({ x: nextX.position, y: nextY.position });
+        if (nextX.settled && nextY.settled) {
+          setPan(
+            clampPan(scaleRef.current, {
+              x: nextX.position,
+              y: nextY.position
+            })
+          );
+          panAnimRef.current = null;
+          return;
+        }
+        anim.raf = requestAnimationFrame(tick);
+      };
+      anim.raf = requestAnimationFrame(tick);
+    },
+    [cancelPanAnimation, clampPan, dragMotion.bounce, dragMotion.inertia, panBoundsFor]
+  );
+  useEffect44(() => () => cancelPanAnimation(), [cancelPanAnimation]);
+  useEffect44(() => {
+    if (collapsed) cancelPanAnimation();
+  }, [cancelPanAnimation, collapsed]);
+  useEffect44(() => {
+    if (!gestureZoom) {
+      initialViewKeyRef.current = null;
+      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]);
+  useEffect44(() => {
+    if (!gestureZoom) return;
+    if (!(fit.width > 0) || !(fit.height > 0)) return;
+    if (!(size.width > 0) || !(size.height > 0)) return;
+    const key = `${interaction}:${initialScale ?? MIN_SCALE}`;
+    if (initialViewKeyRef.current === key) return;
+    initialViewKeyRef.current = key;
+    const pivot = { x: size.width / 2, y: size.height / 2 };
+    const nextPan = {
+      x: pivot.x - (pivot.x - fit.left) * resolvedInitialScale - fit.left,
+      y: pivot.y - (pivot.y - fit.top) * resolvedInitialScale - fit.top
+    };
+    setScale(resolvedInitialScale);
+    setPan(clampPan(resolvedInitialScale, nextPan));
+  }, [
+    clampPan,
+    fit.height,
+    fit.left,
+    fit.top,
+    fit.width,
+    gestureZoom,
+    initialScale,
+    interaction,
+    resolvedInitialScale,
+    size.height,
+    size.width
+  ]);
+  const applyZoom = useCallback13(
+    (nextScale, origin) => {
+      if (!gestureZoom) return;
+      cancelPanAnimation();
+      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));
+    },
+    [
+      cancelPanAnimation,
+      clampPan,
+      fit.left,
+      fit.top,
+      gestureZoom,
+      maxScale,
+      pan.x,
+      pan.y,
+      scale,
+      size.height,
+      size.width
+    ]
+  );
+  useEffect44(() => {
+    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) {
+      cancelPanAnimation();
+      const now = performance.now();
+      dragRef.current = {
+        kind: "pan",
+        pointerId: event.pointerId,
+        originX: point.x,
+        originY: point.y,
+        panX: pan.x,
+        panY: pan.y,
+        samplesX: [{ t: now, position: pan.x }],
+        samplesY: [{ t: now, position: pan.y }]
+      };
+      try {
+        event.currentTarget.setPointerCapture(event.pointerId);
+      } catch {
+      }
+      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") {
+      const rawX = drag.panX + (point.x - drag.originX);
+      const rawY = drag.panY + (point.y - drag.originY);
+      const bounds = panBoundsFor(scale);
+      const now = performance.now();
+      drag.samplesX = pushSample(drag.samplesX, { t: now, position: rawX });
+      drag.samplesY = pushSample(drag.samplesY, { t: now, position: rawY });
+      setPan({
+        x: constrainDragPosition(
+          rawX,
+          bounds.minX,
+          bounds.maxX,
+          size.width,
+          dragMotion.bounce
+        ),
+        y: constrainDragPosition(
+          rawY,
+          bounds.minY,
+          bounds.maxY,
+          size.height,
+          dragMotion.bounce
+        )
+      });
+      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 { video } = resource;
-    let active = true;
-    const handleTimeUpdate = () => {
-      if (active) {
-        emitSnapshot();
-      }
-    };
-    const handlePlay = () => {
-      blockedRef.current = false;
-      onPlaybackStateChangeRef.current?.("playing");
-      emitSnapshot();
-    };
-    const handlePause = () => {
-      onPlaybackStateChangeRef.current?.(
-        video.ended ? "ended" : "paused"
+    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)})`
       );
-      emitSnapshot();
-    };
-    const handleEnded = () => {
-      onPlaybackStateChangeRef.current?.("ended");
-      onEndedRef.current?.();
-      emitSnapshot();
-    };
-    const handleVolume = () => {
-      emitSnapshot();
-    };
-    video.addEventListener("timeupdate", handleTimeUpdate);
-    video.addEventListener("durationchange", handleTimeUpdate);
-    video.addEventListener("progress", handleTimeUpdate);
-    video.addEventListener("play", handlePlay);
-    video.addEventListener("pause", handlePause);
-    video.addEventListener("ended", handleEnded);
-    video.addEventListener("volumechange", handleVolume);
-    video.addEventListener("ratechange", handleVolume);
-    return () => {
-      active = false;
-      video.removeEventListener("timeupdate", handleTimeUpdate);
-      video.removeEventListener("durationchange", handleTimeUpdate);
-      video.removeEventListener("progress", handleTimeUpdate);
-      video.removeEventListener("play", handlePlay);
-      video.removeEventListener("pause", handlePause);
-      video.removeEventListener("ended", handleEnded);
-      video.removeEventListener("volumechange", handleVolume);
-      video.removeEventListener("ratechange", handleVolume);
-    };
-  }, [emitSnapshot, resource]);
-  useEffect41(() => {
-    if (!resource) {
+    }
+    event.preventDefault();
+    event.stopPropagation();
+  };
+  const endDrag = (event) => {
+    const drag = dragRef.current;
+    if (drag?.pointerId !== event.pointerId) return;
+    dragRef.current = null;
+    try {
+      if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+        event.currentTarget.releasePointerCapture(event.pointerId);
+      }
+    } catch {
+    }
+    if (drag.kind !== "pan") return;
+    if (event.type === "pointercancel") {
+      setPan(clampPan(scale, panRef.current));
       return;
     }
-    const { video } = resource;
-    const applyModes = () => {
-      const selected2 = findTextTrack(video, tracks, trackId);
-      const list = video.textTracks;
-      for (let index = 0; index < list.length; index += 1) {
-        const textTrack = list[index];
-        if (!textTrack) {
-          continue;
-        }
-        textTrack.mode = textTrack === selected2 ? "hidden" : "disabled";
+    startPanAnimation({
+      x: velocityFromSamples(drag.samplesX),
+      y: velocityFromSamples(drag.samplesY)
+    });
+  };
+  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__ */ jsxs24("div", { className: "pano-map-controls", style: { pointerEvents: "auto" }, children: [
+    collapseControl ? /* @__PURE__ */ jsx43(
+      "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"
       }
-      emitSnapshot({ captionText: collectCaptionText(selected2) });
-    };
-    applyModes();
-    const selected = findTextTrack(video, tracks, trackId);
-    const handleCueChange = () => {
-      emitSnapshot({
-        captionText: collectCaptionText(
-          findTextTrack(video, tracks, trackId)
+    ) : null,
+    zoomControls && !collapsed ? /* @__PURE__ */ jsxs24(Fragment8, { children: [
+      /* @__PURE__ */ jsx43(
+        "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__ */ jsx43(
+        "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__ */ jsxs24(
+    "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__ */ jsx43("div", { className: "pano-map-chrome", children: controls }),
+        /* @__PURE__ */ jsxs24(
+          "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__ */ jsx43(
+                "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__ */ jsx43(
+                    "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__ */ jsx43(
+                "img",
+                {
+                  src: map.image,
+                  alt: "",
+                  hidden: true,
+                  ref: (node) => {
+                    if (node) syncImageSize(node);
+                  },
+                  onLoad: (event) => {
+                    syncImageSize(event.currentTarget);
+                  }
+                }
+              ),
+              activeSpot && map.sector ? /* @__PURE__ */ jsx43(
+                "svg",
+                {
+                  className: "pano-map-sector-layer",
+                  width: size.width,
+                  height: size.height,
+                  style: {
+                    position: "absolute",
+                    inset: 0,
+                    overflow: "visible",
+                    pointerEvents: "none"
+                  },
+                  children: /* @__PURE__ */ jsx43(
+                    "g",
+                    {
+                      transform: `translate(${imagePointToContainer(activeSpot, viewport).x} ${imagePointToContainer(activeSpot, viewport).y})`,
+                      children: /* @__PURE__ */ jsx43(
+                        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__ */ jsx43(
+                  "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__ */ jsx43(
+                      "img",
+                      {
+                        src: spot.icon,
+                        alt: "",
+                        draggable: false,
+                        style: { width: "100%", height: "100%", display: "block", pointerEvents: "none" }
+                      }
+                    ) : /* @__PURE__ */ jsx43(DefaultSpotIcon, { active, size: iconSize })
+                  },
+                  spot.id
+                );
+              })
+            ]
+          }
         )
-      });
+      ]
+    }
+  );
+}
+
+// src/map/pano-map-overlay.tsx
+import {
+  useEffect as useEffect45,
+  useId as useId5,
+  useMemo as useMemo31,
+  useRef as useRef45,
+  useState as useState29
+} from "react";
+import { Fragment as Fragment9, jsx as jsx44, jsxs as jsxs25 } from "react/jsx-runtime";
+var DEFAULT_DIALOG_WIDTH = 720;
+var DEFAULT_DIALOG_HEIGHT = 520;
+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,
+  dialogWidth,
+  dialogHeight,
+  children
+}) {
+  usePanoModal(open);
+  const { size } = usePanoOverlay();
+  const titleId = useId5();
+  const panelRef = useRef45(null);
+  const previouslyFocused = useRef45(null);
+  useEffect45(() => {
+    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);
+      }
     };
-    selected?.addEventListener("cuechange", handleCueChange);
-    video.textTracks.addEventListener("addtrack", applyModes);
-    video.textTracks.addEventListener("change", applyModes);
+    const doc = panelRef.current?.ownerDocument;
+    doc?.addEventListener("keydown", onKeyDown, true);
     return () => {
-      selected?.removeEventListener("cuechange", handleCueChange);
-      video.textTracks.removeEventListener("addtrack", applyModes);
-      video.textTracks.removeEventListener("change", applyModes);
+      doc?.removeEventListener("keydown", onKeyDown, true);
+      const previous = previouslyFocused.current;
+      if (previous?.isConnected) previous.focus({ preventScroll: true });
     };
-  }, [emitSnapshot, resource, trackId, tracks]);
-  useEffect41(() => {
-    if (!captionsEnabled) {
-      setTrackId(null);
-      return;
-    }
-    setTrackId(defaultPanoVideoTrackId(tracks));
-  }, [captionsEnabled, tracks]);
-  const activeTexture = ready && resource ? resource.texture : posterTexture;
-  if (variants.length === 0) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxs22(Fragment7, { children: [
-    activeTexture ? /* @__PURE__ */ jsxs22(
-      "mesh",
+  }, [open, onOpenChange]);
+  if (!open) return null;
+  const preferredWidth = Number.isFinite(dialogWidth) && dialogWidth > 0 ? dialogWidth : DEFAULT_DIALOG_WIDTH;
+  const preferredHeight = Number.isFinite(dialogHeight) && dialogHeight > 0 ? dialogHeight : DEFAULT_DIALOG_HEIGHT;
+  const width = Math.min(preferredWidth, Math.max(0, size.width - 32));
+  const height = Math.min(preferredHeight, 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__ */ jsxs25(Fragment9, { children: [
+    /* @__PURE__ */ jsx44(
+      "div",
       {
-        rotation: [0, MathUtils13.degToRad(90 + yawOffset2), 0],
-        visible,
+        className: "pano-map-dialog-backdrop",
+        "aria-hidden": "true",
+        style: {
+          position: "absolute",
+          inset: 0,
+          pointerEvents: "auto"
+        },
+        onClick: () => onOpenChange(false)
+      }
+    ),
+    /* @__PURE__ */ jsxs25(
+      "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__ */ jsx41("sphereGeometry", { args: [DEFAULT_PANORAMA_RADIUS, 128, 64] }),
-          /* @__PURE__ */ jsx41(
-            PanoBasicMaterial,
-            {
-              map: activeTexture,
-              side: BackSide4,
-              toneMapped: false
-            }
-          )
+          /* @__PURE__ */ jsxs25("header", { className: "pano-map-dialog-header", style: { flexShrink: 0 }, children: [
+            /* @__PURE__ */ jsx44("h2", { id: titleId, className: "pano-map-dialog-title", children: title }),
+            /* @__PURE__ */ jsx44(
+              "button",
+              {
+                type: "button",
+                className: "pano-map-dialog-close",
+                "data-pano-map-dialog-close": "",
+                "aria-label": closeLabel,
+                onClick: () => onOpenChange(false),
+                children: /* @__PURE__ */ jsx44("svg", { "aria-hidden": "true", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: /* @__PURE__ */ jsx44("path", { d: "m4 4 8 8M12 4l-8 8" }) })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx44("div", { className: "pano-map-dialog-body", style: { minHeight: 0, flex: 1 }, children })
         ]
       }
-    ) : null,
-    captionsEnabled ? /* @__PURE__ */ jsx41(PanoVideoCaptions, { appearance: typeof captions === "object" ? captions : void 0 }) : null
+    )
   ] });
 }
+function PanoMapOverlay({
+  map,
+  activeSceneId,
+  onSelectScene,
+  view,
+  mode = "view",
+  selectedSpotId,
+  onSelectedSpotIdChange,
+  onEditChange,
+  placementSceneId,
+  presentationOverride,
+  presentation: presentationModeProp,
+  corner: cornerProp,
+  width: widthProp,
+  height: heightProp,
+  offsetX: offsetXProp,
+  offsetY: offsetYProp,
+  dialogWidth = DEFAULT_DIALOG_WIDTH,
+  dialogHeight = DEFAULT_DIALOG_HEIGHT,
+  interaction,
+  maxScale,
+  initialScale,
+  showZoomControls,
+  showCollapseControl,
+  iconSize,
+  openLabel = "Map",
+  closeLabel = "Close",
+  title = "Map",
+  className,
+  style,
+  editorSurface = false
+}) {
+  const { size } = usePanoOverlay();
+  const [open, setOpen] = useState29(false);
+  const [collapsed, setCollapsed] = useState29(false);
+  const basePresentation = presentationOverride ?? map.presentation ?? {
+    mode: "docked",
+    corner: "bottom-left",
+    width: 220,
+    height: 160,
+    offsetX: 16,
+    offsetY: 16
+  };
+  const presentationMode = presentationModeProp ?? basePresentation.mode;
+  const corner = cornerProp ?? basePresentation.corner ?? "bottom-left";
+  const offsetX = offsetXProp ?? basePresentation.offsetX ?? 16;
+  const offsetY = offsetYProp ?? basePresentation.offsetY ?? 16;
+  const width = widthProp ?? basePresentation.width ?? (presentationMode === "dialog" ? 48 : 220);
+  const height = heightProp ?? basePresentation.height ?? (presentationMode === "dialog" ? 48 : 160);
+  const resolvedMap = useMemo31(() => {
+    if (interaction === void 0 && maxScale === void 0 && iconSize === void 0) {
+      return map;
+    }
+    return {
+      ...map,
+      ...interaction === void 0 ? {} : { interaction },
+      ...maxScale === void 0 ? {} : { maxScale },
+      ...iconSize === void 0 ? {} : { iconSize }
+    };
+  }, [iconSize, interaction, map, maxScale]);
+  const mapProps = {
+    map: resolvedMap,
+    activeSceneId,
+    view,
+    mode,
+    selectedSpotId,
+    onSelectedSpotIdChange,
+    onEditChange,
+    placementSceneId,
+    initialScale,
+    showZoomControls,
+    showCollapseControl,
+    onSelectScene: (sceneId, spot) => {
+      onSelectScene?.(sceneId, spot);
+      if (presentationMode === "dialog") setOpen(false);
+    }
+  };
+  const editorBox = useMemo31(() => {
+    const panelWidth2 = widthProp !== void 0 && Number.isFinite(widthProp) && widthProp > 0 ? widthProp : Math.min(420, Math.max(240, size.width * 0.45));
+    const panelHeight2 = heightProp !== void 0 && Number.isFinite(heightProp) && heightProp > 0 ? heightProp : Math.min(320, Math.max(180, size.height * 0.45));
+    return {
+      left: 16,
+      right: "auto",
+      top: "auto",
+      bottom: 16,
+      width: panelWidth2,
+      height: panelHeight2
+    };
+  }, [heightProp, size.height, size.width, widthProp]);
+  if (editorSurface) {
+    return /* @__PURE__ */ jsx44(
+      "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__ */ jsx44(PanoMap, { ...mapProps, showCollapseControl: false })
+      }
+    );
+  }
+  if (presentationMode === "dialog") {
+    const launcherBox = dockedBox(corner, offsetX, offsetY, width, height);
+    return /* @__PURE__ */ jsxs25("div", { className: ["pano-map-overlay", className].filter(Boolean).join(" "), "data-pano-map-overlay": "", children: [
+      /* @__PURE__ */ jsx44(
+        "button",
+        {
+          type: "button",
+          className: "pano-map-launcher",
+          "aria-label": openLabel,
+          style: {
+            position: "absolute",
+            pointerEvents: "auto",
+            ...launcherBox,
+            ...style
+          },
+          onClick: () => setOpen(true),
+          children: openLabel
+        }
+      ),
+      /* @__PURE__ */ jsx44(
+        PanoMapDialogShell,
+        {
+          open,
+          onOpenChange: setOpen,
+          title,
+          closeLabel,
+          dialogWidth,
+          dialogHeight,
+          children: /* @__PURE__ */ jsx44("div", { style: { height: "100%" }, children: /* @__PURE__ */ jsx44(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__ */ jsx44(
+    "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__ */ jsx44(
+        PanoMap,
+        {
+          ...mapProps,
+          collapsed,
+          onCollapsedChange: setCollapsed
+        }
+      )
+    }
+  );
+}
 export {
   AudioHotspot,
   AutoRotate,
@@ -19247,6 +21324,7 @@ export {
   DEFAULT_HOTSPOT_TOOLTIP_APPEARANCE,
   DEFAULT_HOTSPOT_TOOLTIP_OFFSET,
   DEFAULT_PANO_CURSORS,
+  DEFAULT_PANO_SCENE_MENU_APPEARANCE,
   DEFAULT_PANO_VIDEO_CAPTION_APPEARANCE,
   DEFAULT_PANO_VIDEO_CONTROLS_APPEARANCE,
   DEFAULT_PANO_VIDEO_PLAYBACK_RATES,
@@ -19264,7 +21342,10 @@ export {
   PanoContextMenu,
   PanoEvents,
   PanoFilter,
+  PanoMap,
+  PanoMapOverlay,
   PanoOverlayPortalProvider,
+  PanoSceneMenu,
   PanoVideo,
   PanoVideoControls,
   PanoViewer,
@@ -19284,13 +21365,19 @@ export {
   WebVR,
   clampPanoPitch,
   composePanoContextMenuItems,
+  containRect,
+  containerPointToImage,
   createDefaultPanoContextMenuItems,
   createPanoContextMenuPresets,
   cycleSceneId,
+  headingFromVector,
+  horizontalFov,
+  imagePointToContainer,
   normalizePanoPosition,
   normalizePanoYaw,
   panoPositionToVector3,
   resolvePanoContextMenuEntries,
+  sectorRotation,
   unwrapPolygonVertices,
   usePanoEvents,
   usePanoModal,