@amazon/vinyl 2.0.0 → 3.0.0

package/dist/test/integ.js

@@ -15182,7 +15182,7 @@ ${this.lastInitStack}` : "";
   // src/global/environment.ts
   var vinylVersion = parseVersion(
     /* istanbul ignore next */
-    "2.0.0"
+    "3.0.0"
   );
 
   // src/global/globalRef.ts
@@ -16425,6 +16425,18 @@ ${this.lastInitStack}` : "";
     }
   };
 
+  // src/streaming/AudioOptions.ts
+  var defaultAudioOptions = {
+    selection: { language: null, descriptive: false }
+  };
+  var audioSelectionValidator = object({
+    language: string().or(array(string()).readonly()).orNull().optional(),
+    descriptive: boolean().optional()
+  });
+  var audioOptionsValidator = object({
+    selection: audioSelectionValidator.optional()
+  });
+
   // src/streaming/SegmentController.ts
   var SEGMENT_START_AFFORDANCE = 0.2;
 
@@ -18219,7 +18231,7 @@ ${this.lastInitStack}` : "";
       return canPlayMimeType(deps, quality);
     }
     async function transformTimeline(timeline) {
-      var _a3;
+      var _a3, _b;
       const codecOverrides = deps.options.value.codecOverrides;
       let t = filterTimelineQualities(
         (quality) => canPlayWithOverrides(quality, codecOverrides),
@@ -18236,18 +18248,14 @@ ${this.lastInitStack}` : "";
         throwSamplingRatesUnsupported,
         t
       );
+      const selection = deps.options.value.audio.selection;
       t = filterTimelineQualities(
-        createAudioDescriptionFilter(
-          (_a3 = deps.options.value.preferDescriptiveAudio) != null ? _a3 : false
-        ),
+        createAudioDescriptionFilter((_a3 = selection == null ? void 0 : selection.descriptive) != null ? _a3 : false),
         throwNoPlayableAudio,
         t
       );
       t = filterTimelineQualities(
-        createLanguageFilter(
-          deps.options.value.preferredAudioLanguage,
-          "audio"
-        ),
+        createLanguageFilter((_b = selection == null ? void 0 : selection.language) != null ? _b : null, "audio"),
         throwLanguagesUnsupported,
         t
       );
@@ -18255,8 +18263,7 @@ ${this.lastInitStack}` : "";
     }
     return combineData({
       timeline: deps.mediaTimeline,
-      preferredAudioLanguage: deps.options.pick("preferredAudioLanguage"),
-      preferDescriptiveAudio: deps.options.pick("preferDescriptiveAudio"),
+      audio: deps.options.pick("audio"),
       codecOverrides: deps.options.pick("codecOverrides")
     }).map(async ({ timeline }) => {
       return transformTimeline(await timeline);
@@ -19203,9 +19210,201 @@ ${this.lastInitStack}` : "";
     return out;
   }
 
+  // src/text/HtmlTextTrackRenderer.ts
+  var ROW_EM = 1.5;
+  function computeCueLayout(cue) {
+    const style = {};
+    style.textAlign = cue.align || "center";
+    if (cue.vertical === "rl") style.writingMode = "vertical-rl";
+    else if (cue.vertical === "lr") style.writingMode = "vertical-lr";
+    const size = typeof cue.size === "number" ? cue.size : 100;
+    style.maxWidth = `${size}%`;
+    const line = typeof cue.line === "number" ? cue.line : null;
+    const position = typeof cue.position === "number" ? cue.position : null;
+    if (line == null && position == null) return style;
+    style.position = "absolute";
+    const transforms = [];
+    if (position == null) {
+      style.left = "50%";
+      transforms.push("translateX(-50%)");
+    } else {
+      if (cue.positionAlign === "line-right") {
+        style.right = `${100 - position}%`;
+      } else if (cue.positionAlign === "line-left") {
+        style.left = `${position}%`;
+      } else {
+        style.left = `${position}%`;
+        transforms.push("translateX(-50%)");
+      }
+    }
+    if (line == null) {
+      style.bottom = "0";
+    } else {
+      if (cue.snapToLines === false) {
+        if (cue.lineAlign === "end") {
+          style.bottom = `${100 - line}%`;
+        } else if (cue.lineAlign === "center") {
+          style.top = `${line}%`;
+          transforms.push("translateY(-50%)");
+        } else {
+          style.top = `${line}%`;
+        }
+      } else if (line < 0) {
+        style.bottom = `${(-line - 1) * ROW_EM}em`;
+      } else {
+        style.top = `${line * ROW_EM}em`;
+      }
+    }
+    if (transforms.length > 0) style.transform = transforms.join(" ");
+    return style;
+  }
+  var HTML_ESCAPE = {
+    "&": "&amp;",
+    "<": "&lt;",
+    ">": "&gt;",
+    '"': "&quot;"
+  };
+  function escapeHtml(text) {
+    return text.replace(/["&<>]/g, (ch) => HTML_ESCAPE[ch]);
+  }
+  var PASSTHROUGH_TAGS = /* @__PURE__ */ new Set(["i", "b", "u", "ruby", "rt"]);
+  var SPAN_TAGS = /* @__PURE__ */ new Set(["c", "v", "lang"]);
+  function openTag(inner) {
+    if (/^\d/.test(inner)) return "";
+    const head = inner.split(/\s/, 1)[0];
+    const [name, ...classes] = head.split(".");
+    const annotation = inner.slice(head.length).trim();
+    const classAttr = classes.filter(Boolean).length ? ` class="${escapeHtml(classes.filter(Boolean).join(" "))}"` : "";
+    if (PASSTHROUGH_TAGS.has(name)) return `<${name}${classAttr}>`;
+    if (name === "v") {
+      const title = annotation ? ` title="${escapeHtml(annotation)}"` : "";
+      return `<span${classAttr}${title}>`;
+    }
+    if (name === "lang") {
+      const lang = annotation ? ` lang="${escapeHtml(annotation)}"` : "";
+      return `<span${classAttr}${lang}>`;
+    }
+    if (name === "c") return `<span${classAttr}>`;
+    return "";
+  }
+  function closeTag(name) {
+    if (PASSTHROUGH_TAGS.has(name)) return `</${name}>`;
+    if (SPAN_TAGS.has(name)) return "</span>";
+    return "";
+  }
+  function renderCueText(text) {
+    var _a3;
+    let html = "";
+    for (const token of (_a3 = text.match(/<[^<>]*>|[^<]+|</g)) != null ? _a3 : []) {
+      if (token[0] !== "<" || token === "<") {
+        html += escapeHtml(token).replace(/\n/g, "<br>");
+      } else {
+        const inner = token.slice(1, -1);
+        html += inner[0] === "/" ? closeTag(
+          inner.slice(1).split(/[.\s]/, 1)[0].toLowerCase()
+        ) : openTag(inner);
+      }
+    }
+    return html;
+  }
+  function scopeCueRules(css) {
+    return css.replace(/::cue\(([^)]*)\)/g, ".vinyl-text-cue $1").replace(/::cue\b/g, ".vinyl-text-cue");
+  }
+  var HtmlTextTrackRenderer = class {
+    constructor() {
+      /** The overlay container to mount over the video. */
+      __publicField(this, "element");
+      __publicField(this, "track", null);
+      // Holds the authored STYLE-block CSS (::cue rules rewritten to target our
+      // cue elements). A <style> renders nothing itself, so it lives in-container.
+      __publicField(this, "styleElement");
+      __publicField(this, "onCueChange", () => this.renderActiveCues());
+      this.element = document.createElement("div");
+      this.element.className = "vinyl-text-container";
+      Object.assign(this.element.style, {
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "flex-end",
+        alignItems: "center",
+        pointerEvents: "none"
+      });
+      this.styleElement = document.createElement("style");
+      this.element.appendChild(this.styleElement);
+    }
+    setTextTrack(track2) {
+      var _a3;
+      if (track2 === this.track) return;
+      (_a3 = this.track) == null ? void 0 : _a3.removeEventListener("cuechange", this.onCueChange);
+      this.track = track2;
+      this.styleElement.textContent = "";
+      if (!track2) {
+        this.element.replaceChildren(this.styleElement);
+        return;
+      }
+      track2.addEventListener("cuechange", this.onCueChange);
+      this.renderActiveCues();
+    }
+    setStyles(styles) {
+      this.styleElement.textContent = styles.map(scopeCueRules).join("\n");
+    }
+    dispose() {
+      this.setTextTrack(null);
+    }
+    renderActiveCues() {
+      var _a3;
+      const active = (_a3 = this.track.activeCues) != null ? _a3 : [];
+      const children = [this.styleElement];
+      for (let i = 0; i < active.length; i++) {
+        children.push(this.createCueBox(active[i]));
+      }
+      this.element.replaceChildren(...children);
+    }
+    createCueBox(cue) {
+      var _a3;
+      const box2 = document.createElement("div");
+      box2.className = "vinyl-text-cue";
+      Object.assign(box2.style, computeCueLayout(cue));
+      box2.innerHTML = renderCueText((_a3 = cue.text) != null ? _a3 : "");
+      return box2;
+    }
+  };
+
+  // src/text/mediaTextTrackProvider.ts
+  function createMediaTextTrackProvider(deps) {
+    const { media } = deps;
+    const cache = /* @__PURE__ */ new Map();
+    const isAttached = (track2) => {
+      for (let i = 0; i < media.textTracks.length; i++) {
+        if (media.textTracks[i] === track2) return true;
+      }
+      return false;
+    };
+    const create = (kind, label, language) => {
+      const track2 = media.addTextTrack(kind, label, language);
+      return {
+        track: track2,
+        clear() {
+          if (!track2.cues) return;
+          const all = Array.from(track2.cues);
+          for (const cue of all) track2.removeCue(cue);
+        }
+      };
+    };
+    return {
+      getOrCreate(kind, label, language) {
+        const key = `${kind}-${label}-${language}`;
+        const cached = cache.get(key);
+        if (cached && isAttached(cached.track)) return cached;
+        const ref = create(kind, label, language);
+        cache.set(key, ref);
+        return ref;
+      }
+    };
+  }
+
   // src/text/parseWebVtt.ts
   var WEBVTT_HEADER = "WEBVTT";
-  var TIME_RE = /^\s*(?:(\d+):)?([0-5]?\d):([0-5]?\d)\.(\d{3})\s*-->\s*(?:(\d+):)?([0-5]?\d):([0-5]?\d)\.(\d{3})(?:\s.*)?$/;
+  var TIMESTAMP_RE = /^(?:(\d+):)?([0-5]\d):([0-5]\d)\.(\d{3})/;
   function parseWebVtt(input) {
     if (typeof input !== "string") {
       throw new ValidationError(
@@ -19223,6 +19422,7 @@ ${this.lastInitStack}` : "";
       );
     }
     const cues = [];
+    const styles = [];
     let i = 1;
     while (i < lines.length && lines[i] !== "") i++;
     while (i < lines.length) {
@@ -19230,49 +19430,71 @@ ${this.lastInitStack}` : "";
         i++;
         continue;
       }
-      if (lines[i] === "NOTE" || lines[i].startsWith("NOTE ")) {
+      if (lines[i] === "NOTE" || lines[i].startsWith("NOTE ") || lines[i].startsWith("NOTE	") || lines[i] === "REGION") {
         i++;
         while (i < lines.length && lines[i] !== "") i++;
         continue;
       }
-      if (lines[i] === "STYLE" || lines[i] === "REGION") {
+      if (lines[i] === "STYLE") {
         i++;
+        const start = i;
         while (i < lines.length && lines[i] !== "") i++;
+        const css = lines.slice(start, i).join("\n").trim();
+        if (css) styles.push(css);
         continue;
       }
       let id = null;
-      let timingLine;
-      const firstLine = lines[i];
-      if (TIME_RE.test(firstLine)) {
-        timingLine = firstLine;
-        i++;
-      } else {
-        id = firstLine;
+      if (!lines[i].includes("-->")) {
+        id = lines[i];
         i++;
         if (i >= lines.length) break;
-        timingLine = lines[i];
-        i++;
       }
-      const match = TIME_RE.exec(timingLine);
-      if (!match) {
+      const timing = parseTiming(lines[i]);
+      i++;
+      if (!timing) {
         while (i < lines.length && lines[i] !== "") i++;
         continue;
       }
-      const startTime = toSeconds(match[1], match[2], match[3], match[4]);
-      const endTime = toSeconds(match[5], match[6], match[7], match[8]);
       const payloadLines = [];
       while (i < lines.length && lines[i] !== "") {
         payloadLines.push(lines[i]);
         i++;
       }
-      cues.push({
-        id,
-        startTime,
-        endTime,
-        text: payloadLines.join("\n")
-      });
-    }
-    return { cues };
+      const text2 = payloadLines.join("\n");
+      cues.push(
+        timing.settings === void 0 ? {
+          id,
+          startTime: timing.startTime,
+          endTime: timing.endTime,
+          text: text2
+        } : {
+          id,
+          startTime: timing.startTime,
+          endTime: timing.endTime,
+          text: text2,
+          settings: timing.settings
+        }
+      );
+    }
+    return { cues, styles };
+  }
+  function parseTiming(line) {
+    const arrow = line.indexOf("-->");
+    if (arrow < 0) return null;
+    const before = line.slice(0, arrow).trim();
+    const start = TIMESTAMP_RE.exec(before);
+    if (!start || start[0].length !== before.length) return null;
+    const rest = line.slice(arrow + 3).trim();
+    const end = TIMESTAMP_RE.exec(rest);
+    if (!end) return null;
+    return {
+      startTime: toSeconds(start[1], start[2], start[3], start[4]),
+      endTime: toSeconds(end[1], end[2], end[3], end[4]),
+      settings: parseCueSettings(rest.slice(end[0].length))
+    };
+  }
+  function toSeconds(hours, minutes, seconds, millis) {
+    return (hours ? Number(hours) * 3600 : 0) + Number(minutes) * 60 + Number(seconds) + Number(millis) / 1e3;
   }
   function isWebVttHeader(line) {
     if (!line.startsWith(WEBVTT_HEADER)) return false;
@@ -19280,18 +19502,80 @@ ${this.lastInitStack}` : "";
     const next = line.charCodeAt(WEBVTT_HEADER.length);
     return next === 32 || next === 9;
   }
-  function toSeconds(hours, minutes, seconds, millis) {
-    const h = hours ? Number(hours) : 0;
-    const m = Number(minutes);
-    const s = Number(seconds);
-    const ms = Number(millis);
-    return h * 3600 + m * 60 + s + ms / 1e3;
+  var ALIGN = /* @__PURE__ */ new Set(["start", "center", "end", "left", "right"]);
+  var LINE_ALIGN = /* @__PURE__ */ new Set(["start", "center", "end"]);
+  var POSITION_ALIGN = /* @__PURE__ */ new Set(["line-left", "center", "line-right", "auto"]);
+  var VERTICAL = /* @__PURE__ */ new Set(["rl", "lr"]);
+  function parseCueSettings(text) {
+    if (!text) return void 0;
+    const settings = {};
+    for (const token of text.trim().split(/\s+/)) {
+      const colon = token.indexOf(":");
+      if (colon <= 0) continue;
+      const key = token.slice(0, colon);
+      const value = token.slice(colon + 1);
+      switch (key) {
+        case "align": {
+          const align = value === "middle" ? "center" : value;
+          if (ALIGN.has(align)) settings.align = align;
+          break;
+        }
+        case "vertical":
+          if (VERTICAL.has(value))
+            settings.vertical = value;
+          break;
+        case "size": {
+          const size = parsePercent(value);
+          if (size != null) settings.size = size;
+          break;
+        }
+        case "line":
+          parseLine(value, settings);
+          break;
+        case "position":
+          parsePosition(value, settings);
+          break;
+      }
+    }
+    return Object.keys(settings).length > 0 ? settings : void 0;
+  }
+  function parseLine(value, settings) {
+    const [pos, align] = value.split(",");
+    if (pos.endsWith("%")) {
+      const percent = parsePercent(pos);
+      if (percent == null) return;
+      settings.line = percent;
+      settings.snapToLines = false;
+    } else {
+      const n = Number(pos);
+      if (!Number.isInteger(n)) return;
+      settings.line = n;
+      settings.snapToLines = true;
+    }
+    const lineAlign = align === "middle" ? "center" : align;
+    if (lineAlign && LINE_ALIGN.has(lineAlign))
+      settings.lineAlign = lineAlign;
+  }
+  function parsePosition(value, settings) {
+    const [pos, align] = value.split(",");
+    const percent = parsePercent(pos);
+    if (percent == null) return;
+    settings.position = percent;
+    const positionAlign = align === "middle" ? "center" : align;
+    if (positionAlign && POSITION_ALIGN.has(positionAlign))
+      settings.positionAlign = positionAlign;
+  }
+  function parsePercent(value) {
+    if (!value.endsWith("%")) return null;
+    const n = Number(value.slice(0, -1));
+    return Number.isFinite(n) ? n : null;
   }
 
   // src/text/pickPreferredTextTrack.ts
   function resolvePreferredTextLanguages(preferred) {
     if (typeof preferred === "string") return [preferred];
     if (preferred) return preferred;
+    if (typeof navigator !== "undefined") return [...navigator.languages];
     return [];
   }
   function pickPreferredTextTrack(tracks, preferred) {
@@ -19329,7 +19613,7 @@ ${this.lastInitStack}` : "";
   var IDLE_POLL_SECONDS = 0.25;
   async function loadWebVttCues(uri, options) {
     var _a3, _b, _c;
-    const { abort, requestInit, variables, onCues, getCurrentTime } = options;
+    const { abort, requestInit, variables, onCues, onStyles, getCurrentTime } = options;
     const lookAhead = (_a3 = options.lookAhead) != null ? _a3 : DEFAULT_TEXT_LOOK_AHEAD;
     const lookBehind = (_b = options.lookBehind) != null ? _b : DEFAULT_TEXT_LOOK_BEHIND;
     const init = requestInit != null ? requestInit : void 0;
@@ -19340,6 +19624,7 @@ ${this.lastInitStack}` : "";
         abort,
         variables: variables != null ? variables : void 0,
         onCues,
+        onStyles,
         getCurrentTime,
         lookAhead,
         lookBehind
@@ -19356,13 +19641,15 @@ ${this.lastInitStack}` : "";
         abort,
         variables: variables != null ? variables : void 0,
         onCues,
+        onStyles,
         getCurrentTime,
         lookAhead,
         lookBehind
       });
     }
-    const cues = parseWebVtt(body).cues;
-    if (cues.length > 0) onCues(cues);
+    const doc = parseWebVtt(body);
+    if (doc.cues.length > 0) onCues(doc.cues);
+    if (onStyles && doc.styles.length > 0) onStyles(doc.styles);
   }
   function looksLikeMediaPlaylist(uri) {
     const path = uri.split(/[?#]/)[0];
@@ -19402,8 +19689,9 @@ ${this.lastInitStack}` : "";
         abort: ctx.abort
       });
       const body = await res.text();
-      const cues = parseWebVtt(body).cues;
-      if (cues.length > 0) ctx.onCues(cues);
+      const doc = parseWebVtt(body);
+      if (doc.cues.length > 0) ctx.onCues(doc.cues);
+      if (ctx.onStyles && doc.styles.length > 0) ctx.onStyles(doc.styles);
     }
   }
   function pickInWindow(pending2, ranges, ctx) {
@@ -19457,22 +19745,45 @@ ${this.lastInitStack}` : "";
   });
 
   // src/text/SidecarTextTrackController.ts
+  function resolveSelectedTrack(tracks, options) {
+    var _a3, _b, _c, _d;
+    const mode = (_a3 = options.enabled) != null ? _a3 : "forced";
+    if (mode === "off") return null;
+    const selection = (_b = options.selection) != null ? _b : {};
+    if (selection.id != null) {
+      return (_c = tracks.find((t) => t.id === selection.id)) != null ? _c : null;
+    }
+    let pool = tracks;
+    if (selection.kind != null) {
+      pool = pool.filter((t) => t.kind === selection.kind);
+    }
+    const forced = (_d = selection.forced) != null ? _d : mode === "forced";
+    pool = pool.filter((t) => t.forced === forced);
+    return pickPreferredTextTrack(pool, selection.language);
+  }
   var SidecarTextTrackController = class extends EventHostImpl {
     constructor(deps) {
-      var _a3, _b;
       super();
       __publicField(this, "deps", deps);
+      // Whether the owning media track is current (rendering allowed). Toggled by
+      // activate()/deactivate() across suspensions such as ad breaks.
+      __publicField(this, "_active", false);
       __publicField(this, "_tracks", []);
-      __publicField(this, "_active", null);
-      __publicField(this, "_domTrack", null);
-      __publicField(this, "loadAbort", null);
-      // True once the app has made an explicit selection (including null). Until
-      // then, forced tracks auto-select on discovery.
-      __publicField(this, "_userSelected", false);
-      __publicField(this, "preferredLanguageSub");
-      this.preferredLanguageSub = (_b = (_a3 = deps.preferredTextLanguage) == null ? void 0 : _a3.onData((value, previous) => {
-        if (previous !== void 0) this.applyPreferredLanguage(value);
-      })) != null ? _b : null;
+      __publicField(this, "_activeTextTrack", null);
+      // The DOM text track currently rendering cues, or null when hidden. Owned by
+      // the provider (never created/removed here).
+      __publicField(this, "_ref", null);
+      __publicField(this, "loadAbort", createAbortSlot());
+      __publicField(this, "disposer", createDisposer());
+      const { add } = this.disposer;
+      add(deps.options.onData(() => this.refreshSelection()));
+      add(
+        deps.textTracks.onData((tracksPromise) => {
+          tracksPromise.then((tracks) => this.setTracks(tracks)).catch((error) => {
+            logError(this, "text tracks promise rejected", error);
+          });
+        })
+      );
     }
     get [Symbol.toStringTag]() {
       return "SidecarTextTrackController";
@@ -19481,120 +19792,89 @@ ${this.lastInitStack}` : "";
       return this._tracks;
     }
     get activeTextTrack() {
+      return this._activeTextTrack;
+    }
+    get active() {
       return this._active;
     }
+    get disposed() {
+      return this.disposer.disposed;
+    }
     /**
-     * Replaces the discovered text track list. Emits `textTracksChange`. If
-     * the previously active track is no longer present, clears the active
-     * selection and emits `activeTextTrackChange`.
+     * Replaces the discovered track list, emits `textTracksChange`, then
+     * re-applies the current selection against the new list.
      */
-    setTextTracks(tracks) {
-      var _a3;
-      if (equalDeep(this._tracks, tracks)) return;
+    setTracks(tracks) {
+      if (this.disposed) return;
       const previous = this._tracks;
+      if (equalDeep(previous, tracks)) return;
       this._tracks = tracks;
       this.dispatch("textTracksChange", { previous, current: tracks });
-      if (this._active && !tracks.some((t) => t.id === this._active.id)) {
-        this.selectById(null);
-      }
-      const preferred = (_a3 = this.deps.preferredTextLanguage) == null ? void 0 : _a3.value;
-      if (preferred != null) {
-        this.applyPreferredLanguage(preferred);
-      } else if (!this._userSelected && !this._active) {
-        const forced = this.pickForcedTrack(tracks);
-        if (forced) this.selectById(forced.id);
-      }
-    }
-    setActiveTextTrack(id) {
-      this._userSelected = true;
-      this.selectById(id);
-    }
-    /**
-     * Selects the track best matching the preferred language(s), or clears the
-     * selection when the preference is null or nothing matches.
-     */
-    applyPreferredLanguage(preferred) {
-      var _a3;
-      const target = pickPreferredTextTrack(this._tracks, preferred);
-      this.setActiveTextTrack((_a3 = target == null ? void 0 : target.id) != null ? _a3 : null);
+      this.refreshSelection();
     }
     /**
-     * Applies a selection by id (null clears it) without marking it as an
-     * explicit user choice. Shared by setActiveTextTrack and forced auto-select.
+     * Recomputes the selection from the current options and track list,
+     * emitting `activeTextTrackChange` on change and (re)rendering when active.
      */
-    selectById(id) {
-      var _a3, _b;
-      const next = id == null ? null : this._tracks.find((t) => t.id === id);
-      if (id != null && !next) return;
-      const target = next != null ? next : null;
-      if ((target == null ? void 0 : target.id) === ((_a3 = this._active) == null ? void 0 : _a3.id)) return;
-      const previous = this._active;
-      this.clearDomTrack();
-      (_b = this.loadAbort) == null ? void 0 : _b.abort();
-      this.loadAbort = null;
-      this._active = target;
-      this.dispatch("activeTextTrackChange", {
-        previous,
-        current: target
-      });
-      if (target) this.startLoad(target);
-    }
-    /**
-     * The forced track to auto-select, or null. Prefers the default track's
-     * language, else the first forced track.
-     */
-    pickForcedTrack(tracks) {
-      var _a3;
-      const forced = tracks.filter((t) => t.forced);
-      if (forced.length === 0) return null;
-      const defaultLang = (_a3 = tracks.find((t) => t.default)) == null ? void 0 : _a3.language;
-      if (defaultLang != null) {
-        const match = forced.find((t) => t.language === defaultLang);
-        if (match) return match;
+    refreshSelection() {
+      const previous = this._activeTextTrack;
+      const target = resolveSelectedTrack(
+        this._tracks,
+        this.deps.options.value
+      );
+      const trackChanged = (target == null ? void 0 : target.id) !== (previous == null ? void 0 : previous.id);
+      if (trackChanged) {
+        this._activeTextTrack = target;
+        this.dispatch("activeTextTrackChange", {
+          previous,
+          current: target
+        });
       }
-      return forced[0];
-    }
-    suspend() {
-      var _a3;
-      (_a3 = this.loadAbort) == null ? void 0 : _a3.abort();
-      this.loadAbort = null;
-      this.clearDomTrack();
+      if (!this._active) return;
+      if (!target) this.hideCurrent();
+      else if (trackChanged || !this._ref) this.startLoad(target);
     }
-    resume() {
-      if (!this._active || this._domTrack) return;
-      this.startLoad(this._active);
+    deactivate() {
+      this._active = false;
+      this.hideCurrent();
     }
-    /**
-     * Cancels any in-flight load, clears the DOM TextTrack, and resets state.
-     * Called by the host when the underlying media is unloaded.
-     */
-    dispose() {
-      var _a3, _b;
-      super.dispose();
-      (_a3 = this.preferredLanguageSub) == null ? void 0 : _a3.call(this);
-      (_b = this.loadAbort) == null ? void 0 : _b.abort();
-      this.loadAbort = null;
-      this.clearDomTrack();
-      this._tracks = [];
-      this._active = null;
+    activate() {
+      this._active = true;
+      if (!this._activeTextTrack || this._ref) return;
+      this.startLoad(this._activeTextTrack);
     }
     startLoad(track2) {
-      const media = this.deps.media;
-      if (!media) return;
-      const abort = new Abort();
-      this.loadAbort = abort;
-      const dom = this.ensureDomTrack(media, track2);
+      var _a3, _b;
+      this.hideCurrent();
+      const abort = this.loadAbort.value;
+      const ref = this.deps.textTrackProvider.getOrCreate(
+        track2.kind,
+        track2.label,
+        (_a3 = track2.language) != null ? _a3 : void 0
+      );
+      const renderer = this.deps.textTrackRenderer;
+      ref.track.mode = renderer ? "hidden" : "showing";
+      ref.clear();
+      this._ref = ref;
+      renderer == null ? void 0 : renderer.setTextTrack(ref.track);
       const CueCtor = getVttCueConstructor();
       const seen = /* @__PURE__ */ new Set();
+      const styles = /* @__PURE__ */ new Set();
+      const setStyles = (_b = renderer == null ? void 0 : renderer.setStyles) == null ? void 0 : _b.bind(renderer);
       loadWebVttCues(track2.uri, {
         abort,
         requestInit: this.deps.requestInit,
         variables: track2.variables,
-        getCurrentTime: () => media.currentTime,
+        getCurrentTime: () => this.deps.playbackController.currentTime,
         onCues: (cues) => {
           if (abort.aborted()) return;
-          if (CueCtor) this.appendCues(dom, CueCtor, cues, seen);
-        }
+          if (CueCtor) this.appendCues(ref.track, CueCtor, cues, seen);
+        },
+        onStyles: setStyles ? (blocks) => {
+          if (abort.aborted()) return;
+          for (const block of blocks) styles.add(block);
+          setStyles([...styles]);
+        } : void 0
       }).catch((error) => {
         if (abort.aborted()) return;
         this.dispatch("textTrackError", {
@@ -19603,43 +19883,45 @@ ${this.lastInitStack}` : "";
         });
       });
     }
