@shortkitsdk/web 0.3.0

package/dist/shortkit.slim.js

@@ -0,0 +1,3755 @@
+(function(global, factory) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports) : typeof define === "function" && define.amd ? define(["exports"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.ShortKit = {}));
+})(this, (function(exports2) {
+  "use strict";
+  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);
+    }
+  }
+  exports2.EmbeddedFeedManager = EmbeddedFeedManager;
+  exports2.FeedManager = FeedManager;
+  exports2.FeedView = FeedView;
+  exports2.ShortKit = ShortKit;
+  exports2.ShortKitVersion = ShortKitVersion;
+  exports2.SinglePlayer = SinglePlayer;
+  exports2.WidgetManager = WidgetManager;
+  exports2.createFeedConfig = createFeedConfig;
+  exports2.createFeedFilter = createFeedFilter;
+  exports2.createFeedItem = createFeedItem;
+  exports2.createPlayerConfig = createPlayerConfig;
+  exports2.createWidgetConfig = createWidgetConfig;
+  Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
+}));