octocode-cli 1.3.0 → 1.5.0

package/skills/octocode-slides/scripts/generate_image.py

@@ -0,0 +1,221 @@
+#!/usr/bin/env python3
+
+# /// script
+# requires-python = ">=3.11"
+# dependencies = [
+#   "google-genai",
+#   "pillow",
+# ]
+# ///
+
+"""
+Generate and edit images using Nano Banana 2 (Gemini 3.1 Flash Image Preview).
+
+Usage examples:
+    uv run skills/octocode-slides/scripts/generate_image.py \
+      --prompt "A serene Japanese garden at sunrise" \
+      --filename "assets/hero-2026-05-10-22-00-00.png" \
+      --resolution 2K \
+      --aspect-ratio 16:9
+
+    uv run skills/octocode-slides/scripts/generate_image.py \
+      --prompt "Turn this into a cinematic poster" \
+      --filename "assets/edited.png" \
+      --input-image "assets/reference.png" \
+      --resolution 4K
+
+API key resolution order:
+  1. --api-key argument
+  2. GEMINI_API_KEY environment variable
+
+Get your key: https://aistudio.google.com/apikey
+"""
+
+import argparse
+import os
+import sys
+from io import BytesIO
+from pathlib import Path
+
+SUPPORTED_ASPECT_RATIOS = [
+    "1:1", "1:4", "1:8", "2:3", "3:2", "3:4", "4:1",
+    "4:3", "4:5", "5:4", "8:1", "9:16", "16:9", "21:9",
+]
+SUPPORTED_RESOLUTIONS = ["512px", "1K", "2K", "4K"]
+MAX_REFERENCE_IMAGES = 14
+
+
+def get_api_key(provided_key: str | None) -> str | None:
+    """Get API key from argument first, then environment."""
+    if provided_key:
+        return provided_key
+    return os.environ.get("GEMINI_API_KEY")
+
+
+def save_png(image, output_path: Path) -> None:
+    """Save image as PNG in RGB mode."""
+    if image.mode == "RGBA":
+        image.convert("RGB").save(str(output_path), "PNG")
+    elif image.mode == "RGB":
+        image.save(str(output_path), "PNG")
+    else:
+        image.convert("RGB").save(str(output_path), "PNG")
+
+
+def auto_detect_resolution(input_images, user_resolution: str) -> str:
+    """Auto-select output size from input references when user left default 1K."""
+    if user_resolution != "1K" or not input_images:
+        return user_resolution
+
+    max_dim = max(max(image.size) for image in input_images)
+    if max_dim >= 3000:
+        return "4K"
+    if max_dim >= 1500:
+        return "2K"
+    if max_dim <= 640:
+        return "512px"
+    return "1K"
+
+
+def main() -> None:
+    parser = argparse.ArgumentParser(
+        description="Generate/edit images with Nano Banana 2 (gemini-3.1-flash-image-preview)"
+    )
+    parser.add_argument("--prompt", "-p", required=True, help="Image prompt/instructions")
+    parser.add_argument("--filename", "-f", required=True, help="Output filename (.png recommended)")
+    parser.add_argument(
+        "--input-image",
+        "-i",
+        action="append",
+        default=[],
+        help=(
+            "Optional reference/input image path. Repeat flag for multiple images "
+            f"(up to {MAX_REFERENCE_IMAGES})."
+        ),
+    )
+    parser.add_argument(
+        "--resolution",
+        "-r",
+        choices=SUPPORTED_RESOLUTIONS,
+        default="1K",
+        help="Output resolution: 512px, 1K (default), 2K, or 4K",
+    )
+    parser.add_argument(
+        "--aspect-ratio",
+        "-a",
+        choices=SUPPORTED_ASPECT_RATIOS,
+        help="Optional output aspect ratio",
+    )
+    parser.add_argument("--api-key", "-k", help="Gemini API key (overrides GEMINI_API_KEY env var)")
+
+    args = parser.parse_args()
+
+    api_key = get_api_key(args.api_key)
+    if not api_key:
+        print("Error: No API key provided.", file=sys.stderr)
+        print("  1. Pass --api-key <your-key>", file=sys.stderr)
+        print("  2. Or set: export GEMINI_API_KEY='...'", file=sys.stderr)
+        print("  Get a key: https://aistudio.google.com/apikey", file=sys.stderr)
+        sys.exit(1)
+
+    if len(args.input_image) > MAX_REFERENCE_IMAGES:
+        print(
+            f"Error: Too many input images ({len(args.input_image)}). "
+            f"Maximum supported: {MAX_REFERENCE_IMAGES}.",
+            file=sys.stderr,
+        )
+        sys.exit(1)
+
+    from google import genai
+    from google.genai import types
+    from PIL import Image as PILImage
+
+    client = genai.Client(api_key=api_key)
+
+    output_path = Path(args.filename)
+    output_path.parent.mkdir(parents=True, exist_ok=True)
+
+    input_images = []
+    if args.input_image:
+        for image_path in args.input_image:
+            try:
+                image = PILImage.open(image_path)
+                input_images.append(image)
+                print(f"Loaded input image: {image_path}")
+            except Exception as exc:
+                print(f"Error loading input image '{image_path}': {exc}", file=sys.stderr)
+                sys.exit(1)
+
+    output_resolution = auto_detect_resolution(input_images, args.resolution)
+
+    image_config_kwargs = {"image_size": output_resolution}
+    if args.aspect_ratio:
+        image_config_kwargs["aspect_ratio"] = args.aspect_ratio
+
+    if input_images:
+        contents = [args.prompt, *input_images]
+        print(
+            f"Editing/generating from {len(input_images)} reference image(s), "
+            f"resolution {output_resolution}"
+            + (f", aspect ratio {args.aspect_ratio}" if args.aspect_ratio else "")
+            + "..."
+        )
+    else:
+        contents = [args.prompt]
+        print(
+            f"Generating image, resolution {output_resolution}"
+            + (f", aspect ratio {args.aspect_ratio}" if args.aspect_ratio else "")
+            + "..."
+        )
+
+    try:
+        response = client.models.generate_content(
+            model="gemini-3.1-flash-image-preview",
+            contents=contents,
+            config=types.GenerateContentConfig(
+                response_modalities=["TEXT", "IMAGE"],
+                image_config=types.ImageConfig(**image_config_kwargs),
+            ),
+        )
+
+        image_parts = 0
+        saved_paths = []
+
+        for part in response.parts:
+            if part.text is not None:
+                print(f"Model response: {part.text}")
+            elif part.inline_data is not None:
+                image_parts += 1
+
+                image_data = part.inline_data.data
+                if isinstance(image_data, str):
+                    import base64
+                    image_data = base64.b64decode(image_data)
+
+                image = PILImage.open(BytesIO(image_data))
+
+                if image_parts == 1:
+                    current_path = output_path
+                else:
+                    current_path = output_path.with_name(
+                        f"{output_path.stem}-{image_parts}{output_path.suffix or '.png'}"
+                    )
+
+                save_png(image, current_path)
+                saved_paths.append(current_path.resolve())
+
+        if saved_paths:
+            print("\nSaved:")
+            for path in saved_paths:
+                print(f"  {path}")
+        else:
+            print("Error: No image was generated in the response.", file=sys.stderr)
+            sys.exit(1)
+
+    except Exception as exc:
+        print(f"Error generating image: {exc}", file=sys.stderr)
+        sys.exit(1)
+
+
+if __name__ == "__main__":
+    main()