-    ensureDomTrack(media, track2) {
-      var _a3;
-      const dom = media.addTextTrack(
-        track2.kind,
-        track2.label,
-        (_a3 = track2.language) != null ? _a3 : void 0
-      );
-      dom.mode = "showing";
-      this._domTrack = dom;
-      return dom;
-    }
     appendCues(dom, CueCtor, cues, seen) {
-      var _a3;
       for (const cue of cues) {
         const key = `${cue.startTime}|${cue.endTime}|${cue.text}`;
         if (seen.has(key)) continue;
         seen.add(key);
         const domCue = new CueCtor(cue.startTime, cue.endTime, cue.text);
         if (cue.id != null) domCue.id = cue.id;
-        const cueStyle = (_a3 = this.deps.cueStyle) == null ? void 0 : _a3.value;
-        if (cueStyle && isVttCue(domCue)) {
-          applyVttCueStyle(domCue, cueStyle);
+        if (cue.settings && isVttCue(domCue)) {
+          applyVttCueStyle(domCue, cue.settings);
         }
         dom.addCue(domCue);
       }
     }
-    clearDomTrack() {
-      const dom = this._domTrack;
-      if (!dom) return;
-      dom.mode = "disabled";
-      if (dom.cues) {
-        const all = Array.from(
-          dom.cues
-        );
-        for (const cue of all) dom.removeCue(cue);
-      }
-      this._domTrack = null;
+    /**
+     * Clears cues from the current DOM track and hides it, keeping the track for
+     * later reuse via the provider.
+     */
+    hideCurrent() {
+      var _a3;
+      this.loadAbort.abort();
+      const ref = this._ref;
+      if (!ref) return;
+      (_a3 = this.deps.textTrackRenderer) == null ? void 0 : _a3.setTextTrack(null);
+      ref.clear();
+      ref.track.mode = "disabled";
+      this._ref = null;
+    }
+    /**
+     * Cancels any in-flight load, hides the DOM text track, and resets state.
+     * Called by the host when the underlying media is unloaded.
+     */
+    dispose() {
+      if (this.disposed) return;
+      super.dispose();
+      this.loadAbort.abort();
+      this.hideCurrent();
+      this.disposer.dispose();
+      this._tracks = [];
+      this._activeTextTrack = null;
     }
   };
   function getVttCueConstructor() {
@@ -19649,6 +19931,23 @@ ${this.lastInitStack}` : "";
   }
 
   // src/text/TextTrack.ts
+  var TEXT_TRACK_KINDS = [
+    "subtitles",
+    "captions",
+    "descriptions",
+    "chapters",
+    "metadata"
+  ];
+  var textTrackSelectionValidator = object({
+    id: string().orNull().optional(),
+    kind: isOneOf(...TEXT_TRACK_KINDS).orNull().optional(),
+    language: string().or(array(string()).readonly()).orNull().optional(),
+    forced: boolean().orNull().optional()
+  });
+  var textTrackControllerOptionsValidator = object({
+    enabled: isOneOf("on", "off", "forced").orNull().optional(),
+    selection: textTrackSelectionValidator.orNull().optional()
+  });
   var ALL_TEXT_TRACK_EVENTS = [
     "textTracksChange",
     "activeTextTrackChange",
@@ -20305,7 +20604,7 @@ ${this.lastInitStack}` : "";
         )
       );
       add(
-        deps.preferredAudioLanguage.onData((_value, previous) => {
+        deps.audio.onData((_value, previous) => {
           if (previous !== void 0) this.reloadStreams();
         })
       );
@@ -20314,11 +20613,6 @@ ${this.lastInitStack}` : "";
           if (previous !== void 0) this.reloadStreams();
         })
       );
-      add(
-        deps.preferDescriptiveAudio.onData((_value, previous) => {
-          if (previous !== void 0) this.reloadStreams();
-        })
-      );
       add(
         deps.abr.onData((value, previous) => {
           if (previous === void 0) return;
@@ -20525,7 +20819,7 @@ ${this.lastInitStack}` : "";
     onActivated(loadOptions) {
       var _a3;
       if (this.disposed) return;
-      (_a3 = this.deps.textTrackController) == null ? void 0 : _a3.resume();
+      (_a3 = this.deps.textTrackController) == null ? void 0 : _a3.activate();
       this.deps.playbackSource.disableRemotePlayback = true;
       this.streams.forEach((stream) => {
         this.deps.drmController.initializeForPlayback(
@@ -20558,7 +20852,7 @@ ${this.lastInitStack}` : "";
         trackUri: this.uri,
         abort: this.disposeAbort
       });
-      (_b = this.deps.textTrackController) == null ? void 0 : _b.suspend();
+      (_b = this.deps.textTrackController) == null ? void 0 : _b.deactivate();
       this.deps.playbackSource.src = null;
       this.deps.playbackSource.load();
       this.deps.mediaSourceController.deactivate();
@@ -21611,9 +21905,8 @@ ${this.lastInitStack}` : "";
         qualitySelector: (deps2) => new QualitySelectorImpl({
           options: deps2.options.pick("abr")
         }),
-        preferredAudioLanguage: (deps2) => deps2.options.pick("preferredAudioLanguage"),
+        audio: (deps2) => deps2.options.pick("audio"),
         allowedContentTypes: (deps2) => deps2.options.pick("allowedContentTypes"),
-        preferDescriptiveAudio: (deps2) => deps2.options.pick("preferDescriptiveAudio"),
         abr: (deps2) => deps2.options.pick("abr"),
         manifestTransformed: createDefaultDashManifestTransformer,
         mediaTimeline: (deps2) => deps2.manifestTransformed.map(async (manifestPromise) => {
@@ -21623,26 +21916,21 @@ ${this.lastInitStack}` : "";
         mediaTimelineTransformed: createDefaultMediaTimelineTransformer,
         textTrackController: (deps2) => {
           var _a3;
-          const controller = new SidecarTextTrackController({
-            media: deps2.media,
+          return new SidecarTextTrackController({
+            textTrackProvider: deps2.textTrackProvider,
+            textTrackRenderer: deps2.textTrackRenderer,
+            playbackController: deps2.playbackController,
             requestInit: (_a3 = loadOptions.requestInit) != null ? _a3 : void 0,
-            preferredTextLanguage: deps2.options.pick(
-              "preferredTextLanguage"
-            ),
-            cueStyle: deps2.options.pick("textCueStyle")
-          });
-          deps2.manifestTransformed.onData((manifestPromise) => {
-            manifestPromise.then((data2) => {
-              controller.setTextTracks(
-                discoverDashTextTracks(
+            options: deps2.options.pick("text"),
+            textTracks: deps2.manifestTransformed.map(
+              (manifestPromise) => manifestPromise.then(
+                (data2) => discoverDashTextTracks(
                   data2.manifest,
                   data2.baseUrl
                 )
-              );
-            }).catch(() => {
-            });
+              )
+            )
           });
-          return controller;
         }
       }));
     };
@@ -23082,9 +23370,8 @@ ${this.lastInitStack}` : "";
           qualitySelector: (deps2) => new QualitySelectorImpl({
             options: deps2.options.pick("abr")
           }),
-          preferredAudioLanguage: (deps2) => deps2.options.pick("preferredAudioLanguage"),
+          audio: (deps2) => deps2.options.pick("audio"),
           allowedContentTypes: (deps2) => deps2.options.pick("allowedContentTypes"),
-          preferDescriptiveAudio: (deps2) => deps2.options.pick("preferDescriptiveAudio"),
           abr: (deps2) => deps2.options.pick("abr"),
           mediaTimeline: (deps2) => deps2.manifestTransformed.map(async (manifestPromise) => {
             const data2 = await manifestPromise;
@@ -23093,26 +23380,21 @@ ${this.lastInitStack}` : "";
           mediaTimelineTransformed: createDefaultMediaTimelineTransformer,
           textTrackController: (deps2) => {
             var _a3;
-            const controller = new SidecarTextTrackController({
-              media: deps2.media,
+            return new SidecarTextTrackController({
+              textTrackProvider: deps2.textTrackProvider,
+              textTrackRenderer: deps2.textTrackRenderer,
+              playbackController: deps2.playbackController,
               requestInit: (_a3 = loadOptions.requestInit) != null ? _a3 : void 0,
-              preferredTextLanguage: deps2.options.pick(
-                "preferredTextLanguage"
-              ),
-              cueStyle: deps2.options.pick("textCueStyle")
-            });
-            deps2.manifestTransformed.onData((manifestPromise) => {
-              manifestPromise.then((data2) => {
-                controller.setTextTracks(
-                  discoverHlsTextTracks(
+              options: deps2.options.pick("text"),
+              textTracks: deps2.manifestTransformed.map(
+                (manifestPromise) => manifestPromise.then(
+                  (data2) => discoverHlsTextTracks(
                     data2.mainPlaylist,
                     data2.baseUrl
                   )
-                );
-              }).catch(() => {
-              });
+                )
+              )
             });
-            return controller;
           }
         }));
       };
@@ -23682,24 +23964,24 @@ ${this.lastInitStack}` : "";
   var defaultVinylOptions = {
     abr: defaultQualitySelectorImplOptions,
     loudnessNormalization: defaultLoudnessNormalizationControllerImplOptions,
-    preferredAudioLanguage: null,
-    preferredTextLanguage: null,
-    preferDescriptiveAudio: false,
+    audio: defaultAudioOptions,
     codecOverrides: {},
     allowedContentTypes: null,
-    textCueStyle: { size: 90 }
+    text: {
+      // Forced-only captions in the platform's preferred languages (no
+      // explicit language → navigator.languages).
+      enabled: "forced"
+    }
   };
   var vinylOptionsValidator = object({
     abr: qualitySelectorImplOptionsValidator,
     loudnessNormalization: loudnessNormalizationControllerImplOptionsValidator,
-    preferredAudioLanguage: string().or(array(string()).readonly()).orNull(),
-    preferredTextLanguage: string().or(array(string()).readonly()).orNull(),
-    preferDescriptiveAudio: boolean(),
+    audio: audioOptionsValidator,
     codecOverrides: record(string(), isOneOf("allow", "deny")),
-    allowedContentTypes: array(isOneOf(...RESTRICTABLE_CONTENT_TYPES)).cast().describe(
+    allowedContentTypes: array(isOneOf(...RESTRICTABLE_CONTENT_TYPES)).readonly().describe(
       "Allow list of media content types (audio, video) to stream; other media streams are ignored. Text tracks are unaffected."
     ).orNull(),
-    textCueStyle: vttCueStyleValidator.orNull()
+    text: textTrackControllerOptionsValidator
   });
 
   // src/vinyl/playerConfigFactory.ts
@@ -23731,6 +24013,14 @@ ${this.lastInitStack}` : "";
         return patchMediaElement(options.media, patches.media);
       },
       media: (deps) => deps.patchedMedia.patched,
+      // One provider per media element (the player container creates each
+      // dependency once), so text tracks are reused rather than accumulated.
+      textTrackProvider: (deps) => createMediaTextTrackProvider({ media: deps.media }),
+      // App-provided cue renderer (or null for native rendering).
+      textTrackRenderer: () => {
+        var _a4;
+        return (_a4 = options.textTrackRenderer) != null ? _a4 : null;
+      },
       playbackController: (deps) => new PlaybackControllerImpl(deps, options.playbackController),
       playbackSource: (deps) => new PlaybackSourceImpl(deps),
       loudnessNormalizationController: (deps) => new LoudnessNormalizationControllerImpl({
@@ -23853,10 +24143,6 @@ ${this.lastInitStack}` : "";
         const previous = activeTrack;
         if (previous === current) return;
         activeTrack = current;
-        const prevTextController = previous == null ? void 0 : previous.textTrackController;
-        if (!this.deps.adController.currentAdBreak) {
-          prevTextController == null ? void 0 : prevTextController.setActiveTextTrack(null);
-        }
         sub == null ? void 0 : sub();
         sub = null;
         textSub == null ? void 0 : textSub();
@@ -24273,16 +24559,6 @@ ${this.lastInitStack}` : "";
       var _a3, _b, _c;
       return (_c = (_b = (_a3 = this.activeTrack) == null ? void 0 : _a3.textTrackController) == null ? void 0 : _b.activeTextTrack) != null ? _c : null;
     }
-    /**
-     * Selects the text track with the given id, or clears the active text
-     * track when called with null. No-op when the current track does not
-     * surface text tracks or the id is unknown.
-     */
-    setActiveTextTrack(id) {
-      var _a3;
-      const controller = (_a3 = this.deps.trackController.activeTrack) == null ? void 0 : _a3.textTrackController;
-      controller == null ? void 0 : controller.setActiveTextTrack(id);
-    }
     emitTextTrackChangeEventsFor(previous, current) {
       var _a3, _b, _c, _d, _e, _f;
       const prevList = (_a3 = previous == null ? void 0 : previous.textTrackController) == null ? void 0 : _a3.textTracks;
@@ -25910,9 +26186,9 @@ ${(_a3 = this.failedResult.failedExpectations[0]) == null ? void 0 : _a3.message
       super(...arguments);
       __publicField(this, "textTracks", []);
       __publicField(this, "activeTextTrack", null);
-      __publicField(this, "setActiveTextTrack", spyFactory25("setActiveTextTrack"));
-      __publicField(this, "suspend", spyFactory25("suspend"));
-      __publicField(this, "resume", spyFactory25("resume"));
+      __publicField(this, "active", false);
+      __publicField(this, "deactivate", spyFactory25("deactivate"));
+      __publicField(this, "activate", spyFactory25("activate"));
     }
   };
 
@@ -25950,9 +26226,10 @@ ${(_a3 = this.failedResult.failedExpectations[0]) == null ? void 0 : _a3.message
       mediaQualityMetadataResolver: createSpy5().and.callFake(
         () => createEmptyMediaQualityMetadata()
       ),
-      preferredAudioLanguage: data(null),
+      audio: data({
+        selection: { language: null, descriptive: false }
+      }),
       allowedContentTypes: data(null),
-      preferDescriptiveAudio: data(false),
       abr: data(defaultQualitySelectorImplOptions)
     };
   }
@@ -25972,6 +26249,7 @@ ${(_a3 = this.failedResult.failedExpectations[0]) == null ? void 0 : _a3.message
   var createSpy6 = jasmine.createSpy;
   function createMockVinylDependencies() {
     const playbackController = new MockPlaybackController();
+    const media = createMockMedia();
     return {
       options: data(defaultVinylOptions),
       trackController: new MockTrackController(),
@@ -25979,7 +26257,9 @@ ${(_a3 = this.failedResult.failedExpectations[0]) == null ? void 0 : _a3.message
       playbackController,
       capabilities: new MockCapabilities(),
       drmController: new MockDrmController(),
-      media: createMockMedia(),
+      media,
+      textTrackProvider: createMediaTextTrackProvider({ media }),
+      textTrackRenderer: null,
       createDashFactories: (_loadOptions) => externalDependencies(createMockDashDependencies()),
       createHlsFactories: (_loadOptions) => externalDependencies(createMockDashDependencies()),
       autoResetController: new MockAutoResetController(),
@@ -26098,9 +26378,10 @@ ${(_a3 = this.failedResult.failedExpectations[0]) == null ? void 0 : _a3.message
       mediaQualityMetadataResolver: createSpy7().and.callFake(
         () => createEmptyMediaQualityMetadata()
       ),
-      preferredAudioLanguage: data(null),
+      audio: data({
+        selection: { language: null, descriptive: false }
+      }),
       allowedContentTypes: data(null),
-      preferDescriptiveAudio: data(false),
       abr: data(defaultQualitySelectorImplOptions)
     };
   }
@@ -37145,9 +37426,13 @@ ${(_a3 = this.failedResult.failedExpectations[0]) == null ? void 0 : _a3.message
         drmController,
         mediaTimeline: data(Promise.resolve(timeline)),
         options: data({
-          preferredAudioLanguage,
-          codecOverrides,
-          preferDescriptiveAudio
+          audio: {
+            selection: {
+              language: preferredAudioLanguage,
+              descriptive: preferDescriptiveAudio
+            }
+          },
+          codecOverrides
         })
       };
     }
@@ -37446,7 +37731,7 @@ ${(_a3 = this.failedResult.failedExpectations[0]) == null ? void 0 : _a3.message
         getDuration: () => Promise.resolve(Infinity)
       };
       const options = data({
-        preferredAudioLanguage: "en"
+        audio: { selection: { language: "en" } }
       });
       const deps = {
         capabilities,
@@ -37459,7 +37744,7 @@ ${(_a3 = this.failedResult.failedExpectations[0]) == null ? void 0 : _a3.message
       });
       let result = await transformed.value;
       expect(result.periods[0].qualities[0].metadata.qualityId).toBe("en");
-      options.value = { preferredAudioLanguage: "ja" };
+      options.value = { audio: { selection: { language: "ja" } } };
       result = await transformed.value;
       expect(result.periods[0].qualities[0].metadata.qualityId).toBe("ja");
       unsub();
@@ -39209,9 +39494,9 @@ ${(_a3 = this.failedResult.failedExpectations[0]) == null ? void 0 : _a3.message
       it("suspends the controller on deactivate and resumes it on activate", () => {
         track2 = createTrack();
         track2.activate({});
-        expect(deps.textTrackController.resume).toHaveBeenCalled();
+        expect(deps.textTrackController.activate).toHaveBeenCalled();
         track2.deactivate();
-        expect(deps.textTrackController.suspend).toHaveBeenCalled();
+        expect(deps.textTrackController.deactivate).toHaveBeenCalled();
       });
       it("returns null (not throw) when read after disposal", () => {
         const t = track2 = createTrack();
@@ -39414,18 +39699,24 @@ ${(_a3 = this.failedResult.failedExpectations[0]) == null ? void 0 : _a3.message
         expect(getAudioStream().reset).not.toHaveBeenCalled();
       });
       const allowed = ["audio"];
+      const jaAudio = {
+        selection: { language: "ja" }
+      };
+      const descriptiveAudio = {
+        selection: { descriptive: true }
+      };
       for (const scenario of [
         {
-          name: "preferredAudioLanguage",
-          apply: () => deps.preferredAudioLanguage.value = "ja"
+          name: "audio language",
+          apply: () => deps.audio.value = jaAudio
         },
         {
           name: "allowedContentTypes",
           apply: () => deps.allowedContentTypes.value = allowed
         },
         {
-          name: "preferDescriptiveAudio",
-          apply: () => deps.preferDescriptiveAudio.value = true
+          name: "audio descriptive",
+          apply: () => deps.audio.value = descriptiveAudio
         }
       ]) {
         describe(`when ${scenario.name} changes`, () => {
@@ -40968,6 +41259,342 @@ ${(_a3 = this.failedResult.failedExpectations[0]) == null ? void 0 : _a3.message
     });
   });
 
+  // test/unit/text/HtmlTextTrackRenderer.test.ts
+  describe("computeCueLayout", () => {
+    it("flows a cue with no line/position (defaults: center, full width)", () => {
+      expect(computeCueLayout({})).toEqual({
+        textAlign: "center",
+        maxWidth: "100%"
+      });
+    });
+    it("maps align and size", () => {
+      const layout = computeCueLayout({ align: "start", size: 80 });
+      expect(layout.textAlign).toBe("start");
+      expect(layout.maxWidth).toBe("80%");
+    });
+    it("maps vertical writing modes", () => {
+      expect(computeCueLayout({ vertical: "rl" }).writingMode).toBe(
+        "vertical-rl"
+      );
+      expect(computeCueLayout({ vertical: "lr" }).writingMode).toBe(
+        "vertical-lr"
+      );
+    });
+    it("centers horizontally and bottom-anchors when only a line is set", () => {
+      const layout = computeCueLayout({ line: 40, snapToLines: false });
+      expect(layout.position).toBe("absolute");
+      expect(layout.left).toBe("50%");
+      expect(layout.top).toBe("40%");
+      expect(layout.transform).toBe("translateX(-50%)");
+    });
+    it("percentage line honors lineAlign end and center", () => {
+      expect(
+        computeCueLayout({ line: 20, snapToLines: false, lineAlign: "end" }).bottom
+      ).toBe("80%");
+      const center = computeCueLayout({
+        line: 30,
+        snapToLines: false,
+        lineAlign: "center"
+      });
+      expect(center.top).toBe("30%");
+      expect(center.transform).toContain("translateY(-50%)");
+    });
+    it("snap-to-lines integer line: negative counts up from the bottom", () => {
+      expect(computeCueLayout({ line: -3, snapToLines: true }).bottom).toBe(
+        "3em"
+      );
+      expect(computeCueLayout({ line: 2, snapToLines: true }).top).toBe("3em");
+    });
+    it("positions horizontally by positionAlign", () => {
+      expect(
+        computeCueLayout({ position: 20, positionAlign: "line-left" }).left
+      ).toBe("20%");
+      expect(
+        computeCueLayout({ position: 20, positionAlign: "line-right" }).right
+      ).toBe("80%");
+      const center = computeCueLayout({
+        position: 30,
+        positionAlign: "center"
+      });
+      expect(center.left).toBe("30%");
+      expect(center.transform).toBe("translateX(-50%)");
+    });
+    it("a position without a line bottom-anchors", () => {
+      expect(computeCueLayout({ position: 10 }).bottom).toBe("0");
+    });
+  });
+  describe("renderCueText", () => {
+    it("escapes plain text and turns newlines into <br>", () => {
+      expect(renderCueText("a & b\nc")).toBe("a &amp; b<br>c");
+    });
+    it("escapes a stray < that is not a tag", () => {
+      expect(renderCueText("a < b")).toBe("a &lt; b");
+    });
+    it("converts <c.class> to a styled span", () => {
+      expect(renderCueText("<c.styledotitalic>hi</c>")).toBe(
+        '<span class="styledotitalic">hi</span>'
+      );
+    });
+    it("joins multiple cue classes", () => {
+      expect(renderCueText("<c.a.b>x</c>")).toBe('<span class="a b">x</span>');
+    });
+    it("passes through i/b/u tags", () => {
+      expect(renderCueText("<i>x</i><b>y</b><u>z</u>")).toBe(
+        "<i>x</i><b>y</b><u>z</u>"
+      );
+    });
+    it("maps voice and lang tags to spans with attributes", () => {
+      expect(renderCueText("<v Bob>hi</v>")).toBe(
+        '<span title="Bob">hi</span>'
+      );
+      expect(renderCueText("<lang en>x</lang>")).toBe(
+        '<span lang="en">x</span>'
+      );
+    });
+    it("renders voice/lang without an annotation as a bare span", () => {
+      expect(renderCueText("<v>hi</v>")).toBe("<span>hi</span>");
+      expect(renderCueText("<lang>x</lang>")).toBe("<span>x</span>");
+    });
+    it("escapes annotation values", () => {
+      expect(renderCueText('<v a"b>x</v>')).toBe(
+        '<span title="a&quot;b">x</span>'
+      );
+    });
+    it("drops timestamp tags and unknown tags", () => {
+      expect(renderCueText("<00:00:01.000>a")).toBe("a");
+      expect(renderCueText("<xyz>a</xyz>")).toBe("a");
+    });
+  });
+  describe("HtmlTextTrackRenderer", () => {
+    function fakeElement() {
+      return {
+        style: {},
+        className: "",
+        innerHTML: "",
+        textContent: "",
+        children: [],
+        appendChild(node) {
+          this.children.push(node);
+        },
+        replaceChildren(...nodes) {
+          this.children = nodes;
+        }
+      };
+    }
+    function domChildren() {
+      return Array.from(
+        container.children
+      );
+    }
+    function cueBoxes() {
+      return domChildren().filter((c) => c.className === "vinyl-text-cue");
+    }
+    function styleElement() {
+      return domChildren()[0];
+    }
+    class FakeTextTrack {
+      constructor() {
+        __publicField(this, "activeCues", []);
+        __publicField(this, "listeners", /* @__PURE__ */ new Map());
+        __publicField(this, "addEventListener", jasmine.createSpy("addEventListener").and.callFake(
+          (type, fn) => this.listeners.set(type, fn)
+        ));
+        __publicField(this, "removeEventListener", jasmine.createSpy("removeEventListener").and.callFake((type) => this.listeners.delete(type)));
+      }
+      fireCueChange() {
+        var _a3;
+        (_a3 = this.listeners.get("cuechange")) == null ? void 0 : _a3();
+      }
+    }
+    function cue(text, geometry = {}) {
+      return __spreadValues({ text }, geometry);
+    }
+    let view;
+    let container;
+    let stubbedDocument = false;
+    beforeEach(() => {
+      if (typeof document === "undefined") {
+        ;
+        globalThis.document = {
+          createElement: () => fakeElement()
+        };
+        stubbedDocument = true;
+      }
+      view = new HtmlTextTrackRenderer();
+      container = view.element;
+    });
+    afterEach(() => {
+      view.dispose();
+      if (stubbedDocument) {
+        delete globalThis.document;
+        stubbedDocument = false;
+      }
+    });
+    it("creates a positioned overlay container", () => {
+      expect(container.className).toBe("vinyl-text-container");
+      expect(container.style.justifyContent).toBe("flex-end");
+      expect(container.style.pointerEvents).toBe("none");
+    });
+    it("renders the active cues, escaping text and applying layout", () => {
+      const track2 = new FakeTextTrack();
+      track2.activeCues = [cue("hi\nthere", { align: "start" })];
+      view.setTextTrack(track2);
+      expect(track2.addEventListener).toHaveBeenCalledWith(
+        "cuechange",
+        jasmine.any(Function)
+      );
+      const boxes = cueBoxes();
+      expect(boxes.length).toBe(1);
+      expect(boxes[0].innerHTML).toBe("hi<br>there");
+      expect(boxes[0].style.textAlign).toBe("start");
+    });
+    it("re-renders on cuechange", () => {
+      const track2 = new FakeTextTrack();
+      track2.activeCues = [];
+      view.setTextTrack(track2);
+      expect(cueBoxes().length).toBe(0);
+      track2.activeCues = [cue("now showing")];
+      track2.fireCueChange();
+      expect(cueBoxes().length).toBe(1);
+    });
+    it("renders an empty box for a cue with no text", () => {
+      const track2 = new FakeTextTrack();
+      track2.activeCues = [{ align: "center" }];
+      view.setTextTrack(track2);
+      expect(cueBoxes()[0].innerHTML).toBe("");
+    });
+    it("handles a track with null activeCues", () => {
+      const track2 = new FakeTextTrack();
+      track2.activeCues = null;
+      view.setTextTrack(track2);
+      expect(cueBoxes().length).toBe(0);
+    });
+    it("is a no-op when set to the same track", () => {
+      const track2 = new FakeTextTrack();
+      view.setTextTrack(track2);
+      view.setTextTrack(track2);
+      expect(track2.addEventListener).toHaveBeenCalledTimes(1);
+    });
+    it("detaches and clears when set to null", () => {
+      const track2 = new FakeTextTrack();
+      track2.activeCues = [cue("bye")];
+      view.setTextTrack(track2);
+      view.setTextTrack(null);
+      expect(track2.removeEventListener).toHaveBeenCalledWith(
+        "cuechange",
+        jasmine.any(Function)
+      );
+      expect(cueBoxes().length).toBe(0);
+    });
+    it("injects authored STYLE rules with ::cue selectors rewritten", () => {
+      view.setStyles([
+        "::cue(.loud) { font-weight: bold }\n::cue { color: red }"
+      ]);
+      const style = styleElement();
+      expect(style.textContent).toBe(
+        ".vinyl-text-cue .loud { font-weight: bold }\n.vinyl-text-cue { color: red }"
+      );
+    });
+    it("clears authored styles when the track changes", () => {
+      view.setStyles(["::cue { color: red }"]);
+      const style = styleElement();
+      expect(style.textContent).not.toBe("");
+      view.setTextTrack(new FakeTextTrack());
+      expect(style.textContent).toBe("");
+    });
+    it("dispose detaches the current track", () => {
+      const track2 = new FakeTextTrack();
+      view.setTextTrack(track2);
+      view.dispose();
+      expect(track2.removeEventListener).toHaveBeenCalled();
+    });
+  });
+
+  // test/unit/text/mediaTextTrackProvider.test.ts
+  var FakeMediaElement = class {
+    constructor() {
+      __publicField(this, "tracks", []);
+      __publicField(this, "addTextTrack", jasmine.createSpy("addTextTrack").and.callFake((kind, label, language) => {
+        const track2 = {
+          kind,
+          label,
+          language,
+          mode: "disabled",
+          cues: [],
+          addCue(cue) {
+            this.cues.push(cue);
+          },
+          removeCue(cue) {
+            const i = this.cues.indexOf(cue);
+            if (i >= 0) this.cues.splice(i, 1);
+          }
+        };
+        this.tracks.push(track2);
+        return track2;
+      }));
+    }
+    // ArrayLike view over the live tracks (what `isAttached` scans).
+    get textTracks() {
+      return this.tracks;
+    }
+    asMedia() {
+      return this;
+    }
+    cue() {
+      return { id: "" };
+    }
+  };
+  describe("createMediaTextTrackProvider", () => {
+    let media;
+    let provider;
+    beforeEach(() => {
+      media = new FakeMediaElement();
+      provider = createMediaTextTrackProvider({ media: media.asMedia() });
+    });
+    it("creates a track from the given kind/label/language", () => {
+      const ref = provider.getOrCreate("subtitles", "English", "en");
+      expect(media.addTextTrack).toHaveBeenCalledOnceWith(
+        "subtitles",
+        "English",
+        "en"
+      );
+      expect(media.tracks).toContain(ref.track);
+    });
+    it("memoizes by (kind,label,language) \u2014 same key returns the same track", () => {
+      const a = provider.getOrCreate("subtitles", "English", "en");
+      const b = provider.getOrCreate("subtitles", "English", "en");
+      expect(b).toBe(a);
+      expect(media.addTextTrack).toHaveBeenCalledTimes(1);
+    });
+    it("creates a distinct track per key", () => {
+      provider.getOrCreate("subtitles", "English", "en");
+      provider.getOrCreate("subtitles", "Espanol", "es");
+      expect(media.addTextTrack).toHaveBeenCalledTimes(2);
+    });
+    it("recreates a track that was detached from the media element", () => {
+      const first2 = provider.getOrCreate("subtitles", "English", "en");
+      media.tracks.length = 0;
+      const second = provider.getOrCreate("subtitles", "English", "en");
+      expect(second).not.toBe(first2);
+      expect(media.addTextTrack).toHaveBeenCalledTimes(2);
+      expect(media.tracks).toContain(second.track);
+    });
+    it("clear() removes all cues from the track", () => {
+      var _a3, _b;
+      const ref = provider.getOrCreate("subtitles", "English", "en");
+      ref.track.addCue(media.cue());
+      ref.track.addCue(media.cue());
+      expect((_a3 = ref.track.cues) == null ? void 0 : _a3.length).toBe(2);
+      ref.clear();
+      expect((_b = ref.track.cues) == null ? void 0 : _b.length).toBe(0);
+    });
+    it("clear() is a no-op when the track has no cues (cues null)", () => {
+      const ref = provider.getOrCreate("subtitles", "English", "en");
+      ref.track.cues = null;
+      expect(() => ref.clear()).not.toThrow();
+    });
+  });
+
   // test/unit/text/parseWebVtt.test.ts
   describe("parseWebVtt", () => {
     it("parses a minimal cue", () => {
@@ -41076,15 +41703,30 @@ ok`;
       const doc = parseWebVtt(text);
       expect(doc.cues.length).toBe(1);
     });
-    it("skips STYLE blocks", () => {
+    it("captures STYLE block CSS while still parsing cues", () => {
       const text = `WEBVTT
 
 STYLE
-::cue { color: red; }
+::cue(.loud) { font-weight: bold }
+
+STYLE
+::cue { color: red }
 
 00:00:01.000 --> 00:00:02.000
 styled`;
-      expect(parseWebVtt(text).cues.length).toBe(1);
+      const doc = parseWebVtt(text);
+      expect(doc.cues.length).toBe(1);
+      expect(doc.styles).toEqual([
+        "::cue(.loud) { font-weight: bold }",
+        "::cue { color: red }"
+      ]);
+    });
+    it("reports no styles when there are no STYLE blocks", () => {
+      const text = `WEBVTT
+
+00:00:01.000 --> 00:00:02.000
+x`;
+      expect(parseWebVtt(text).styles).toEqual([]);
     });
     it("skips REGION blocks", () => {
       const text = `WEBVTT
@@ -41095,14 +41737,96 @@ width:40%
 
 00:00:01.000 --> 00:00:02.000
 regional`;
-      expect(parseWebVtt(text).cues.length).toBe(1);
+      const doc = parseWebVtt(text);
+      expect(doc.cues.length).toBe(1);
+      expect(doc.styles).toEqual([]);
     });
-    it("tolerates cue settings on the timing line", () => {
+    it("parses cue settings on the timing line", () => {
       const text = `WEBVTT
 
 00:00:01.000 --> 00:00:02.000 line:50% align:start
 positioned`;
-      expect(parseWebVtt(text).cues[0].text).toBe("positioned");
+      const cue = parseWebVtt(text).cues[0];
+      expect(cue.text).toBe("positioned");
+      expect(cue.settings).toEqual({
+        line: 50,
+        snapToLines: false,
+        align: "start"
+      });
+    });
+    it("parses integer/negative lines as snap-to-lines, with lineAlign", () => {
+      const text = `WEBVTT
+
+00:00:01.000 --> 00:00:02.000 line:-3,end
+a
+
+00:00:03.000 --> 00:00:04.000 line:5
+b`;
+      const [a, b] = parseWebVtt(text).cues;
+      expect(a.settings).toEqual({
+        line: -3,
+        snapToLines: true,
+        lineAlign: "end"
+      });
+      expect(b.settings).toEqual({ line: 5, snapToLines: true });
+    });
+    it("maps the legacy 'middle' keyword to 'center'", () => {
+      const text = `WEBVTT
+
+00:00:01.000 --> 00:00:02.000 align:middle line:85%,middle position:50%,middle
+a`;
+      expect(parseWebVtt(text).cues[0].settings).toEqual({
+        align: "center",
+        line: 85,
+        snapToLines: false,
+        lineAlign: "center",
+        position: 50,
+        positionAlign: "center"
+      });
+    });
+    it("parses position (with align), size and vertical", () => {
+      const text = `WEBVTT
+
+00:00:01.000 --> 00:00:02.000 position:20%,line-left size:80% vertical:rl
+a`;
+      expect(parseWebVtt(text).cues[0].settings).toEqual({
+        position: 20,
+        positionAlign: "line-left",
+        size: 80,
+        vertical: "rl"
+      });
+    });
+    it("omits settings and skips malformed/unknown tokens", () => {
+      const text = `WEBVTT
+
+00:00:01.000 --> 00:00:02.000
+plain
+
+00:00:03.000 --> 00:00:04.000 align:bogus size:oops region:foo bareword
+b`;
+      const [plain, b] = parseWebVtt(text).cues;
+      expect(plain.settings).toBeUndefined();
+      expect(b.settings).toBeUndefined();
+    });
+    it("skips malformed line/position/percent values and invalid aligns", () => {
+      const text = `WEBVTT
+
+00:00:01.000 --> 00:00:02.000 line:x% size:y%
+a
+
+00:00:03.000 --> 00:00:04.000 line:1.5 position:bad
+b
+
+00:00:05.000 --> 00:00:06.000 line:5,bogus position:20%,nope
+c`;
+      const [a, b, c] = parseWebVtt(text).cues;
+      expect(a.settings).toBeUndefined();
+      expect(b.settings).toBeUndefined();
+      expect(c.settings).toEqual({
+        line: 5,
+        snapToLines: true,
+        position: 20
+      });
     });
     it("skips a malformed cue and continues", () => {
       const text = `WEBVTT
@@ -41117,6 +41841,114 @@ good`;
       expect(cues.length).toBe(1);
       expect(cues[0].text).toBe("good");
     });
+    it("skips a line with --> but an invalid start timestamp", () => {
+      const text = `WEBVTT
+
+BForced --> 00:00:02.000
+skipped
+
+00:00:02.000 --> 00:00:03.000
+good`;
+      const cues = parseWebVtt(text).cues;
+      expect(cues.length).toBe(1);
+      expect(cues[0].text).toBe("good");
+    });
+    it("ignores unparseable text glued after the end timestamp", () => {
+      const cue = parseWebVtt(
+        "WEBVTT\n\n00:00:01.000 --> 00:00:02.000x\ntext"
+      ).cues[0];
+      expect(cue.endTime).toBe(2);
+      expect(cue.settings).toBeUndefined();
+      expect(cue.text).toBe("text");
+    });
+    it("parses multi-digit hours (spec allows two or more)", () => {
+      const cues = parseWebVtt(
+        "WEBVTT\n\n100:00:01.000 --> 100:00:02.500\nhi"
+      ).cues;
+      expect(cues.length).toBe(1);
+      expect(cues[0].startTime).toBe(360001);
+      expect(cues[0].endTime).toBe(360002.5);
+    });
+    it("treats consecutive blank lines between cues as separators", () => {
+      const text = "WEBVTT\n\n00:00:01.000 --> 00:00:02.000\none\n\n\n00:00:03.000 --> 00:00:04.000\ntwo";
+      expect(parseWebVtt(text).cues.map((c) => c.text)).toEqual([
+        "one",
+        "two"
+      ]);
+    });
+    for (const timing of [
+      "12 --> 00:00:02.000",
+      // two digits then no ':'
+      "7 --> 00:00:02.000",
+      // one digit then no second digit
+      "00:00:01.000 00:00:02.000",
+      // no --> ⇒ treated as an identifier
+      "5:30.000 --> 00:00:02.000",
+      // MM:SS minutes not two digits
+      "75:30.000 --> 00:00:02.000",
+      // MM:SS minutes > 59
+      "12:34 --> 00:00:02.000",
+      // seconds not terminated by '.'
+      "00:99:00.000 --> 00:00:02.000",
+      // HH:MM:SS minutes > 59
+      "00:00:99.000 --> 00:00:02.000",
+      // HH:MM:SS seconds > 59
+      "00:00:0.400 --> 00:00:02.000",
+      // HH:MM:SS seconds not two digits
+      "12:3:45.000 --> 00:00:02.000",
+      // minutes not two digits before ':'
+      "00:00:00 --> 00:00:02.000",
+      // HH:MM:SS missing .mmm
+      "00:00:00.00 --> 00:00:02.000",
+      // milliseconds only two digits
+      "00:00.0 --> 00:00:02.000",
+      // milliseconds only one digit
+      "00:00. --> 00:00:02.000",
+      // milliseconds missing
+      "12:ab --> 00:00:02.000",
+      // non-digit minute/second
+      "00:00:01.0"
+      // truncated timestamp at end of input
+    ]) {
+      it(`skips a line with an invalid timestamp: "${timing}"`, () => {
+        const text = `WEBVTT
+
+${timing}
+filler
+
+00:00:05.000 --> 00:00:06.000
+ok`;
+        expect(parseWebVtt(text).cues.map((c) => c.text)).toEqual(["ok"]);
+      });
+    }
+    for (const identifier of ["NOTES", "REGIONAL", "STYLES"]) {
+      it(`treats keyword prefix "${identifier}" as an identifier`, () => {
+        const cues = parseWebVtt(
+          `WEBVTT
+
+${identifier}
+00:00:01.000 --> 00:00:02.000
+hi`
+        ).cues;
+        expect(cues.length).toBe(1);
+        expect(cues[0].id).toBe(identifier);
+      });
+    }
+    it("normalizes CRLF line endings and splits CRLF-separated cues", () => {
+      const text = "WEBVTT\r\n\r\n00:00:01.000 --> 00:00:02.000\r\nline one\r\nline two\r\n\r\n00:00:03.000 --> 00:00:04.000\r\nsecond";
+      expect(parseWebVtt(text).cues.map((c) => c.text)).toEqual([
+        "line one\nline two",
+        "second"
+      ]);
+    });
+    it("accepts a NOTE block at end of input", () => {
+      expect(parseWebVtt("WEBVTT\n\nNOTE").cues).toEqual([]);
+    });
+    it("handles input that ends mid-timestamp", () => {
+      expect(parseWebVtt("WEBVTT\n\n00:00:00.000 --> 00:00:0").cues).toEqual(
+        []
+      );
+    });
     it("returns empty cues on header-only input", () => {
       expect(parseWebVtt("WEBVTT\n").cues).toEqual([]);
     });
@@ -41193,7 +42025,21 @@ trailing-id`;
     }, overrides);
   }
   describe("pickPreferredTextTrack", () => {
-    it("returns null when the preference is null (captions off)", () => {
+    it("falls back to navigator.languages when the preference is null", () => {
+      setMockNavigator().languages = ["en"];
+      const en = track({ id: "en", language: "en" });
+      expect(pickPreferredTextTrack([en], null)).toBe(en);
+    });
+    it("returns null when no track relates to navigator.languages", () => {
+      setMockNavigator().languages = ["en"];
+      expect(
+        pickPreferredTextTrack([track({ language: "ja" })], null)
+      ).toBeNull();
+    });
+    it("returns null for a null preference when navigator is unavailable", () => {
+      spyOnPropertySafe(globalThis, "navigator").and.returnValue(
+        void 0
+      );
       expect(pickPreferredTextTrack([track()], null)).toBeNull();
     });
     it("returns null when there are no tracks", () => {
@@ -41246,28 +42092,60 @@ trailing-id`;
   async function flushUntil(predicate) {
     for (let i = 0; i < 100 && !predicate(); i++) await flushPromises();
   }
-  var FakeMediaElement = class {
+  var FakeTextTrackProvider = class {
     constructor() {
-      __publicField(this, "addTextTrack", jasmine.createSpy("addTextTrack").and.callFake((kind, label, language) => {
+      // Every distinct track created (one per rendition key).
+      __publicField(this, "created", []);
+      // The track handed out by the most recent getOrCreate (the active one).
+      __publicField(this, "lastTrack", null);
+      __publicField(this, "cache", /* @__PURE__ */ new Map());
+      __publicField(this, "getOrCreate", jasmine.createSpy("getOrCreate").and.callFake((kind, label, language) => {
+        const key = `${kind}-${label}-${language}`;
+        const existing = this.cache.get(key);
+        if (existing) {
+          this.lastTrack = existing.track;
+          return existing;
+        }
+        const storedCues = [];
         const track2 = {
           kind,
           label: label != null ? label : "",
           language: language != null ? language : "",
           mode: "disabled",
-          cues: [],
+          storedCues,
+          // Real TextTrack.cues returns null when mode is 'disabled'.
+          get cues() {
+            return this.mode === "disabled" ? null : storedCues;
+          },
           addCue(cue) {
-            this.cues.push(cue);
+            storedCues.push(cue);
           },
           removeCue(cue) {
-            const i = this.cues.indexOf(cue);
-            if (i >= 0) this.cues.splice(i, 1);
+            const i = storedCues.indexOf(cue);
+            if (i >= 0) storedCues.splice(i, 1);
+          }
+        };
+        const ref = {
+          track: track2,
+          clear() {
+            if (track2.mode === "disabled") return;
+            storedCues.length = 0;
           }
         };
+        this.created.push(track2);
+        this.cache.set(key, ref);
         this.lastTrack = track2;
-        return track2;
+        return ref;
       }));
-      __publicField(this, "lastTrack", null);
-      __publicField(this, "currentTime", 0);
+    }
+    /** Tracks currently rendering captions (showing with at least one cue). */
+    showingWithCues() {
+      return this.created.filter(
+        (t) => {
+          var _a3, _b;
+          return t.mode === "showing" && ((_b = (_a3 = t.cues) == null ? void 0 : _a3.length) != null ? _b : 0) > 0;
+        }
+      );
     }
   };
   function makeTrack(overrides = {}) {
@@ -41284,18 +42162,47 @@ trailing-id`;
     }, overrides);
   }
   describe("SidecarTextTrackController", () => {
-    let media;
-    let controller;
     let requester;
     let originalCue;
+    const disposers = [];
+    function build(opts) {
+      var _a3;
+      const provider = new FakeTextTrackProvider();
+      const textTracks$ = data(
+        Promise.resolve([])
+      );
+      const options$ = data(
+        (_a3 = opts == null ? void 0 : opts.options) != null ? _a3 : { selection: {} }
+      );
+      const playback = { currentTime: 0 };
+      const controller = new SidecarTextTrackController({
+        textTrackProvider: provider,
+        textTracks: textTracks$,
+        options: options$,
+        playbackController: playback,
+        requestInit: opts == null ? void 0 : opts.requestInit,
+        textTrackRenderer: opts == null ? void 0 : opts.textTrackRenderer
+      });
+      if ((opts == null ? void 0 : opts.activate) !== false) controller.activate();
+      disposers.push(() => controller.dispose());
+      return {
+        controller,
+        provider,
+        options$,
+        textTracks$,
+        playback,
+        async setTracks(tracks) {
+          textTracks$.value = Promise.resolve(tracks);
+          await flushPromises();
+        },
+        select(selection) {
+          options$.value = __spreadProps(__spreadValues({}, options$.value), { selection });
+        }
+      };
+    }
     beforeEach(() => {
       requester = new MockRequester();
       requesterWithRetryRef.set(() => requester);
-      media = new FakeMediaElement();
-      controller = new SidecarTextTrackController({
-        media,
-        cueStyle: data({ size: 90 })
-      });
       originalCue = globalThis.VTTCue;
       globalThis.VTTCue = function VTTCue2(startTime, endTime, text) {
         this.startTime = startTime;
@@ -41306,137 +42213,182 @@ trailing-id`;
       };
     });
     afterEach(() => {
-      controller.dispose();
+      for (const dispose of disposers.splice(0)) dispose();
       globalThis.VTTCue = originalCue;
     });
     function respondVtt(body) {
       requester.request.and.resolveTo(new Response(body));
     }
     it("starts with no tracks and no active selection", () => {
+      const { controller } = build();
       expect(controller.textTracks).toEqual([]);
       expect(controller.activeTextTrack).toBeNull();
     });
-    describe("forced auto-selection", () => {
-      it("auto-selects a forced track on discovery", () => {
+    describe("resolveSelectedTrack", () => {
+      const full = makeTrack({ id: "full", language: "en", forced: false });
+      const forced = makeTrack({ id: "forced", language: "en", forced: true });
+      const captions = makeTrack({
+        id: "cc",
+        language: "en",
+        forced: false,
+        kind: "captions"
+      });
+      it("renders nothing when enabled is 'off' (even with an id)", () => {
+        expect(
+          resolveSelectedTrack([full, forced], {
+            enabled: "off",
+            selection: { id: "full" }
+          })
+        ).toBeNull();
+      });
+      it("enabled 'on' selects the full track", () => {
         var _a3;
-        controller.setTextTracks([
-          makeTrack({ id: "full", label: "English" }),
-          makeTrack({ id: "forced", label: "Forced", forced: true })
-        ]);
-        expect((_a3 = controller.activeTextTrack) == null ? void 0 : _a3.id).toBe("forced");
+        expect(
+          (_a3 = resolveSelectedTrack([full, forced], {
+            enabled: "on",
+            selection: { language: "en" }
+          })) == null ? void 0 : _a3.id
+        ).toBe("full");
       });
-      it("prefers the forced track matching the default language", () => {
+      it("enabled 'forced' selects the forced track", () => {
         var _a3;
-        controller.setTextTracks([
-          makeTrack({ id: "en-f", language: "en", forced: true }),
-          makeTrack({
-            id: "es-f",
-            language: "es",
-            forced: true,
-            default: true
-          })
-        ]);
-        expect((_a3 = controller.activeTextTrack) == null ? void 0 : _a3.id).toBe("es-f");
+        expect(
+          (_a3 = resolveSelectedTrack([full, forced], {
+            enabled: "forced",
+            selection: { language: "en" }
+          })) == null ? void 0 : _a3.id
+        ).toBe("forced");
       });
-      it("does not auto-select when there is no forced track", () => {
-        controller.setTextTracks([makeTrack({ id: "full" })]);
-        expect(controller.activeTextTrack).toBeNull();
+      it("selection.forced overrides the enabled mode", () => {
+        var _a3;
+        expect(
+          (_a3 = resolveSelectedTrack([full, forced], {
+            enabled: "on",
+            selection: { language: "en", forced: true }
+          })) == null ? void 0 : _a3.id
+        ).toBe("forced");
       });
-      it("does not auto-select after the app made an explicit choice", () => {
-        controller.setActiveTextTrack(null);
-        controller.setTextTracks([
-          makeTrack({ id: "forced", forced: true })
-        ]);
-        expect(controller.activeTextTrack).toBeNull();
+      it("an explicit id wins over other criteria", () => {
+        var _a3;
+        expect(
+          (_a3 = resolveSelectedTrack([full, forced], {
+            selection: { id: "forced", language: "en", forced: false }
+          })) == null ? void 0 : _a3.id
+        ).toBe("forced");
       });
-      it("does not override an explicit selection with a forced track", () => {
+      it("unknown id selects nothing", () => {
+        expect(
+          resolveSelectedTrack([full], { selection: { id: "nope" } })
+        ).toBeNull();
+      });
+      it("forced defaults to true (only forced tracks)", () => {
         var _a3;
-        controller.setTextTracks([makeTrack({ id: "full" })]);
-        controller.setActiveTextTrack("full");
-        controller.setTextTracks([
-          makeTrack({ id: "full" }),
-          makeTrack({ id: "forced", forced: true })
-        ]);
-        expect((_a3 = controller.activeTextTrack) == null ? void 0 : _a3.id).toBe("full");
+        expect(
+          (_a3 = resolveSelectedTrack([full, forced], {
+            selection: { language: "en" }
+          })) == null ? void 0 : _a3.id
+        ).toBe("forced");
+      });
+      it("forced:false selects the full track", () => {
+        var _a3;
+        expect(
+          (_a3 = resolveSelectedTrack([full, forced], {
+            selection: { language: "en", forced: false }
+          })) == null ? void 0 : _a3.id
+        ).toBe("full");
+      });
+      it("kind restricts the candidate pool", () => {
+        var _a3;
+        expect(
+          (_a3 = resolveSelectedTrack([full, captions], {
+            selection: {
+              language: "en",
+              forced: false,
+              kind: "captions"
+            }
+          })) == null ? void 0 : _a3.id
+        ).toBe("cc");
+      });
+      it("falls back to navigator.languages when no language is given", () => {
+        var _a3;
+        expect(
+          (_a3 = resolveSelectedTrack([full], { selection: { forced: false } })) == null ? void 0 : _a3.id
+        ).toBe("full");
+      });
+      it("an ordered language list prefers earlier entries", () => {
+        var _a3;
+        const es = makeTrack({ id: "es", language: "es", forced: false });
+        expect(
+          (_a3 = resolveSelectedTrack([full, es], {
+            selection: { language: ["es", "en"], forced: false }
+          })) == null ? void 0 : _a3.id
+        ).toBe("es");
       });
-    });
-    it("emits textTracksChange when discovered list changes", () => {
-      const handler = jasmine.createSpy("textTracksChange");
-      controller.on("textTracksChange", handler);
-      const t = makeTrack();
-      controller.setTextTracks([t]);
-      expect(handler).toHaveBeenCalledTimes(1);
-      controller.setTextTracks([t]);
-      expect(handler).toHaveBeenCalledTimes(1);
-    });
-    it("detects changed track properties", () => {
-      const handler = jasmine.createSpy();
-      controller.on("textTracksChange", handler);
-      controller.setTextTracks([makeTrack({ label: "A" })]);
-      controller.setTextTracks([makeTrack({ label: "B" })]);
-      expect(handler).toHaveBeenCalledTimes(2);
     });
     it("selecting a known id loads cues and creates a TextTrack", async () => {
-      var _a3, _b, _c;
+      var _a3, _b, _c, _d;
       respondVtt(`WEBVTT
 
 00:00:01.000 --> 00:00:02.000
 first`);
-      const t = makeTrack();
-      controller.setTextTracks([t]);
+      const h = build({ options: { selection: { id: "a" } } });
       const activeChange = jasmine.createSpy();
-      controller.on("activeTextTrackChange", activeChange);
-      controller.setActiveTextTrack(t.id);
-      expect(controller.activeTextTrack).toBe(t);
+      h.controller.on("activeTextTrackChange", activeChange);
+      await h.setTracks([makeTrack()]);
+      expect((_a3 = h.controller.activeTextTrack) == null ? void 0 : _a3.id).toBe("a");
       expect(activeChange).toHaveBeenCalledTimes(1);
       await flushUntil(() => {
-        var _a4, _b2;
-        return ((_b2 = (_a4 = media.lastTrack) == null ? void 0 : _a4.cues.length) != null ? _b2 : 0) > 0;
+        var _a4, _b2, _c2;
+        return ((_c2 = (_b2 = (_a4 = h.provider.lastTrack) == null ? void 0 : _a4.cues) == null ? void 0 : _b2.length) != null ? _c2 : 0) > 0;
       });
-      expect(media.addTextTrack).toHaveBeenCalledWith(
+      expect(h.provider.getOrCreate).toHaveBeenCalledWith(
         "subtitles",
         "English",
         "en"
       );
-      expect((_a3 = media.lastTrack) == null ? void 0 : _a3.mode).toBe("showing");
-      expect((_b = media.lastTrack) == null ? void 0 : _b.cues.length).toBe(1);
-      const cue = (_c = media.lastTrack) == null ? void 0 : _c.cues[0];
-      expect(cue.size).toBe(90);
+      expect((_b = h.provider.lastTrack) == null ? void 0 : _b.mode).toBe("showing");
+      expect((_d = (_c = h.provider.lastTrack) == null ? void 0 : _c.cues) == null ? void 0 : _d.length).toBe(1);
     });
-    describe("cueStyle", () => {
-      async function loadFirstCue(ctrl) {
-        var _a3;
+    describe("authored cue settings", () => {
+      it("applies the cue's own parsed settings to the VTTCue", async () => {
+        var _a3, _b;
+        respondVtt(
+          `WEBVTT
+
+00:00:01.000 --> 00:00:02.000 align:left size:80%
+x`
+        );
+        const h = build({ options: { selection: { id: "a" } } });
+        await h.setTracks([makeTrack()]);
+        await flushUntil(
+          () => {
+            var _a4, _b2, _c;
+            return ((_c = (_b2 = (_a4 = h.provider.lastTrack) == null ? void 0 : _a4.cues) == null ? void 0 : _b2.length) != null ? _c : 0) > 0;
+          }
+        );
+        const cue = (_b = (_a3 = h.provider.lastTrack) == null ? void 0 : _a3.cues) == null ? void 0 : _b[0];
+        expect(cue.align).toBe("left");
+        expect(cue.size).toBe(80);
+      });
+      it("leaves the cue at defaults when it declares no settings", async () => {
+        var _a3, _b;
         respondVtt(`WEBVTT
 
 00:00:01.000 --> 00:00:02.000
-first`);
-        const t = makeTrack();
-        ctrl.setTextTracks([t]);
-        ctrl.setActiveTextTrack(t.id);
-        await flushUntil(() => {
-          var _a4, _b;
-          return ((_b = (_a4 = media.lastTrack) == null ? void 0 : _a4.cues.length) != null ? _b : 0) > 0;
-        });
-        return (_a3 = media.lastTrack) == null ? void 0 : _a3.cues[0];
-      }
-      it("does not style cues when cueStyle is null", async () => {
-        const ctrl = new SidecarTextTrackController({
-          media,
-          cueStyle: data(null)
-        });
-        const cue = await loadFirstCue(ctrl);
-        expect(cue.size).toBe(100);
-        ctrl.dispose();
-      });
-      it("does not style cues when no cueStyle dep is provided", async () => {
-        const ctrl = new SidecarTextTrackController({
-          media
-        });
-        const cue = await loadFirstCue(ctrl);
+x`);
+        const h = build({ options: { selection: { id: "a" } } });
+        await h.setTracks([makeTrack()]);
+        await flushUntil(
+          () => {
+            var _a4, _b2, _c;
+            return ((_c = (_b2 = (_a4 = h.provider.lastTrack) == null ? void 0 : _a4.cues) == null ? void 0 : _b2.length) != null ? _c : 0) > 0;
+          }
+        );
+        const cue = (_b = (_a3 = h.provider.lastTrack) == null ? void 0 : _a3.cues) == null ? void 0 : _b[0];
         expect(cue.size).toBe(100);
-        ctrl.dispose();
       });
-      it("does not style non-VTTCue cues", async () => {
+      it("does not apply settings to non-VTTCue cues", async () => {
+        var _a3, _b;
         ;
         globalThis.VTTCue = void 0;
         globalThis.TextTrackCue = function TextTrackCue(start, end, text) {
@@ -41446,31 +42398,190 @@ first`);
           this.id = "";
           this.size = 100;
         };
-        const ctrl = new SidecarTextTrackController({
-          media,
-          cueStyle: data({ size: 80 })
-        });
-        const cue = await loadFirstCue(ctrl);
+        respondVtt(
+          `WEBVTT
+
+00:00:01.000 --> 00:00:02.000 size:80%
+ignored`
+        );
+        const h = build({ options: { selection: { id: "a" } } });
+        await h.setTracks([makeTrack()]);
+        await flushUntil(
+          () => {
+            var _a4, _b2, _c;
+            return ((_c = (_b2 = (_a4 = h.provider.lastTrack) == null ? void 0 : _a4.cues) == null ? void 0 : _b2.length) != null ? _c : 0) > 0;
+          }
+        );
+        const cue = (_b = (_a3 = h.provider.lastTrack) == null ? void 0 : _a3.cues) == null ? void 0 : _b[0];
         expect(cue.size).toBe(100);
-        ctrl.dispose();
         globalThis.TextTrackCue = void 0;
       });
     });
+    describe("text track renderer", () => {
+      function fakeRenderer() {
+        return {
+          setTextTrack: jasmine.createSpy(
+            "setTextTrack"
+          ),
+          setStyles: jasmine.createSpy(
+            "setStyles"
+          )
+        };
+      }
+      it("keeps the DOM track 'hidden' and hands it to the renderer", async () => {
+        var _a3;
+        respondVtt(`WEBVTT
+
+00:00:01.000 --> 00:00:02.000
+x`);
+        const renderer = fakeRenderer();
+        const h = build({
+          options: { selection: { id: "a" } },
+          textTrackRenderer: renderer
+        });
+        await h.setTracks([makeTrack()]);
+        await flushUntil(
+          () => {
+            var _a4, _b, _c;
+            return ((_c = (_b = (_a4 = h.provider.lastTrack) == null ? void 0 : _a4.cues) == null ? void 0 : _b.length) != null ? _c : 0) > 0;
+          }
+        );
+        expect((_a3 = h.provider.lastTrack) == null ? void 0 : _a3.mode).toBe("hidden");
+        expect(renderer.setTextTrack).toHaveBeenCalledWith(
+          h.provider.lastTrack
+        );
+      });
+      it("detaches the renderer when captions are turned off", async () => {
+        respondVtt(`WEBVTT
+
+00:00:01.000 --> 00:00:02.000
+x`);
+        const renderer = fakeRenderer();
+        const h = build({
+          options: { selection: { id: "a" } },
+          textTrackRenderer: renderer
+        });
+        await h.setTracks([makeTrack()]);
+        await flushUntil(
+          () => {
+            var _a3, _b, _c;
+            return ((_c = (_b = (_a3 = h.provider.lastTrack) == null ? void 0 : _a3.cues) == null ? void 0 : _b.length) != null ? _c : 0) > 0;
+          }
+        );
+        renderer.setTextTrack.calls.reset();
+        h.options$.value = { enabled: "off" };
+        expect(renderer.setTextTrack).toHaveBeenCalledWith(null);
+      });
+      it("forwards authored STYLE blocks to the renderer", async () => {
+        respondVtt(
+          `WEBVTT
+
+STYLE
+::cue { color: red }
+
+00:00:01.000 --> 00:00:02.000
+x`
+        );
+        const renderer = fakeRenderer();
+        const h = build({
+          options: { selection: { id: "a" } },
+          textTrackRenderer: renderer
+        });
+        await h.setTracks([makeTrack()]);
+        await flushUntil(() => renderer.setStyles.calls.count() > 0);
+        expect(renderer.setStyles).toHaveBeenCalledWith([
+          "::cue { color: red }"
+        ]);
+      });
+      it("ignores styles that arrive after the load is cancelled", async () => {
+        let resolveFetch = () => {
+        };
+        requester.request.and.returnValue(
+          new Promise((res) => {
+            resolveFetch = res;
+          })
+        );
+        const renderer = fakeRenderer();
+        const h = build({
+          options: { selection: { id: "a" } },
+          textTrackRenderer: renderer
+        });
+        await h.setTracks([makeTrack()]);
+        h.options$.value = { enabled: "off" };
+        renderer.setStyles.calls.reset();
+        resolveFetch(
+          new Response(
+            `WEBVTT
+
+STYLE
+::cue { color: red }
+
+00:00:01.000 --> 00:00:02.000
+x`
+          )
+        );
+        await flushPromises();
+        expect(renderer.setStyles).not.toHaveBeenCalled();
+      });
+      it("works with a renderer that cannot consume styles", async () => {
+        respondVtt(
+          `WEBVTT
+
+STYLE
+::cue { color: red }
+
+00:00:01.000 --> 00:00:02.000
+x`
+        );
+        const renderer = {
+          setTextTrack: jasmine.createSpy(
+            "setTextTrack"
+          )
+        };
+        const h = build({
+          options: { selection: { id: "a" } },
+          textTrackRenderer: renderer
+        });
+        await h.setTracks([makeTrack()]);
+        await flushUntil(
+          () => {
+            var _a3, _b, _c;
+            return ((_c = (_b = (_a3 = h.provider.lastTrack) == null ? void 0 : _a3.cues) == null ? void 0 : _b.length) != null ? _c : 0) > 0;
+          }
+        );
+        expect(renderer.setTextTrack).toHaveBeenCalled();
+      });
+      it("renders natively ('showing') when no renderer is injected", async () => {
+        var _a3;
+        respondVtt(`WEBVTT
+
+00:00:01.000 --> 00:00:02.000
+x`);
+        const h = build({ options: { selection: { id: "a" } } });
+        await h.setTracks([makeTrack()]);
+        await flushUntil(
+          () => {
+            var _a4, _b, _c;
+            return ((_c = (_b = (_a4 = h.provider.lastTrack) == null ? void 0 : _a4.cues) == null ? void 0 : _b.length) != null ? _c : 0) > 0;
+          }
+        );
+        expect((_a3 = h.provider.lastTrack) == null ? void 0 : _a3.mode).toBe("showing");
+      });
+    });
     it("preserves cue id when present", async () => {
-      var _a3;
+      var _a3, _b;
       respondVtt(`WEBVTT
 
 idA
 00:00:01.000 --> 00:00:02.000
 first`);
-      const t = makeTrack();
-      controller.setTextTracks([t]);
-      controller.setActiveTextTrack(t.id);
+      const h = build({ options: { selection: { id: "a" } } });
+      await h.setTracks([makeTrack()]);
       await flushUntil(() => {
-        var _a4, _b;
-        return ((_b = (_a4 = media.lastTrack) == null ? void 0 : _a4.cues.length) != null ? _b : 0) > 0;
+        var _a4, _b2, _c;
+        return ((_c = (_b2 = (_a4 = h.provider.lastTrack) == null ? void 0 : _a4.cues) == null ? void 0 : _b2.length) != null ? _c : 0) > 0;
       });
-      const cue = (_a3 = media.lastTrack) == null ? void 0 : _a3.cues[0];
+      const cue = (_b = (_a3 = h.provider.lastTrack) == null ? void 0 : _a3.cues) == null ? void 0 : _b[0];
       expect(cue.id).toBe("idA");
     });
     it("dedupes cues that appear in more than one segment", async () => {
@@ -41504,63 +42615,67 @@ only-b`;
         if (call === 2) return Promise.resolve(new Response(segA));
         return Promise.resolve(new Response(segB));
       });
-      const t = makeTrack({ uri: "https://x.test/sub.m3u8" });
-      controller.setTextTracks([t]);
-      controller.setActiveTextTrack(t.id);
+      const h = build({ options: { selection: { id: "a" } } });
+      await h.setTracks([makeTrack({ uri: "https://x.test/sub.m3u8" })]);
       await flushUntil(() => {
-        var _a4, _b2;
-        return ((_b2 = (_a4 = media.lastTrack) == null ? void 0 : _a4.cues.length) != null ? _b2 : 0) >= 3;
+        var _a4, _b2, _c;
+        return ((_c = (_b2 = (_a4 = h.provider.lastTrack) == null ? void 0 : _a4.cues) == null ? void 0 : _b2.length) != null ? _c : 0) >= 3;
       });
-      const texts = ((_b = (_a3 = media.lastTrack) == null ? void 0 : _a3.cues) != null ? _b : []).map(
+      const texts = ((_b = (_a3 = h.provider.lastTrack) == null ? void 0 : _a3.cues) != null ? _b : []).map(
         (c) => c.text
       );
       expect(texts).toEqual(["only-a", "shared", "only-b"]);
     });
-    it("selecting an unknown id is a no-op", () => {
+    it("selecting an unknown id renders nothing and stays inactive", async () => {
       const handler = jasmine.createSpy();
-      controller.on("activeTextTrackChange", handler);
-      controller.setTextTracks([makeTrack()]);
-      controller.setActiveTextTrack("unknown");
+      const h = build({ options: { selection: { id: "unknown" } } });
+      h.controller.on("activeTextTrackChange", handler);
+      await h.setTracks([makeTrack()]);
       expect(handler).not.toHaveBeenCalled();
-      expect(controller.activeTextTrack).toBeNull();
+      expect(h.controller.activeTextTrack).toBeNull();
+      expect(h.provider.getOrCreate).not.toHaveBeenCalled();
     });
-    it("selecting null clears the current active track", () => {
+    it("disabling clears the current active track", async () => {
+      var _a3;
       respondVtt(`WEBVTT
 `);
-      const t = makeTrack();
-      controller.setTextTracks([t]);
-      controller.setActiveTextTrack(t.id);
-      controller.setActiveTextTrack(null);
-      expect(controller.activeTextTrack).toBeNull();
+      const h = build({ options: { selection: { id: "a" } } });
+      await h.setTracks([makeTrack()]);
+      expect((_a3 = h.controller.activeTextTrack) == null ? void 0 : _a3.id).toBe("a");
+      h.options$.value = { enabled: "off" };
+      expect(h.controller.activeTextTrack).toBeNull();
     });
-    it("clears active selection when its track is removed", () => {
+    it("clears active selection when its track is removed", async () => {
+      var _a3;
       respondVtt(`WEBVTT
 `);
+      const h = build({ options: { selection: { id: "a" } } });
       const t1 = makeTrack({ id: "a" });
       const t2 = makeTrack({ id: "b", uri: "https://x.test/b.vtt" });
-      controller.setTextTracks([t1, t2]);
-      controller.setActiveTextTrack("a");
-      controller.setTextTracks([t2]);
-      expect(controller.activeTextTrack).toBeNull();
+      await h.setTracks([t1, t2]);
+      expect((_a3 = h.controller.activeTextTrack) == null ? void 0 : _a3.id).toBe("a");
+      await h.setTracks([t2]);
+      expect(h.controller.activeTextTrack).toBeNull();
     });
-    it("keeps active selection when track list updates with same active", () => {
-      var _a3;
+    it("keeps the active selection when the list updates with it still present", async () => {
+      var _a3, _b;
       respondVtt(`WEBVTT
 `);
+      const h = build({ options: { selection: { id: "a" } } });
       const t1 = makeTrack({ id: "a" });
       const t2 = makeTrack({ id: "b" });
-      controller.setTextTracks([t1]);
-      controller.setActiveTextTrack("a");
-      controller.setTextTracks([t1, t2]);
-      expect((_a3 = controller.activeTextTrack) == null ? void 0 : _a3.id).toBe("a");
+      await h.setTracks([t1]);
+      expect((_a3 = h.controller.activeTextTrack) == null ? void 0 : _a3.id).toBe("a");
+      await h.setTracks([t1, t2]);
+      expect((_b = h.controller.activeTextTrack) == null ? void 0 : _b.id).toBe("a");
     });
     it("emits textTrackError on fetch failure", async () => {
       requester.request.and.rejectWith(new Error("boom"));
+      const h = build({ options: { selection: { id: "a" } } });
       const onError = jasmine.createSpy("textTrackError");
-      controller.on("textTrackError", onError);
+      h.controller.on("textTrackError", onError);
       const t = makeTrack();
-      controller.setTextTracks([t]);
-      controller.setActiveTextTrack(t.id);
+      await h.setTracks([t]);
       await flushUntil(() => onError.calls.count() > 0);
       expect(onError).toHaveBeenCalledTimes(1);
       const arg = onError.calls.mostRecent().args[0];
@@ -41569,17 +42684,15 @@ only-b`;
     });
     it("wraps non-Error rejections", async () => {
       requester.request.and.rejectWith("plain");
+      const h = build({ options: { selection: { id: "a" } } });
       const onError = jasmine.createSpy();
-      controller.on("textTrackError", onError);
-      const t = makeTrack();
-      controller.setTextTracks([t]);
-      controller.setActiveTextTrack(t.id);
+      h.controller.on("textTrackError", onError);
+      await h.setTracks([makeTrack()]);
       await flushUntil(() => onError.calls.count() > 0);
-      const arg = onError.calls.mostRecent().args[0];
-      expect(arg.error.message).toBe("plain");
+      expect(onError.calls.mostRecent().args[0].error.message).toBe("plain");
     });
     it("drops cues that arrive after the load has been cancelled", async () => {
-      var _a3, _b;
+      var _a3;
       let resolveFetch = () => {
       };
       requester.request.and.returnValue(
@@ -41587,10 +42700,10 @@ only-b`;
           resolveFetch = res;
         })
       );
-      const t = makeTrack();
-      controller.setTextTracks([t]);
-      controller.setActiveTextTrack(t.id);
-      controller.setActiveTextTrack(null);
+      const h = build({ options: { selection: { id: "a" } } });
+      await h.setTracks([makeTrack()]);
+      const track2 = h.provider.lastTrack;
+      h.options$.value = { enabled: "off" };
       resolveFetch(
         new Response(`WEBVTT
 
@@ -41598,9 +42711,9 @@ only-b`;
 post`)
       );
       await flushPromises();
-      expect((_b = (_a3 = media.lastTrack) == null ? void 0 : _a3.cues.length) != null ? _b : 0).toBe(0);
+      expect((_a3 = track2 == null ? void 0 : track2.storedCues.length) != null ? _a3 : 0).toBe(0);
     });
-    it("does not emit textTrackError when load is cancelled by switching tracks", async () => {
+    it("does not emit textTrackError when a load is cancelled by switching", async () => {
       let rejectFirst = () => {
       };
       let callCount = 0;
@@ -41611,17 +42724,16 @@ post`)
           else rej(new Error("unused"));
         })
       );
+      const h = build({ options: { selection: { id: "a" } } });
       const onError = jasmine.createSpy("textTrackError");
-      controller.on("textTrackError", onError);
-      const t = makeTrack();
-      controller.setTextTracks([t]);
-      controller.setActiveTextTrack(t.id);
-      controller.setActiveTextTrack(null);
+      h.controller.on("textTrackError", onError);
+      await h.setTracks([makeTrack()]);
+      h.options$.value = { enabled: "off" };
       rejectFirst(new Error("would-be error"));
       await flushPromises();
       expect(onError).not.toHaveBeenCalled();
     });
-    it("switching active track clears the previous DOM cues", async () => {
+    it("switching language reuses the per-rendition track and swaps its cues", async () => {
       var _a3;
       let call = 0;
       requester.request.and.callFake(() => {
@@ -41638,33 +42750,65 @@ two`
           )
         );
       });
-      const a = makeTrack({ id: "a" });
-      const b = makeTrack({
-        id: "b",
-        uri: "https://x.test/b.vtt",
-        label: "Two"
-      });
-      controller.setTextTracks([a, b]);
-      controller.setActiveTextTrack("a");
+      const en = makeTrack({ id: "en", language: "en", label: "English" });
+      const es = makeTrack({
+        id: "es",
+        language: "es",
+        label: "Espanol",
+        uri: "https://x.test/es.vtt"
+      });
+      const h = build({ options: { selection: { id: "en" } } });
+      await h.setTracks([en, es]);
       await flushUntil(() => {
-        var _a4, _b;
-        return ((_b = (_a4 = media.lastTrack) == null ? void 0 : _a4.cues.length) != null ? _b : 0) > 0;
+        var _a4, _b, _c;
+        return ((_c = (_b = (_a4 = h.provider.lastTrack) == null ? void 0 : _a4.cues) == null ? void 0 : _b.length) != null ? _c : 0) > 0;
       });
-      const firstTrack = media.lastTrack;
-      expect(firstTrack == null ? void 0 : firstTrack.cues.length).toBe(1);
-      controller.setActiveTextTrack("b");
-      expect(firstTrack == null ? void 0 : firstTrack.cues.length).toBe(0);
-      expect(firstTrack == null ? void 0 : firstTrack.mode).toBe("disabled");
+      const enTrack = h.provider.lastTrack;
+      h.select({ id: "es" });
+      expect(enTrack == null ? void 0 : enTrack.storedCues.length).toBe(0);
+      expect(enTrack == null ? void 0 : enTrack.mode).toBe("disabled");
       await flushUntil(
         () => {
-          var _a4, _b;
-          return media.lastTrack !== firstTrack && ((_b = (_a4 = media.lastTrack) == null ? void 0 : _a4.cues.length) != null ? _b : 0) > 0;
+          var _a4, _b, _c;
+          return h.provider.lastTrack !== enTrack && ((_c = (_b = (_a4 = h.provider.lastTrack) == null ? void 0 : _a4.cues) == null ? void 0 : _b.length) != null ? _c : 0) > 0;
         }
       );
-      expect((_a3 = media.lastTrack) == null ? void 0 : _a3.cues.length).toBe(1);
+      expect(h.provider.lastTrack).not.toBe(enTrack);
+      expect((_a3 = h.provider.lastTrack) == null ? void 0 : _a3.language).toBe("es");
+      expect(h.provider.showingWithCues().length).toBe(1);
     });
-    it("suspend clears the DOM track and resume rebuilds it, keeping the selection", async () => {
-      var _a3, _b, _c;
+    it("cycling languages never accumulates or double-shows cues", async () => {
+      requester.request.and.callFake(
+        () => Promise.resolve(
+          new Response(`WEBVTT
+
+00:00:01.000 --> 00:00:02.000
+cue`)
+        )
+      );
+      const langs = ["en", "es", "ja"].map(
+        (language) => makeTrack({
+          id: language,
+          language,
+          uri: `https://x.test/${language}.vtt`
+        })
+      );
+      const h = build({ options: { selection: { id: "en" } } });
+      await h.setTracks(langs);
+      for (const id of ["en", "es", "ja", "en"]) {
+        h.select({ id });
+        await flushUntil(
+          () => {
+            var _a3, _b, _c;
+            return ((_c = (_b = (_a3 = h.provider.lastTrack) == null ? void 0 : _a3.cues) == null ? void 0 : _b.length) != null ? _c : 0) > 0;
+          }
+        );
+        expect(h.provider.showingWithCues().length).withContext(`after selecting ${id}`).toBe(1);
+      }
+      expect(h.provider.created.length).toBe(3);
+    });
+    it("deactivate hides the DOM track and activate rebuilds it, keeping the selection", async () => {
+      var _a3, _b, _c, _d;
       requester.request.and.callFake(
         () => Promise.resolve(
           new Response(`WEBVTT
@@ -41673,96 +42817,94 @@ two`
 one`)
         )
       );
-      const t = makeTrack();
-      controller.setTextTracks([t]);
-      controller.setActiveTextTrack(t.id);
+      const h = build({ options: { selection: { id: "a" } } });
+      await h.setTracks([makeTrack()]);
       await flushUntil(() => {
-        var _a4, _b2;
-        return ((_b2 = (_a4 = media.lastTrack) == null ? void 0 : _a4.cues.length) != null ? _b2 : 0) > 0;
-      });
-      const first2 = media.lastTrack;
-      expect(first2 == null ? void 0 : first2.mode).toBe("showing");
-      controller.suspend();
-      expect(first2 == null ? void 0 : first2.cues.length).toBe(0);
-      expect(first2 == null ? void 0 : first2.mode).toBe("disabled");
-      expect((_a3 = controller.activeTextTrack) == null ? void 0 : _a3.id).toBe(t.id);
-      controller.resume();
-      await flushUntil(
-        () => {
-          var _a4, _b2;
-          return media.lastTrack !== first2 && ((_b2 = (_a4 = media.lastTrack) == null ? void 0 : _a4.cues.length) != null ? _b2 : 0) > 0;
-        }
-      );
-      expect((_b = media.lastTrack) == null ? void 0 : _b.mode).toBe("showing");
-      expect((_c = media.lastTrack) == null ? void 0 : _c.cues.length).toBe(1);
+        var _a4, _b2, _c2;
+        return ((_c2 = (_b2 = (_a4 = h.provider.lastTrack) == null ? void 0 : _a4.cues) == null ? void 0 : _b2.length) != null ? _c2 : 0) > 0;
+      });
+      const track2 = h.provider.lastTrack;
+      expect(track2 == null ? void 0 : track2.mode).toBe("showing");
+      expect(h.controller.active).toBeTrue();
+      h.controller.deactivate();
+      expect(h.controller.active).toBeFalse();
+      expect(track2 == null ? void 0 : track2.storedCues.length).toBe(0);
+      expect(track2 == null ? void 0 : track2.mode).toBe("disabled");
+      expect((_a3 = h.controller.activeTextTrack) == null ? void 0 : _a3.id).toBe("a");
+      h.controller.activate();
+      expect(h.controller.active).toBeTrue();
+      await flushUntil(() => {
+        var _a4, _b2, _c2;
+        return ((_c2 = (_b2 = (_a4 = h.provider.lastTrack) == null ? void 0 : _a4.cues) == null ? void 0 : _b2.length) != null ? _c2 : 0) > 0;
+      });
+      expect((_b = h.provider.lastTrack) == null ? void 0 : _b.mode).toBe("showing");
+      expect((_d = (_c = h.provider.lastTrack) == null ? void 0 : _c.cues) == null ? void 0 : _d.length).toBe(1);
     });
-    it("resume is a no-op when nothing is active", () => {
-      controller.resume();
-      expect(media.addTextTrack).not.toHaveBeenCalled();
+    it("activate is a no-op when nothing is selected", () => {
+      const h = build();
+      h.controller.activate();
+      expect(h.provider.getOrCreate).not.toHaveBeenCalled();
     });
-    it("resume is a no-op when already rendering", async () => {
+    it("activate is a no-op when already rendering", async () => {
       respondVtt(`WEBVTT
 
 00:00:01.000 --> 00:00:02.000
 one`);
-      const t = makeTrack();
-      controller.setTextTracks([t]);
-      controller.setActiveTextTrack(t.id);
+      const h = build({ options: { selection: { id: "a" } } });
+      await h.setTracks([makeTrack()]);
       await flushUntil(() => {
-        var _a3, _b;
-        return ((_b = (_a3 = media.lastTrack) == null ? void 0 : _a3.cues.length) != null ? _b : 0) > 0;
+        var _a3, _b, _c;
+        return ((_c = (_b = (_a3 = h.provider.lastTrack) == null ? void 0 : _a3.cues) == null ? void 0 : _b.length) != null ? _c : 0) > 0;
       });
-      media.addTextTrack.calls.reset();
-      controller.resume();
-      expect(media.addTextTrack).not.toHaveBeenCalled();
+      h.provider.getOrCreate.calls.reset();
+      h.controller.activate();
+      expect(h.provider.getOrCreate).not.toHaveBeenCalled();
     });
-    it("skips DOM cue creation when no VTTCue ctor is available", async () => {
+    it("does not render while deactivated even as the selection resolves", async () => {
       var _a3;
-      ;
-      globalThis.VTTCue = void 0;
       respondVtt(`WEBVTT
 
 00:00:01.000 --> 00:00:02.000
-ignored`);
-      const t = makeTrack();
-      controller.setTextTracks([t]);
-      controller.setActiveTextTrack(t.id);
-      await flushPromises();
-      expect((_a3 = media.lastTrack) == null ? void 0 : _a3.cues.length).toBe(0);
+one`);
+      const h = build({
+        options: { selection: { id: "a" } },
+        activate: false
+      });
+      h.controller.deactivate();
+      await h.setTracks([makeTrack()]);
+      expect((_a3 = h.controller.activeTextTrack) == null ? void 0 : _a3.id).toBe("a");
+      expect(h.provider.getOrCreate).not.toHaveBeenCalled();
     });
-    it("can run without a DOM media element", async () => {
-      const headless = new SidecarTextTrackController({ media: null });
-      const t = makeTrack();
+    it("skips DOM cue creation when no VTTCue ctor is available", async () => {
+      var _a3, _b, _c;
+      ;
+      globalThis.VTTCue = void 0;
       respondVtt(`WEBVTT
 
 00:00:01.000 --> 00:00:02.000
-x`);
-      headless.setTextTracks([t]);
-      headless.setActiveTextTrack(t.id);
+ignored`);
+      const h = build({ options: { selection: { id: "a" } } });
+      await h.setTracks([makeTrack()]);
       await flushPromises();
-      expect(headless.activeTextTrack).toBe(t);
-      headless.dispose();
+      expect((_c = (_b = (_a3 = h.provider.lastTrack) == null ? void 0 : _a3.cues) == null ? void 0 : _b.length) != null ? _c : 0).toBe(0);
     });
     it("forwards requestInit when configured", async () => {
-      const customController = new SidecarTextTrackController({
-        media,
-        requestInit: { credentials: "include" }
-      });
       respondVtt(`WEBVTT
 `);
+      const h = build({
+        options: { selection: { id: "a" } },
+        requestInit: { credentials: "include" }
+      });
       const t = makeTrack();
-      customController.setTextTracks([t]);
-      customController.setActiveTextTrack(t.id);
+      await h.setTracks([t]);
       await flushPromises();
       expect(requester.request).toHaveBeenCalledWith(
         t.uri,
         jasmine.objectContaining({ credentials: "include" }),
         jasmine.any(Object)
       );
-      customController.dispose();
     });
     it("drives HLS caption segment order from the media playhead", async () => {
-      media.currentTime = 12;
       const playlistBody = `#EXTM3U
 #EXT-X-TARGETDURATION:5
 #EXTINF:5.0,
@@ -41789,14 +42931,13 @@ d.vtt
 ${path}`)
         );
       });
-      const t = makeTrack({ uri: "https://x.test/sub.m3u8" });
-      controller.setTextTracks([t]);
-      controller.setActiveTextTrack(t.id);
+      const h = build({ options: { selection: { id: "a" } } });
+      h.playback.currentTime = 12;
+      await h.setTracks([makeTrack({ uri: "https://x.test/sub.m3u8" })]);
       await flushUntil(() => fetched.length > 0);
       expect(fetched[0]).toBe("c.vtt");
     });
     it("dispose aborts in-flight loads and clears state", async () => {
-      var _a3, _b;
       let resolveResponse = () => {
       };
       requester.request.and.callFake(
@@ -41804,11 +42945,11 @@ ${path}`)
           resolveResponse = res;
         })
       );
-      const t = makeTrack();
-      controller.setTextTracks([t]);
-      controller.setActiveTextTrack(t.id);
-      expect(media.lastTrack).not.toBeNull();
-      controller.dispose();
+      const h = build({ options: { selection: { id: "a" } } });
+      await h.setTracks([makeTrack()]);
+      const track2 = h.provider.lastTrack;
+      expect(track2).not.toBeNull();
+      h.controller.dispose();
       resolveResponse(
         new Response(`WEBVTT
 
@@ -41816,103 +42957,42 @@ ${path}`)
 post`)
       );
       await flushPromises();
-      expect((_a3 = media.lastTrack) == null ? void 0 : _a3.mode).toBe("disabled");
-      expect((_b = media.lastTrack) == null ? void 0 : _b.cues.length).toBe(0);
-      expect(controller.activeTextTrack).toBeNull();
-      expect(controller.textTracks).toEqual([]);
+      expect(track2 == null ? void 0 : track2.mode).toBe("disabled");
+      expect(track2 == null ? void 0 : track2.storedCues.length).toBe(0);
+      expect(h.controller.activeTextTrack).toBeNull();
+      expect(h.controller.textTracks).toEqual([]);
     });
-    it("handles tracks with null language", async () => {
+    it("creates the DOM track with an undefined language for null-language tracks", async () => {
       respondVtt(`WEBVTT
 `);
-      const t = makeTrack({ language: null });
-      controller.setTextTracks([t]);
-      controller.setActiveTextTrack(t.id);
+      const h = build({ options: { selection: { id: "a" } } });
+      await h.setTracks([makeTrack({ language: null })]);
       await flushPromises();
-      expect(media.addTextTrack).toHaveBeenCalledWith(
+      expect(h.provider.getOrCreate).toHaveBeenCalledWith(
         "subtitles",
         "English",
         void 0
       );
     });
-    it("setTextTracks with same array reference is a no-op", () => {
+    it("setting the same resolved track list twice emits textTracksChange once", async () => {
       const handler = jasmine.createSpy();
-      controller.on("textTracksChange", handler);
+      const h = build();
+      h.controller.on("textTracksChange", handler);
       const list = [makeTrack()];
-      controller.setTextTracks(list);
-      controller.setTextTracks(list);
+      await h.setTracks(list);
+      await h.setTracks([makeTrack()]);
       expect(handler).toHaveBeenCalledTimes(1);
     });
-    it("clearing active when none is active is a no-op", () => {
-      const handler = jasmine.createSpy();
-      controller.on("activeTextTrackChange", handler);
-      controller.setActiveTextTrack(null);
-      expect(handler).not.toHaveBeenCalled();
-    });
-    it("selecting same id is a no-op", () => {
+    it("re-selecting the same id is a no-op", async () => {
       respondVtt(`WEBVTT
 `);
-      const t = makeTrack();
+      const h = build({ options: { selection: { id: "a" } } });
+      await h.setTracks([makeTrack()]);
       const handler = jasmine.createSpy();
-      controller.setTextTracks([t]);
-      controller.setActiveTextTrack(t.id);
-      controller.on("activeTextTrackChange", handler);
-      controller.setActiveTextTrack(t.id);
+      h.controller.on("activeTextTrackChange", handler);
+      h.select({ id: "a" });
       expect(handler).not.toHaveBeenCalled();
     });
-    describe("preferredTextLanguage", () => {
-      const en = makeTrack({ id: "en", language: "en", label: "English" });
-      const es = makeTrack({ id: "es", language: "es", label: "Espanol" });
-      let preferredTextLanguage;
-      let prefController;
-      beforeEach(() => {
-        preferredTextLanguage = data(
-          null
-        );
-        prefController = new SidecarTextTrackController({
-          media: null,
-          preferredTextLanguage
-        });
-      });
-      afterEach(() => prefController.dispose());
-      it("selects the matching track when the preference changes", () => {
-        var _a3;
-        prefController.setTextTracks([en, es]);
-        expect(prefController.activeTextTrack).toBeNull();
-        preferredTextLanguage.value = "es";
-        expect((_a3 = prefController.activeTextTrack) == null ? void 0 : _a3.id).toBe("es");
-      });
-      it("clears the selection when the preference is set back to null", () => {
-        var _a3;
-        prefController.setTextTracks([en, es]);
-        preferredTextLanguage.value = "es";
-        expect((_a3 = prefController.activeTextTrack) == null ? void 0 : _a3.id).toBe("es");
-        preferredTextLanguage.value = null;
-        expect(prefController.activeTextTrack).toBeNull();
-      });
-      it("re-applies the preference when the track list changes", () => {
-        var _a3;
-        preferredTextLanguage.value = "es";
-        expect(prefController.activeTextTrack).toBeNull();
-        prefController.setTextTracks([en, es]);
-        expect((_a3 = prefController.activeTextTrack) == null ? void 0 : _a3.id).toBe("es");
-      });
-      it("a preferred language wins over forced auto-selection", () => {
-        var _a3;
-        preferredTextLanguage.value = "es";
-        prefController.setTextTracks([
-          makeTrack({ id: "en-forced", language: "en", forced: true }),
-          es
-        ]);
-        expect((_a3 = prefController.activeTextTrack) == null ? void 0 : _a3.id).toBe("es");
-      });
-      it("leaves forced auto-selection intact while no preference is set", () => {
-        var _a3;
-        prefController.setTextTracks([
-          makeTrack({ id: "forced", forced: true })
-        ]);
-        expect((_a3 = prefController.activeTextTrack) == null ? void 0 : _a3.id).toBe("forced");
-      });
-    });
   });
 
   // test/unit/text/SidecarTextTrackLoader.test.ts
@@ -41996,6 +43076,39 @@ from-segment`;
       await loadWebVttCues("https://x.test/sub.txt", options);
       expect(batches.flat().map((c) => c.text)).toEqual(["from-segment"]);
     });
+    it("forwards STYLE blocks parsed from a segment via onStyles", async () => {
+      const playlistText = `#EXTM3U
+#EXT-X-TARGETDURATION:10
+#EXTINF:10.0,
+seg.vtt
+#EXT-X-ENDLIST
+`;
+      const segmentText = `WEBVTT
+
+STYLE
+::cue { color: red }
+
+00:00:01.000 --> 00:00:02.000
+from-segment`;
+      let call = 0;
+      requester.request.and.callFake(() => {
+        call++;
+        if (call === 1) {
+          return respondText(
+            playlistText,
+            "application/vnd.apple.mpegurl",
+            "https://x.test/sub.m3u8"
+          );
+        }
+        return respondText(segmentText, "text/vtt");
+      });
+      const styleBatches = [];
+      const { options } = streamingOpts({
+        onStyles: (styles) => styleBatches.push([...styles])
+      });
+      await loadWebVttCues("https://x.test/sub.m3u8", options);
+      expect(styleBatches).toEqual([["::cue { color: red }"]]);
+    });
     it("falls back to the request URI when response.url is empty (body sniffed)", async () => {
       const playlistText = `#EXTM3U
 #EXT-X-VERSION:3
@@ -43370,13 +44483,8 @@ x`);
       });
       const deps = createContainer(factories).dependencies;
       const options = dashFactoryDeps.options.value;
-      expect(deps.preferredAudioLanguage.value).toBe(
-        options.preferredAudioLanguage
-      );
+      expect(deps.audio.value).toBe(options.audio);
       expect(deps.allowedContentTypes.value).toBe(options.allowedContentTypes);
-      expect(deps.preferDescriptiveAudio.value).toBe(
-        options.preferDescriptiveAudio
-      );
       expect(deps.abr.value).toBe(options.abr);
     });
     it("provides streaming options to createContentStreamFactories", () => {
@@ -46840,9 +47948,8 @@ x`);
         drmController,
         mediaTimeline: data(Promise.resolve(timeline)),
         options: data({
-          preferredAudioLanguage: null,
-          codecOverrides: {},
-          preferDescriptiveAudio: false
+          audio: { selection: { language: null, descriptive: false } },
+          codecOverrides: {}
         })
       }).value;
       const audio = result.periods[0].qualities.filter(
@@ -47336,13 +48443,8 @@ x`);
       });
       const deps = createContainer(factories).dependencies;
       const options = hlsFactoryDeps.options.value;
-      expect(deps.preferredAudioLanguage.value).toBe(
-        options.preferredAudioLanguage
-      );
+      expect(deps.audio.value).toBe(options.audio);
       expect(deps.allowedContentTypes.value).toBe(options.allowedContentTypes);
-      expect(deps.preferDescriptiveAudio.value).toBe(
-        options.preferDescriptiveAudio
-      );
       expect(deps.abr.value).toBe(options.abr);
     });
     it("exposes the shared adController without owning it", () => {
@@ -51686,6 +52788,8 @@ x`);
         objectContaining25({
           patchedMedia: any30(Object),
           media: any30(Object),
+          textTrackProvider: any30(Object),
+          textTrackRenderer: null,
           playbackController: any30(PlaybackControllerImpl),
           playbackSource: any30(PlaybackSourceImpl),
           loudnessNormalizationController: any30(
@@ -52839,228 +53943,145 @@ x`);
     afterEach(() => {
       player.dispose();
     });
+    function info(overrides = {}) {
+      return __spreadValues({
+        id: "t1",
+        kind: "subtitles",
+        language: "en",
+        label: "A",
+        default: false,
+        forced: false,
+        characteristics: [],
+        uri: "a.vtt",
+        mimeType: "text/vtt"
+      }, overrides);
+    }
     function makeTrackWithController() {
       const track2 = new MockTrack();
-      const controller = new SidecarTextTrackController({ media: null });
+      const controller = new MockTextTrackController();
       track2.textTrackController = controller;
       return { track: track2, controller };
     }
+    function setTracks(controller, tracks) {
+      const previous = controller.textTracks;
+      controller.textTracks = tracks;
+      controller.dispatch("textTracksChange", { previous, current: tracks });
+    }
+    function setActive(controller, current) {
+      const previous = controller.activeTextTrack;
+      controller.activeTextTrack = current;
+      controller.dispatch("activeTextTrackChange", { previous, current });
+    }
+    function activate(track2) {
+      deps.trackController.activeTrack = track2;
+      deps.trackController.dispatch("trackActivated", { track: track2 });
+    }
     it("returns empty defaults when no current track", () => {
       expect(player.textTracks).toEqual([]);
       expect(player.activeTextTrack).toBeNull();
     });
     it("returns text tracks from the current track", () => {
       const { track: track2, controller } = makeTrackWithController();
-      controller.setTextTracks([
-        {
-          id: "t1",
-          kind: "subtitles",
-          language: "en",
-          label: "English",
-          default: false,
-          forced: false,
-          characteristics: [],
-          uri: "https://x/sub.vtt",
-          mimeType: "text/vtt"
-        }
-      ]);
-      deps.trackController.activeTrack = track2;
-      deps.trackController.dispatch("trackActivated", { track: track2 });
+      controller.textTracks = [info()];
+      activate(track2);
       expect(player.textTracks.length).toBe(1);
     });
-    it("selects an active text track via setActiveTextTrack", () => {
+    it("reflects the current track controller active selection", () => {
       var _a3;
       const { track: track2, controller } = makeTrackWithController();
-      controller.setTextTracks([
-        {
-          id: "t1",
-          kind: "subtitles",
-          language: "en",
-          label: "English",
-          default: false,
-          forced: false,
-          characteristics: [],
-          uri: "https://x/sub.vtt",
-          mimeType: "text/vtt"
-        }
-      ]);
-      deps.trackController.activeTrack = track2;
-      deps.trackController.dispatch("trackActivated", { track: track2 });
-      player.setActiveTextTrack("t1");
+      controller.textTracks = [info()];
+      activate(track2);
+      setActive(controller, info());
       expect((_a3 = player.activeTextTrack) == null ? void 0 : _a3.id).toBe("t1");
-      player.setActiveTextTrack(null);
+      setActive(controller, null);
       expect(player.activeTextTrack).toBeNull();
     });
-    it("ignores setActiveTextTrack when current track has no controller", () => {
+    it("reports null active when the current track has no controller", () => {
       const track2 = new MockTrack();
-      deps.trackController.activeTrack = track2;
-      deps.trackController.dispatch("trackActivated", { track: track2 });
-      player.setActiveTextTrack("anything");
+      activate(track2);
       expect(player.activeTextTrack).toBeNull();
     });
     it("redispatches textTracksChange events from the active controller", () => {
       const { track: track2, controller } = makeTrackWithController();
-      deps.trackController.activeTrack = track2;
-      deps.trackController.dispatch("trackActivated", { track: track2 });
+      activate(track2);
       const spy = createEventSpy(player, "textTracksChange");
-      controller.setTextTracks([
-        {
-          id: "t1",
-          kind: "subtitles",
-          language: null,
-          label: "A",
-          default: false,
-          forced: false,
-          characteristics: [],
-          uri: "a.vtt",
-          mimeType: "text/vtt"
-        }
-      ]);
+      setTracks(controller, [info({ language: null })]);
       expect(spy).toHaveBeenCalled();
     });
-    it("fires textTracksChange when switching to a track with different list", () => {
+    it("fires textTracksChange when switching to a track with a different list", () => {
       const a = makeTrackWithController();
       const b = makeTrackWithController();
-      const trackInfoA = {
-        id: "t1",
-        kind: "subtitles",
-        language: "en",
-        label: "A",
-        default: false,
-        forced: false,
-        characteristics: [],
-        uri: "a.vtt",
-        mimeType: "text/vtt"
-      };
-      const trackInfoB = {
-        id: "t2",
-        kind: "subtitles",
-        language: "fr",
-        label: "B",
-        default: false,
-        forced: false,
-        characteristics: [],
-        uri: "b.vtt",
-        mimeType: "text/vtt"
-      };
-      a.controller.setTextTracks([trackInfoA]);
-      b.controller.setTextTracks([trackInfoB]);
-      deps.trackController.activeTrack = a.track;
-      deps.trackController.dispatch("trackActivated", { track: a.track });
+      setTracks(a.controller, [info({ id: "t1", language: "en" })]);
+      setTracks(b.controller, [
+        info({ id: "t2", language: "fr", label: "B" })
+      ]);
+      activate(a.track);
       const spy = createEventSpy(player, "textTracksChange");
-      deps.trackController.activeTrack = b.track;
-      deps.trackController.dispatch("trackActivated", { track: b.track });
+      activate(b.track);
       expect(spy).toHaveBeenCalled();
     });
-    it("deactivates the previous track's captions on trackDeactivated", () => {
-      var _a3;
-      const a = makeTrackWithController();
-      a.controller.setTextTracks([
-        {
-          id: "t1",
-          kind: "subtitles",
-          language: "en",
-          label: "A",
-          default: false,
-          forced: false,
-          characteristics: [],
-          uri: "a.vtt",
-          mimeType: "text/vtt"
-        }
-      ]);
-      deps.trackController.activeTrack = a.track;
-      deps.trackController.dispatch("trackActivated", { track: a.track });
-      a.controller.setActiveTextTrack("t1");
-      expect((_a3 = a.controller.activeTextTrack) == null ? void 0 : _a3.id).toBe("t1");
-      deps.trackController.activeTrack = null;
-      deps.trackController.dispatch("trackDeactivated", { track: a.track });
-      expect(a.controller.activeTextTrack).toBeNull();
-    });
     it("fires activeTextTrackChange when switching tracks", () => {
       const a = makeTrackWithController();
       const b = makeTrackWithController();
-      a.controller.setTextTracks([
-        {
-          id: "t1",
-          kind: "subtitles",
-          language: "en",
-          label: "A",
-          default: false,
-          forced: false,
-          characteristics: [],
-          uri: "a.vtt",
-          mimeType: "text/vtt"
-        }
-      ]);
-      a.controller.setActiveTextTrack("t1");
-      deps.trackController.activeTrack = a.track;
-      deps.trackController.dispatch("trackActivated", { track: a.track });
+      setTracks(a.controller, [info({ id: "t1" })]);
+      setActive(a.controller, info({ id: "t1" }));
+      activate(a.track);
       const spy = createEventSpy(player, "activeTextTrackChange");
-      deps.trackController.activeTrack = b.track;
-      deps.trackController.dispatch("trackActivated", { track: b.track });
+      activate(b.track);
       expect(spy).toHaveBeenCalled();
     });
     it("re-announces the content caption after an ad break so it does not read as off", () => {
-      var _a3, _b, _c;
+      var _a3, _b;
       const content = makeTrackWithController();
-      content.controller.setTextTracks([
-        {
-          id: "c-forced",
-          kind: "subtitles",
-          language: "en",
-          label: "English (Forced)",
-          default: true,
-          forced: true,
-          characteristics: [],
-          uri: "c.vtt",
-          mimeType: "text/vtt"
-        }
-      ]);
-      expect((_a3 = content.controller.activeTextTrack) == null ? void 0 : _a3.id).toBe("c-forced");
-      const ad = makeTrackWithController();
-      ad.controller.setTextTracks([
-        {
-          id: "ad-cc",
-          kind: "subtitles",
-          language: "en",
-          label: "English",
-          default: false,
-          forced: false,
-          characteristics: [],
-          uri: "ad.vtt",
-          mimeType: "text/vtt"
-        }
-      ]);
-      deps.trackController.activeTrack = content.track;
-      deps.trackController.dispatch("trackActivated", {
-        track: content.track
+      const contentForced = info({
+        id: "c-forced",
+        label: "English (Forced)",
+        default: true,
+        forced: true,
+        uri: "c.vtt"
       });
+      setTracks(content.controller, [contentForced]);
+      setActive(content.controller, contentForced);
+      const ad = makeTrackWithController();
+      const adCc = info({ id: "ad-cc", label: "English", uri: "ad.vtt" });
+      setTracks(ad.controller, [adCc]);
+      activate(content.track);
       deps.adController.currentAdBreak = { placement: "midroll" };
-      content.controller.suspend();
-      deps.trackController.activeTrack = ad.track;
-      deps.trackController.dispatch("trackActivated", { track: ad.track });
-      player.setActiveTextTrack("ad-cc");
-      expect((_b = player.activeTextTrack) == null ? void 0 : _b.id).toBe("ad-cc");
+      content.controller.deactivate();
+      activate(ad.track);
+      setActive(ad.controller, adCc);
+      expect((_a3 = player.activeTextTrack) == null ? void 0 : _a3.id).toBe("ad-cc");
       deps.adController.currentAdBreak = null;
       const spy = createEventSpy(player, "activeTextTrackChange");
-      deps.trackController.activeTrack = content.track;
-      content.controller.resume();
-      deps.trackController.dispatch("trackActivated", {
-        track: content.track
-      });
-      expect((_c = player.activeTextTrack) == null ? void 0 : _c.id).toBe("c-forced");
+      content.controller.activate();
+      activate(content.track);
+      expect((_b = player.activeTextTrack) == null ? void 0 : _b.id).toBe("c-forced");
       expect(spy).toHaveBeenCalled();
       const lastCurrent = spy.calls.mostRecent().args[0].current;
       expect(lastCurrent == null ? void 0 : lastCurrent.id).toBe("c-forced");
     });
+    it("announces empty tracks and null active when the track is torn down", () => {
+      const a = makeTrackWithController();
+      const t = info({ id: "t1" });
+      setTracks(a.controller, [t]);
+      setActive(a.controller, t);
+      activate(a.track);
+      const tracksSpy = createEventSpy(player, "textTracksChange");
+      const activeSpy = createEventSpy(player, "activeTextTrackChange");
+      deps.trackController.activeTrack = null;
+      deps.trackController.dispatch("trackDeactivated", { track: a.track });
+      expect(tracksSpy).toHaveBeenCalled();
+      expect(tracksSpy.calls.mostRecent().args[0].current).toEqual([]);
+      expect(activeSpy).toHaveBeenCalled();
+      expect(activeSpy.calls.mostRecent().args[0].current).toBeNull();
+      expect(player.activeTextTrack).toBeNull();
+    });
     it("does not emit activeTextTrackChange when neither track has an active selection", () => {
       const a = makeTrackWithController();
       const b = makeTrackWithController();
-      deps.trackController.activeTrack = a.track;
-      deps.trackController.dispatch("trackActivated", { track: a.track });
+      activate(a.track);
       const spy = createEventSpy(player, "activeTextTrackChange");
-      deps.trackController.activeTrack = b.track;
-      deps.trackController.dispatch("trackActivated", { track: b.track });
+      activate(b.track);
       expect(spy).not.toHaveBeenCalled();
     });
   });
@@ -54893,7 +55914,9 @@ x`);
       await loadAndAwaitAdBreaks();
       await poll(() => player.textTracks.length > 0, { timeout: 15 });
       const track2 = player.textTracks[0];
-      player.setActiveTextTrack(track2.id);
+      player.configure({
+        text: { enabled: "on", selection: { id: track2.id } }
+      });
       const showingWithCues = () => {
         const dom = mediaRef.value.textTracks;
         return Array.from({ length: dom.length }, (_, i) => dom[i]).filter(
@@ -55033,7 +56056,9 @@ x`);
     }
     async function loadAndPlay(preferredAudioLanguage, lang) {
       const player = suite.player;
-      player.configure({ preferredAudioLanguage });
+      player.configure({
+        audio: { selection: { language: preferredAudioLanguage } }
+      });
       player.load({ type: "hls", uri: ASSET });
       await player.play().catch(() => void 0);
       expect(
@@ -55066,7 +56091,7 @@ x`);
       await loadAndPlay("ja", "ja");
       expect(await poll(() => player.currentTime > 1, { timeout: 30 })).withContext("content advanced").toBeTrue();
       const resumeBefore = player.currentTime;
-      player.configure({ preferredAudioLanguage: "de" });
+      player.configure({ audio: { selection: { language: "de" } } });
       expect(await poll(() => audioIsOnly(player, "de"), { timeout: 30 })).withContext(`content audio switched to 'de'`).toBeTrue();
       expect(
         await poll(
@@ -55205,6 +56230,9 @@ x`);
         await new Promise((r) => setTimeout(r, 50));
       }
     }
+    function selectTextById(id) {
+      suite.player.configure({ text: { enabled: "on", selection: { id } } });
+    }
     it("DASH discovers sidecar text tracks", async () => {
       await loadAndAwaitTextTracks(dashPlaylist);
       const tracks = suite.player.textTracks;
@@ -55218,7 +56246,7 @@ x`);
       const tracks = suite.player.textTracks;
       if (tracks.length === 0) pending("no text tracks discovered");
       const target = (_a3 = tracks.find((t) => t.language === "en")) != null ? _a3 : tracks[0];
-      suite.player.setActiveTextTrack(target.id);
+      selectTextById(target.id);
       const deadline = Date.now() + 1e4;
       let found = false;
       while (!found && Date.now() < deadline) {
@@ -55243,11 +56271,40 @@ x`);
       await loadAndAwaitTextTracks(dashPlaylist);
       const tracks = suite.player.textTracks;
       if (tracks.length === 0) pending("no text tracks discovered");
-      suite.player.setActiveTextTrack(tracks[0].id);
+      selectTextById(tracks[0].id);
       expect(suite.player.activeTextTrack).not.toBeNull();
-      suite.player.setActiveTextTrack(null);
+      suite.player.configure({ text: { enabled: "off" } });
       expect(suite.player.activeTextTrack).toBeNull();
     });
+    async function awaitCuesShowing() {
+      const deadline = Date.now() + 1e4;
+      while (Date.now() < deadline) {
+        if (showingWithCues() > 0) return true;
+        await new Promise((r) => setTimeout(r, 50));
+      }
+      return false;
+    }
+    function showingWithCues() {
+      var _a3, _b;
+      const dom = mediaRef.value.textTracks;
+      let n = 0;
+      for (let i = 0; i < dom.length; i++) {
+        if (dom[i].mode === "showing" && ((_b = (_a3 = dom[i].cues) == null ? void 0 : _a3.length) != null ? _b : 0) > 0) n++;
+      }
+      return n;
+    }
+    it("cycling languages never leaves more than one caption track showing", async () => {
+      await loadAndAwaitTextTracks(dashPlaylist);
+      const tracks = suite.player.textTracks;
+      if (tracks.length < 2) pending("need at least two text tracks");
+      for (const track2 of [...tracks, ...tracks]) {
+        selectTextById(track2.id);
+        await awaitCuesShowing();
+        expect(showingWithCues()).withContext(
+          `more than one caption track rendering after selecting ${track2.language}`
+        ).toBeLessThanOrEqual(1);
+      }
+    });
   });
 
   // test/integ/track/TrackController.test.ts