npm - octocode-cli - Versions diffs - 1.3.0 → 1.5.0 - Mend

octocode-cli 1.3.0 → 1.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (106) hide show

package/skills/octocode-slides/scripts/base.html ADDED Viewed

@@ -0,0 +1,655 @@
+<!DOCTYPE html>
+<!--
+  ╔══════════════════════════════════════════════════════════════════════════╗
+  ║  OCTOCODE SLIDES — NAVIGATION CONTROLLER                                 ║
+  ║  Generated from: skills/octocode-slides/scripts/base.html               ║
+  ║                                                                          ║
+  ║  LLM INSTRUCTIONS (remove all <!-- LLM: --> comments in final output):  ║
+  ║  1. Replace every <!-- LLM: ... --> placeholder with actual values       ║
+  ║  2. Fill the const slides = [...] array — one { path, hidden, name }    ║
+  ║     object per slide, in the order you want them shown.                 ║
+  ║     • path   – path to the slide HTML relative to index.html            ║
+  ║     • name   – unique slug used in the URL hash (e.g. 'my-slide')       ║
+  ║                Do NOT use numbers — order is controlled by the array.   ║
+  ║     • hidden – true = skip during playback + hide from overview grid    ║
+  ║  3. Set the <title> to the deck title                                   ║
+  ║  4. Adjust #progress background to match the theme accent color         ║
+  ║  5. Make sure every slide HTML file includes js/navbridge.js            ║
+  ║     (see scripts/slide.html — the navbridge script tag is already       ║
+  ║      included in the template)                                          ║
+  ║                                                                          ║
+  ║  KEYBOARD SHORTCUTS:                                                     ║
+  ║    → / ↓ / Space  next slide                                             ║
+  ║    ← / ↑          previous slide                                         ║
+  ║    Home / End     first / last slide                                     ║
+  ║    F              toggle fullscreen                                      ║
+  ║    G              toggle overview grid (thumbnail navigator)             ║
+  ║    Escape         close overview                                         ║
+  ║    B / W          black / white screen (press again to dismiss)          ║
+  ║    Scroll wheel   next / previous slide                                  ║
+  ╚══════════════════════════════════════════════════════════════════════════╝
+-->
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <!-- LLM: Set this to the deck title (e.g., "Octocode MCP — 20-min Tech Talk") -->
+  <title><!-- LLM: Deck Title --></title>
+  <style>
+    /* ── Reset ─────────────────────────────────────────── */
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+    /* ── Full-window letterbox ──────────────────────────── */
+    html, body {
+      width: 100%; height: 100%;
+      /* LLM: Change to theme --bg value (e.g., #0D1117 for Terminal, oklch(16% 0.02 290) for Midnight) */
+      background: #000;
+      overflow: hidden;
+      display: grid;
+      place-items: center;
+    }
+    /* ── 1280×720 stage ─────────────────────────────────── */
+    /* JS scales this to fill the window while keeping 16:9. */
+    #stage {
+      width: 1280px;
+      height: 720px;
+      position: relative;
+      transform-origin: center center;
+    }
+    /* ── Slide cell wrapper ─────────────────────────────── */
+    /* All slide cells stack at inset:0. The topmost (last in DOM) cell would
+       otherwise swallow every mouse-down — blocking text selection inside the
+       active iframe — so inactive cells must not accept pointer events.
+       Pair this with .slide-frame[data-active] below; both rules MUST flip
+       in lockstep on slide change (`go()` toggles `is-active` + `data-active`). */
+    .slide-cell {
+      position: absolute;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+      pointer-events: none;
+    }
+    .slide-cell.is-active { pointer-events: auto; }
+    /* ── Slide iframes ──────────────────────────────────── */
+    /* Inactive iframes are invisible AND non-interactive. Without
+       pointer-events:none they would still capture clicks (preventing the
+       active iframe behind them from receiving selection or click events). */
+    .slide-frame {
+      position: absolute;
+      inset: 0;
+      width: 100%; height: 100%;
+      border: none;
+      opacity: 0;
+      transition: opacity 150ms ease;
+      pointer-events: none;
+    }
+    /* Active frame is visible and accepts pointer events (enables navbridge,
+       text selection, copy/paste, and link clicks inside the slide). */
+    .slide-frame[data-active] { opacity: 1; pointer-events: auto; }
+    /* ── Progress bar ───────────────────────────────────── */
+    #progress {
+      position: fixed;
+      bottom: 0; left: 0;
+      height: 3px;
+      /* LLM: Set to theme --accent (e.g., #39D353 for Terminal, #C9B37A for Midnight) */
+      background: rgba(255,255,255,0.5);
+      transition: width 200ms ease;
+      pointer-events: none;
+      z-index: 10;
+    }
+    /* ── Slide counter ──────────────────────────────────── */
+    #counter {
+      position: fixed;
+      bottom: 10px; right: 18px;
+      font: 11px/1 system-ui, sans-serif;
+      color: rgba(255,255,255,0.3);
+      letter-spacing: 0.06em;
+      pointer-events: none;
+      z-index: 10;
+    }
+    /* ── HUD (keyboard hint pill) ───────────────────────── */
+    /* Fades in on activity, fades out after 1.6 s of idle. */
+    #hud {
+      position: fixed; right: 18px; top: 18px;
+      display: flex; align-items: center; gap: 10px;
+      font: 11px/1 system-ui, sans-serif; letter-spacing: 0.06em;
+      color: rgba(255,255,255,0.4);
+      background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.1);
+      padding: 6px 12px; border-radius: 999px;
+      backdrop-filter: blur(4px);
+      opacity: 0; transition: opacity 0.25s ease; pointer-events: none;
+      z-index: 50;
+    }
+    #hud.show { opacity: 1; }
+    .hud-sep { color: rgba(255,255,255,0.15); }
+    #hud kbd {
+      font: inherit; background: rgba(255,255,255,0.08);
+      border: 1px solid rgba(255,255,255,0.15); border-radius: 3px;
+      padding: 1px 5px; font-size: 10px;
+    }
+    /* ════════════════════════════════════════════════════
+       OVERVIEW MODE  (body.overview)
+       Press G to open, press G or Escape to close.
+       Shows all slides as scaled thumbnails.
+       Click any thumbnail to jump to that slide.
+       ════════════════════════════════════════════════════ */
+    body.overview {
+      overflow-y: auto;
+      background: #0e0e0e;
+      display: block;
+    }
+    body.overview #stage {
+      width: 100%;
+      height: auto;
+      min-height: 100vh;
+      position: static;
+      transform: none !important;
+      display: grid;
+      grid-template-columns: repeat(auto-fill, 256px);
+      gap: 1.25rem;
+      padding: 2.5rem 2rem 4rem;
+      align-content: start;
+    }
+    body.overview .slide-cell {
+      position: relative;
+      width: 256px;
+      height: 144px;
+      overflow: hidden;
+      border-radius: 6px;
+      border: 2px solid rgba(255,255,255,0.08);
+      cursor: pointer;
+      transition: border-color 120ms ease, box-shadow 120ms ease;
+    }
+    body.overview .slide-cell:hover {
+      border-color: rgba(255,255,255,0.4);
+    }
+    body.overview .slide-cell.is-active {
+      border-color: rgba(255,255,255,0.75);
+      box-shadow: 0 0 0 1px rgba(255,255,255,0.3);
+    }
+    /* Scale 1280×720 iframe down to 256×144 (factor 0.2) */
+    body.overview .slide-frame {
+      position: absolute;
+      top: 0; left: 0;
+      width: 1280px !important;
+      height: 720px !important;
+      transform: scale(0.2);
+      transform-origin: top left;
+      opacity: 1;
+      pointer-events: none;
+      transition: none;
+    }
+    /* Slide number badge — only visible in overview */
+    .slide-cell .slide-num {
+      display: none;
+      position: absolute;
+      bottom: 4px; right: 6px;
+      font: 700 9px/1 system-ui, sans-serif;
+      color: rgba(255,255,255,0.45);
+      letter-spacing: 0.04em;
+      z-index: 10;
+      pointer-events: none;
+    }
+    body.overview .slide-cell .slide-num { display: block; }
+    /* Slide name label in overview — shows the slug under each thumbnail */
+    .slide-cell .slide-label {
+      display: none;
+      position: absolute;
+      bottom: 0; left: 0; right: 0;
+      padding: 4px 6px 5px;
+      background: rgba(0,0,0,0.6);
+      font: 9px/1.3 system-ui, sans-serif;
+      color: rgba(255,255,255,0.55);
+      letter-spacing: 0.02em;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      pointer-events: none;
+      z-index: 11;
+    }
+    body.overview .slide-cell .slide-label { display: block; }
+    /* Overview hint strip at top */
+    #overview-hint {
+      display: none;
+      position: fixed;
+      top: 0; left: 0; right: 0;
+      padding: 0.5rem 1.5rem;
+      font: 10px/1.5 system-ui, sans-serif;
+      color: rgba(255,255,255,0.25);
+      letter-spacing: 0.08em;
+      text-align: right;
+      pointer-events: none;
+      z-index: 200;
+    }
+    body.overview #overview-hint { display: block; }
+    /* Progress bar, counter, and HUD hidden in overview */
+    body.overview #progress,
+    body.overview #counter,
+    body.overview #hud { display: none; }
+    /* ── Blackout overlay (B = black screen, W = white screen) ───────────── */
+    #blackout {
+      position: fixed;
+      inset: 0;
+      z-index: 80;
+      pointer-events: none;
+      opacity: 0;
+      transition: opacity 200ms ease;
+    }
+    #blackout.is-black { background: #000; opacity: 1; pointer-events: auto; }
+    #blackout.is-white { background: #fff; opacity: 1; pointer-events: auto; }
+  </style>
+</head>
+<body>
+<!-- ── Stage ────────────────────────────────────────────────────────────── -->
+<!-- All slide cells (each wrapping an iframe) are injected here by JS.      -->
+<div id="stage">
+  <!-- LLM: DO NOT add content here manually. JS builds slide cells from slides[]. -->
+</div>
+<!-- ── UI chrome ─────────────────────────────────────────────────────────── -->
+<div id="progress"></div>
+<div id="counter"></div>
+<!-- HUD: keyboard hint pill — fades in on activity, fades out after 1.6 s -->
+<div id="hud">
+  <span id="hud-count">— / —</span>
+  <span class="hud-sep">/</span>
+  <span><kbd>&larr;</kbd> <kbd>&rarr;</kbd> nav</span>
+  <span class="hud-sep">/</span>
+  <kbd>G</kbd> grid
+  <span class="hud-sep">/</span>
+  <kbd>F</kbd> full
+  <span class="hud-sep">/</span>
+  <kbd>P</kbd> notes
+  <span class="hud-sep">/</span>
+  <kbd>B</kbd><kbd>W</kbd> blank
+</div>
+<div id="overview-hint">Overview — click a slide to jump &nbsp;·&nbsp; G or Esc to close</div>
+<!-- ── Blackout overlay ───────────────────────────────────────────────────── -->
+<!-- B = black screen · W = white screen · press again to dismiss             -->
+<div id="blackout" aria-hidden="true"></div>
+<script src="js/presenter.js"></script>
+<script>
+// ═══════════════════════════════════════════════════════════════════════════
+//  SLIDE MANIFEST
+//
+//  Each entry: { path, hidden, name }
+//    path   – slide HTML path relative to this index.html (forward slashes)
+//    name   – unique slug for the URL hash (e.g. 'problem' → #problem)
+//             Do NOT use numbers — playback order is controlled by this array.
+//    hidden – true = skip during playback AND hide from overview grid
+//
+//  Filename numbers (01-, 02-…) do NOT drive playback order.
+//  This array is the single source of truth for slide order.
+//  LLM: Replace the placeholder entries below with the actual slide list.
+// ═══════════════════════════════════════════════════════════════════════════
+const slides = [
+  // LLM: List every slide as { path, hidden, name }, in presentation order.
+  // { path: 'slides/title.html',   hidden: false, name: 'title' },
+  // { path: 'slides/problem.html', hidden: false, name: 'problem' },
+  // { path: 'slides/solution.html',hidden: false, name: 'solution' },
+  // { path: 'slides/closing.html', hidden: false, name: 'closing' },
+];
+// ═══════════════════════════════════════════════════════════════════════════
+//  DERIVED STATE — do not edit below this line
+// ═══════════════════════════════════════════════════════════════════════════
+/** Visible playlist — what nav, grid, HUD, and URL hash all index into. */
+const playable   = slides.filter(s => !s.hidden);
+const total      = playable.length;
+const nameToIdx  = Object.fromEntries(playable.map((s, i) => [s.name, i]));
+let current    = 0;
+let inOverview = false;
+let presenter  = null;
+const stage      = document.getElementById('stage');
+const bar        = document.getElementById('progress');
+const counter    = document.getElementById('counter');
+const hud        = document.getElementById('hud');
+const hudCount   = document.getElementById('hud-count');
+const blackoutEl = document.getElementById('blackout');
+let blackoutMode = null; // 'black' | 'white' | null
+function toggleBlackout(mode) {
+  if (blackoutMode === mode) {
+    blackoutMode = null;
+    blackoutEl.className = '';
+  } else {
+    blackoutMode = mode;
+    blackoutEl.className = mode === 'black' ? 'is-black' : 'is-white';
+  }
+}
+// ═══════════════════════════════════════════════════════════════════════════
+//  BUILD SLIDE CELLS
+//  Each visible iframe is wrapped in a .slide-cell div.
+//  Normal mode : cells are absolute overlays stacked on the stage.
+//  Overview mode: cells become 256×144 grid items (iframe scaled 0.2×).
+// ═══════════════════════════════════════════════════════════════════════════
+playable.forEach((slide, i) => {
+  const cell = document.createElement('div');
+  cell.className = 'slide-cell';
+  cell.addEventListener('click', () => {
+    if (inOverview) { closeOverview(); go(i); }
+  });
+  const f = document.createElement('iframe');
+  f.src       = slide.path;
+  f.className = 'slide-frame';
+  f.setAttribute('tabindex', '-1');
+  f.setAttribute('title', `Slide ${i + 1}: ${slide.name}`);
+  // Slide number badge (overview only)
+  const num = document.createElement('span');
+  num.className   = 'slide-num';
+  num.textContent = String(i + 1).padStart(2, '0');
+  // Name label (overview only)
+  const label = document.createElement('span');
+  label.className   = 'slide-label';
+  label.textContent = slide.name.replaceAll('-', ' ');
+  cell.appendChild(f);
+  cell.appendChild(num);
+  cell.appendChild(label);
+  stage.appendChild(cell);
+});
+const frames = () => stage.querySelectorAll('.slide-frame');
+const cells  = () => stage.querySelectorAll('.slide-cell');
+if (typeof initPresenter === 'function') {
+  presenter = initPresenter(
+    () => stage.querySelector('.slide-frame[data-active]'),
+    playable,
+    () => current
+  );
+}
+// ═══════════════════════════════════════════════════════════════════════════
+//  SCALE STAGE TO WINDOW
+//  Maintains 1280×720 (16:9) at any window size.
+// ═══════════════════════════════════════════════════════════════════════════
+function scaleStage() {
+  if (inOverview) return;
+  const s = Math.min(
+    window.innerWidth  / 1280,
+    window.innerHeight / 720
+  );
+  stage.style.transform = `scale(${s})`;
+}
+const ro = new ResizeObserver(scaleStage);
+ro.observe(document.documentElement);
+scaleStage();
+// ═══════════════════════════════════════════════════════════════════════════
+//  URL HASH → INDEX
+//  Accepts a slide name (#problem) or a legacy 1-based number (#5).
+// ═══════════════════════════════════════════════════════════════════════════
+function indexFromHash(h) {
+  const raw = (h || '').replace(/^#/, '');
+  if (!raw) return 0;
+  const decoded = (() => { try { return decodeURIComponent(raw); } catch (_) { return raw; } })();
+  if (Object.prototype.hasOwnProperty.call(nameToIdx, decoded)) return nameToIdx[decoded];
+  const n = parseInt(decoded, 10);
+  if (Number.isFinite(n) && n >= 1) return n - 1;
+  return 0;
+}
+function clampIndex(n) {
+  if (total === 0) return 0;
+  return Math.max(0, Math.min(total - 1, n));
+}
+// ═══════════════════════════════════════════════════════════════════════════
+//  NAVIGATION
+// ═══════════════════════════════════════════════════════════════════════════
+function go(idx) {
+  const allFrames = frames();
+  const allCells  = cells();
+  if (idx < 0 || idx >= total || !allFrames.length) return;
+  allFrames[current]?.removeAttribute('data-active');
+  allCells[current]?.classList.remove('is-active');
+  current = idx;
+  allFrames[current].setAttribute('data-active', '');
+  allCells[current].classList.add('is-active');
+  // ── Transfer focus to the newly active slide ────────────────────────────
+  // Without this, focus stays on the last-clicked iframe. Two failure modes:
+  //   1. Stale animation.js on the old (invisible) slide silently consumes
+  //      keystrokes — the user sees nothing happen.
+  //   2. Stale navbridge on the old slide forwards keys straight to the parent
+  //      (passthrough:true), bypassing the new slide's animation.js entirely.
+  // requestAnimationFrame lets the opacity transition start before we steal
+  // focus; the try/catch handles the initial go(0) call before iframes load.
+  ;(function (f) {
+    requestAnimationFrame(function () {
+      try { if (f.contentWindow) f.contentWindow.focus(); } catch (_) {}
+    });
+  })(allFrames[current]);
+  const slide = playable[current];
+  const pct = ((current + 1) / total) * 100;
+  bar.style.width     = pct + '%';
+  counter.textContent = `${current + 1} / ${total}`;
+  if (hudCount) hudCount.textContent = `${String(current + 1).padStart(2, '0')} / ${total}`;
+  // Name-based hash — stable across slide reorders
+  history.replaceState(null, '', '#' + encodeURIComponent(slide.name));
+  presenter?.onSlideChange();
+}
+// ═══════════════════════════════════════════════════════════════════════════
+//  HUD — auto-hide keyboard hint pill
+//  Show on any activity; fade after 1.6 s of idle.
+// ═══════════════════════════════════════════════════════════════════════════
+let hudTimer;
+function showHud() {
+  hud.classList.add('show');
+  clearTimeout(hudTimer);
+  hudTimer = setTimeout(() => hud.classList.remove('show'), 1600);
+}
+window.addEventListener('mousemove', showHud);
+// ═══════════════════════════════════════════════════════════════════════════
+//  OVERVIEW MODE
+//  G key opens the thumbnail grid. G or Escape closes it.
+//  Clicking a thumbnail closes overview and jumps to that slide.
+// ═══════════════════════════════════════════════════════════════════════════
+function openOverview() {
+  inOverview = true;
+  document.body.classList.add('overview');
+  document.body.style.overflow = '';
+}
+function closeOverview() {
+  inOverview = false;
+  document.body.classList.remove('overview');
+  requestAnimationFrame(scaleStage);
+}
+// ═══════════════════════════════════════════════════════════════════════════
+//  KEYBOARD — single point of truth
+//  • Parent window focused: keydown listener below fires directly.
+//  • Iframe focused: js/navbridge.js inside the slide posts a message,
+//    which the window message listener converts into a handleKey() call.
+//  Do NOT attach a second keydown listener to the iframe — that would
+//  double-fire and advance two slides per key press.
+// ═══════════════════════════════════════════════════════════════════════════
+function handleKey(e) {
+  if (inOverview) {
+    if (e.key === 'Escape' || e.key === 'g' || e.key === 'G') closeOverview();
+    return;
+  }
+  // ── Step-animation routing ──────────────────────────────────────────────
+  // When the parent window has focus (initial load, browser chrome refocus,
+  // overview close, or other parent-level interaction), nav keys fire here
+  // directly and bypass animation.js inside the iframe entirely. Fix: forward
+  // those keys into the active iframe so
+  // animation.js can intercept them in capture phase. animation.js consumes the
+  // key (stopImmediatePropagation) if a step is pending; navbridge inside the
+  // iframe then posts back only once all steps are exhausted, at which point
+  // the message handler below calls handleKey with passthrough:true and normal
+  // slide navigation resumes.
+  // passthrough:true is set only by the message handler — it marks a reply from
+  // navbridge meaning "nothing left to consume, please advance/retreat."
+  if (!e.passthrough) {
+    var _stepKeys = { ArrowRight: 1, ArrowDown: 1, ' ': 1, ArrowLeft: 1, ArrowUp: 1 };
+    if (_stepKeys[e.key]) {
+      var _af = stage.querySelector('.slide-frame[data-active]');
+      if (_af) {
+        try { _af.contentWindow.postMessage({ type: 'octocode-slides:key', key: e.key }, '*'); }
+        catch (_) {}
+      }
+      showHud();
+      if (e.preventDefault) e.preventDefault();
+      return;
+    }
+  }
+  let handled = true;
+  switch (e.key) {
+    case 'ArrowRight':
+    case 'ArrowDown':
+    case ' ':
+      go(current + 1);
+      break;
+    case 'ArrowLeft':
+    case 'ArrowUp':
+      go(current - 1);
+      break;
+    case 'Home':  go(0); break;
+    case 'End':   go(total - 1); break;
+    case 'f':
+    case 'F':
+      document.fullscreenElement
+        ? document.exitFullscreen?.()
+        : document.documentElement.requestFullscreen?.();
+      break;
+    case 'g':
+    case 'G':
+      openOverview();
+      break;
+    case 'p':
+    case 'P':
+      presenter?.open();
+      break;
+    case 'b':
+    case 'B':
+      toggleBlackout('black');
+      break;
+    case 'w':
+    case 'W':
+      toggleBlackout('white');
+      break;
+    default:
+      handled = false;
+  }
+  if (handled) {
+    showHud();
+    if (e.preventDefault) e.preventDefault();
+  }
+}
+document.addEventListener('keydown', handleKey, true);
+// ═══════════════════════════════════════════════════════════════════════════
+//  NAVBRIDGE — postMessage receiver
+//  js/navbridge.js inside each slide iframe forwards nav keys via postMessage
+//  when the iframe has focus (user clicked inside the slide).
+// ═══════════════════════════════════════════════════════════════════════════
+window.addEventListener('message', function (event) {
+  var data = event.data;
+  if (!data || typeof data !== 'object') return;
+  if (data.type === 'octocode-slides:nav' && data.key) {
+    // passthrough:true tells handleKey this reply came from navbridge inside the
+    // iframe — animation.js had nothing left to consume, so navigate normally.
+    handleKey({ key: data.key, passthrough: true, preventDefault: function () {} });
+  } else if (data.type === 'octocode-slides:activity') {
+    showHud();
+  } else if (data.type === 'octocode-slides:presenter-goto') {
+    go(clampIndex(data.index));
+  }
+});
+// ═══════════════════════════════════════════════════════════════════════════
+//  TOUCH / SWIPE  (left swipe = next, right swipe = previous)
+// ═══════════════════════════════════════════════════════════════════════════
+let touchStartX = null;
+document.addEventListener('touchstart', e => {
+  if (!inOverview) touchStartX = e.touches[0].clientX;
+}, { passive: true });
+document.addEventListener('touchend', e => {
+  if (touchStartX === null || inOverview) return;
+  const diff = touchStartX - e.changedTouches[0].clientX;
+  if (Math.abs(diff) > 40) go(current + (diff > 0 ? 1 : -1));
+  touchStartX = null;
+});
+// ═══════════════════════════════════════════════════════════════════════════
+//  WHEEL NAVIGATION  (scroll down = next, scroll up = previous)
+// ═══════════════════════════════════════════════════════════════════════════
+let wheelTimer = null;
+document.addEventListener('wheel', function(e) {
+  if (inOverview) return;
+  if (Math.abs(e.deltaY) < 20) return;
+  clearTimeout(wheelTimer);
+  wheelTimer = setTimeout(function() {
+    go(current + (e.deltaY > 0 ? 1 : -1));
+  }, 60);
+}, { passive: true });
+// ═══════════════════════════════════════════════════════════════════════════
+//  HASH NAVIGATION
+//  index.html#my-slide jumps to that slide directly.
+//  Accepts name slugs (#problem) and legacy 1-based numbers (#5).
+//  URL is updated automatically on every slide change via history.replaceState.
+// ═══════════════════════════════════════════════════════════════════════════
+window.addEventListener('hashchange', function () {
+  const next = clampIndex(indexFromHash(location.hash));
+  if (next !== current) go(next);
+});
+// ═══════════════════════════════════════════════════════════════════════════
+//  INIT — respect hash on first load, else start at slide 1
+// ═══════════════════════════════════════════════════════════════════════════
+// Do not pre-mark slide 1 active; go() is the single activation path so
+// direct hash loads (#problem) never leave two visible iframes.
+go(clampIndex(indexFromHash(location.hash)));
+showHud();
+</script>
+</body>
+</html>