keyframes 0.1.0__py3-none-any.whl

keyframes/static/runtime/presenter.js

@@ -0,0 +1,91 @@
+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/static/runtime/runtime.css

@@ -0,0 +1,91 @@
+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;
+}

keyframes/static/runtime/runtime.js

@@ -0,0 +1,215 @@
+import { renderMath } from "./math.js";
+import { applySteps, maxStep } from "./steps.js";
+
+const config = window.KEYFRAMES_CONFIG;
+const params = new URLSearchParams(location.search);
+const KEEP_ALIVE_DISTANCE = 2;
+const SLIDE_SELECTOR = ".keyframes-slide";
+
+export function applyGeometry(root) {
+  for (const el of root.querySelectorAll("[data-block]")) {
+    const { x, y, w, h, z } = el.dataset;
+    el.style.left = x != null ? `${x}px` : "";
+    el.style.top = y != null ? `${y}px` : "";
+    el.style.width = w != null ? `${w}px` : "";
+    el.style.height = h != null ? `${h}px` : "";
+    el.style.zIndex = z ?? "";
+  }
+}
+
+function componentsIn(root) {
+  return [...root.querySelectorAll("*")].filter((el) => el.localName.startsWith("keyframes-"));
+}
+
+const requestedComponents = new Set();
+
+async function loadComponents(root) {
+  const pending = [];
+  for (const el of componentsIn(root)) {
+    const tag = el.localName;
+    if (customElements.get(tag) || requestedComponents.has(tag)) continue;
+    requestedComponents.add(tag);
+    pending.push(
+      import(`../components/${tag}.js`).catch((e) => console.error(`Failed to load <${tag}>`, e)),
+    );
+  }
+  await Promise.all(pending);
+  await Promise.all(
+    [...new Set(componentsIn(root).map((el) => el.localName))].map((t) =>
+      customElements.whenDefined(t),
+    ),
+  );
+}
+
+class Deck extends EventTarget {
+  constructor() {
+    super();
+    this.config = config;
+    this.index = 0;
+    this.step = 0;
+    this.scale = 1;
+    this.revealAll = false;
+    this.channel = new BroadcastChannel(`keyframes:${location.pathname}`);
+  }
+
+  get slides() {
+    return [...document.querySelectorAll(SLIDE_SELECTOR)];
+  }
+
+  get current() {
+    return this.slides[this.index];
+  }
+
+  async init() {
+    document.documentElement.style.setProperty("--keyframes-w", `${config.width}px`);
+    document.documentElement.style.setProperty("--keyframes-h", `${config.height}px`);
+    for (const slide of this.slides) await this.prepareSlide(slide);
+    if (params.has("print")) return this.initPrint(Number(params.get("print")) || 1);
+    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));
+    this.channel.onmessage = ({ data }) => {
+      if (data.type === "nav") this.goTo(data.index, data.step, { broadcast: false });
+    };
+    window.addEventListener("message", ({ data }) => {
+      if (data?.type === "keyframes:goto") this.goTo(data.index, data.step, { broadcast: false });
+    });
+    this.goToHash();
+    if (params.has("embed")) parent.postMessage({ type: "keyframes:ready" }, "*");
+  }
+
+  async prepareSlide(slide) {
+    applyGeometry(slide);
+    slide.dataset.number = String(this.slides.indexOf(slide) + 1);
+    await Promise.all([renderMath(slide), loadComponents(slide)]);
+    await Promise.all(componentsIn(slide).map((el) => el.keyframesPrepare?.()));
+  }
+
+  fit() {
+    const area = document.querySelector(".keyframes-deck");
+    this.scale = Math.min(area.clientWidth / config.width, area.clientHeight / config.height);
+    document.documentElement.style.setProperty("--keyframes-scale", this.scale);
+    this.dispatchEvent(new CustomEvent("scale", { detail: this.scale }));
+  }
+
+  goToHash() {
+    const [, n, s] = location.hash.match(/^#\/(\d+)(?:\/(\d+))?/) || [];
+    this.goTo(n ? Number(n) - 1 : 0, s ? Number(s) : 0, { broadcast: false });
+  }
+
+  goTo(index, step = 0, { broadcast = true } = {}) {
+    const slides = this.slides;
+    index = Math.max(0, Math.min(index, slides.length - 1));
+    const previous = this.current;
+    const changedSlide = previous !== slides[index] || !previous?.classList.contains("is-current");
+    this.index = index;
+    this.step = Math.max(0, Math.min(step, maxStep(slides[index])));
+
+    slides.forEach((slide, i) => slide.classList.toggle("is-current", i === index));
+    applySteps(this.current, this.revealAll ? Infinity : this.step);
+    if (changedSlide) this.updateLifecycle(previous);
+    for (const el of componentsIn(this.current)) el.keyframesStep?.(this.step);
+
+    const hash = `#/${index + 1}${this.step ? `/${this.step}` : ""}`;
+    if (location.hash !== hash) history.replaceState(null, "", hash);
+    if (broadcast) this.channel.postMessage({ type: "nav", index, step: this.step });
+    this.dispatchEvent(new CustomEvent("change", { detail: { index, step: this.step } }));
+  }
+
+  updateLifecycle(previous) {
+    if (params.has("static")) return;
+    if (previous && previous !== this.current) {
+      for (const el of componentsIn(previous)) el.keyframesStop?.();
+      for (const video of previous.querySelectorAll("video")) video.pause();
+    }
+    this.slides.forEach((slide, i) => {
+      if (Math.abs(i - this.index) > KEEP_ALIVE_DISTANCE) {
+        for (const el of componentsIn(slide)) el.keyframesDispose?.();
+      }
+    });
+    for (const el of componentsIn(this.current)) el.keyframesStart?.();
+    for (const video of this.current.querySelectorAll("video[autoplay]")) {
+      video.currentTime = 0;
+      video.play().catch(() => {});
+    }
+  }
+
+  next() {
+    if (this.step < maxStep(this.current)) this.goTo(this.index, this.step + 1);
+    else if (this.index < this.slides.length - 1) this.goTo(this.index + 1, 0);
+  }
+
+  prev() {
+    if (this.step > 0) this.goTo(this.index, this.step - 1);
+    else if (this.index > 0) this.goTo(this.index - 1, maxStep(this.slides[this.index - 1]));
+  }
+
+  onKey(e) {
+    if (e.defaultPrevented || e.metaKey || e.ctrlKey || e.altKey) return;
+    if (e.target.closest?.("input, textarea, [contenteditable], .cm-editor, keyframes-code, keyframes-slider")) return;
+    const actions = {
+      ArrowRight: () => this.next(),
+      ArrowDown: () => this.next(),
+      PageDown: () => this.next(),
+      " ": () => this.next(),
+      ArrowLeft: () => this.prev(),
+      ArrowUp: () => this.prev(),
+      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"),
+    };
+    const action = actions[e.key];
+    if (action) {
+      e.preventDefault();
+      action();
+    }
+  }
+
+  async replaceSlide(name, html) {
+    const old = this.slides.find((s) => s.dataset.slide === name);
+    if (!old) return location.reload();
+    const template = document.createElement("template");
+    template.innerHTML = html;
+    const fresh = template.content.firstElementChild;
+    old.replaceWith(fresh);
+    await this.prepareSlide(fresh);
+    this.goTo(this.index, this.step, { broadcast: false });
+    this.dispatchEvent(new CustomEvent("slidereplaced", { detail: { name, slide: fresh } }));
+  }
+
+  async initPrint(number) {
+    document.documentElement.classList.add("keyframes-print");
+    const style = document.createElement("style");
+    style.textContent = `@page { size: ${config.width}px ${config.height}px; }`;
+    document.head.append(style);
+    this.revealAll = true;
+    this.index = number - 1;
+    const slide = this.current;
+    this.slides.forEach((s) => s !== slide && s.remove());
+    slide.classList.add("is-current");
+    applySteps(slide, Infinity);
+    const components = componentsIn(slide);
+    for (const el of components) el.keyframesStep?.(maxStep(slide));
+    await Promise.all(components.map((el) => el.keyframesStart?.()));
+    await document.fonts.ready;
+    await new Promise((r) => setTimeout(r, Number(params.get("settle") || 600)));
+    await Promise.all(components.map((el) => el.keyframesSnapshot?.()));
+    document.documentElement.dataset.ready = "1";
+  }
+}
+
+const deck = new Deck();
+window.keyframes = deck;
+
+if (params.has("presenter")) {
+  import("./presenter.js").then((m) => m.startPresenter(deck));
+} else {
+  deck.init().then(() => {
+    document.documentElement.dataset.loaded = "1";
+    if (config.mode === "dev") import("./live.js").then((m) => m.connectLive(deck));
+  });
+}