package/skills/octocode-slides/scripts/navbridge.js

@@ -0,0 +1,79 @@
+/*
+ * Slide → parent navigation bridge.
+ *
+ * When a slide iframe has keyboard focus (after the user clicks anywhere
+ * inside it), arrow keys fire on the iframe's document, not the parent
+ * window. This script forwards those keys to the parent via postMessage
+ * so the navigation controller in index.html can keep working.
+ *
+ * Usage: copy to js/navbridge.js at the deck root.
+ * Each slide includes: <script src="../js/navbridge.js"></script>
+ */
+(function () {
+  if (window.parent === window) return; // standalone, not embedded
+
+  var NAV_KEYS = {
+    ArrowLeft: 1, ArrowRight: 1, ArrowUp: 1, ArrowDown: 1,
+    PageUp: 1, PageDown: 1, Home: 1, End: 1,
+    ' ': 1, g: 1, G: 1, f: 1, F: 1,
+    b: 1, B: 1, w: 1, W: 1, p: 1, P: 1
+  };
+
+  function isTypingTarget(el) {
+    if (!el) return false;
+    var tag = (el.tagName || '').toLowerCase();
+    if (tag === 'input' || tag === 'textarea' || tag === 'select') return true;
+    return !!el.isContentEditable;
+  }
+
+  function hasTextSelection() {
+    try {
+      var sel = window.getSelection && window.getSelection();
+      return !!(sel && String(sel).length > 0);
+    } catch (_) { return false; }
+  }
+
+  function send(key) {
+    try {
+      window.parent.postMessage(
+        { type: 'octocode-slides:nav', key: key },
+        '*'
+      );
+    } catch (_) { /* ignore cross-origin failures */ }
+  }
+
+  document.addEventListener('keydown', function (e) {
+    if (isTypingTarget(e.target)) return;
+    if (!NAV_KEYS[e.key]) return;
+    if (e.key === ' ' && hasTextSelection()) return;
+    send(e.key);
+    e.preventDefault();
+  }, true);
+
+  // Forward mouse activity so the parent HUD wakes back up
+  document.addEventListener('mousemove', function () {
+    try { window.parent.postMessage({ type: 'octocode-slides:activity' }, '*'); }
+    catch (_) {}
+  }, { passive: true });
+
+  // ── Step-animation back-channel ─────────────────────────────────────────
+  // The parent forwards nav keys here (instead of navigating immediately) so
+  // animation.js gets first refusal on each keystroke, even when the parent
+  // window has focus. We dispatch a synthetic keydown on the slide's document:
+  //   • animation.js (capture, registered first) intercepts — if a step is
+  //     pending it calls stopImmediatePropagation, navbridge's own listener
+  //     never fires, no postMessage goes back, parent stays on this slide.
+  //   • If animation.js has nothing left to consume the event falls through to
+  //     navbridge's keydown listener, which posts back to the parent, and the
+  //     parent's message handler calls handleKey(passthrough:true) → navigate.
+  // Slides without animation.js: the synthetic event reaches navbridge's
+  // listener directly and posts back immediately — no delay, no hang.
+  window.addEventListener('message', function (event) {
+    var data = event.data;
+    if (!data || data.type !== 'octocode-slides:key' || !data.key) return;
+    if (!NAV_KEYS[data.key]) return;
+    document.dispatchEvent(
+      new KeyboardEvent('keydown', { key: data.key, bubbles: true, cancelable: true })
+    );
+  });
+})();

