skill-study-report/skills/study-report/lib/player/deck.js

/* ============================================================
 * lib/player/deck.js · 混沌AI院演示播放器核心
 *
 * 职责：收集 .screen → 每屏状态机 idle→playing→done；
 *       进入新屏自动播放入场动画/视频（首屏不黑屏）；↓ 先演完当前动画再切屏（门控）；
 *       动画运行中 ↓ 快进到结尾；上下键/翻页器全兼容；进度条；两级导航（读 deck-config）。
 *       鼠标支持：滚轮上/下 = 上/下一屏；侧键 前进=下章、后退=上章（防抖，兼容翻页笔）。
 *
 * 页面接入：
 *   <section class="screen" data-tl="s2">...</section>
 *   <script src=".../deck.js"></script>
 *   <script>
 *     window.SCREEN_TIMELINES = { s2: function(ctx){ var tl=gsap.timeline(); ...; return tl; } };
 *     deck.init();
 *   </script>
 * 普通 script，非 module，file:// 可用。禁止页面自写 keydown/scroll。
 * ============================================================ */
(function () {
  var screens = [];
  var current = 0;
  var total = 0;
  var cfg = null;
  var inited = false;

  /* ---------- 总控容器模式(shell)状态 ---------- */
  var shellMode = !!(window.parent && window.parent !== window); // 页面被 iframe 装载
  var shellPlan = null;   // 编排配置（deck-plan）
  var shellCur = 0;       // 当前页序号
  var shellFrames = [];   // iframe 元素（不销毁，翻回保留状态）
  var shellShown = [];    // 是否已展示过（首次展示重演入场，无白屏）
  var shellLast = [];     // 各页最近上报的进度 {index,total,state}
  var pendingGo = null;   // 容器注册前的翻章请求缓冲（防止注册竞态丢失）
  var shellFrom = 0;      // 容器模式：切片起始屏（0-based，总控 deck-range 下发）
  var shellTo = -1;       // 容器模式：切片结束屏（-1 = 整节）
  /* ---------- embed(JS 注入)模式状态 ---------- */
  var embedMode = false;      // 总控用 JS 注入单页 HTML（非 iframe）
  var embedPages = [];        // 注入后的屏信息 {page, screens, tlName}
  var embedReady = false;

  /* ---------- 工具 ---------- */
  function readConfig() {
    var el = document.querySelector('script.deck-config');
    if (!el) return null;
    try { return JSON.parse(el.textContent); } catch (e) { return null; }
  }

  /* 与总控容器(deck-shell)通信：postMessage 跨源/跨 file:// 均可用 */
  function postShell(msg) {
    try { window.parent.postMessage(msg, '*'); } catch (e) {}
  }

  function fmt(n, dec, sep) {
    var s = n.toFixed(dec == null ? 0 : dec);
    if (sep) s = s.replace(/\B(?=(\d{3})+(?!\d))/g, sep);
    return s;
  }

  function makeCtx(s) {
    var el = s.el;
    return {
      el: el,
      q: function (sel) { return el.querySelector(sel); },
      qAll: function (sel) { return el.querySelectorAll(sel); },
      // 数字滚动，返回 gsap tween，可用 tl.add(ctx.count(...), pos)
      count: function (sel, to, opts) {
        opts = opts || {};
        var node = el.querySelector(sel);
        if (!node || !window.gsap) return null;
        var obj = { val: 0 };
        var target = (opts.to != null) ? opts.to : to;
        var tw = window.gsap.to(obj, {
          val: target,
          duration: opts.duration || 1.2,
          ease: opts.ease || 'power1.out',
          onUpdate: function () { node.textContent = fmt(obj.val, opts.dec || 0, opts.sep); }
        });
        return tw;
      }
    };
  }

  /* ---------- 状态 ---------- */
  function collect() {
    var els = Array.prototype.slice.call(document.querySelectorAll('.screen'));
    screens = els.map(function (el) {
      var tlKey = el.getAttribute('data-tl');
      return {
        el: el,
        tlKey: tlKey,
        hasTL: !!(tlKey && window.SCREEN_TIMELINES && typeof window.SCREEN_TIMELINES[tlKey] === 'function'),
        video: el.querySelector('video[data-gate]'),
        auto: el.hasAttribute('data-gate-autoplay'),
        state: 'idle',
        tl: null
      };
    });
    total = screens.length;
  }

  /* ---------- 展示 ---------- */
  function showScreen(i) {
    screens.forEach(function (s, j) {
      s.el.style.visibility = (j === i) ? 'visible' : 'hidden';
      // 根因修复：`.screen[data-tl].in > .s-wrap { visibility: visible }`（base.css）是 .s-wrap 的
      // 直接声明，会覆盖从屏级继承的 hidden。动画播完 .in 类残留 → 旧屏屏级 hidden 但 .s-wrap
      // 仍 visible，内容叠在新屏上（旧屏盖新屏的根因）。此处对 .s-wrap 直接强制隐藏/恢复。
      var wrap = s.el.querySelector('.s-wrap');
      if (wrap) wrap.style.visibility = (j === i) ? '' : 'hidden';
    });
    current = i;
    updateProgress();
    highlightTab();
  }

  // 屏激活：进入新一页/新屏直接走入场动画加载（不黑屏）。
  // 有时间线 → 自动播放；autoplay 视频 → 自动播；data-gate 视频 → 保持 idle 等 ↓；
  // 无动画 → 直接视为完成。↓ 在动画运行中可快进（见 next）。
  function activate(s) {
    if (s.state !== 'idle') return;
    if (s.hasTL) { playTimeline(s); return; }
    if (s.video && s.auto) { playVideo(s); return; }
    if (s.video) return;               // data-gate 视频：保持 idle，等 ↓ 播放
    s.state = 'done'; updateProgress();
  }

  /* ---------- 动画 / 视频门控 ---------- */
  function playTimeline(s) {
    if (!s.hasTL) return false;
    s.el.classList.add('in');
    var fn = window.SCREEN_TIMELINES[s.tlKey];
    var ctx = makeCtx(s);
    var tl = null;
    try { tl = fn(ctx); } catch (e) { tl = null; }
    if (!tl || !window.gsap) { s.state = 'done'; updateProgress(); return false; }
    s.tl = tl;
    s.state = 'playing';
    tl.eventCallback('onComplete', function () {
      // 有时间线 + data-gate-autoplay：时间线播完自动接播视频（再按 ↓ 才切屏）
      if (s.video && s.auto) { playVideo(s); return; }
      s.state = 'done'; updateProgress();
    });
    tl.play();
    updateProgress();
    return true;
  }

  function playVideo(s) {
    var v = s.video;
    if (!v) return;
    var ended = function () { s.state = 'done'; updateProgress(); };
    v.removeEventListener('ended', ended);
    v.addEventListener('ended', ended);
    var p = v.play();
    if (p && p.catch) p.catch(function () { s.state = 'done'; updateProgress(); });
    s.state = 'playing';
    updateProgress();
  }

  function resetScreen(s) {
    if (s.tl) {
      // 先播到结尾让 from-tween 渲染到最终态（opacity 1），再 kill：
      // 直接 kill 一个播放中的 timeline 会残留内联 opacity:0（immediateRender），
      // 且后续新建的 timeline 无法推进 → 重演 / jump / prev 时整屏空白（CBEC p0/p1 实测）。
      try { s.tl.progress(1); } catch (e) {}
      try { s.tl.kill(); } catch (e) {}
      s.tl = null;
    }
    s.el.classList.remove('in');
    s.state = 'idle';
    if (s.video) { s.video.pause(); s.video.currentTime = 0; }
  }

  /* ---------- 导航动作 ---------- */
  function next() {
    if (current >= total) return;
    var s = screens[current];
    if (s.state === 'done') { advance(); return; }
    if (s.state === 'playing') {
      // 入场动画运行中按 ↓：快进到结尾并切下一屏（新屏入场自动播放）；视频保持本屏待重播
      if (s.video && !s.video.paused) { s.video.currentTime = s.video.duration; return; }
      if (s.tl) s.tl.progress(1);
      advance();
      return;
    }
    // idle（正常已被 activate 自动播放；防御 data-gate 视频屏）
    if (s.hasTL && playTimeline(s)) return;
    if (s.video) { playVideo(s); return; }
    s.state = 'done';
    advance();
  }

  function advance() {
    // 容器切片：当前屏已是切片结束屏 → 直接翻章（交给总控切下一节），不进入切片外屏
    if (shellTo >= 0 && current >= shellTo) { nextChapter(); return; }
    if (current < total - 1) {
      showScreen(current + 1);
      activate(screens[current]);      // showScreen 已把 current 指向新屏 → 自动播放入场
    } else {
      nextChapter();
    }
  }

  function prev() {
    // 容器切片：当前屏已是切片起始屏 → 直接翻上一章
    if (shellFrom > 0 && current <= shellFrom) { prevChapter(); return; }
    if (current > 0) {
      resetScreen(screens[current]);
      current--;
      resetScreen(screens[current]);
      showScreen(current);
      activate(screens[current]);      // 上一屏重演入场（可重演）
    } else {
      prevChapter();
    }
  }

  function jump(i) {
    // 容器切片：跳转范围钳制在 [from, to]
    if (shellTo >= 0) i = Math.max(shellFrom, Math.min(i, shellTo));
    if (i < 0 || i >= total) return;
    resetScreen(screens[current]);
    current = i;
    resetScreen(screens[current]);
    showScreen(current);
    activate(screens[current]);
  }

  /* ---------- 章节导航 ---------- */
  function goFile(file, dir) {
    if (!file) return;
    if (shellMode) {
      // 容器模式：翻章请求交给总控（总控按 plan 顺序编排），不在 iframe 内跳文件
      pendingGo = { type: 'deck-go', file: file, dir: dir };
      postShell(pendingGo);
      return;
    }
    var cur = location.pathname.split('/').pop();
    if (file === cur) { dir > 0 ? jump(0) : jump(total - 1); return; }
    location.href = file;
  }
  function nextChapter() {
    if (embedMode && embedReady) { embedJumpSection(1); return; }
    goFile(cfg ? cfg.next : null, 1);
  }
  function prevChapter() {
    if (embedMode && embedReady) { embedJumpSection(-1); return; }
    goFile(cfg ? cfg.prev : null, -1);
  }

  /* embed(JS注入)模式：节级跳转统一走这里（←→/侧键/触摸横滑/末屏翻章）。
   * 节 = plan.pages 一项；embed 下所有屏 flat 注入，按节累计屏数定位「该节第一屏」。
   * 不用 next()/prev()（那在 embed 下是切屏，不是切节）。 */
  function embedSectionIndex() {
    var acc = 0;
    for (var q = 0; q < shellPlan.pages.length; q++) {
      var cnt = (embedPages[q] && embedPages[q].count) || 0;
      if (current < acc + cnt) return q;
      acc += cnt;
    }
    return shellPlan.pages.length - 1;
  }
  function embedJumpSection(dir) {
    var sec = embedSectionIndex() + dir;
    if (sec < 0 || sec >= shellPlan.pages.length) return;   // 边界节不翻，与 iframe showPage 一致
    var target = 0;
    for (var q = 0; q < sec; q++) target += (embedPages[q] && embedPages[q].count) || 0;
    jump(target);
  }

  /* ---------- 界面 ---------- */
  function ensureThemeBtn() {
    if (document.querySelector('.theme-toggle')) return;
    var topbar = document.querySelector('.deck-topbar');
    if (!topbar) return;
    var btn = null;
    // 优先 theme.js 的图标按钮（太阳/月亮），缺失时退化为文字兜底
    if (window.HDTheme && window.HDTheme.createToggleBtn) {
      btn = window.HDTheme.createToggleBtn();
    } else {
      btn = document.createElement('button');
      btn.className = 'theme-toggle';
      btn.type = 'button';
      btn.textContent = '主题';
      btn.addEventListener('click', function () { if (window.HDTheme) window.HDTheme.toggle(); });
    }
    var left = topbar.querySelector('.deck-left');
    if (!left) { left = document.createElement('div'); left.className = 'deck-left'; topbar.insertBefore(left, topbar.firstChild); }
    left.appendChild(btn);
  }

  function highlightTab() {
    if (!cfg) return;
    var tabs = document.querySelectorAll('.deck-tab');
    tabs.forEach(function (b) {
      b.classList.toggle('cur', b.getAttribute('data-ch') === cfg.page.id);
    });
    scrollActiveTabIntoView();
  }

  /* 顶栏章节/页面 tab 自动横向滚动：把高亮当前 tab 滚动到居中（不触边）。
   * 溢出检测用 scrollWidth（横向不溢出时忽略，含窄屏折叠面板纵向列）。 */
  function scrollActiveTabIntoView() {
    var nav = document.querySelector('.deck-tabs');
    var cur = document.querySelector('.deck-tab.cur');
    if (!nav || !cur) return;
    if (nav.scrollWidth <= nav.clientWidth) return;          // 无需滚动
    var navRect = nav.getBoundingClientRect();
    var curRect = cur.getBoundingClientRect();
    var target = nav.scrollLeft + (curRect.left + curRect.width / 2) - (navRect.left + navRect.width / 2);
    var max = nav.scrollWidth - nav.clientWidth;
    target = Math.max(0, Math.min(target, max));             // 不触边：钳制在可滚范围
    if (Math.abs(nav.scrollLeft - target) > 1) {
      nav.scrollTo({ left: target, behavior: 'smooth' });
    }
  }

  function buildChrome() {
    if (shellMode) return;   // 容器模式：顶栏/进度条由总控渲染，页面只保留 .screen 内容
    var topbar = document.querySelector('.deck-topbar');
    if (!topbar) { topbar = document.createElement('div'); topbar.className = 'deck-topbar'; document.body.appendChild(topbar); }
    if (cfg && cfg.chapters && !topbar.querySelector('.deck-tabs')) {
      var nav = document.createElement('nav');
      nav.className = 'deck-tabs';
      cfg.chapters.forEach(function (ch) {
        var b = document.createElement('button');
        b.className = 'deck-tab' + (ch.id === cfg.page.id ? ' cur' : '');
        b.type = 'button';
        b.setAttribute('data-ch', ch.id);
        b.textContent = ch.title;
        b.addEventListener('click', function () { goFile(ch.file, 1); });
        nav.appendChild(b);
      });
      topbar.appendChild(nav);
    }
    ensureThemeBtn();
    var right = topbar.querySelector('.deck-right');
    if (!right) { right = document.createElement('div'); right.className = 'deck-right'; topbar.appendChild(right); }
    // 右上角品牌 logo（theme.js 注入，随主题切换暗/浅图）
    if (window.HDTheme && window.HDTheme.ensureLogo) window.HDTheme.ensureLogo(right);

    var bottom = document.querySelector('.deck-bottom');
    if (!bottom) {
      bottom = document.createElement('div');
      bottom.className = 'deck-bottom';
      document.body.appendChild(bottom);
      var prog = document.createElement('div');
      prog.className = 'deck-progress';
      var bar = document.createElement('div');
      bar.className = 'bar';
      prog.appendChild(bar);
      bottom.appendChild(prog);
      var pos = document.createElement('span');
      pos.className = 'deck-pos';
      bottom.appendChild(pos);
      if (cfg && cfg.page) {
        var pn = document.createElement('span');
        pn.className = 'deck-pagename';
        pn.textContent = cfg.page.title;
        bottom.appendChild(pn);
      }
    }
  }

  function updateProgress() {
    var pct = total ? (current / total) * 100 : 0;
    var bar = document.querySelector('.deck-progress .bar');
    if (bar) bar.style.width = pct + '%';
    var pos = document.querySelector('.deck-pos');
    if (pos) pos.textContent = (current + 1) + ' / ' + total;
    // 容器模式：把本页进度上报总控（总控据此算全局进度条）
    if (shellMode) {
      var s = screens[current] || null;
      postShell({ type: 'deck-progress', index: current, total: total, state: s ? s.state : 'done' });
    }
    // embed 模式：屏进度变化同步总控 chrome
    if (embedMode && embedReady) renderShellChrome();
  }

  /* ---------- 输入 ---------- */
  function bindKeys() {
    document.addEventListener('keydown', function (e) {
      var t = e.target;
      if (t && (t.tagName === 'INPUT' || t.tagName === 'TEXTAREA' || t.isContentEditable)) return;
      var k = e.key;
      if (k === 'ArrowDown' || k === 's' || k === 'S' || k === 'PageDown' || k === ' ') {
        e.preventDefault(); next();
      } else if (k === 'ArrowUp' || k === 'w' || k === 'W' || k === 'PageUp') {
        e.preventDefault(); prev();
      } else if (k === 'ArrowRight' || k === 'd' || k === 'D') {
        e.preventDefault(); nextChapter();
      } else if (k === 'ArrowLeft' || k === 'a' || k === 'A') {
        e.preventDefault(); prevChapter();
      } else if (k === 'Home') {
        e.preventDefault(); jump(0);
      } else if (k === 'End') {
        e.preventDefault(); jump(total - 1);
      }
    });
  }

  function bindClick() {
    document.addEventListener('click', function (e) {
      var t = e.target;
      if (t && t.closest && (t.closest('a') || t.closest('button') || t.closest('.deck-topbar') || t.closest('.deck-bottom'))) return;
      if (e.clientX > window.innerWidth * 0.78 && e.clientX < window.innerWidth) next();
    });
  }

  function bindMouse() {
    // 滚轮：累计方向，超过阈值触发一次，冷却期防连击（轨迹板/鼠标均稳定）
    var wheelAcc = 0, lastDir = 0, wheelLock = 0;
    var STEP = 60, COOLDOWN = 550;
    document.addEventListener('wheel', function (e) {
      var t = e.target;
      // 顶栏章节/页面 tab 上滚轮 → 横向滚动 tabs（顶栏 hover 本就不翻屏；横向不溢出时忽略）
      if (t && t.closest && t.closest('.deck-tabs')) {
        var nav = t.closest('.deck-tabs');
        if (nav.scrollWidth > nav.clientWidth) {
          e.preventDefault();
          var step = e.deltaMode === 0 ? (e.deltaY || e.deltaX) : e.deltaY * 40;
          nav.scrollLeft += step;
        }
        return;
      }
      if (t && t.closest && (t.closest('a') || t.closest('button') || t.closest('.deck-topbar') || t.closest('.deck-bottom'))) return;
      var now = Date.now();
      if (now - wheelLock < COOLDOWN) return;
      if (e.deltaY === 0) return;
      var dir = e.deltaY > 0 ? 1 : -1;          // 下滚 = 下一屏，上滚 = 上一屏
      wheelAcc = (lastDir === dir) ? wheelAcc + e.deltaY : e.deltaY;
      lastDir = dir;
      if (Math.abs(wheelAcc) < STEP) return;    // 未到阈值先攒着
      wheelAcc = 0; wheelLock = now;
      e.preventDefault();
      if (dir > 0) next(); else prev();
    }, { passive: false });
    // 鼠标侧键：button 3(前进) → 下章，button 4(后退) → 上章（auxclick/mouseup 双绑兼容，防抖）
    var lastSide = 0;
    function side(e) {
      if (e.button !== 3 && e.button !== 4) return;
      var t = e.target;
      if (t && t.closest && (t.closest('a') || t.closest('button') || t.closest('.deck-topbar') || t.closest('.deck-bottom'))) return;
      var now = Date.now();
      if (now - lastSide < 450) return;
      lastSide = now;
      e.preventDefault();
      if (e.button === 3) nextChapter(); else prevChapter();
    }
    document.addEventListener('auxclick', side);
    document.addEventListener('mouseup', side);
  }

  function bindTouch() {
    // 触摸手势：上滑/下滑 = 下/上一屏（触屏习惯：上滑进下一页），左滑/右滑 = 下/上一章（与方向键一致）。
    // 用 Touch Events 而非 Pointer Events：touchmove + passive:false 才能真正 preventDefault
    // 阻止浏览器原生滚动/缩放；pointermove 的 preventDefault 对滚动无效（需 touch-action CSS，
    // 而全局 touch-action:none 会破坏 chat-window/group-chat 内部滚动）。
    if (!('ontouchstart' in window)) return;     // 无触摸能力（桌面）直接跳过，不打扰鼠标
    var startX = 0, startY = 0, axis = 0;        // axis: 0=未锁定 1=水平 2=垂直
    var tracking = false;
    var touchLock = 0;
    var THRESHOLD = 50, COOLDOWN = 550;          // 阈值 50px、冷却 550ms（与滚轮一致）

    function isIgnored(t) {                       // 与 wheel/click 相同的忽略集，避免误触
      return !!(t && t.closest &&
        (t.closest('a') || t.closest('button') || t.closest('.deck-topbar') || t.closest('.deck-bottom')));
    }

    document.addEventListener('touchstart', function (e) {
      if (isIgnored(e.target)) return;            // 交互元素不接管
      if (e.touches.length > 1) return;            // 多点（捏合缩放）不接管
      tracking = true;
      axis = 0;
      startX = e.touches[0].clientX;
      startY = e.touches[0].clientY;
    });

    document.addEventListener('touchmove', function (e) {
      if (!tracking) return;
      if (e.touches.length > 1) { tracking = false; return; }   // 双指出现 = 放弃手势
      var t = e.touches[0];
      var dx = t.clientX - startX;
      var dy = t.clientY - startY;
      if (axis === 0) {
        // 方向锁定：位移超 8px 判定轴向（水平/垂直二选一），防斜滑误触发
        if (Math.abs(dx) < 8 && Math.abs(dy) < 8) return;
        axis = Math.abs(dx) > Math.abs(dy) ? 1 : 2;
      }
      e.preventDefault();                          // 轴向锁定后才阻断原生滚动/缩放（passive:false）
    }, { passive: false });

    function finish(e) {
      if (!tracking) return;
      tracking = false;
      if (axis === 0) return;                      // 未到锁定阈值 = tap，放行 click
      var now = Date.now();
      if (now - touchLock < COOLDOWN) return;      // 防连击
      var t = e.changedTouches[0];
      var dx = t.clientX - startX;
      var dy = t.clientY - startY;
      if (axis === 1) {                            // 水平：左滑=下章，右滑=上章
        if (Math.abs(dx) < THRESHOLD) return;
        touchLock = now;
        if (dx < 0) nextChapter(); else prevChapter();
      } else {                                     // 垂直：上滑=下一屏，下滑=上一屏
        if (Math.abs(dy) < THRESHOLD) return;
        touchLock = now;
        if (dy < 0) next(); else prev();
      }
    }
    document.addEventListener('touchend', finish);
    document.addEventListener('touchcancel', function () { tracking = false; });
  }

  /* ---------- 入口 ---------- */
  function init(opts) {
    if (inited) return;
    inited = true;
    opts = opts || {};
    window.addEventListener('message', onPageMessage);
    if (opts.mode === 'shell') { initShell(opts); return; }
    cfg = readConfig();
    collect();
    if (total === 0) return;
    screens.forEach(function (s) {
      s.el.style.position = 'absolute';
      s.el.style.inset = '0';
    });
    buildChrome();
    bindKeys();
    bindClick();
    bindMouse();
    bindTouch();
    showScreen(0);
    activate(screens[0]);              // 首屏自动播放入场，不黑屏
  }

  // 安全网：若页面未显式 init，DOM 就绪后自动启动
  function auto() {
    if (inited) return;
    if (document.querySelectorAll('.screen').length) init();
  }
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', auto);
  } else {
    setTimeout(auto, 0);
  }

  /* ============================================================
   * 总控容器模式（shell）：总控页用 iframe 加载多页 + 预加载无缝衔接 + 导航可编排。
   *
   * 用法（总控页，如 course/deck-shell.html）：
   *   <script type="application/json" class="deck-plan">{ "title": "...", "pages":[ {"file":"demo/p1.html","title":"01 ..."}, ... ] }</script>
   *   <script src=".../deck.js"></script>
   *   <script> deck.init({ mode: 'shell', planEl: '.deck-plan' }); </script>
   *
   * - plan.pages[].file 相对总控页；iframe 不销毁，翻回保留状态；预加载下一页（隐藏）→ 翻页无白屏。
   * - 页内 deck 保持单页模式不变（可独立打开）；容器内通过 postMessage 上报进度、转发翻章请求。
   * - file:// 双击读内嵌 JSON（零 fetch）；http 下可加 ?plan=plans/xxx.json 切换编排（fetch 失败回退内嵌）。
   * ============================================================ */

  function urlParam(name) {
    try {
      var m = location.search.match(new RegExp('[?&]' + name + '=([^&]*)'));
      return m ? decodeURIComponent(m[1]) : null;
    } catch (e) { return null; }
  }

  function readPlan(opts) {
    if (opts.plan && typeof opts.plan === 'object' && opts.plan.pages) return opts.plan;
    var url = opts.planUrl || urlParam('plan');
    if (url && location.protocol !== 'file:') {
      try {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', url, false);       // 同步，保持零构建的确定性（仅 http 生效）
        xhr.send(null);
        if (xhr.status >= 200 && xhr.status < 300) {
          var p = JSON.parse(xhr.responseText);
          if (p && p.pages) return p;
        }
      } catch (e) {}
    }
    var el = opts.planEl ? document.querySelector(opts.planEl) : document.querySelector('script.deck-plan');
    if (el) {
      try {
        var p2 = JSON.parse(el.textContent);
        if (p2 && p2.pages) return p2;
      } catch (e) {}
    }
    return null;
  }

  function initShell(opts) {
    var plan = readPlan(opts);
    if (!plan) {
      var err = document.createElement('div');
      err.style.cssText = 'position:fixed;inset:0;display:flex;align-items:center;justify-content:center;'
        + 'font:16px var(--font-mono);color:var(--text-3);background:var(--bg-0);text-align:center;padding:40px;';
      err.textContent = '缺少编排配置：请在总控页内嵌 <script class="deck-plan"> JSON，或 http 下加 ?plan=plans/xxx.json。';
      document.body.appendChild(err);
      return;
    }
    shellPlan = plan;
    window.addEventListener('message', onShellMsg);
    buildShellChrome(plan);
    bindShellKeys();
    if (isMobileUA() || urlParam('mobile') === '1') buildFullscreenBtn();   // 手机端：右下角全屏切换（?mobile=1 供桌面调试）
    // embed 模式：plan 任一页带 picks（精确选屏）→ 走 JS 注入，不走 iframe
    var useEmbed = plan.pages.some(function (p) { return p && p.picks; });
    if (useEmbed) { initEmbed(); return; }
    showPage(0);
  }

  function buildShellChrome(plan) {
    var isNarrow = isMobileUA() || urlParam('mobile') === '1' || (window.matchMedia && window.matchMedia('(max-width: 768px)').matches);
    var topbar = document.createElement('div');
    topbar.className = 'deck-topbar shell-topbar' + (isNarrow ? ' shell-collapsed' : '');
    var left = document.createElement('div');
    left.className = 'deck-left';
    var title = document.createElement('span');
    title.className = 'shell-title';
    title.textContent = plan.title || '演示';
    left.appendChild(title);
    var btn = null;
    if (window.HDTheme && window.HDTheme.createToggleBtn) {
      btn = window.HDTheme.createToggleBtn();
      btn.addEventListener('click', function () { setTimeout(broadcastTheme, 0); });
    } else {
      btn = document.createElement('button');
      btn.className = 'theme-toggle';
      btn.type = 'button';
      btn.textContent = '主题';
      btn.addEventListener('click', function () {
        var cur = document.documentElement.getAttribute('data-theme') === 'light' ? 'dark' : 'light';
        document.documentElement.setAttribute('data-theme', cur);
        broadcastTheme();
      });
    }
    left.insertBefore(btn, title);           // 主题按钮最左
    // 窄屏：汉堡按钮（折叠导航），点击展开/收起节列表
    if (isNarrow) {
      var burger = document.createElement('button');
      burger.className = 'shell-burger';
      burger.type = 'button';
      burger.setAttribute('aria-label', '展开页面导航');
      burger.innerHTML = '<svg viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M2.5 5h15M2.5 10h15M2.5 15h15"/></svg>';
      burger.addEventListener('click', function (ev) {
        ev.stopPropagation();
        topbar.classList.toggle('shell-open');
      });
      left.insertBefore(burger, left.firstChild);
      // 点击非折叠区关闭
      document.addEventListener('click', function (e) {
        if (!topbar.classList.contains('shell-open')) return;
        if (!topbar.contains(e.target)) topbar.classList.remove('shell-open');
      });
    }
    topbar.appendChild(left);
    var nav = document.createElement('nav');
    nav.className = 'deck-tabs';
    nav.setAttribute('aria-label', '页面导航');
    plan.pages.forEach(function (p, i) {
      var b = document.createElement('button');
      b.className = 'deck-tab shell-tab' + (i === 0 ? ' cur' : '');
      b.type = 'button';
      b.textContent = p.title || ('第 ' + (i + 1) + ' 页');
      b.title = p.file || '';
      b.addEventListener('click', function () {
        if (embedMode && embedReady) {
          // embed：跳到该节第一屏
          var acc = 0, target = 0;
          for (var q = 0; q < i; q++) { acc += (embedPages[q] && embedPages[q].count) || 0; }
          target = acc;
          jump(target);
        } else {
          showPage(i);
        }
        topbar.classList.remove('shell-open');   // 选完收起（窄屏）
      });
      nav.appendChild(b);
    });
    topbar.appendChild(nav);
    var right = document.createElement('div');
    right.className = 'deck-right';
    topbar.appendChild(right);
    document.body.appendChild(topbar);
    if (window.HDTheme && window.HDTheme.ensureLogo) window.HDTheme.ensureLogo(right);

    var bottom = document.createElement('div');
    bottom.className = 'deck-bottom shell-bottom';
    var prog = document.createElement('div');
    prog.className = 'deck-progress';
    var bar = document.createElement('div');
    bar.className = 'bar';
    prog.appendChild(bar);
    bottom.appendChild(prog);
    var pos = document.createElement('span');
    pos.className = 'deck-pos shell-pos';
    bottom.appendChild(pos);
    var pn = document.createElement('span');
    pn.className = 'deck-pagename shell-pagename';
    bottom.appendChild(pn);
    var prevB = document.createElement('button');
    prevB.className = 'shell-navbtn';
    prevB.type = 'button';
    prevB.textContent = '‹ 上一页';
    prevB.addEventListener('click', function () {
      if (embedMode && embedReady) prev(); else showPage(shellCur - 1);
    });
    bottom.appendChild(prevB);
    var nextB = document.createElement('button');
    nextB.className = 'shell-navbtn';
    nextB.type = 'button';
    nextB.textContent = '下一页 ›';
    nextB.addEventListener('click', function () {
      if (embedMode && embedReady) next(); else showPage(shellCur + 1);
    });
    bottom.appendChild(nextB);
    document.body.appendChild(bottom);
  }

  function postToFrame(fr, msg) {
    try { fr.contentWindow.postMessage(msg, '*'); } catch (e) {}
  }

  /* ============================================================
   * embed(JS 注入)模式：把单页 HTML 拉为字符串，DOMParser 解析，
   * 按 picks 精确选屏注入总控 DOM；timeline 合并进全局；节样式注入。
   * 相比 iframe：可精确到任意屏组合、可跨节跳着选屏、预渲染可控。
   * ============================================================ */
  function fetchText(url, cb) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.onreadystatechange = function () {
      if (xhr.readyState !== 4) return;
      if (xhr.status >= 200 && xhr.status < 300) cb(null, xhr.responseText);
      else cb('HTTP ' + xhr.status);
    };
    xhr.onerror = function () { cb('net'); };
    xhr.send(null);
  }

  // 把节 HTML 的相对资源路径转绝对（相对该节文件所在目录；用 URL 解析避免拼接错误）
  function absolutize(baseURL, el, attr) {
    var v = el.getAttribute(attr);
    if (!v || /^(https?:|data:|blob:|#)/.test(v)) return;
    // 页面内锚点 href="#s1-..." 保留
    if (v.charAt(0) === '#') return;
    try {
      var abs = new URL(v, baseURL).href;
      el.setAttribute(attr, abs);
    } catch (e) {}
  }

  // 提取节内联 <style>（含 style.css 内容合并）
  function extractStyles(doc, baseURL, out) {
    var links = doc.querySelectorAll('link[rel="stylesheet"]');
    var inlines = doc.querySelectorAll('style');
    links.forEach(function (l) {
      var href = l.getAttribute('href') || '';
      absolutize(baseURL, l, 'href');
      out.push(l.outerHTML);
    });
    inlines.forEach(function (s) { out.push(s.outerHTML); });
  }

  // 提取 SCREEN_TIMELINES（把 IIFE 的 TL 注册名改成节级命名，避免全局覆盖）
  function extractTimeline(html, ns) {
    // 找出 window.SCREEN_TIMELINES = (function(){...})(); 整段
    var m = html.match(/window\.SCREEN_TIMELINES\s*=\s*\(function[\s\S]*?\}\)\(\);/);
    if (!m) return '';
    return m[0].replace(/window\.SCREEN_TIMELINES\s*=\s*/, 'window["' + ns + '"] = ');
  }

  // 执行节的内联脚本（数据/渲染/初始化），让动态屏在 shell 里也能渲染。
  // 跳过：外链 src、deck-config JSON、SCREEN_TIMELINES 块、deck.init 引导块。
  // 数据与函数挂到 window（与单页一致）；脚本在 DOMParser 解析后的 doc 上查询 DOM
  // 时可能拿到 doc 而非总控 DOM——因此这些脚本里的 DOM 初始化统一改由 timeline
  // 在总控 DOM 上触发（页内已有的 window 数据声明与纯函数保持原样执行即可）。
  function execInlineScripts(doc, pageFile) {
    var scripts = doc.querySelectorAll('script:not([src])');
    Array.prototype.forEach.call(scripts, function (sc) {
      if (sc.getAttribute('type') === 'application/json') return; // JSON 数据块，非 JS
      var code = sc.textContent || '';
      if (!code.trim()) return;
      if (/deck-config/.test(code)) return;                 // 页内导航 JSON，不执行
      // SCREEN_TIMELINES 定义段已由 extractTimeline 改名执行（window["__EMB_TL_N"]）。
      // 本函数执行节的数据/渲染脚本，但做两处安全化：
      //   1) 挖掉 SCREEN_TIMELINES 段与 deck.init 引导（embed 由总控接管）
      //   2) 把 document.getElementById( 替换为安全版本：找不到返回 null（让
      //      立即渲染用 if(el) 守卫自然跳过，不抛错）；把 document.addEventListener(
      //      替换为空操作（embed 键盘由总控接管，避免页面级监听冲突）
      // 这样数据声明、window.X 赋值、函数定义都正常执行挂到全局，供 timeline 渲染。
      if (!window.__embGEL) {
        // 安全 getElementById：找不到返回「幽灵元素」（属性/方法访问一律 noop），
        // 让 embed 下找不到容器的立即渲染不抛错（数据声明仍执行，渲染由 timeline 接管）。
        window.__embGEL = function (id) {
          var el = document.getElementById(id);
          if (el) return el;
          if (window.__embGhost) return window.__embGhost;
          window.__embGhost = new Proxy({}, {
            get: function (t, k) {
              if (k === 'children') return [];
              if (k === 'style') return new Proxy({}, { get: function () { return ''; }, set: function () { return true; } });
              return function () {};
            },
            set: function () { return true; }
          });
          return window.__embGhost;
        };
        window.__embNoop = function () {};
      }
      var execCode = code.replace(/window\.SCREEN_TIMELINES\s*=\s*\(function[\s\S]*?\}\)\(\);/g, '')
        .replace(/deck\.init\s*\(\s*\{?\s*\}?\s*\)\s*;/g, '')
        .replace(/document\.documentElement\.classList\.add\([^)]*\)\s*;?/g, '')
        .replace(/document\.getElementById\s*\(/g, 'window.__embGEL(')
        .replace(/document\.addEventListener\s*\(/g, 'window.__embNoop(');
      if (!execCode.trim()) return;
      try {
        // 间接 eval 全局作用域执行：数据声明与函数声明挂到 window，
        // 供 SCREEN_TIMELINES 里的渲染函数调用。
        (0, eval)(execCode);
      } catch (e) {
        console.error('[embed] inline ' + (pageFile || ''), e);
      }
    });
  }

  // 收集一节的屏 DOM（按 picks 或整节），并注入总控 stage
  function embedChapter(page, i, done) {
    var file = page.file;
    var baseURL = null;
    try { baseURL = new URL(file, location.href).href; } catch (e) {}
    fetchText(file, function (err, html) {
      if (err) { console.error('[embed] ' + file + ' ' + err); if (done) done(); return; }
      var doc = new DOMParser().parseFromString(html, 'text/html');
      var ns = '__EMB_TL_' + i;
      // 1. 注入节样式（link + style，基于节绝对 URL 解析相对路径）
      var styles = [];
      extractStyles(doc, baseURL, styles);
      if (styles.length) {
        var styleBox = document.getElementById('emb-styles');
        if (!styleBox) {
          styleBox = document.createElement('div');
          styleBox.id = 'emb-styles';
          styleBox.style.display = 'none';
          document.head.appendChild(styleBox);
        }
        styleBox.insertAdjacentHTML('beforeend', styles.join('\n'));
      }
      // 2. 注册节 timeline（节级命名空间，避免不同节同名 data-tl 互相覆盖）
      var tlCode = extractTimeline(html, ns);
      if (tlCode) {
        try {
          var fn = new Function(tlCode);
          fn();
        } catch (e) { console.error('[embed] TL ' + file, e); }
        // 合并进全局 SCREEN_TIMELINES：key = ns + '_' + 原key（如 __EMB_TL_11_s1）
        if (window[ns]) {
          window.SCREEN_TIMELINES = window.SCREEN_TIMELINES || {};
          var tlObj = window[ns];
          Object.keys(tlObj).forEach(function (k) {
            window.SCREEN_TIMELINES[ns + '_' + k] = tlObj[k];
          });
          delete window[ns];
        }
      }
      // 3. 按 picks 选屏注入 stage（屏 data-tl 改为节前缀命名，避免全局 timeline key 冲突）
      var all = doc.querySelectorAll('section.screen');
      var picks = page.picks || null;
      var chosen = [];
      if (picks && picks.length) {
        picks.forEach(function (idx) { if (all[idx]) chosen.push(all[idx]); });
      } else {
        chosen = Array.prototype.slice.call(all);
      }
      var stage = document.querySelector('.shell-stage') || document.body;
      chosen.forEach(function (sec) {
        // 克隆到总控 DOM（保留原样，动画/计时靠 SCREEN_TIMELINES + gsap）
        var clone = doc.importNode(sec, true);
        // data-tl 加节前缀：__E<i>_<原tl>，对应下方 timeline 的节级命名
        var t = clone.getAttribute('data-tl');
        if (t) clone.setAttribute('data-tl', ns + '_' + t);
        // 资源绝对化（基于节 HTML 绝对 URL）——video 直接 src 与 source 子元素都处理
        clone.querySelectorAll('img').forEach(function (im) { absolutize(baseURL, im, 'src'); });
        clone.querySelectorAll('video[src]').forEach(function (vd) { absolutize(baseURL, vd, 'src'); });
        clone.querySelectorAll('video source').forEach(function (im) { absolutize(baseURL, im, 'src'); });
        clone.querySelectorAll('a[href]').forEach(function (a) { absolutize(baseURL, a, 'href'); });
        stage.appendChild(clone);
      });
      // 3b. 注入页面级 JSON 数据块（如 tt-data / 商品数据），供动态屏 IIFE 读取。
      //     deck-config 是页内导航，不注入；id 冲突时第一个生效（跨节数据各自独立）。
      doc.querySelectorAll('script[type="application/json"]').forEach(function (jb) {
        if (/deck-config/.test(jb.textContent || '')) return;
        var jid = jb.getAttribute('id');
        if (jid && document.getElementById(jid)) return;   // 已注入（首章优先）
        stage.appendChild(doc.importNode(jb, true));
      });
      // 4. 注入完成后执行节的其他内联脚本（数据/渲染函数/初始化）。
      //    此刻页面的 JSON 数据块与各 grid/详情容器已在总控 DOM，页内 IIFE
      //    （KOC 矩阵 / 商品墙 / 六国商品等立即渲染）能正常找到目标元素。
      //    排除：deck-config JSON、SCREEN_TIMELINES 块、外链脚本、deck.init 引导块。
      execInlineScripts(doc, file);
      embedPages[i] = { page: page, count: chosen.length };
      if (done) done();
    });
  }

  function checkEmbedReady() {
    var loaded = embedPages.filter(function (p) { return p; }).length;
    if (loaded === shellPlan.pages.length) {
      // 全部注入完成 → 用单页模式播放（屏状态机），进度按所有注入屏
      embedReady = true;
      collect();
      if (total === 0) return;
      screens.forEach(function (s) {
        s.el.style.position = 'absolute';
        s.el.style.inset = '0';
      });
      // 复用单页导航（无 topbar 页内导航，进度用总控 renderShellChrome）。
      // 键盘不放这里绑：embed 模式下 bindShellKeys 已在 document 上监听 keydown，
      // 再 bindKeys 会对同一次 ↓/↑ 触发两次 next/prev（每按一次跳两屏，
      // 播放位置与页码/章节错位 —— 2026-08-30 回归修复）。点击/滚轮/触摸无此冲突。
      bindClick();
      bindMouse();
      bindTouch();
      showScreen(0);
      activate(screens[0]);
      renderShellChrome();
    }
  }

  function initEmbed() {
    embedMode = true;
    embedPages = [];
    // 若 http 可用 fetch 则注入；file:// 下 fetch 受限 → 提示用 http
    if (location.protocol === 'file:') {
      var msg = document.createElement('div');
      msg.style.cssText = 'position:fixed;inset:0;display:flex;align-items:center;justify-content:center;font:14px var(--font-mono);color:var(--text-3);text-align:center;padding:40px;';
      msg.textContent = 'embed(JS注入)模式需要 http 访问（file:// 下 fetch 受限）。请用 http 打开总控页。';
      document.body.appendChild(msg);
      return;
    }
    // 串行加载：保证注入 DOM 顺序 = plan.pages 顺序（并发 fetch 会乱序导致故事线错位）
    var embIdx = 0;
    function nextEmb() {
      if (embIdx >= shellPlan.pages.length) { checkEmbedReady(); return; }
      embedChapter(shellPlan.pages[embIdx], embIdx, nextEmb);
      embIdx++;
    }
    nextEmb();
  }

  function loadPage(i, visible) {
    if (i < 0 || i >= shellPlan.pages.length) return;
    if (shellFrames[i]) return;              // 不重复创建；不销毁（翻回保留状态）
    var p = shellPlan.pages[i];
    var fr = document.createElement('iframe');
    fr.className = 'shell-frame';
    fr.setAttribute('data-page', String(i));
    fr.setAttribute('aria-label', p.title || ('第 ' + (i + 1) + ' 页'));
    fr.title = p.file || '';
    // 隐藏用 visibility:hidden 而非 display:none：保留布局尺寸，避免 mermaid/logic-flow
    // 在 0×0 上下文渲染产生 NaN transform；不可见也不可交互。
    fr.style.visibility = visible ? 'visible' : 'hidden';
    fr.__createdVisible = !!visible;
    fr.src = p.file;                         // 相对总控页
    var stage = document.querySelector('.shell-stage') || document.body;
    stage.appendChild(fr);
    shellFrames[i] = fr;
    fr.addEventListener('load', function () {
      postToFrame(fr, { type: 'deck-register' });   // 确认容器模式（页收到后才接管翻章）
    });
  }

  function showPage(i) {
    if (i < 0 || i >= shellPlan.pages.length) return;
    if (!shellFrames[i]) loadPage(i, true);  // 未预加载 → 直接创建并可见（加载时自然播放入场）
    shellFrames.forEach(function (f, j) {
      if (f) f.style.visibility = (j === i) ? 'visible' : 'hidden';
    });
    var first = !shellShown[i];
    shellShown[i] = true;
    shellCur = i;
    var p = shellPlan.pages[i];
    if (first && !shellFrames[i].__createdVisible) {
      // 预加载（隐藏）期间入场已悄悄放完 → 首次展示重演入场，翻页无白屏
      // 若编排定义了屏级切片 [from,to] → 下发 range 让页内从起始屏开始并在边界自动翻章
      if (typeof p.from === 'number' || typeof p.to === 'number') {
        postToFrame(shellFrames[i], { type: 'deck-cmd', cmd: 'range',
          from: (typeof p.from === 'number' ? p.from : 0),
          to: (typeof p.to === 'number' ? p.to : -1) });
      } else {
        postToFrame(shellFrames[i], { type: 'deck-cmd', cmd: 'jump', index: 0 });
      }
    }
    loadPage(i + 1, false);                  // 预加载下一页（隐藏）
    try { shellFrames[i].contentWindow.focus(); } catch (e) {}   // 键盘焦点进 iframe
    renderShellChrome();
  }

  // 有效屏数/已完成屏数（支持 plan 屏级切片 from/to）
  function effTotal(p, st) {
    var raw = p.screens || (st && st.total) || 0;
    if (!raw) return 0;
    var from = (typeof p.from === 'number') ? p.from : 0;
    var to = (typeof p.to === 'number') ? Math.min(p.to, raw - 1) : raw - 1;
    if (to < from) return 0;
    return to - from + 1;
  }
  function effDone(p, st) {
    var raw = p.screens || (st && st.total) || 0;
    if (!raw) return 0;
    var idx = st ? st.index : 0;
    var from = (typeof p.from === 'number') ? p.from : 0;
    var to = (typeof p.to === 'number') ? Math.min(p.to, raw - 1) : raw - 1;
    if (idx < from) return 0;
    return Math.min(to - from + 1, idx - from + 1);
  }

  function renderShellChrome() {
    var pages = shellPlan.pages;
    var tabs = document.querySelectorAll('.shell-tab');
    // embed 模式：注入后所有屏 flat 排列，按当前屏反推所在节高亮
    if (embedMode && embedReady) {
      var curScreen = current;
      var acc = 0, curPage = 0;
      for (var q = 0; q < pages.length; q++) {
        var cnt = (embedPages[q] && embedPages[q].count) || 0;
        if (curScreen < acc + cnt) { curPage = q; break; }
        acc += cnt;
        curPage = q + 1;
      }
      tabs.forEach(function (b, j) { b.classList.toggle('cur', j === curPage); });
      var totalE = total, doneE = Math.min(totalE, curScreen + 1);
      var bar = document.querySelector('.shell-bottom .deck-progress .bar');
      var pos = document.querySelector('.shell-pos');
      var pn = document.querySelector('.shell-pagename');
      if (bar) bar.style.width = Math.min(100, (doneE / totalE) * 100) + '%';
      if (pos) pos.textContent = (curPage + 1) + '/' + pages.length + ' 节 · ' + doneE + '/' + totalE + ' 屏';
      if (pn) pn.textContent = pages[curPage].title || '';
      scrollActiveTabIntoView();
      return;
    }
    tabs.forEach(function (b, j) { b.classList.toggle('cur', j === shellCur); });
    // 进度按「屏幕(screen)」颗粒度计算：每节=1个 iframe，内含多屏（每屏≈30s）。
    // 屏数优先级：plan.pages[i].screens（编排权威标注）> iframe 上报 total（实测量）；
    // plan.pages[i].from/to（屏级切片）只计切片内的有效屏。
    var totalScreens = 0, doneScreens = 0, loadedAny = false;
    pages.forEach(function (p, i) {
      var st = shellLast[i];
      var total = effTotal(p, st);
      if (!total) return;
      loadedAny = true;
      totalScreens += total;
      if (i < shellCur) doneScreens += total;          // 已翻完的节：全屏计入
      else if (i === shellCur) doneScreens += effDone(p, st);
    });
    var bar = document.querySelector('.shell-bottom .deck-progress .bar');
    var pos = document.querySelector('.shell-pos');
    var pn = document.querySelector('.shell-pagename');
    if (loadedAny && totalScreens > 0) {
      if (bar) bar.style.width = Math.min(100, (doneScreens / totalScreens) * 100) + '%';
      if (pos) pos.textContent = (shellCur + 1) + '/' + pages.length + ' 节 · ' + Math.min(doneScreens, totalScreens) + '/' + totalScreens + ' 屏';
    } else {
      // 完全未知 → 按节回退（首屏上报前短暂过渡）
      var done = 0;
      pages.forEach(function (p, i) {
        if (i < shellCur) { done += 1; return; }
        if (i === shellCur) {
          var st2 = shellLast[i];
          if (st2 && st2.total) done += Math.min(1, ((st2.index || 0) + 1) / st2.total);
        }
      });
      if (bar) bar.style.width = ((done / pages.length) * 100) + '%';
      if (pos) pos.textContent = (shellCur + 1) + ' / ' + pages.length + ' 页';
    }
    if (pn) pn.textContent = pages[shellCur].title || '';
    scrollActiveTabIntoView();
  }

  function broadcastTheme() {
    var t = window.HDTheme ? window.HDTheme.get() : (document.documentElement.getAttribute('data-theme') || 'dark');
    shellFrames.forEach(function (f) { if (f) postToFrame(f, { type: 'deck-cmd', cmd: 'theme', theme: t }); });
  }

  function bindShellKeys() {
    document.addEventListener('keydown', function (e) {
      var t = e.target;
      if (t && (t.tagName === 'INPUT' || t.tagName === 'TEXTAREA' || t.isContentEditable)) return;
      if (t && t.closest && (t.closest('button') || t.closest('a'))) return;   // 焦点在按钮上交给原生
      var k = e.key;
      if (k === 'ArrowDown' || k === 's' || k === 'S' || k === 'PageDown' || k === ' ') {
        e.preventDefault(); if (embedMode && embedReady) next(); else cmdActive('next');
      } else if (k === 'ArrowUp' || k === 'w' || k === 'W' || k === 'PageUp') {
        e.preventDefault(); if (embedMode && embedReady) prev(); else cmdActive('prev');
      } else if (k === 'ArrowRight' || k === 'd' || k === 'D') {
        if (embedMode && embedReady) nextChapter(); else showPage(shellCur + 1);
      } else if (k === 'ArrowLeft' || k === 'a' || k === 'A') {
        if (embedMode && embedReady) prevChapter(); else showPage(shellCur - 1);
      } else if (k === 'Home') {
        e.preventDefault();
        if (embedMode && embedReady) jump(0); else cmdActive('home');
      } else if (k === 'End') {
        e.preventDefault();
        if (embedMode && embedReady) jump(total - 1); else cmdActive('end');
      }
    });
  }

  /* ---------- 手机端：右下角「全屏」切换（不旋转——手机自带横屏） ---------- */
  function isMobileUA() {
    return /Android|iPhone|iPad|iPod|Mobile|Mobi|Opera Mini|IEMobile/i.test(navigator.userAgent)
      || (navigator.platform && /iPhone|iPad|iPod|Android/i.test(navigator.platform));
  }

  var fullscreenBtn = null;

  function ensureFullscreenStyle() {
    if (document.getElementById('shell-fullscreen-style')) return;
    var st = document.createElement('style');
    st.id = 'shell-fullscreen-style';
    st.textContent =
      // ============ 全屏：不旋转舞台，16:9 等比 fit 视口居中（letterbox） ============
      // 手机系统自带横屏：用户转手机即横屏。全屏模式只负责放大 + 隐藏系统 UI，
      // 舞台始终按 16:9 contain（--fs-w/--fs-h 由 JS 计算），避免拉伸变形。
      'html.shell-fullscreen .shell-stage{'
      + 'position:fixed;top:50%;left:50%;'
      + 'transform:translate(-50%,-50%);'
      + 'width:var(--fs-w,100vw);height:var(--fs-h,100vh);'
      + 'background:var(--bg-0);'
      + 'box-shadow:0 0 0 2000px var(--bg-0);}'
      // 顶栏/底栏：全屏时保持可用，收窄/半透明，不遮挡内容
      + 'html.shell-fullscreen .shell-topbar{'
      + 'opacity:.9;}'
      + 'html.shell-fullscreen .shell-bottom{'
      + 'opacity:.9;}'
      // 常规右下角全屏按钮
      + '.shell-fs-btn{position:fixed;right:14px;bottom:56px;z-index:80;'
      + 'pointer-events:auto;cursor:pointer;'
      + 'font:600 12px var(--font-mono);color:var(--text-3);'
      + 'background:var(--glass-bg);border:1px solid var(--border-subtle);'
      + 'border-radius:var(--radius-pill);padding:5px 12px;'
      + 'backdrop-filter:blur(var(--glass-blur));opacity:.82;'
      + 'box-shadow:0 2px 8px rgba(0,0,0,.18);}'
      + '.shell-fs-btn:active{opacity:1;}'
      // 窄屏折叠导航：汉堡按钮 + 下拉面板
      + '.shell-collapsed .deck-tabs{'
      + 'position:fixed;top:52px;left:12px;right:12px;'
      + 'flex-direction:column;align-items:stretch;gap:4px;'
      + 'background:var(--bg-1);border:1px solid var(--border-subtle);'
      + 'border-radius:var(--radius-md);padding:8px;'
      + 'display:none;max-height:62vh;overflow-y:auto;'
      + 'box-shadow:0 8px 28px rgba(0,0,0,.35);z-index:60;}'
      + '.shell-collapsed .deck-tab{width:100%;text-align:left;padding:8px 12px;border-radius:var(--radius-sm);}'
      + '.shell-collapsed.shell-open .deck-tabs{display:flex;}'
      + '.shell-burger{pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;'
      + 'width:34px;height:30px;padding:0;margin-right:4px;flex-shrink:0;'
      + 'color:var(--text-3);border:1px solid var(--border-subtle);'
      + 'border-radius:var(--radius-pill);background:var(--glass-bg);cursor:pointer;}'
      + '.shell-burger:hover{color:var(--brand-1);border-color:var(--border-strong);}';
    document.head.appendChild(st);
  }

  function applyFullscreenSize() {
    // 舞台 16:9 contain 于视口（不旋转）：宽高按视口 fit，letterbox 留黑边
    var vw = window.innerWidth, vh = window.innerHeight;
    var w, h;
    if (vw / vh > 16 / 9) { h = vh; w = h * 16 / 9; }
    else { w = vw; h = w * 9 / 16; }
    var el = document.documentElement;
    el.style.setProperty('--fs-w', Math.round(w) + 'px');
    el.style.setProperty('--fs-h', Math.round(h) + 'px');
  }

  function toggleFullscreen() {
    var el = document.documentElement;
    var inFs = el.classList.contains('shell-fullscreen');
    if (!inFs) {
      applyFullscreenSize();
      el.classList.add('shell-fullscreen');
      var fs = el.requestFullscreen || el.webkitRequestFullscreen || el.msRequestFullscreen;
      if (fs) { try { fs.call(el); } catch (e) {} }
      if (fullscreenBtn) fullscreenBtn.textContent = '退出全屏';
    } else {
      el.classList.remove('shell-fullscreen');
      var ex = document.exitFullscreen || document.webkitExitFullscreen || document.msExitFullscreen;
      if (ex && (document.fullscreenElement || document.webkitFullscreenElement)) {
        try { ex.call(document); } catch (e) {}
      }
      if (fullscreenBtn) fullscreenBtn.textContent = '全屏';
    }
  }

  function buildFullscreenBtn() {
    if (fullscreenBtn) return;
    ensureFullscreenStyle();
    var b = document.createElement('button');
    b.className = 'shell-fs-btn';
    b.type = 'button';
    b.textContent = '全屏';
    b.title = '切换全屏（手机端）';
    b.addEventListener('click', toggleFullscreen);
    document.body.appendChild(b);
    fullscreenBtn = b;
    // 全屏状态变化时同步按钮文案（浏览器返回键退出全屏等）
    document.addEventListener('fullscreenchange', syncFullscreenBtn);
    document.addEventListener('webkitfullscreenchange', syncFullscreenBtn);
    // 尺寸变化时重算 16:9（转屏、全屏高度变化）
    window.addEventListener('resize', function () {
      if (document.documentElement.classList.contains('shell-fullscreen')) applyFullscreenSize();
    });
    window.addEventListener('orientationchange', function () {
      setTimeout(function () {
        if (document.documentElement.classList.contains('shell-fullscreen')) applyFullscreenSize();
      }, 300);
    });
  }

  function syncFullscreenBtn() {
    if (!fullscreenBtn) return;
    var inFs = !!(
      document.fullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement
    );
    fullscreenBtn.textContent = inFs ? '退出全屏' : '全屏';
  }

  function cmdActive(cmd) {
    var f = shellFrames[shellCur];
    if (f) postToFrame(f, { type: 'deck-cmd', cmd: cmd });
  }

  /* 总控侧：接收页面上报 */
  function onShellMsg(e) {
    var d = e.data;
    if (!d || typeof d !== 'object') return;
    var idx = -1;                              // e.source 是 iframe 的 window，需与 contentWindow 比对
    for (var k = 0; k < shellFrames.length; k++) {
      if (shellFrames[k] && shellFrames[k].contentWindow === e.source) { idx = k; break; }
    }
    if (idx < 0) return;                       // 只认自己管理的 iframe
    if (d.type === 'deck-progress') {
      shellLast[idx] = { index: d.index, total: d.total, state: d.state };
      if (idx === shellCur) renderShellChrome();
    } else if (d.type === 'deck-go') {
      // 页内翻章（或最后一屏 ↓）：按 plan 顺序切页，忽略页内 deck-config 的文件跳转
      showPage(idx + (d.dir >= 0 ? 1 : -1));
    }
  }

  /* 页侧：接收总控指令（总控页自身也挂此监听，靠 source 过滤互不干扰） */
  function onPageMessage(e) {
    var d = e.data;
    if (!d || typeof d !== 'object') return;
    if (e.source !== window.parent) return;    // 只接受父窗口指令
    if (d.type === 'deck-register') {
      shellMode = true;                        // 父窗口确认为总控容器
      if (pendingGo) { postShell(pendingGo); pendingGo = null; }
      return;
    }
    if (d.type !== 'deck-cmd') return;
    if (d.cmd === 'next') next();
    else if (d.cmd === 'prev') prev();
    else if (d.cmd === 'jump') { if (typeof d.index === 'number') jump(d.index); }
    else if (d.cmd === 'home') jump(0);
    else if (d.cmd === 'end') jump(total - 1);
    else if (d.cmd === 'range') {
      // 屏级切片：总控下发 [from,to]（0-based），页内翻屏被钳制在该范围，两端自动翻章
      shellFrom = (typeof d.from === 'number') ? d.from : 0;
      shellTo = (typeof d.to === 'number') ? d.to : -1;
      jump(shellFrom);
    }
    else if (d.cmd === 'theme') { if (window.HDTheme && d.theme) window.HDTheme.set(d.theme); }
  }

  /* 字体/logo 加载后 tab 宽度变化，窗口 load 时校正一次居中（直接打开深层页的场景） */
  window.addEventListener('load', function () { scrollActiveTabIntoView(); });

  window.deck = {
    init: init,
    next: next,
    prev: prev,
    jump: jump,
    nextChapter: nextChapter,
    prevChapter: prevChapter,
    goFile: goFile,
    // 总控容器模式
    showPage: showPage,
    loadPage: loadPage
  };
})();