keyframes 0.2.0__tar.gz → 0.3.0__tar.gz

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

@@ -1,6 +1,6 @@
 Metadata-Version: 2.3
 Name: keyframes
-Version: 0.2.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
@@ -60,6 +60,10 @@ For exports install the browser once: `uv run playwright install chromium` (or h
 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
 embed, `C` copies a block reference like `slides/04-results.html#sim` for your next prompt,

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

@@ -39,6 +39,10 @@ For exports install the browser once: `uv run playwright install chromium` (or h
 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
 embed, `C` copies a block reference like `slides/04-results.html#sim` for your next prompt,

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

@@ -1,6 +1,6 @@
 [project]
 name = "keyframes"
-version = "0.2.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.2.0 → keyframes-0.3.0}/pyproject.toml.orig

@@ -1,6 +1,6 @@
 [project]
 name = "keyframes"
-version = "0.2.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.2.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.2.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.2.0 → keyframes-0.3.0}/src/keyframes/static/runtime/presenter.js

@@ -17,6 +17,8 @@ const STYLE = `
   .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;
@@ -48,7 +50,7 @@ export function startPresenter(deck) {
       <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 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>`,
@@ -59,6 +61,7 @@ export function startPresenter(deck) {
   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 }, "*");
@@ -72,7 +75,7 @@ export function startPresenter(deck) {
     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>";
+    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}`);
@@ -96,6 +99,7 @@ export function startPresenter(deck) {
 
   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;
@@ -132,3 +136,67 @@ function buildStrip(strip, slides, onPick) {
     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 };
+}