keyframes 0.1.0__tar.gz → 0.3.0__tar.gz

{keyframes-0.1.0 → keyframes-0.3.0}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.3
 Name: keyframes
-Version: 0.1.0
+Version: 0.3.0
 Summary: Agent-written, interactive HTML slide decks with live 3D, physics, math, code and diagrams
 Keywords: slides,presentation,llm,agents,three.js,mujoco,katex
 Author: Pranay Thangeda
@@ -53,8 +53,16 @@ For exports install the browser once: `uv run playwright install chromium` (or h
 | --- | --- |
 | → / Space, ← | next / previous (build steps included) |
 | E | toggle the layout editor |
-| S | presenter view (notes, next slide, timer) |
+| S | presenter view in a second window (notes, next slide, timer, clickable slide strip) |
 | F | fullscreen · B blackout |
+| L | laser pointer on/off (on by default) |
+
+Hover the bottom-left corner for the `⋯` options menu (laser pointer, fullscreen, black
+screen, presenter view).
+
+Speaker notes live in each slide as `<aside class="notes">…</aside>`. Under `keyframes dev`
+you can also double-click the notes in presenter view to edit them; ⌘/Ctrl+Enter or clicking
+away saves straight into the slide file, Esc cancels.
 
 Editor: drag to move (Shift locks axis, Alt disables snapping), handles resize (Shift keeps
 aspect), arrows nudge (Shift ×10), `[`/`]` z-order, double-click to interact with a live

{keyframes-0.1.0 → keyframes-0.3.0}/README.md

@@ -32,8 +32,16 @@ For exports install the browser once: `uv run playwright install chromium` (or h
 | --- | --- |
 | → / Space, ← | next / previous (build steps included) |
 | E | toggle the layout editor |
-| S | presenter view (notes, next slide, timer) |
+| S | presenter view in a second window (notes, next slide, timer, clickable slide strip) |
 | F | fullscreen · B blackout |
+| L | laser pointer on/off (on by default) |
+
+Hover the bottom-left corner for the `⋯` options menu (laser pointer, fullscreen, black
+screen, presenter view).
+
+Speaker notes live in each slide as `<aside class="notes">…</aside>`. Under `keyframes dev`
+you can also double-click the notes in presenter view to edit them; ⌘/Ctrl+Enter or clicking
+away saves straight into the slide file, Esc cancels.
 
 Editor: drag to move (Shift locks axis, Alt disables snapping), handles resize (Shift keeps
 aspect), arrows nudge (Shift ×10), `[`/`]` z-order, double-click to interact with a live

{keyframes-0.1.0 → keyframes-0.3.0}/pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "keyframes"
-version = "0.1.0"
+version = "0.3.0"
 description = "Agent-written, interactive HTML slide decks with live 3D, physics, math, code and diagrams"
 readme = "README.md"
 requires-python = ">=3.12"

{keyframes-0.1.0 → keyframes-0.3.0}/pyproject.toml.orig

@@ -1,6 +1,6 @@
 [project]
 name = "keyframes"
-version = "0.1.0"
+version = "0.3.0"
 description = "Agent-written, interactive HTML slide decks with live 3D, physics, math, code and diagrams"
 readme = "README.md"
 authors = [

{keyframes-0.1.0 → keyframes-0.3.0}/src/keyframes/patch.py

@@ -16,12 +16,21 @@ class BlockTag:
     attrs: dict[str, str | None]
 
 
-class _BlockFinder(HTMLParser):
+class _OffsetParser(HTMLParser):
     def __init__(self, source: str):
         super().__init__(convert_charrefs=False)
         self.line_offsets = [0]
         for line in source.split("\n"):
             self.line_offsets.append(self.line_offsets[-1] + len(line) + 1)
+
+    def source_offset(self) -> int:
+        line, col = self.getpos()
+        return self.line_offsets[line - 1] + col
+
+
+class _BlockFinder(_OffsetParser):
+    def __init__(self, source: str):
+        super().__init__(source)
         self.blocks: list[BlockTag] = []
 
     def handle_starttag(self, tag, attrs):
@@ -29,14 +38,34 @@ class _BlockFinder(HTMLParser):
         block_id = attr_map.get("data-block")
         if block_id is None:
             return
-        line, col = self.getpos()
-        start = self.line_offsets[line - 1] + col
+        start = self.source_offset()
         text = self.get_starttag_text()
         self.blocks.append(BlockTag(block_id, start, start + len(text), text, attr_map))
 
     handle_startendtag = handle_starttag
 
 
+class _NotesFinder(_OffsetParser):
+    """Locates the inner content of the first <aside class="notes"> and the last </section>."""
+
+    def __init__(self, source: str):
+        super().__init__(source)
+        self.content: tuple[int, int] | None = None
+        self.content_start: int | None = None
+        self.section_end: int | None = None
+
+    def handle_starttag(self, tag, attrs):
+        classes = (dict(attrs).get("class") or "").split()
+        if tag == "aside" and "notes" in classes and self.content_start is None:
+            self.content_start = self.source_offset() + len(self.get_starttag_text())
+
+    def handle_endtag(self, tag):
+        if tag == "aside" and self.content_start is not None and self.content is None:
+            self.content = (self.content_start, self.source_offset())
+        elif tag == "section":
+            self.section_end = self.source_offset()
+
+
 def find_block_tags(source: str) -> list[BlockTag]:
     finder = _BlockFinder(source)
     finder.feed(source)
@@ -75,3 +104,18 @@ def patch_blocks(source: str, updates: dict[str, dict[str, str | None]]) -> str:
         new_text = set_attrs(tag.text, updates[tag.id])
         source = source[: tag.start] + new_text + source[tag.end :]
     return source
+
+
+def set_notes(source: str, notes: str) -> str:
+    """Replace the speaker notes' inner HTML, adding an <aside class="notes"> if the slide has none."""
+    finder = _NotesFinder(source)
+    finder.feed(source)
+    finder.close()
+    if finder.content:
+        start, end = finder.content
+        return source[:start] + notes + source[end:]
+    if not notes.strip():
+        return source
+    aside = f'  <aside class="notes">{notes}</aside>\n'
+    end = finder.section_end if finder.section_end is not None else len(source)
+    return source[:end] + aside + source[end:]

{keyframes-0.1.0 → keyframes-0.3.0}/src/keyframes/server.py

@@ -16,7 +16,7 @@ from starlette.websockets import WebSocket, WebSocketDisconnect
 from watchfiles import Change, awatch
 
 from .deck import STATIC_DIR, Deck, DeckError
-from .patch import geometry_attrs, patch_blocks
+from .patch import geometry_attrs, patch_blocks, set_notes
 from .render import render_index, render_slide
 from .terminal import TerminalManager
 from .vendor import VendorCache
@@ -132,6 +132,16 @@ def create_app(deck: Deck, mode: str = "dev") -> Starlette:
             return JSONResponse({"ok": True})
         return Response(path.read_text(), media_type="text/plain", headers={"Cache-Control": "no-store"})
 
+    async def save_notes(request: Request):
+        if not same_origin(request.headers):
+            return JSONResponse({"error": "cross-origin request"}, status_code=403)
+        try:
+            path = deck.slide_path(request.path_params["slide"])
+        except DeckError as e:
+            return JSONResponse({"error": str(e)}, status_code=404)
+        live.write(path, set_notes(path.read_text(), (await request.body()).decode()))
+        return JSONResponse({"ok": True})
+
     async def info(request: Request):
         return JSONResponse({"terminals": list(terminals.commands)})
 
@@ -162,6 +172,7 @@ def create_app(deck: Deck, mode: str = "dev") -> Starlette:
     dev_routes = [
         Route("/_api/geometry", save_geometry, methods=["POST"]),
         Route("/_api/source/{slide}", source, methods=["GET", "PUT"]),
+        Route("/_api/notes/{slide}", save_notes, methods=["PUT"]),
         Route("/_api/info", info),
         WebSocketRoute("/_api/live", websocket),
         WebSocketRoute("/_api/term/{name}", terminal),

keyframes-0.3.0/src/keyframes/static/runtime/controls.js

@@ -0,0 +1,181 @@
+const TRAIL_MS = 400;
+const TRAIL_WIDTH = 9;
+const DOT_RADIUS = 15;
+const RED = "255, 38, 38";
+const LASER_STORAGE = "keyframes-laser";
+
+const MENU_ITEMS = [
+  { action: "laser", label: "Laser pointer", key: "L" },
+  { action: "fullscreen", label: "Fullscreen", key: "F" },
+  { action: "blackout", label: "Black screen", key: "B" },
+  { action: "presenter", label: "Presenter view", key: "S" },
+];
+
+export function createLaser(deck) {
+  const root = document.documentElement;
+  const canvas = document.createElement("canvas");
+  canvas.className = "keyframes-laser";
+  document.body.append(canvas);
+  const ctx = canvas.getContext("2d");
+  const trailCanvas = document.createElement("canvas");
+  const trailCtx = trailCanvas.getContext("2d");
+  const trail = [];
+  let on = localStorage.getItem(LASER_STORAGE) !== "0";
+  let dot = null;
+  let frame = 0;
+
+  function resize() {
+    const dpr = devicePixelRatio || 1;
+    for (const [c, context] of [[canvas, ctx], [trailCanvas, trailCtx]]) {
+      c.width = innerWidth * dpr;
+      c.height = innerHeight * dpr;
+      context.setTransform(dpr, 0, 0, dpr, 0, 0);
+    }
+    schedule();
+  }
+
+  function overSlide(e) {
+    if (!on || root.classList.contains("keyframes-editing") || e.target.closest?.(".keyframes-menu")) return false;
+    const r = deck.current?.getBoundingClientRect();
+    return !!r && e.clientX >= r.left && e.clientX <= r.right && e.clientY >= r.top && e.clientY <= r.bottom;
+  }
+
+  function onMove(e) {
+    if (e.pointerType === "touch") return;
+    const inside = overSlide(e);
+    root.classList.toggle("keyframes-lasing", inside);
+    dot = inside ? { x: e.clientX, y: e.clientY } : null;
+    if (inside) {
+      const now = performance.now();
+      for (const p of e.getCoalescedEvents?.() ?? [e]) trail.push({ x: p.clientX, y: p.clientY, t: now });
+    }
+    schedule();
+  }
+
+  function hide() {
+    root.classList.remove("keyframes-lasing");
+    dot = null;
+    schedule();
+  }
+
+  function schedule() {
+    frame ||= requestAnimationFrame(draw);
+  }
+
+  function draw() {
+    frame = 0;
+    const now = performance.now();
+    while (trail.length && now - trail[0].t > TRAIL_MS) trail.shift();
+    ctx.clearRect(0, 0, innerWidth, innerHeight);
+    if (trail.length > 1) drawTrail(now);
+    if (dot) drawDot(dot);
+    if (trail.length) schedule();
+  }
+
+  function drawTrail(now) {
+    trailCtx.clearRect(0, 0, innerWidth, innerHeight);
+    trailCtx.strokeStyle = `rgb(${RED})`;
+    trailCtx.lineCap = "round";
+    for (let i = 1; i < trail.length; i++) {
+      trailCtx.lineWidth = TRAIL_WIDTH * (1 - (now - trail[i].t) / TRAIL_MS);
+      trailCtx.beginPath();
+      trailCtx.moveTo(trail[i - 1].x, trail[i - 1].y);
+      trailCtx.lineTo(trail[i].x, trail[i].y);
+      trailCtx.stroke();
+    }
+    ctx.save();
+    ctx.globalAlpha = 0.55;
+    ctx.shadowColor = `rgb(${RED})`;
+    ctx.shadowBlur = 12;
+    ctx.drawImage(trailCanvas, 0, 0, innerWidth, innerHeight);
+    ctx.restore();
+  }
+
+  function drawDot({ x, y }) {
+    const glow = ctx.createRadialGradient(x, y, 0, x, y, DOT_RADIUS);
+    glow.addColorStop(0, "rgb(255, 236, 236)");
+    glow.addColorStop(0.2, `rgb(${RED})`);
+    glow.addColorStop(0.42, `rgba(${RED}, 0.6)`);
+    glow.addColorStop(1, `rgba(${RED}, 0)`);
+    ctx.fillStyle = glow;
+    ctx.beginPath();
+    ctx.arc(x, y, DOT_RADIUS, 0, 2 * Math.PI);
+    ctx.fill();
+  }
+
+  function toggle() {
+    on = !on;
+    localStorage.setItem(LASER_STORAGE, on ? "1" : "0");
+    trail.length = 0;
+    hide();
+  }
+
+  resize();
+  addEventListener("resize", resize);
+  addEventListener("pointermove", onMove, { capture: true, passive: true });
+  root.addEventListener("mouseleave", hide);
+  deck.addEventListener("editmode", hide);
+  return {
+    get on() {
+      return on;
+    },
+    toggle,
+  };
+}
+
+export function createMenu(deck) {
+  const root = document.createElement("div");
+  root.className = "keyframes-menu";
+  root.innerHTML = `
+    <div class="keyframes-menu-list" role="menu" hidden>
+      ${MENU_ITEMS.map(
+        ({ action, label, key }) =>
+          `<button role="menuitem" data-action="${action}"><span class="keyframes-menu-check"></span>${label} (${key})</button>`,
+      ).join("")}
+    </div>
+    <button class="keyframes-menu-toggle" aria-label="Presentation options" title="Presentation options">
+      <svg viewBox="0 0 24 24"><circle cx="5" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="19" cy="12" r="2"/></svg>
+    </button>`;
+  document.body.append(root);
+  const list = root.querySelector(".keyframes-menu-list");
+
+  const actions = {
+    laser: () => deck.laser.toggle(),
+    fullscreen: () => deck.toggleFullscreen(),
+    blackout: () => deck.toggleBlackout(),
+    presenter: () => deck.openPresenter(),
+  };
+  const isOn = {
+    laser: () => deck.laser.on,
+    fullscreen: () => !!document.fullscreenElement,
+    blackout: () => document.body.classList.contains("keyframes-blackout"),
+  };
+
+  function sync() {
+    for (const button of list.querySelectorAll("[data-action]")) {
+      button.classList.toggle("is-on", !!isOn[button.dataset.action]?.());
+    }
+  }
+
+  function setOpen(open) {
+    list.hidden = !open;
+    root.classList.toggle("is-open", open);
+    if (open) sync();
+  }
+
+  root.addEventListener("mousedown", (e) => e.preventDefault());
+  root.addEventListener("click", (e) => {
+    if (e.target.closest(".keyframes-menu-toggle")) return setOpen(list.hidden);
+    const action = e.target.closest("[data-action]")?.dataset.action;
+    if (!action) return;
+    actions[action]();
+    if (action === "presenter") setOpen(false);
+    else sync();
+  });
+  document.addEventListener("pointerdown", (e) => !root.contains(e.target) && setOpen(false));
+  document.addEventListener("keydown", (e) => {
+    if (e.key === "Escape") setOpen(false);
+    else if (!list.hidden) requestAnimationFrame(sync);
+  });
+  document.addEventListener("fullscreenchange", sync);
+}

keyframes-0.3.0/src/keyframes/static/runtime/presenter.js

@@ -0,0 +1,202 @@
+import { renderMath } from "./math.js";
+import { applyGeometry } from "./runtime.js";
+import { applySteps, maxStep } from "./steps.js";
+
+const THUMB_HEIGHT = 108;
+
+const STYLE = `
+  body { background: #1b1c1f; color: #e8e8e8; font: 16px/1.45 system-ui, sans-serif; overflow: hidden; }
+  .keyframes-deck { display: none; }
+  .pv { display: grid; grid-template-columns: 1.7fr 1fr; grid-template-rows: auto minmax(0, 1fr) auto; gap: 16px;
+        height: 100vh; padding: 16px; box-sizing: border-box; }
+  .pv-bar { grid-column: 1 / -1; display: flex; gap: 24px; align-items: baseline; font-variant-numeric: tabular-nums; }
+  .pv-bar b { font-size: 28px; }
+  .pv-bar button { background: #333; color: inherit; border: 0; border-radius: 6px; padding: 4px 10px; cursor: pointer; }
+  .pv-frame { position: relative; aspect-ratio: var(--ar); background: #000; border-radius: 8px; overflow: hidden; }
+  .pv-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
+  .pv-side { display: flex; flex-direction: column; gap: 16px; min-height: 0; }
+  .pv-label { color: #999; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
+  .pv-notes { flex: 1; overflow: auto; font-size: 20px; background: #26272b; border-radius: 8px; padding: 16px; }
+  .pv-notes[contenteditable="true"] { outline: 2px solid #4c8dff; }
+  .pv-notes-status { margin-left: 8px; color: #777; text-transform: none; letter-spacing: 0; }
+  .pv-close { margin-left: auto; }
+  .pv-strip { grid-column: 1 / -1; display: flex; gap: 12px; overflow-x: auto; padding: 2px 2px 8px; }
+  .pv-thumb { position: relative; flex: none; height: ${THUMB_HEIGHT}px; aspect-ratio: var(--ar); padding: 0; border: 0;
+              border-radius: 6px; overflow: hidden; background: #000; cursor: pointer; opacity: .6; }
+  .pv-thumb:hover { opacity: 1; }
+  .pv-thumb.is-current { opacity: 1; }
+  .pv-thumb.is-current::after { content: ""; position: absolute; inset: 0; border: 3px solid #4c8dff; border-radius: 6px; }
+  .pv-thumb .keyframes-slide { visibility: visible; left: 0; top: 0; transform: scale(var(--thumb-scale));
+                                transform-origin: 0 0; pointer-events: none; }
+  .pv-thumb-n { position: absolute; left: 6px; bottom: 4px; padding: 0 6px; border-radius: 4px;
+                background: rgba(0, 0, 0, .6); color: #e8e8e8; font-size: 12px; }
+`;
+
+export function startPresenter(deck) {
+  const { width, height } = deck.config;
+  const slides = deck.slides;
+  const state = { index: 0, step: 0, started: Date.now() };
+
+  document.head.insertAdjacentHTML("beforeend", `<style>${STYLE}</style>`);
+  document.title = `Presenter · ${document.title}`;
+  document.documentElement.style.setProperty("--keyframes-w", `${width}px`);
+  document.documentElement.style.setProperty("--keyframes-h", `${height}px`);
+  document.body.insertAdjacentHTML(
+    "beforeend",
+    `<div class="pv" style="--ar:${width}/${height}">
+      <div class="pv-bar"><b class="pv-count"></b><b class="pv-timer">00:00</b>
+        <button class="pv-reset">reset timer</button><span class="pv-steps"></span>
+        <button class="pv-close">close presenter</button></div>
+      <div><div class="pv-label">Current</div><div class="pv-frame"><iframe class="pv-current"></iframe></div></div>
+      <div class="pv-side">
+        <div><div class="pv-label">Next</div><div class="pv-frame"><iframe class="pv-next"></iframe></div></div>
+        <div class="pv-label">Notes<span class="pv-notes-status"></span></div><div class="pv-notes"></div>
+      </div>
+      <div class="pv-strip" style="--thumb-scale:${THUMB_HEIGHT / height}"></div>
+    </div>`,
+  );
+  const $ = (s) => document.querySelector(s);
+  const current = $(".pv-current");
+  const next = $(".pv-next");
+  current.src = `?embed${location.hash}`;
+  next.src = "?embed&static";
+  const thumbs = buildStrip($(".pv-strip"), slides, (index) => goTo(index, 0));
+  const notes = createNotes($(".pv-notes"), $(".pv-notes-status"), deck.config.mode === "dev");
+
+  const send = (frame, index, step) =>
+    frame.contentWindow?.postMessage({ type: "keyframes:goto", index, step }, "*");
+
+  function render() {
+    const slide = slides[state.index];
+    const steps = maxStep(slide);
+    const [nextIndex, nextStep] =
+      state.step < steps ? [state.index, state.step + 1] : [state.index + 1, 0];
+    send(current, state.index, state.step);
+    send(next, Math.min(nextIndex, slides.length - 1), nextStep);
+    $(".pv-count").textContent = `${state.index + 1} / ${slides.length}`;
+    $(".pv-steps").textContent = steps ? `build ${state.step}/${steps}` : "";
+    notes.show(slide);
+    thumbs.forEach((thumb, i) => thumb.classList.toggle("is-current", i === state.index));
+    thumbs[state.index].scrollIntoView({ inline: "center", block: "nearest", behavior: "smooth" });
+    history.replaceState(null, "", `?presenter#/${state.index + 1}/${state.step}`);
+  }
+
+  function goTo(index, step, broadcast = true) {
+    state.index = Math.max(0, Math.min(index, slides.length - 1));
+    state.step = Math.max(0, Math.min(step, maxStep(slides[state.index])));
+    render();
+    if (broadcast) deck.channel.postMessage({ type: "nav", index: state.index, step: state.step });
+  }
+
+  function advance(delta) {
+    const steps = maxStep(slides[state.index]);
+    if (delta > 0) {
+      if (state.step < steps) goTo(state.index, state.step + 1);
+      else goTo(state.index + 1, 0);
+    } else if (state.step > 0) goTo(state.index, state.step - 1);
+    else if (state.index > 0) goTo(state.index - 1, maxStep(slides[state.index - 1]));
+  }
+
+  deck.channel.onmessage = ({ data }) => data.type === "nav" && goTo(data.index, data.step, false);
+  document.addEventListener("keydown", (e) => {
+    if (e.target.isContentEditable) return;
+    if (["ArrowRight", "ArrowDown", "PageDown", " "].includes(e.key)) advance(1);
+    else if (["ArrowLeft", "ArrowUp", "PageUp"].includes(e.key)) advance(-1);
+    else return;
+    e.preventDefault();
+  });
+  $(".pv-reset").onclick = () => (state.started = Date.now());
+  $(".pv-close").onclick = () => window.close();
+  setInterval(() => {
+    const s = Math.floor((Date.now() - state.started) / 1000);
+    $(".pv-timer").textContent = `${String(Math.floor(s / 60)).padStart(2, "0")}:${String(s % 60).padStart(2, "0")}`;
+  }, 500);
+
+  window.addEventListener("message", ({ data }) => data?.type === "keyframes:ready" && render());
+  const [, n, s] = location.hash.match(/^#\/(\d+)(?:\/(\d+))?/) || [];
+  goTo(n ? Number(n) - 1 : 0, s ? Number(s) : 0, false);
+}
+
+function buildStrip(strip, slides, onPick) {
+  return slides.map((slide, i) => {
+    const clone = slide.cloneNode(true);
+    clone.classList.remove("is-current");
+    for (const video of clone.querySelectorAll("video")) video.removeAttribute("autoplay");
+    applyGeometry(clone);
+    applySteps(clone, Infinity);
+    renderMath(clone);
+    const thumb = document.createElement("button");
+    thumb.className = "pv-thumb";
+    thumb.title = `Go to slide ${i + 1}`;
+    thumb.append(clone);
+    thumb.insertAdjacentHTML("beforeend", `<span class="pv-thumb-n">${i + 1}</span>`);
+    thumb.onmousedown = (e) => e.preventDefault();
+    thumb.onclick = () => onPick(i);
+    strip.append(thumb);
+    return thumb;
+  });
+}
+
+function createNotes(el, status, editable) {
+  const hint = editable ? "double-click to edit" : "";
+  const notesOf = (slide) => slide.querySelector("aside.notes");
+  let shown = null;
+  let editing = null;
+  status.textContent = hint;
+
+  function show(slide) {
+    shown = slide;
+    if (!editing) el.innerHTML = notesOf(slide)?.innerHTML || "<i>No notes</i>";
+  }
+
+  function start() {
+    if (editing) return;
+    editing = shown;
+    el.innerHTML = notesOf(editing)?.innerHTML ?? "";
+    el.contentEditable = "true";
+    document.execCommand("defaultParagraphSeparator", false, "p");
+    el.focus();
+    status.textContent = "editing · ⌘/Ctrl+Enter to save · Esc to cancel";
+  }
+
+  async function finish(save) {
+    if (!editing) return;
+    const slide = editing;
+    const html = el.textContent.trim() ? el.innerHTML.trim() : "";
+    editing = null;
+    el.contentEditable = "false";
+    status.textContent = hint;
+    if (save && html !== (notesOf(slide)?.innerHTML.trim() ?? "")) await persist(slide, html);
+    show(shown);
+  }
+
+  async function persist(slide, html) {
+    const url = `_api/notes/${encodeURIComponent(slide.dataset.slide)}`;
+    const response = await fetch(url, { method: "PUT", body: html }).catch(() => null);
+    if (!response?.ok) {
+      status.textContent = "save failed";
+      return;
+    }
+    let aside = notesOf(slide);
+    if (!aside) {
+      aside = document.createElement("aside");
+      aside.className = "notes";
+      (slide.querySelector("section") ?? slide).append(aside);
+    }
+    aside.innerHTML = html;
+    status.textContent = "saved";
+    setTimeout(() => !editing && (status.textContent = hint), 2000);
+  }
+
+  if (editable) {
+    el.addEventListener("dblclick", start);
+    el.addEventListener("blur", () => finish(true));
+    el.addEventListener("keydown", (e) => {
+      if (e.key === "Escape") finish(false);
+      else if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) finish(true);
+      else return;
+      e.preventDefault();
+    });
+  }
+  return { show };
+}

keyframes-0.3.0/src/keyframes/static/runtime/runtime.css

@@ -0,0 +1,185 @@
+html, body {
+  margin: 0;
+  height: 100%;
+  overflow: hidden;
+  background: #111;
+}
+
+.keyframes-deck {
+  position: fixed;
+  inset: 0;
+}
+
+.keyframes-slide {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: var(--keyframes-w);
+  height: var(--keyframes-h);
+  transform: translate(-50%, -50%) scale(var(--keyframes-scale, 1));
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.keyframes-slide.is-current {
+  visibility: visible;
+  pointer-events: auto;
+}
+
+.keyframes-slide > section {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+[data-block] {
+  box-sizing: border-box;
+}
+
+[data-block][data-x] {
+  position: absolute;
+}
+
+[data-step] {
+  transition: opacity 0.35s ease;
+}
+
+.keyframes-step-hidden {
+  opacity: 0 !important;
+  visibility: hidden;
+}
+
+aside.notes {
+  display: none !important;
+}
+
+.keyframes-blackout .keyframes-slide.is-current {
+  visibility: hidden;
+}
+
+.keyframes-laser {
+  position: fixed;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1000;
+  pointer-events: none;
+}
+
+html.keyframes-lasing,
+html.keyframes-lasing * {
+  cursor: none !important;
+}
+
+.keyframes-menu {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  z-index: 1001;
+  padding: 20px;
+  font: 14px/1.2 system-ui, sans-serif;
+}
+
+.keyframes-menu-toggle {
+  display: grid;
+  place-items: center;
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: rgba(32, 33, 36, 0.85);
+  color: #e8e8e8;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+.keyframes-menu-toggle svg {
+  width: 20px;
+  height: 20px;
+  fill: currentColor;
+}
+
+.keyframes-menu:hover .keyframes-menu-toggle,
+.keyframes-menu.is-open .keyframes-menu-toggle {
+  opacity: 1;
+}
+
+.keyframes-menu-list {
+  margin-bottom: 8px;
+  padding: 6px;
+  min-width: 220px;
+  border-radius: 10px;
+  background: rgba(32, 33, 36, 0.95);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+}
+
+.keyframes-menu-list[hidden] {
+  display: none;
+}
+
+.keyframes-menu-list button {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 8px 10px;
+  border: 0;
+  border-radius: 6px;
+  background: none;
+  color: #e8e8e8;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.keyframes-menu-list button:hover {
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.keyframes-menu-check {
+  width: 14px;
+}
+
+.keyframes-menu-list button.is-on .keyframes-menu-check::before {
+  content: "✓";
+}
+
+.keyframes-editing .keyframes-menu,
+.keyframes-editing .keyframes-laser {
+  display: none;
+}
+
+.keyframes-error {
+  position: absolute;
+  inset: 0;
+  overflow: auto;
+  padding: 16px;
+  background: #fff0f0;
+  color: #a00;
+  font: 14px/1.4 ui-monospace, Menlo, monospace;
+  white-space: pre-wrap;
+  border: 2px solid #e55;
+  box-sizing: border-box;
+}
+
+html.keyframes-print, html.keyframes-print body {
+  background: transparent;
+}
+
+html.keyframes-print .keyframes-slide {
+  left: 0;
+  top: 0;
+  transform: none;
+}
+
+html.keyframes-print [data-step] {
+  transition: none;
+}
+
+@page {
+  margin: 0;
+}

{keyframes-0.1.0 → keyframes-0.3.0}/src/keyframes/static/runtime/runtime.js

@@ -1,3 +1,4 @@
+import { createLaser, createMenu } from "./controls.js";
 import { renderMath } from "./math.js";
 import { applySteps, maxStep } from "./steps.js";
 
@@ -68,7 +69,11 @@ class Deck extends EventTarget {
     this.fit();
     new ResizeObserver(() => this.fit()).observe(document.querySelector(".keyframes-deck"));
     window.addEventListener("hashchange", () => this.goToHash());
-    if (!params.has("embed")) document.addEventListener("keydown", (e) => this.onKey(e));
+    if (!params.has("embed")) {
+      document.addEventListener("keydown", (e) => this.onKey(e));
+      this.laser = createLaser(this);
+      createMenu(this);
+    }
     this.channel.onmessage = ({ data }) => {
       if (data.type === "nav") this.goTo(data.index, data.step, { broadcast: false });
     };
@@ -158,9 +163,10 @@ class Deck extends EventTarget {
       PageUp: () => this.prev(),
       Home: () => this.goTo(0),
       End: () => this.goTo(this.slides.length - 1),
-      f: () => document.documentElement.requestFullscreen?.(),
-      b: () => document.body.classList.toggle("keyframes-blackout"),
-      s: () => window.open(`?presenter${location.hash}`, "keyframes-presenter", "width=1400,height=850"),
+      f: () => this.toggleFullscreen(),
+      b: () => this.toggleBlackout(),
+      s: () => this.openPresenter(),
+      l: () => this.laser.toggle(),
     };
     const action = actions[e.key];
     if (action) {
@@ -169,6 +175,19 @@ class Deck extends EventTarget {
     }
   }
 
+  toggleFullscreen() {
+    if (document.fullscreenElement) document.exitFullscreen();
+    else document.documentElement.requestFullscreen?.();
+  }
+
+  toggleBlackout() {
+    document.body.classList.toggle("keyframes-blackout");
+  }
+
+  openPresenter() {
+    window.open(`?presenter${location.hash}`, "keyframes-presenter", "width=1400,height=850");
+  }
+
   async replaceSlide(name, html) {
     const old = this.slides.find((s) => s.dataset.slide === name);
     if (!old) return location.reload();

keyframes-0.1.0/src/keyframes/static/runtime/presenter.js

@@ -1,91 +0,0 @@
-import { maxStep } from "./steps.js";
-
-const STYLE = `
-  body { background: #1b1c1f; color: #e8e8e8; font: 16px/1.45 system-ui, sans-serif; overflow: hidden; }
-  .keyframes-deck { display: none; }
-  .pv { display: grid; grid-template-columns: 1.7fr 1fr; grid-template-rows: auto 1fr; gap: 16px;
-        height: 100vh; padding: 16px; box-sizing: border-box; }
-  .pv-bar { grid-column: 1 / -1; display: flex; gap: 24px; align-items: baseline; font-variant-numeric: tabular-nums; }
-  .pv-bar b { font-size: 28px; }
-  .pv-bar button { background: #333; color: inherit; border: 0; border-radius: 6px; padding: 4px 10px; cursor: pointer; }
-  .pv-frame { position: relative; aspect-ratio: var(--ar); background: #000; border-radius: 8px; overflow: hidden; }
-  .pv-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
-  .pv-side { display: flex; flex-direction: column; gap: 16px; min-height: 0; }
-  .pv-label { color: #999; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
-  .pv-notes { flex: 1; overflow: auto; font-size: 20px; background: #26272b; border-radius: 8px; padding: 16px; }
-`;
-
-export function startPresenter(deck) {
-  const { width, height } = deck.config;
-  const slides = deck.slides;
-  const state = { index: 0, step: 0, started: Date.now() };
-
-  document.head.insertAdjacentHTML("beforeend", `<style>${STYLE}</style>`);
-  document.title = `Presenter · ${document.title}`;
-  document.body.insertAdjacentHTML(
-    "beforeend",
-    `<div class="pv" style="--ar:${width}/${height}">
-      <div class="pv-bar"><b class="pv-count"></b><b class="pv-timer">00:00</b>
-        <button class="pv-reset">reset timer</button><span class="pv-steps"></span></div>
-      <div><div class="pv-label">Current</div><div class="pv-frame"><iframe class="pv-current"></iframe></div></div>
-      <div class="pv-side">
-        <div><div class="pv-label">Next</div><div class="pv-frame"><iframe class="pv-next"></iframe></div></div>
-        <div class="pv-label">Notes</div><div class="pv-notes"></div>
-      </div>
-    </div>`,
-  );
-  const $ = (s) => document.querySelector(s);
-  const current = $(".pv-current");
-  const next = $(".pv-next");
-  current.src = `?embed${location.hash}`;
-  next.src = "?embed&static";
-
-  const send = (frame, index, step) =>
-    frame.contentWindow?.postMessage({ type: "keyframes:goto", index, step }, "*");
-
-  function render() {
-    const slide = slides[state.index];
-    const steps = maxStep(slide);
-    const [nextIndex, nextStep] =
-      state.step < steps ? [state.index, state.step + 1] : [state.index + 1, 0];
-    send(current, state.index, state.step);
-    send(next, Math.min(nextIndex, slides.length - 1), nextStep);
-    $(".pv-count").textContent = `${state.index + 1} / ${slides.length}`;
-    $(".pv-steps").textContent = steps ? `build ${state.step}/${steps}` : "";
-    $(".pv-notes").innerHTML = slide.querySelector("aside.notes")?.innerHTML || "<i>No notes</i>";
-    history.replaceState(null, "", `?presenter#/${state.index + 1}/${state.step}`);
-  }
-
-  function goTo(index, step, broadcast = true) {
-    state.index = Math.max(0, Math.min(index, slides.length - 1));
-    state.step = Math.max(0, Math.min(step, maxStep(slides[state.index])));
-    render();
-    if (broadcast) deck.channel.postMessage({ type: "nav", index: state.index, step: state.step });
-  }
-
-  function advance(delta) {
-    const steps = maxStep(slides[state.index]);
-    if (delta > 0) {
-      if (state.step < steps) goTo(state.index, state.step + 1);
-      else goTo(state.index + 1, 0);
-    } else if (state.step > 0) goTo(state.index, state.step - 1);
-    else if (state.index > 0) goTo(state.index - 1, maxStep(slides[state.index - 1]));
-  }
-
-  deck.channel.onmessage = ({ data }) => data.type === "nav" && goTo(data.index, data.step, false);
-  document.addEventListener("keydown", (e) => {
-    if (["ArrowRight", "ArrowDown", "PageDown", " "].includes(e.key)) advance(1);
-    else if (["ArrowLeft", "ArrowUp", "PageUp"].includes(e.key)) advance(-1);
-    else return;
-    e.preventDefault();
-  });
-  $(".pv-reset").onclick = () => (state.started = Date.now());
-  setInterval(() => {
-    const s = Math.floor((Date.now() - state.started) / 1000);
-    $(".pv-timer").textContent = `${String(Math.floor(s / 60)).padStart(2, "0")}:${String(s % 60).padStart(2, "0")}`;
-  }, 500);
-
-  window.addEventListener("message", ({ data }) => data?.type === "keyframes:ready" && render());
-  const [, n, s] = location.hash.match(/^#\/(\d+)(?:\/(\d+))?/) || [];
-  goTo(n ? Number(n) - 1 : 0, s ? Number(s) : 0, false);
-}

keyframes-0.1.0/src/keyframes/static/runtime/runtime.css

@@ -1,91 +0,0 @@
-html, body {
-  margin: 0;
-  height: 100%;
-  overflow: hidden;
-  background: #111;
-}
-
-.keyframes-deck {
-  position: fixed;
-  inset: 0;
-}
-
-.keyframes-slide {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  width: var(--keyframes-w);
-  height: var(--keyframes-h);
-  transform: translate(-50%, -50%) scale(var(--keyframes-scale, 1));
-  visibility: hidden;
-  pointer-events: none;
-}
-
-.keyframes-slide.is-current {
-  visibility: visible;
-  pointer-events: auto;
-}
-
-.keyframes-slide > section {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  box-sizing: border-box;
-}
-
-[data-block] {
-  box-sizing: border-box;
-}
-
-[data-block][data-x] {
-  position: absolute;
-}
-
-[data-step] {
-  transition: opacity 0.35s ease;
-}
-
-.keyframes-step-hidden {
-  opacity: 0 !important;
-  visibility: hidden;
-}
-
-aside.notes {
-  display: none !important;
-}
-
-.keyframes-blackout .keyframes-slide.is-current {
-  visibility: hidden;
-}
-
-.keyframes-error {
-  position: absolute;
-  inset: 0;
-  overflow: auto;
-  padding: 16px;
-  background: #fff0f0;
-  color: #a00;
-  font: 14px/1.4 ui-monospace, Menlo, monospace;
-  white-space: pre-wrap;
-  border: 2px solid #e55;
-  box-sizing: border-box;
-}
-
-html.keyframes-print, html.keyframes-print body {
-  background: transparent;
-}
-
-html.keyframes-print .keyframes-slide {
-  left: 0;
-  top: 0;
-  transform: none;
-}
-
-html.keyframes-print [data-step] {
-  transition: none;
-}
-
-@page {
-  margin: 0;
-}