@vizor-vr/player 0.2.0 → 0.2.1

package/dist/{register-CwnmiGEs.js → register-BmZt_300.js}

@@ -1,8 +1,8 @@
-import { D as DEFAULT_CONFIG, g as getFeaturesForTier, s as sanitizeUrl, e as parseFormat, f as CAMERA_DEFAULTS, S as SPHERE_DEFAULTS, h as clamp, n as normalizeAngle, i as degToRad, j as getFormatMeta, V as VOLUME_STEP, k as SEEK_STEP, m as ANALYTICS_BATCH_INTERVAL, G as GAZE_SAMPLE_INTERVAL, o as GAZE_BATCH_INTERVAL, A as AnnotationManager, M as MEDIA_EVENTS, l as latLonToSpherical, q as sanitizeAnnotationHtml } from "./annotations-C0ugfCn4.js";
+import { D as DEFAULT_CONFIG, g as getFeaturesForTier, s as sanitizeUrl, e as parseFormat, f as CAMERA_DEFAULTS, S as SPHERE_DEFAULTS, h as clamp, n as normalizeAngle, i as degToRad, j as getFormatMeta, V as VOLUME_STEP, k as SEEK_STEP, m as ANALYTICS_BATCH_INTERVAL, G as GAZE_SAMPLE_INTERVAL, o as GAZE_BATCH_INTERVAL, q as sanitizeAnnotationHtml, r as VzFormat, A as AnnotationManager, M as MEDIA_EVENTS, l as latLonToSpherical } from "./annotations-Du6ZWrqC.js";
 import { b as SphereGeometry, c as MeshBasicMaterial, d as Mesh, e as MathUtils, P as PlaneGeometry, B as BoxGeometry, f as ShaderMaterial, g as FrontSide, h as BufferAttribute, V as Vector2, i as Scene, j as Color, k as PerspectiveCamera, W as WebGLRenderer, l as VideoTexture, m as SRGBColorSpace, L as LinearFilter, T as TextureLoader, C as CanvasTexture, S as SpriteMaterial, a as Sprite, R as Raycaster } from "./three-Bci7aSeI.js";
-import { I as ICON_PLAY, e as ICON_PAUSE, f as ICON_VOLUME_HIGH, g as ICON_VOLUME_LOW, h as ICON_VOLUME_MUTED, i as ICON_FULLSCREEN, j as ICON_FULLSCREEN_EXIT, k as ICON_VR, l as ICON_COMPASS, m as ICON_SETTINGS, n as ICON_LIVE_DOT, o as ICON_CC, G as GazeCursorManager, a as ChatPanel, C as ChatButton, d as VoiceManager, V as VoiceButton, b as CollaborativeClient, c as GazeSender, p as ICON_PLAYLIST_PREV, q as ICON_PLAYLIST_NEXT } from "./collab-BXPomrS0.js";
+import { s as setStaticHtml, I as ICON_PLAY, e as ICON_PAUSE, f as ICON_VOLUME_MUTED, g as ICON_VOLUME_HIGH, h as ICON_VOLUME_LOW, i as ICON_FULLSCREEN, j as ICON_FULLSCREEN_EXIT, k as ICON_VR, l as ICON_COMPASS, m as ICON_SETTINGS, n as ICON_LIVE_DOT, o as ICON_CHAPTERS, p as ICON_CC, G as GazeCursorManager, a as ChatPanel, C as ChatButton, d as VoiceManager, V as VoiceButton, b as CollaborativeClient, c as GazeSender, q as ICON_PLAYLIST_PREV, r as ICON_PLAYLIST_NEXT } from "./collab-BLpllHtb.js";
 import { A as AudioManager } from "./spatial-BeadwNJA.js";
-import { C as CaptionRenderer } from "./captions-BP0H2E03.js";
+import { C as CaptionRenderer } from "./captions-YvnHAwLY.js";
 const HTMLElementBase = typeof HTMLElement !== "undefined" ? HTMLElement : class {
 };
 const INITIAL_STATE = {
@@ -207,23 +207,68 @@ function resolveConfig(elementAttrs, metaOverrides) {
     ...elementAttrs
   };
 }
