@ericchen1990/pano-view 5.0.0 → 5.1.0

package/dist/index.mjs

@@ -2409,6 +2409,19 @@ function createSpatialHost() {
 }
 var SpatialHostContext = createContext(null);
 
+// src/spatial/model-controls.ts
+function resolveSurfaceModelAdapter(surface, controls, hovered, previous) {
+  let first = null;
+  let retained = null;
+  for (const [node, adapter] of controls) {
+    if (!surface.contains(node)) continue;
+    first ?? (first = adapter);
+    if (adapter === hovered) return adapter;
+    if (adapter === previous) retained = adapter;
+  }
+  return retained ?? first;
+}
+
 // src/controls/actions.ts
 var CONTROL_PATHS = {
   play: "M8 5 L19 12 L8 19 Z",
@@ -2432,6 +2445,7 @@ var CONTROL_PATHS = {
 function mediaActions(controller, seekSpeed = 10, volumeSpeed = 0.25) {
   if (!controller) return [];
   const snapshot = () => controller.getSnapshot();
+  const safeVolumeSpeed = Number.isFinite(volumeSpeed) && volumeSpeed >= 0 ? volumeSpeed : 0.25;
   return [
     {
       id: snapshot().playing ? "pause" : "play",
@@ -2456,22 +2470,25 @@ function mediaActions(controller, seekSpeed = 10, volumeSpeed = 0.25) {
         )
       )
     })),
-    ...(snapshot().volumeAdjustable ? [-1, 1] : []).map((direction) => ({
+    ...(snapshot().hasAudio !== false && snapshot().volumeAdjustable ? [-1, 1] : []).map((direction) => ({
       id: direction < 0 ? "vol-" : "vol+",
       label: direction < 0 ? "Volume down" : "Volume up",
-      enabled: () => snapshot().volumeAdjustable && (direction < 0 ? snapshot().volume > 0 : snapshot().volume < 1),
-      update: (dt) => controller.setVolume(
-        Math.max(
-          0,
-          Math.min(1, snapshot().volume + direction * dt * volumeSpeed)
-        )
-      )
+      enabled: () => snapshot().hasAudio !== false && snapshot().volumeAdjustable && (direction < 0 ? snapshot().volume > 0 : snapshot().volume < 1),
+      update: (dt) => {
+        if (!Number.isFinite(dt) || dt <= 0 || snapshot().hasAudio === false || !snapshot().volumeAdjustable) return;
+        controller.setVolume(
+          Math.max(0, Math.min(1, snapshot().volume + direction * dt * safeVolumeSpeed))
+        );
+      }
     })),
-    {
+    ...snapshot().hasAudio === false ? [] : [{
       id: snapshot().muted ? "unmute" : "mute",
       label: snapshot().muted ? "Unmute" : "Mute",
-      activate: () => controller.setMuted(!snapshot().muted)
-    }
+      enabled: () => snapshot().hasAudio !== false,
+      activate: () => {
+        if (snapshot().hasAudio !== false) controller.setMuted(!snapshot().muted);
+      }
+    }]
   ];
 }
 function modelActions(adapter, rotateSpeed = 30, zoomSpeed = 1.5) {
@@ -2610,6 +2627,35 @@ function scrollViewportBounds(root, target, maxHeight) {
   };
 }
 
+// src/controls/media-audio.ts
+function probeMediaHasAudio(media) {
+  if (media.readyState < 1) return void 0;
+  const metadata = media;
+  if ((metadata.audioTracks?.length ?? 0) > 0 || metadata.mozHasAudio === true || (metadata.webkitAudioDecodedByteCount ?? 0) > 0) return true;
+  if (metadata.audioTracks?.length === 0 || metadata.mozHasAudio === false) return false;
+  return void 0;
+}
+function subscribeMediaAudio(media, notify2) {
+  let tracks;
+  const trackEvents = ["addtrack", "removetrack", "change"];
+  const sync = () => {
+    const next = media.audioTracks;
+    if (next !== tracks) {
+      trackEvents.forEach((event) => tracks?.removeEventListener(event, notify2));
+      tracks = next;
+      trackEvents.forEach((event) => tracks?.addEventListener(event, notify2));
+    }
+    notify2();
+  };
+  const events = ["loadstart", "emptied", "loadedmetadata", "loadeddata", "playing", "timeupdate"];
+  events.forEach((event) => media.addEventListener(event, sync));
+  sync();
+  return () => {
+    events.forEach((event) => media.removeEventListener(event, sync));
+    trackEvents.forEach((event) => tracks?.removeEventListener(event, notify2));
+  };
+}
+
 // src/video/format.ts
 var DEFAULT_PANO_VIDEO_PLAYBACK_RATES = [0.5, 1, 1.25, 1.5, 2];
 var MEDIA_PROBE_EPSILON = 1e-3;
@@ -2739,6 +2785,29 @@ function cueText(cue) {
   return cue.text.replace(/<[^>]+>/g, "").replace(/\r\n|\r/g, "\n");
 }
 
+// src/controls/layout.ts
+var CONTROL_GROUP_DEFAULTS = { size: 48, gap: 8, padding: 8 };
+function controlGroupLayout(count, width, size = CONTROL_GROUP_DEFAULTS.size, gap = CONTROL_GROUP_DEFAULTS.gap, padding = CONTROL_GROUP_DEFAULTS.padding) {
+  size = Math.max(1, size);
+  gap = Math.max(0, gap);
+  padding = Math.max(0, padding);
+  const columns = Math.max(1, Math.floor((width - 2 * padding + gap) / (size + gap)));
+  const rows = Math.ceil(count / columns);
+  return {
+    height: count ? rows * size + Math.max(0, rows - 1) * gap + 2 * padding : 0,
+    buttons: Array.from({ length: count }, (_, i) => {
+      const row = Math.floor(i / columns), items = Math.min(columns, count - row * columns);
+      return { x: (width - items * size - (items - 1) * gap) / 2 + i % columns * (size + gap), y: padding + row * (size + gap), w: size, h: size };
+    })
+  };
+}
+function allowsAutomaticMediaControls(media) {
+  return media.getAttribute("data-pano-media-controls") !== "none";
+}
+function shouldPauseSurfaceMedia(connected, registered) {
+  return !connected || !registered;
+}
+
 // src/controls/media.ts
 import { useEffect, useMemo, useRef } from "react";
 var mediaControllers = /* @__PURE__ */ new WeakMap();
@@ -2763,6 +2832,7 @@ function usePanoMediaController(ref) {
           playing: media ? !media.paused && !media.ended : false,
           currentTime: media?.currentTime ?? 0,
           duration: media?.duration ?? 0,
+          hasAudio: media ? probeMediaHasAudio(media) : void 0,
           volume: media?.volume ?? 1,
           volumeAdjustable: adjustable.current,
           muted: media?.muted ?? true
@@ -2800,19 +2870,17 @@ function usePanoMediaController(ref) {
     adjustable.current = probeVolumeAdjustable(media);
     const notify2 = () => listeners.current.forEach((fn) => fn());
     const events = [
-      "loadedmetadata",
       "durationchange",
-      "timeupdate",
       "play",
       "pause",
       "ended",
       "volumechange",
-      "error",
-      "emptied"
+      "error"
     ];
     events.forEach((event) => media.addEventListener(event, notify2));
-    notify2();
+    const unsubscribeAudio = subscribeMediaAudio(media, notify2);
     return () => {
+      unsubscribeAudio();
       if (mediaControllers.get(media) === controller) mediaControllers.delete(media);
       events.forEach((event) => media.removeEventListener(event, notify2));
     };
@@ -3152,6 +3220,7 @@ function PanoControlGroup({
     {
       ...props,
       role: "group",
+      style: { gap: `var(--pano-control-gap, ${CONTROL_GROUP_DEFAULTS.gap}px)`, padding: `var(--pano-control-padding, ${CONTROL_GROUP_DEFAULTS.padding}px)`, ...props.style },
       "data-pano-control-group": "",
       className: `pano-control-group ${props.className ?? ""}`,
       children: children ? children(actions) : actions.map((action) => /* @__PURE__ */ jsx2(
@@ -3958,7 +4027,7 @@ function SurfaceMediaControls({ surface }) {
     const sync = () => {
       const videos = [...surface.element.querySelectorAll("video")];
       const automatic = videos.filter((video) => {
-        if (explicitTargets.has(mediaControllers.get(video) ?? video)) return false;
+        if (!allowsAutomaticMediaControls(video) || explicitTargets.has(mediaControllers.get(video) ?? video)) return false;
         return ![...host.controls].some(([node]) => node === video || node.contains(video));
       });
       let changed = false;
@@ -4031,7 +4100,7 @@ function makeCanvas() {
   canvas.height = HEIGHT * RASTER_SCALE;
   return canvas;
 }
-async function capture(element, owner) {
+async function capture(element, owner, footer = false) {
   const canvas = document.createElement("canvas");
   const ctx = canvas.getContext("2d");
   const native = ctx;
@@ -4065,6 +4134,10 @@ async function capture(element, owner) {
       transform: "none",
       position: "relative"
     });
+    if (footer) {
+      clone2.style.borderBottomLeftRadius = "0";
+      clone2.style.borderBottomRightRadius = "0";
+    }
     clone2.setAttribute("drawable", "");
     canvas.append(clone2);
     owner.append(canvas);
@@ -4159,6 +4232,10 @@ async function capture(element, owner) {
     top: "0",
     transform: "none"
   });
+  if (footer) {
+    clone.style.borderBottomLeftRadius = "0";
+    clone.style.borderBottomRightRadius = "0";
+  }
   owner.append(clone);
   originals.forEach((node, i) => {
     copies[i].scrollTop = node.scrollTop;
@@ -4236,6 +4313,7 @@ function SurfacePanel({ surface }) {
     edgeButtons: [],
     target: surface.element,
     adapter: null,
+    modelAdapter: null,
     scrollTarget: null,
     mediaTarget: null
   });
@@ -4246,7 +4324,7 @@ function SurfacePanel({ surface }) {
       controller = {
         subscribe: () => () => {
         },
-        getSnapshot: () => ({ ready: media.readyState >= 1, playing: !media.paused && !media.ended, currentTime: media.currentTime, duration: media.duration, volume: media.volume, volumeAdjustable: volumeCapabilities.get(media) ?? false, muted: media.muted }),
+        getSnapshot: () => ({ ready: media.readyState >= 1, playing: !media.paused && !media.ended, currentTime: media.currentTime, duration: media.duration, hasAudio: probeMediaHasAudio(media), volume: media.volume, volumeAdjustable: volumeCapabilities.get(media) ?? false, muted: media.muted }),
         play: async () => {
           try {
             await media.play();
@@ -4263,7 +4341,7 @@ function SurfacePanel({ surface }) {
           if (Number.isFinite(time) && Number.isFinite(media.duration)) media.currentTime = Math.max(0, Math.min(media.duration, time));
         },
         setVolume: (value) => {
-          media.volume = value;
+          if (Number.isFinite(value) && volumeCapabilities.get(media)) media.volume = clampVolume(value);
         },
         setMuted: (value) => {
           media.muted = value;
@@ -4280,6 +4358,7 @@ function SurfacePanel({ surface }) {
     s.generation++;
     s.target = surface.element;
     s.adapter = null;
+    s.modelAdapter = null;
     s.dirty = true;
     s.image = null;
     s.mediaBlocked = false;
@@ -4359,7 +4438,7 @@ function SurfacePanel({ surface }) {
       videos.current.clear();
       controllers.current.clear();
       blockedMedia.current = /* @__PURE__ */ new WeakSet();
-      surface.element.querySelectorAll("video,audio").forEach((m) => m.pause());
+      if (shouldPauseSurfaceMedia(surface.element.isConnected, host.surfaces.has(surface))) surface.element.querySelectorAll("video,audio").forEach((m) => m.pause());
     };
   }, [surface, camera, gl, host, sceneHost, scratch]);
   useEffect3(
@@ -4477,9 +4556,15 @@ function SurfacePanel({ surface }) {
       s.dirty = true;
     }
     const ctx = canvas.getContext("2d");
+    const appearance = getComputedStyle(surface.element);
+    const token = (name, fallback) => {
+      const value = parseFloat(appearance.getPropertyValue(`--pano-control-${name}`));
+      return Number.isFinite(value) ? value : fallback;
+    };
+    const controlSize = token("size", CONTROL_GROUP_DEFAULTS.size), controlGap = token("gap", CONTROL_GROUP_DEFAULTS.gap), controlPadding = token("padding", CONTROL_GROUP_DEFAULTS.padding);
     const nextHeight = Math.max(
       surface.anchor ? 1 : 200,
-      Math.min(BODY_HEIGHT, surface.element.offsetHeight) + (s.buttons.length ? 32 + Math.ceil(s.buttons.length / 5) * 88 : 0)
+      Math.min(BODY_HEIGHT, surface.element.offsetHeight) + (s.buttons.length ? controlGroupLayout(s.buttons.length, WIDTH, controlSize, controlGap, controlPadding).height : 0)
     );
     if (canvas.height !== nextHeight * RASTER_SCALE) {
       texture.dispose();
@@ -4516,7 +4601,7 @@ function SurfacePanel({ surface }) {
       });
       owner.setAttribute("aria-hidden", "true");
       surface.element.closest("[data-pano-viewer]")?.append(owner);
-      capture(surface.element, owner).then((image) => {
+      capture(surface.element, owner, s.buttons.length > 0).then((image) => {
         if (!s.disposed && generation === s.generation && revision === s.revision) {
           s.image = image;
           s.failed = false;
@@ -4532,7 +4617,6 @@ function SurfacePanel({ surface }) {
         s.busy = false;
       });
     }
-    const appearance = getComputedStyle(surface.element);
     const radius = Math.max(0, parseFloat(appearance.borderTopLeftRadius) || 0);
     ctx.clearRect(0, 0, WIDTH, s.height);
     ctx.save();
@@ -4681,31 +4765,55 @@ function SurfacePanel({ surface }) {
     s.edgeButtons = !host.input.hasStick && !surface.anchor && s.scrollTarget && !explicitTargets.has(s.scrollTarget) ? scrollEdges(s.scrollTarget, scrollViewportBounds(surface.element, s.scrollTarget, Math.min(BODY_HEIGHT, surface.element.offsetHeight)), () => {
       s.dirty = true;
     }) : [];
-    const adapter = s.adapter;
+    const adapter = resolveSurfaceModelAdapter(surface.element, host.controls, s.adapter, s.modelAdapter);
+    s.modelAdapter = adapter;
     if (adapter && !explicitTargets.has(adapter)) for (const action of modelActions(adapter)) {
       if (host.input.canDrag && adapter.rotateBy && ["left", "right", "up", "down"].includes(action.id) || host.input.hasStick && adapter.zoomBy && ["in", "out"].includes(action.id)) continue;
       add(action.id, action.label, action.update, action.activate, action.enabled);
     }
-    if (media instanceof HTMLAudioElement && !adapter && !explicitTargets.has(mediaControllers.get(media) ?? media)) {
+    if (media instanceof HTMLAudioElement && allowsAutomaticMediaControls(media) && !adapter && !explicitTargets.has(mediaControllers.get(media) ?? media)) {
       for (const action of mediaActions(controllerFor(media))) add(action.id === "pause" ? "play" : action.id === "unmute" ? "mute" : action.id, action.label, action.update, action.activate, action.enabled);
     }
-    s.buttons = surface.anchor ? [] : buttons;
     if (surface.anchor) buttons.length = 0;
+    const layout = controlGroupLayout(buttons.length, WIDTH, controlSize, controlGap, controlPadding);
+    const bodyHeight = Math.min(BODY_HEIGHT, surface.element.offsetHeight);
+    buttons.forEach((button, i) => Object.assign(button, layout.buttons[i], { y: bodyHeight + layout.buttons[i].y }));
+    if (s.buttons.length !== buttons.length) s.dirty = true;
+    s.buttons = buttons;
+    if (buttons.length) {
+      ctx.fillStyle = "#161b22";
+      ctx.fillRect(0, bodyHeight, WIDTH, layout.height);
+    }
     for (const b of buttons) {
-      ctx.fillStyle = b.action.enabled?.() === false ? "#333a43" : appearance.getPropertyValue("--pano-control-background").trim() || "#39424e";
-      ctx.fillRect(b.x, b.y, b.w, b.h);
-      ctx.fillStyle = "#fff";
+      ctx.save();
+      ctx.globalAlpha = b.action.enabled?.() === false ? 0.4 : 1;
+      ctx.fillStyle = appearance.getPropertyValue("--pano-control-background").trim() || "#39424e";
+      ctx.beginPath();
+      ctx.roundRect(b.x, b.y, b.w, b.h, token("radius", b.w / 2));
+      ctx.fill();
+      const border = /^(\d+(?:\.\d+)?)px\s+solid\s+(.+)$/.exec(appearance.getPropertyValue("--pano-control-border").trim() || "1px solid #68778a");
+      if (border) {
+        ctx.strokeStyle = border[2];
+        ctx.lineWidth = Number(border[1]);
+        ctx.stroke();
+      }
+      if (host.action?.id === b.action.id) {
+        ctx.strokeStyle = appearance.getPropertyValue("--pano-control-focus").trim() || "#ffb300";
+        ctx.lineWidth = 3;
+        ctx.stroke();
+      }
       const id = String(b.action.id).replace("scroll-", "");
       const icon = id === "play" && media && !media.paused ? "pause" : id === "mute" && media?.muted ? "unmute" : id;
       ctx.save();
-      ctx.translate(b.x + b.w / 2 - 16, b.y + b.h / 2 - 16);
-      ctx.scale(32 / 24, 32 / 24);
-      ctx.strokeStyle = "#fff";
+      ctx.translate(b.x + b.w / 2 - 12, b.y + b.h / 2 - 12);
+      ctx.scale(1, 1);
+      ctx.strokeStyle = appearance.getPropertyValue("--pano-control-color").trim() || "#baf5ff";
       ctx.lineWidth = 2;
       ctx.lineCap = "round";
       ctx.lineJoin = "round";
       ctx.stroke(new Path2D(CONTROL_PATHS[icon] ?? CONTROL_PATHS.reset));
       ctx.restore();
+      ctx.restore();
     }
     for (const button of s.edgeButtons) {
       const focused = host.action?.id === button.action.id || [...contacts.current.values()].some((contact) => contact.action?.id === button.action.id);
@@ -9683,6 +9791,7 @@ function VolumeControl({
   const mutedOrSilent = muted || volume === 0;
   useEffect15(() => {
     onOpenChange(open);
+    return () => onOpenChange(false);
   }, [onOpenChange, open]);
   useEffect15(() => {
     if (!open || !volumeAdjustable || hasFinePointerHover()) {
@@ -10130,7 +10239,7 @@ function PanoVideoControlsHud({
           }
         ),
         hideTime ? null : /* @__PURE__ */ jsx12("span", { className: "pano-video-time", children: formatMediaTime(duration) }),
-        /* @__PURE__ */ jsx12(
+        snapshot.hasAudio === false ? null : /* @__PURE__ */ jsx12(
           VolumeControl,
           {
             appearance: resolved,
@@ -15168,6 +15277,32 @@ function suppressFollowingClick(target) {
   setTimeout(cleanup, CLICK_SUPPRESS_MS);
 }
 
+// src/hotspot/tooltip-layout.ts
+function tooltipPadding(value) {
+  const values = String(value).trim().split(/\s+/).map((value2) => Math.max(0, parseFloat(value2) || 0));
+  const [top = 0, right2 = top, bottom = top, left = right2] = values;
+  return [top, right2, bottom, left];
+}
+function tooltipBaseline(top, lineHeight, ascent, descent) {
+  return top + (lineHeight - ascent - descent) / 2 + ascent;
+}
+function tooltipLines(text, maxWidth, measure) {
+  const lines = [];
+  if (!text) return lines;
+  for (const paragraph of text.split("\n")) {
+    let line = "";
+    for (const char of paragraph) {
+      if (line && measure(line + char) > maxWidth) {
+        lines.push(line);
+        line = "";
+      }
+      line += char;
+    }
+    lines.push(line);
+  }
+  return lines;
+}
+
 // src/hotspot/tooltip-transform.ts
 import {
   MathUtils as MathUtils8,
@@ -15273,25 +15408,17 @@ function SpatialHotspotTooltip({
   }, [content.image]);
   const raster = useMemo21(() => {
     const fontSize = Math.max(1, number(appearance.fontSize, 12));
-    const padding = Math.max(0, number(appearance.padding, 8));
+    const [pt, pr, pb, pl] = tooltipPadding(appearance.padding);
+    const padding = Math.max(pl, pr);
+    const letterSpacing = appearance.letterSpacing === "normal" ? 0 : number(appearance.letterSpacing ?? 0, 0);
     const leading = appearance.lineHeight;
     const lineHeight = typeof leading === "string" && leading.endsWith("px") ? number(leading, fontSize * 1.4) : fontSize * number(leading, 1.4) / (typeof leading === "string" && leading.endsWith("%") ? 100 : 1);
     const canvas = document.createElement("canvas");
     const ctx = canvas.getContext("2d");
     const font = `${fontSize}px ${appearance.fontFamily}`;
     ctx.font = font;
-    const lines = [];
-    for (const paragraph of (content.text ?? "").split("\n")) {
-      let line = "";
-      for (const char of paragraph) {
-        if (line && ctx.measureText(line + char).width > 220 - padding * 2) {
-          lines.push(line);
-          line = "";
-        }
-        line += char;
-      }
-      if (line || content.text) lines.push(line);
-    }
+    const measure = (text) => (letterSpacing ? [...text].reduce((width2, char) => width2 + ctx.measureText(char).width, 0) : ctx.measureText(text).width) + Math.max(0, [...text].length - 1) * letterSpacing;
+    const lines = tooltipLines(content.text ?? "", 220 - pl - pr, measure);
     const imageWidth = image ? Math.min(
       220 - padding * 2,
       120 * image.naturalWidth / image.naturalHeight
@@ -15300,12 +15427,12 @@ function SpatialHotspotTooltip({
     const width = Math.ceil(
       Math.max(
         imageWidth,
-        ...lines.map((line) => ctx.measureText(line).width),
+        ...lines.map(measure),
         1
-      ) + padding * 2
+      ) + pl + pr
     );
     const height = Math.ceil(
-      padding * 2 + imageHeight + (image && lines.length ? padding : 0) + lines.length * lineHeight
+      pt + pb + imageHeight + (image && lines.length ? padding : 0) + lines.length * lineHeight
     );
     canvas.width = width * 2;
     canvas.height = height * 2;
@@ -15328,17 +15455,26 @@ function SpatialHotspotTooltip({
     }
     ctx.save();
     ctx.clip();
-    let top = padding;
+    let top = pt;
     if (image) {
-      ctx.drawImage(image, padding, top, imageWidth, imageHeight);
+      ctx.drawImage(image, pl, top, imageWidth, imageHeight);
       top += imageHeight + padding;
     }
     ctx.font = font;
     ctx.fillStyle = appearance.color;
-    ctx.textBaseline = "top";
-    lines.forEach(
-      (line, i) => ctx.fillText(line, padding, top + i * lineHeight)
-    );
+    ctx.textBaseline = "alphabetic";
+    lines.forEach((line, i) => {
+      const metrics = ctx.measureText(line || "Mg");
+      const ascent = metrics.actualBoundingBoxAscent || fontSize * 0.8;
+      const descent = metrics.actualBoundingBoxDescent ?? fontSize * 0.2;
+      let x = pl;
+      const y = tooltipBaseline(top + i * lineHeight, lineHeight, ascent, descent);
+      if (!letterSpacing) ctx.fillText(line, x, y);
+      else for (const char of line) {
+        ctx.fillText(char, x, y);
+        x += ctx.measureText(char).width + letterSpacing;
+      }
+    });
     ctx.restore();
     const texture = new CanvasTexture2(canvas);
     texture.colorSpace = SRGBColorSpace4;
@@ -19450,7 +19586,7 @@ function BackgroundAudio({
         setInternalPlaying((prev) => !prev);
       },
       setVolume: (vol) => {
-        if (isControlledRef.current) {
+        if (isControlledRef.current || !Number.isFinite(vol)) {
           return;
         }
         const next = clampAudioVolume(vol);
@@ -20409,7 +20545,7 @@ import {
   useContext as useContext35,
   useEffect as useEffect46,
   useImperativeHandle as useImperativeHandle5,
-  useMemo as useMemo32,
+  useMemo as useMemo33,
   useRef as useRef47,
   useState as useState28,
   useSyncExternalStore as useSyncExternalStore16
@@ -20806,9 +20942,23 @@ function subscribeWebVRPresentationExit(element, onExit) {
   });
 }
 
+// src/webvr/reticle-geometry.ts
+import { RingGeometry } from "three";
+function createReticleRing(inner, outer) {
+  const geometry = new RingGeometry(inner, outer, 96, 1, Math.PI / 2, -Math.PI * 2);
+  const source = geometry.index;
+  const indices = [];
+  for (let segment = 0; segment < 96; segment++) {
+    if (segment % 4 >= 2) continue;
+    for (let vertex = 0; vertex < 6; vertex++) indices.push(source.getX(segment * 6 + vertex));
+  }
+  geometry.setIndex(indices);
+  return geometry;
+}
+
 // src/webvr/reticle.tsx
 import { useFrame as useFrame24, useThree as useThree29 } from "@react-three/fiber";
-import { useContext as useContext33, useEffect as useEffect42, useRef as useRef44 } from "react";
+import { useContext as useContext33, useEffect as useEffect42, useMemo as useMemo31, useRef as useRef44 } from "react";
 import {
   DoubleSide as DoubleSide6,
   Raycaster as Raycaster5,
@@ -20822,10 +20972,9 @@ var RETICLE_SCALE = 1;
 var MOBILE_VR_RETICLE_SCALE = 3;
 var RETICLE_RENDER_ORDER = 1e5;
 var CROSSHAIR_LENGTH = 0.044;
-var CROSSHAIR_THICKNESS = 8e-3;
+var CROSSHAIR_THICKNESS = 6e-3;
 var RING_INNER_RADIUS = 0.05;
 var RING_OUTER_RADIUS = 0.058;
-var RING_SEGMENTS = 96;
 var RING_INDICES_PER_SEGMENT = 6;
 var GAZE_POINTER_ID = 1000001;
 var DEFAULT_WEBVR_CURSOR_DWELL_MS = 1500;
@@ -20907,6 +21056,15 @@ function WebVRReticle({
   }, []);
   const groupRef = useRef44(null);
   const ringMeshRef = useRef44(null);
+  const ringBackdropRef = useRef44(null);
+  const rings = useMemo31(() => ({
+    outline: createReticleRing(RING_INNER_RADIUS - 3e-3, RING_OUTER_RADIUS + 3e-3),
+    track: createReticleRing(RING_INNER_RADIUS, RING_OUTER_RADIUS),
+    progress: createReticleRing(RING_INNER_RADIUS, RING_OUTER_RADIUS)
+  }), []);
+  useEffect42(() => () => {
+    Object.values(rings).forEach((geometry) => geometry.dispose());
+  }, [rings]);
   const directionRef = useRef44(new Vector324());
   const raycasterRef = useRef44(new Raycaster5());
   const hoveredRef = useRef44(null);
@@ -20933,6 +21091,7 @@ function WebVRReticle({
       }
       dwellRef.current = 0;
       clickedRef.current = false;
+      if (ringBackdropRef.current) ringBackdropRef.current.visible = false;
       if (ringMesh) {
         ringMesh.visible = false;
         ringMesh.geometry.setDrawRange(0, 0);
@@ -20995,8 +21154,9 @@ function WebVRReticle({
       dwellRef.current = 0;
     }
     const progress = spatialOpen ? spatialProgress : target && !clickedRef.current ? resolvedDwellMs > 0 ? Math.min(dwellRef.current / resolvedDwellMs, 1) : 1 : 0;
+    if (ringBackdropRef.current) ringBackdropRef.current.visible = progress > 1e-3;
     if (ringMesh) {
-      const segments = Math.max(0, Math.ceil(progress * RING_SEGMENTS));
+      const segments = Math.max(0, Math.ceil(progress * rings.progress.index.count / RING_INDICES_PER_SEGMENT));
       ringMesh.visible = progress > 1e-3;
       ringMesh.geometry.setDrawRange(0, segments * RING_INDICES_PER_SEGMENT);
     }
@@ -21012,6 +21172,14 @@ function WebVRReticle({
       renderOrder: RETICLE_RENDER_ORDER,
       visible,
       children: [
+        [false, true].map((vertical) => /* @__PURE__ */ jsxs23("mesh", { frustumCulled: false, raycast: noopRaycast, renderOrder: RETICLE_RENDER_ORDER, children: [
+          /* @__PURE__ */ jsx44("boxGeometry", { args: vertical ? [CROSSHAIR_THICKNESS + 6e-3, CROSSHAIR_LENGTH + 6e-3, 1e-3] : [CROSSHAIR_LENGTH + 6e-3, CROSSHAIR_THICKNESS + 6e-3, 1e-3] }),
+          /* @__PURE__ */ jsx44("meshBasicMaterial", { color: "#101419", transparent: true, depthTest: false, depthWrite: false, toneMapped: false })
+        ] }, String(vertical))),
+        /* @__PURE__ */ jsxs23("group", { ref: ringBackdropRef, renderOrder: RETICLE_RENDER_ORDER, visible: false, children: [
+          /* @__PURE__ */ jsx44("mesh", { geometry: rings.outline, frustumCulled: false, raycast: noopRaycast, renderOrder: RETICLE_RENDER_ORDER, children: /* @__PURE__ */ jsx44("meshBasicMaterial", { color: "#101419", transparent: true, side: DoubleSide6, depthTest: false, depthWrite: false, toneMapped: false }) }),
+          /* @__PURE__ */ jsx44("mesh", { geometry: rings.track, frustumCulled: false, raycast: noopRaycast, renderOrder: RETICLE_RENDER_ORDER + 1, children: /* @__PURE__ */ jsx44("meshBasicMaterial", { color: "#ffffff", transparent: true, opacity: 0.45, side: DoubleSide6, depthTest: false, depthWrite: false, toneMapped: false }) })
+        ] }),
         /* @__PURE__ */ jsxs23(
           "mesh",
           {
@@ -21054,40 +21222,26 @@ function WebVRReticle({
             ]
           }
         ),
-        /* @__PURE__ */ jsxs23(
+        /* @__PURE__ */ jsx44(
           "mesh",
           {
             frustumCulled: false,
             raycast: noopRaycast,
             ref: ringMeshRef,
+            geometry: rings.progress,
             renderOrder: RETICLE_RENDER_ORDER + 2,
             visible: false,
-            children: [
-              /* @__PURE__ */ jsx44(
-                "ringGeometry",
-                {
-                  args: [
-                    RING_INNER_RADIUS,
-                    RING_OUTER_RADIUS,
-                    RING_SEGMENTS,
-                    1,
-                    Math.PI / 2,
-                    Math.PI * -2
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsx44(
-                "meshBasicMaterial",
-                {
-                  color: "#ffffff",
-                  depthTest: false,
-                  depthWrite: false,
-                  side: DoubleSide6,
-                  toneMapped: false,
-                  transparent: true
-                }
-              )
-            ]
+            children: /* @__PURE__ */ jsx44(
+              "meshBasicMaterial",
+              {
+                color: "#ffffff",
+                depthTest: false,
+                depthWrite: false,
+                side: DoubleSide6,
+                toneMapped: false,
+                transparent: true
+              }
+            )
           }
         )
       ]
@@ -21118,7 +21272,7 @@ void main() {
 
 // src/webvr/stereo.tsx
 import { useFrame as useFrame25, useThree as useThree30 } from "@react-three/fiber";
-import { useContext as useContext34, useEffect as useEffect43, useMemo as useMemo31, useRef as useRef45 } from "react";
+import { useContext as useContext34, useEffect as useEffect43, useMemo as useMemo32, useRef as useRef45 } from "react";
 import {
   Matrix4 as Matrix410,
   Mesh as Mesh9,
@@ -21343,7 +21497,7 @@ function WebVRStereoRenderer({
   const stereo = runtime?.stereoView.stereo ?? fallbackStereoRef.current;
   const stereoRef = useRef45(stereo);
   stereoRef.current = stereo;
-  const resources = useMemo31(createDistortionResources, []);
+  const resources = useMemo32(createDistortionResources, []);
   const sizeRef = useRef45(new Vector28());
   const viewportRef = useRef45(new Vector42());
   const scissorRef = useRef45(new Vector42());
@@ -21866,7 +22020,7 @@ var WebVR = forwardRef4(function WebVR2({
     () => host.snapshot.setupOpen,
     () => false
   );
-  const resolvedProfile = useMemo32(
+  const resolvedProfile = useMemo33(
     () => resolveWebVRProfile(profile, settings.profileId),
     [profile, settings.profileId]
   );
@@ -22111,7 +22265,7 @@ var WebVR = forwardRef4(function WebVR2({
       clearDetectedScreensize();
     }
   }, [clearDetectedScreensize, host, resolveAutoScreensize]);
-  const controller = useMemo32(
+  const controller = useMemo33(
     () => ({
       closeSetup: () => updateWebVRHost(host, { setupOpen: false }),
       enterVR,
@@ -22316,7 +22470,7 @@ import {
   useEffect as useEffect47,
   useId as useId3,
   useLayoutEffect as useLayoutEffect11,
-  useMemo as useMemo33,
+  useMemo as useMemo34,
   useRef as useRef48,
   useState as useState29
 } from "react";
@@ -22595,7 +22749,7 @@ function PanoSceneMenu({
   const animRef = useRef48(null);
   const maxOffset = Math.max(0, contentSize - viewportSize);
   offsetRef.current = offset;
-  const activeIndex = useMemo33(() => {
+  const activeIndex = useMemo34(() => {
     if (activeId == null) {
       return -1;
     }
@@ -22737,7 +22891,7 @@ function PanoSceneMenu({
     expanded,
     horizontal
   ]);
-  const rootStyle = useMemo33(() => {
+  const rootStyle = useMemo34(() => {
     const vars = {
       "--pano-scene-menu-background": resolved.background,
       "--pano-scene-menu-padding": cssLength(resolved.padding),
@@ -23124,7 +23278,7 @@ function PanoSceneMenu({
 }
 
 // src/use-pano-viewer.ts
-import { useMemo as useMemo34, useRef as useRef49 } from "react";
+import { useMemo as useMemo35, useRef as useRef49 } from "react";
 function createPanoViewerHandle(ref) {
   return {
     getView: () => ref.current?.getView() ?? { yaw: 0, pitch: 0, fov: 75 },
@@ -23237,8 +23391,8 @@ function createPanoViewerHandle(ref) {
 }
 function usePanoViewer() {
   const ref = useRef49(null);
-  const handle = useMemo34(() => createPanoViewerHandle(ref), []);
-  return useMemo34(() => ({ ref, ...handle }), [handle]);
+  const handle = useMemo35(() => createPanoViewerHandle(ref), []);
+  return useMemo35(() => ({ ref, ...handle }), [handle]);
 }
 
 // src/video/pano-video.tsx
@@ -23248,7 +23402,7 @@ import {
   useContext as useContext36,
   useEffect as useEffect48,
   useLayoutEffect as useLayoutEffect12,
-  useMemo as useMemo35,
+  useMemo as useMemo36,
   useRef as useRef50,
   useState as useState30
 } from "react";
@@ -23447,13 +23601,13 @@ function PanoVideo({
   usePanoMediaActivationIntent(autoPlay);
   const gl = useThree32((state) => state.gl);
   const host = useContext36(PanoVideoHostContext);
-  const variants = useMemo35(
+  const variants = useMemo36(
     () => resolvePanoVideoVariants({ poster, src, variants: variantsProp }),
     [poster, src, variantsProp]
   );
   const tracks = tracksProp ?? EMPTY_TRACKS;
   const captionsEnabled = captions !== false;
-  const captionAppearance = useMemo35(
+  const captionAppearance = useMemo36(
     () => resolvePanoVideoCaptionAppearance(
       typeof captions === "object" ? captions : void 0
     ),
@@ -23518,7 +23672,7 @@ function PanoVideo({
   onEndedRef.current = onEnded;
   onVariantChangeRef.current = onVariantChange;
   onTrackChangeRef.current = onTrackChange;
-  const resource = useMemo35(() => {
+  const resource = useMemo36(() => {
     if (typeof document === "undefined") {
       return null;
     }
@@ -23590,6 +23744,7 @@ function PanoVideo({
         ended: playbackState === "ended",
         currentTime: video?.currentTime ?? 0,
         duration: video && Number.isFinite(video.duration) ? video.duration : 0,
+        hasAudio: video ? probeMediaHasAudio(video) : void 0,
         volume: video ? clampVolume(video.volume) : clampVolume(volume),
         volumeAdjustable: mediaCapabilitiesRef.current.volumeAdjustable,
         muted: video?.muted ?? muted,
@@ -23622,7 +23777,7 @@ function PanoVideo({
       captionAppearance
     ]
   );
-  const controller = useMemo35(
+  const controller = useMemo36(
     () => ({
       subscribe: (onStoreChange) => {
         const store = storeRef.current;
@@ -23791,7 +23946,7 @@ function PanoVideo({
         emitSnapshot();
       },
       setVolume: (nextVolume) => {
-        if (!mediaCapabilitiesRef.current.volumeAdjustable) {
+        if (!Number.isFinite(nextVolume) || !mediaCapabilitiesRef.current.volumeAdjustable) {
           return;
         }
         video.volume = clampVolume(nextVolume);
@@ -23895,7 +24050,7 @@ function PanoVideo({
     const handleVolume = () => {
       emitSnapshot();
     };
-    video.addEventListener("timeupdate", handleTimeUpdate);
+    const unsubscribeAudio = subscribeMediaAudio(video, handleTimeUpdate);
     video.addEventListener("durationchange", handleTimeUpdate);
     video.addEventListener("progress", handleTimeUpdate);
     video.addEventListener("play", handlePlay);
@@ -23905,7 +24060,7 @@ function PanoVideo({
     video.addEventListener("ratechange", handleVolume);
     return () => {
       active = false;
-      video.removeEventListener("timeupdate", handleTimeUpdate);
+      unsubscribeAudio();
       video.removeEventListener("durationchange", handleTimeUpdate);
       video.removeEventListener("progress", handleTimeUpdate);
       video.removeEventListener("play", handlePlay);
@@ -23990,7 +24145,7 @@ import {
   useEffect as useEffect50,
   useId as useId4,
   useLayoutEffect as useLayoutEffect13,
-  useMemo as useMemo36,
+  useMemo as useMemo37,
   useRef as useRef52,
   useState as useState32
 } from "react";
@@ -24243,11 +24398,11 @@ function PanoMap({
   const collapseControl = showCollapseControl ?? map.controls?.collapse === true;
   const collapsed = controlledCollapsed ?? uncontrolledCollapsed;
   const editing = mode === "edit";
-  const fit = useMemo36(
+  const fit = useMemo37(
     () => containRect(size.width, size.height, imageSize2.width, imageSize2.height),
     [size, imageSize2]
   );
-  const viewport = useMemo36(
+  const viewport = useMemo37(
     () => ({ fit, scale: scale2, panX: pan.x, panY: pan.y }),
     [fit, scale2, pan]
   );
@@ -24877,7 +25032,7 @@ function PanoMap({
 import {
   useEffect as useEffect51,
   useId as useId5,
-  useMemo as useMemo37,
+  useMemo as useMemo38,
   useRef as useRef53,
   useState as useState33
 } from "react";
@@ -25044,7 +25199,7 @@ function PanoMapOverlay({
   );
   const width = widthProp ?? basePresentation.width ?? (presentationMode === "dialog" ? 48 : 220);
   const height = heightProp ?? basePresentation.height ?? (presentationMode === "dialog" ? 48 : 160);
-  const resolvedMap = useMemo37(() => {
+  const resolvedMap = useMemo38(() => {
     if (interaction === void 0 && maxScale === void 0 && iconSize === void 0) {
       return map;
     }
@@ -25072,7 +25227,7 @@ function PanoMapOverlay({
       if (presentationMode === "dialog") setOpen(false);
     }
   };
-  const editorBox = useMemo37(() => {
+  const editorBox = useMemo38(() => {
     const panelWidth = widthProp !== void 0 && Number.isFinite(widthProp) && widthProp > 0 ? widthProp : Math.min(420, Math.max(240, size.width * 0.45));
     const panelHeight = heightProp !== void 0 && Number.isFinite(heightProp) && heightProp > 0 ? heightProp : Math.min(320, Math.max(180, size.height * 0.45));
     return {
@@ -25198,7 +25353,7 @@ function PanoMapOverlay({
 import {
   useContext as useContext38,
   useEffect as useEffect52,
-  useMemo as useMemo38,
+  useMemo as useMemo39,
   useRef as useRef54,
   useState as useState34,
   useSyncExternalStore as useSyncExternalStore17
@@ -25426,7 +25581,7 @@ function MenuSurface({
     timer: 0
   });
   const group = useRef54(null);
-  const direction = useMemo38(() => new Vector325(), []);
+  const direction = useMemo39(() => new Vector325(), []);
   const [reduced, setReduced] = useState34(false);
   useEffect52(() => {
     const media = matchMedia("(prefers-reduced-motion: reduce)");
@@ -25470,7 +25625,7 @@ function MenuSurface({
   const h = controls.height;
   const radius = bounded(distance, 2, 1.5, 3);
   const menuScale = bounded(scale2, 1, 0.75, 1.25);
-  const surfaces = useMemo38(() => {
+  const surfaces = useMemo39(() => {
     const width = open ? W : 1024;
     const result = [];
     for (const { x: left, y: top, w, h: atlasHeight } of sceneMenuAtlasRects(
@@ -25589,7 +25744,7 @@ function MenuSurface({
     },
     [surfaces]
   );
-  const blocker = useMemo38(() => {
+  const blocker = useMemo39(() => {
     if (!open || layout !== "arc") return null;
     const geometry = new PlaneGeometry7(1, 1, Math.ceil(degrees / 3), 1);
     const positions = geometry.attributes.position;