keyframes/static/runtime/steps.js

@@ -0,0 +1,15 @@
+export function maxStep(slide) {
+  let max = 0;
+  for (const el of slide.querySelectorAll("[data-step], [data-step-out]")) {
+    max = Math.max(max, Number(el.dataset.step || 0), Number(el.dataset.stepOut || 0));
+  }
+  return max;
+}
+
+export function applySteps(slide, step) {
+  for (const el of slide.querySelectorAll("[data-step], [data-step-out]")) {
+    const shownAt = Number(el.dataset.step || 0);
+    const hidden = el.dataset.stepOut != null && step >= Number(el.dataset.stepOut);
+    el.classList.toggle("keyframes-step-hidden", step < shownAt || hidden);
+  }
+}

keyframes/terminal.py

@@ -0,0 +1,144 @@
+"""PTY-backed terminal sessions (claude, codex, shell) streamed to the editor panel.
+
+Sessions outlive browser connections, so page reloads reattach and replay recent output."""
+
+import asyncio
+import codecs
+import fcntl
+import json
+import os
+import shutil
+import signal
+import struct
+import subprocess
+import termios
+
+from starlette.websockets import WebSocket, WebSocketDisconnect
+
+SCROLLBACK_CHARS = 400_000
+
+
+def available_commands() -> dict[str, list[str]]:
+    commands = {name: [path] for name in ("claude", "codex") if (path := shutil.which(name))}
+    commands["shell"] = [os.environ.get("SHELL", "/bin/bash"), "-l"]
+    return commands
+
+
+def _become_controlling_tty():
+    os.setsid()
+    fcntl.ioctl(0, termios.TIOCSCTTY, 0)
+
+
+class TerminalSession:
+    def __init__(self, argv: list[str], cwd: str):
+        self.argv = argv
+        self.cwd = cwd
+        self.clients: set[WebSocket] = set()
+        self.scrollback = ""
+        self.process: subprocess.Popen | None = None
+        self.fd: int | None = None
+
+    @property
+    def running(self) -> bool:
+        return self.process is not None and self.process.poll() is None
+
+    def start(self, cols: int = 100, rows: int = 30):
+        master, slave = os.openpty()
+        self._set_size(master, cols, rows)
+        env = {**os.environ, "TERM": "xterm-256color", "COLORTERM": "truecolor"}
+        self.process = subprocess.Popen(
+            self.argv,
+            cwd=self.cwd,
+            env=env,
+            stdin=slave,
+            stdout=slave,
+            stderr=slave,
+            preexec_fn=_become_controlling_tty,
+            close_fds=True,
+        )
+        os.close(slave)
+        os.set_blocking(master, False)
+        self.fd = master
+        self.decoder = codecs.getincrementaldecoder("utf-8")(errors="replace")
+        asyncio.get_running_loop().add_reader(master, self._on_output)
+
+    def _on_output(self):
+        try:
+            data = os.read(self.fd, 65536)
+        except OSError:
+            data = b""
+        if not data:
+            self._close_fd()
+            self._broadcast({"type": "exit"})
+            return
+        text = self.decoder.decode(data)
+        self.scrollback = (self.scrollback + text)[-SCROLLBACK_CHARS:]
+        self._broadcast({"type": "output", "data": text})
+
+    def _broadcast(self, message: dict):
+        payload = json.dumps(message)
+        for ws in list(self.clients):
+            asyncio.ensure_future(self._send(ws, payload))
+
+    async def _send(self, ws: WebSocket, payload: str):
+        try:
+            await ws.send_text(payload)
+        except Exception:
+            self.clients.discard(ws)
+
+    def write(self, data: str):
+        if self.fd is not None:
+            os.write(self.fd, data.encode())
+
+    def resize(self, cols: int, rows: int):
+        if self.fd is not None:
+            self._set_size(self.fd, cols, rows)
+
+    @staticmethod
+    def _set_size(fd: int, cols: int, rows: int):
+        fcntl.ioctl(fd, termios.TIOCSWINSZ, struct.pack("HHHH", rows, cols, 0, 0))
+
+    def _close_fd(self):
+        if self.fd is not None:
+            asyncio.get_running_loop().remove_reader(self.fd)
+            os.close(self.fd)
+            self.fd = None
+
+    def stop(self):
+        if self.running:
+            os.killpg(self.process.pid, signal.SIGHUP)
+        self._close_fd()
+
+
+class TerminalManager:
+    def __init__(self, cwd: str):
+        self.cwd = cwd
+        self.commands = available_commands()
+        self.sessions: dict[str, TerminalSession] = {}
+
+    async def serve(self, ws: WebSocket, name: str):
+        if name not in self.commands:
+            await ws.close(code=4404)
+            return
+        session = self.sessions.setdefault(name, TerminalSession(self.commands[name], self.cwd))
+        await ws.accept()
+        session.clients.add(ws)
+        await ws.send_text(json.dumps({"type": "replay", "data": session.scrollback}))
+        if not session.running:
+            await ws.send_text(json.dumps({"type": "exit"}))
+        try:
+            while True:
+                message = json.loads(await ws.receive_text())
+                if message["type"] == "input":
+                    session.write(message["data"])
+                elif message["type"] == "resize":
+                    session.resize(message["cols"], message["rows"])
+                elif message["type"] == "start" and not session.running:
+                    session.scrollback = ""
+                    session.start(message.get("cols", 100), message.get("rows", 30))
+        except WebSocketDisconnect:
+            session.clients.discard(ws)
+
+    def stop_all(self):
+        for session in self.sessions.values():
+            session.stop()

