@shortkitsdk/web 0.3.0

package/dist/shortkit.slim.mjs

@@ -0,0 +1,3751 @@
+class IdentityManager {
+  constructor({ userId, onResolve } = {}) {
+    this._onResolve = onResolve || null;
+    const savedAnon = localStorage.getItem("sk_anonymous_id");
+    if (savedAnon) {
+      this._anonymousId = savedAnon;
+    } else {
+      this._anonymousId = generateUUID();
+      localStorage.setItem("sk_anonymous_id", this._anonymousId);
+    }
+    this._userId = localStorage.getItem("sk_user_id") || null;
+    if (userId) {
+      this.setUserId(userId);
+    }
+  }
+  get anonymousId() {
+    return this._anonymousId;
+  }
+  get userId() {
+    return this._userId;
+  }
+  get effectiveId() {
+    return this._userId ?? this._anonymousId;
+  }
+  setUserId(id) {
+    const previousAnonId = this._anonymousId;
+    this._userId = id;
+    localStorage.setItem("sk_user_id", id);
+    if (this._onResolve) {
+      this._onResolve(id, previousAnonId);
+    }
+  }
+  clearUserId() {
+    this._userId = null;
+    localStorage.removeItem("sk_user_id");
+    this._anonymousId = generateUUID();
+    localStorage.setItem("sk_anonymous_id", this._anonymousId);
+  }
+}
+function generateUUID() {
+  if (typeof crypto !== "undefined" && crypto.randomUUID) {
+    return crypto.randomUUID();
+  }
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
+    const r = Math.random() * 16 | 0;
+    return (c === "x" ? r : r & 3 | 8).toString(16);
+  });
+}
+const VALID_CLICK_ACTIONS = ["feed", "mute", "article", "none"];
+const VALID_FEED_SOURCES = ["algorithmic", "custom"];
+function createFeedConfig(overrides = {}) {
+  const config = {
+    feedHeight: "fullscreen",
+    muteOnStart: true,
+    autoplay: true,
+    feedSource: "algorithmic",
+    filter: null,
+    overlay: null,
+    preload: null,
+    ...overrides
+  };
+  if (config.feedSource && !VALID_FEED_SOURCES.includes(config.feedSource)) {
+    throw new Error(`Invalid feedSource: ${config.feedSource}`);
+  }
+  if (config.feedHeight !== "fullscreen" && !(config.feedHeight?.type === "percentage" && typeof config.feedHeight?.value === "number")) {
+    throw new Error(`Invalid feedHeight: ${JSON.stringify(config.feedHeight)}`);
+  }
+  return config;
+}
+function createPlayerConfig(overrides = {}) {
+  const config = {
+    cornerRadius: 12,
+    clickAction: "feed",
+    autoplay: true,
+    loop: true,
+    muteOnStart: true,
+    overlay: null,
+    ...overrides
+  };
+  if (!VALID_CLICK_ACTIONS.includes(config.clickAction)) {
+    throw new Error(`Invalid clickAction: ${config.clickAction}`);
+  }
+  return config;
+}
+function createWidgetConfig(overrides = {}) {
+  const config = {
+    cardCount: 3,
+    cardSpacing: 8,
+    cornerRadius: 12,
+    autoplay: true,
+    muteOnStart: true,
+    loop: true,
+    rotationInterval: 1e4,
+    clickAction: "feed",
+    overlay: null,
+    ...overrides
+  };
+  if (!VALID_CLICK_ACTIONS.includes(config.clickAction)) {
+    throw new Error(`Invalid clickAction: ${config.clickAction}`);
+  }
+  return config;
+}
+function createFeedFilter(opts = {}) {
+  return {
+    tags: opts.tags || null,
+    section: opts.section || null,
+    author: opts.author || null,
+    contentType: opts.contentType || null,
+    metadata: opts.metadata || null,
+    toQueryParams() {
+      const params = [];
+      if (this.tags?.length) params.push(["tags", this.tags.join(",")]);
+      if (this.section) params.push(["section", this.section]);
+      if (this.author) params.push(["author", this.author]);
+      if (this.contentType) params.push(["content_type", this.contentType]);
+      if (this.metadata) {
+        for (const [key, value] of Object.entries(this.metadata).sort(([a], [b]) => a.localeCompare(b))) {
+          params.push([`metadata.${key}`, value]);
+        }
+      }
+      return params;
+    }
+  };
+}
+class APIClient {
+  constructor({ baseUrl, apiKey, getEffectiveId }) {
+    this._baseUrl = baseUrl;
+    this._apiKey = apiKey;
+    this._getEffectiveId = getEffectiveId;
+  }
+  _headers() {
+    return {
+      "X-API-Key": this._apiKey,
+      "X-User-Id": this._getEffectiveId(),
+      "Content-Type": "application/json"
+    };
+  }
+  async fetchFeed({ limit = 10, cursor, filter } = {}) {
+    let url;
+    const params = new URLSearchParams({ limit: String(limit) });
+    if (cursor) params.set("cursor", cursor);
+    if (filter) {
+      const f = filter.toQueryParams ? filter : createFeedFilter(filter);
+      for (const [key, value] of f.toQueryParams()) {
+        params.set(key, value);
+      }
+      url = `${this._baseUrl}/v1/feed/filter?${params}`;
+    } else {
+      url = `${this._baseUrl}/v1/feed?${params}`;
+    }
+    const res = await fetch(url, { headers: this._headers() });
+    if (!res.ok) throw new Error(`Feed API ${res.status}: ${res.statusText}`);
+    const json = await res.json();
+    const nextCursor = json.meta?.next_cursor || null;
+    const items = (json.data || []).filter((item) => !item.type || item.type === "content").map((item) => parseContentItem(item));
+    return { items, nextCursor, hasMore: !!nextCursor };
+  }
+  async resolveIdentity(userId, anonymousId) {
+    const res = await fetch(`${this._baseUrl}/v1/identity/resolve`, {
+      method: "POST",
+      headers: this._headers(),
+      body: JSON.stringify({ userId, anonymousId })
+    });
+    if (!res.ok) {
+      console.warn(`Identity resolve failed: ${res.status}`);
+    }
+  }
+  async postEvents(events) {
+    const res = await fetch(`${this._baseUrl}/v1/events`, {
+      method: "POST",
+      headers: this._headers(),
+      body: JSON.stringify({ events })
+    });
+    if (!res.ok) throw new Error(`Events API ${res.status}`);
+  }
+  beaconEvents(events) {
+    const blob = new Blob(
+      [JSON.stringify({
+        events,
+        apiKey: this._apiKey,
+        userId: this._getEffectiveId()
+      })],
+      { type: "application/json" }
+    );
+    navigator.sendBeacon(`${this._baseUrl}/v1/events`, blob);
+  }
+}
+function parseContentItem(raw) {
+  return {
+    id: raw.id,
+    playbackId: raw.playbackId || null,
+    title: raw.title || "",
+    description: raw.description || null,
+    duration: raw.duration || 0,
+    streamingUrl: raw.streamingUrl || "",
+    thumbnailUrl: raw.thumbnailUrl || "",
+    captionTracks: (raw.captionTracks || []).map((t) => ({
+      language: t.language,
+      label: t.label || t.language,
+      source: t.source || "external",
+      url: t.url || null
+    })),
+    customMetadata: raw.customMetadata || null,
+    author: raw.author || null,
+    articleUrl: raw.articleUrl || raw.publisherUrl || null,
+    commentCount: raw.commentCount ?? null,
+    fallbackUrl: raw.fallbackUrl || null
+  };
+}
+class ViewSession {
+  constructor(contentId) {
+    this.contentId = contentId;
+    this.startTime = Date.now();
+    this.watchDuration = 0;
+    this.loopCount = 0;
+    this.completed = false;
+  }
+  addWatchTime(seconds) {
+    this.watchDuration += seconds;
+  }
+  recordLoop() {
+    this.loopCount++;
+  }
+  markCompleted() {
+    this.completed = true;
+  }
+  toSummary() {
+    return {
+      contentId: this.contentId,
+      startTime: this.startTime,
+      watchDuration: this.watchDuration,
+      loopCount: this.loopCount,
+      completed: this.completed
+    };
+  }
+}
+class EngagementTracker {
+  constructor({ onEvent, sessionId }) {
+    this._onEvent = onEvent;
+    this._sessionId = sessionId || crypto.randomUUID?.() || Math.random().toString(36).slice(2);
+    this.activeSession = null;
+  }
+  _emit(type, contentId, data = {}) {
+    this._onEvent({
+      type,
+      contentId: contentId || null,
+      timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+      sessionId: this._sessionId,
+      data
+    });
+  }
+  trackFeedEntry() {
+    this._emit("feedEntry");
+  }
+  trackFeedExit() {
+    this._emit("feedExit");
+  }
+  trackImpression(contentId) {
+    this._emit("impression", contentId);
+  }
+  trackPlayStart(contentId) {
+    this._emit("playStart", contentId);
+  }
+  trackFirstFrame(contentId) {
+    this._emit("firstFrame", contentId);
+  }
+  trackWatchProgress(contentId, seconds) {
+    this._emit("watchProgress", contentId, { seconds });
+  }
+  trackCompletion(contentId) {
+    this._emit("completion", contentId);
+  }
+  trackSwipe(fromId, toId, direction) {
+    this._emit("swipe", fromId, { toId, direction });
+  }
+  trackRebuffer(contentId) {
+    this._emit("rebuffer", contentId);
+  }
+  trackQualityChange(contentId, data) {
+    this._emit("qualityChange", contentId, data);
+  }
+  trackError(contentId, message) {
+    this._emit("error", contentId, { message });
+  }
+  trackInteraction(contentId, action) {
+    this._emit("interaction", contentId, { action });
+  }
+  trackContentSignal(contentId, signal) {
+    this._emit("contentSignal", contentId, { signal });
+  }
+  trackPlaybackFallback(contentId) {
+    this._emit("playbackFallback", contentId);
+  }
+  trackViewEnd(contentId, sessionData) {
+    this._emit("viewEnd", contentId, sessionData);
+  }
+  activateContent(contentId) {
+    if (this.activeSession) this.deactivateContent();
+    this.activeSession = new ViewSession(contentId);
+    this.trackImpression(contentId);
+  }
+  deactivateContent() {
+    if (!this.activeSession) return;
+    this.trackViewEnd(this.activeSession.contentId, this.activeSession.toSummary());
+    this.activeSession = null;
+  }
+}
+class EventBatcher {
+  constructor({ postEvents, beaconEvents, flushIntervalMs = 3e4 }) {
+    this._postEvents = postEvents;
+    this._beaconEvents = beaconEvents;
+    this._flushIntervalMs = flushIntervalMs;
+    this._queue = [];
+    this._timerId = null;
+    this._started = false;
+    this._visibilityHandler = null;
+  }
+  get pending() {
+    return this._queue.length;
+  }
+  add(event) {
+    this._queue.push(event);
+    if (this._started && this._timerId === null) {
+      this._scheduleFlush();
+    }
+  }
+  start() {
+    this._started = true;
+    this._scheduleFlush();
+    this._visibilityHandler = () => {
+      if (document.hidden) this.flushBeacon();
+    };
+    document.addEventListener("visibilitychange", this._visibilityHandler);
+  }
+  _scheduleFlush() {
+    this._timerId = setTimeout(async () => {
+      this._timerId = null;
+      await this.flush();
+    }, this._flushIntervalMs);
+  }
+  async flush() {
+    if (this._queue.length === 0) return;
+    const batch = this._queue.splice(0);
+    for (let attempt = 0; attempt < 3; attempt++) {
+      try {
+        await this._postEvents(batch);
+        return;
+      } catch {
+      }
+    }
+    console.warn(`ShortKit: dropped ${batch.length} analytics events after 3 retries`);
+  }
+  flushBeacon() {
+    if (this._queue.length === 0) return;
+    const batch = this._queue.splice(0);
+    this._beaconEvents(batch);
+  }
+  destroy() {
+    this._started = false;
+    if (this._timerId) {
+      clearTimeout(this._timerId);
+      this._timerId = null;
+    }
+    if (this._visibilityHandler) {
+      document.removeEventListener("visibilitychange", this._visibilityHandler);
+      this._visibilityHandler = null;
+    }
+    this.flushBeacon();
+  }
+}
+class EventEmitter {
+  constructor() {
+    this._listeners = /* @__PURE__ */ new Map();
+  }
+  on(event, fn) {
+    if (!this._listeners.has(event)) {
+      this._listeners.set(event, []);
+    }
+    this._listeners.get(event).push(fn);
+  }
+  off(event, fn) {
+    const fns = this._listeners.get(event);
+    if (!fns) return;
+    const idx = fns.indexOf(fn);
+    if (idx !== -1) fns.splice(idx, 1);
+  }
+  emit(event, data) {
+    const fns = this._listeners.get(event);
+    if (!fns) return;
+    const snapshot = [...fns];
+    for (const fn of snapshot) {
+      fn(data);
+    }
+  }
+  removeAllListeners() {
+    this._listeners.clear();
+  }
+}
+const STATE_EVENTS = {
+  playerState: "stateChange",
+  currentItem: "itemChange",
+  isMuted: "mutedChange",
+  playbackRate: "playbackRateChange",
+  captionsEnabled: "captionsChange",
+  activeCaptionTrack: "captionTrackChange",
+  activeCue: "cueChange",
+  feedScrollPhase: "feedScrollPhase",
+  prefetchedAheadCount: "prefetchedAheadCountChange",
+  remainingContentCount: "remainingContentCountChange"
+};
+const COMMANDS = [
+  "play",
+  "pause",
+  "seek",
+  "seekAndPlay",
+  "setMuted",
+  "skipToNext",
+  "skipToPrevious",
+  "setPlaybackRate",
+  "setCaptionsEnabled",
+  "selectCaptionTrack",
+  "sendContentSignal",
+  "setMaxBitrate",
+  "seekThumbnail"
+];
+class ShortKitPlayer {
+  constructor() {
+    this._emitter = new EventEmitter();
+    this._surface = null;
+    this._state = {
+      playerState: "idle",
+      currentItem: null,
+      time: { current: 0, duration: 0, buffered: 0 },
+      isMuted: true,
+      playbackRate: 1,
+      captionsEnabled: false,
+      activeCaptionTrack: null,
+      activeCue: null,
+      feedScrollPhase: null,
+      prefetchedAheadCount: 0,
+      remainingContentCount: 0
+    };
+    for (const cmd of COMMANDS) {
+      this[cmd] = (...args) => {
+        if (this._surface && typeof this._surface[cmd] === "function") {
+          return this._surface[cmd](...args);
+        }
+      };
+    }
+  }
+  get playerState() {
+    return this._state.playerState;
+  }
+  get currentItem() {
+    return this._state.currentItem;
+  }
+  get time() {
+    return this._state.time;
+  }
+  get isMuted() {
+    return this._state.isMuted;
+  }
+  get playbackRate() {
+    return this._state.playbackRate;
+  }
+  get captionsEnabled() {
+    return this._state.captionsEnabled;
+  }
+  get activeCaptionTrack() {
+    return this._state.activeCaptionTrack;
+  }
+  get activeCue() {
+    return this._state.activeCue;
+  }
+  get feedScrollPhase() {
+    return this._state.feedScrollPhase;
+  }
+  get prefetchedAheadCount() {
+    return this._state.prefetchedAheadCount;
+  }
+  get remainingContentCount() {
+    return this._state.remainingContentCount;
+  }
+  on(event, fn) {
+    this._emitter.on(event, fn);
+  }
+  off(event, fn) {
+    this._emitter.off(event, fn);
+  }
+  registerSurface(surface) {
+    this._surface = surface;
+  }
+  unregisterSurface(surface) {
+    if (this._surface === surface) this._surface = null;
+  }
+  _pushState(updates) {
+    for (const [key, value] of Object.entries(updates)) {
+      if (key === "time") {
+        this._state.time = value;
+        this._emitter.emit("timeUpdate", value);
+      } else if (this._state[key] !== value) {
+        this._state[key] = value;
+        const eventName = STATE_EVENTS[key];
+        if (eventName) this._emitter.emit(eventName, value);
+      }
+    }
+  }
+  emitEvent(event, data) {
+    this._emitter.emit(event, data);
+  }
+  destroy() {
+    this._surface = null;
+    this._emitter.removeAllListeners();
+  }
+}
+class PlayerPool {
+  // HLS.js config for preload/speculative players: low buffer, lowest quality start
+  static PRELOAD_HLS_CONFIG = { startLevel: 0, capLevelToPlayerSize: true, maxBufferLength: 2, maxMaxBufferLength: 4 };
+  // HLS.js config for the active (visible) player: ABR picks quality, generous buffer
+  static ACTIVE_HLS_CONFIG = { startLevel: -1, capLevelToPlayerSize: true, maxBufferLength: 8, maxMaxBufferLength: 15 };
+  /**
+   * @param {object} [options]
+   * @param {number} [options.poolSize=3]  Number of video elements to pre-create.
+   * @param {Function} [options.Hls]       HLS.js constructor (defaults to global Hls).
+   */
+  constructor({ poolSize = 3, Hls: HlsClass } = {}) {
+    this._Hls = HlsClass ?? (typeof Hls !== "undefined" ? Hls : null);
+    this.players = Array.from({ length: poolSize }, () => this._createPlayer());
+    this.assignments = /* @__PURE__ */ new Map();
+    this.hlsInstances = /* @__PURE__ */ new Map();
+  }
+  _createPlayer() {
+    const video = document.createElement("video");
+    video.playsInline = true;
+    video.preload = "auto";
+    video.loop = true;
+    video.muted = true;
+    video.setAttribute("webkit-playsinline", "");
+    return video;
+  }
+  /** Get or recycle a player for an item. */
+  acquire(itemId) {
+    if (this.assignments.has(itemId)) return this.assignments.get(itemId);
+    const assigned = new Set(this.assignments.values());
+    let player = this.players.find((p) => !assigned.has(p));
+    if (!player) {
+      const oldest = this.assignments.keys().next().value;
+      player = this.assignments.get(oldest);
+      player.pause();
+      this._destroyHls(oldest);
+      player.removeAttribute("src");
+      player.load();
+      if (player.parentNode) player.parentNode.removeChild(player);
+      this.assignments.delete(oldest);
+    }
+    this.assignments.set(itemId, player);
+    return player;
+  }
+  /**
+   * Attach an HLS stream (or plain URL) to the player for this item.
+   * Pass { isActive: true } for the currently-playing item to use generous
+   * buffer/ABR settings; preload players default to conservative config.
+   *
+   * @param {string} itemId
+   * @param {string} streamingUrl
+   * @param {{ isActive?: boolean }} [options]
+   */
+  attachStream(itemId, streamingUrl, { isActive = false } = {}) {
+    const player = this.assignments.get(itemId);
+    if (!player) return;
+    if (player._skCurrentUrl === streamingUrl) return;
+    this._destroyHls(itemId);
+    const HlsClass = this._Hls;
+    if (streamingUrl.includes(".m3u8") && HlsClass && HlsClass.isSupported()) {
+      const hlsConfig = isActive ? PlayerPool.ACTIVE_HLS_CONFIG : PlayerPool.PRELOAD_HLS_CONFIG;
+      const hls = new HlsClass(hlsConfig);
+      hls.loadSource(streamingUrl);
+      hls.attachMedia(player);
+      hls.on(HlsClass.Events.ERROR, (_event, data) => {
+        if (!data.fatal) return;
+        switch (data.type) {
+          case HlsClass.ErrorTypes.MEDIA_ERROR:
+            hls.recoverMediaError();
+            break;
+          case HlsClass.ErrorTypes.NETWORK_ERROR:
+            setTimeout(() => {
+              if (!hls.destroyed) hls.startLoad();
+            }, 2e3);
+            break;
+          default:
+            hls.destroy();
+            break;
+        }
+      });
+      this.hlsInstances.set(itemId, hls);
+    } else {
+      player.src = streamingUrl;
+    }
+    player._skCurrentUrl = streamingUrl;
+  }
+  /**
+   * Promote a preload player to active: raise buffer limits and uncap ABR.
+   * Safe to call even if the HLS instance was already created with active config.
+   */
+  promoteToActive(itemId) {
+    const hls = this.hlsInstances.get(itemId);
+    if (hls) {
+      hls.config.maxBufferLength = PlayerPool.ACTIVE_HLS_CONFIG.maxBufferLength;
+      hls.config.maxMaxBufferLength = PlayerPool.ACTIVE_HLS_CONFIG.maxMaxBufferLength;
+      hls.autoLevelCapping = -1;
+      hls.nextAutoLevel = -1;
+    }
+  }
+  /** Pause, destroy HLS, and remove player from DOM and pool tracking. */
+  release(itemId) {
+    const player = this.assignments.get(itemId);
+    if (player) {
+      player.pause();
+      this._destroyHls(itemId);
+      player._skCurrentUrl = null;
+      if (player.parentNode) player.parentNode.removeChild(player);
+      this.assignments.delete(itemId);
+    }
+  }
+  /** Look up the video element for an item, or null if not assigned. */
+  getPlayer(itemId) {
+    return this.assignments.get(itemId) || null;
+  }
+  /**
+   * Remove a video+HLS from pool tracking WITHOUT destroying or pausing.
+   * Use this when transferring a player to another surface (e.g. widget → feed).
+   * Returns { video, hls } or null if not found.
+   * A fresh replacement video element is inserted into the pool slot.
+   */
+  ejectPlayer(itemId) {
+    const video = this.assignments.get(itemId);
+    const hls = this.hlsInstances.get(itemId);
+    if (!video) return null;
+    if (video.parentNode) video.parentNode.removeChild(video);
+    this.assignments.delete(itemId);
+    this.hlsInstances.delete(itemId);
+    const idx = this.players.indexOf(video);
+    if (idx >= 0) this.players[idx] = this._createPlayer();
+    return { video, hls };
+  }
+  /**
+   * Re-inject a previously ejected (or externally created) video+HLS into
+   * this pool. If itemId is already assigned, it is released first.
+   *
+   * @param {string} itemId
+   * @param {HTMLVideoElement} video
+   * @param {object|null} hls   HLS.js instance, or null for native playback.
+   * @param {string|null} url   The streaming URL currently loaded into the player.
+   */
+  injectPlayer(itemId, video, hls, url) {
+    if (this.assignments.has(itemId)) this.release(itemId);
+    this.assignments.set(itemId, video);
+    if (hls) this.hlsInstances.set(itemId, hls);
+    video._skCurrentUrl = url || null;
+    if (!this.players.includes(video)) this.players.push(video);
+  }
+  /** Destroy all HLS instances and release all players. Call from sk.destroy(). */
+  destroyAll() {
+    for (const itemId of [...this.assignments.keys()]) {
+      this.release(itemId);
+    }
+  }
+  _destroyHls(itemId) {
+    const hls = this.hlsInstances.get(itemId);
+    if (hls) {
+      hls.destroy();
+      this.hlsInstances.delete(itemId);
+    }
+  }
+}
+class StoryboardCache {
+  constructor() {
+    this._cache = /* @__PURE__ */ new Map();
+    this._fetching = /* @__PURE__ */ new Map();
+  }
+  static extractPlaybackId(thumbnailUrl) {
+    try {
+      const url = new URL(thumbnailUrl);
+      if (url.host !== "image.media.shortkit.dev" && url.host !== "image.mux.com") return null;
+      return url.pathname.split("/")[1] || null;
+    } catch {
+      return null;
+    }
+  }
+  async get(playbackId) {
+    if (this._cache.has(playbackId)) return this._cache.get(playbackId);
+    if (this._fetching.has(playbackId)) return this._fetching.get(playbackId);
+    const promise = (async () => {
+      try {
+        const res = await fetch(`https://image.media.shortkit.dev/${playbackId}/storyboard.json`);
+        if (!res.ok) return null;
+        const meta = await res.json();
+        const img = new Image();
+        img.src = meta.url;
+        let sheetWidth = meta.tile_width;
+        let sheetHeight = meta.tile_height;
+        for (const t of meta.tiles) {
+          sheetWidth = Math.max(sheetWidth, t.x + meta.tile_width);
+          sheetHeight = Math.max(sheetHeight, t.y + meta.tile_height);
+        }
+        const entry = {
+          spriteSheetUrl: meta.url,
+          tileWidth: meta.tile_width,
+          tileHeight: meta.tile_height,
+          sheetWidth,
+          sheetHeight,
+          duration: meta.duration,
+          tiles: meta.tiles
+        };
+        this._cache.set(playbackId, entry);
+        return entry;
+      } catch {
+        return null;
+      } finally {
+        this._fetching.delete(playbackId);
+      }
+    })();
+    this._fetching.set(playbackId, promise);
+    return promise;
+  }
+  /** Find the tile for a given seek time. Returns CSS background props or null. */
+  tileAt(playbackId, seekTime) {
+    const entry = this._cache.get(playbackId);
+    if (!entry || !entry.tiles.length) return null;
+    let best = entry.tiles[0];
+    for (const tile of entry.tiles) {
+      if (tile.start <= seekTime) best = tile;
+      else break;
+    }
+    const scale = 80 / entry.tileWidth;
+    return {
+      backgroundImage: `url(${entry.spriteSheetUrl})`,
+      backgroundPosition: `-${best.x * scale}px -${best.y * scale}px`,
+      backgroundSize: `${entry.sheetWidth * scale}px ${entry.sheetHeight * scale}px`
+    };
+  }
+}
+function parseVTT(text) {
+  const cues = [];
+  const blocks = text.split(/\n\n+/);
+  for (const block of blocks) {
+    const lines = block.split("\n").filter((l) => l.trim());
+    const timingIdx = lines.findIndex((l) => l.includes(" --> "));
+    if (timingIdx < 0) continue;
+    const [startStr, endStr] = lines[timingIdx].split(" --> ");
+    const start = parseVTTTime(startStr.trim());
+    const end = parseVTTTime(endStr.trim());
+    if (start == null || end == null) continue;
+    const cueText = lines.slice(timingIdx + 1).join("\n").trim();
+    if (!cueText) continue;
+    cues.push({ startTime: start, endTime: end, text: cueText });
+  }
+  return cues;
+}
+function parseVTTTime(str) {
+  const parts = str.split(":");
+  if (parts.length === 3) {
+    return +parts[0] * 3600 + +parts[1] * 60 + parseFloat(parts[2]);
+  } else if (parts.length === 2) {
+    return +parts[0] * 60 + parseFloat(parts[1]);
+  }
+  return null;
+}
+function createFeedItem(item) {
+  const el = document.createElement("div");
+  el.className = "sk-feed-item";
+  el.dataset.itemId = item.id;
+  const thumbStyle = item.thumbnailUrl ? `background-image: url('${item.thumbnailUrl}'); background-size: cover; background-position: center;` : "";
+  el.innerHTML = `
+    <div class="sk-video-container" data-ref="videoContainer" style="${thumbStyle}">
+      <div class="sk-spinner" data-ref="spinner"></div>
+    </div>
+    <div class="sk-tap-zone" data-ref="tapZone"></div>
+    <div class="sk-overlay" data-ref="overlay"></div>
+  `;
+  return el;
+}
+class FeedManager {
+  /**
+   * @param {HTMLElement} containerEl   The .sk-feed element
+   * @param {import('../core/shortkit.js').ShortKit} shortKit
+   * @param {object} [options]
+   * @param {object} [options.config]  FeedConfig from createFeedConfig()
+   * @param {string} [options.startAtItemId]
+   * @param {Function} [options.onFeedReady]
+   * @param {Function} [options.onDismiss]
+   * @param {Function} [options.onContentTapped]
+   * @param {Function} [options.onRemainingContentCountChange]
+   * @param {Function} [options.onDidFetchContentItems]
+   * @param {Function} [options.onLoop]
+   * @param {Function} [options.onFeedTransition]
+   * @param {Function} [options.onFormatChange]
+   */
+  constructor(containerEl, shortKit, options = {}) {
+    this.container = containerEl;
+    this._sk = shortKit;
+    this._options = options;
+    this._config = options.config || {};
+    this.pool = shortKit._playerPool;
+    this.storyboardCache = shortKit._storyboardCache;
+    this.items = [];
+    this._cursor = null;
+    this._hasMore = true;
+    this.activeItemId = null;
+    this.activeIndex = 0;
+    this.isMuted = this._config.muteOnStart !== false;
+    this.playbackRate = 1;
+    this.itemEls = /* @__PURE__ */ new Map();
+    this.rafIds = /* @__PURE__ */ new Map();
+    this._centerTimeout = null;
+    this._loadingMore = false;
+    this._wasPlayingBeforeHidden = false;
+    this._speculativeItemId = null;
+    this._speculativePlayer = null;
+    this._lastPredictedIndex = -1;
+    this._captionsOn = false;
+    this._captionCues = /* @__PURE__ */ new Map();
+    this._captionFetches = /* @__PURE__ */ new Map();
+    this._prefetchedThumbs = /* @__PURE__ */ new Set();
+    this._destroyed = false;
+    this._overlayContainers = /* @__PURE__ */ new Map();
+    this.feedWrapper = containerEl.parentElement;
+  }
+  async init() {
+    const isCustom = this._config.feedSource === "custom";
+    if (!isCustom) {
+      const result = await this._fetchFeed(10);
+      this._appendItems(result.items);
+      this._prefetchThumbnails(0);
+      if (this._options.onDidFetchContentItems) this._options.onDidFetchContentItems(result.items);
+      if (this._sk._onDidFetchContentItems) this._sk._onDidFetchContentItems(result.items);
+    }
+    this._setupObserver();
+    this._setupScrollEnd();
+    this._setupKeyboard();
+    this._setupVisibilityHandler();
+    this._setupCellHeightObserver();
+    this._sk.player.registerSurface(this);
+    this._sk._tracker.trackFeedEntry();
+    this._pushPlayerState();
+    if (this._options.onFeedReady) this._options.onFeedReady();
+  }
+  destroy() {
+    if (this._destroyed) return;
+    this._destroyed = true;
+    this._sk._tracker.trackFeedExit();
+    this._sk._tracker.deactivateContent();
+    this._sk.player.unregisterSurface(this);
+    this._sk._unregisterSurface(this);
+    for (const [id] of this.rafIds) this._stopTimeLoop(id);
+    if (this.activeItemId) this._deactivateItem(this.activeItemId);
+    for (const [id] of [...this.pool.assignments]) this.pool.release(id);
+    if (this.observer) {
+      this.observer.disconnect();
+      this.observer = null;
+    }
+    if (this._resizeObserver) {
+      this._resizeObserver.disconnect();
+      this._resizeObserver = null;
+    }
+    this.container.innerHTML = "";
+    this.itemEls.clear();
+    this.items = [];
+    this.activeItemId = null;
+    this.activeIndex = 0;
+    this._speculativeItemId = null;
+    this._speculativePlayer = null;
+  }
+  // ── Surface command interface (forwarded from ShortKitPlayer) ──
+  play() {
+    const player = this.pool.getPlayer(this.activeItemId);
+    if (player) {
+      player.play().catch(() => {
+      });
+      this._pushPlayerState({ playerState: "playing" });
+    }
+  }
+  pause() {
+    const player = this.pool.getPlayer(this.activeItemId);
+    if (player) {
+      player.pause();
+      this._pushPlayerState({ playerState: "paused" });
+    }
+  }
+  seek(time) {
+    const player = this.pool.getPlayer(this.activeItemId);
+    if (player && player.duration) {
+      player.currentTime = time;
+    }
+  }
+  seekAndPlay(time) {
+    const player = this.pool.getPlayer(this.activeItemId);
+    if (player && player.duration) {
+      player.currentTime = time;
+      player.play().catch(() => {
+      });
+      this._pushPlayerState({ playerState: "playing" });
+    }
+  }
+  setMuted(muted) {
+    this.isMuted = muted;
+    for (const [, player] of this.pool._players) {
+      player.muted = muted;
+    }
+    this._pushPlayerState({ isMuted: muted });
+  }
+  skipToNext() {
+    this.navigateDown();
+  }
+  skipToPrevious() {
+    this.navigateUp();
+  }
+  setPlaybackRate(rate) {
+    this.playbackRate = rate;
+    for (const [, player] of this.pool._players) {
+      player.playbackRate = rate;
+    }
+    this._pushPlayerState({ playbackRate: rate });
+  }
+  setCaptionsEnabled(enabled) {
+    this._captionsOn = enabled;
+    this._pushPlayerState({ captionsEnabled: enabled });
+    if (enabled) {
+      const item = this.items[this.activeIndex];
+      if (item?.captionTracks?.length) this._fetchCaptionVTT(item);
+    }
+    if (!enabled) {
+      this._sk.player._pushState({ activeCue: null });
+    }
+  }
+  selectCaptionTrack(track) {
+    this._pushPlayerState({ activeCaptionTrack: track });
+  }
+  sendContentSignal(signal) {
+    if (this.activeItemId) {
+      this._sk._tracker.trackContentSignal(this.activeItemId, signal);
+    }
+  }
+  setMaxBitrate(_bitrate) {
+  }
+  seekThumbnail(time) {
+    if (!this.activeItemId) return null;
+    const item = this.items[this.activeIndex];
+    if (!item) return null;
+    const playbackId = StoryboardCache.extractPlaybackId(item.thumbnailUrl);
+    if (!playbackId) return null;
+    return this.storyboardCache.tileAt(playbackId, time);
+  }
+  // ── Custom feed mode methods ──
+  /**
+   * Replace all feed items with the provided list.
+   * @param {Array<{type: string, playbackId?: string, fallbackUrl?: string}|object>} items
+   *   FeedInput objects or pre-resolved ContentItem objects.
+   */
+  setFeedItems(items) {
+    if (this._config.feedSource !== "custom") {
+      console.warn("[ShortKit] setFeedItems() called on a non-custom feed — ignored");
+      return;
+    }
+    if (this.activeItemId) {
+      this._deactivateItem(this.activeItemId);
+      this.activeItemId = null;
+      this.activeIndex = 0;
+    }
+    if (this.observer) this.observer.disconnect();
+    this.container.innerHTML = "";
+    this.itemEls.clear();
+    this.items = [];
+    const resolved = this._resolveFeedInputs(items);
+    this._appendItems(resolved);
+    this._setupObserver();
+  }
+  /**
+   * Append items to the existing feed without disrupting current playback.
+   * @param {Array<{type: string, playbackId?: string, fallbackUrl?: string}|object>} items
+   */
+  appendFeedItems(items) {
+    if (this._config.feedSource !== "custom") {
+      console.warn("[ShortKit] appendFeedItems() called on a non-custom feed — ignored");
+      return;
+    }
+    const resolved = this._resolveFeedInputs(items);
+    this._appendItems(resolved);
+  }
+  /**
+   * Apply a filter to the feed.
+   * For algorithmic feeds: clears and re-fetches with the new filter.
+   * For custom feeds: no-op (log a warning).
+   * @param {object} filter
+   */
+  applyFilter(filter) {
+    if (this._config.feedSource === "custom") {
+      console.warn("[ShortKit] applyFilter() is a no-op for custom feeds — use setFeedItems() to update content");
+      return;
+    }
+    this._config.filter = filter;
+    this._cursor = null;
+    this._hasMore = true;
+    if (this.activeItemId) {
+      this._deactivateItem(this.activeItemId);
+      this.activeItemId = null;
+      this.activeIndex = 0;
+    }
+    if (this.observer) this.observer.disconnect();
+    this.container.innerHTML = "";
+    this.itemEls.clear();
+    this.items = [];
+    this._fetchFeed(10).then((result) => {
+      this._appendItems(result.items);
+      this._setupObserver();
+      this._prefetchThumbnails(0);
+      if (this._options.onDidFetchContentItems) this._options.onDidFetchContentItems(result.items);
+      if (this._sk._onDidFetchContentItems) this._sk._onDidFetchContentItems(result.items);
+    }).catch(() => {
+    });
+  }
+  /**
+   * Convert FeedInput objects to ContentItem objects suitable for _appendItems().
+   * If the input already looks like a ContentItem (has streamingUrl), it's passed through.
+   * For { type: 'video', playbackId } inputs, URLs are derived from Mux URL conventions.
+   * @param {Array} inputs
+   * @returns {Array} ContentItems
+   */
+  _resolveFeedInputs(inputs) {
+    return inputs.map((input) => {
+      if (input.streamingUrl) return input;
+      if (input.type === "video" && input.playbackId) {
+        return {
+          id: input.playbackId,
+          streamingUrl: `https://stream.mux.com/${input.playbackId}.m3u8`,
+          thumbnailUrl: `https://image.mux.com/${input.playbackId}/thumbnail.jpg`,
+          title: input.title || "",
+          description: input.description || "",
+          author: input.author || "",
+          section: input.section || "",
+          articleUrl: input.articleUrl || null,
+          duration: input.duration || 0,
+          captionTracks: input.captionTracks || []
+        };
+      }
+      if (input.fallbackUrl) {
+        return {
+          id: input.id || input.fallbackUrl,
+          streamingUrl: input.fallbackUrl,
+          thumbnailUrl: input.thumbnailUrl || "",
+          title: input.title || "",
+          description: input.description || "",
+          author: input.author || "",
+          section: input.section || "",
+          articleUrl: input.articleUrl || null,
+          duration: input.duration || 0,
+          captionTracks: input.captionTracks || []
+        };
+      }
+      console.warn("[ShortKit] Unresolvable FeedInput — skipping:", input);
+      return null;
+    }).filter(Boolean);
+  }
+  // ── Internal: API wrapper ──
+  async _fetchFeed(limit = 10) {
+    const result = await this._sk._apiClient.fetchFeed({
+      limit,
+      cursor: this._cursor,
+      filter: this._config.filter || void 0
+    });
+    this._cursor = result.nextCursor;
+    this._hasMore = result.hasMore;
+    const items = result.items.map((item) => ({
+      id: item.id,
+      streamingUrl: item.streamingUrl,
+      thumbnailUrl: item.thumbnailUrl,
+      title: item.title || "",
+      description: item.description || "",
+      author: item.author || "",
+      section: item.customMetadata?.category?.toUpperCase() || item.customMetadata?.section?.toUpperCase() || "",
+      articleUrl: item.articleUrl || null,
+      duration: item.duration || 0,
+      captionTracks: item.captionTracks || []
+    }));
+    return { items, nextCursor: result.nextCursor, hasMore: result.hasMore };
+  }
+  // ── Internal: Push state to ShortKitPlayer ──
+  _pushPlayerState(updates = {}) {
+    const player = this.pool.getPlayer(this.activeItemId);
+    const item = this.items[this.activeIndex] || null;
+    const state = {
+      currentItem: item,
+      isMuted: this.isMuted,
+      playbackRate: this.playbackRate,
+      captionsEnabled: this._captionsOn,
+      activeCaptionTrack: null,
+      activeCue: null,
+      prefetchedAheadCount: Math.max(0, this.items.length - this.activeIndex - 1),
+      remainingContentCount: this.items.length - this.activeIndex - 1,
+      ...updates
+    };
+    if (player) {
+      state.time = {
+        current: player.currentTime || 0,
+        duration: player.duration || 0,
+        buffered: player.buffered?.length > 0 ? player.buffered.end(player.buffered.length - 1) : 0
+      };
+      if (!updates.playerState) {
+        state.playerState = player.paused ? "paused" : "playing";
+      }
+    }
+    this._sk.player._pushState(state);
+  }
+  // --- Build ---
+  _appendItems(newItems) {
+    for (const item of newItems) {
+      if (this.itemEls.has(item.id)) continue;
+      this.items.push(item);
+      const el = createFeedItem(item);
+      this.container.appendChild(el);
+      this.itemEls.set(item.id, el);
+      this._bindControls(item, el);
+      this._createOverlayContainer(item.id, el);
+      this.observer?.observe(el);
+    }
+    this._pushPlayerState({
+      remainingContentCount: this.items.length - this.activeIndex - 1,
+      prefetchedAheadCount: Math.max(0, this.items.length - this.activeIndex - 1)
+    });
+    if (this._options.onRemainingContentCountChange) {
+      this._options.onRemainingContentCountChange(this.items.length - this.activeIndex - 1);
+    }
+  }
+  async _loadMore() {
+    if (this._loadingMore || !this._hasMore) return;
+    this._loadingMore = true;
+    try {
+      const result = await this._fetchFeed(10);
+      this._appendItems(result.items);
+      if (this._options.onDidFetchContentItems) this._options.onDidFetchContentItems(result.items);
+      if (this._sk._onDidFetchContentItems) this._sk._onDidFetchContentItems(result.items);
+    } finally {
+      this._loadingMore = false;
+    }
+  }
+  // --- Navigation ---
+  navigateTo(index) {
+    const clamped = Math.max(0, Math.min(this.items.length - 1, index));
+    const el = this.itemEls.get(this.items[clamped].id);
+    el.scrollIntoView({ behavior: "smooth", block: "start" });
+  }
+  navigateUp() {
+    this.navigateTo(this.activeIndex - 1);
+  }
+  navigateDown() {
+    this.navigateTo(this.activeIndex + 1);
+  }
+  // --- Keyboard (arrow keys) ---
+  _setupKeyboard() {
+    document.addEventListener("keydown", (e) => {
+      if (e.key === "ArrowUp") {
+        e.preventDefault();
+        this.navigateUp();
+      }
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        this.navigateDown();
+      }
+    });
+  }
+  // --- Tab Visibility ---
+  _setupVisibilityHandler() {
+    document.addEventListener("visibilitychange", () => {
+      if (document.hidden) {
+        this._handleTabHidden();
+      } else {
+        this._handleTabVisible();
+      }
+    });
+  }
+  _handleTabHidden() {
+    this._cancelSpeculation();
+    if (!this.activeItemId) return;
+    const player = this.pool.getPlayer(this.activeItemId);
+    if (player && !player.paused) {
+      this._wasPlayingBeforeHidden = true;
+      player.pause();
+    } else {
+      this._wasPlayingBeforeHidden = false;
+    }
+    this._stopTimeLoop(this.activeItemId);
+  }
+  _handleTabVisible() {
+    if (!this.activeItemId) return;
+    if (this._wasPlayingBeforeHidden) {
+      const player2 = this.pool.getPlayer(this.activeItemId);
+      if (player2) player2.play().catch(() => {
+      });
+      this._wasPlayingBeforeHidden = false;
+    }
+    const el = this.itemEls.get(this.activeItemId);
+    const player = this.pool.getPlayer(this.activeItemId);
+    if (el && player) this._startTimeLoop(this.activeItemId, el, player);
+  }
+  // --- Intersection Observer ---
+  _setupObserver() {
+    this.observer = new IntersectionObserver((entries) => {
+      for (const entry of entries) {
+        const id = entry.target.dataset.itemId;
+        if (entry.isIntersecting && entry.intersectionRatio > 0.6) {
+          this._activateItem(id);
+        }
+      }
+    }, { root: this.container, threshold: [0, 0.6, 1] });
+    for (const el of this.itemEls.values()) {
+      this.observer.observe(el);
+    }
+  }
+  // --- Stable cell height for scroll prediction ---
+  _setupCellHeightObserver() {
+    this._cellHeight = 0;
+    const measure = () => {
+      const first = this.container.firstElementChild;
+      if (first) {
+        this._cellHeight = first.offsetHeight + parseFloat(getComputedStyle(first).marginBottom || "0");
+      }
+    };
+    measure();
+    this._resizeObserver = new ResizeObserver(measure);
+    this._resizeObserver.observe(this.container);
+  }
+  // --- Pre-warm adjacent on scroll end + scroll prediction ---
+  _setupScrollEnd() {
+    let scrollTimer;
+    this.container.addEventListener("scroll", () => {
+      this._predictAndSpeculate();
+      clearTimeout(scrollTimer);
+      scrollTimer = setTimeout(() => this._onScrollEnd(), 100);
+    }, { passive: true });
+    this.container.addEventListener("pointerdown", () => {
+      this._cancelSpeculation();
+    }, { passive: true });
+    this.container.addEventListener("touchstart", () => {
+      this._cancelSpeculation();
+    }, { passive: true });
+  }
+  _onScrollEnd() {
+    const idx = this.items.findIndex((i) => i.id === this.activeItemId);
+    if (idx < 0) return;
+    const adjacent = [this.items[idx - 1], this.items[idx + 1]].filter(Boolean);
+    for (const item of adjacent) {
+      const player = this.pool.acquire(item.id);
+      this.pool.attachStream(item.id, item.streamingUrl);
+      player.currentTime = 0;
+      if (this._speculativeItemId !== item.id) {
+        player.muted = true;
+        const primingItemId = item.id;
+        const p = player.play();
+        if (p) p.then(() => {
+          if (this.activeItemId !== primingItemId) player.pause();
+        }).catch(() => {
+        });
+      }
+    }
+    this._prefetchThumbnails(idx);
+    for (const adj of adjacent) {
+      if (adj.captionTracks?.length) this._fetchCaptionVTT(adj);
+    }
+    if (idx >= this.items.length - 3) {
+      this._loadMore();
+    }
+  }
+  // --- Scroll Prediction + Speculative Playback ---
+  _predictAndSpeculate() {
+    const containerHeight = this._cellHeight || this.container.clientHeight;
+    if (containerHeight <= 0 || this.items.length === 0) return;
+    const scrollTop = this.container.scrollTop;
+    const predictedIndex = Math.round(scrollTop / containerHeight);
+    const clamped = Math.max(0, Math.min(this.items.length - 1, predictedIndex));
+    if (clamped === this._lastPredictedIndex) return;
+    this._lastPredictedIndex = clamped;
+    if (clamped === this.activeIndex) {
+      this._cancelSpeculation();
+      return;
+    }
+    if (Math.abs(clamped - this.activeIndex) > 1) return;
+    const item = this.items[clamped];
+    if (!item) return;
+    if (this._speculativeItemId === item.id) return;
+    this._cancelSpeculation();
+    const player = this.pool.acquire(item.id);
+    this.pool.attachStream(item.id, item.streamingUrl);
+    player.currentTime = 0;
+    player.muted = true;
+    const el = this.itemEls.get(item.id);
+    if (el) {
+      const container = el.querySelector('[data-ref="videoContainer"]');
+      player.style.opacity = "0";
+      if (!container.contains(player)) container.insertBefore(player, container.firstChild);
+    }
+    const p = player.play();
+    if (p) p.catch(() => {
+    });
+    this._speculativeItemId = item.id;
+    this._speculativePlayer = player;
+    this._pushPlayerState({ feedScrollPhase: "decelerating" });
+  }
+  /** Cancel any in-flight speculative playback. */
+  _cancelSpeculation() {
+    if (!this._speculativeItemId) return;
+    const player = this.pool.getPlayer(this._speculativeItemId);
+    if (player) {
+      player.pause();
+      player.style.opacity = "0";
+    }
+    this._speculativeItemId = null;
+    this._speculativePlayer = null;
+    this._lastPredictedIndex = -1;
+  }
+  // --- Activation ---
+  _activateItem(id) {
+    if (this.activeItemId === id) return;
+    if (this._speculativeItemId && this._speculativeItemId !== id) {
+      this._cancelSpeculation();
+    }
+    this._speculativeItemId = null;
+    this._speculativePlayer = null;
+    this._lastPredictedIndex = -1;
+    const previousId = this.activeItemId;
+    const previousIndex = this.activeIndex;
+    if (this.activeItemId) this._deactivateItem(this.activeItemId);
+    this.activeItemId = id;
+    this.activeIndex = this.items.findIndex((i) => i.id === id);
+    const item = this.items[this.activeIndex];
+    if (previousId) {
+      const direction = this.activeIndex > previousIndex ? "down" : "up";
+      this._sk._tracker.trackSwipe(previousId, id, direction);
+    }
+    this._sk._tracker.activateContent(id);
+    if (this._options.onFeedTransition) {
+      this._options.onFeedTransition({ fromIndex: previousIndex, toIndex: this.activeIndex, item });
+    }
+    const el = this.itemEls.get(id);
+    const player = this.pool.acquire(id);
+    player.style.opacity = "0";
+    const container = el.querySelector('[data-ref="videoContainer"]');
+    if (!container.contains(player)) container.insertBefore(player, container.firstChild);
+    this.pool.attachStream(id, item.streamingUrl, { isActive: true });
+    this.pool.promoteToActive(id);
+    player.muted = this.isMuted;
+    player.playbackRate = this.playbackRate;
+    player.currentTime = 0;
+    const spinner = el.querySelector('[data-ref="spinner"]');
+    const REVEAL_EVENTS = ["loadeddata", "seeked", "canplay", "timeupdate"];
+    let spinnerTimeout = null;
+    const revealOnFirstFrame = () => {
+      if (player._skRevealedFor === id) return;
+      if (player.readyState < 2) return;
+      player._skRevealedFor = id;
+      player.style.opacity = "1";
+      clearTimeout(spinnerTimeout);
+      spinner.classList.remove("visible");
+      REVEAL_EVENTS.forEach((e) => player.removeEventListener(e, revealOnFirstFrame));
+      this._sk._tracker.trackFirstFrame(id);
+    };
+    if (player.readyState >= 2 && !player.seeking) {
+      player._skRevealedFor = id;
+      player.style.opacity = "1";
+      this._sk._tracker.trackFirstFrame(id);
+    } else {
+      spinnerTimeout = setTimeout(() => spinner.classList.add("visible"), 1e3);
+      REVEAL_EVENTS.forEach((e) => player.addEventListener(e, revealOnFirstFrame));
+    }
+    const playPromise = player.play();
+    if (playPromise) {
+      playPromise.catch(() => {
+        if (player.readyState >= 2) revealOnFirstFrame();
+      });
+    }
+    this._sk._tracker.trackPlayStart(id);
+    this._startTimeLoop(id, el, player);
+    this._invokeOverlay(id, item);
+    this._prefetchThumbnails(this.activeIndex);
+    if (item.captionTracks?.length) this._fetchCaptionVTT(item);
+    const playbackId = StoryboardCache.extractPlaybackId(item.thumbnailUrl);
+    if (playbackId) this.storyboardCache.get(playbackId);
+    this._pushPlayerState({
+      playerState: "playing",
+      currentItem: item,
+      feedScrollPhase: "idle"
+    });
+  }
+  _deactivateItem(id) {
+    const player = this.pool.getPlayer(id);
+    if (player) {
+      player.pause();
+      player.style.opacity = "0";
+      player._skRevealedFor = null;
+    }
+    this._stopTimeLoop(id);
+    this._clearOverlay(id);
+    this._sk._tracker.deactivateContent();
+  }
+  // --- Time loop ---
+  _startTimeLoop(id, el, player) {
+    this._stopTimeLoop(id);
+    const tick = () => {
+      if (this._destroyed) return;
+      if (!player || player.paused) {
+        this.rafIds.set(id, requestAnimationFrame(tick));
+        return;
+      }
+      const current = player.currentTime || 0;
+      const duration = player.duration || 0;
+      const buffered = player.buffered?.length > 0 ? player.buffered.end(player.buffered.length - 1) : 0;
+      this._sk.player._pushState({
+        time: { current, duration, buffered },
+        playerState: "playing"
+      });
+      if (this._captionsOn) {
+        const cues = this._captionCues.get(id);
+        if (cues) {
+          const cue = cues.find((c) => current >= c.startTime && current <= c.endTime) || null;
+          const prev = this._sk.player.activeCue;
+          if (cue !== prev) {
+            this._sk.player._pushState({ activeCue: cue });
+          }
+        }
+      }
+      if (player.ended) {
+        player.currentTime = 0;
+        player.play().catch(() => {
+        });
+      }
+      this.rafIds.set(id, requestAnimationFrame(tick));
+    };
+    this.rafIds.set(id, requestAnimationFrame(tick));
+  }
+  _stopTimeLoop(id) {
+    const rafId = this.rafIds.get(id);
+    if (rafId) {
+      cancelAnimationFrame(rafId);
+      this.rafIds.delete(id);
+    }
+  }
+  // --- Controls ---
+  _bindControls(item, el) {
+    const tapZone = el.querySelector('[data-ref="tapZone"]');
+    if (tapZone) {
+      tapZone.addEventListener("click", () => {
+        const player = this.pool.getPlayer(item.id);
+        if (!player) return;
+        if (player.paused) {
+          player.play().catch(() => {
+          });
+          this._pushPlayerState({ playerState: "playing" });
+        } else {
+          player.pause();
+          this._pushPlayerState({ playerState: "paused" });
+        }
+        if (this._sk._onContentTapped) {
+          this._sk._onContentTapped(item);
+        }
+      });
+    }
+  }
+  // --- Caption VTT fetch (deduped + cached) ---
+  _fetchCaptionVTT(item) {
+    if (this._captionCues.has(item.id)) return;
+    if (this._captionFetches.has(item.id)) return;
+    const track = item.captionTracks[0];
+    if (!track?.url) return;
+    const promise = fetch(track.url).then((res) => res.ok ? res.text() : null).then((text) => {
+      if (text) this._captionCues.set(item.id, parseVTT(text));
+    }).catch(() => {
+    }).finally(() => this._captionFetches.delete(item.id));
+    this._captionFetches.set(item.id, promise);
+  }
+  // --- Thumbnail prefetch for +/-3 items ---
+  _prefetchThumbnails(centerIndex) {
+    const radius = 3;
+    const start = Math.max(0, centerIndex - radius);
+    const end = Math.min(this.items.length, centerIndex + radius + 1);
+    for (let i = start; i < end; i++) {
+      const url = this.items[i].thumbnailUrl;
+      if (!url || this._prefetchedThumbs.has(url)) continue;
+      this._prefetchedThumbs.add(url);
+      const img = new Image();
+      img.src = url;
+    }
+  }
+  // --- Custom overlay helpers ---
+  /** Create and register the overlay container element for a feed cell. */
+  _createOverlayContainer(itemId, cellEl) {
+    const overlayEl = cellEl.querySelector('[data-ref="overlay"]');
+    if (!overlayEl) return;
+    this._overlayContainers.set(itemId, { el: overlayEl, unsub: null });
+  }
+  /** Invoke the developer overlay callback for the given item. */
+  _invokeOverlay(itemId, item) {
+    if (!this._config.overlay) return;
+    const entry = this._overlayContainers.get(itemId);
+    if (!entry) return;
+    const player = this._sk.player;
+    const surface = this;
+    const listeners = [];
+    const scopedPlayer = {
+      get isMuted() {
+        return player.isMuted;
+      },
+      get playbackRate() {
+        return player.playbackRate;
+      },
+      get currentTime() {
+        return player.time.current;
+      },
+      get duration() {
+        return player.time.duration;
+      },
+      get captionsEnabled() {
+        return player.captionsEnabled;
+      },
+      on(event, fn) {
+        player.on(event, fn);
+        listeners.push({ event, fn });
+      },
+      off(event, fn) {
+        player.off(event, fn);
+        const idx = listeners.findIndex((l) => l.event === event && l.fn === fn);
+        if (idx >= 0) listeners.splice(idx, 1);
+      },
+      play() {
+        surface.play();
+      },
+      pause() {
+        surface.pause();
+      },
+      seek(time) {
+        surface.seek(time);
+      },
+      setMuted(muted) {
+        surface.setMuted(muted);
+      },
+      setPlaybackRate(rate) {
+        surface.setPlaybackRate(rate);
+      },
+      setCaptionsEnabled(enabled) {
+        surface.setCaptionsEnabled(enabled);
+      },
+      selectCaptionTrack(track) {
+        surface.selectCaptionTrack(track);
+      },
+      sendContentSignal(signal) {
+        surface.sendContentSignal(signal);
+      },
+      skipToNext() {
+        surface.skipToNext();
+      },
+      skipToPrevious() {
+        surface.skipToPrevious();
+      },
+      seekThumbnail(time) {
+        return surface.seekThumbnail(time);
+      }
+    };
+    const feed = {
+      dismiss: () => {
+        if (surface._feedDismiss) surface._feedDismiss();
+      },
+      navigateUp: () => surface.navigateUp(),
+      navigateDown: () => surface.navigateDown()
+    };
+    entry.unsub = () => {
+      for (const { event, fn } of listeners) player.off(event, fn);
+      listeners.length = 0;
+    };
+    try {
+      this._config.overlay(entry.el, { item, player: scopedPlayer, feed });
+    } catch (e) {
+    }
+  }
+  /** Clear the overlay container's DOM and unsubscribe tracked listeners. */
+  _clearOverlay(itemId) {
+    const entry = this._overlayContainers.get(itemId);
+    if (!entry) return;
+    if (entry.unsub) {
+      entry.unsub();
+      entry.unsub = null;
+    }
+    entry.el.innerHTML = "";
+  }
+}
+class EmbeddedFeedManager {
+  /**
+   * @param {HTMLElement} containerEl  The feed scroll container
+   * @param {import('../core/shortkit.js').ShortKit} shortKit
+   * @param {object} [options]
+   * @param {string} [options.idPrefix]  Element ID prefix (default 'skp')
+   */
+  constructor(containerEl, shortKit, options = {}) {
+    this.container = containerEl;
+    this._sk = shortKit;
+    this._options = options;
+    this._idPrefix = options.idPrefix || "skp";
+    this.pool = shortKit._playerPool;
+    this.storyboardCache = shortKit._storyboardCache;
+    this.items = [];
+    this._cursor = null;
+    this._hasMore = true;
+    this.activeItemId = null;
+    this.activeIndex = 0;
+    this.isMuted = true;
+    this.playbackRate = 1;
+    this.itemEls = /* @__PURE__ */ new Map();
+    this.rafIds = /* @__PURE__ */ new Map();
+    this._loadingMore = false;
+    this._wasPlayingBeforeHidden = false;
+    this._speculativeItemId = null;
+    this._speculativePlayer = null;
+    this._lastPredictedIndex = -1;
+    this._captionsOn = false;
+    this._captionCues = /* @__PURE__ */ new Map();
+    this._captionFetches = /* @__PURE__ */ new Map();
+    this._prefetchedThumbs = /* @__PURE__ */ new Set();
+    this._destroyed = false;
+    this._overlayContainers = /* @__PURE__ */ new Map();
+    this._feedDismiss = null;
+  }
+  _id(suffix) {
+    return `${this._idPrefix}${suffix}`;
+  }
+  async initWithItems(items, startIndex = 0, { deferActivation = false } = {}) {
+    this._appendItems(items);
+    this._prefetchThumbnails(0);
+    if (!deferActivation) this._setupObserver();
+    this._setupScrollEnd();
+    this._setupVisibilityHandler();
+    this._setupCellHeightObserver();
+    if (startIndex > 0 && startIndex < items.length) {
+      const targetEl = this.itemEls.get(items[startIndex].id);
+      if (targetEl) targetEl.scrollIntoView({ behavior: "instant", block: "start" });
+    }
+  }
+  startObserver() {
+    if (!this.observer) this._setupObserver();
+  }
+  destroy() {
+    this._destroyed = true;
+    for (const [id] of this.rafIds) this._stopTimeLoop(id);
+    if (this.activeItemId) this._deactivateItem(this.activeItemId);
+    for (const [id] of [...this.pool.assignments]) this.pool.release(id);
+    if (this.observer) {
+      this.observer.disconnect();
+      this.observer = null;
+    }
+    if (this._resizeObserver) {
+      this._resizeObserver.disconnect();
+      this._resizeObserver = null;
+    }
+    if (this._visHandler) document.removeEventListener("visibilitychange", this._visHandler);
+    this.container.innerHTML = "";
+    this.itemEls.clear();
+    this.items = [];
+    this.activeItemId = null;
+    this.activeIndex = 0;
+    this._speculativeItemId = null;
+    this._speculativePlayer = null;
+  }
+  getActiveVideoElement() {
+    if (!this.activeItemId) return null;
+    return this.pool.getPlayer(this.activeItemId);
+  }
+  getActiveItemRect() {
+    if (!this.activeItemId) return null;
+    const el = this.itemEls.get(this.activeItemId);
+    if (!el) return null;
+    const container = el.querySelector('[data-ref="videoContainer"]');
+    return container ? container.getBoundingClientRect() : el.getBoundingClientRect();
+  }
+  // ── Surface command interface (forwarded from ShortKitPlayer) ──
+  play() {
+    const player = this.pool.getPlayer(this.activeItemId);
+    if (player) {
+      player.play().catch(() => {
+      });
+      this._pushPlayerState({ playerState: "playing" });
+    }
+  }
+  pause() {
+    const player = this.pool.getPlayer(this.activeItemId);
+    if (player) {
+      player.pause();
+      this._pushPlayerState({ playerState: "paused" });
+    }
+  }
+  seek(time) {
+    const player = this.pool.getPlayer(this.activeItemId);
+    if (player && player.duration) {
+      player.currentTime = time;
+    }
+  }
+  setMuted(muted) {
+    this.isMuted = muted;
+    for (const [, player] of this.pool._players) {
+      player.muted = muted;
+    }
+    this._pushPlayerState({ isMuted: muted });
+  }
+  skipToNext() {
+    this.navigateDown();
+  }
+  skipToPrevious() {
+    this.navigateUp();
+  }
+  setPlaybackRate(rate) {
+    this.playbackRate = rate;
+    for (const [, player] of this.pool._players) {
+      player.playbackRate = rate;
+    }
+    this._pushPlayerState({ playbackRate: rate });
+  }
+  setCaptionsEnabled(enabled) {
+    this._captionsOn = enabled;
+    this._pushPlayerState({ captionsEnabled: enabled });
+    if (enabled) {
+      const item = this.items[this.activeIndex];
+      if (item?.captionTracks?.length) this._fetchCaptionVTT(item);
+    }
+    if (!enabled) {
+      this._sk.player._pushState({ activeCue: null });
+    }
+  }
+  selectCaptionTrack(track) {
+    this._pushPlayerState({ activeCaptionTrack: track });
+  }
+  sendContentSignal(signal) {
+    if (this.activeItemId) {
+      this._sk._tracker.trackContentSignal(this.activeItemId, signal);
+    }
+  }
+  seekThumbnail(time) {
+    if (!this.activeItemId) return null;
+    const item = this.items[this.activeIndex];
+    if (!item) return null;
+    const playbackId = StoryboardCache.extractPlaybackId(item.thumbnailUrl);
+    if (!playbackId) return null;
+    return this.storyboardCache.tileAt(playbackId, time);
+  }
+  // ── Internal: API wrapper ──
+  async _fetchFeed(limit = 10) {
+    const result = await this._sk._apiClient.fetchFeed({
+      limit,
+      cursor: this._cursor
+    });
+    this._cursor = result.nextCursor;
+    this._hasMore = result.hasMore;
+    const items = result.items.map((item) => ({
+      id: item.id,
+      streamingUrl: item.streamingUrl,
+      thumbnailUrl: item.thumbnailUrl,
+      title: item.title || "",
+      description: item.description || "",
+      author: item.author || "",
+      section: item.customMetadata?.category?.toUpperCase() || item.customMetadata?.section?.toUpperCase() || "",
+      articleUrl: item.articleUrl || null,
+      duration: item.duration || 0,
+      captionTracks: item.captionTracks || []
+    }));
+    return { items, nextCursor: result.nextCursor, hasMore: result.hasMore };
+  }
+  _appendItems(newItems) {
+    for (const item of newItems) {
+      if (this.itemEls.has(item.id)) continue;
+      this.items.push(item);
+      const el = createFeedItem(item);
+      this.container.appendChild(el);
+      this.itemEls.set(item.id, el);
+      this._bindControls(item, el);
+      this._createOverlayContainer(item.id, el);
+      this.observer?.observe(el);
+    }
+  }
+  async _loadMore() {
+    if (this._loadingMore || !this._hasMore) return;
+    this._loadingMore = true;
+    try {
+      const result = await this._fetchFeed(10);
+      this._appendItems(result.items);
+    } finally {
+      this._loadingMore = false;
+    }
+  }
+  navigateTo(index) {
+    const clamped = Math.max(0, Math.min(this.items.length - 1, index));
+    const el = this.itemEls.get(this.items[clamped].id);
+    el.scrollIntoView({ behavior: "smooth", block: "start" });
+  }
+  navigateUp() {
+    this.navigateTo(this.activeIndex - 1);
+  }
+  navigateDown() {
+    this.navigateTo(this.activeIndex + 1);
+  }
+  _setupVisibilityHandler() {
+    this._visHandler = () => {
+      if (document.hidden) this._handleTabHidden();
+      else this._handleTabVisible();
+    };
+    document.addEventListener("visibilitychange", this._visHandler);
+  }
+  _handleTabHidden() {
+    this._cancelSpeculation();
+    if (!this.activeItemId) return;
+    const p = this.pool.getPlayer(this.activeItemId);
+    if (p && !p.paused) {
+      this._wasPlayingBeforeHidden = true;
+      p.pause();
+    } else {
+      this._wasPlayingBeforeHidden = false;
+    }
+    this._stopTimeLoop(this.activeItemId);
+  }
+  _handleTabVisible() {
+    if (!this.activeItemId) return;
+    if (this._wasPlayingBeforeHidden) {
+      const p2 = this.pool.getPlayer(this.activeItemId);
+      if (p2) p2.play().catch(() => {
+      });
+      this._wasPlayingBeforeHidden = false;
+    }
+    const el = this.itemEls.get(this.activeItemId);
+    const p = this.pool.getPlayer(this.activeItemId);
+    if (el && p) this._startTimeLoop(this.activeItemId, el, p);
+  }
+  _setupObserver() {
+    this.observer = new IntersectionObserver((entries) => {
+      for (const entry of entries) {
+        const id = entry.target.dataset.itemId;
+        if (entry.isIntersecting && entry.intersectionRatio > 0.6) this._activateItem(id);
+      }
+    }, { root: this.container, threshold: [0, 0.6, 1] });
+    for (const el of this.itemEls.values()) this.observer.observe(el);
+  }
+  _setupCellHeightObserver() {
+    this._cellHeight = 0;
+    const measure = () => {
+      const first = this.container.firstElementChild;
+      if (first) this._cellHeight = first.offsetHeight + parseFloat(getComputedStyle(first).marginBottom || "0");
+    };
+    measure();
+    this._resizeObserver = new ResizeObserver(measure);
+    this._resizeObserver.observe(this.container);
+  }
+  _setupScrollEnd() {
+    let scrollTimer;
+    this.container.addEventListener("scroll", () => {
+      this._predictAndSpeculate();
+      clearTimeout(scrollTimer);
+      scrollTimer = setTimeout(() => this._onScrollEnd(), 100);
+    }, { passive: true });
+    this.container.addEventListener("pointerdown", () => this._cancelSpeculation(), { passive: true });
+    this.container.addEventListener("touchstart", () => this._cancelSpeculation(), { passive: true });
+  }
+  _onScrollEnd() {
+    const idx = this.items.findIndex((i) => i.id === this.activeItemId);
+    if (idx < 0) return;
+    const adjacent = [this.items[idx - 1], this.items[idx + 1]].filter(Boolean);
+    for (const item of adjacent) {
+      const p = this.pool.acquire(item.id);
+      this.pool.attachStream(item.id, item.streamingUrl);
+      p.currentTime = 0;
+      if (this._speculativeItemId !== item.id) {
+        p.muted = true;
+        const pid = item.id;
+        const pp = p.play();
+        if (pp) pp.then(() => {
+          if (this.activeItemId !== pid) p.pause();
+        }).catch(() => {
+        });
+      }
+    }
+    this._prefetchThumbnails(idx);
+    for (const adj of adjacent) {
+      if (adj.captionTracks?.length) this._fetchCaptionVTT(adj);
+    }
+    if (idx >= this.items.length - 3) this._loadMore();
+  }
+  _predictAndSpeculate() {
+    const containerHeight = this._cellHeight || this.container.clientHeight;
+    if (containerHeight <= 0 || this.items.length === 0) return;
+    const predictedIndex = Math.round(this.container.scrollTop / containerHeight);
+    const clamped = Math.max(0, Math.min(this.items.length - 1, predictedIndex));
+    if (clamped === this._lastPredictedIndex) return;
+    this._lastPredictedIndex = clamped;
+    if (clamped === this.activeIndex) {
+      this._cancelSpeculation();
+      return;
+    }
+    if (Math.abs(clamped - this.activeIndex) > 1) return;
+    const item = this.items[clamped];
+    if (!item || this._speculativeItemId === item.id) return;
+    this._cancelSpeculation();
+    const player = this.pool.acquire(item.id);
+    this.pool.attachStream(item.id, item.streamingUrl);
+    player.currentTime = 0;
+    player.muted = true;
+    const el = this.itemEls.get(item.id);
+    if (el) {
+      const c = el.querySelector('[data-ref="videoContainer"]');
+      player.style.opacity = "0";
+      if (!c.contains(player)) c.insertBefore(player, c.firstChild);
+    }
+    const p = player.play();
+    if (p) p.catch(() => {
+    });
+    this._speculativeItemId = item.id;
+    this._speculativePlayer = player;
+  }
+  _cancelSpeculation() {
+    if (!this._speculativeItemId) return;
+    const p = this.pool.getPlayer(this._speculativeItemId);
+    if (p) {
+      p.pause();
+      p.style.opacity = "0";
+    }
+    this._speculativeItemId = null;
+    this._speculativePlayer = null;
+    this._lastPredictedIndex = -1;
+  }
+  _activateItem(id) {
+    if (this.activeItemId === id) return;
+    if (this._speculativeItemId && this._speculativeItemId !== id) this._cancelSpeculation();
+    this._speculativeItemId = null;
+    this._speculativePlayer = null;
+    this._lastPredictedIndex = -1;
+    if (this.activeItemId) this._deactivateItem(this.activeItemId);
+    this.activeItemId = id;
+    this.activeIndex = this.items.findIndex((i) => i.id === id);
+    const item = this.items[this.activeIndex];
+    const el = this.itemEls.get(id);
+    const player = this.pool.acquire(id);
+    const isTransfer = !!player._skFeedTransfer;
+    delete player._skFeedTransfer;
+    if (!isTransfer) player.style.opacity = "0";
+    const container = el.querySelector('[data-ref="videoContainer"]');
+    if (!container.contains(player)) container.insertBefore(player, container.firstChild);
+    this.pool.attachStream(id, item.streamingUrl, { isActive: true });
+    this.pool.promoteToActive(id);
+    player.muted = this.isMuted;
+    player.playbackRate = this.playbackRate;
+    if (!isTransfer) player.currentTime = 0;
+    const spinner = el.querySelector('[data-ref="spinner"]');
+    const REVEAL_EVENTS = ["loadeddata", "seeked", "canplay", "timeupdate"];
+    let spinnerTimeout = null;
+    const revealOnFirstFrame = () => {
+      if (player._skRevealedFor === id) return;
+      if (player.readyState < 2) return;
+      player._skRevealedFor = id;
+      player.style.opacity = "1";
+      clearTimeout(spinnerTimeout);
+      spinner.classList.remove("visible");
+      REVEAL_EVENTS.forEach((e) => player.removeEventListener(e, revealOnFirstFrame));
+    };
+    if (isTransfer) {
+      player._skRevealedFor = id;
+      player.style.opacity = "1";
+    } else if (player.readyState >= 2 && !player.seeking) {
+      player._skRevealedFor = id;
+      player.style.opacity = "1";
+    } else {
+      spinnerTimeout = setTimeout(() => spinner.classList.add("visible"), 1e3);
+      REVEAL_EVENTS.forEach((e) => player.addEventListener(e, revealOnFirstFrame));
+    }
+    const playPromise = player.play();
+    if (playPromise) playPromise.catch(() => {
+      if (player.readyState >= 2) revealOnFirstFrame();
+    });
+    this._startTimeLoop(id, el, player);
+    this._invokeOverlay(id, item);
+    this._prefetchThumbnails(this.activeIndex);
+    if (item.captionTracks?.length) this._fetchCaptionVTT(item);
+    const playbackId = StoryboardCache.extractPlaybackId(item.thumbnailUrl);
+    if (playbackId) this.storyboardCache.get(playbackId);
+  }
+  _deactivateItem(id) {
+    const p = this.pool.getPlayer(id);
+    if (p) {
+      p.pause();
+      p.style.opacity = "0";
+      p._skRevealedFor = null;
+    }
+    this._stopTimeLoop(id);
+    this._clearOverlay(id);
+  }
+  // --- Time loop (state emission only, no DOM updates) ---
+  _startTimeLoop(id, el, player) {
+    this._stopTimeLoop(id);
+    const tick = () => {
+      if (this._destroyed) return;
+      if (!player || player.paused) {
+        this.rafIds.set(id, requestAnimationFrame(tick));
+        return;
+      }
+      const current = player.currentTime || 0;
+      const duration = player.duration || 0;
+      const buffered = player.buffered?.length > 0 ? player.buffered.end(player.buffered.length - 1) : 0;
+      this._sk.player._pushState({
+        time: { current, duration, buffered },
+        playerState: "playing"
+      });
+      if (this._captionsOn) {
+        const cues = this._captionCues.get(id);
+        if (cues) {
+          const cue = cues.find((c) => current >= c.startTime && current <= c.endTime) || null;
+          const prev = this._sk.player.activeCue;
+          if (cue !== prev) {
+            this._sk.player._pushState({ activeCue: cue });
+          }
+        }
+      }
+      if (player.ended) {
+        player.currentTime = 0;
+        player.play().catch(() => {
+        });
+      }
+      this.rafIds.set(id, requestAnimationFrame(tick));
+    };
+    this.rafIds.set(id, requestAnimationFrame(tick));
+  }
+  _stopTimeLoop(id) {
+    const r = this.rafIds.get(id);
+    if (r) {
+      cancelAnimationFrame(r);
+      this.rafIds.delete(id);
+    }
+  }
+  // --- Controls ---
+  _bindControls(item, el) {
+    const tapZone = el.querySelector('[data-ref="tapZone"]');
+    if (tapZone) {
+      tapZone.addEventListener("click", () => {
+        const player = this.pool.getPlayer(item.id);
+        if (!player) return;
+        if (player.paused) {
+          player.play().catch(() => {
+          });
+          this._pushPlayerState({ playerState: "playing" });
+        } else {
+          player.pause();
+          this._pushPlayerState({ playerState: "paused" });
+        }
+      });
+    }
+  }
+  // --- Push state to ShortKitPlayer ---
+  _pushPlayerState(updates = {}) {
+    const player = this.pool.getPlayer(this.activeItemId);
+    const item = this.items[this.activeIndex] || null;
+    const state = {
+      currentItem: item,
+      isMuted: this.isMuted,
+      playbackRate: this.playbackRate,
+      captionsEnabled: this._captionsOn,
+      activeCaptionTrack: null,
+      activeCue: null,
+      prefetchedAheadCount: Math.max(0, this.items.length - this.activeIndex - 1),
+      remainingContentCount: this.items.length - this.activeIndex - 1,
+      ...updates
+    };
+    if (player) {
+      state.time = {
+        current: player.currentTime || 0,
+        duration: player.duration || 0,
+        buffered: player.buffered?.length > 0 ? player.buffered.end(player.buffered.length - 1) : 0
+      };
+      if (!updates.playerState) {
+        state.playerState = player.paused ? "paused" : "playing";
+      }
+    }
+    this._sk.player._pushState(state);
+  }
+  // --- Caption VTT fetch (deduped + cached) ---
+  _fetchCaptionVTT(item) {
+    if (this._captionCues.has(item.id) || this._captionFetches.has(item.id)) return;
+    const track = item.captionTracks[0];
+    if (!track?.url) return;
+    const promise = fetch(track.url).then((res) => res.ok ? res.text() : null).then((text) => {
+      if (text) this._captionCues.set(item.id, parseVTT(text));
+    }).catch(() => {
+    }).finally(() => this._captionFetches.delete(item.id));
+    this._captionFetches.set(item.id, promise);
+  }
+  _prefetchThumbnails(centerIndex) {
+    const start = Math.max(0, centerIndex - 3);
+    const end = Math.min(this.items.length, centerIndex + 4);
+    for (let i = start; i < end; i++) {
+      const url = this.items[i].thumbnailUrl;
+      if (!url || this._prefetchedThumbs.has(url)) continue;
+      this._prefetchedThumbs.add(url);
+      const img = new Image();
+      img.src = url;
+    }
+  }
+  // --- Custom overlay helpers ---
+  _createOverlayContainer(itemId, cellEl) {
+    const overlayEl = cellEl.querySelector('[data-ref="overlay"]');
+    if (!overlayEl) return;
+    this._overlayContainers.set(itemId, { el: overlayEl, unsub: null });
+  }
+  _invokeOverlay(itemId, item) {
+    if (!this._options?.config?.overlay) return;
+    const entry = this._overlayContainers.get(itemId);
+    if (!entry) return;
+    const player = this._sk.player;
+    const surface = this;
+    const listeners = [];
+    const scopedPlayer = {
+      get isMuted() {
+        return player.isMuted;
+      },
+      get playbackRate() {
+        return player.playbackRate;
+      },
+      get currentTime() {
+        return player.time.current;
+      },
+      get duration() {
+        return player.time.duration;
+      },
+      get captionsEnabled() {
+        return player.captionsEnabled;
+      },
+      on(event, fn) {
+        player.on(event, fn);
+        listeners.push({ event, fn });
+      },
+      off(event, fn) {
+        player.off(event, fn);
+        const idx = listeners.findIndex((l) => l.event === event && l.fn === fn);
+        if (idx >= 0) listeners.splice(idx, 1);
+      },
+      play() {
+        surface.play();
+      },
+      pause() {
+        surface.pause();
+      },
+      seek(time) {
+        surface.seek(time);
+      },
+      setMuted(muted) {
+        surface.setMuted(muted);
+      },
+      setPlaybackRate(rate) {
+        surface.setPlaybackRate(rate);
+      },
+      setCaptionsEnabled(enabled) {
+        surface.setCaptionsEnabled(enabled);
+      },
+      selectCaptionTrack(track) {
+        surface.selectCaptionTrack(track);
+      },
+      sendContentSignal(signal) {
+        surface.sendContentSignal(signal);
+      },
+      skipToNext() {
+        surface.skipToNext();
+      },
+      skipToPrevious() {
+        surface.skipToPrevious();
+      },
+      seekThumbnail(time) {
+        return surface.seekThumbnail(time);
+      }
+    };
+    const feed = {
+      dismiss: () => {
+        if (surface._feedDismiss) surface._feedDismiss();
+      },
+      navigateUp: () => surface.navigateUp(),
+      navigateDown: () => surface.navigateDown()
+    };
+    entry.unsub = () => {
+      for (const { event, fn } of listeners) player.off(event, fn);
+      listeners.length = 0;
+    };
+    try {
+      this._options.config.overlay(entry.el, { item, player: scopedPlayer, feed });
+    } catch (e) {
+    }
+  }
+  _clearOverlay(itemId) {
+    const entry = this._overlayContainers.get(itemId);
+    if (!entry) return;
+    if (entry.unsub) {
+      entry.unsub();
+      entry.unsub = null;
+    }
+    entry.el.innerHTML = "";
+  }
+}
+const MuteOnSvg = '<svg viewBox="0 0 24 24"><path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/></svg>';
+const MuteOffSvg = '<svg viewBox="0 0 24 24"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/></svg>';
+class SinglePlayer {
+  /**
+   * @param {HTMLElement} containerEl  The player container (.skp-player)
+   * @param {import('../core/shortkit.js').ShortKit} shortKit
+   * @param {object} [options]
+   * @param {object} [options.config]  PlayerConfig from createPlayerConfig()
+   * @param {number} [options.scale]   Visual scale multiplier (default 1.4)
+   * @param {number} [options.padding] Inner padding (default 0)
+   * @param {string} [options.overlayElId]  ID of the feed overlay element (default 'skpFeedOverlay')
+   * @param {Function} [options.onTap]
+   */
+  constructor(containerEl, shortKit, options = {}) {
+    this.container = containerEl;
+    this._sk = shortKit;
+    this._options = options;
+    this._config = options.config || {};
+    this._scale = options.scale ?? 1.4;
+    this._padding = options.padding ?? 0;
+    this._cornerRadius = this._config.cornerRadius ?? 12;
+    this._clickAction = this._config.clickAction || "feed";
+    this._autoplay = this._config.autoplay !== false;
+    this._loop = this._config.loop !== false;
+    this._overlayElId = options.overlayElId || "skpFeedOverlay";
+    this.videoEl = null;
+    this.hlsInstance = null;
+    this.item = null;
+    this.items = [];
+    this._playOverlay = null;
+    this._muteIconEl = null;
+    this._muteFlashTimer = null;
+    this._feedView = null;
+    this._cursor = null;
+    this._hasMore = true;
+    this._destroyed = false;
+    this._overlayEl = null;
+    this._overlayUnsub = null;
+  }
+  // ── Public API ──
+  async init() {
+    const fetchCount = this._clickAction === "feed" ? 10 : 1;
+    const result = await this._sk._apiClient.fetchFeed({ limit: fetchCount });
+    if (!result.items.length) return;
+    this._cursor = result.nextCursor;
+    this._hasMore = result.hasMore;
+    this.items = result.items.map((item) => this._normaliseItem(item));
+    this.item = this.items[0];
+    this._build();
+  }
+  /** Initialize with pre-fetched items instead of calling the API. */
+  initWithItems(items) {
+    this.items = items;
+    this.item = items[0];
+    this._build();
+  }
+  /** Update scale live (dashboard use). */
+  setScale(scale) {
+    this._scale = scale;
+    this.container.style.maxWidth = `${Math.round(240 * scale)}px`;
+  }
+  /** Update padding live (dashboard use). */
+  setPadding(padding) {
+    this._padding = padding;
+    this.container.style.setProperty("--skp-padding", `${padding}px`);
+  }
+  /** Update corner radius live (dashboard use). */
+  setCornerRadius(radius) {
+    this._cornerRadius = radius;
+    this.container.style.setProperty("--skp-radius", `${radius}px`);
+    this.container.style.borderRadius = `${radius}px`;
+  }
+  /** Update click action live (dashboard use). */
+  setClickAction(action) {
+    this._clickAction = action;
+  }
+  /** Update loop live (dashboard use). */
+  setLoop(loop) {
+    this._loop = loop;
+    if (this.videoEl) this.videoEl.loop = loop;
+  }
+  destroy() {
+    this._destroyed = true;
+    clearTimeout(this._muteFlashTimer);
+    this._clearOverlay();
+    if (this.hlsInstance) {
+      this.hlsInstance.destroy();
+      this.hlsInstance = null;
+    }
+    this.container.innerHTML = "";
+    this.videoEl = null;
+    this.item = null;
+    this._playOverlay = null;
+    this._muteIconEl = null;
+    this._overlayEl = null;
+    if (this._feedView) {
+      this._feedView = null;
+    }
+    this._sk._unregisterSurface(this);
+  }
+  // ── Internal: item normalisation ──
+  _normaliseItem(item) {
+    return {
+      id: item.id,
+      streamingUrl: item.streamingUrl,
+      thumbnailUrl: item.thumbnailUrl,
+      title: item.title || "",
+      description: item.description || "",
+      author: item.author || "",
+      section: item.customMetadata?.category?.toUpperCase() || item.customMetadata?.section?.toUpperCase() || "",
+      articleUrl: item.articleUrl || null,
+      duration: item.duration || 0,
+      captionTracks: item.captionTracks || []
+    };
+  }
+  // ── Internal: DOM build ──
+  _build() {
+    this.container.innerHTML = "";
+    this.container.style.setProperty("--skp-radius", `${this._cornerRadius}px`);
+    this.container.style.maxWidth = `${Math.round(240 * this._scale)}px`;
+    this.container.style.setProperty("--skp-padding", `${this._padding}px`);
+    this.container.style.borderRadius = `${this._cornerRadius}px`;
+    this.videoEl = document.createElement("video");
+    this.videoEl.setAttribute("playsinline", "");
+    this.videoEl.setAttribute("webkit-playsinline", "");
+    this.videoEl.muted = true;
+    this.videoEl.loop = this._loop;
+    if (this.item.thumbnailUrl) this.videoEl.poster = this.item.thumbnailUrl;
+    this.container.appendChild(this.videoEl);
+    const meta = document.createElement("div");
+    meta.className = "skp-meta";
+    meta.innerHTML = `
+      ${this.item.section ? `<div class="skp-meta-section">${this.item.section}</div>` : ""}
+      <div class="skp-meta-title">${this.item.title}</div>
+    `;
+    this.container.appendChild(meta);
+    this._muteIconEl = document.createElement("div");
+    this._muteIconEl.className = "skp-mute-icon";
+    this._muteIconEl.innerHTML = MuteOnSvg;
+    this.container.appendChild(this._muteIconEl);
+    this._playOverlay = document.createElement("div");
+    this._playOverlay.className = "skp-play-overlay";
+    if (this._autoplay) this._playOverlay.classList.add("skp-hidden");
+    this._playOverlay.innerHTML = '<svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>';
+    this._playOverlay.addEventListener("click", (e) => {
+      e.stopPropagation();
+      this._playOverlay.classList.add("skp-hidden");
+      this.videoEl.play().catch(() => {
+      });
+    });
+    this.container.appendChild(this._playOverlay);
+    if (this._config.overlay) {
+      this._overlayEl = document.createElement("div");
+      this._overlayEl.style.cssText = "position:absolute;inset:0;z-index:6;pointer-events:auto;";
+      this._overlayEl.dataset.ref = "customOverlay";
+      this.container.appendChild(this._overlayEl);
+    }
+    this.container.addEventListener("click", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      this._handleClick(e);
+    });
+    this._attachStream();
+    if (this._config.overlay && this._overlayEl) {
+      this._invokeOverlay();
+    }
+    if (this._clickAction === "feed") {
+      const overlayEl = document.getElementById(this._overlayElId);
+      if (overlayEl) {
+        this._feedView = new PlayerFeedView(overlayEl, this._sk, this._overlayElId);
+      }
+    }
+  }
+  /** Invoke the developer overlay callback with a scoped subscriber. */
+  _invokeOverlay() {
+    this._clearOverlay();
+    if (!this._overlayEl || !this._config.overlay || !this.item) return;
+    const player = this._sk.player;
+    const listeners = [];
+    const scopedPlayer = {
+      on(event, fn) {
+        player.on(event, fn);
+        listeners.push({ event, fn });
+      }
+    };
+    this._overlayUnsub = () => {
+      for (const { event, fn } of listeners) player.off(event, fn);
+      listeners.length = 0;
+    };
+    try {
+      this._config.overlay(this._overlayEl, { item: this.item, player: scopedPlayer });
+    } catch (e) {
+    }
+  }
+  /** Clear overlay content and unsubscribe tracked listeners. */
+  _clearOverlay() {
+    if (this._overlayUnsub) {
+      this._overlayUnsub();
+      this._overlayUnsub = null;
+    }
+    if (this._overlayEl) {
+      this._overlayEl.innerHTML = "";
+    }
+  }
+  _attachStream() {
+    const url = this.item.streamingUrl;
+    if (!url) return;
+    const Hls2 = typeof window !== "undefined" && window.Hls;
+    if (url.includes(".m3u8") && Hls2 && Hls2.isSupported()) {
+      const hls = new Hls2({
+        startLevel: -1,
+        capLevelToPlayerSize: true,
+        maxBufferLength: 8,
+        maxMaxBufferLength: 15
+      });
+      hls.loadSource(url);
+      hls.attachMedia(this.videoEl);
+      hls.on(Hls2.Events.MANIFEST_PARSED, () => {
+        if (this._autoplay) this.videoEl.play().catch(() => {
+        });
+      });
+      hls.on(Hls2.Events.ERROR, (_, data) => {
+        if (data.fatal) {
+          switch (data.type) {
+            case Hls2.ErrorTypes.NETWORK_ERROR:
+              hls.startLoad();
+              break;
+            default:
+              hls.destroy();
+              break;
+          }
+        }
+      });
+      this.hlsInstance = hls;
+    } else {
+      this.videoEl.src = url;
+      if (this._autoplay) this.videoEl.play().catch(() => {
+      });
+    }
+  }
+  _handleClick(_e) {
+    if (this._playOverlay && !this._playOverlay.classList.contains("skp-hidden")) return;
+    const action = this._clickAction;
+    if (action === "none") return;
+    if (action === "article") {
+      if (this.item?.articleUrl) window.open(this.item.articleUrl, "_blank", "noopener");
+      return;
+    }
+    if (action === "mute") {
+      this.videoEl.muted = !this.videoEl.muted;
+      this._updateMuteIcon();
+      this.container.classList.add("skp-mute-visible");
+      clearTimeout(this._muteFlashTimer);
+      this._muteFlashTimer = setTimeout(() => {
+        this.container.classList.remove("skp-mute-visible");
+      }, 1500);
+      return;
+    }
+    if (action === "feed") {
+      this._openFeed();
+      return;
+    }
+  }
+  _openFeed() {
+    if (!this._feedView || this._feedView._isOpen) return;
+    if (this.videoEl) this.videoEl.pause();
+    this._feedView.open({
+      sourceEl: this.container,
+      video: this.videoEl,
+      hlsInstance: this.hlsInstance,
+      item: this.item,
+      startIndex: 0,
+      items: [...this.items],
+      cursor: this._cursor,
+      hasMore: this._hasMore,
+      onClose: (action, data) => {
+        if (action === "getSourceRect") {
+          return this.container.getBoundingClientRect();
+        }
+        if (action === "closed") {
+          let video = data?.transferVideo;
+          let hls = data?.transferHls;
+          if (!video && this._feedView.feedManager) {
+            const ejected = this._feedView.feedManager.pool.ejectPlayer(this.item.id);
+            if (ejected) {
+              video = ejected.video;
+              hls = ejected.hls;
+            }
+          }
+          if (video) {
+            this.videoEl = video;
+            this.hlsInstance = hls;
+            this.videoEl.loop = this._loop;
+            this.videoEl.muted = true;
+            if (!this.container.contains(this.videoEl)) {
+              this.container.insertBefore(this.videoEl, this.container.firstChild);
+            }
+            this.videoEl.play().catch(() => {
+            });
+          } else {
+            this._rebuildVideo();
+          }
+        }
+      }
+    });
+  }
+  _rebuildVideo() {
+    this.videoEl = document.createElement("video");
+    this.videoEl.setAttribute("playsinline", "");
+    this.videoEl.setAttribute("webkit-playsinline", "");
+    this.videoEl.muted = true;
+    this.videoEl.loop = this._loop;
+    if (this.item.thumbnailUrl) this.videoEl.poster = this.item.thumbnailUrl;
+    this.container.insertBefore(this.videoEl, this.container.firstChild);
+    this.hlsInstance = null;
+    this._attachStream();
+  }
+  _updateMuteIcon() {
+    if (!this._muteIconEl) return;
+    this._muteIconEl.innerHTML = this.videoEl.muted ? MuteOnSvg : MuteOffSvg;
+  }
+}
+class PlayerFeedView {
+  /**
+   * @param {HTMLElement} overlayEl
+   * @param {import('../core/shortkit.js').ShortKit} shortKit
+   * @param {string} [idPrefix]  Element ID prefix (default 'skp')
+   */
+  constructor(overlayEl, shortKit, idPrefix = "skp") {
+    this.overlayEl = overlayEl;
+    this._sk = shortKit;
+    this._prefix = idPrefix;
+    this.backdropEl = overlayEl.querySelector(".skp-feed-backdrop");
+    this.closeBtnEl = document.getElementById(`${idPrefix}FeedCloseBtn`);
+    this.feedEl = document.getElementById(`${idPrefix}Feed`);
+    this.feedManager = null;
+    this._isOpen = false;
+    this._onClose = null;
+    this._escHandler = null;
+    this._openItemId = null;
+    this.closeBtnEl?.addEventListener("click", () => this.close());
+  }
+  async open({ sourceEl, video, hlsInstance, item, startIndex, items, cursor, hasMore, onClose }) {
+    if (this._isOpen) return;
+    this._isOpen = true;
+    this._onClose = onClose;
+    this._openItemId = item.id;
+    const sourceRect = sourceEl.getBoundingClientRect();
+    const sourceRadius = parseFloat(getComputedStyle(sourceEl).borderRadius) || 12;
+    this.overlayEl.classList.add("skp-active");
+    const feedPool = new PlayerPool();
+    const feedShortKit = Object.create(this._sk);
+    feedShortKit._playerPool = feedPool;
+    feedShortKit._storyboardCache = this._sk._storyboardCache;
+    this.feedManager = new EmbeddedFeedManager(this.feedEl, feedShortKit, {
+      idPrefix: this._prefix
+    });
+    if (cursor) this.feedManager._cursor = cursor;
+    if (hasMore !== void 0) this.feedManager._hasMore = hasMore;
+    await this.feedManager.initWithItems([...items], startIndex, { deferActivation: true });
+    if (video && hlsInstance) {
+      this.feedManager.pool.injectPlayer(item.id, video, hlsInstance, item.streamingUrl);
+      video._skFeedTransfer = true;
+      video.loop = true;
+    }
+    const feedItemEl = this.feedManager.itemEls.get(item.id);
+    if (feedItemEl && video) {
+      const c = feedItemEl.querySelector('[data-ref="videoContainer"]');
+      video.style.opacity = "1";
+      if (!c.contains(video)) c.insertBefore(video, c.firstChild);
+    }
+    const feedEl = this.feedEl;
+    feedEl.getBoundingClientRect();
+    const feedRect = feedEl.getBoundingClientRect();
+    const targetRadius = parseFloat(getComputedStyle(feedEl).borderRadius) || 16;
+    const scaleX = sourceRect.width / feedRect.width;
+    const scaleY = sourceRect.height / feedRect.height;
+    const translateX = sourceRect.left - feedRect.left;
+    const translateY = sourceRect.top - feedRect.top;
+    const startRadius = sourceRadius / Math.min(scaleX, scaleY);
+    feedEl.style.transformOrigin = "0 0";
+    feedEl.style.overflow = "hidden";
+    feedEl.style.scrollSnapType = "none";
+    feedEl.style.borderRadius = `${startRadius}px`;
+    feedEl.style.transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
+    feedEl.getBoundingClientRect();
+    feedEl.classList.add("skp-flip-animating");
+    requestAnimationFrame(() => {
+      feedEl.style.transform = "none";
+      feedEl.style.borderRadius = `${targetRadius}px`;
+    });
+    await this._waitForTransitionEnd(feedEl, 450);
+    feedEl.classList.remove("skp-flip-animating");
+    feedEl.style.transformOrigin = "";
+    feedEl.style.overflow = "";
+    feedEl.style.scrollSnapType = "";
+    feedEl.style.transform = "";
+    feedEl.style.borderRadius = "";
+    this.feedManager.startObserver();
+    this.feedManager._activateItem(item.id);
+    this.overlayEl.classList.add("skp-feed-ready");
+    this._escHandler = (e) => {
+      if (e.key === "Escape") this.close();
+    };
+    document.addEventListener("keydown", this._escHandler);
+  }
+  async close() {
+    if (!this._isOpen) return;
+    this._isOpen = false;
+    const feedEl = this.feedEl;
+    const feedWrapper = feedEl.parentNode;
+    const feedRect = feedEl.getBoundingClientRect();
+    const activeItemId = this.feedManager?.activeItemId;
+    let transferBack = false, transferVideo = null, transferHls = null;
+    if (activeItemId === this._openItemId) {
+      const ejected = this.feedManager?.pool.ejectPlayer(activeItemId);
+      if (ejected) {
+        transferBack = true;
+        transferVideo = ejected.video;
+        transferHls = ejected.hls;
+      }
+    }
+    let targetRect = null;
+    if (this._onClose) targetRect = this._onClose("getSourceRect");
+    if (feedRect && targetRect) {
+      if (this.feedManager?.activeItemId && !transferBack) {
+        this.feedManager._deactivateItem(this.feedManager.activeItemId);
+      }
+      feedEl.style.position = "fixed";
+      feedEl.style.left = `${feedRect.left}px`;
+      feedEl.style.top = `${feedRect.top}px`;
+      feedEl.style.width = `${feedRect.width}px`;
+      feedEl.style.height = `${feedRect.height}px`;
+      feedEl.style.zIndex = "9999";
+      feedEl.style.margin = "0";
+      feedEl.style.flex = "none";
+      feedEl.style.aspectRatio = "unset";
+      feedEl.style.maxHeight = "none";
+      document.body.appendChild(feedEl);
+      this.overlayEl.classList.remove("skp-active", "skp-feed-ready");
+      const scaleX = targetRect.width / feedRect.width;
+      const scaleY = targetRect.height / feedRect.height;
+      const translateX = targetRect.left - feedRect.left;
+      const translateY = targetRect.top - feedRect.top;
+      const sourceRadius = parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--skp-radius").trim()) || 12;
+      const endRadius = sourceRadius / Math.min(scaleX, scaleY);
+      feedEl.style.transformOrigin = "0 0";
+      feedEl.style.overflow = "hidden";
+      feedEl.style.scrollSnapType = "none";
+      feedEl.getBoundingClientRect();
+      feedEl.classList.add("skp-flip-animating");
+      requestAnimationFrame(() => {
+        feedEl.style.transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
+        feedEl.style.borderRadius = `${endRadius}px`;
+      });
+      await this._waitForTransitionEnd(feedEl, 450);
+      feedEl.style.visibility = "hidden";
+      feedEl.classList.remove("skp-flip-animating");
+      ["position", "left", "top", "width", "height", "zIndex", "margin", "flex", "aspectRatio", "maxHeight", "transformOrigin", "overflow", "scrollSnapType", "transform", "borderRadius"].forEach((p) => feedEl.style[p] = "");
+      const sidebarEl = feedWrapper.querySelector(".sk-sidebar");
+      feedWrapper.insertBefore(feedEl, sidebarEl);
+      feedEl.style.visibility = "";
+    } else {
+      this.overlayEl.classList.remove("skp-active", "skp-feed-ready");
+    }
+    if (this._onClose) {
+      this._onClose("closed", {
+        transferVideo: transferBack ? transferVideo : null,
+        transferHls: transferBack ? transferHls : null,
+        transferItemId: transferBack ? this._openItemId : null
+      });
+      this._onClose = null;
+    }
+    if (this.feedManager) {
+      this.feedManager.destroy();
+      this.feedManager = null;
+    }
+    if (this._escHandler) {
+      document.removeEventListener("keydown", this._escHandler);
+      this._escHandler = null;
+    }
+    this.overlayEl.classList.remove("skp-active", "skp-feed-ready", "skp-closing");
+  }
+  _waitForTransitionEnd(el, maxMs) {
+    return new Promise((resolve) => {
+      const timeout = setTimeout(resolve, maxMs);
+      el.addEventListener("transitionend", function handler(e) {
+        if (e.target === el) {
+          clearTimeout(timeout);
+          el.removeEventListener("transitionend", handler);
+          resolve();
+        }
+      });
+    });
+  }
+}
+const _isPreview = typeof window !== "undefined" && new URLSearchParams(window.location.search).has("preview");
+class FeedView {
+  /**
+   * @param {HTMLElement} overlayEl  The .skw-feed-overlay element
+   * @param {import('../core/shortkit.js').ShortKit} shortKit
+   * @param {object} [options]
+   * @param {object} [options.storyboardCache]
+   */
+  constructor(overlayEl, shortKit, options = {}) {
+    this.overlayEl = overlayEl;
+    this._sk = shortKit;
+    this.backdropEl = overlayEl.querySelector(".skw-feed-backdrop");
+    this.feedEl = overlayEl.querySelector(".sk-feed") || document.getElementById("skwFeed");
+    this.storyboardCache = options.storyboardCache || shortKit._storyboardCache;
+    this.feedManager = null;
+    this._isOpen = false;
+    this._onClose = null;
+    this._escHandler = null;
+    this._openSlotIndex = -1;
+    this._openItemId = null;
+  }
+  async open({ slotEl, video, hlsInstance, item, startIndex, items, cursor, hasMore, onClose, overlayConfig }) {
+    if (this._isOpen) return;
+    this._isOpen = true;
+    this._onClose = onClose;
+    this._openSlotIndex = startIndex;
+    this._openItemId = item.id;
+    const slotRect = slotEl.getBoundingClientRect();
+    const slotRadius = parseFloat(getComputedStyle(slotEl).borderRadius) || 12;
+    if (_isPreview) {
+      const widgetEl = document.getElementById("widget");
+      if (widgetEl) widgetEl.style.visibility = "hidden";
+    }
+    this.overlayEl.classList.add("skw-active");
+    this.feedManager = new EmbeddedFeedManager(this.feedEl, this._sk, {
+      idPrefix: "skw",
+      config: overlayConfig ? { overlay: overlayConfig } : void 0
+    });
+    this.feedManager._feedDismiss = () => this.close();
+    this.feedManager._cursor = cursor || null;
+    this.feedManager._hasMore = hasMore !== false;
+    await this.feedManager.initWithItems([...items], startIndex, { deferActivation: true });
+    if (video && hlsInstance) {
+      this.feedManager.pool.injectPlayer(item.id, video, hlsInstance, item.streamingUrl);
+      video._skFeedTransfer = true;
+      video.loop = true;
+    }
+    const feedItemEl = this.feedManager.itemEls.get(item.id);
+    if (feedItemEl && video) {
+      const container = feedItemEl.querySelector('[data-ref="videoContainer"]');
+      video.style.opacity = "1";
+      if (!container.contains(video)) container.insertBefore(video, container.firstChild);
+    }
+    const feedEl = this.feedEl;
+    feedEl.getBoundingClientRect();
+    const feedRect = feedEl.getBoundingClientRect();
+    const targetRadius = parseFloat(getComputedStyle(feedEl).borderRadius) || 16;
+    const scaleX = slotRect.width / feedRect.width;
+    const scaleY = slotRect.height / feedRect.height;
+    const translateX = slotRect.left - feedRect.left;
+    const translateY = slotRect.top - feedRect.top;
+    const startRadius = slotRadius / Math.min(scaleX, scaleY);
+    feedEl.style.transformOrigin = "0 0";
+    feedEl.style.overflow = "hidden";
+    feedEl.style.scrollSnapType = "none";
+    feedEl.style.borderRadius = `${startRadius}px`;
+    feedEl.style.transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
+    feedEl.getBoundingClientRect();
+    feedEl.classList.add("skw-flip-animating");
+    requestAnimationFrame(() => {
+      feedEl.style.transform = "none";
+      feedEl.style.borderRadius = `${targetRadius}px`;
+    });
+    await this._waitForTransitionEnd(feedEl, 450);
+    feedEl.classList.remove("skw-flip-animating");
+    feedEl.style.transformOrigin = "";
+    feedEl.style.overflow = "";
+    feedEl.style.scrollSnapType = "";
+    feedEl.style.transform = "";
+    feedEl.style.borderRadius = "";
+    this.feedManager.startObserver();
+    this.feedManager._activateItem(item.id);
+    this.overlayEl.classList.add("skw-feed-ready");
+    this._escHandler = (e) => {
+      if (e.key === "Escape") this.close();
+    };
+    document.addEventListener("keydown", this._escHandler);
+  }
+  dismiss() {
+    this.close();
+  }
+  async close() {
+    if (!this._isOpen) return;
+    this._isOpen = false;
+    if (_isPreview) {
+      const widgetEl = document.getElementById("widget");
+      if (widgetEl) widgetEl.style.visibility = "visible";
+    }
+    const feedEl = this.feedEl;
+    const feedWrapper = feedEl.parentNode;
+    const feedRect = feedEl.getBoundingClientRect();
+    const activeItemId = this.feedManager?.activeItemId;
+    const canTransfer = activeItemId === this._openItemId;
+    let targetSlotRect = null;
+    if (this._onClose) targetSlotRect = this._onClose("getSlotRect");
+    if (feedRect && targetSlotRect) {
+      if (this.feedManager?.activeItemId && !canTransfer) {
+        this.feedManager._deactivateItem(this.feedManager.activeItemId);
+      }
+      feedEl.style.position = "fixed";
+      feedEl.style.left = `${feedRect.left}px`;
+      feedEl.style.top = `${feedRect.top}px`;
+      feedEl.style.width = `${feedRect.width}px`;
+      feedEl.style.height = `${feedRect.height}px`;
+      feedEl.style.zIndex = String(getComputedStyle(this.overlayEl).zIndex || 9999);
+      feedEl.style.margin = "0";
+      feedEl.style.flex = "none";
+      feedEl.style.aspectRatio = "unset";
+      feedEl.style.maxHeight = "none";
+      document.body.appendChild(feedEl);
+      this.overlayEl.classList.remove("skw-active", "skw-feed-ready");
+      const slotRadius = parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--skw-radius").trim()) || 12;
+      const scaleX = targetSlotRect.width / feedRect.width;
+      const scaleY = targetSlotRect.height / feedRect.height;
+      const translateX = targetSlotRect.left - feedRect.left;
+      const translateY = targetSlotRect.top - feedRect.top;
+      const endRadius = slotRadius / Math.min(scaleX, scaleY);
+      feedEl.style.transformOrigin = "0 0";
+      feedEl.style.overflow = "hidden";
+      feedEl.style.scrollSnapType = "none";
+      feedEl.getBoundingClientRect();
+      feedEl.classList.add("skw-flip-animating");
+      requestAnimationFrame(() => {
+        feedEl.style.transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
+        feedEl.style.borderRadius = `${endRadius}px`;
+      });
+      await this._waitForTransitionEnd(feedEl, 450);
+      let transferVideo = null;
+      let transferHls = null;
+      if (canTransfer) {
+        const ejected = this.feedManager?.pool.ejectPlayer(this._openItemId);
+        if (ejected) {
+          transferVideo = ejected.video;
+          transferHls = ejected.hls;
+        }
+      }
+      feedEl.style.visibility = "hidden";
+      feedEl.classList.remove("skw-flip-animating");
+      feedEl.style.position = "";
+      feedEl.style.left = "";
+      feedEl.style.top = "";
+      feedEl.style.width = "";
+      feedEl.style.height = "";
+      feedEl.style.zIndex = "";
+      feedEl.style.margin = "";
+      feedEl.style.flex = "";
+      feedEl.style.aspectRatio = "";
+      feedEl.style.maxHeight = "";
+      feedEl.style.transformOrigin = "";
+      feedEl.style.overflow = "";
+      feedEl.style.scrollSnapType = "";
+      feedEl.style.transform = "";
+      feedEl.style.borderRadius = "";
+      feedWrapper.insertBefore(feedEl, feedWrapper.firstChild);
+      feedEl.style.visibility = "";
+      if (this._onClose) {
+        this._onClose("closed", {
+          transferVideo,
+          transferHls,
+          transferItemId: transferVideo ? this._openItemId : null
+        });
+        this._onClose = null;
+      }
+    } else {
+      this.overlayEl.classList.remove("skw-active", "skw-feed-ready");
+      if (this._onClose) {
+        let transferVideo = null;
+        let transferHls = null;
+        if (canTransfer) {
+          const ejected = this.feedManager?.pool.ejectPlayer(this._openItemId);
+          if (ejected) {
+            transferVideo = ejected.video;
+            transferHls = ejected.hls;
+          }
+        }
+        this._onClose("closed", {
+          transferVideo,
+          transferHls,
+          transferItemId: transferVideo ? this._openItemId : null
+        });
+        this._onClose = null;
+      }
+    }
+    if (this.feedManager) {
+      if (this.feedManager._keyHandler) document.removeEventListener("keydown", this.feedManager._keyHandler);
+      if (this.feedManager._speedCloseHandler) document.removeEventListener("click", this.feedManager._speedCloseHandler);
+      if (this.feedManager._visHandler) document.removeEventListener("visibilitychange", this.feedManager._visHandler);
+      this.feedManager.destroy();
+      this.feedManager = null;
+    }
+    if (this._escHandler) {
+      document.removeEventListener("keydown", this._escHandler);
+      this._escHandler = null;
+    }
+    this.overlayEl.classList.remove("skw-active", "skw-feed-ready", "skw-closing");
+  }
+  _waitForTransitionEnd(el, maxMs) {
+    return new Promise((resolve) => {
+      const timeout = setTimeout(resolve, maxMs);
+      el.addEventListener("transitionend", function handler(e) {
+        if (e.target === el) {
+          clearTimeout(timeout);
+          el.removeEventListener("transitionend", handler);
+          resolve();
+        }
+      });
+    });
+  }
+}
+const _isIOSSafari = typeof navigator !== "undefined" && (/iPad|iPhone|iPod/.test(navigator.userAgent) || navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1);
+class WidgetPlayerPool {
+  static PRELOAD_HLS_CONFIG = { startLevel: 0, capLevelToPlayerSize: true, maxBufferLength: 2, maxMaxBufferLength: 4 };
+  static ACTIVE_HLS_CONFIG = { startLevel: -1, capLevelToPlayerSize: true, maxBufferLength: 8, maxMaxBufferLength: 15 };
+  constructor(poolSize = 2, { Hls: HlsClass } = {}) {
+    this._Hls = HlsClass ?? (typeof Hls !== "undefined" ? Hls : null);
+    this.players = Array.from({ length: poolSize }, () => this._createPlayer());
+    this.assignments = /* @__PURE__ */ new Map();
+    this.hlsInstances = /* @__PURE__ */ new Map();
+  }
+  _createPlayer() {
+    const video = document.createElement("video");
+    video.playsInline = true;
+    video.preload = _isIOSSafari ? "metadata" : "auto";
+    video.loop = false;
+    video.muted = true;
+    video.setAttribute("webkit-playsinline", "");
+    return video;
+  }
+  acquire(itemId) {
+    if (this.assignments.has(itemId)) return this.assignments.get(itemId);
+    const assigned = new Set(this.assignments.values());
+    let player = this.players.find((p) => !assigned.has(p));
+    if (!player) {
+      const oldest = this.assignments.keys().next().value;
+      player = this.assignments.get(oldest);
+      player.pause();
+      this._destroyHls(oldest);
+      player.removeAttribute("src");
+      player.load();
+      if (player.parentNode) player.parentNode.removeChild(player);
+      this.assignments.delete(oldest);
+    }
+    this.assignments.set(itemId, player);
+    return player;
+  }
+  attachStream(itemId, streamingUrl, { isActive = false } = {}) {
+    const player = this.assignments.get(itemId);
+    if (!player) return;
+    if (player._skCurrentUrl === streamingUrl) return;
+    this._destroyHls(itemId);
+    const HlsClass = this._Hls;
+    if (streamingUrl.includes(".m3u8") && HlsClass && HlsClass.isSupported()) {
+      const hlsConfig = isActive ? WidgetPlayerPool.ACTIVE_HLS_CONFIG : WidgetPlayerPool.PRELOAD_HLS_CONFIG;
+      const hls = new HlsClass(hlsConfig);
+      hls.loadSource(streamingUrl);
+      hls.attachMedia(player);
+      hls.on(HlsClass.Events.ERROR, (_event, data) => {
+        if (!data.fatal) return;
+        switch (data.type) {
+          case HlsClass.ErrorTypes.MEDIA_ERROR:
+            hls.recoverMediaError();
+            break;
+          case HlsClass.ErrorTypes.NETWORK_ERROR:
+            setTimeout(() => {
+              if (!hls.destroyed) hls.startLoad();
+            }, 2e3);
+            break;
+          default:
+            hls.destroy();
+            break;
+        }
+      });
+      this.hlsInstances.set(itemId, hls);
+    } else {
+      player.src = streamingUrl;
+    }
+    player._skCurrentUrl = streamingUrl;
+  }
+  promoteToActive(itemId) {
+    const hls = this.hlsInstances.get(itemId);
+    if (hls) {
+      hls.config.maxBufferLength = WidgetPlayerPool.ACTIVE_HLS_CONFIG.maxBufferLength;
+      hls.config.maxMaxBufferLength = WidgetPlayerPool.ACTIVE_HLS_CONFIG.maxMaxBufferLength;
+      hls.autoLevelCapping = -1;
+      hls.nextAutoLevel = -1;
+    }
+  }
+  _destroyHls(itemId) {
+    const hls = this.hlsInstances.get(itemId);
+    if (hls) {
+      hls.destroy();
+      this.hlsInstances.delete(itemId);
+    }
+  }
+  release(itemId) {
+    const player = this.assignments.get(itemId);
+    if (player) {
+      player.pause();
+      this._destroyHls(itemId);
+      player._skCurrentUrl = null;
+      if (player.parentNode) player.parentNode.removeChild(player);
+      this.assignments.delete(itemId);
+    }
+  }
+  getPlayer(itemId) {
+    return this.assignments.get(itemId) || null;
+  }
+  /** Remove video+HLS from pool WITHOUT destroying or pausing. Returns {video, hls} or null. */
+  ejectPlayer(itemId) {
+    const video = this.assignments.get(itemId);
+    const hls = this.hlsInstances.get(itemId);
+    if (!video) return null;
+    if (video.parentNode) video.parentNode.removeChild(video);
+    this.assignments.delete(itemId);
+    this.hlsInstances.delete(itemId);
+    const idx = this.players.indexOf(video);
+    if (idx >= 0) this.players[idx] = this._createPlayer();
+    return { video, hls };
+  }
+  /** Re-inject a previously ejected video+HLS back into the pool. */
+  injectPlayer(itemId, video, hls, streamingUrl) {
+    if (this.assignments.has(itemId)) this.release(itemId);
+    this.assignments.set(itemId, video);
+    if (hls) this.hlsInstances.set(itemId, hls);
+    video._skCurrentUrl = streamingUrl || null;
+    if (!this.players.includes(video)) this.players.push(video);
+  }
+}
+class WidgetManager {
+  /**
+   * @param {HTMLElement} containerEl  The widget container element
+   * @param {import('../core/shortkit.js').ShortKit} shortKit
+   * @param {object} [options]
+   * @param {object} [options.config]  Widget configuration (from createWidgetConfig)
+   */
+  constructor(containerEl, shortKit, options = {}) {
+    this._sk = shortKit;
+    const cfg = options.config || {};
+    this.config = {
+      count: cfg.cardCount || 3,
+      visibleCount: cfg.visibleCount || cfg.cardCount || 3,
+      scrollable: cfg.scrollable || false,
+      autoRotate: cfg.autoRotate !== void 0 ? cfg.autoRotate : true,
+      rotationPause: cfg.rotationInterval || 500,
+      highlight: cfg.highlight === true,
+      slotScale: cfg.slotScale || 1.4,
+      slotGap: cfg.cardSpacing ?? 10,
+      slotRadius: cfg.cornerRadius ?? 12,
+      clickAction: cfg.clickAction || "feed",
+      autoplay: cfg.autoplay !== false,
+      // Custom overlay callback (accepts either key name)
+      overlay: cfg.overlay || cfg.cardOverlay || null
+    };
+    this.container = containerEl;
+    this.trackEl = containerEl.querySelector(".skw-track") || containerEl.querySelector('[data-ref="track"]');
+    this.dotsEl = containerEl.querySelector(".skw-dots") || containerEl.querySelector('[data-ref="dots"]');
+    this.pool = new WidgetPlayerPool(this.config.count + 1);
+    this.storyboardCache = shortKit._storyboardCache;
+    this.items = [];
+    this.slotEls = [];
+    this.activeIndex = -1;
+    this.rotationTimer = null;
+    this.isModalOpen = false;
+    this._slotWidth = 200;
+    this._hasActivated = false;
+    this._wasPlaying = false;
+    this._isHovering = false;
+    this._feedOverlayEl = null;
+    this.feedView = null;
+    this._slotOverlays = /* @__PURE__ */ new Map();
+  }
+  async init() {
+    const fetchCount = this.config.scrollable ? this.config.count * 3 : this.config.count;
+    const result = await this._sk._apiClient.fetchFeed({ limit: Math.max(fetchCount, 10) });
+    this.items = this._mapItems(result.items);
+    this._cursor = result.nextCursor;
+    this._hasMore = result.hasMore;
+    this._computeSlotWidth();
+    this._buildSlots();
+    this._buildDots();
+    this.container.style.setProperty("--skw-slot-gap", `${this.config.slotGap}px`);
+    this.container.style.setProperty("--skw-radius", `${this.config.slotRadius}px`);
+    this.container.style.setProperty("--skw-slot-scale", this.config.slotScale);
+    if (this.config.highlight) {
+      this.container.classList.add("skw-highlight");
+    }
+    const needsScroll = this.config.scrollable || this.config.count > this.config.visibleCount;
+    if (needsScroll) {
+      this.container.classList.add("skw-scrollable");
+      this._setupCarousel();
+    }
+    this._setupResize();
+    this._setupVisibility();
+    this._prewarmSlots();
+    if (this.items.length > 0) {
+      if (this.config.autoplay) {
+        this._activateSlot(0);
+      } else {
+        this.activeIndex = 0;
+        this._hasActivated = true;
+        this.slotEls[0]?.classList.add("skw-active");
+        const dots = this.dotsEl.querySelectorAll(".skw-dot");
+        if (dots[0]) dots[0].classList.add("skw-dot-active");
+      }
+    }
+  }
+  _mapItems(rawItems) {
+    return rawItems.filter((item) => !item.type || item.type === "content").map((item) => ({
+      id: item.id,
+      streamingUrl: item.streamingUrl,
+      thumbnailUrl: item.thumbnailUrl,
+      title: item.title || "",
+      description: item.description || "",
+      author: item.author || "",
+      section: item.customMetadata?.category?.toUpperCase() || item.customMetadata?.section?.toUpperCase() || "",
+      articleUrl: item.articleUrl || item.publisherUrl || null,
+      duration: item.duration || 0,
+      captionTracks: item.captionTracks || []
+    }));
+  }
+  /** Pre-attach HLS streams and prime decoders for all visible slots. */
+  _prewarmSlots() {
+    const count = Math.min(this.slotEls.length, this.items.length);
+    const warmCount = _isIOSSafari ? Math.min(count, 2) : count;
+    for (let i = 0; i < warmCount; i++) {
+      const item = this.items[i];
+      const slotEl = this.slotEls[i];
+      const player = this.pool.acquire(item.id);
+      this.pool.attachStream(item.id, item.streamingUrl);
+      const thumbContainer = slotEl.querySelector(".skw-slot-thumb");
+      player.style.opacity = "0";
+      if (!thumbContainer.contains(player)) {
+        thumbContainer.appendChild(player);
+      }
+      player.muted = true;
+      player.currentTime = 0;
+      if (this.config.autoplay) {
+        if (_isIOSSafari && i !== 0) {
+          player.preload = "auto";
+        } else {
+          const p = player.play();
+          if (p) p.then(() => {
+            if (i !== 0) player.pause();
+          }).catch(() => {
+          });
+        }
+      }
+    }
+  }
+  _computeSlotWidth() {
+    const trackWidth = this.trackEl.clientWidth || this.container.clientWidth;
+    const trackStyle = getComputedStyle(this.trackEl);
+    const padding = parseFloat(trackStyle.paddingLeft || 0) + parseFloat(trackStyle.paddingRight || 0);
+    const gapValue = this.config.slotGap;
+    const scale = this.config.slotScale;
+    const totalGap = this.config.count > 1 ? (this.config.count - 1) * gapValue : 0;
+    this._slotWidth = Math.max(100, (trackWidth - padding - totalGap) / (this.config.count * scale));
+  }
+  _buildSlots() {
+    this.trackEl.innerHTML = "";
+    this.slotEls = [];
+    const visibleCount = this.config.scrollable ? this.items.length : Math.min(this.config.count, this.items.length);
+    for (let i = 0; i < visibleCount; i++) {
+      const item = this.items[i];
+      const slot = this._createSlotEl(item, i);
+      this.trackEl.appendChild(slot);
+      this.slotEls.push(slot);
+    }
+  }
+  _createSlotEl(item, index) {
+    const slot = document.createElement("div");
+    slot.className = "skw-slot";
+    slot.dataset.index = index;
+    slot.style.setProperty("--skw-slot-width", `${this._slotWidth}px`);
+    const thumbStyle = item.thumbnailUrl ? `background-image: url('${item.thumbnailUrl}');` : "";
+    slot.innerHTML = `<div class="skw-slot-thumb" style="${thumbStyle}"></div>`;
+    const overlayEl = document.createElement("div");
+    overlayEl.className = "skw-slot-overlay";
+    overlayEl.dataset.ref = "customOverlay";
+    slot.appendChild(overlayEl);
+    this._slotOverlays.set(index, { el: overlayEl, unsub: null });
+    slot.addEventListener("click", () => this._handleSlotClick(index));
+    slot.addEventListener("mouseenter", () => {
+      if (index === this.activeIndex) return;
+      this._isHovering = true;
+      clearTimeout(this.rotationTimer);
+      this._activateSlot(index, { scroll: false });
+    });
+    slot.addEventListener("mouseleave", () => {
+      this._isHovering = false;
+      if (this.config.autoRotate && !this.isModalOpen) {
+        const player = this.pool.getPlayer(this.items[this.activeIndex]?.id);
+        if (player && player.ended) {
+          this._onPreviewEnded();
+        }
+      }
+    });
+    return slot;
+  }
+  _buildDots() {
+    this.dotsEl.innerHTML = "";
+    const dotCount = this.config.scrollable ? this.items.length : Math.min(this.config.count, this.items.length);
+    for (let i = 0; i < dotCount; i++) {
+      const dot = document.createElement("button");
+      dot.className = "skw-dot";
+      dot.setAttribute("aria-label", `Go to video ${i + 1}`);
+      dot.addEventListener("click", (e) => {
+        e.stopPropagation();
+        clearTimeout(this.rotationTimer);
+        this._activateSlot(i);
+      });
+      this.dotsEl.appendChild(dot);
+    }
+  }
+  _activateSlot(index, { scroll = true } = {}) {
+    if (index === this.activeIndex && this._hasActivated) return;
+    if (this._hasActivated) {
+      this._deactivateSlot(this.activeIndex);
+    }
+    this.activeIndex = index;
+    this._hasActivated = true;
+    const item = this.items[index];
+    const slotEl = this.slotEls[index];
+    this.slotEls.forEach((el, i) => el.classList.toggle("skw-active", i === index));
+    const dots = this.dotsEl.querySelectorAll(".skw-dot");
+    dots.forEach((dot, i) => dot.classList.toggle("skw-dot-active", i === index));
+    const player = this.pool.acquire(item.id);
+    const isTransferBack = !!player._skFeedTransfer;
+    delete player._skFeedTransfer;
+    player.loop = false;
+    player.muted = true;
+    if (!isTransferBack && (player.ended || player.currentTime === 0)) {
+      player.currentTime = 0;
+    }
+    if (!isTransferBack) player.style.opacity = "0";
+    const thumbContainer = slotEl.querySelector(".skw-slot-thumb");
+    if (!thumbContainer.contains(player)) {
+      thumbContainer.appendChild(player);
+    }
+    this.pool.attachStream(item.id, item.streamingUrl, { isActive: true });
+    const REVEAL_EVENTS = ["loadeddata", "seeked", "canplay", "timeupdate"];
+    const reveal = () => {
+      if (player._skwRevealed === item.id) return;
+      if (player.readyState < 2) return;
+      player._skwRevealed = item.id;
+      player.style.opacity = "1";
+      REVEAL_EVENTS.forEach((e) => player.removeEventListener(e, reveal));
+    };
+    if (isTransferBack || player.readyState >= 2 && !player.seeking && player._skCurrentUrl === item.streamingUrl) {
+      player._skwRevealed = item.id;
+      player.style.opacity = "1";
+    } else {
+      REVEAL_EVENTS.forEach((e) => player.addEventListener(e, reveal));
+    }
+    player.onended = () => this._onPreviewEnded();
+    player.play().catch(() => {
+    });
+    if (this.config.scrollable && scroll) {
+      slotEl.scrollIntoView({ behavior: "smooth", inline: "center", block: "nearest" });
+    }
+    if (this.config.overlay) {
+      this._invokeSlotOverlay(index, item);
+    }
+  }
+  _deactivateSlot(index) {
+    const item = this.items[index];
+    if (!item) return;
+    const player = this.pool.getPlayer(item.id);
+    if (player) {
+      player.pause();
+      player.onended = null;
+      player.style.opacity = "0";
+      player._skwRevealed = null;
+    }
+    this._clearSlotOverlay(index);
+  }
+  /** Invoke the developer overlay callback for a widget slot. */
+  _invokeSlotOverlay(index, item) {
+    const entry = this._slotOverlays.get(index);
+    if (!entry) return;
+    if (!this.config.overlay) return;
+    this._clearSlotOverlay(index);
+    const player = this._sk.player;
+    const listeners = [];
+    const scopedPlayer = {
+      get isMuted() {
+        return player.isMuted;
+      },
+      get playbackRate() {
+        return player.playbackRate;
+      },
+      get currentTime() {
+        return player.time.current;
+      },
+      get duration() {
+        return player.time.duration;
+      },
+      get captionsEnabled() {
+        return player.captionsEnabled;
+      },
+      on(event, fn) {
+        player.on(event, fn);
+        listeners.push({ event, fn });
+      },
+      off(event, fn) {
+        player.off(event, fn);
+        const idx = listeners.findIndex((l) => l.event === event && l.fn === fn);
+        if (idx >= 0) listeners.splice(idx, 1);
+      }
+    };
+    entry.unsub = () => {
+      for (const { event, fn } of listeners) player.off(event, fn);
+      listeners.length = 0;
+    };
+    try {
+      this.config.overlay(entry.el, { item, player: scopedPlayer });
+    } catch (e) {
+    }
+  }
+  /** Clear a slot's overlay content and unsubscribe tracked listeners. */
+  _clearSlotOverlay(index) {
+    const entry = this._slotOverlays.get(index);
+    if (!entry) return;
+    if (entry.unsub) {
+      entry.unsub();
+      entry.unsub = null;
+    }
+    entry.el.innerHTML = "";
+  }
+  _onPreviewEnded() {
+    if (!this.config.autoRotate || this.isModalOpen || this._isHovering) return;
+    this.rotationTimer = setTimeout(() => {
+      this._advanceRotation();
+    }, this.config.rotationPause);
+  }
+  _advanceRotation() {
+    const nextIndex = (this.activeIndex + 1) % this.slotEls.length;
+    this._activateSlot(nextIndex);
+  }
+  _setupCarousel() {
+    let scrollTimer;
+    this.trackEl.addEventListener("scroll", () => {
+      clearTimeout(scrollTimer);
+      scrollTimer = setTimeout(() => this._onCarouselScrollEnd(), 100);
+    }, { passive: true });
+  }
+  _onCarouselScrollEnd() {
+    if (this._isHovering) return;
+    const trackRect = this.trackEl.getBoundingClientRect();
+    const centerX = trackRect.left + trackRect.width / 2;
+    let closestIndex = 0;
+    let closestDist = Infinity;
+    this.slotEls.forEach((el, i) => {
+      const rect = el.getBoundingClientRect();
+      const slotCenter = rect.left + rect.width / 2;
+      const dist = Math.abs(slotCenter - centerX);
+      if (dist < closestDist) {
+        closestDist = dist;
+        closestIndex = i;
+      }
+    });
+    if (closestIndex !== this.activeIndex) {
+      clearTimeout(this.rotationTimer);
+      this._activateSlot(closestIndex);
+    }
+    if (closestIndex >= this.items.length - 3) {
+      this._loadMore();
+    }
+  }
+  async _loadMore() {
+    if (this._loadingMore || !this._hasMore) return;
+    this._loadingMore = true;
+    try {
+      const result = await this._sk._apiClient.fetchFeed({
+        limit: 10,
+        cursor: this._cursor
+      });
+      this._cursor = result.nextCursor;
+      this._hasMore = result.hasMore;
+      const newItems = this._mapItems(result.items);
+      for (const item of newItems) {
+        if (this.items.some((existing) => existing.id === item.id)) continue;
+        this.items.push(item);
+        const i = this.items.length - 1;
+        const slot = this._createSlotEl(item, i);
+        this.trackEl.appendChild(slot);
+        this.slotEls.push(slot);
+        const dot = document.createElement("button");
+        dot.className = "skw-dot";
+        dot.setAttribute("aria-label", `Go to video ${i + 1}`);
+        dot.addEventListener("click", (e) => {
+          e.stopPropagation();
+          clearTimeout(this.rotationTimer);
+          this._activateSlot(i);
+        });
+        this.dotsEl.appendChild(dot);
+      }
+    } finally {
+      this._loadingMore = false;
+    }
+  }
+  _setupResize() {
+    this._resizeObserver = new ResizeObserver(() => {
+      this._computeSlotWidth();
+      this.slotEls.forEach((el) => {
+        el.style.setProperty("--skw-slot-width", `${this._slotWidth}px`);
+      });
+    });
+    this._resizeObserver.observe(this.container);
+  }
+  _setupVisibility() {
+    this._visHandler = () => {
+      if (document.hidden) {
+        clearTimeout(this.rotationTimer);
+        const item = this.items[this.activeIndex];
+        if (item) {
+          const player = this.pool.getPlayer(item.id);
+          if (player && !player.paused) {
+            this._wasPlaying = true;
+            player.pause();
+          }
+        }
+      } else {
+        if (this._wasPlaying && !this.isModalOpen) {
+          const item = this.items[this.activeIndex];
+          if (item) {
+            const player = this.pool.getPlayer(item.id);
+            if (player) player.play().catch(() => {
+            });
+          }
+          this._wasPlaying = false;
+        }
+      }
+    };
+    document.addEventListener("visibilitychange", this._visHandler);
+  }
+  destroy() {
+    clearTimeout(this.rotationTimer);
+    if (this._hasActivated) {
+      this._deactivateSlot(this.activeIndex);
+    }
+    for (const [itemId] of this.pool.assignments) {
+      this.pool.release(itemId);
+    }
+    if (this._resizeObserver) {
+      this._resizeObserver.disconnect();
+      this._resizeObserver = null;
+    }
+    if (this._visHandler) {
+      document.removeEventListener("visibilitychange", this._visHandler);
+      this._visHandler = null;
+    }
+    if (this._feedOverlayEl && this._feedOverlayEl.parentNode) {
+      this._feedOverlayEl.parentNode.removeChild(this._feedOverlayEl);
+      this._feedOverlayEl = null;
+    }
+    this.trackEl.innerHTML = "";
+    this.dotsEl.innerHTML = "";
+    this.container.classList.remove("skw-scrollable", "skw-highlight");
+    this.container.removeAttribute("style");
+    this.items = [];
+    this.slotEls = [];
+    this.activeIndex = -1;
+    this._hasActivated = false;
+  }
+  _handleSlotClick(index) {
+    const action = this.config.clickAction;
+    if (action === "none") return;
+    if (action === "article") {
+      const item = this.items[index];
+      if (item?.articleUrl) window.open(item.articleUrl, "_blank", "noopener");
+      return;
+    }
+    if (action === "mute") {
+      const item = this.items[index];
+      const player = this.pool.getPlayer(item?.id);
+      if (player) player.muted = !player.muted;
+      return;
+    }
+    this._openFeedOverlay(index);
+  }
+  _ensureFeedView() {
+    if (this.feedView) return;
+    const overlay = document.createElement("div");
+    overlay.className = "skw-feed-overlay";
+    overlay.innerHTML = `
+      <div class="skw-feed-backdrop"></div>
+      <div class="sk-page">
+        <div class="sk-feed-wrapper">
+          <div class="sk-feed"></div>
+        </div>
+      </div>
+    `;
+    document.body.appendChild(overlay);
+    this._feedOverlayEl = overlay;
+    this.feedView = new FeedView(this._feedOverlayEl, this._sk, {
+      storyboardCache: this.storyboardCache
+    });
+  }
+  _openFeedOverlay(index) {
+    this._ensureFeedView();
+    if (!this.feedView) return;
+    clearTimeout(this.rotationTimer);
+    this.isModalOpen = true;
+    const item = this.items[index];
+    const activeItem = this.items[this.activeIndex];
+    if (activeItem && activeItem.id !== item.id) {
+      const player = this.pool.getPlayer(activeItem.id);
+      if (player) {
+        player.pause();
+        player.onended = null;
+      }
+    }
+    const clickedPlayer = this.pool.getPlayer(item.id);
+    if (clickedPlayer) clickedPlayer.onended = null;
+    const slotEl = this.slotEls[index];
+    const ejected = this.pool.ejectPlayer(item.id);
+    this.feedView.open({
+      slotEl,
+      video: ejected?.video || null,
+      hlsInstance: ejected?.hls || null,
+      item,
+      overlayConfig: this.config.overlay || null,
+      startIndex: index,
+      items: [...this.items],
+      cursor: this._cursor,
+      hasMore: this._hasMore,
+      onClose: (action, data) => {
+        if (action === "getSlotRect") {
+          if (this.activeIndex !== index) {
+            this._deactivateSlot(this.activeIndex);
+            this.slotEls.forEach((el, i) => el.classList.toggle("skw-active", i === index));
+            const dots = this.dotsEl.querySelectorAll(".skw-dot");
+            dots.forEach((dot, i) => dot.classList.toggle("skw-dot-active", i === index));
+            this.activeIndex = index;
+          }
+          const targetSlot = this.slotEls[index];
+          if (targetSlot) {
+            targetSlot.scrollIntoView({ behavior: "instant", inline: "center", block: "nearest" });
+            return targetSlot.getBoundingClientRect();
+          }
+          return null;
+        }
+        if (action === "closed") {
+          this.isModalOpen = false;
+          let video = data?.transferVideo;
+          let hls = data?.transferHls;
+          if (!video && this.feedView.feedManager) {
+            const ejected2 = this.feedView.feedManager.pool.ejectPlayer(item.id);
+            if (ejected2) {
+              video = ejected2.video;
+              hls = ejected2.hls;
+            }
+          }
+          if (video) {
+            video.loop = false;
+            video.muted = true;
+            video._skFeedTransfer = true;
+            this.pool.injectPlayer(item.id, video, hls, item.streamingUrl);
+            const slotThumb = this.slotEls[index]?.querySelector(".skw-slot-thumb");
+            if (slotThumb && video) {
+              video.style.opacity = "1";
+              if (!slotThumb.contains(video)) slotThumb.appendChild(video);
+            }
+          }
+          this._hasActivated = false;
+          this._activateSlot(this.activeIndex);
+        }
+      }
+    });
+  }
+}
+let injected = false;
+const CSS = `
+/* ShortKit SDK — functional layout CSS (injected at runtime) */
+
+/* Feed page layout */
+.sk-page{display:flex;justify-content:center;align-items:center;height:100%;background:#000;padding:12px 16px;overflow:hidden}
+.sk-feed-wrapper{display:flex;align-items:center;gap:12px;height:100%;max-height:100%}
+
+/* Feed container */
+.sk-feed{position:relative;height:100%;aspect-ratio:9/16;overflow-y:scroll;scroll-snap-type:y mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;background:#000;border-radius:16px}
+.sk-feed::-webkit-scrollbar{display:none}
+
+/* Feed item */
+.sk-feed-item{position:relative;height:calc(100% - 6px);width:100%;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden;background:#0a0a0a;border-radius:16px;margin-bottom:6px}
+
+/* Video container */
+.sk-video-container{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;background-size:cover;background-position:center}
+.sk-video-container video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .15s ease}
+
+/* Tap zone */
+.sk-tap-zone{position:absolute;inset:0;z-index:3;cursor:pointer}
+
+/* Overlay container */
+.sk-overlay{position:absolute;inset:0;z-index:4;pointer-events:none}
+.sk-overlay>*{pointer-events:auto}
+
+/* Spinner */
+.sk-spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:32px;height:32px;border:3px solid rgba(255,255,255,.2);border-top-color:#fff;border-radius:50%;opacity:0;pointer-events:none;z-index:2}
+.sk-spinner.visible{opacity:1;animation:sk-spin .8s linear infinite}
+@keyframes sk-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
+
+/* Widget slot */
+.skw-slot{position:relative;overflow:hidden;cursor:pointer}
+.skw-slot video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .2s ease}
+.skw-slot-thumb{position:absolute;inset:0;background-size:cover;background-position:center}
+.skw-slot-overlay{position:absolute;inset:0;z-index:4;pointer-events:none}
+.skw-slot-overlay>*{pointer-events:auto}
+
+/* FLIP animation */
+.sk-feed.skw-flip-animating{transition:transform .4s cubic-bezier(.32,.72,0,1),border-radius .4s cubic-bezier(.32,.72,0,1);will-change:transform}
+
+/* Feed overlay states */
+.skw-feed-overlay{position:fixed;inset:0;z-index:9999;display:none;flex-direction:column}
+.skw-feed-overlay.skw-active{display:flex}
+.skw-feed-overlay .skw-feed-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);opacity:0;transition:opacity .35s ease;pointer-events:none}
+.skw-feed-overlay.skw-active .skw-feed-backdrop{opacity:1}
+.skw-feed-overlay .sk-page{position:relative;z-index:1;flex:1;pointer-events:none}
+.skw-feed-overlay.skw-feed-ready .sk-page{pointer-events:auto}
+.skw-feed-overlay.skw-closing .skw-feed-backdrop{opacity:0;transition:none}
+`;
+function injectStyles() {
+  if (injected) return;
+  injected = true;
+  const style = document.createElement("style");
+  style.setAttribute("data-shortkit", "");
+  style.textContent = CSS;
+  (document.head || document.documentElement).appendChild(style);
+}
+const ShortKitVersion = "0.3.0";
+class ShortKit {
+  constructor(options = {}) {
+    injectStyles();
+    if (!options.apiKey) throw new Error("ShortKit: apiKey is required");
+    this._destroyed = false;
+    this._options = options;
+    this._surfaces = /* @__PURE__ */ new Set();
+    this._loadingView = options.loadingView || null;
+    this._clientAppName = options.clientAppName || null;
+    this._clientAppVersion = options.clientAppVersion || null;
+    this._customDimensions = options.customDimensions || null;
+    this._onContentTapped = options.onContentTapped || null;
+    this._onRefreshRequested = options.onRefreshRequested || null;
+    this._onDidFetchContentItems = options.onDidFetchContentItems || null;
+    this._identity = new IdentityManager({
+      userId: options.userId,
+      onResolve: (userId, anonId) => {
+        this._apiClient.resolveIdentity(userId, anonId);
+      }
+    });
+    this._apiClient = new APIClient({
+      baseUrl: options.apiBase || "https://api.shortkit.dev",
+      apiKey: options.apiKey,
+      getEffectiveId: () => this._identity.effectiveId
+    });
+    this.player = new ShortKitPlayer();
+    this._playerPool = new PlayerPool();
+    this._storyboardCache = new StoryboardCache();
+    this._batcher = new EventBatcher({
+      postEvents: (events) => this._apiClient.postEvents(events),
+      beaconEvents: (events) => this._apiClient.beaconEvents(events)
+    });
+    this._tracker = new EngagementTracker({
+      onEvent: (event) => this._batcher.add(event)
+    });
+    this._batcher.start();
+  }
+  // Identity
+  setUserId(id) {
+    this._identity.setUserId(id);
+  }
+  clearUserId() {
+    this._identity.clearUserId();
+  }
+  // Content
+  async fetchContent({ limit = 10, filter } = {}) {
+    const result = await this._apiClient.fetchFeed({ limit, filter });
+    return result.items;
+  }
+  async preloadFeed({ filter, limit = 10 } = {}) {
+    const result = await this._apiClient.fetchFeed({ limit, filter });
+    if (result.items.length > 0) {
+      const first = result.items[0];
+      if (first.thumbnailUrl) new Image().src = first.thumbnailUrl;
+      if (first.streamingUrl) fetch(first.streamingUrl).catch(() => {
+      });
+    }
+    return result;
+  }
+  // Surface factories
+  createFeed(containerEl, options = {}) {
+    const config = createFeedConfig(options.config);
+    const feed = new FeedManager(containerEl, this, { ...options, config });
+    this._registerSurface(feed);
+    feed.init();
+    return feed;
+  }
+  createPlayer(containerEl, options = {}) {
+    const config = createPlayerConfig(options.config);
+    const player = new SinglePlayer(containerEl, this, { ...options, config });
+    this._registerSurface(player);
+    return player;
+  }
+  createWidget(containerEl, options = {}) {
+    const config = createWidgetConfig(options.config);
+    const widget = new WidgetManager(containerEl, this, { ...options, config });
+    this._registerSurface(widget);
+    return widget;
+  }
+  // Teardown
+  destroy() {
+    if (this._destroyed) return;
+    this._destroyed = true;
+    for (const surface of this._surfaces) {
+      if (typeof surface.destroy === "function") surface.destroy();
+    }
+    this._surfaces.clear();
+    this._batcher.destroy();
+    if (this._playerPool.destroyAll) this._playerPool.destroyAll();
+    this.player.destroy();
+  }
+  // Internal: surface registration
+  _registerSurface(surface) {
+    this._surfaces.add(surface);
+  }
+  _unregisterSurface(surface) {
+    this._surfaces.delete(surface);
+  }
+}
+export {
+  EmbeddedFeedManager,
+  FeedManager,
+  FeedView,
+  ShortKit,
+  ShortKitVersion,
+  SinglePlayer,
+  WidgetManager,
+  createFeedConfig,
+  createFeedFilter,
+  createFeedItem,
+  createPlayerConfig,
+  createWidgetConfig
+};