@ericchen1990/pano-view 3.8.0 → 3.9.0

package/dist/index.mjs

@@ -18410,8 +18410,916 @@ var WebVR = forwardRef4(function WebVR2({
   ] });
 });
 
+// src/pano-scene-menu.tsx
+import {
+  useCallback as useCallback11,
+  useEffect as useEffect41,
+  useId as useId3,
+  useLayoutEffect as useLayoutEffect9,
+  useMemo as useMemo27,
+  useRef as useRef40,
+  useState as useState25
+} from "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
+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 };
+  }
+  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__ */ 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" };
+    }
+  }
+}
+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 = 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 useMemo27, useRef as useRef40 } from "react";
+import { useMemo as useMemo28, useRef as useRef41 } from "react";
 function createPanoViewerHandle(ref) {
   return {
     getView: () => ref.current?.getView() ?? { yaw: 0, pitch: 0, fov: 75 },
@@ -18493,21 +19401,21 @@ function createPanoViewerHandle(ref) {
   };
 }
 function usePanoViewer() {
-  const ref = useRef40(null);
-  const handle = useMemo27(() => createPanoViewerHandle(ref), []);
-  return useMemo27(() => ({ ref, ...handle }), [handle]);
+  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 useCallback11,
+  useCallback as useCallback12,
   useContext as useContext28,
-  useEffect as useEffect41,
-  useLayoutEffect as useLayoutEffect9,
-  useMemo as useMemo28,
-  useRef as useRef41,
-  useState as useState25
+  useEffect as useEffect42,
+  useLayoutEffect as useLayoutEffect10,
+  useMemo as useMemo29,
+  useRef as useRef42,
+  useState as useState26
 } from "react";
 import {
   BackSide as BackSide4,
@@ -18519,7 +19427,7 @@ import {
   TextureLoader as TextureLoader8,
   VideoTexture as VideoTexture2
 } from "three";
-import { Fragment as Fragment7, jsx as jsx41, jsxs as jsxs22 } from "react/jsx-runtime";
+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() {
@@ -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,7 +20017,7 @@ function PanoVideo({
       }
     };
   }, [emitSnapshot, resource]);
-  useLayoutEffect9(() => {
+  useLayoutEffect10(() => {
     if (!resource) {
       return;
     }
@@ -19122,7 +20030,7 @@ function PanoVideo({
     applyInlineVideoPlayback(video, playsInline);
     video.preload = preload;
   }, [loop, muted, playsInline, preload, resource, volume]);
-  useEffect41(() => {
+  useEffect42(() => {
     if (!resource) {
       return;
     }
@@ -19172,7 +20080,7 @@ function PanoVideo({
       video.removeEventListener("ratechange", handleVolume);
     };
   }, [emitSnapshot, resource]);
-  useEffect41(() => {
+  useEffect42(() => {
     if (!resource) {
       return;
     }
@@ -19207,7 +20115,7 @@ function PanoVideo({
       video.textTracks.removeEventListener("change", applyModes);
     };
   }, [emitSnapshot, resource, trackId, tracks]);
-  useEffect41(() => {
+  useEffect42(() => {
     if (!captionsEnabled) {
       setTrackId(null);
       return;
@@ -19218,15 +20126,15 @@ function PanoVideo({
   if (variants.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsxs22(Fragment7, { children: [
-    activeTexture ? /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsxs23(Fragment7, { children: [
+    activeTexture ? /* @__PURE__ */ jsxs23(
       "mesh",
       {
         rotation: [0, MathUtils13.degToRad(90 + yawOffset2), 0],
         visible,
         children: [
-          /* @__PURE__ */ jsx41("sphereGeometry", { args: [DEFAULT_PANORAMA_RADIUS, 128, 64] }),
-          /* @__PURE__ */ jsx41(
+          /* @__PURE__ */ jsx42("sphereGeometry", { args: [DEFAULT_PANORAMA_RADIUS, 128, 64] }),
+          /* @__PURE__ */ jsx42(
             PanoBasicMaterial,
             {
               map: activeTexture,
@@ -19237,19 +20145,19 @@ function PanoVideo({
         ]
       }
     ) : null,
-    captionsEnabled ? /* @__PURE__ */ jsx41(PanoVideoCaptions, { appearance: typeof captions === "object" ? captions : void 0 }) : null
+    captionsEnabled ? /* @__PURE__ */ jsx42(PanoVideoCaptions, { appearance: typeof captions === "object" ? captions : void 0 }) : null
   ] });
 }
 
 // src/map/pano-map.tsx
 import {
-  useCallback as useCallback12,
-  useEffect as useEffect43,
-  useId as useId3,
-  useLayoutEffect as useLayoutEffect10,
-  useMemo as useMemo29,
-  useRef as useRef43,
-  useState as useState27
+  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
@@ -19310,14 +20218,14 @@ function normalizeDegrees(value) {
 }
 
 // src/map/use-map-view.ts
-import { useContext as useContext29, useEffect as useEffect42, useRef as useRef42, useState as useState26 } from "react";
+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] = useState26(controlled ?? DEFAULT_VIEW2);
-  const controlledRef = useRef42(controlled);
+  const [view, setView] = useState27(controlled ?? DEFAULT_VIEW2);
+  const controlledRef = useRef43(controlled);
   controlledRef.current = controlled;
-  useEffect42(() => {
+  useEffect43(() => {
     if (controlled !== void 0) {
       setView(controlled);
       return;
@@ -19332,7 +20240,7 @@ function useMapView(controlled) {
 }
 
 // src/map/pano-map.tsx
-import { Fragment as Fragment8, jsx as jsx42, jsxs as jsxs23 } from "react/jsx-runtime";
+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;
@@ -19371,8 +20279,8 @@ function SectorShape({
     ...gradient.stops.map((stop) => stop.opacity ?? 1),
     Number.EPSILON
   ) : 1;
-  return /* @__PURE__ */ jsxs23("g", { ref: transformRef, transform: `rotate(${rotation})`, style: { pointerEvents: "none" }, children: [
-    gradient ? /* @__PURE__ */ jsx42("defs", { children: gradient.type === "radial" ? /* @__PURE__ */ jsx42("radialGradient", { id: gradientId, cx: "0", cy: "0", r: radius, gradientUnits: "userSpaceOnUse", children: gradient.stops.map((stop, index) => /* @__PURE__ */ jsx42(
+  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}%`,
@@ -19380,7 +20288,7 @@ function SectorShape({
         stopOpacity: (stop.opacity ?? 1) / gradientStrength
       },
       `${stop.offset}:${index}`
-    )) }) : /* @__PURE__ */ jsx42(
+    )) }) : /* @__PURE__ */ jsx43(
       "linearGradient",
       {
         id: gradientId,
@@ -19389,7 +20297,7 @@ function SectorShape({
         x2: "0",
         y2: -radius,
         gradientUnits: "userSpaceOnUse",
-        children: gradient.stops.map((stop, index) => /* @__PURE__ */ jsx42(
+        children: gradient.stops.map((stop, index) => /* @__PURE__ */ jsx43(
           "stop",
           {
             offset: `${stop.offset * 100}%`,
@@ -19400,7 +20308,7 @@ function SectorShape({
         ))
       }
     ) }) : null,
-    /* @__PURE__ */ jsx42(
+    /* @__PURE__ */ jsx43(
       "path",
       {
         d: path,
@@ -19420,7 +20328,7 @@ function SectorShape({
   ] });
 }
 function DefaultSpotIcon({ active, size }) {
-  return /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsxs24(
     "svg",
     {
       width: size,
@@ -19429,7 +20337,7 @@ function DefaultSpotIcon({ active, size }) {
       "aria-hidden": "true",
       style: { display: "block" },
       children: [
-        /* @__PURE__ */ jsx42(
+        /* @__PURE__ */ jsx43(
           "rect",
           {
             x: "3",
@@ -19442,8 +20350,8 @@ function DefaultSpotIcon({ active, size }) {
             strokeWidth: "2"
           }
         ),
-        /* @__PURE__ */ jsx42("circle", { cx: "16", cy: "16", r: "5", fill: "none", stroke: "rgba(255,255,255,0.92)", strokeWidth: "2" }),
-        /* @__PURE__ */ jsx42("circle", { cx: "16", cy: "16", r: "2", fill: active ? "#ef4444" : "rgba(255,255,255,0.85)" })
+        /* @__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)" })
       ]
     }
   );
@@ -19464,38 +20372,51 @@ function PanoMap({
   showCollapseControl,
   collapsed: controlledCollapsed,
   onCollapsedChange,
-  renderChrome
+  renderChrome,
+  initialScale
 }) {
-  const reactId = useId3().replace(/:/g, "");
+  const reactId = useId4().replace(/:/g, "");
   const view = useMapView(controlledView);
-  const rootRef = useRef43(null);
-  const containerRef = useRef43(null);
-  const sectorNodeRef = useRef43(null);
-  const yawRef = useRef43(view.yaw);
-  const [size, setSize] = useState27({ width: 0, height: 0 });
-  const [imageSize2, setImageSize] = useState27({ width: 0, height: 0 });
-  const [scale, setScale] = useState27(1);
-  const [pan, setPan] = useState27({ x: 0, y: 0 });
-  const [uncontrolledCollapsed, setUncontrolledCollapsed] = useState27(false);
-  const dragRef = useRef43(null);
+  const 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 = useMemo29(
+  const fit = useMemo30(
     () => containRect(size.width, size.height, imageSize2.width, imageSize2.height),
     [size, imageSize2]
   );
-  const viewport = useMemo29(
+  const viewport = useMemo30(
     () => ({ fit, scale, panX: pan.x, panY: pan.y }),
     [fit, scale, pan]
   );
-  useLayoutEffect10(() => {
+  useLayoutEffect11(() => {
     if (collapsed) return;
     const node = containerRef.current;
     if (!node) return;
@@ -19512,7 +20433,7 @@ function PanoMap({
     observer.observe(node);
     return () => observer.disconnect();
   }, [collapsed]);
-  useEffect43(() => {
+  useEffect44(() => {
     yawRef.current = view.yaw;
     const node = sectorNodeRef.current;
     if (!node) return;
@@ -19527,24 +20448,108 @@ function PanoMap({
     onCollapsedChange?.(next);
     if (controlledCollapsed === void 0) setUncontrolledCollapsed(next);
   };
-  const clampPan = useCallback12(
-    (nextScale, nextPan) => {
+  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 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]
   );
-  useEffect43(() => {
+  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;
@@ -19557,9 +20562,37 @@ function PanoMap({
       return next;
     });
   }, [clampPan, gestureZoom, maxScale]);
-  const applyZoom = useCallback12(
+  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;
@@ -19571,6 +20604,7 @@ function PanoMap({
       setPan(clampPan(clamped, nextPan));
     },
     [
+      cancelPanAnimation,
       clampPan,
       fit.left,
       fit.top,
@@ -19583,7 +20617,7 @@ function PanoMap({
       size.width
     ]
   );
-  useEffect43(() => {
+  useEffect44(() => {
     const root = rootRef.current;
     if (!root) return;
     const onWheel = (event) => {
@@ -19635,15 +20669,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();
     }
@@ -19654,12 +20695,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;
@@ -19700,11 +20757,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;
@@ -19714,8 +20784,8 @@ function PanoMap({
   })();
   const activeSpot = spots.find((spot) => spot.sceneId === activeSceneId);
   const selectedSpot = spots.find((spot) => spot.id === selectedSpotId);
-  const controls = /* @__PURE__ */ jsxs23("div", { className: "pano-map-controls", style: { pointerEvents: "auto" }, children: [
-    collapseControl ? /* @__PURE__ */ jsx42(
+  const controls = /* @__PURE__ */ jsxs24("div", { className: "pano-map-controls", style: { pointerEvents: "auto" }, children: [
+    collapseControl ? /* @__PURE__ */ jsx43(
       "button",
       {
         type: "button",
@@ -19731,8 +20801,8 @@ function PanoMap({
         children: collapsed ? "\u25A3" : "\u25A2"
       }
     ) : null,
-    zoomControls && !collapsed ? /* @__PURE__ */ jsxs23(Fragment8, { children: [
-      /* @__PURE__ */ jsx42(
+    zoomControls && !collapsed ? /* @__PURE__ */ jsxs24(Fragment8, { children: [
+      /* @__PURE__ */ jsx43(
         "button",
         {
           type: "button",
@@ -19747,7 +20817,7 @@ function PanoMap({
           children: "+"
         }
       ),
-      /* @__PURE__ */ jsx42(
+      /* @__PURE__ */ jsx43(
         "button",
         {
           type: "button",
@@ -19770,7 +20840,7 @@ function PanoMap({
       (previous) => previous.width === image.naturalWidth && previous.height === image.naturalHeight ? previous : { width: image.naturalWidth, height: image.naturalHeight }
     );
   };
-  return /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsxs24(
     "div",
     {
       ref: rootRef,
@@ -19788,8 +20858,8 @@ function PanoMap({
       "data-mode": mode,
       "data-collapsed": collapsed ? "true" : void 0,
       children: [
-        renderChrome ? renderChrome(controls) : /* @__PURE__ */ jsx42("div", { className: "pano-map-chrome", children: controls }),
-        /* @__PURE__ */ jsxs23(
+        renderChrome ? renderChrome(controls) : /* @__PURE__ */ jsx43("div", { className: "pano-map-chrome", children: controls }),
+        /* @__PURE__ */ jsxs24(
           "div",
           {
             ref: containerRef,
@@ -19806,7 +20876,7 @@ function PanoMap({
             onPointerUp: endDrag,
             onPointerCancel: endDrag,
             children: [
-              fit.width > 0 && fit.height > 0 ? /* @__PURE__ */ jsx42(
+              fit.width > 0 && fit.height > 0 ? /* @__PURE__ */ jsx43(
                 "div",
                 {
                   className: "pano-map-image-layer",
@@ -19818,7 +20888,7 @@ function PanoMap({
                     height: fit.height * scale,
                     transformOrigin: "0 0"
                   },
-                  children: /* @__PURE__ */ jsx42(
+                  children: /* @__PURE__ */ jsx43(
                     "img",
                     {
                       src: map.image,
@@ -19840,7 +20910,7 @@ function PanoMap({
                     }
                   )
                 }
-              ) : /* @__PURE__ */ jsx42(
+              ) : /* @__PURE__ */ jsx43(
                 "img",
                 {
                   src: map.image,
@@ -19854,7 +20924,7 @@ function PanoMap({
                   }
                 }
               ),
-              activeSpot && map.sector ? /* @__PURE__ */ jsx42(
+              activeSpot && map.sector ? /* @__PURE__ */ jsx43(
                 "svg",
                 {
                   className: "pano-map-sector-layer",
@@ -19866,11 +20936,11 @@ function PanoMap({
                     overflow: "visible",
                     pointerEvents: "none"
                   },
-                  children: /* @__PURE__ */ jsx42(
+                  children: /* @__PURE__ */ jsx43(
                     "g",
                     {
                       transform: `translate(${imagePointToContainer(activeSpot, viewport).x} ${imagePointToContainer(activeSpot, viewport).y})`,
-                      children: /* @__PURE__ */ jsx42(
+                      children: /* @__PURE__ */ jsx43(
                         SectorShape,
                         {
                           sector: map.sector,
@@ -19902,7 +20972,7 @@ function PanoMap({
                 const point = imagePointToContainer(spot, viewport);
                 const active = spot.sceneId === activeSceneId;
                 const selected = spot.id === selectedSpotId;
-                return /* @__PURE__ */ jsx42(
+                return /* @__PURE__ */ jsx43(
                   "button",
                   {
                     type: "button",
@@ -19947,7 +21017,7 @@ function PanoMap({
                       if (editing) return;
                       onSelectScene?.(spot.sceneId, spot);
                     },
-                    children: spot.icon ? /* @__PURE__ */ jsx42(
+                    children: spot.icon ? /* @__PURE__ */ jsx43(
                       "img",
                       {
                         src: spot.icon,
@@ -19955,7 +21025,7 @@ function PanoMap({
                         draggable: false,
                         style: { width: "100%", height: "100%", display: "block", pointerEvents: "none" }
                       }
-                    ) : /* @__PURE__ */ jsx42(DefaultSpotIcon, { active, size: iconSize })
+                    ) : /* @__PURE__ */ jsx43(DefaultSpotIcon, { active, size: iconSize })
                   },
                   spot.id
                 );
@@ -19970,13 +21040,15 @@ function PanoMap({
 
 // src/map/pano-map-overlay.tsx
 import {
-  useEffect as useEffect44,
-  useId as useId4,
-  useMemo as useMemo30,
-  useRef as useRef44,
-  useState as useState28
+  useEffect as useEffect45,
+  useId as useId5,
+  useMemo as useMemo31,
+  useRef as useRef45,
+  useState as useState29
 } from "react";
-import { Fragment as Fragment9, jsx as jsx43, jsxs as jsxs24 } from "react/jsx-runtime";
+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" };
@@ -19987,14 +21059,16 @@ function PanoMapDialogShell({
   onOpenChange,
   title,
   closeLabel,
+  dialogWidth,
+  dialogHeight,
   children
 }) {
   usePanoModal(open);
   const { size } = usePanoOverlay();
-  const titleId = useId4();
-  const panelRef = useRef44(null);
-  const previouslyFocused = useRef44(null);
-  useEffect44(() => {
+  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;
@@ -20016,12 +21090,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__ */ jsxs24(Fragment9, { children: [
-    /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsxs25(Fragment9, { children: [
+    /* @__PURE__ */ jsx44(
       "div",
       {
         className: "pano-map-dialog-backdrop",
@@ -20034,7 +21110,7 @@ function PanoMapDialogShell({
         onClick: () => onOpenChange(false)
       }
     ),
-    /* @__PURE__ */ jsxs24(
+    /* @__PURE__ */ jsxs25(
       "div",
       {
         ref: panelRef,
@@ -20057,9 +21133,9 @@ function PanoMapDialogShell({
           zIndex: 1
         },
         children: [
-          /* @__PURE__ */ jsxs24("header", { className: "pano-map-dialog-header", style: { flexShrink: 0 }, children: [
-            /* @__PURE__ */ jsx43("h2", { id: titleId, className: "pano-map-dialog-title", children: title }),
-            /* @__PURE__ */ jsx43(
+          /* @__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",
@@ -20067,11 +21143,11 @@ function PanoMapDialogShell({
                 "data-pano-map-dialog-close": "",
                 "aria-label": closeLabel,
                 onClick: () => onOpenChange(false),
-                children: /* @__PURE__ */ jsx43("svg", { "aria-hidden": "true", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: /* @__PURE__ */ jsx43("path", { d: "m4 4 8 8M12 4l-8 8" }) })
+                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__ */ jsx43("div", { className: "pano-map-dialog-body", style: { minHeight: 0, flex: 1 }, children })
+          /* @__PURE__ */ jsx44("div", { className: "pano-map-dialog-body", style: { minHeight: 0, flex: 1 }, children })
         ]
       }
     )
@@ -20088,6 +21164,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",
@@ -20096,9 +21186,9 @@ function PanoMapOverlay({
   editorSurface = false
 }) {
   const { size } = usePanoOverlay();
-  const [open, setOpen] = useState28(false);
-  const [collapsed, setCollapsed] = useState28(false);
-  const presentation = presentationOverride ?? map.presentation ?? {
+  const [open, setOpen] = useState29(false);
+  const [collapsed, setCollapsed] = useState29(false);
+  const basePresentation = presentationOverride ?? map.presentation ?? {
     mode: "docked",
     corner: "bottom-left",
     width: 220,
@@ -20106,13 +21196,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 = 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,
+    map: resolvedMap,
     activeSceneId,
     view,
     mode,
@@ -20120,14 +21222,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 = useMemo30(() => {
-    const panelWidth2 = Math.min(420, Math.max(240, size.width * 0.45));
-    const panelHeight2 = Math.min(320, Math.max(180, size.height * 0.45));
+  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",
@@ -20136,9 +21241,9 @@ function PanoMapOverlay({
       width: panelWidth2,
       height: panelHeight2
     };
-  }, [size.height, size.width]);
+  }, [heightProp, size.height, size.width, widthProp]);
   if (editorSurface) {
-    return /* @__PURE__ */ jsx43(
+    return /* @__PURE__ */ jsx44(
       "div",
       {
         className: ["pano-map-overlay", "pano-map-overlay-editor", className].filter(Boolean).join(" "),
@@ -20149,14 +21254,14 @@ function PanoMapOverlay({
           ...style
         },
         "data-pano-map-overlay": "",
-        children: /* @__PURE__ */ jsx43(PanoMap, { ...mapProps, showCollapseControl: false })
+        children: /* @__PURE__ */ jsx44(PanoMap, { ...mapProps, showCollapseControl: false })
       }
     );
   }
-  if (presentation.mode === "dialog") {
+  if (presentationMode === "dialog") {
     const launcherBox = dockedBox(corner, offsetX, offsetY, width, height);
-    return /* @__PURE__ */ jsxs24("div", { className: ["pano-map-overlay", className].filter(Boolean).join(" "), "data-pano-map-overlay": "", children: [
-      /* @__PURE__ */ jsx43(
+    return /* @__PURE__ */ jsxs25("div", { className: ["pano-map-overlay", className].filter(Boolean).join(" "), "data-pano-map-overlay": "", children: [
+      /* @__PURE__ */ jsx44(
         "button",
         {
           type: "button",
@@ -20172,14 +21277,16 @@ function PanoMapOverlay({
           children: openLabel
         }
       ),
-      /* @__PURE__ */ jsx43(
+      /* @__PURE__ */ jsx44(
         PanoMapDialogShell,
         {
           open,
           onOpenChange: setOpen,
           title,
           closeLabel,
-          children: /* @__PURE__ */ jsx43("div", { style: { height: "100%" }, children: /* @__PURE__ */ jsx43(PanoMap, { ...mapProps, showCollapseControl: false }) })
+          dialogWidth,
+          dialogHeight,
+          children: /* @__PURE__ */ jsx44("div", { style: { height: "100%" }, children: /* @__PURE__ */ jsx44(PanoMap, { ...mapProps, showCollapseControl: false }) })
         }
       )
     ] });
@@ -20187,7 +21294,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__ */ jsx43(
+  return /* @__PURE__ */ jsx44(
     "div",
     {
       className: ["pano-map-overlay", className].filter(Boolean).join(" "),
@@ -20199,7 +21306,7 @@ function PanoMapOverlay({
       },
       "data-pano-map-overlay": "",
       "data-presentation": "docked",
-      children: /* @__PURE__ */ jsx43(
+      children: /* @__PURE__ */ jsx44(
         PanoMap,
         {
           ...mapProps,
@@ -20217,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,
@@ -20237,6 +21345,7 @@ export {
   PanoMap,
   PanoMapOverlay,
   PanoOverlayPortalProvider,
+  PanoSceneMenu,
   PanoVideo,
   PanoVideoControls,
   PanoViewer,