keyframes/themes/default/STYLE_GUIDE.md

@@ -0,0 +1,73 @@
+# Theme: default (Google "simple-light" clone)
+
+Light, quiet research-talk style: lots of white space, small bold titles top-left, grey light-weight
+body text, Google-colored decorative artwork only on title and section slides.
+
+## Type
+
+| class | font | size | color | use |
+| --- | --- | --- | --- | --- |
+| `headline` | Google Sans 700 | 80px | `--ink` #202124 | title-slide and section-slide titles |
+| `title` | Google Sans 700 | 53px | `--ink` | slide titles, top-left, ≤ 2 lines |
+| `subtitle` | Google Sans 400 | 48px | `--fg` #606366 | title-slide subtitle |
+| `byline` | Google Sans 400 | 37px | `--fg` | speaker / affiliation / date on the title slide |
+| `body` | Roboto Light | 37px | `--fg` | lead-in sentences and main points |
+| `lead` | Roboto Light | 28px | `--ink` | one-sentence takeaway or setup next to media |
+| `subhead` | Google Sans 500 | 28px | `--ink` | column / tile heading (`<h3 class="subhead">`) |
+| `small` | Roboto Light | 24px | `--fg` | detail bullets under a lead-in (`<ul class="small">`) |
+| `statement` | Roboto Light | 128px | `--fg` | one centered idea per slide |
+| `caption` | Google Sans 400 | 24px | `--fg` | figure labels |
+| `cite` | Google Sans 400 | 19px | `--fg` | references footer, `Author et al. Venue Year · …` |
+| `eyebrow` | Google Sans 400 | 24px | `--fg` | one-liner under a section title |
+
+The template's signature body pattern is a 37px lead-in line followed by 24px detail bullets
+(grey `●` markers), repeated in groups, often ending with one 64px takeaway line with
+**bold** keywords: `<p style="font-size:64px">Idea: Learn a <b>set</b> of skills</p>`.
+Use `<i>` for term names inside bullets ("*Exploration* - …"). Bare `<ul>` renders at 37px: use it
+only for a few top-level points without a lead-in.
+
+Tables: plain `<table>` with `<th>` headers (24px, hairline rows). Media blocks: `media contain`
+letterboxes any child (img, video, component); `media figure` adds a white background for plots on
+the grey split panel.
+
+Text boxes include Google Slides' default insets (18px top, 19px sides), so the block position is
+the box, not the glyphs: titles sit at x=88, y=72.
+
+## Color
+
+Text is grey (`--fg`), titles near-black (`--ink`), links teal (`--link` #0097a7). Accents are the
+Google palette — `--blue` #4285f4, `--red` #ea4335, `--yellow` #fbbc04, `--green` #34a853 — for
+plots, diagrams and highlights; never for body text. `--panel` #f8f9fa is the light grey used for
+section backgrounds and split-slide panels.
+
+## Layouts (`data-layout` on the `<section>`)
+
+| layout | look | use |
+| --- | --- | --- |
+| `title` | white, blue orbit artwork on the right | first slide |
+| `title-ring`, `title-streaks` | white, alternate artwork | alternate title / closing slide |
+| `section` | grey, yellow sun artwork top-left | "Part I: …" dividers |
+| `section-arc`, `section-streaks` | grey, alternate artwork | further parts, "Extra Slides" |
+| `content` | white | default for everything else |
+| `split` | right half grey panel (x ≥ 960) | text left (w=800), figure/video/sim right |
+| `split-wide` | grey panel from x=610 | narrow text left (w=469), large media right |
+
+Title and section layouts hide the slide number; all others show it bottom-right.
+
+Media templates (all `data-layout="content"`, see `keyframes guide`): `figure` one large figure,
+`grid-2` two media with captions and a bullet strip, `grid-3x2` six clips with captions, `grid-4`
+four columns of media + subhead + bullets, `media-side` large media with a narrow text/table column.
+
+## Geometry
+
+- Content titles: x=88 y=72 w=1663 h=104 (two-line titles need h≈170; push the body down).
+- Box height ≈ line-height × lines + 28 (insets): `headline` 96px/line (two lines → 220), `title`
+  64px/line.
+- Content body: x=88 y=175 w=1663 h=748. Bottom of content ≤ 960; slide number lives at y≈1002.
+- `split`: text column x=88 w=800; media inside the panel, e.g. x=1010 y=92 w=860 h=896.
+- Title slide: headline x=220 y=193 w=735; subtitle y=465; byline y=698 (y=465 without a subtitle).
+- Section: headline x=220 y=401 w=1471; eyebrow y=609.
+- Media blocks have no inset: put them at x=107 (the text glyph edge) and end at x≤1813. Media top
+  at y≈175–190; its caption block 5–10px below the media bottom, x−19 and w+38 so the text aligns.
+- Cite block: x=88 y=975 w=1660 h=60 (two lines: y=962 h=80).
+- Figures are plain (no border, no radius, no shadow), usually with a 24px caption.

keyframes/themes/default/layouts/content.html

@@ -0,0 +1,16 @@
+<section data-layout="content">
+  <h2 class="title" data-block="title" data-x="88" data-y="72" data-w="1663" data-h="104">Slide Title</h2>
+  <div class="body" data-block="body" data-x="88" data-y="175" data-w="1663" data-h="748">
+    Lead-in sentence:
+    <ul class="small">
+      <li>Supporting point</li>
+      <li data-step="1">Revealed on click</li>
+    </ul>
+    Second group:
+    <ol>
+      <li>Numbered item</li>
+    </ol>
+  </div>
+  <p class="cite" data-block="cite" data-x="88" data-y="975" data-w="1660" data-h="60">Author et al. Venue Year · Author et al. Venue Year</p>
+  <aside class="notes">Speaker notes.</aside>
+</section>

keyframes/themes/default/layouts/figure.html

@@ -0,0 +1,7 @@
+<section data-layout="content">
+  <h2 class="title" data-block="title" data-x="88" data-y="72" data-w="1663" data-h="104">One-sentence claim the figure supports</h2>
+  <div class="media" data-block="figure" data-x="107" data-y="180" data-w="1706" data-h="730">
+    <img class="contain" src="assets/figure.png" alt="">
+  </div>
+  <p class="caption" data-block="caption" data-x="88" data-y="917" data-w="1744" data-h="60">What the figure shows · provenance, units</p>
+</section>