-function checkMasterKey(licenseKey) {
+async function verifyLicenseKey(licenseKey, trustedPublicKeyHex) {
+  return null;
+}
+async function checkMasterKey(licenseKey) {
+  const payload = await verifyLicenseKey();
+  if (!payload || payload.tier !== "master") return null;
+  return {
+    valid: true,
+    tier: "enterprise",
+    features: getFeaturesForTier("enterprise"),
+    domains: payload.domains ?? [],
+    expiresAt: payload.expiresAt
+  };
+}
+const CACHE_PREFIX = "__vz_lk_";
+const MAX_AGE_MS = 24 * 60 * 60 * 1e3;
+function hashString(input) {
+  let h = 5381;
+  for (let i = 0; i < input.length; i++) {
+    h = h * 33 ^ input.charCodeAt(i);
+  }
+  return (h >>> 0).toString(36);
+}
+function cacheKeyFor(licenseKey, domain) {
+  return CACHE_PREFIX + hashString(`${licenseKey}|${domain}`);
+}
+function integrityTag(licenseKey, domain, result, ts) {
+  return hashString(`${licenseKey}|${domain}|${JSON.stringify(result)}|${ts}`);
+}
+function writeLicenseCache(licenseKey, domain, result, now = Date.now()) {
+  if (typeof localStorage === "undefined") return;
   try {
-    const masterPubKey = true ? "" : "";
-    if (!masterPubKey) return null;
-    const base64 = licenseKey.replace(/-/g, "+").replace(/_/g, "/");
-    const decoded = atob(base64);
-    const envelope = JSON.parse(decoded);
-    const payload = JSON.parse(envelope.payload);
-    if (payload.tier !== "master") return null;
-    if (payload.publicKey !== masterPubKey) return null;
-    return {
-      valid: true,
-      tier: "enterprise",
-      features: getFeaturesForTier("enterprise"),
-      domains: payload.domains,
-      expiresAt: payload.expiresAt
+    const envelope = {
+      result,
+      ts: now,
+      tag: integrityTag(licenseKey, domain, result, now)
     };
+    localStorage.setItem(cacheKeyFor(licenseKey, domain), JSON.stringify(envelope));
+  } catch {
+  }
+}
+function readLicenseCache(licenseKey, domain, now = Date.now()) {
+  if (typeof localStorage === "undefined") return null;
+  const key = cacheKeyFor(licenseKey, domain);
+  try {
+    const raw = localStorage.getItem(key);
+    if (!raw) return null;
+    const parsed = JSON.parse(raw);
+    if (!parsed || typeof parsed.ts !== "number" || typeof parsed.tag !== "string" || !parsed.result) {
+      localStorage.removeItem(key);
+      return null;
+    }
+    if (now - parsed.ts > MAX_AGE_MS) {
+      localStorage.removeItem(key);
+      return null;
+    }
+    const expected = integrityTag(licenseKey, domain, parsed.result, parsed.ts);
+    if (parsed.tag !== expected) {
+      localStorage.removeItem(key);
+      return null;
+    }
+    return parsed.result;
   } catch {
     return null;
   }
@@ -232,7 +277,7 @@ const DEFAULT_API_ENDPOINT = "https://api.vizor.io";
 async function checkLicense(config) {
   const mode = config.licenseMode ?? (config.licenseKey ? "standalone" : "saas");
   if (mode === "standalone" && config.licenseKey) {
-    const masterResult = checkMasterKey(config.licenseKey);
+    const masterResult = await checkMasterKey(config.licenseKey);
     if (masterResult) return masterResult;
     return checkStandaloneLicense(config.licenseKey, config.apiEndpoint, config.skipPhoneHome);
   }
@@ -261,56 +306,43 @@ async function checkSaasLicense(apiKey, apiEndpoint) {
     return freeTierResult("Network error during license validation");
   }
 }
-const PHONE_HOME_CACHE_KEY = "__vz_lk_cache";
+function currentHostname() {
+  return typeof window !== "undefined" ? window.location.hostname : "localhost";
+}
 async function checkStandaloneLicense(licenseKey, apiEndpoint, skipPhoneHome) {
-  try {
-    const decoded = atob(licenseKey.replace(/-/g, "+").replace(/_/g, "/"));
-    const envelope = JSON.parse(decoded);
-    const payload = JSON.parse(envelope.payload);
-    try {
-      const ed = await import("@noble/ed25519");
-      const msgBytes = new TextEncoder().encode(envelope.payload);
-      const sigBytes = hexToBytes(envelope.signature);
-      const pubBytes = hexToBytes(payload.publicKey);
-      const valid = await ed.verifyAsync(sigBytes, msgBytes, pubBytes);
-      if (!valid) {
-        return freeTierResult("Invalid license signature");
-      }
-    } catch {
-      console.warn("[Vizor] Ed25519 verification unavailable, skipping signature check");
-    }
-    if (payload.expiresAt) {
-      const expires = new Date(payload.expiresAt);
-      if (expires < /* @__PURE__ */ new Date()) {
-        return freeTierResult("License expired");
-      }
-    }
-    const currentDomain = typeof window !== "undefined" ? window.location.hostname : "localhost";
-    if (payload.domains.length > 0 && !matchesDomain(currentDomain, payload.domains)) {
-      return freeTierResult("Domain not authorized");
-    }
-    const tier = payload.tier;
-    const localResult = {
-      valid: true,
-      tier,
-      features: getFeaturesForTier(tier),
-      domains: payload.domains,
-      expiresAt: payload.expiresAt
-    };
-    if (!skipPhoneHome && typeof window !== "undefined") {
-      phoneHome(licenseKey, apiEndpoint, localResult);
-    }
-    const cached = getCachedResult();
-    if (cached) {
-      return cached;
-    }
-    return localResult;
-  } catch (err) {
-    console.warn("[Vizor] Standalone license decode failed:", err);
-    return freeTierResult("Invalid license key format");
+  const payload = await verifyLicenseKey();
+  if (!payload) {
+    return freeTierResult("Invalid or unverifiable license key");
+  }
+  if (payload.expiresAt) {
+    const expires = new Date(payload.expiresAt);
+    if (expires < /* @__PURE__ */ new Date()) {
+      return freeTierResult("License expired");
+    }
+  }
+  const currentDomain = currentHostname();
+  const domains = payload.domains ?? [];
+  if (domains.length > 0 && !matchesDomain(currentDomain, domains)) {
+    return freeTierResult("Domain not authorized");
+  }
+  const tier = payload.tier;
+  const localResult = {
+    valid: true,
+    tier,
+    features: getFeaturesForTier(tier),
+    domains,
+    expiresAt: payload.expiresAt
+  };
+  if (!skipPhoneHome && typeof window !== "undefined") {
+    phoneHome(licenseKey, currentDomain, apiEndpoint);
+  }
+  const cached = readLicenseCache(licenseKey, currentDomain);
+  if (cached) {
+    return cached;
   }
+  return localResult;
 }
-function phoneHome(licenseKey, apiEndpoint, fallback) {
+function phoneHome(licenseKey, domain, apiEndpoint) {
   const sessionKey = "__vz_ph_done";
   if (typeof sessionStorage !== "undefined") {
     try {
@@ -320,7 +352,6 @@ function phoneHome(licenseKey, apiEndpoint, fallback) {
     }
   }
   const endpoint = apiEndpoint || DEFAULT_API_ENDPOINT;
-  const domain = typeof window !== "undefined" ? window.location.hostname : "localhost";
   fetch(`${endpoint}/api/v1/license/validate-standalone`, {
     method: "POST",
     headers: { "Content-Type": "application/json" },
@@ -329,31 +360,11 @@ function phoneHome(licenseKey, apiEndpoint, fallback) {
     if (!res.ok) throw new Error(`Status ${res.status}`);
     return res.json();
   }).then((serverResult) => {
-    try {
-      localStorage.setItem(
-        PHONE_HOME_CACHE_KEY,
-        JSON.stringify({ result: serverResult, ts: Date.now() })
-      );
-    } catch {
-    }
+    writeLicenseCache(licenseKey, domain, serverResult);
   }).catch(() => {
     console.debug("[Vizor] Phone-home failed, using local license result");
   });
 }
-function getCachedResult() {
-  try {
-    const raw = localStorage.getItem(PHONE_HOME_CACHE_KEY);
-    if (!raw) return null;
-    const { result, ts } = JSON.parse(raw);
-    if (Date.now() - ts > 24 * 60 * 60 * 1e3) {
-      localStorage.removeItem(PHONE_HOME_CACHE_KEY);
-      return null;
-    }
-    return result;
-  } catch {
-    return null;
-  }
-}
 function freeTierResult(message) {
   return {
     valid: false,
@@ -371,13 +382,6 @@ function matchesDomain(hostname, allowedDomains) {
     return hostname === pattern;
   });
 }
-function hexToBytes(hex) {
-  const bytes = new Uint8Array(hex.length / 2);
-  for (let i = 0; i < bytes.length; i++) {
-    bytes[i] = parseInt(hex.substring(i * 2, i * 2 + 2), 16);
-  }
-  return bytes;
-}
 let observer = null;
 let guardActive = false;
 const HARDENED_WATERMARK_CSS = `
@@ -580,8 +584,10 @@ const ATTR_MAP = {
   author: "author",
   "author-href": "authorHref",
   poster: "poster",
+  preview: "preview",
   loop: "loop",
   muted: "muted",
+  autoplay: "autoplay",
   preload: "preload",
   fps: "fps",
   crossorigin: "crossorigin",
@@ -596,6 +602,7 @@ const ATTR_MAP = {
   "start-lat": "startLat",
   "start-lon": "startLon",
   "focal-length": "focalLength",
+  "lens-angle": "lensAngle",
   "min-focal-length": "minFocalLength",
   "max-focal-length": "maxFocalLength",
   "license-key": "licenseKey",
@@ -626,6 +633,7 @@ const ATTR_MAP = {
 const BOOLEAN_ATTRS = /* @__PURE__ */ new Set([
   "loop",
   "muted",
+  "autoplay",
   "seekable",
   "cors-fallback-redirect-confirmation",
   "hide-compass",
@@ -641,6 +649,7 @@ const NUMBER_ATTRS = /* @__PURE__ */ new Set([
   "fps",
   "start-lat",
   "start-lon",
+  "lens-angle",
   "focal-length",
   "min-focal-length",
   "max-focal-length"
@@ -672,6 +681,27 @@ class VzBaseElement extends HTMLElementBase {
     this.resizeObserver = new ResizeObserver(() => this.onResize());
     this.resizeObserver.observe(this);
     this.injectBaseStyles();
+    const pending = this.beforeConnect();
+    if (pending && typeof pending.then === "function") {
+      pending.then(
+        () => this.finishConnect(),
+        () => this.finishConnect()
+      );
+    } else {
+      this.finishConnect();
+    }
+  }
+  /**
+   * Optional async hook run after config/styles are resolved but BEFORE
+   * onConnected(). Return a promise to defer onConnected() until it settles
+   * (e.g. to inject fetched DOM children); return void (default) to keep the
+   * connect path synchronous. Subclasses override.
+   */
+  beforeConnect() {
+    return;
+  }
+  finishConnect() {
+    if (!this.isConnected) return;
     this.onConnected();
     this.checkLicenseAsync();
   }
@@ -1310,6 +1340,7 @@ uniform float uScaleX;
 uniform float uScaleY;
 uniform float uOffsetX;
 uniform float uOffsetY;
+uniform float uLensFov; // capture-lens angle in RADIANS (WS-F, 120-250 deg)
 
 varying vec3 vWorldPosition;
 
@@ -1328,9 +1359,12 @@ void main() {
   // Azimuthal angle around the hemisphere pole
   float phi = atan(dir.y, dir.x * faceSign);
 
-  // Map to circular fisheye UV using equidistant projection
-  // r ranges from 0 (pole) to 1 (equator)
-  float r = theta / (PI * 0.5);
+  // Map to circular fisheye UV using equidistant projection.
+  // r = 1 at the lens edge (uLensFov/2 from the pole). For lenses wider than
+  // 180 deg the hemisphere uses only the inner part of the circle; for
+  // narrower lenses r can exceed 1 — clamp to the edge (looks better than
+  // holes; decided by visual test).
+  float r = min(theta / (uLensFov * 0.5), 1.0);
 
   // Convert polar (r, phi) to cartesian circle coordinates, centered at (0.5, 0.5)
   vec2 circleUV = vec2(r * cos(phi), r * sin(phi)) * 0.5 + 0.5;
@@ -1347,6 +1381,41 @@ void main() {
 }
 `
 );
+const sphericalFragmentShader = (
+  /* glsl */
+  `
+uniform sampler2D map;
+uniform float uScaleX;
+uniform float uScaleY;
+uniform float uOffsetX;
+uniform float uOffsetY;
+uniform float uLensFov; // capture-lens angle in RADIANS
+
+varying vec3 vWorldPosition;
+
+void main() {
+  vec3 dir = normalize(vWorldPosition);
+
+  // Angle from the forward optical axis (0 straight ahead). The camera
+  // controller's default view (lat 0, lon 0) looks along +x, so that is the
+  // content center for VR180 footage.
+  float theta = acos(clamp(dir.x, -1.0, 1.0));
+
+  // Azimuth around the axis: +z is screen-right at the default view, +y up.
+  float phi = atan(dir.y, dir.z);
+
+  // Equidistant mapping; clamp beyond the lens edge.
+  float r = min(theta / (uLensFov * 0.5), 1.0);
+
+  vec2 circleUV = vec2(r * cos(phi), r * sin(phi)) * 0.5 + 0.5;
+
+  // Stereo region selection (full texture for mono).
+  vec2 uv = vec2(circleUV.x * uScaleX + uOffsetX, circleUV.y * uScaleY + uOffsetY);
+
+  gl_FragColor = texture2D(map, uv);
+}
+`
+);
 function stereoUniforms(stereoMode, eye) {
   switch (stereoMode) {
     case "sbs":
@@ -1374,8 +1443,16 @@ function stereoUniforms(stereoMode, eye) {
       };
   }
 }
+function clampLensAngle(deg) {
+  if (deg == null || Number.isNaN(deg)) return 180;
+  return Math.min(250, Math.max(120, deg));
+}
 class FisheyeProjection {
   meshes = [];
+  lensFovRad;
+  constructor(lensAngleDeg) {
+    this.lensFovRad = clampLensAngle(lensAngleDeg) * Math.PI / 180;
+  }
   createMeshes(texture, stereoMode) {
     this.dispose();
     if (stereoMode === "mono") {
@@ -1419,7 +1496,8 @@ class FisheyeProjection {
         uScaleX: { value: uniforms.uScaleX },
         uScaleY: { value: uniforms.uScaleY },
         uOffsetX: { value: uniforms.uOffsetX },
-        uOffsetY: { value: uniforms.uOffsetY }
+        uOffsetY: { value: uniforms.uOffsetY },
+        uLensFov: { value: this.lensFovRad }
       },
       vertexShader: fisheyeVertexShader,
       fragmentShader: fisheyeFragmentShader,
@@ -1428,6 +1506,72 @@ class FisheyeProjection {
     return new Mesh(geometry, material);
   }
 }
+class SphericalProjection {
+  meshes = [];
+  lensFovRad;
+  constructor(lensAngleDeg) {
+    this.lensFovRad = clampLensAngle(lensAngleDeg) * Math.PI / 180;
+  }
+  createMeshes(texture, stereoMode) {
+    this.dispose();
+    if (stereoMode === "mono") {
+      const mesh = this.createSphere(texture, { uScaleX: 1, uScaleY: 1, uOffsetX: 0, uOffsetY: 0 });
+      mesh.layers.set(0);
+      this.meshes = [mesh];
+      return this.meshes;
+    }
+    const effectiveMode = stereoMode === "separate" ? "tb" : stereoMode;
+    const rects = effectiveMode === "sbs" ? {
+      left: { uScaleX: 0.5, uScaleY: 1, uOffsetX: 0, uOffsetY: 0 },
+      right: { uScaleX: 0.5, uScaleY: 1, uOffsetX: 0.5, uOffsetY: 0 }
+    } : {
+      // TB: left eye top half, right eye bottom half (matches fisheye).
+      left: { uScaleX: 1, uScaleY: 0.5, uOffsetX: 0, uOffsetY: 0.5 },
+      right: { uScaleX: 1, uScaleY: 0.5, uOffsetX: 0, uOffsetY: 0 }
+    };
+    const meshL = this.createSphere(texture, rects.left);
+    const meshR = this.createSphere(texture, rects.right);
+    meshL.layers.set(1);
+    meshR.layers.set(2);
+    this.meshes = [meshL, meshR];
+    return this.meshes;
+  }
+  configureCamera(camera) {
+    camera.fov = CAMERA_DEFAULTS.fov;
+    camera.near = CAMERA_DEFAULTS.near;
+    camera.far = CAMERA_DEFAULTS.far;
+    camera.position.set(0, 0, 0);
+    camera.updateProjectionMatrix();
+  }
+  update(_camera, _time) {
+  }
+  dispose() {
+    for (const mesh of this.meshes) {
+      mesh.geometry.dispose();
+      mesh.material.dispose();
+    }
+    this.meshes = [];
+  }
+  createSphere(texture, rect) {
+    const { radius, widthSegments, heightSegments } = SPHERE_DEFAULTS;
+    const geometry = new SphereGeometry(radius, widthSegments, heightSegments);
+    geometry.scale(-1, 1, 1);
+    const material = new ShaderMaterial({
+      uniforms: {
+        map: { value: texture },
+        uScaleX: { value: rect.uScaleX },
+        uScaleY: { value: rect.uScaleY },
+        uOffsetX: { value: rect.uOffsetX },
+        uOffsetY: { value: rect.uOffsetY },
+        uLensFov: { value: this.lensFovRad }
+      },
+      vertexShader: fisheyeVertexShader,
+      fragmentShader: sphericalFragmentShader,
+      side: FrontSide
+    });
+    return new Mesh(geometry, material);
+  }
+}
 class CameraController {
   camera;
   state;
@@ -1686,7 +1830,10 @@ class VzRenderer {
       minFocalLength: config.minFocalLength,
       maxFocalLength: config.maxFocalLength,
       isPanoramic,
-      fovH: formatMeta?.fovH
+      // Spherical (VR180-family) content pans as far as the capture lens
+      // covers — the lens angle IS the horizontal FOV (WS-F). Other formats
+      // keep their registry fovH (fisheye duals are 360).
+      fovH: formatMeta?.projection === "spherical" ? clampLensAngle(this.config.lensAngle) : formatMeta?.fovH
     });
     this.resize();
   }
@@ -1845,8 +1992,9 @@ class VzRenderer {
   createProjection(formatMeta) {
     switch (formatMeta.projection) {
       case "equirect":
-      case "spherical":
         return new EquirectProjection(formatMeta.fovH);
+      case "spherical":
+        return new SphericalProjection(this.config.lensAngle);
       case "flat":
         return new FlatProjection();
       case "cubemap":
@@ -1854,7 +2002,7 @@ class VzRenderer {
       case "eac":
         return new EacProjection();
       case "fisheye":
-        return new FisheyeProjection();
+        return new FisheyeProjection(this.config.lensAngle);
       default:
         return new EquirectProjection(360);
     }
@@ -1911,7 +2059,7 @@ class ProgressiveAdapter {
     this.videoElement = videoElement;
     this._isAttached = true;
   }
-  load(url) {
+  load(url, _drm) {
     if (!this.videoElement) return;
     this.videoElement.src = url;
   }
@@ -1931,11 +2079,11 @@ class ProgressiveAdapter {
 async function createAdapter(type) {
   switch (type) {
     case "hls": {
-      const { HlsAdapter } = await import("./hls-adapter-BivH46L_.js");
+      const { HlsAdapter } = await import("./hls-adapter-C_a65zia.js");
       return new HlsAdapter();
     }
     case "dash": {
-      const { DashAdapter } = await import("./dash-adapter-tid9ZyhO.js");
+      const { DashAdapter } = await import("./dash-adapter-BMpHWcBA.js");
       return new DashAdapter();
     }
     case "progressive":
@@ -1949,20 +2097,22 @@ class SourceManager {
   state = null;
   events = null;
   sources = [];
+  drm;
   /**
    * Load sources into the video element using the appropriate adapter.
    */
-  async loadSources(sources, videoElement, state, events) {
+  async loadSources(sources, videoElement, state, events, drm) {
     this.sources = sources;
     this.videoElement = videoElement;
     this.state = state;
     this.events = events;
+    this.drm = drm;
     if (sources.length === 0) return;
     this.adapter?.destroy();
     const { adapterType, source } = this.selectSource(sources);
     this.adapter = await createAdapter(adapterType);
     this.adapter.attach(videoElement);
-    this.adapter.load(source.url);
+    this.adapter.load(source.url, drm);
     this.pollQualityLevels();
   }
   /** Get available quality levels from the current adapter */
@@ -1993,7 +2143,7 @@ class SourceManager {
     if (!this.videoElement || !this.adapter || index >= this.sources.length) return;
     const currentTime = this.videoElement.currentTime;
     const wasPlaying = !this.videoElement.paused;
-    this.adapter.load(this.sources[index].url);
+    this.adapter.load(this.sources[index].url, this.drm);
     const onLoaded = () => {
       this.videoElement.currentTime = currentTime;
       if (wasPlaying) this.videoElement.play().catch(() => {
@@ -2220,6 +2370,24 @@ const CONTROLS_CSS = `
     height: 5px;
   }
 
+  .vz-seek-chapters {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    z-index: 3;
+  }
+
+  .vz-seek-chapter-marker {
+    position: absolute;
+    top: 50%;
+    width: 2px;
+    height: 100%;
+    transform: translate(-50%, -50%);
+    background: rgba(0, 0, 0, 0.55);
+    box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.5);
+    pointer-events: none;
+  }
+
   .vz-seek-buffered {
     position: absolute;
     top: 0;
@@ -2702,6 +2870,74 @@ const CONTROLS_CSS = `
     font-size: 14px;
   }
 
+  /* ------------------------------------------------------------------ */
+  /* Chapters menu                                                       */
+  /* ------------------------------------------------------------------ */
+
+  .vz-chapter-menu {
+    position: relative;
+  }
+
+  .vz-chapter-dropdown {
+    position: absolute;
+    bottom: 100%;
+    right: 0;
+    margin-bottom: 8px;
+    background: var(--vz-secondary, rgba(20, 20, 30, 0.95));
+    backdrop-filter: blur(16px) saturate(1.3);
+    -webkit-backdrop-filter: blur(16px) saturate(1.3);
+    border: 1px solid rgba(255, 255, 255, 0.06);
+    border-radius: 8px;
+    padding: 4px 0;
+    min-width: 200px;
+    max-height: 260px;
+    overflow-y: auto;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.04);
+    display: none;
+    z-index: 20;
+  }
+
+  .vz-chapter-dropdown.open {
+    display: block;
+  }
+
+  .vz-chapter-option {
+    display: flex;
+    align-items: baseline;
+    gap: 10px;
+    padding: 8px 16px;
+    cursor: pointer;
+    font-size: 13px;
+    color: rgba(255, 255, 255, 0.7);
+    white-space: nowrap;
+    transition: color 0.12s, background 0.12s;
+  }
+
+  .vz-chapter-option:hover {
+    background: color-mix(in srgb, var(--vz-primary, #f43f5e) 8%, transparent);
+    color: #fff;
+  }
+
+  .vz-chapter-option.active {
+    color: var(--vz-primary, #f43f5e);
+  }
+
+  .vz-chapter-time {
+    font-variant-numeric: tabular-nums;
+    font-size: 12px;
+    color: rgba(255, 255, 255, 0.45);
+    flex-shrink: 0;
+  }
+
+  .vz-chapter-option.active .vz-chapter-time {
+    color: var(--vz-primary, #f43f5e);
+  }
+
+  .vz-chapter-label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
   /* ------------------------------------------------------------------ */
   /* Chat badge                                                          */
   /* ------------------------------------------------------------------ */
@@ -2779,7 +3015,7 @@ class ControlsOverlay {
     containerEl.appendChild(this.wrapper);
     this.loadingEl = document.createElement("div");
     this.loadingEl.className = "vz-loading hidden";
-    this.loadingEl.innerHTML = '<div class="vz-loading-spinner"></div>';
+    setStaticHtml(this.loadingEl, '<div class="vz-loading-spinner"></div>');
     containerEl.appendChild(this.loadingEl);
     const onActivity = () => this.show();
     containerEl.addEventListener("pointermove", onActivity);
@@ -2883,11 +3119,11 @@ class PlayButton {
     this.button = document.createElement("button");
     this.button.className = "vz-btn vz-play-btn";
     this.button.setAttribute("aria-label", "Play");
-    this.button.innerHTML = ICON_PLAY;
+    setStaticHtml(this.button, ICON_PLAY);
     this.bigPlay = document.createElement("button");
     this.bigPlay.className = "vz-big-play";
     this.bigPlay.setAttribute("aria-label", "Play");
-    this.bigPlay.innerHTML = ICON_PLAY;
+    setStaticHtml(this.bigPlay, ICON_PLAY);
     containerEl.appendChild(this.bigPlay);
     const toggle = () => {
       if (state.get("paused") || state.get("ended")) {
@@ -2901,14 +3137,14 @@ class PlayButton {
     this.bigPlay.addEventListener("click", toggle);
     this.bigPlay.addEventListener("pointerdown", (e) => e.stopPropagation());
     const unsubPlaying = state.subscribe("playing", (playing) => {
-      this.button.innerHTML = playing ? ICON_PAUSE : ICON_PLAY;
+      setStaticHtml(this.button, playing ? ICON_PAUSE : ICON_PLAY);
       this.button.setAttribute("aria-label", playing ? "Pause" : "Play");
       this.bigPlay.classList.toggle("hidden", playing);
     });
     this.unsubscribes.push(unsubPlaying);
     const unsubEnded = state.subscribe("ended", (ended) => {
       if (ended) {
-        this.button.innerHTML = ICON_PLAY;
+        setStaticHtml(this.button, ICON_PLAY);
         this.button.setAttribute("aria-label", "Play");
         this.bigPlay.classList.remove("hidden");
       }
@@ -2932,6 +3168,7 @@ class SeekBar {
   tooltip;
   input;
   track;
+  chapterLayer = null;
   unsubscribes = [];
   constructor(state, mediaElement) {
     this.timeDisplay = document.createElement("span");
@@ -3005,6 +3242,27 @@ class SeekBar {
   getElement() {
     return this.container;
   }
+  /**
+   * Render chapter tick markers on the seek track. Markers are purely visual
+   * (pointer-events: none) so they never interfere with the range input; the
+   * native `title` shows the chapter label on hover. Re-render on duration
+   * change by calling again; pass [] to clear.
+   */
+  setChapterMarkers(markers) {
+    if (!this.chapterLayer) {
+      this.chapterLayer = document.createElement("div");
+      this.chapterLayer.className = "vz-seek-chapters";
+      this.track.appendChild(this.chapterLayer);
+    }
+    this.chapterLayer.replaceChildren();
+    for (const m of markers) {
+      const tick = document.createElement("div");
+      tick.className = "vz-seek-chapter-marker";
+      tick.style.left = `${m.position * 100}%`;
+      tick.title = m.title;
+      this.chapterLayer.appendChild(tick);
+    }
+  }
   getTimeDisplay() {
     return this.timeDisplay;
   }
@@ -3041,7 +3299,7 @@ class VolumeControl {
     const muteBtn = document.createElement("button");
     muteBtn.className = "vz-btn vz-mute-btn";
     muteBtn.setAttribute("aria-label", "Mute");
-    muteBtn.innerHTML = ICON_VOLUME_HIGH;
+    setStaticHtml(muteBtn, ICON_VOLUME_HIGH);
     muteBtn.addEventListener("click", () => {
       mediaElement.muted = !mediaElement.muted;
     });
@@ -3074,12 +3332,12 @@ class VolumeControl {
       slider.value = String(pct);
       updateSliderTrack(pct);
       if (!state.get("muted")) {
-        muteBtn.innerHTML = volume > 0.5 ? ICON_VOLUME_HIGH : volume > 0 ? ICON_VOLUME_LOW : ICON_VOLUME_MUTED;
+        setStaticHtml(muteBtn, volume > 0.5 ? ICON_VOLUME_HIGH : volume > 0 ? ICON_VOLUME_LOW : ICON_VOLUME_MUTED);
       }
     });
     this.unsubscribes.push(unsubVolume);
     const unsubMuted = state.subscribe("muted", (muted) => {
-      muteBtn.innerHTML = muted ? ICON_VOLUME_MUTED : state.get("volume") > 0.5 ? ICON_VOLUME_HIGH : ICON_VOLUME_LOW;
+      setStaticHtml(muteBtn, muted ? ICON_VOLUME_MUTED : state.get("volume") > 0.5 ? ICON_VOLUME_HIGH : ICON_VOLUME_LOW);
       muteBtn.setAttribute("aria-label", muted ? "Unmute" : "Mute");
     });
     this.unsubscribes.push(unsubMuted);
@@ -3098,12 +3356,12 @@ class FullscreenButton {
     this.button = document.createElement("button");
     this.button.className = "vz-btn vz-fullscreen-btn";
     this.button.setAttribute("aria-label", "Enter fullscreen");
-    this.button.innerHTML = ICON_FULLSCREEN;
+    setStaticHtml(this.button, ICON_FULLSCREEN);
     this.button.addEventListener("click", () => {
       mediaElement.toggleFullscreen();
     });
     const unsubFs = state.subscribe("fullscreen", (fs) => {
-      this.button.innerHTML = fs ? ICON_FULLSCREEN_EXIT : ICON_FULLSCREEN;
+      setStaticHtml(this.button, fs ? ICON_FULLSCREEN_EXIT : ICON_FULLSCREEN);
       this.button.setAttribute("aria-label", fs ? "Exit fullscreen" : "Enter fullscreen");
     });
     this.unsubscribes.push(unsubFs);
@@ -3122,7 +3380,7 @@ class VrButton {
     this.button = document.createElement("button");
     this.button.className = "vz-btn vz-vr-btn";
     this.button.setAttribute("aria-label", "Enter VR");
-    this.button.innerHTML = ICON_VR;
+    setStaticHtml(this.button, ICON_VR);
     this.button.style.display = "none";
     this.button.addEventListener("click", () => {
       onToggleXR?.();
@@ -3155,7 +3413,7 @@ class Compass {
     this.button = document.createElement("button");
     this.button.className = "vz-btn vz-compass";
     this.button.setAttribute("aria-label", "Reset to north");
-    this.button.innerHTML = ICON_COMPASS;
+    setStaticHtml(this.button, ICON_COMPASS);
     this.button.addEventListener("click", () => {
       const controller = renderer.getCameraController();
       controller.setOrientation(state.get("lat"), 0);
@@ -3186,7 +3444,7 @@ class QualityMenu {
     const btn = document.createElement("button");
     btn.className = "vz-btn vz-quality-btn";
     btn.setAttribute("aria-label", "Quality");
-    btn.innerHTML = ICON_SETTINGS;
+    setStaticHtml(btn, ICON_SETTINGS);
     this.dropdown = document.createElement("div");
     this.dropdown.className = "vz-quality-dropdown";
     this.container.appendChild(btn);
@@ -3220,10 +3478,13 @@ class QualityMenu {
   renderOptions(state, sourceManager) {
     const levels = state.get("availableQualities");
     const currentQuality = state.get("currentQuality");
-    this.dropdown.innerHTML = "";
+    this.dropdown.replaceChildren();
     const autoOption = document.createElement("div");
     autoOption.className = `vz-quality-option ${currentQuality === "auto" ? "active" : ""}`;
-    autoOption.innerHTML = `<span class="vz-quality-check">${currentQuality === "auto" ? "✓" : ""}</span>Auto`;
+    const autoCheck = document.createElement("span");
+    autoCheck.className = "vz-quality-check";
+    autoCheck.textContent = currentQuality === "auto" ? "✓" : "";
+    autoOption.append(autoCheck, document.createTextNode("Auto"));
     autoOption.addEventListener("click", () => {
       sourceManager.setQualityLevel(-1);
       this.isOpen = false;
@@ -3234,7 +3495,10 @@ class QualityMenu {
       const option = document.createElement("div");
       const isActive = level.label === currentQuality;
       option.className = `vz-quality-option ${isActive ? "active" : ""}`;
-      option.innerHTML = `<span class="vz-quality-check">${isActive ? "✓" : ""}</span>${level.label}`;
+      const check = document.createElement("span");
+      check.className = "vz-quality-check";
+      check.textContent = isActive ? "✓" : "";
+      option.append(check, document.createTextNode(level.label));
       option.addEventListener("click", () => {
         sourceManager.setQualityLevel(index);
         this.isOpen = false;
@@ -3485,7 +3749,7 @@ class LiveIndicator {
     this.container.title = "Jump to live";
     this.dotEl = document.createElement("span");
     this.dotEl.className = "vz-live-dot at-edge";
-    this.dotEl.innerHTML = ICON_LIVE_DOT;
+    setStaticHtml(this.dotEl, ICON_LIVE_DOT);
     this.labelEl = document.createElement("span");
     this.labelEl.className = "vz-live-label";
     this.labelEl.textContent = "LIVE";
@@ -3708,16 +3972,55 @@ function initAnalytics(state, events, options) {
       apiEndpoint: options.apiEndpoint,
       apiKey: options.apiKey
     });
+    const WATCH_TIME_REPORT_SECONDS = 60;
+    let playStartMs = null;
+    let accumulatedMs = 0;
+    const reportWatchTime = () => {
+      if (playStartMs != null) {
+        accumulatedMs += Date.now() - playStartMs;
+        playStartMs = state.get("playing") ? Date.now() : null;
+      }
+      const seconds = Math.round(accumulatedMs / 1e3);
+      if (seconds >= 1) {
+        const quality = state.get("currentQuality");
+        collector.track("watch_time", { seconds, ...quality ? { quality } : {} });
+        accumulatedMs = 0;
+      }
+    };
+    const watchTimer = setInterval(() => {
+      const liveMs = accumulatedMs + (playStartMs != null ? Date.now() - playStartMs : 0);
+      if (liveMs >= WATCH_TIME_REPORT_SECONDS * 1e3) reportWatchTime();
+    }, 1e4);
+    cleanups.push(() => clearInterval(watchTimer));
+    if (typeof window !== "undefined") {
+      const watchVisibilityHandler = () => {
+        if (document.visibilityState === "hidden") {
+          reportWatchTime();
+          void collector.flush();
+        }
+      };
+      window.addEventListener("visibilitychange", watchVisibilityHandler);
+      cleanups.push(() => window.removeEventListener("visibilitychange", watchVisibilityHandler));
+    }
     cleanups.push(
       state.subscribe("playing", (playing) => {
         collector.track(playing ? "play" : "pause");
+        if (playing) {
+          playStartMs = Date.now();
+        } else {
+          reportWatchTime();
+        }
       })
     );
     cleanups.push(
       state.subscribe("ended", (ended) => {
-        if (ended) collector.track("ended");
+        if (ended) {
+          collector.track("ended");
+          reportWatchTime();
+        }
       })
     );
+    cleanups.push(() => reportWatchTime());
     cleanups.push(
       state.subscribe("seeking", (seeking) => {
         if (seeking) collector.track("seek", { time: state.get("currentTime") });
@@ -3799,21 +4102,313 @@ function initAnalytics(state, events, options) {
     }
   };
 }
-class CcButton {
+function trimTrailingSlash(value) {
+  return value.replace(/\/+$/, "");
+}
+async function getJson(url, apiKey, fetchImpl) {
+  try {
+    const headers = {};
+    if (apiKey) headers["x-api-key"] = apiKey;
+    const res = await fetchImpl(url, { headers });
+    if (!res.ok) return null;
+    return await res.json();
+  } catch {
+    return null;
+  }
+}
+async function fetchDeliveryContent(opts, fetchImpl = fetch) {
+  const url = `${trimTrailingSlash(opts.apiEndpoint)}/api/v1/delivery/content/${encodeURIComponent(
+    opts.contentId
+  )}`;
+  return getJson(url, opts.apiKey, fetchImpl);
+}
+function vttDataUri(vtt) {
+  return `data:text/vtt;charset=utf-8,${encodeURIComponent(vtt)}`;
+}
+function injectSources(host, config) {
+  for (const source of config.sources) {
+    const el = document.createElement("source");
+    el.setAttribute("src", source.url);
+    el.setAttribute("type", source.type);
+    if (source.quality) el.setAttribute("quality", source.quality);
+    if (source.fps != null) el.setAttribute("fps", String(source.fps));
+    if (source.format) el.setAttribute("format", source.format);
+    if (source.audioFormat) el.setAttribute("audio-format", source.audioFormat);
+    host.appendChild(el);
+  }
+}
+function injectAnnotations(host, config) {
+  for (const a of config.annotations) {
+    const el = document.createElement("vz-annotation");
+    el.setAttribute("lat", String(a.lat));
+    el.setAttribute("lon", String(a.lon));
+    el.setAttribute("title", a.title);
+    if (a.icon) el.setAttribute("icon", a.icon);
+    if (a.timeStart != null) el.setAttribute("time-start", String(a.timeStart));
+    if (a.timeEnd != null) el.setAttribute("time-end", String(a.timeEnd));
+    el.setAttribute("sort-order", String(a.sortOrder));
+    if (a.htmlContent) el.innerHTML = sanitizeAnnotationHtml(a.htmlContent);
+    host.appendChild(el);
+  }
+}
+function injectChapters(host, config) {
+  for (const c of config.chapters) {
+    const el = document.createElement("vz-chapter");
+    el.setAttribute("start", String(c.startTime));
+    el.setAttribute("title", c.title);
+    el.setAttribute("sort-order", String(c.sortOrder));
+    el.setAttribute("chapter-id", c.id);
+    host.appendChild(el);
+  }
+}
+function injectCaptions(host, config) {
+  for (const c of config.captions) {
+    const el = document.createElement("track");
+    el.setAttribute("kind", "captions");
+    el.setAttribute("srclang", c.srclang);
+    el.setAttribute("label", c.label);
+    el.setAttribute("src", vttDataUri(c.vttContent));
+    host.appendChild(el);
+  }
+}
+function applyDeliveryConfigToDom(host, config) {
+  if (config.lensAngle != null && !host.hasAttribute("lens-angle")) {
+    host.setAttribute("lens-angle", String(config.lensAngle));
+  }
+  if (config.previewUrl && !host.hasAttribute("preview")) {
+    host.setAttribute("preview", config.previewUrl);
+  }
+  injectSources(host, config);
+  injectAnnotations(host, config);
+  injectCaptions(host, config);
+  injectChapters(host, config);
+}
+const MONO_BY_PROJECTION = {
+  flat: VzFormat.MONO_FLAT,
+  equirect: VzFormat.MONO_360,
+  cubemap: VzFormat.MONO_CUBEMAP,
+  eac: VzFormat.MONO_EAC,
+  fisheye: VzFormat.MONO_FISHEYE
+};
+function monoEquivalent(meta) {
+  if (meta.fovH === 180) return void 0;
+  return MONO_BY_PROJECTION[meta.projection];
+}
+function resolveFormatGate(format, features) {
+  const meta = getFormatMeta(format);
+  if (!meta) return { action: "allow" };
+  const is180 = meta.fovH === 180;
+  const isStereo = meta.stereoMode !== "mono";
+  if (is180 && !features.formats180) return { action: "block", requires: "formats180" };
+  if (isStereo && !features.stereoFormats) {
+    const mono = monoEquivalent(meta);
+    return mono ? { action: "downgrade", to: mono } : { action: "block", requires: "stereoFormats" };
+  }
+  return { action: "allow" };
+}
+function resolveFeatureGate(_feature, enabled) {
+  return enabled ? { action: "allow" } : { action: "degrade" };
+}
+function resolveDrmGate(hasDrmConfig, drmFeatureEnabled) {
+  if (!hasDrmConfig) return { action: "none" };
+  return drmFeatureEnabled ? { action: "allow" } : { action: "block" };
+}
+function parseDomDrmConfig(host) {
+  const keyId = host.getAttribute("drm-key-id");
+  const widevine = host.getAttribute("drm-widevine-url");
+  const playready = host.getAttribute("drm-playready-url");
+  const fairplay = host.getAttribute("drm-fairplay-url");
+  if (!keyId || !widevine || !playready || !fairplay) return null;
+  return {
+    scheme: "cbcs",
+    keyId,
+    licenseUrls: { widevine, playready, fairplay },
+    fairplayCertUrl: host.getAttribute("drm-fairplay-cert-url")
+  };
+}
+function normalizeChapters(raw) {
+  const withDefaults = raw.map((c, i) => ({
+    id: c.id ?? "",
+    title: c.title,
+    startTime: c.startTime,
+    sortOrder: c.sortOrder ?? i
+  }));
+  return sortChapters(withDefaults).map((c, i) => ({
+    ...c,
+    id: c.id || `chapter-${i}`
+  }));
+}
+function sortChapters(chapters) {
+  return [...chapters].sort((a, b) => a.startTime - b.startTime);
+}
+function resolveActiveChapter(chapters, currentTime) {
+  let active = null;
+  for (const c of sortChapters(chapters)) {
+    if (c.startTime <= currentTime) active = c;
+    else break;
+  }
+  return active;
+}
+function chapterMarkerPositions(chapters, duration) {
+  if (!(duration > 0)) return [];
+  return sortChapters(chapters).map((c) => ({
+    id: c.id,
+    title: c.title,
+    startTime: c.startTime,
+    position: Math.max(0, Math.min(1, c.startTime / duration))
+  }));
+}
+function formatTimestamp(seconds) {
+  if (isNaN(seconds) || !isFinite(seconds) || seconds < 0) return "0:00";
+  const s = Math.floor(seconds);
+  const h = Math.floor(s / 3600);
+  const m = Math.floor(s % 3600 / 60);
+  const sec = s % 60;
+  if (h > 0) return `${h}:${String(m).padStart(2, "0")}:${String(sec).padStart(2, "0")}`;
+  return `${m}:${String(sec).padStart(2, "0")}`;
+}
+class ChapterMenu {
   container;
-  dropdown;
   btn;
-  captionRenderer;
-  unsubscribes = [];
+  dropdown;
+  chapters;
+  onSelect;
+  activeId = null;
   isOpen = false;
-  constructor(state, captionRenderer) {
-    this.captionRenderer = captionRenderer;
+  unsubscribes = [];
+  constructor(chapters, onSelect) {
+    this.chapters = chapters;
+    this.onSelect = onSelect;
+    this.container = document.createElement("div");
+    this.container.className = "vz-chapter-menu";
+    this.btn = document.createElement("button");
+    this.btn.className = "vz-btn vz-chapter-btn";
+    this.btn.setAttribute("aria-label", "Chapters");
+    this.btn.title = "Chapters";
+    setStaticHtml(this.btn, ICON_CHAPTERS);
+    this.dropdown = document.createElement("div");
+    this.dropdown.className = "vz-chapter-dropdown";
+    this.container.appendChild(this.btn);
+    this.container.appendChild(this.dropdown);
+    this.btn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      this.isOpen = !this.isOpen;
+      this.dropdown.classList.toggle("open", this.isOpen);
+    });
+    const onDocClick = () => {
+      if (this.isOpen) {
+        this.isOpen = false;
+        this.dropdown.classList.remove("open");
+      }
+    };
+    document.addEventListener("click", onDocClick);
+    this.unsubscribes.push(() => document.removeEventListener("click", onDocClick));
+    this.renderOptions();
+  }
+  getElement() {
+    return this.container;
+  }
+  /** Highlight the chapter with the given id (or clear when null). */
+  setActive(id) {
+    this.activeId = id;
+    const rows = this.dropdown.querySelectorAll(".vz-chapter-option");
+    rows.forEach((row) => {
+      row.classList.toggle("active", row.dataset.chapterId === id);
+    });
+  }
+  dispose() {
+    for (const unsub of this.unsubscribes) unsub();
+    this.unsubscribes = [];
+    this.container.remove();
+  }
+  renderOptions() {
+    this.dropdown.replaceChildren();
+    for (const chapter of this.chapters) {
+      const row = document.createElement("div");
+      row.className = "vz-chapter-option";
+      row.dataset.chapterId = chapter.id;
+      if (chapter.id === this.activeId) row.classList.add("active");
+      const time = document.createElement("span");
+      time.className = "vz-chapter-time";
+      time.textContent = formatTimestamp(chapter.startTime);
+      const label = document.createElement("span");
+      label.className = "vz-chapter-label";
+      label.textContent = chapter.title;
+      row.appendChild(time);
+      row.appendChild(label);
+      row.addEventListener("click", (e) => {
+        e.stopPropagation();
+        this.isOpen = false;
+        this.dropdown.classList.remove("open");
+        this.onSelect(chapter.startTime);
+      });
+      this.dropdown.appendChild(row);
+    }
+  }
+}
+class ChapterManager {
+  chapters;
+  state;
+  events;
+  seek;
+  seekBar;
+  menu = null;
+  activeId = null;
+  unsubscribes = [];
+  constructor(opts) {
+    this.chapters = opts.chapters;
+    this.state = opts.state;
+    this.events = opts.events;
+    this.seek = opts.seek;
+    this.seekBar = opts.seekBar ?? null;
+    if (opts.controlsOverlay) {
+      this.menu = new ChapterMenu(this.chapters, (t) => this.seek(t));
+      opts.controlsOverlay.addControl(this.menu.getElement(), "right");
+    }
+    this.renderMarkers(this.state.get("duration"));
+    this.unsubscribes.push(this.state.subscribe("duration", (d) => this.renderMarkers(d)));
+    this.updateActive(this.state.get("currentTime"));
+    this.unsubscribes.push(this.state.subscribe("currentTime", (t) => this.updateActive(t)));
+  }
+  renderMarkers(duration) {
+    this.seekBar?.setChapterMarkers(chapterMarkerPositions(this.chapters, duration));
+  }
+  updateActive(currentTime) {
+    const active = resolveActiveChapter(this.chapters, currentTime);
+    const id = active?.id ?? null;
+    if (id === this.activeId) return;
+    this.activeId = id;
+    this.menu?.setActive(id);
+    if (active) {
+      this.events.emit("vz-chapter-change", {
+        chapterId: active.id,
+        title: active.title,
+        startTime: active.startTime
+      });
+    }
+  }
+  dispose() {
+    for (const u of this.unsubscribes) u();
+    this.unsubscribes = [];
+    this.menu?.dispose();
+    this.menu = null;
+  }
+}
+class CcButton {
+  container;
+  dropdown;
+  btn;
+  captionRenderer;
+  unsubscribes = [];
+  isOpen = false;
+  constructor(state, captionRenderer) {
+    this.captionRenderer = captionRenderer;
     this.container = document.createElement("div");
     this.container.className = "vz-cc-menu";
     this.btn = document.createElement("button");
     this.btn.className = "vz-btn vz-cc-btn";
     this.btn.setAttribute("aria-label", "Captions");
-    this.btn.innerHTML = ICON_CC;
+    setStaticHtml(this.btn, ICON_CC);
     this.dropdown = document.createElement("div");
     this.dropdown.className = "vz-cc-dropdown";
     this.container.appendChild(this.btn);
@@ -3854,12 +4449,15 @@ class CcButton {
     }
   }
   renderOptions() {
-    this.dropdown.innerHTML = "";
+    this.dropdown.replaceChildren();
     const tracks = this.captionRenderer.getTracks();
     const activeIndex = this.captionRenderer.getActiveTrackIndex();
     const offOption = document.createElement("div");
     offOption.className = `vz-cc-option ${activeIndex === -1 ? "active" : ""}`;
-    offOption.innerHTML = `<span class="vz-cc-check">${activeIndex === -1 ? "✓" : ""}</span>Off`;
+    const offCheck = document.createElement("span");
+    offCheck.className = "vz-cc-check";
+    offCheck.textContent = activeIndex === -1 ? "✓" : "";
+    offOption.append(offCheck, document.createTextNode("Off"));
     offOption.addEventListener("click", () => {
       this.captionRenderer.setActiveTrack(-1);
       this.isOpen = false;
@@ -3886,6 +4484,21 @@ class CcButton {
     });
   }
 }
+function applyAutoplayPolicy(video, config) {
+  if (!config.autoplay) return;
+  if (!video.muted) {
+    console.info("[Vizor] autoplay requires muted playback — muting (browser policy)");
+    video.muted = true;
+  }
+  let attempted = false;
+  video.addEventListener("canplay", () => {
+    if (attempted) return;
+    attempted = true;
+    const p = video.play();
+    if (p && typeof p.catch === "function") p.catch(() => {
+    });
+  });
+}
 class VzMediaElement extends VzBaseElement {
   renderer;
   videoElement;
@@ -3909,6 +4522,8 @@ class VzMediaElement extends VzBaseElement {
   liveIndicator = null;
   analyticsHandle = null;
   annotationManager = null;
+  chapterManager = null;
+  pendingChapters = [];
   captionRenderer = null;
   ccButton = null;
   collabClient = null;
@@ -3918,6 +4533,30 @@ class VzMediaElement extends VzBaseElement {
   chatButton = null;
   voiceManager = null;
   voiceButton = null;
+  drmConfig = null;
+  deferredDrmSources = [];
+  /**
+   * A content-id embed (`<vz-video content-id api-key>` with no DOM `<source>`)
+   * fetches its config from the delivery API and injects the equivalent
+   * `<source>`/`<vz-annotation>`/`<track>` DOM children before onConnected() runs
+   * — so authored content actually reaches the viewer. A DOM-authored embed
+   * (any `<source>` child) wins and skips the fetch entirely.
+   */
+  beforeConnect() {
+    const { contentId, apiKey } = this.config;
+    if (!contentId || !apiKey) return;
+    if (this.querySelector("source")) return;
+    return this.hydrateFromDeliveryApi(contentId, apiKey);
+  }
+  async hydrateFromDeliveryApi(contentId, apiKey) {
+    const apiEndpoint = this.config.apiEndpoint ?? window.location.origin;
+    const config = await fetchDeliveryContent({ apiEndpoint, contentId, apiKey });
+    if (!config) return;
+    if (!this.hasAttribute("format")) this.config.format = config.format;
+    if (!this.config.poster && config.poster) this.config.poster = config.poster;
+    applyDeliveryConfigToDom(this, config);
+    if (config.drm) this.drmConfig = config.drm;
+  }
   onConnected() {
     this.containerEl = document.createElement("div");
     this.containerEl.className = "vz-container";
@@ -3931,6 +4570,16 @@ class VzMediaElement extends VzBaseElement {
         });
         posterEl.classList.add("hidden");
       });
+      if (this.config.preview) {
+        posterEl.addEventListener("mouseenter", () => {
+          if (this.hasFeature("animatedPreviews")) {
+            posterEl.style.backgroundImage = `url(${this.config.preview})`;
+          }
+        });
+        posterEl.addEventListener("mouseleave", () => {
+          posterEl.style.backgroundImage = `url(${this.config.poster})`;
+        });
+      }
       this.shadow.appendChild(posterEl);
     }
     this.videoElement = this.createVideoElement();
@@ -3947,14 +4596,8 @@ class VzMediaElement extends VzBaseElement {
       }
     });
     this.sourceManager = new SourceManager();
+    this.drmConfig = this.drmConfig ?? parseDomDrmConfig(this);
     this.loadSources();
-    if (this.config.audioFormat === "ambix") {
-      this.audioManager = new AudioManager(this.state, this.events);
-      this.audioManager.init(this.videoElement, "ambix").catch((err) => {
-        console.warn("[Vizor] Audio init error:", err);
-      });
-      this.renderer.setAudioManager(this.audioManager);
-    }
     this.cleanupFullscreen = onFullscreenChange(() => {
       const fs = isFullscreen();
       this.state.set("fullscreen", fs);
@@ -4032,6 +4675,7 @@ class VzMediaElement extends VzBaseElement {
     }
     this.initAnnotations();
     this.initCaptions();
+    this.initChapters();
     this.initCollab();
     this.keyboardShortcuts = new KeyboardShortcuts(this, this.state, this, this.captionRenderer, this.chatPanel, this.voiceButton);
     this.renderer.start();
@@ -4060,6 +4704,8 @@ class VzMediaElement extends VzBaseElement {
     this.analyticsHandle = null;
     this.annotationManager?.dispose();
     this.annotationManager = null;
+    this.chapterManager?.dispose();
+    this.chapterManager = null;
     this.ccButton?.dispose();
     this.ccButton = null;
     this.captionRenderer?.dispose();
@@ -4083,16 +4729,127 @@ class VzMediaElement extends VzBaseElement {
     this.videoElement.removeAttribute("src");
     this.videoElement.load();
     this.renderer.dispose();
+    this.drmConfig = null;
+    this.deferredDrmSources = [];
     this.onMediaDisconnected();
   }
   onResize() {
     this.renderer?.resize();
   }
-  /** After license resolves, enforce theme color gating */
+  /** After license resolves, enforce theme + format/feature tier gating */
   onLicenseResolved() {
     if (this.controlsOverlay && this.license) {
       this.controlsOverlay.updateTheme(this.config, this.license);
     }
+    this.applyFormatGate();
+    this.applyWebxrGate();
+    this.applySpatialAudioGate();
+    this.applyChaptersGate();
+    this.applyDrmGate();
+  }
+  /**
+   * Manual chapters are a paid feature. Once the license is known, wire the
+   * chapter UI (seek-bar markers + menu) and active-chapter tracking that fires
+   * `vz-chapter-change`, but only when the tier includes chapters. Unlicensed
+   * tiers degrade gracefully: no markers, no menu, no event (the video plays
+   * unaffected).
+   */
+  applyChaptersGate() {
+    if (this.chapterManager || this.pendingChapters.length === 0) return;
+    if (resolveFeatureGate("chapters", this.hasFeature("chapters")).action !== "allow") return;
+    this.chapterManager = new ChapterManager({
+      chapters: this.pendingChapters,
+      state: this.state,
+      events: this.events,
+      seek: (t) => this.seek(t),
+      seekBar: this.seekBar,
+      controlsOverlay: this.controlsOverlay
+    });
+  }
+  /**
+   * WebXR (Enter-VR) is a paid feature. Once the license is known, if the tier
+   * doesn't include it, remove the VR button so it can't be used — flat/pointer
+   * viewing continues unaffected (graceful downgrade). Licensed users keep the
+   * button, which reveals itself only when the device reports XR support.
+   */
+  applyWebxrGate() {
+    if (!this.license) return;
+    if (resolveFeatureGate("webxr", this.hasFeature("webxr")).action === "allow") return;
+    this.vrButton?.dispose();
+    this.vrButton?.getElement().remove();
+    this.vrButton = null;
+  }
+  /**
+   * Spatial (ambisonic) audio is a paid feature. When the source is authored as
+   * ambix and the tier includes it, wire up the AudioManager here (license is
+   * now known). When the tier lacks it, we do nothing — the hidden <video>'s
+   * own audio track plays as ordinary stereo, the graceful fallback.
+   */
+  applySpatialAudioGate() {
+    if (this.config.audioFormat !== "ambix") return;
+    if (this.audioManager) return;
+    if (resolveFeatureGate("spatialAudio", this.hasFeature("spatialAudio")).action !== "allow") {
+      return;
+    }
+    this.audioManager = new AudioManager(this.state, this.events);
+    this.audioManager.init(this.videoElement, "ambix").catch((err) => {
+      console.warn("[Vizor] Audio init error:", err);
+    });
+    this.renderer.setAudioManager(this.audioManager);
+  }
+  /**
+   * Enforce format tier gating once the license is known. A stereo format the
+   * tier doesn't include is downgraded to its mono equivalent (re-projecting if
+   * the renderer already set up the ungated one); a format with no fallback (a
+   * 180 half-sphere) is blocked behind an upgrade overlay. Prevents free users
+   * from silently receiving paid formats.
+   */
+  applyFormatGate() {
+    if (!this.license || !this.config.format) return;
+    const decision = resolveFormatGate(this.config.format, this.license.features);
+    if (decision.action === "downgrade") {
+      this.config.format = decision.to;
+      if (this.renderer && this.videoElement.readyState >= 2) {
+        this.renderer.setupVideo(this.videoElement, decision.to);
+      }
+    } else if (decision.action === "block") {
+      this.suppressAutoSetup = true;
+      this.videoElement.pause();
+      this.showFormatUpgradeOverlay(decision.requires);
+    }
+  }
+  showFormatUpgradeOverlay(requires) {
+    const label = requires === "formats180" ? "180° video" : "Stereoscopic 3D";
+    this.showUpgradeOverlay("vz-format-gate", `${label} playback requires a paid Vizor plan.`);
+  }
+  showUpgradeOverlay(className, message) {
+    if (!this.containerEl || this.shadow.querySelector("." + className)) return;
+    const overlay = document.createElement("div");
+    overlay.className = className;
+    overlay.style.cssText = "position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:1rem;background:rgba(0,0,0,0.85);color:#fff;z-index:10;font:500 14px/1.5 system-ui,-apple-system,sans-serif;";
+    overlay.textContent = message;
+    this.containerEl.appendChild(overlay);
+  }
+  /**
+   * DRM assets are encrypted-only (no plain fallback). Once the license is known:
+   * a tier WITHOUT `drm` is blocked behind an upgrade overlay (and NO license
+   * request is made); a licensed tier performs the deferred encrypted source load
+   * with the DRM context (license URLs + api-key) so the adapter can drive EME.
+   * EME/CDM errors during playback surface via the adapter's existing error events.
+   */
+  applyDrmGate() {
+    const decision = resolveDrmGate(this.drmConfig !== null, this.hasFeature("drm"));
+    if (decision.action === "none") return;
+    if (decision.action === "block") {
+      this.videoElement.pause();
+      this.showUpgradeOverlay("vz-drm-gate", "DRM-protected playback requires a Vizor Enterprise plan.");
+      return;
+    }
+    const drm = { config: this.drmConfig, apiKey: this.config.apiKey };
+    this.sourceManager.loadSources(this.deferredDrmSources, this.videoElement, this.state, this.events, drm).catch((err) => {
+      console.error("[Vizor] DRM source loading error:", err);
+      this.events.emit("vz-error", { code: "DRM_LOAD_ERROR", message: String(err) });
+    });
   }
   onAttributeChanged(name, _oldVal, _newVal) {
     if (name === "format" && this.config.format && this.renderer) {
@@ -4178,6 +4935,23 @@ class VzMediaElement extends VzBaseElement {
       this.annotationManager?.update(time);
     });
   }
+  /**
+   * Parse `<vz-chapter>` children into a normalized pending list. The chapter UI
+   * (markers/menu/event) is wired later in applyChaptersGate() once the license
+   * is known, since chapters are tier-gated.
+   */
+  initChapters() {
+    const chapterEls = this.querySelectorAll("vz-chapter");
+    if (chapterEls.length === 0) return;
+    const raw = [];
+    chapterEls.forEach((el) => {
+      const vzEl = el;
+      if (typeof vzEl.getData === "function") {
+        raw.push(vzEl.getData());
+      }
+    });
+    this.pendingChapters = normalizeChapters(raw);
+  }
   /** Initialize collaborative viewing if collab attributes are set */
   initCollab() {
     const { collabServer, collabRoom, collabRole, collabDisplayName } = this.config;
@@ -4296,6 +5070,7 @@ class VzMediaElement extends VzBaseElement {
     video.preload = this.config.preload === "none" ? "metadata" : this.config.preload;
     video.loop = this.config.loop;
     video.muted = this.config.muted;
+    applyAutoplayPolicy(video, this.config);
     video.style.display = "none";
     video.addEventListener("error", () => {
       const err = video.error;
@@ -4336,6 +5111,10 @@ class VzMediaElement extends VzBaseElement {
       }
     }
     if (sources.length === 0) return;
+    if (this.drmConfig) {
+      this.deferredDrmSources = sources;
+      return;
+    }
     this.sourceManager.loadSources(sources, this.videoElement, this.state, this.events).catch((err) => {
       console.error("[Vizor] Source loading error:", err);
       this.events.emit("vz-error", { code: "SOURCE_LOAD_ERROR", message: String(err) });
@@ -4480,8 +5259,8 @@ function registerImg() {
 const HOTSPOT_DISTANCE = 200;
 const HOTSPOT_SCALE_X = 30;
 const HOTSPOT_SCALE_Y = 15;
-const CANVAS_W = 256;
-const CANVAS_H = 128;
+const CANVAS_W$1 = 256;
+const CANVAS_H$1 = 128;
 class HotspotRenderer {
   sprites = [];
   scene;
@@ -4516,22 +5295,22 @@ class HotspotRenderer {
   }
   createSprite(portal) {
     const canvas = document.createElement("canvas");
-    canvas.width = CANVAS_W;
-    canvas.height = CANVAS_H;
+    canvas.width = CANVAS_W$1;
+    canvas.height = CANVAS_H$1;
     const ctx = canvas.getContext("2d");
     const pad = 8;
     ctx.fillStyle = "rgba(0, 160, 255, 0.85)";
     ctx.beginPath();
-    this.roundRect(ctx, pad, pad, CANVAS_W - pad * 2, CANVAS_H - pad * 2, 16);
+    this.roundRect(ctx, pad, pad, CANVAS_W$1 - pad * 2, CANVAS_H$1 - pad * 2, 16);
     ctx.fill();
     const label = portal.title ?? portal.to;
     ctx.fillStyle = "#fff";
     ctx.font = "bold 24px sans-serif";
     ctx.textAlign = "center";
     ctx.textBaseline = "middle";
-    ctx.fillText(label, CANVAS_W / 2, CANVAS_H / 2 - 4, CANVAS_W - 32);
+    ctx.fillText(label, CANVAS_W$1 / 2, CANVAS_H$1 / 2 - 4, CANVAS_W$1 - 32);
     ctx.font = "16px sans-serif";
-    ctx.fillText("→", CANVAS_W / 2, CANVAS_H / 2 + 20);
+    ctx.fillText("→", CANVAS_W$1 / 2, CANVAS_H$1 / 2 + 20);
     const texture = new CanvasTexture(canvas);
     texture.minFilter = LinearFilter;
     texture.magFilter = LinearFilter;
@@ -4645,6 +5424,12 @@ class VzTourElement extends VzBaseElement {
   xrManager = null;
   cleanupFullscreen = null;
   loader = new TextureLoader();
+  /**
+   * True once the license resolves without the `tours` feature. In that state
+   * the tour degrades to a single static panorama (the start probe): portal
+   * navigation between probes is disabled.
+   */
+  toursLocked = false;
   onConnected() {
     this.containerEl = document.createElement("div");
     this.containerEl.className = "vz-container";
@@ -4719,6 +5504,26 @@ class VzTourElement extends VzBaseElement {
   onResize() {
     this.renderer?.resize();
   }
+  /**
+   * Interactive tours are a paid feature, and WebXR (Enter-VR) is gated
+   * separately. Once the license resolves, enforce both.
+   *
+   * - tours not licensed → graceful downgrade to a single static panorama: the
+   *   start probe stays visible but portal navigation is disabled (existing
+   *   portals cleared, future ones suppressed).
+   * - webxr not licensed → remove the VR button (flat viewing continues).
+   */
+  onLicenseResolved() {
+    if (resolveFeatureGate("webxr", this.hasFeature("webxr")).action !== "allow") {
+      this.vrButton?.dispose();
+      this.vrButton?.getElement().remove();
+      this.vrButton = null;
+    }
+    if (resolveFeatureGate("tours", this.hasFeature("tours")).action !== "allow") {
+      this.toursLocked = true;
+      this.hotspotManager?.clear();
+    }
+  }
   /** Navigate to a specific probe by ID */
   async navigateTo(probeId) {
     const probe = this.probes.get(probeId);
@@ -4743,7 +5548,9 @@ class VzTourElement extends VzBaseElement {
     if (probe.rotationY !== void 0) {
       this.renderer.getCameraController().setOrientation(0, probe.rotationY);
     }
-    this.hotspotManager?.setPortals(probe.portals);
+    if (!this.toursLocked) {
+      this.hotspotManager?.setPortals(probe.portals);
+    }
     this.state.batch({
       currentProbeId: probeId
     });
@@ -4959,6 +5766,9 @@ class CinemaProjection {
 }
 class VzCinemaElement extends VzMediaElement {
   cinemaProjection = null;
+  videoDataReady = false;
+  /** Guard so the projection (cinema or flat fallback) is only built once. */
+  projectionSetup = false;
   static get observedAttributes() {
     return [
       ...super.observedAttributes,
@@ -4973,15 +5783,51 @@ class VzCinemaElement extends VzMediaElement {
   onMediaConnected() {
     this.suppressAutoSetup = true;
     if (this.videoElement.readyState >= 2) {
-      this.setupCinemaProjection();
+      this.videoDataReady = true;
+      this.maybeSetupProjection();
     } else {
       this.videoElement.addEventListener("loadeddata", () => {
-        this.setupCinemaProjection();
+        this.videoDataReady = true;
+        this.maybeSetupProjection();
       }, { once: true });
     }
   }
+  /**
+   * Cinema is a paid feature. The base class runs its own gates (format, webxr,
+   * spatial audio) here; we add the cinema gate and (re)attempt projection
+   * setup now that the license is known.
+   */
+  onLicenseResolved() {
+    super.onLicenseResolved();
+    this.maybeSetupProjection();
+  }
+  /**
+   * Build the projection once BOTH the video data is ready AND the license has
+   * resolved. Licensed → the cinema room projection. Unlicensed → graceful
+   * downgrade to flat (mono) playback of the same clip.
+   */
+  maybeSetupProjection() {
+    if (this.projectionSetup) return;
+    if (!this.videoDataReady) return;
+    if (!this.license) return;
+    this.projectionSetup = true;
+    if (resolveFeatureGate("cinema", this.hasFeature("cinema")).action === "allow") {
+      this.setupCinemaProjection();
+    } else {
+      this.setupFlatFallback();
+    }
+  }
+  /**
+   * Graceful downgrade when the tier lacks cinema: render the clip as an
+   * ordinary flat video instead of projecting it onto a screen inside a room.
+   */
+  setupFlatFallback() {
+    this.renderer.setupVideo(this.videoElement, VzFormat.MONO_FLAT);
+  }
   onMediaDisconnected() {
     this.cinemaProjection = null;
+    this.projectionSetup = false;
+    this.videoDataReady = false;
   }
   setupCinemaProjection() {
     this.cinemaProjection = new CinemaProjection({
@@ -5089,7 +5935,7 @@ class PlaylistControls {
     this.injectedRight = controlsRight;
     this.prevBtn = document.createElement("button");
     this.prevBtn.className = "vz-btn vz-playlist-prev";
-    this.prevBtn.innerHTML = ICON_PLAYLIST_PREV;
+    setStaticHtml(this.prevBtn, ICON_PLAYLIST_PREV);
     this.prevBtn.title = "Previous";
     this.prevBtn.addEventListener("click", (e) => {
       e.stopPropagation();
@@ -5097,7 +5943,7 @@ class PlaylistControls {
     });
     this.nextBtn = document.createElement("button");
     this.nextBtn.className = "vz-btn vz-playlist-next";
-    this.nextBtn.innerHTML = ICON_PLAYLIST_NEXT;
+    setStaticHtml(this.nextBtn, ICON_PLAYLIST_NEXT);
     this.nextBtn.title = "Next";
     this.nextBtn.addEventListener("click", (e) => {
       e.stopPropagation();
@@ -5119,7 +5965,7 @@ class PlaylistControls {
     if (onTogglePanel && controlsRight) {
       this.panelBtn = document.createElement("button");
       this.panelBtn.className = "vz-btn vz-playlist-panel-toggle";
-      this.panelBtn.innerHTML = ICON_PLAYLIST_LIST;
+      setStaticHtml(this.panelBtn, ICON_PLAYLIST_LIST);
       this.panelBtn.title = "Playlist";
       this.panelBtn.addEventListener("click", (e) => {
         e.stopPropagation();
@@ -5166,7 +6012,7 @@ class PlaylistPanel {
     title.textContent = "Playlist";
     const closeBtn = document.createElement("button");
     closeBtn.className = "vz-playlist-panel-close";
-    closeBtn.innerHTML = "&times;";
+    closeBtn.textContent = "×";
     closeBtn.title = "Close";
     closeBtn.addEventListener("click", (e) => {
       e.stopPropagation();
@@ -5217,7 +6063,7 @@ class PlaylistPanel {
     this.panel.remove();
   }
   renderItems(items, activeIndex) {
-    this.listEl.innerHTML = "";
+    this.listEl.replaceChildren();
     for (let i = 0; i < items.length; i++) {
       const item = items[i];
       const row = document.createElement("div");
@@ -5392,6 +6238,14 @@ class VzPlaylistElement extends HTMLElementBase {
   playlistPanel = null;
   endedHandler = null;
   connected = false;
+  /**
+   * True once a child player reports a license tier without the `playlist`
+   * feature. The queue degrades to playing only the first item as a single
+   * clip: auto-advance and prev/next navigation are disabled and the multi-item
+   * controls/panel are removed.
+   */
+  playlistLocked = false;
+  licenseListener = null;
   constructor() {
     super();
     this.shadow = this.attachShadow({ mode: "open" });
@@ -5437,6 +6291,15 @@ class VzPlaylistElement extends HTMLElementBase {
     const slot = document.createElement("slot");
     wrapper.appendChild(slot);
     this.parseItems();
+    this.licenseListener = (e) => {
+      const detail = e.detail;
+      if (!detail?.tier) return;
+      const features = getFeaturesForTier(detail.tier);
+      if (resolveFeatureGate("playlist", features.playlist).action !== "allow") {
+        this.applyPlaylistLock();
+      }
+    };
+    this.addEventListener("vz-license", this.licenseListener);
     if (this.panelMode === "expandable") {
       this.playlistPanel = new PlaylistPanel(
         this.shadow,
@@ -5459,6 +6322,10 @@ class VzPlaylistElement extends HTMLElementBase {
   disconnectedCallback() {
     this.connected = false;
     this.detachEndedListener();
+    if (this.licenseListener) {
+      this.removeEventListener("vz-license", this.licenseListener);
+      this.licenseListener = null;
+    }
     this.playlistControls?.dispose();
     this.playlistControls = null;
     this.playlistPanel?.dispose();
@@ -5470,6 +6337,7 @@ class VzPlaylistElement extends HTMLElementBase {
   /** Navigate to item at index */
   goTo(index) {
     if (index < 0 || index >= this.items.length) return;
+    if (this.playlistLocked && index !== 0) return;
     const prevIndex = this.currentIndex;
     this.currentIndex = index;
     for (let i = 0; i < this.items.length; i++) {
@@ -5513,6 +6381,7 @@ class VzPlaylistElement extends HTMLElementBase {
   }
   /** Go to next item */
   next() {
+    if (this.playlistLocked) return;
     if (this.currentIndex < this.items.length - 1) {
       this.goTo(this.currentIndex + 1);
     } else if (this.loopPlaylist) {
@@ -5521,12 +6390,27 @@ class VzPlaylistElement extends HTMLElementBase {
   }
   /** Go to previous item */
   previous() {
+    if (this.playlistLocked) return;
     if (this.currentIndex > 0) {
       this.goTo(this.currentIndex - 1);
     } else if (this.loopPlaylist) {
       this.goTo(this.items.length - 1);
     }
   }
+  /**
+   * Graceful downgrade when the tier lacks the playlist feature: keep the first
+   * item playing as a single clip and disable everything queue-specific —
+   * auto-advance, prev/next, the injected controls, and the side panel.
+   */
+  applyPlaylistLock() {
+    if (this.playlistLocked) return;
+    this.playlistLocked = true;
+    this.detachEndedListener();
+    this.playlistControls?.dispose();
+    this.playlistControls = null;
+    this.playlistPanel?.dispose();
+    this.playlistPanel = null;
+  }
   /** Shuffle the playlist order */
   shuffle() {
     for (let i = this.items.length - 1; i > 0; i--) {
@@ -5604,8 +6488,9 @@ class VzPlaylistElement extends HTMLElementBase {
   }
   injectControls() {
     this.playlistControls?.dispose();
+    this.playlistControls = null;
+    if (this.playlistLocked) return;
     if (this.items.length <= 1) {
-      this.playlistControls = null;
       return;
     }
     const activeEl = this.items[this.currentIndex]?.element;
@@ -5688,17 +6573,451 @@ function registerAnnotation() {
     customElements.define("vz-annotation", VzAnnotationElement);
   }
 }
+class VzChapterElement extends HTMLElementBase {
+  static get observedAttributes() {
+    return ["start", "title", "sort-order", "chapter-id"];
+  }
+  /** Parse this element's attributes into a RawChapter. */
+  getData() {
+    const startTime = this.hasAttribute("start") ? parseFloat(this.getAttribute("start")) : 0;
+    const title = this.getAttribute("title") ?? "";
+    const sortOrder = this.hasAttribute("sort-order") ? parseInt(this.getAttribute("sort-order"), 10) : void 0;
+    const id = this.getAttribute("chapter-id") ?? void 0;
+    return {
+      id,
+      title,
+      startTime: isNaN(startTime) ? 0 : startTime,
+      sortOrder: sortOrder != null && !isNaN(sortOrder) ? sortOrder : void 0
+    };
+  }
+}
+function registerChapter() {
+  if (typeof customElements === "undefined") return;
+  if (!customElements.get("vz-chapter")) {
+    customElements.define("vz-chapter", VzChapterElement);
+  }
+}
+class VzHubItemElement extends HTMLElementBase {
+  static get observedAttributes() {
+    return ["src", "poster", "title", "format", "content-id"];
+  }
+  /** Parse this element's attributes into a RawHubItem. */
+  getData() {
+    return {
+      src: this.getAttribute("src"),
+      poster: this.getAttribute("poster"),
+      title: this.getAttribute("title"),
+      format: this.getAttribute("format"),
+      contentId: this.getAttribute("content-id")
+    };
+  }
+}
+function registerHubItem() {
+  if (typeof customElements === "undefined") return;
+  if (!customElements.get("vz-hub-item")) {
+    customElements.define("vz-hub-item", VzHubItemElement);
+  }
+}
+function normalizeLon(lon) {
+  return ((lon + 180) % 360 + 360) % 360 - 180;
+}
+function hubPanelLayout(count, opts = {}) {
+  if (count <= 0) return [];
+  const spacing = opts.spacingDeg ?? 30;
+  const lat = opts.lat ?? 0;
+  const span = (count - 1) * spacing;
+  if (span > 330) {
+    const step = 360 / count;
+    return Array.from({ length: count }, (_, i) => ({ lat, lon: normalizeLon(i * step - 180) }));
+  }
+  const start = -span / 2;
+  return Array.from({ length: count }, (_, i) => ({ lat, lon: normalizeLon(start + i * spacing) }));
+}
+const PANEL_DISTANCE = 200;
+const PANEL_SCALE_X = 60;
+const PANEL_SCALE_Y = 34;
+const CANVAS_W = 320;
+const CANVAS_H = 180;
+class HubPanelRenderer {
+  sprites = [];
+  posterTextures = [];
+  scene;
+  loader = new TextureLoader();
+  constructor(scene) {
+    this.scene = scene;
+  }
+  /** Build a panel sprite per item and add them to the scene. */
+  setItems(items) {
+    this.clear();
+    const positions = hubPanelLayout(items.length);
+    items.forEach((item, index) => {
+      const sprite = this.createPanelSprite(item, positions[index], index);
+      this.sprites.push(sprite);
+      this.scene.add(sprite);
+    });
+  }
+  /** Sprites for raycasting (consumed by HotspotInteraction). */
+  getSprites() {
+    return this.sprites;
+  }
+  clear() {
+    for (const sprite of this.sprites) {
+      this.scene.remove(sprite);
+      sprite.material.map?.dispose();
+      sprite.material.dispose();
+    }
+    this.sprites = [];
+    for (const tex of this.posterTextures) tex.dispose();
+    this.posterTextures = [];
+  }
+  dispose() {
+    this.clear();
+  }
+  createPanelSprite(item, pos, index) {
+    const canvas = document.createElement("canvas");
+    canvas.width = CANVAS_W;
+    canvas.height = CANVAS_H;
+    const ctx = canvas.getContext("2d");
+    ctx.fillStyle = "rgba(15, 15, 25, 0.9)";
+    ctx.fillRect(0, 0, CANVAS_W, CANVAS_H);
+    ctx.strokeStyle = "rgba(255, 255, 255, 0.25)";
+    ctx.lineWidth = 3;
+    ctx.strokeRect(2, 2, CANVAS_W - 4, CANVAS_H - 4);
+    ctx.fillStyle = "#fff";
+    ctx.font = "bold 26px sans-serif";
+    ctx.textAlign = "center";
+    ctx.textBaseline = "middle";
+    ctx.fillText(item.title || "Play", CANVAS_W / 2, CANVAS_H / 2, CANVAS_W - 40);
+    const texture = new CanvasTexture(canvas);
+    texture.minFilter = LinearFilter;
+    texture.magFilter = LinearFilter;
+    const material = new SpriteMaterial({ map: texture, depthTest: false, sizeAttenuation: true });
+    const sprite = new Sprite(material);
+    sprite.userData.portalTo = String(index);
+    sprite.userData.hubIndex = index;
+    const { phi, theta } = latLonToSpherical(pos.lat, pos.lon);
+    sprite.position.set(
+      PANEL_DISTANCE * Math.sin(phi) * Math.cos(theta),
+      PANEL_DISTANCE * Math.cos(phi),
+      PANEL_DISTANCE * Math.sin(phi) * Math.sin(theta)
+    );
+    sprite.scale.set(PANEL_SCALE_X, PANEL_SCALE_Y, 1);
+    if (item.poster) {
+      this.loader.load(
+        item.poster,
+        (tex) => {
+          tex.colorSpace = SRGBColorSpace;
+          tex.minFilter = LinearFilter;
+          tex.magFilter = LinearFilter;
+          material.map?.dispose();
+          material.map = tex;
+          material.needsUpdate = true;
+          this.posterTextures.push(tex);
+        },
+        void 0,
+        () => {
+        }
+      );
+    }
+    return sprite;
+  }
+}
+class HubPanelManager {
+  renderer;
+  interaction;
+  constructor(scene, camera, domElement, onSelect) {
+    this.renderer = new HubPanelRenderer(scene);
+    this.interaction = new HotspotInteraction(
+      camera,
+      domElement,
+      () => this.renderer.getSprites(),
+      (portalTo) => onSelect(Number(portalTo))
+    );
+    this.interaction.attach();
+  }
+  setItems(items) {
+    this.renderer.setItems(items);
+  }
+  clear() {
+    this.renderer.clear();
+  }
+  dispose() {
+    this.interaction.dispose();
+    this.renderer.dispose();
+  }
+}
+class HubController {
+  items;
+  events;
+  onShowItem;
+  onShowLobby;
+  activeIndex = -1;
+  constructor(opts) {
+    this.items = opts.items;
+    this.events = opts.events;
+    this.onShowItem = opts.onShowItem;
+    this.onShowLobby = opts.onShowLobby;
+  }
+  isInLobby() {
+    return this.activeIndex === -1;
+  }
+  getActiveIndex() {
+    return this.activeIndex;
+  }
+  /** Select an item by index: play it and fire vz-hub-select. No-op if invalid or already active. */
+  select(index) {
+    if (index < 0 || index >= this.items.length) return;
+    if (index === this.activeIndex) return;
+    this.activeIndex = index;
+    const item = this.items[index];
+    this.onShowItem(item, index);
+    this.events.emit("vz-hub-select", {
+      id: item.id,
+      src: item.src,
+      title: item.title,
+      index
+    });
+  }
+  /** Return to the lobby. No-op if already there. */
+  back() {
+    if (this.activeIndex === -1) return;
+    this.activeIndex = -1;
+    this.onShowLobby();
+  }
+}
+function isImageSource(src) {
+  const clean = (src.split("?")[0] ?? "").split("#")[0] ?? "";
+  return /\.(jpe?g|png|webp|avif|gif|bmp)$/i.test(clean);
+}
+function normalizeHubItems(raw) {
+  const items = [];
+  raw.forEach((r, i) => {
+    const src = r.src?.trim();
+    if (!src) return;
+    items.push({
+      id: r.contentId?.trim() || `item-${i}`,
+      src,
+      poster: r.poster?.trim() || null,
+      title: r.title ?? "",
+      format: r.format?.trim() || "MONO_360"
+    });
+  });
+  return items;
+}
+class VzHubElement extends VzBaseElement {
+  renderer;
+  containerEl;
+  items = [];
+  panelManager = null;
+  controller = null;
+  controlsOverlay = null;
+  compass = null;
+  fullscreenButton = null;
+  vrButton = null;
+  xrManager = null;
+  cleanupFullscreen = null;
+  loader = new TextureLoader();
+  bgTexture = null;
+  playingEl = null;
+  hubLocked = false;
+  onConnected() {
+    this.containerEl = document.createElement("div");
+    this.containerEl.className = "vz-container";
+    this.shadow.appendChild(this.containerEl);
+    this.renderer = new VzRenderer(this.shadow, this.containerEl, this.state, this.config);
+    this.items = this.parseItems();
+    this.xrManager = new XRManager(
+      this.renderer.getThreeRenderer(),
+      this.state,
+      this.events,
+      this.renderer.getCameraController()
+    );
+    if (!this.config.hideControls) {
+      this.controlsOverlay = new ControlsOverlay(
+        this.shadow,
+        this.containerEl,
+        this.state,
+        this.config,
+        this.events
+      );
+      this.compass = new Compass(this.state, this.renderer);
+      this.controlsOverlay.addControl(this.compass.getElement(), "right");
+      this.vrButton = new VrButton(this.state, () => {
+        this.xrManager?.toggleXR().catch((err) => {
+          this.events.emit("vz-error", { code: "XR_ERROR", message: String(err) });
+        });
+      });
+      this.controlsOverlay.addControl(this.vrButton.getElement(), "right");
+      this.fullscreenButton = new FullscreenButton(this.state, this);
+      this.controlsOverlay.addControl(this.fullscreenButton.getElement(), "right");
+    }
+    this.cleanupFullscreen = onFullscreenChange(() => {
+      this.state.set("fullscreen", isFullscreen());
+      this.renderer.resize();
+    });
+    this.controller = new HubController({
+      items: this.items,
+      events: this.events,
+      onShowItem: (item) => this.playItem(item),
+      onShowLobby: () => this.returnToLobby()
+    });
+    this.panelManager = new HubPanelManager(
+      this.renderer.getScene(),
+      this.renderer.getCamera(),
+      this.containerEl,
+      (index) => this.controller?.select(index)
+    );
+    this.showLobby();
+    this.renderer.start();
+    this.events.emit("vz-ready");
+  }
+  onDisconnected() {
+    this.cleanupFullscreen?.();
+    this.playingEl?.remove();
+    this.playingEl = null;
+    this.compass?.dispose();
+    this.fullscreenButton?.dispose();
+    this.vrButton?.dispose();
+    this.controlsOverlay?.dispose();
+    this.xrManager?.dispose();
+    this.panelManager?.dispose();
+    this.panelManager = null;
+    this.bgTexture?.dispose();
+    this.bgTexture = null;
+    this.renderer?.dispose();
+  }
+  onAttributeChanged() {
+  }
+  onResize() {
+    this.renderer?.resize();
+  }
+  /**
+   * Hub is an Enterprise feature; WebXR is gated separately. On license resolve:
+   * - hub not licensed → lock to a static lobby panorama (panels removed, an
+   *   upgrade note shown) — graceful downgrade, the background still renders.
+   * - webxr not licensed → remove the VR button.
+   */
+  onLicenseResolved() {
+    if (resolveFeatureGate("webxr", this.hasFeature("webxr")).action !== "allow") {
+      this.vrButton?.dispose();
+      this.vrButton?.getElement().remove();
+      this.vrButton = null;
+    }
+    if (resolveFeatureGate("hub", this.hasFeature("hub")).action !== "allow") {
+      this.hubLocked = true;
+      this.panelManager?.clear();
+      this.playingEl?.remove();
+      this.playingEl = null;
+      this.showUpgradeOverlay();
+    }
+  }
+  toggleFullscreen() {
+    if (isFullscreen()) exitFullscreen();
+    else requestFullscreen(this);
+  }
+  /** Show the lobby: background panorama + clickable panels (unless locked). */
+  showLobby() {
+    const bg = this.getAttribute("background");
+    if (bg) {
+      const format = parseFormat(this.getAttribute("background-format") ?? "MONO_360") ?? "MONO_360";
+      this.state.set("loading", true);
+      this.loader.load(
+        bg,
+        (texture) => {
+          texture.colorSpace = SRGBColorSpace;
+          texture.minFilter = LinearFilter;
+          this.bgTexture?.dispose();
+          this.bgTexture = texture;
+          this.renderer.setupImage(texture, format);
+          this.state.set("loading", false);
+        },
+        void 0,
+        () => this.state.set("loading", false)
+      );
+    }
+    if (!this.hubLocked) {
+      this.panelManager?.setItems(this.items);
+    }
+  }
+  /** Play a selected item inline via a child vz-video/vz-img + a back control. */
+  playItem(item) {
+    if (this.hubLocked) return;
+    this.panelManager?.clear();
+    const overlay = document.createElement("div");
+    overlay.className = "vz-hub-playing";
+    overlay.style.cssText = "position:absolute;inset:0;z-index:15;background:#000;";
+    const child = document.createElement(isImageSource(item.src) ? "vz-img" : "vz-video");
+    child.setAttribute("src", item.src);
+    child.setAttribute("format", item.format);
+    child.setAttribute("crossorigin", "anonymous");
+    if (isImageSource(item.src) === false) {
+      child.setAttribute("muted", "");
+      child.setAttribute("autoplay", "");
+    }
+    if (this.config.apiKey) child.setAttribute("api-key", this.config.apiKey);
+    if (this.config.apiEndpoint) child.setAttribute("api-endpoint", this.config.apiEndpoint);
+    if (this.config.licenseKey) child.setAttribute("license-key", this.config.licenseKey);
+    child.style.cssText = "position:absolute;inset:0;width:100%;height:100%;display:block;";
+    const back = document.createElement("button");
+    back.className = "vz-hub-back";
+    back.type = "button";
+    back.textContent = "← Lobby";
+    back.style.cssText = "position:absolute;top:12px;left:12px;z-index:20;padding:8px 14px;border:none;border-radius:8px;background:rgba(0,0,0,0.6);color:#fff;font:500 13px system-ui;cursor:pointer;backdrop-filter:blur(8px);";
+    back.addEventListener("click", (e) => {
+      e.stopPropagation();
+      this.controller?.back();
+    });
+    overlay.appendChild(child);
+    overlay.appendChild(back);
+    this.shadow.appendChild(overlay);
+    this.playingEl = overlay;
+  }
+  /** Return to the lobby: tear down the inline player, re-render panels. */
+  returnToLobby() {
+    this.playingEl?.remove();
+    this.playingEl = null;
+    if (!this.hubLocked) {
+      this.panelManager?.setItems(this.items);
+    }
+  }
+  showUpgradeOverlay() {
+    if (this.shadow.querySelector(".vz-hub-gate")) return;
+    const overlay = document.createElement("div");
+    overlay.className = "vz-hub-gate";
+    overlay.style.cssText = "position:absolute;left:0;right:0;bottom:0;padding:10px;text-align:center;z-index:12;background:rgba(0,0,0,0.7);color:#fff;font:500 13px system-ui;";
+    overlay.textContent = "The content hub requires a Vizor Enterprise plan.";
+    this.containerEl.appendChild(overlay);
+  }
+  /** Parse <vz-hub-item> children into a normalized item list. */
+  parseItems() {
+    const raw = [];
+    this.querySelectorAll("vz-hub-item").forEach((el) => {
+      const vzEl = el;
+      if (typeof vzEl.getData === "function") raw.push(vzEl.getData());
+    });
+    return normalizeHubItems(raw);
+  }
+}
+function registerHub() {
+  if (typeof customElements === "undefined") return;
+  if (!customElements.get("vz-hub")) {
+    customElements.define("vz-hub", VzHubElement);
+  }
+}
 function registerAll() {
   if (typeof customElements === "undefined") return;
-  registerVideo();
-  registerImg();
+  registerAnnotation();
+  registerChapter();
+  registerHubItem();
   registerTourPortal();
   registerTourImg();
+  registerVideo();
+  registerImg();
   registerTour();
   registerCinema();
   registerPlaylist();
   registerLive();
-  registerAnnotation();
+  registerHub();
 }
 registerAll();
 export {
@@ -5737,4 +7056,4 @@ export {
   registerTourPortal as y,
   registerVideo as z
 };
-//# sourceMappingURL=register-CwnmiGEs.js.map
+//# sourceMappingURL=register-BmZt_300.js.map