package/skills/octocode-slides/scripts/presenter.js

@@ -0,0 +1,316 @@
+/**
+ * Octocode Slides — Presenter View
+ *
+ * Press P in the generated deck shell to open the presenter popup.
+ *
+ * The popup shows:
+ *   - Current slide live preview (scaled iframe)
+ *   - Next slide live preview (scaled iframe)
+ *   - Speaker notes
+ *   - Running timer (persisted across page refreshes via localStorage)
+ *   - Jump-to-slide control (updates the main deck window)
+ *
+ * Requires same-origin serving (npx serve works; file:// does not).
+ * The default scripts/base.html template already loads and wires this file;
+ * custom index.html files should copy that integration instead of inventing
+ * a second keyboard handler.
+ *
+ * Expected call site in index.html:
+ *
+ *   initPresenter(
+ *     () => stage.querySelector('.slide-frame[data-active]'),
+ *     playable,
+ *     () => current
+ *   );
+ */
+function initPresenter(getActiveFrame, playable, getCurrentIndex) {
+  // ── localStorage key — scoped to this deck (title + pathname) ───────────
+  // Survives page refreshes on localhost so the timer keeps running while
+  // you edit slides. Cleared on "Reset timer" or when the deck changes.
+  var LS_KEY = 'octocode-slides:timer:' +
+    (document.title || 'deck') + ':' + location.pathname;
+
+  var win       = null;
+  var elapsed   = 0;
+  var timerRef  = null;
+  var startTime = null;
+
+  // ── Restore timer across page refreshes ─────────────────────────────────
+  (function restoreTimer() {
+    try {
+      var saved = localStorage.getItem(LS_KEY);
+      if (!saved) return;
+      var data = JSON.parse(saved);
+      if (data && data.startTime) {
+        startTime = data.startTime;
+        elapsed = Math.floor((Date.now() - startTime) / 1000);
+        if (elapsed < 0) elapsed = 0;
+      }
+    } catch (_) {}
+  })();
+
+  // ── Popup HTML ───────────────────────────────────────────────────────────
+  // Layout (4-row grid):
+  //   topbar   — slide name (left) + running timer (right)
+  //   previews — current slide iframe + next slide iframe (two columns)
+  //   notes    — scrollable speaker notes (fills remaining height)
+  //   bottom   — jump-to-slide input · Reset timer · Close
+  var POPUP_HTML =
+    '<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8">' +
+    '<title>Presenter View</title><style>' +
+    '*{box-sizing:border-box;margin:0;padding:0}' +
+    'html,body{height:100%;background:#0a0a0a;color:#e0e0e0;' +
+      'font-family:system-ui,sans-serif;overflow:hidden}' +
+    '#wrap{display:grid;grid-template-rows:auto auto 1fr auto;' +
+      'height:100vh;padding:14px 18px;gap:10px}' +
+
+    /* ── Top bar ── */
+    '#topbar{display:flex;justify-content:space-between;align-items:center;gap:8px}' +
+    '#slide-name{font-size:13px;font-weight:600;color:#c8c8c8;letter-spacing:.04em;' +
+      'overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}' +
+    '#timer{font-variant-numeric:tabular-nums;font-size:20px;font-weight:700;' +
+      'color:#e0e0e0;letter-spacing:.1em;white-space:nowrap}' +
+    '#timer.warn{color:#f59e0b}#timer.over{color:#ef4444}' +
+
+    /* ── Previews row ── */
+    '#previews{display:grid;grid-template-columns:1fr 1fr;gap:12px}' +
+    '.pv-col{display:flex;flex-direction:column;gap:5px}' +
+    '.pv-label{font-size:10px;color:#555;letter-spacing:.08em;text-transform:uppercase}' +
+    '.pv-box{position:relative;width:100%;overflow:hidden;border-radius:5px;' +
+      'background:#000;border:1px solid #1e1e1e}' +
+    '.pv-box iframe{position:absolute;top:0;left:0;width:1280px;height:720px;' +
+      'border:none;pointer-events:none;transform-origin:top left}' +
+    '.pv-empty{display:grid;place-items:center;font-size:11px;' +
+      'color:#444;font-style:italic}' +
+
+    /* ── Notes area ── */
+    '#notes-area{display:flex;flex-direction:column;gap:5px;min-height:0}' +
+    '#notes{background:#141414;border:1px solid #2a2a2a;border-radius:6px;' +
+      'padding:12px 16px;font-size:14px;line-height:1.65;overflow-y:auto;' +
+      'white-space:pre-wrap;color:#d0d0d0;flex:1;min-height:0}' +
+    '#notes.empty{color:#555;font-style:italic}' +
+
+    /* ── Bottom bar ── */
+    '#bottom{display:flex;align-items:center;gap:8px;flex-wrap:wrap;' +
+      'border-top:1px solid #1e1e1e;padding-top:8px}' +
+    '#jump{display:flex;align-items:center;gap:5px;font-size:12px;color:#666}' +
+    '#jump-input{width:44px;background:#1e1e1e;border:1px solid #333;' +
+      'border-radius:4px;color:#ccc;font:13px system-ui;padding:3px 6px;' +
+      'text-align:center;-moz-appearance:textfield}' +
+    '#jump-input::-webkit-inner-spin-button{-webkit-appearance:none}' +
+    '#jump-total{color:#444;font-size:11px}' +
+    '#spacer{flex:1}' +
+    'button{background:#1e1e1e;border:1px solid #333;border-radius:4px;' +
+      'color:#aaa;font:12px system-ui;padding:4px 10px;cursor:pointer}' +
+    'button:hover{background:#2a2a2a;color:#eee}' +
+    '</style></head><body>' +
+
+    '<div id="wrap">' +
+    '  <div id="topbar">' +
+    '    <span id="slide-name">\u2014</span><span id="timer">00:00</span>' +
+    '  </div>' +
+    '  <div id="previews">' +
+    '    <div class="pv-col">' +
+    '      <div class="pv-label">Now showing</div>' +
+    '      <div class="pv-box" id="curr-box"><div class="pv-empty" style="height:140px">\u2014</div></div>' +
+    '    </div>' +
+    '    <div class="pv-col">' +
+    '      <div class="pv-label">Up next</div>' +
+    '      <div class="pv-box" id="next-box"><div class="pv-empty" style="height:140px">(last slide)</div></div>' +
+    '    </div>' +
+    '  </div>' +
+    '  <div id="notes-area">' +
+    '    <div class="pv-label">Speaker notes</div>' +
+    '    <div id="notes" class="empty">(no speaker notes)</div>' +
+    '  </div>' +
+    '  <div id="bottom">' +
+    '    <div id="jump">Slide <input id="jump-input" type="number" min="1" value="1">' +
+    '      <span id="jump-total">/ \u2014</span></div>' +
+    '    <span id="spacer"></span>' +
+    '    <button id="btn-reset">Reset timer</button>' +
+    '    <button id="btn-close">Close</button>' +
+    '  </div>' +
+    '</div>' +
+
+    '<script>' +
+    // Scale preview iframes to fill their boxes (slides are 1280×720)
+    'function updateScale(){' +
+    '  ["curr","next"].forEach(function(id){' +
+    '    var box=document.getElementById(id+"-box");' +
+    '    var f=box&&box.querySelector("iframe");' +
+    '    if(!box||!f)return;' +
+    '    var w=box.clientWidth;var scale=w/1280;' +
+    '    box.style.height=Math.round(720*scale)+"px";' +
+    '    f.style.transform="scale("+scale+")";' +
+    '  });' +
+    '}' +
+    'window.addEventListener("resize",updateScale);' +
+
+    // Receive state updates from the deck window
+    'window.addEventListener("message",function(e){' +
+    '  var d=e.data;if(!d||d.type!=="octocode-slides:presenter-update")return;' +
+
+    // Notes
+    '  var nEl=document.getElementById("notes");' +
+    '  if(d.notes){nEl.textContent=d.notes;nEl.className=""}' +
+    '  else{nEl.textContent="(no speaker notes)";nEl.className="empty"}' +
+
+    // Slide name
+    '  document.getElementById("slide-name").textContent=d.name||"\u2014";' +
+
+    // Jump control
+    '  if(typeof d.totalSlides==="number"){' +
+    '    document.getElementById("jump-total").textContent="/ "+d.totalSlides;' +
+    '    document.getElementById("jump-input").max=d.totalSlides;' +
+    '    document.getElementById("jump-input").value=(d.currentIndex||0)+1;' +
+    '  }' +
+
+    // Current slide preview
+    '  var cBox=document.getElementById("curr-box");' +
+    '  if(d.currUrl){' +
+    '    var cf=cBox.querySelector("iframe");' +
+    '    if(!cf||cf.src!==d.currUrl){' +
+    '      cBox.innerHTML=\'<iframe src="\'+d.currUrl+\'"></iframe>\';' +
+    '      updateScale();' +
+    '    }' +
+    '  }' +
+
+    // Next slide preview
+    '  var nBox=document.getElementById("next-box");' +
+    '  if(d.nextUrl){' +
+    '    var nf=nBox.querySelector("iframe");' +
+    '    if(!nf||nf.src!==d.nextUrl){' +
+    '      nBox.innerHTML=\'<iframe src="\'+d.nextUrl+\'"></iframe>\';' +
+    '      updateScale();' +
+    '    }' +
+    '  }else{' +
+    '    nBox.innerHTML=\'<div class="pv-empty" style="height:140px">(last slide)</div>\';' +
+    '  }' +
+    '});' +
+
+    // Jump-to-slide: send index to opener so deck navigates
+    'document.getElementById("jump-input").addEventListener("change",function(){' +
+    '  var n=parseInt(this.value,10);if(!isFinite(n))return;' +
+    '  window.opener&&window.opener.postMessage(' +
+    '    {type:"octocode-slides:presenter-goto",index:n-1},"*");' +
+    '});' +
+
+    'document.getElementById("btn-reset").onclick=function(){' +
+    '  window.opener&&window.opener.postMessage(' +
+    '    {type:"octocode-slides:presenter-reset"},"*")};' +
+    'document.getElementById("btn-close").onclick=function(){window.close()};' +
+    '<\/script></body></html>';
+
+  // ── Timer ───────────────────────────────────────────────────────────────
+  function startTimer() {
+    if (!startTime) startTime = Date.now() - elapsed * 1000;
+    // Persist start time so a page refresh doesn't reset the clock
+    try { localStorage.setItem(LS_KEY, JSON.stringify({ startTime: startTime })); }
+    catch (_) {}
+
+    clearInterval(timerRef);
+    timerRef = setInterval(function () {
+      if (!win || win.closed) { clearInterval(timerRef); return; }
+      elapsed = Math.floor((Date.now() - startTime) / 1000);
+      var m = Math.floor(elapsed / 60);
+      var s = elapsed % 60;
+      var str = String(m).padStart(2, '0') + ':' + String(s).padStart(2, '0');
+      var timerEl = win.document.getElementById('timer');
+      if (!timerEl) return;
+      timerEl.textContent = str;
+      timerEl.className = elapsed > 3600 ? 'over' : elapsed > 2700 ? 'warn' : '';
+    }, 1000);
+  }
+
+  // ── Read speaker notes from active iframe ───────────────────────────────
+  function readNotes(frame) {
+    try {
+      var el = frame && frame.contentDocument &&
+               frame.contentDocument.querySelector('.speaker-notes');
+      if (!el) return '';
+      return (el.textContent || el.innerText || '').trim();
+    } catch (_) {
+      return '(speaker notes unavailable — serve from same origin: npx serve .)';
+    }
+  }
+
+  function frameLoaded(frame) {
+    try {
+      return !!(frame && frame.contentDocument &&
+        frame.contentDocument.readyState === 'complete');
+    } catch (_) {
+      return false;
+    }
+  }
+
+  // ── Push update to popup ────────────────────────────────────────────────
+  // Sends: slide names, speaker notes, slide URLs (for live previews),
+  //        total count and current index (for jump control).
+  function push() {
+    if (!win || win.closed) return;
+    var idx      = getCurrentIndex();
+    var curr     = playable[idx];
+    var next     = playable[idx + 1];
+    var frame    = getActiveFrame();
+    // Compute absolute base URL so iframe srcs work in the popup window
+    // (popup is opened with '', so relative URLs would not resolve).
+    var deckBase = location.href.replace(/[^\/]*$/, '');
+
+    function doSend() {
+      win.postMessage({
+        type:         'octocode-slides:presenter-update',
+        name:         curr ? curr.name : '\u2014',
+        next:         next ? next.name : null,
+        notes:        readNotes(frame),
+        currUrl:      curr ? deckBase + curr.path : null,
+        nextUrl:      next ? deckBase + next.path : null,
+        totalSlides:  playable.length,
+        currentIndex: idx
+      }, '*');
+    }
+
+    if (!frame || frameLoaded(frame)) {
+      doSend();
+    } else {
+      frame.addEventListener('load', doSend, { once: true });
+    }
+  }
+
+  // ── Open popup ──────────────────────────────────────────────────────────
+  function open() {
+    if (win && !win.closed) { win.focus(); return; }
+    win = window.open('', 'octocode-presenter',
+      'width=720,height=520,resizable=yes,scrollbars=no,toolbar=no,menubar=no');
+    if (!win) { console.warn('[presenter] Popup blocked — allow popups for this origin.'); return; }
+    win.document.open();
+    win.document.write(POPUP_HTML);
+    win.document.close();
+    // startTimer picks up startTime from localStorage restore if already running
+    startTimer();
+    setTimeout(push, 200); // let popup render first
+  }
+
+  // ── Listen for messages from popup ──────────────────────────────────────
+  window.addEventListener('message', function (e) {
+    if (!e.data) return;
+    if (e.data.type === 'octocode-slides:presenter-reset') {
+      elapsed = 0;
+      startTime = Date.now();
+      // Clear persisted timer so a refresh after reset starts from 00:00
+      try { localStorage.removeItem(LS_KEY); } catch (_) {}
+      // Re-persist the fresh start time
+      try { localStorage.setItem(LS_KEY, JSON.stringify({ startTime: startTime })); }
+      catch (_) {}
+    }
+  });
+
+  // ── Slide change hook ───────────────────────────────────────────────────
+  // Call push() whenever the slide changes.
+  // index.html should call presenter.onSlideChange() after go().
+  return {
+    open: open,
+    push: push,
+    /** Call this after go() in index.html to update the popup. */
+    onSlideChange: push
+  };
+}