@ericchen1990/pano-view 3.8.0 → 3.9.0

package/dist/index.cjs

@@ -2254,6 +2254,7 @@ __export(index_exports, {
   DEFAULT_HOTSPOT_TOOLTIP_APPEARANCE: () => DEFAULT_HOTSPOT_TOOLTIP_APPEARANCE,
   DEFAULT_HOTSPOT_TOOLTIP_OFFSET: () => DEFAULT_HOTSPOT_TOOLTIP_OFFSET,
   DEFAULT_PANO_CURSORS: () => DEFAULT_PANO_CURSORS,
+  DEFAULT_PANO_SCENE_MENU_APPEARANCE: () => DEFAULT_PANO_SCENE_MENU_APPEARANCE,
   DEFAULT_PANO_VIDEO_CAPTION_APPEARANCE: () => DEFAULT_PANO_VIDEO_CAPTION_APPEARANCE,
   DEFAULT_PANO_VIDEO_CONTROLS_APPEARANCE: () => DEFAULT_PANO_VIDEO_CONTROLS_APPEARANCE,
   DEFAULT_PANO_VIDEO_PLAYBACK_RATES: () => DEFAULT_PANO_VIDEO_PLAYBACK_RATES,
@@ -2274,6 +2275,7 @@ __export(index_exports, {
   PanoMap: () => PanoMap,
   PanoMapOverlay: () => PanoMapOverlay,
   PanoOverlayPortalProvider: () => PanoOverlayPortalProvider,
+  PanoSceneMenu: () => PanoSceneMenu,
   PanoVideo: () => PanoVideo,
   PanoVideoControls: () => PanoVideoControls,
   PanoViewer: () => PanoViewer,
@@ -18240,8 +18242,908 @@ var WebVR = (0, import_react61.forwardRef)(function WebVR2({
   ] });
 });
 
-// src/use-pano-viewer.ts
+// src/pano-scene-menu.tsx
 var import_react62 = require("react");
+
+// 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 {
+    inertia: motion?.inertia !== false,
+    bounce: motion?.bounce !== false
+  };
+}
+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 (raw >= min && raw <= max) {
+    return raw;
+  }
+  if (!bounce) {
+    return clampAxis(raw, min, max);
+  }
+  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 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
+var import_jsx_runtime41 = require("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 };
+  }
+  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";
+    }
+  }
+}
+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;
+    }
+  }
+}
+function Chevron({ arrow }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    "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__ */ (0, import_jsx_runtime41.jsx)("path", { d: CHEVRON_PATHS[arrow] })
+    }
+  );
+}
+function ControlButton({
+  className,
+  disabled,
+  label,
+  onClick,
+  children
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    "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" };
+    }
+  }
+}
+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 };
+  }
+  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" };
+    }
+  }
+}
+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 {};
+    }
+  }
+}
+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 = (0, import_react62.useId)();
+  const listRef = (0, import_react62.useRef)(null);
+  const trackRef = (0, import_react62.useRef)(null);
+  const itemRefs = (0, import_react62.useRef)(/* @__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] = (0, import_react62.useState)(defaultExpanded);
+  const expanded = collapsible ? isExpandedControlled ? expandedProp : internalExpanded : true;
+  const [offset, setOffset] = (0, import_react62.useState)(0);
+  const [viewportSize, setViewportSize] = (0, import_react62.useState)(0);
+  const [contentSize, setContentSize] = (0, import_react62.useState)(0);
+  const offsetRef = (0, import_react62.useRef)(0);
+  const dragRef = (0, import_react62.useRef)(null);
+  const animRef = (0, import_react62.useRef)(null);
+  const maxOffset = Math.max(0, contentSize - viewportSize);
+  offsetRef.current = offset;
+  const activeIndex = (0, import_react62.useMemo)(() => {
+    if (activeId == null) {
+      return -1;
+    }
+    return items.findIndex((item) => item.id === activeId);
+  }, [activeId, items]);
+  const cancelScrollAnimation = (0, import_react62.useCallback)(() => {
+    const anim = animRef.current;
+    if (anim?.raf != null) {
+      cancelAnimationFrame(anim.raf);
+    }
+    animRef.current = null;
+  }, []);
+  const clampOffset = (0, import_react62.useCallback)(
+    (value) => Math.min(maxOffset, Math.max(0, value)),
+    [maxOffset]
+  );
+  const startScrollAnimation = (0, import_react62.useCallback)(
+    (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
+    ]
+  );
+  (0, import_react62.useEffect)(() => () => cancelScrollAnimation(), [cancelScrollAnimation]);
+  (0, import_react62.useLayoutEffect)(() => {
+    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]);
+  (0, import_react62.useEffect)(() => {
+    if (!customDrag) return;
+    if (dragRef.current || animRef.current) return;
+    setOffset((previous) => Math.min(maxOffset, Math.max(0, previous)));
+  }, [customDrag, maxOffset]);
+  (0, import_react62.useEffect)(() => {
+    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 = (0, import_react62.useMemo)(() => {
+    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 = (0, import_react62.useRef)(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__ */ (0, import_jsx_runtime41.jsxs)(
+    "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__ */ (0, import_jsx_runtime41.jsxs)(
+          "div",
+          {
+            "aria-hidden": expanded ? void 0 : true,
+            className: "pano-scene-menu-body",
+            ...!expanded ? { inert: true } : null,
+            children: [
+              showArrows ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                ControlButton,
+                {
+                  className: "pano-scene-menu-arrow",
+                  disabled: !canGoPrevious || !expanded,
+                  label: previousLabel,
+                  onClick: () => selectRelative(-1),
+                  children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Chevron, { arrow: arrowChevron("prev", orientation2) })
+                }
+              ) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                "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__ */ (0, import_jsx_runtime41.jsx)(
+                    "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__ */ (0, import_jsx_runtime41.jsx)(
+                          "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__ */ (0, import_jsx_runtime41.jsxs)("span", { className: "pano-scene-menu-thumb", children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                                "img",
+                                {
+                                  alt: "",
+                                  decoding: "async",
+                                  draggable: false,
+                                  src: item.thumbnailUrl
+                                }
+                              ),
+                              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "pano-scene-menu-label", children: name })
+                            ] })
+                          },
+                          item.id
+                        );
+                      })
+                    }
+                  )
+                }
+              ),
+              showArrows ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                ControlButton,
+                {
+                  className: "pano-scene-menu-arrow",
+                  disabled: !canGoNext || !expanded,
+                  label: nextLabel,
+                  onClick: () => selectRelative(1),
+                  children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Chevron, { arrow: arrowChevron("next", orientation2) })
+                }
+              ) : null
+            ]
+          }
+        ),
+        collapsible ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+          ControlButton,
+          {
+            className: "pano-scene-menu-toggle",
+            label: expanded ? collapseLabel : expandLabel,
+            onClick: () => setExpanded(!expanded),
+            children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Chevron, { arrow: toggleChevron(placement, expanded) })
+          }
+        ) : null
+      ]
+    }
+  );
+}
+
+// src/use-pano-viewer.ts
+var import_react63 = require("react");
 function createPanoViewerHandle(ref) {
   return {
     getView: () => ref.current?.getView() ?? { yaw: 0, pitch: 0, fov: 75 },
@@ -18323,16 +19225,16 @@ function createPanoViewerHandle(ref) {
   };
 }
 function usePanoViewer() {
-  const ref = (0, import_react62.useRef)(null);
-  const handle = (0, import_react62.useMemo)(() => createPanoViewerHandle(ref), []);
-  return (0, import_react62.useMemo)(() => ({ ref, ...handle }), [handle]);
+  const ref = (0, import_react63.useRef)(null);
+  const handle = (0, import_react63.useMemo)(() => createPanoViewerHandle(ref), []);
+  return (0, import_react63.useMemo)(() => ({ ref, ...handle }), [handle]);
 }
 
 // src/video/pano-video.tsx
 var import_fiber31 = require("@react-three/fiber");
-var import_react63 = require("react");
+var import_react64 = require("react");
 var import_three40 = require("three");
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 var EMPTY_TRACKS = [];
 var EMPTY_RATES = DEFAULT_PANO_VIDEO_PLAYBACK_RATES;
 function createEmptySnapshot() {
@@ -18417,10 +19319,10 @@ function applyEquirectangularLayout(texture, anisotropy) {
 }
 function usePosterTexture2(poster, onError) {
   const gl = (0, import_fiber31.useThree)((state) => state.gl);
-  const [texture, setTexture] = (0, import_react63.useState)(null);
-  const onErrorRef = (0, import_react63.useRef)(onError);
+  const [texture, setTexture] = (0, import_react64.useState)(null);
+  const onErrorRef = (0, import_react64.useRef)(onError);
   onErrorRef.current = onError;
-  (0, import_react63.useEffect)(() => {
+  (0, import_react64.useEffect)(() => {
     let active = true;
     setTexture(null);
     if (!poster) {
@@ -18457,7 +19359,7 @@ function usePosterTexture2(poster, onError) {
       active = false;
     };
   }, [gl, poster]);
-  (0, import_react63.useEffect)(
+  (0, import_react64.useEffect)(
     () => () => {
       texture?.dispose();
     },
@@ -18516,37 +19418,37 @@ function PanoVideo({
 }) {
   usePanoMediaActivationIntent(autoPlay);
   const gl = (0, import_fiber31.useThree)((state) => state.gl);
-  const host = (0, import_react63.useContext)(PanoVideoHostContext);
-  const variants = (0, import_react63.useMemo)(
+  const host = (0, import_react64.useContext)(PanoVideoHostContext);
+  const variants = (0, import_react64.useMemo)(
     () => resolvePanoVideoVariants({ poster, src, variants: variantsProp }),
     [poster, src, variantsProp]
   );
   const tracks = tracksProp ?? EMPTY_TRACKS;
   const captionsEnabled = captions !== false;
-  const captionAppearance = (0, import_react63.useMemo)(
+  const captionAppearance = (0, import_react64.useMemo)(
     () => resolvePanoVideoCaptionAppearance(
       typeof captions === "object" ? captions : void 0
     ),
     [captions]
   );
-  const [variantId, setVariantId] = (0, import_react63.useState)(
+  const [variantId, setVariantId] = (0, import_react64.useState)(
     () => resolvePanoVideoVariantId(variants, defaultVariantId)
   );
-  const [trackId, setTrackId] = (0, import_react63.useState)(
+  const [trackId, setTrackId] = (0, import_react64.useState)(
     () => captionsEnabled ? defaultPanoVideoTrackId(tracks) : null
   );
-  const [ready, setReady] = (0, import_react63.useState)(false);
-  const autoPlayRef = (0, import_react63.useRef)(autoPlay);
+  const [ready, setReady] = (0, import_react64.useState)(false);
+  const autoPlayRef = (0, import_react64.useRef)(autoPlay);
   autoPlayRef.current = autoPlay;
-  const blockedRef = (0, import_react63.useRef)(false);
-  const captionAppearanceOverrideRef = (0, import_react63.useRef)(
+  const blockedRef = (0, import_react64.useRef)(false);
+  const captionAppearanceOverrideRef = (0, import_react64.useRef)(
     {}
   );
-  const mediaCapabilitiesRef = (0, import_react63.useRef)({
+  const mediaCapabilitiesRef = (0, import_react64.useRef)({
     volumeAdjustable: true,
     playbackRates: [...DEFAULT_PANO_VIDEO_PLAYBACK_RATES]
   });
-  const storeRef = (0, import_react63.useRef)(null);
+  const storeRef = (0, import_react64.useRef)(null);
   if (!storeRef.current) {
     storeRef.current = {
       snapshot: {
@@ -18556,7 +19458,7 @@ function PanoVideo({
       listeners: /* @__PURE__ */ new Set()
     };
   }
-  const actionsRef = (0, import_react63.useRef)({
+  const actionsRef = (0, import_react64.useRef)({
     play: async () => {
     },
     pause: () => {
@@ -18576,19 +19478,19 @@ function PanoVideo({
     setCaptionAppearance: (_appearance) => {
     }
   });
-  const onLoadRef = (0, import_react63.useRef)(onLoad);
-  const onErrorRef = (0, import_react63.useRef)(onError);
-  const onPlaybackStateChangeRef = (0, import_react63.useRef)(onPlaybackStateChange);
-  const onEndedRef = (0, import_react63.useRef)(onEnded);
-  const onVariantChangeRef = (0, import_react63.useRef)(onVariantChange);
-  const onTrackChangeRef = (0, import_react63.useRef)(onTrackChange);
+  const onLoadRef = (0, import_react64.useRef)(onLoad);
+  const onErrorRef = (0, import_react64.useRef)(onError);
+  const onPlaybackStateChangeRef = (0, import_react64.useRef)(onPlaybackStateChange);
+  const onEndedRef = (0, import_react64.useRef)(onEnded);
+  const onVariantChangeRef = (0, import_react64.useRef)(onVariantChange);
+  const onTrackChangeRef = (0, import_react64.useRef)(onTrackChange);
   onLoadRef.current = onLoad;
   onErrorRef.current = onError;
   onPlaybackStateChangeRef.current = onPlaybackStateChange;
   onEndedRef.current = onEnded;
   onVariantChangeRef.current = onVariantChange;
   onTrackChangeRef.current = onTrackChange;
-  const resource = (0, import_react63.useMemo)(() => {
+  const resource = (0, import_react64.useMemo)(() => {
     if (typeof document === "undefined") {
       return null;
     }
@@ -18603,7 +19505,7 @@ function PanoVideo({
     texture.generateMipmaps = false;
     return { video, texture };
   }, []);
-  (0, import_react63.useEffect)(
+  (0, import_react64.useEffect)(
     () => () => {
       if (!resource) {
         return;
@@ -18618,13 +19520,13 @@ function PanoVideo({
     },
     [resource]
   );
-  (0, import_react63.useEffect)(() => {
+  (0, import_react64.useEffect)(() => {
     if (!resource) {
       return;
     }
     resource.texture.anisotropy = gl.capabilities.getMaxAnisotropy();
   }, [gl, resource]);
-  (0, import_react63.useLayoutEffect)(() => {
+  (0, import_react64.useLayoutEffect)(() => {
     if (!resource) {
       return;
     }
@@ -18640,7 +19542,7 @@ function PanoVideo({
     activeVariant?.poster ?? poster,
     onError
   );
-  const emitSnapshot = (0, import_react63.useCallback)(
+  const emitSnapshot = (0, import_react64.useCallback)(
     (patch) => {
       const store = storeRef.current;
       const video = resource?.video;
@@ -18692,7 +19594,7 @@ function PanoVideo({
       captionAppearance
     ]
   );
-  const controller = (0, import_react63.useMemo)(
+  const controller = (0, import_react64.useMemo)(
     () => ({
       subscribe: (onStoreChange) => {
         const store = storeRef.current;
@@ -18744,7 +19646,7 @@ function PanoVideo({
     }),
     []
   );
-  (0, import_react63.useLayoutEffect)(() => {
+  (0, import_react64.useLayoutEffect)(() => {
     if (!host || variants.length === 0) {
       return;
     }
@@ -18757,7 +19659,7 @@ function PanoVideo({
       notifyPanoVideoHost(host);
     };
   }, [captionsEnabled, controller, controls, host, variants.length]);
-  (0, import_react63.useLayoutEffect)(() => {
+  (0, import_react64.useLayoutEffect)(() => {
     if (!resource) {
       return;
     }
@@ -18770,10 +19672,10 @@ function PanoVideo({
     };
     emitSnapshot();
   }, [emitSnapshot, playbackRates, resource]);
-  (0, import_react63.useEffect)(() => {
+  (0, import_react64.useEffect)(() => {
     emitSnapshot();
   }, [emitSnapshot]);
-  (0, import_react63.useEffect)(() => {
+  (0, import_react64.useEffect)(() => {
     if (!resource || !activeVariant || !mediaKey) {
       return;
     }
@@ -18830,7 +19732,7 @@ function PanoVideo({
       video.removeEventListener("error", handleError);
     };
   }, [mediaKey, resource]);
-  (0, import_react63.useEffect)(() => {
+  (0, import_react64.useEffect)(() => {
     if (!resource) {
       return;
     }
@@ -18922,7 +19824,7 @@ function PanoVideo({
       }
     };
   }, [emitSnapshot, resource]);
-  (0, import_react63.useLayoutEffect)(() => {
+  (0, import_react64.useLayoutEffect)(() => {
     if (!resource) {
       return;
     }
@@ -18935,7 +19837,7 @@ function PanoVideo({
     applyInlineVideoPlayback(video, playsInline);
     video.preload = preload;
   }, [loop, muted, playsInline, preload, resource, volume]);
-  (0, import_react63.useEffect)(() => {
+  (0, import_react64.useEffect)(() => {
     if (!resource) {
       return;
     }
@@ -18985,7 +19887,7 @@ function PanoVideo({
       video.removeEventListener("ratechange", handleVolume);
     };
   }, [emitSnapshot, resource]);
-  (0, import_react63.useEffect)(() => {
+  (0, import_react64.useEffect)(() => {
     if (!resource) {
       return;
     }
@@ -19020,7 +19922,7 @@ function PanoVideo({
       video.textTracks.removeEventListener("change", applyModes);
     };
   }, [emitSnapshot, resource, trackId, tracks]);
-  (0, import_react63.useEffect)(() => {
+  (0, import_react64.useEffect)(() => {
     if (!captionsEnabled) {
       setTrackId(null);
       return;
@@ -19031,15 +19933,15 @@ function PanoVideo({
   if (variants.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
-    activeTexture ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
+    activeTexture ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
       "mesh",
       {
         rotation: [0, import_three40.MathUtils.degToRad(90 + yawOffset2), 0],
         visible,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("sphereGeometry", { args: [DEFAULT_PANORAMA_RADIUS, 128, 64] }),
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("sphereGeometry", { args: [DEFAULT_PANORAMA_RADIUS, 128, 64] }),
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
             PanoBasicMaterial,
             {
               map: activeTexture,
@@ -19050,12 +19952,12 @@ function PanoVideo({
         ]
       }
     ) : null,
-    captionsEnabled ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(PanoVideoCaptions, { appearance: typeof captions === "object" ? captions : void 0 }) : null
+    captionsEnabled ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(PanoVideoCaptions, { appearance: typeof captions === "object" ? captions : void 0 }) : null
   ] });
 }
 
 // src/map/pano-map.tsx
-var import_react65 = require("react");
+var import_react66 = require("react");
 
 // src/map/geometry.ts
 function sectorRotation(heading, yaw) {
@@ -19115,14 +20017,14 @@ function normalizeDegrees(value) {
 }
 
 // src/map/use-map-view.ts
-var import_react64 = require("react");
+var import_react65 = require("react");
 var DEFAULT_VIEW2 = { yaw: 0, pitch: 0, fov: 75 };
 function useMapView(controlled) {
-  const eventBus = (0, import_react64.useContext)(PanoEventBusContext);
-  const [view, setView] = (0, import_react64.useState)(controlled ?? DEFAULT_VIEW2);
-  const controlledRef = (0, import_react64.useRef)(controlled);
+  const eventBus = (0, import_react65.useContext)(PanoEventBusContext);
+  const [view, setView] = (0, import_react65.useState)(controlled ?? DEFAULT_VIEW2);
+  const controlledRef = (0, import_react65.useRef)(controlled);
   controlledRef.current = controlled;
-  (0, import_react64.useEffect)(() => {
+  (0, import_react65.useEffect)(() => {
     if (controlled !== void 0) {
       setView(controlled);
       return;
@@ -19137,7 +20039,7 @@ function useMapView(controlled) {
 }
 
 // src/map/pano-map.tsx
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 var DEFAULT_ICON_SIZE2 = 28;
 var DEFAULT_SECTOR_COLOR = "#ffffff";
 var DEFAULT_SECTOR_OPACITY = 0.55;
@@ -19176,8 +20078,8 @@ function SectorShape({
     ...gradient.stops.map((stop) => stop.opacity ?? 1),
     Number.EPSILON
   ) : 1;
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("g", { ref: transformRef, transform: `rotate(${rotation})`, style: { pointerEvents: "none" }, children: [
-    gradient ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("defs", { children: gradient.type === "radial" ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("radialGradient", { id: gradientId, cx: "0", cy: "0", r: radius, gradientUnits: "userSpaceOnUse", children: gradient.stops.map((stop, index) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("g", { ref: transformRef, transform: `rotate(${rotation})`, style: { pointerEvents: "none" }, children: [
+    gradient ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("defs", { children: gradient.type === "radial" ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("radialGradient", { id: gradientId, cx: "0", cy: "0", r: radius, gradientUnits: "userSpaceOnUse", children: gradient.stops.map((stop, index) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
       "stop",
       {
         offset: `${stop.offset * 100}%`,
@@ -19185,7 +20087,7 @@ function SectorShape({
         stopOpacity: (stop.opacity ?? 1) / gradientStrength
       },
       `${stop.offset}:${index}`
-    )) }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+    )) }) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
       "linearGradient",
       {
         id: gradientId,
@@ -19194,7 +20096,7 @@ function SectorShape({
         x2: "0",
         y2: -radius,
         gradientUnits: "userSpaceOnUse",
-        children: gradient.stops.map((stop, index) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+        children: gradient.stops.map((stop, index) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
           "stop",
           {
             offset: `${stop.offset * 100}%`,
@@ -19205,7 +20107,7 @@ function SectorShape({
         ))
       }
     ) }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
       "path",
       {
         d: path,
@@ -19225,7 +20127,7 @@ function SectorShape({
   ] });
 }
 function DefaultSpotIcon({ active, size }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
     "svg",
     {
       width: size,
@@ -19234,7 +20136,7 @@ function DefaultSpotIcon({ active, size }) {
       "aria-hidden": "true",
       style: { display: "block" },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
           "rect",
           {
             x: "3",
@@ -19247,8 +20149,8 @@ function DefaultSpotIcon({ active, size }) {
             strokeWidth: "2"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("circle", { cx: "16", cy: "16", r: "5", fill: "none", stroke: "rgba(255,255,255,0.92)", strokeWidth: "2" }),
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("circle", { cx: "16", cy: "16", r: "2", fill: active ? "#ef4444" : "rgba(255,255,255,0.85)" })
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("circle", { cx: "16", cy: "16", r: "5", fill: "none", stroke: "rgba(255,255,255,0.92)", strokeWidth: "2" }),
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("circle", { cx: "16", cy: "16", r: "2", fill: active ? "#ef4444" : "rgba(255,255,255,0.85)" })
       ]
     }
   );
@@ -19269,38 +20171,51 @@ function PanoMap({
   showCollapseControl,
   collapsed: controlledCollapsed,
   onCollapsedChange,
-  renderChrome
+  renderChrome,
+  initialScale
 }) {
-  const reactId = (0, import_react65.useId)().replace(/:/g, "");
+  const reactId = (0, import_react66.useId)().replace(/:/g, "");
   const view = useMapView(controlledView);
-  const rootRef = (0, import_react65.useRef)(null);
-  const containerRef = (0, import_react65.useRef)(null);
-  const sectorNodeRef = (0, import_react65.useRef)(null);
-  const yawRef = (0, import_react65.useRef)(view.yaw);
-  const [size, setSize] = (0, import_react65.useState)({ width: 0, height: 0 });
-  const [imageSize2, setImageSize] = (0, import_react65.useState)({ width: 0, height: 0 });
-  const [scale, setScale] = (0, import_react65.useState)(1);
-  const [pan, setPan] = (0, import_react65.useState)({ x: 0, y: 0 });
-  const [uncontrolledCollapsed, setUncontrolledCollapsed] = (0, import_react65.useState)(false);
-  const dragRef = (0, import_react65.useRef)(null);
+  const rootRef = (0, import_react66.useRef)(null);
+  const containerRef = (0, import_react66.useRef)(null);
+  const sectorNodeRef = (0, import_react66.useRef)(null);
+  const yawRef = (0, import_react66.useRef)(view.yaw);
+  const [size, setSize] = (0, import_react66.useState)({ width: 0, height: 0 });
+  const [imageSize2, setImageSize] = (0, import_react66.useState)({ width: 0, height: 0 });
+  const [scale, setScale] = (0, import_react66.useState)(1);
+  const [pan, setPan] = (0, import_react66.useState)({ x: 0, y: 0 });
+  const [uncontrolledCollapsed, setUncontrolledCollapsed] = (0, import_react66.useState)(false);
+  const dragRef = (0, import_react66.useRef)(null);
+  const panAnimRef = (0, import_react66.useRef)(null);
+  const panRef = (0, import_react66.useRef)(pan);
+  const scaleRef = (0, import_react66.useRef)(scale);
+  const initialViewKeyRef = (0, import_react66.useRef)(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 = (0, import_react65.useMemo)(
+  const fit = (0, import_react66.useMemo)(
     () => containRect(size.width, size.height, imageSize2.width, imageSize2.height),
     [size, imageSize2]
   );
-  const viewport = (0, import_react65.useMemo)(
+  const viewport = (0, import_react66.useMemo)(
     () => ({ fit, scale, panX: pan.x, panY: pan.y }),
     [fit, scale, pan]
   );
-  (0, import_react65.useLayoutEffect)(() => {
+  (0, import_react66.useLayoutEffect)(() => {
     if (collapsed) return;
     const node = containerRef.current;
     if (!node) return;
@@ -19317,7 +20232,7 @@ function PanoMap({
     observer.observe(node);
     return () => observer.disconnect();
   }, [collapsed]);
-  (0, import_react65.useEffect)(() => {
+  (0, import_react66.useEffect)(() => {
     yawRef.current = view.yaw;
     const node = sectorNodeRef.current;
     if (!node) return;
@@ -19332,24 +20247,108 @@ function PanoMap({
     onCollapsedChange?.(next);
     if (controlledCollapsed === void 0) setUncontrolledCollapsed(next);
   };
-  const clampPan = (0, import_react65.useCallback)(
-    (nextScale, nextPan) => {
+  panRef.current = pan;
+  scaleRef.current = scale;
+  const panBoundsFor = (0, import_react66.useCallback)(
+    (nextScale) => {
       const width = fit.width * nextScale;
       const height = fit.height * nextScale;
-      if (!(fit.width > 0) || !(fit.height > 0)) return nextPan;
-      const minX = Math.min(0, size.width - (fit.left + width));
-      const maxX = Math.max(0, -fit.left);
-      const minY = Math.min(0, size.height - (fit.top + height));
-      const maxY = Math.max(0, -fit.top);
+      if (!(fit.width > 0) || !(fit.height > 0)) {
+        return { minX: 0, maxX: 0, minY: 0, maxY: 0 };
+      }
       return {
-        x: Math.min(maxX, Math.max(minX, nextPan.x)),
-        y: Math.min(maxY, Math.max(minY, nextPan.y))
+        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]
   );
-  (0, import_react65.useEffect)(() => {
+  const clampPan = (0, import_react66.useCallback)(
+    (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 = (0, import_react66.useCallback)(() => {
+    const anim = panAnimRef.current;
+    if (anim?.raf != null) {
+      cancelAnimationFrame(anim.raf);
+    }
+    panAnimRef.current = null;
+  }, []);
+  const startPanAnimation = (0, import_react66.useCallback)(
+    (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]
+  );
+  (0, import_react66.useEffect)(() => () => cancelPanAnimation(), [cancelPanAnimation]);
+  (0, import_react66.useEffect)(() => {
+    if (collapsed) cancelPanAnimation();
+  }, [cancelPanAnimation, collapsed]);
+  (0, import_react66.useEffect)(() => {
     if (!gestureZoom) {
+      initialViewKeyRef.current = null;
       setScale(1);
       setPan({ x: 0, y: 0 });
       return;
@@ -19362,9 +20361,37 @@ function PanoMap({
       return next;
     });
   }, [clampPan, gestureZoom, maxScale]);
-  const applyZoom = (0, import_react65.useCallback)(
+  (0, import_react66.useEffect)(() => {
+    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 = (0, import_react66.useCallback)(
     (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;
@@ -19376,6 +20403,7 @@ function PanoMap({
       setPan(clampPan(clamped, nextPan));
     },
     [
+      cancelPanAnimation,
       clampPan,
       fit.left,
       fit.top,
@@ -19388,7 +20416,7 @@ function PanoMap({
       size.width
     ]
   );
-  (0, import_react65.useEffect)(() => {
+  (0, import_react66.useEffect)(() => {
     const root = rootRef.current;
     if (!root) return;
     const onWheel = (event) => {
@@ -19440,15 +20468,22 @@ function PanoMap({
       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
+        panY: pan.y,
+        samplesX: [{ t: now, position: pan.x }],
+        samplesY: [{ t: now, position: pan.y }]
       };
-      event.currentTarget.setPointerCapture(event.pointerId);
+      try {
+        event.currentTarget.setPointerCapture(event.pointerId);
+      } catch {
+      }
       event.preventDefault();
       event.stopPropagation();
     }
@@ -19459,12 +20494,28 @@ function PanoMap({
     const point = localPoint(event);
     if (!point) return;
     if (drag.kind === "pan") {
-      setPan(
-        clampPan(scale, {
-          x: drag.panX + (point.x - drag.originX),
-          y: drag.panY + (point.y - drag.originY)
-        })
-      );
+      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;
@@ -19505,11 +20556,24 @@ function PanoMap({
     event.stopPropagation();
   };
   const endDrag = (event) => {
-    if (dragRef.current?.pointerId !== event.pointerId) return;
+    const drag = dragRef.current;
+    if (drag?.pointerId !== event.pointerId) return;
     dragRef.current = null;
-    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
-      event.currentTarget.releasePointerCapture(event.pointerId);
+    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;
     }
+    startPanAnimation({
+      x: velocityFromSamples(drag.samplesX),
+      y: velocityFromSamples(drag.samplesY)
+    });
   };
   const sectorAngle = (() => {
     if (!map.sector) return 0;
@@ -19519,8 +20583,8 @@ function PanoMap({
   })();
   const activeSpot = spots.find((spot) => spot.sceneId === activeSceneId);
   const selectedSpot = spots.find((spot) => spot.id === selectedSpotId);
-  const controls = /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "pano-map-controls", style: { pointerEvents: "auto" }, children: [
-    collapseControl ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  const controls = /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "pano-map-controls", style: { pointerEvents: "auto" }, children: [
+    collapseControl ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
       "button",
       {
         type: "button",
@@ -19536,8 +20600,8 @@ function PanoMap({
         children: collapsed ? "\u25A3" : "\u25A2"
       }
     ) : null,
-    zoomControls && !collapsed ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+    zoomControls && !collapsed ? /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
         "button",
         {
           type: "button",
@@ -19552,7 +20616,7 @@ function PanoMap({
           children: "+"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
         "button",
         {
           type: "button",
@@ -19575,7 +20639,7 @@ function PanoMap({
       (previous) => previous.width === image.naturalWidth && previous.height === image.naturalHeight ? previous : { width: image.naturalWidth, height: image.naturalHeight }
     );
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
     "div",
     {
       ref: rootRef,
@@ -19593,8 +20657,8 @@ function PanoMap({
       "data-mode": mode,
       "data-collapsed": collapsed ? "true" : void 0,
       children: [
-        renderChrome ? renderChrome(controls) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "pano-map-chrome", children: controls }),
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+        renderChrome ? renderChrome(controls) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "pano-map-chrome", children: controls }),
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
           "div",
           {
             ref: containerRef,
@@ -19611,7 +20675,7 @@ function PanoMap({
             onPointerUp: endDrag,
             onPointerCancel: endDrag,
             children: [
-              fit.width > 0 && fit.height > 0 ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+              fit.width > 0 && fit.height > 0 ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
                 "div",
                 {
                   className: "pano-map-image-layer",
@@ -19623,7 +20687,7 @@ function PanoMap({
                     height: fit.height * scale,
                     transformOrigin: "0 0"
                   },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
                     "img",
                     {
                       src: map.image,
@@ -19645,7 +20709,7 @@ function PanoMap({
                     }
                   )
                 }
-              ) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+              ) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
                 "img",
                 {
                   src: map.image,
@@ -19659,7 +20723,7 @@ function PanoMap({
                   }
                 }
               ),
-              activeSpot && map.sector ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+              activeSpot && map.sector ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
                 "svg",
                 {
                   className: "pano-map-sector-layer",
@@ -19671,11 +20735,11 @@ function PanoMap({
                     overflow: "visible",
                     pointerEvents: "none"
                   },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
                     "g",
                     {
                       transform: `translate(${imagePointToContainer(activeSpot, viewport).x} ${imagePointToContainer(activeSpot, viewport).y})`,
-                      children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+                      children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
                         SectorShape,
                         {
                           sector: map.sector,
@@ -19707,7 +20771,7 @@ function PanoMap({
                 const point = imagePointToContainer(spot, viewport);
                 const active = spot.sceneId === activeSceneId;
                 const selected = spot.id === selectedSpotId;
-                return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
                   "button",
                   {
                     type: "button",
@@ -19752,7 +20816,7 @@ function PanoMap({
                       if (editing) return;
                       onSelectScene?.(spot.sceneId, spot);
                     },
-                    children: spot.icon ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+                    children: spot.icon ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
                       "img",
                       {
                         src: spot.icon,
@@ -19760,7 +20824,7 @@ function PanoMap({
                         draggable: false,
                         style: { width: "100%", height: "100%", display: "block", pointerEvents: "none" }
                       }
-                    ) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(DefaultSpotIcon, { active, size: iconSize })
+                    ) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(DefaultSpotIcon, { active, size: iconSize })
                   },
                   spot.id
                 );
@@ -19774,8 +20838,10 @@ function PanoMap({
 }
 
 // src/map/pano-map-overlay.tsx
-var import_react66 = require("react");
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_react67 = require("react");
+var import_jsx_runtime44 = require("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" };
@@ -19786,14 +20852,16 @@ function PanoMapDialogShell({
   onOpenChange,
   title,
   closeLabel,
+  dialogWidth,
+  dialogHeight,
   children
 }) {
   usePanoModal(open);
   const { size } = usePanoOverlay();
-  const titleId = (0, import_react66.useId)();
-  const panelRef = (0, import_react66.useRef)(null);
-  const previouslyFocused = (0, import_react66.useRef)(null);
-  (0, import_react66.useEffect)(() => {
+  const titleId = (0, import_react67.useId)();
+  const panelRef = (0, import_react67.useRef)(null);
+  const previouslyFocused = (0, import_react67.useRef)(null);
+  (0, import_react67.useEffect)(() => {
     if (!open) return;
     const active = panelRef.current?.ownerDocument.activeElement;
     previouslyFocused.current = active instanceof HTMLElement ? active : null;
@@ -19815,12 +20883,14 @@ function PanoMapDialogShell({
     };
   }, [open, onOpenChange]);
   if (!open) return null;
-  const width = Math.min(720, Math.max(0, size.width - 32));
-  const height = Math.min(520, Math.max(0, size.height - 32));
+  const 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__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
       "div",
       {
         className: "pano-map-dialog-backdrop",
@@ -19833,7 +20903,7 @@ function PanoMapDialogShell({
         onClick: () => onOpenChange(false)
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
       "div",
       {
         ref: panelRef,
@@ -19856,9 +20926,9 @@ function PanoMapDialogShell({
           zIndex: 1
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("header", { className: "pano-map-dialog-header", style: { flexShrink: 0 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("h2", { id: titleId, className: "pano-map-dialog-title", children: title }),
-            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("header", { className: "pano-map-dialog-header", style: { flexShrink: 0 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("h2", { id: titleId, className: "pano-map-dialog-title", children: title }),
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
               "button",
               {
                 type: "button",
@@ -19866,11 +20936,11 @@ function PanoMapDialogShell({
                 "data-pano-map-dialog-close": "",
                 "aria-label": closeLabel,
                 onClick: () => onOpenChange(false),
-                children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("svg", { "aria-hidden": "true", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("path", { d: "m4 4 8 8M12 4l-8 8" }) })
+                children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("svg", { "aria-hidden": "true", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("path", { d: "m4 4 8 8M12 4l-8 8" }) })
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "pano-map-dialog-body", style: { minHeight: 0, flex: 1 }, children })
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "pano-map-dialog-body", style: { minHeight: 0, flex: 1 }, children })
         ]
       }
     )
@@ -19887,6 +20957,20 @@ function PanoMapOverlay({
   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",
@@ -19895,9 +20979,9 @@ function PanoMapOverlay({
   editorSurface = false
 }) {
   const { size } = usePanoOverlay();
-  const [open, setOpen] = (0, import_react66.useState)(false);
-  const [collapsed, setCollapsed] = (0, import_react66.useState)(false);
-  const presentation = presentationOverride ?? map.presentation ?? {
+  const [open, setOpen] = (0, import_react67.useState)(false);
+  const [collapsed, setCollapsed] = (0, import_react67.useState)(false);
+  const basePresentation = presentationOverride ?? map.presentation ?? {
     mode: "docked",
     corner: "bottom-left",
     width: 220,
@@ -19905,13 +20989,25 @@ function PanoMapOverlay({
     offsetX: 16,
     offsetY: 16
   };
-  const corner = presentation.corner ?? "bottom-left";
-  const offsetX = presentation.offsetX ?? 16;
-  const offsetY = presentation.offsetY ?? 16;
-  const width = presentation.width ?? (presentation.mode === "dialog" ? 48 : 220);
-  const height = presentation.height ?? (presentation.mode === "dialog" ? 48 : 160);
+  const 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 = (0, import_react67.useMemo)(() => {
+    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,
+    map: resolvedMap,
     activeSceneId,
     view,
     mode,
@@ -19919,14 +21015,17 @@ function PanoMapOverlay({
     onSelectedSpotIdChange,
     onEditChange,
     placementSceneId,
+    initialScale,
+    showZoomControls,
+    showCollapseControl,
     onSelectScene: (sceneId, spot) => {
       onSelectScene?.(sceneId, spot);
-      if (presentation.mode === "dialog") setOpen(false);
+      if (presentationMode === "dialog") setOpen(false);
     }
   };
-  const editorBox = (0, import_react66.useMemo)(() => {
-    const panelWidth2 = Math.min(420, Math.max(240, size.width * 0.45));
-    const panelHeight2 = Math.min(320, Math.max(180, size.height * 0.45));
+  const editorBox = (0, import_react67.useMemo)(() => {
+    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",
@@ -19935,9 +21034,9 @@ function PanoMapOverlay({
       width: panelWidth2,
       height: panelHeight2
     };
-  }, [size.height, size.width]);
+  }, [heightProp, size.height, size.width, widthProp]);
   if (editorSurface) {
-    return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
       "div",
       {
         className: ["pano-map-overlay", "pano-map-overlay-editor", className].filter(Boolean).join(" "),
@@ -19948,14 +21047,14 @@ function PanoMapOverlay({
           ...style
         },
         "data-pano-map-overlay": "",
-        children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PanoMap, { ...mapProps, showCollapseControl: false })
+        children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(PanoMap, { ...mapProps, showCollapseControl: false })
       }
     );
   }
-  if (presentation.mode === "dialog") {
+  if (presentationMode === "dialog") {
     const launcherBox = dockedBox(corner, offsetX, offsetY, width, height);
-    return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: ["pano-map-overlay", className].filter(Boolean).join(" "), "data-pano-map-overlay": "", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: ["pano-map-overlay", className].filter(Boolean).join(" "), "data-pano-map-overlay": "", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
         "button",
         {
           type: "button",
@@ -19971,14 +21070,16 @@ function PanoMapOverlay({
           children: openLabel
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
         PanoMapDialogShell,
         {
           open,
           onOpenChange: setOpen,
           title,
           closeLabel,
-          children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { style: { height: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PanoMap, { ...mapProps, showCollapseControl: false }) })
+          dialogWidth,
+          dialogHeight,
+          children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { style: { height: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(PanoMap, { ...mapProps, showCollapseControl: false }) })
         }
       )
     ] });
@@ -19986,7 +21087,7 @@ function PanoMapOverlay({
   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__ */ (0, import_jsx_runtime43.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
     "div",
     {
       className: ["pano-map-overlay", className].filter(Boolean).join(" "),
@@ -19998,7 +21099,7 @@ function PanoMapOverlay({
       },
       "data-pano-map-overlay": "",
       "data-presentation": "docked",
-      children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
         PanoMap,
         {
           ...mapProps,
@@ -20017,6 +21118,7 @@ function PanoMapOverlay({
   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,
@@ -20037,6 +21139,7 @@ function PanoMapOverlay({
   PanoMap,
   PanoMapOverlay,
   PanoOverlayPortalProvider,
+  PanoSceneMenu,
   PanoVideo,
   PanoVideoControls,
   PanoViewer,