keyframes 0.1.0__py3-none-any.whl

keyframes/static/editor/panel.css

@@ -0,0 +1,127 @@
+html {
+  --keyframes-panel-space: 0px;
+}
+
+html.keyframes-panel-open {
+  --keyframes-panel-space: var(--keyframes-panel-w, 640px);
+}
+
+html.keyframes-panel-open .keyframes-deck {
+  right: var(--keyframes-panel-space);
+}
+
+html.keyframes-panel-resizing,
+html.keyframes-panel-resizing * {
+  cursor: col-resize !important;
+  user-select: none;
+}
+
+html.keyframes-panel-resizing iframe,
+html.keyframes-panel-resizing .keyframes-panel-body {
+  pointer-events: none;
+}
+
+.keyframes-panel {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 100002;
+  width: var(--keyframes-panel-w, 640px);
+  display: flex;
+  flex-direction: column;
+  background: #1b1c21;
+  border-left: 1px solid #2c2e36;
+  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.18);
+  font: 13px/1.3 system-ui, -apple-system, sans-serif;
+  color: #e9ecf2;
+}
+
+.keyframes-panel[hidden] {
+  display: none;
+}
+
+.keyframes-panel-resize {
+  position: absolute;
+  left: -4px;
+  top: 0;
+  bottom: 0;
+  width: 8px;
+  cursor: col-resize;
+  z-index: 1;
+}
+
+.keyframes-panel-tabs {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 6px 8px 0;
+  background: #23252c;
+  border-bottom: 1px solid #2c2e36;
+}
+
+.keyframes-panel-tabs button {
+  padding: 6px 12px;
+  color: #9aa3b2;
+  background: transparent;
+  border: 0;
+  border-radius: 6px 6px 0 0;
+  font: inherit;
+  cursor: pointer;
+}
+
+.keyframes-panel-tabs button:hover {
+  color: #e9ecf2;
+}
+
+.keyframes-panel-tabs button.is-active {
+  color: #fff;
+  background: #1b1c21;
+}
+
+.keyframes-panel-tabs .keyframes-panel-ref,
+.keyframes-panel-tabs .keyframes-panel-close {
+  margin-bottom: 6px;
+  border-radius: 5px;
+  background: #2f323b;
+  color: #e9ecf2;
+}
+
+.keyframes-panel-tabs .keyframes-panel-ref[hidden] {
+  display: none;
+}
+
+.keyframes-panel-slide {
+  margin-left: auto;
+  padding: 0 8px 6px;
+  color: #6f7787;
+  font-family: ui-monospace, Menlo, monospace;
+  font-size: 12px;
+}
+
+.keyframes-panel-body {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+}
+
+.keyframes-panel-pane {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+}
+
+.keyframes-panel-pane[hidden] {
+  display: none;
+}
+
+.keyframes-panel-pane[data-pane="source"] .cm-editor {
+  height: 100%;
+  font-size: 13px;
+}
+
+.keyframes-panel-pane .xterm {
+  height: 100%;
+  padding: 6px 0 0 8px;
+  box-sizing: border-box;
+}

keyframes/static/editor/panel.js

@@ -0,0 +1,357 @@
+// Edit-mode side panel: the current slide's source, plus Claude Code / Codex / shell terminals
+// running in the deck folder.
+
+const LABELS = { claude: "Claude", codex: "Codex", shell: "Shell" };
+const SAVE_DELAY_MS = 700;
+
+function addStylesheet(href) {
+  const link = document.createElement("link");
+  link.rel = "stylesheet";
+  link.href = href;
+  document.head.append(link);
+}
+
+function socketUrl(path) {
+  const url = new URL(path, location.href);
+  url.protocol = location.protocol === "https:" ? "wss:" : "ws:";
+  url.search = url.hash = "";
+  return url;
+}
+
+function slideName(deck) {
+  return deck.current?.dataset.slide;
+}
+
+class SourceTab {
+  constructor(deck) {
+    this.deck = deck;
+    this.slide = null;
+    this.dirty = false;
+    this.applying = false;
+  }
+
+  async mount(container) {
+    const [state, view, commands, language, { html }, { oneDark }] = await Promise.all([
+      import("@codemirror/state"),
+      import("@codemirror/view"),
+      import("@codemirror/commands"),
+      import("@codemirror/language"),
+      import("@codemirror/lang-html"),
+      import("@codemirror/theme-one-dark"),
+    ]);
+    this.cm = { state, view };
+    this.view = new view.EditorView({
+      parent: container,
+      state: state.EditorState.create({
+        extensions: [
+          view.lineNumbers(),
+          view.highlightActiveLine(),
+          view.drawSelection(),
+          view.EditorView.lineWrapping,
+          commands.history(),
+          language.bracketMatching(),
+          html(),
+          oneDark,
+          view.keymap.of([
+            { key: "Mod-s", run: () => (this.save(), true) },
+            commands.indentWithTab,
+            ...commands.defaultKeymap,
+            ...commands.historyKeymap,
+          ]),
+          view.EditorView.updateListener.of((u) => u.docChanged && !this.applying && this.scheduleSave()),
+        ],
+      }),
+    });
+    await this.load(slideName(this.deck));
+  }
+
+  get text() {
+    return this.view.state.doc.toString();
+  }
+
+  async fetchSource(name) {
+    const response = await fetch(`_api/source/${encodeURIComponent(name)}`, { cache: "no-store" });
+    return response.ok ? response.text() : "";
+  }
+
+  replaceDoc(text) {
+    if (text === this.text) return;
+    const head = Math.min(this.view.state.selection.main.head, text.length);
+    this.applying = true;
+    this.view.dispatch({ changes: { from: 0, to: this.view.state.doc.length, insert: text }, selection: { anchor: head } });
+    this.applying = false;
+  }
+
+  async load(name) {
+    if (!name || !this.view) return;
+    if (this.dirty) await this.save();
+    this.slide = name;
+    this.replaceDoc(await this.fetchSource(name));
+    this.reveal(this.deck.selection?.[0]);
+  }
+
+  async refreshFromDisk() {
+    if (!this.view || this.dirty || this.slide !== slideName(this.deck)) return;
+    this.replaceDoc(await this.fetchSource(this.slide));
+  }
+
+  scheduleSave() {
+    this.dirty = true;
+    clearTimeout(this.timer);
+    this.timer = setTimeout(() => this.save(), SAVE_DELAY_MS);
+  }
+
+  async save() {
+    clearTimeout(this.timer);
+    if (!this.dirty || !this.slide) return;
+    this.dirty = false;
+    await fetch(`_api/source/${encodeURIComponent(this.slide)}`, { method: "PUT", body: this.text });
+  }
+
+  reveal(id) {
+    if (!this.view || !id) return;
+    const match = new RegExp(`data-block=["']${id.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}["']`).exec(this.text);
+    if (!match) return;
+    const line = this.view.state.doc.lineAt(match.index);
+    this.view.dispatch({
+      selection: { anchor: line.from, head: line.to },
+      effects: this.cm.view.EditorView.scrollIntoView(line.from, { y: "center" }),
+    });
+  }
+
+  show() {
+    this.view?.requestMeasure();
+  }
+
+  focus() {
+    this.view?.focus();
+  }
+}
+
+class TerminalTab {
+  constructor(name) {
+    this.name = name;
+    this.exited = false;
+    this.visible = false;
+  }
+
+  async mount(container) {
+    const [{ Terminal }, { FitAddon }] = await Promise.all([import("@xterm/xterm"), import("@xterm/addon-fit")]);
+    addStylesheet(new URL("css/xterm.css", import.meta.resolve("@xterm/xterm/")).href);
+    this.term = new Terminal({
+      fontFamily: "Menlo, 'SF Mono', ui-monospace, monospace",
+      fontSize: 13,
+      cursorBlink: true,
+      scrollback: 5000,
+      theme: { background: "#1b1c21" },
+    });
+    this.fitAddon = new FitAddon();
+    this.term.loadAddon(this.fitAddon);
+    this.term.open(container);
+    this.fit();
+    this.term.onData((data) => {
+      if (this.exited) data === "\r" && this.start();
+      else this.send({ type: "input", data });
+    });
+    this.term.onResize(({ cols, rows }) => this.send({ type: "resize", cols, rows }));
+    new ResizeObserver(() => this.visible && this.fit()).observe(container);
+    this.connect();
+  }
+
+  connect() {
+    this.ws = new WebSocket(socketUrl(`_api/term/${this.name}`));
+    let replayed = "";
+    this.ws.onmessage = ({ data }) => {
+      const message = JSON.parse(data);
+      if (message.type === "replay") {
+        replayed = message.data;
+        this.term.reset();
+        this.term.write(replayed);
+        this.nudgeRedraw();
+      } else if (message.type === "output") this.term.write(message.data);
+      else if (message.type === "exit") {
+        if (!replayed && !this.everStarted) this.start();
+        else this.markExited();
+      }
+    };
+    this.ws.onclose = () => setTimeout(() => this.connect(), 1000);
+  }
+
+  send(message) {
+    if (this.ws?.readyState === WebSocket.OPEN) this.ws.send(JSON.stringify(message));
+  }
+
+  start() {
+    this.exited = false;
+    this.everStarted = true;
+    this.term.reset();
+    this.send({ type: "start", cols: this.term.cols, rows: this.term.rows });
+  }
+
+  markExited() {
+    this.exited = true;
+    this.term.write("\r\n\x1b[2m[process exited · press Enter to restart]\x1b[0m\r\n");
+  }
+
+  nudgeRedraw() {
+    const { cols, rows } = this.term;
+    this.send({ type: "resize", cols, rows: Math.max(1, rows - 1) });
+    this.send({ type: "resize", cols, rows });
+  }
+
+  fit() {
+    try {
+      this.fitAddon?.fit();
+    } catch {}
+  }
+
+  insert(text) {
+    this.send({ type: "input", data: text });
+    this.term.focus();
+  }
+
+  show() {
+    this.fit();
+  }
+
+  focus() {
+    this.term?.focus();
+  }
+}
+
+class Panel {
+  constructor(deck, terminals) {
+    this.deck = deck;
+    this.tabs = { source: new SourceTab(deck) };
+    for (const name of terminals) this.tabs[name] = new TerminalTab(name);
+    this.mounted = new Set();
+    this.active = localStorage.getItem("keyframes-panel-tab") || (terminals.includes("claude") ? "claude" : "source");
+    if (!this.tabs[this.active]) this.active = "source";
+    this.build(terminals);
+    this.listen();
+    this.setOpen(document.documentElement.classList.contains("keyframes-editing"));
+  }
+
+  build(terminals) {
+    const names = ["source", ...terminals];
+    document.body.insertAdjacentHTML(
+      "beforeend",
+      `<aside class="keyframes-panel" hidden>
+        <div class="keyframes-panel-resize"></div>
+        <header class="keyframes-panel-tabs">
+          ${names.map((n) => `<button data-tab="${n}">${LABELS[n] || "Source"}</button>`).join("")}
+          <span class="keyframes-panel-slide"></span>
+          <button class="keyframes-panel-ref" title="Insert selected block references into the terminal (R)">+ ref</button>
+          <button class="keyframes-panel-close" title="Hide panel (\`)">×</button>
+        </header>
+        <div class="keyframes-panel-body">${names.map((n) => `<div class="keyframes-panel-pane" data-pane="${n}"></div>`).join("")}</div>
+      </aside>`,
+    );
+    this.el = document.querySelector(".keyframes-panel");
+    this.el.querySelector(".keyframes-panel-tabs").addEventListener("click", (e) => {
+      const tab = e.target.closest("[data-tab]")?.dataset.tab;
+      if (tab) this.select(tab);
+    });
+    this.el.querySelector(".keyframes-panel-close").onclick = () => this.collapse(true);
+    this.el.querySelector(".keyframes-panel-ref").onclick = () => this.insertRefs();
+    this.setWidth(Number(localStorage.getItem("keyframes-panel-w")) || Math.min(760, innerWidth * 0.42));
+    this.enableResize(this.el.querySelector(".keyframes-panel-resize"));
+  }
+
+  listen() {
+    const deck = this.deck;
+    deck.addEventListener("editmode", ({ detail }) => this.setOpen(detail.on));
+    deck.addEventListener("change", () => {
+      this.el.querySelector(".keyframes-panel-slide").textContent = slideName(deck);
+      if (this.tabs.source.slide !== slideName(deck)) this.tabs.source.load(slideName(deck));
+    });
+    deck.addEventListener("slidereplaced", () => this.tabs.source.refreshFromDisk());
+    deck.addEventListener("saved", () => this.tabs.source.refreshFromDisk());
+    deck.addEventListener("selection", ({ detail }) => this.tabs.source.reveal(detail.ids[0]));
+    document.addEventListener(
+      "keydown",
+      (e) => {
+        if (!document.documentElement.classList.contains("keyframes-editing")) return;
+        if (e.target.closest?.("input, textarea, [contenteditable], .cm-editor")) return;
+        if (e.key === "`") this.collapse(!this.collapsed);
+        else if (e.key === "r" && !e.metaKey && !e.ctrlKey) this.insertRefs();
+        else return;
+        e.preventDefault();
+        e.stopImmediatePropagation();
+      },
+      true,
+    );
+  }
+
+  get collapsed() {
+    return localStorage.getItem("keyframes-panel") === "closed";
+  }
+
+  collapse(closed) {
+    localStorage.setItem("keyframes-panel", closed ? "closed" : "open");
+    this.setOpen(document.documentElement.classList.contains("keyframes-editing"));
+  }
+
+  setOpen(editing) {
+    const open = editing && !this.collapsed;
+    this.el.hidden = !open;
+    document.documentElement.classList.toggle("keyframes-panel-open", open);
+    if (open) this.select(this.active);
+  }
+
+  async select(name) {
+    this.active = name;
+    localStorage.setItem("keyframes-panel-tab", name);
+    for (const button of this.el.querySelectorAll("[data-tab]")) {
+      button.classList.toggle("is-active", button.dataset.tab === name);
+    }
+    for (const pane of this.el.querySelectorAll("[data-pane]")) pane.hidden = pane.dataset.pane !== name;
+    this.el.querySelector(".keyframes-panel-ref").hidden = name === "source";
+    for (const [key, tab] of Object.entries(this.tabs)) tab.visible = key === name;
+    const tab = this.tabs[name];
+    if (!this.mounted.has(name)) {
+      this.mounted.add(name);
+      await tab.mount(this.el.querySelector(`[data-pane="${name}"]`));
+    }
+    tab.show();
+    tab.focus();
+  }
+
+  insertRefs() {
+    const tab = this.tabs[this.active];
+    if (!(tab instanceof TerminalTab)) return;
+    const slide = slideName(this.deck);
+    const ids = this.deck.selection ?? [];
+    const at = tab.name === "claude" ? "@" : "";
+    const target = ids.length ? ` (block${ids.length > 1 ? "s" : ""} ${ids.map((id) => `"${id}"`).join(", ")})` : "";
+    tab.insert(`${at}slides/${slide}.html${target} `);
+  }
+
+  setWidth(width) {
+    const clamped = Math.max(320, Math.min(width, innerWidth - 360));
+    document.documentElement.style.setProperty("--keyframes-panel-w", `${clamped}px`);
+    localStorage.setItem("keyframes-panel-w", String(Math.round(clamped)));
+  }
+
+  enableResize(handle) {
+    handle.addEventListener("pointerdown", (e) => {
+      e.preventDefault();
+      handle.setPointerCapture(e.pointerId);
+      document.documentElement.classList.add("keyframes-panel-resizing");
+      const move = (ev) => this.setWidth(innerWidth - ev.clientX);
+      const up = () => {
+        handle.removeEventListener("pointermove", move);
+        handle.removeEventListener("pointerup", up);
+        document.documentElement.classList.remove("keyframes-panel-resizing");
+      };
+      handle.addEventListener("pointermove", move);
+      handle.addEventListener("pointerup", up);
+    });
+  }
+}
+
+export async function createPanel(deck) {
+  addStylesheet(new URL("panel.css", import.meta.url).href);
+  const { terminals } = await fetch("_api/info").then((r) => r.json());
+  return new Panel(deck, terminals);
+}

keyframes/static/index.html

@@ -0,0 +1,23 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="icon" href="data:,">
+<title>{{title}}</title>
+<script type="importmap">
+{{importmap}}
+</script>
+<script>window.KEYFRAMES_CONFIG = {{config}};</script>
+<link rel="stylesheet" href="_keyframes/runtime/runtime.css">
+<link rel="stylesheet" href="_theme/theme.css">
+{{head}}
+<script type="module" src="_keyframes/runtime/runtime.js"></script>
+{{dev}}
+</head>
+<body>
+<main class="keyframes-deck">
+{{slides}}
+</main>
+</body>
+</html>

keyframes/static/runtime/component.js

@@ -0,0 +1,126 @@
+// Base class for <keyframes-*> embeds. The runtime drives the lifecycle:
+//   prepare()  before the deck starts, cheap setup that affects layout or build-step count
+//   init()     first time the slide is shown (lazy), load deps and build DOM
+//   play()     slide became current
+//   pause()    slide left
+//   destroy()  slide is far away; free GPU/memory. init() runs again on return
+//   snapshot() print/PDF: freeze live canvases into images
+//   step(n)    build step changed; also replayed right after init()
+//   paramChanged(name, value)  a bound <keyframes-slider> moved; this.params holds every value
+// Components that implement seek(t) can be driven by a <keyframes-slider timeline>.
+
+export class SwComponent extends HTMLElement {
+  #state = "idle";
+  #ready = null;
+  #step = 0;
+  params = {};
+
+  get slide() {
+    return this.closest(".keyframes-slide");
+  }
+
+  get pixelRatio() {
+    return (window.devicePixelRatio || 1) * (window.keyframes?.scale || 1);
+  }
+
+  get ready() {
+    return this.#ready ?? Promise.resolve();
+  }
+
+  async prepare() {}
+  async init() {}
+  play() {}
+  pause() {}
+  destroy() {}
+  async snapshot() {}
+  step(n) {}
+  paramChanged(name, value) {}
+
+  async keyframesStart() {
+    if (this.#state === "idle") {
+      this.#state = "initializing";
+      const attempt = this.init().then(
+        () => true,
+        (e) => (this.showError(e), false),
+      );
+      this.#ready = attempt;
+      const ok = await attempt;
+      if (this.#ready !== attempt || this.#state !== "initializing") {
+        if (ok) this.#guard(() => this.destroy());
+        return;
+      }
+      this.#state = ok ? "ready" : "failed";
+      if (ok) this.#guard(() => this.step(this.#step));
+    }
+    if (this.#state === "ready" || this.#state === "paused") {
+      this.#state = "playing";
+      this.#guard(() => this.play());
+    }
+  }
+
+  keyframesStop() {
+    if (this.#state === "playing") {
+      this.#state = "paused";
+      this.#guard(() => this.pause());
+    }
+  }
+
+  keyframesDispose() {
+    if (this.#state === "idle") return;
+    this.keyframesStop();
+    const wasLive = this.#state !== "initializing" && this.#state !== "failed";
+    this.#state = "idle";
+    this.#ready = null;
+    if (wasLive) this.#guard(() => this.destroy());
+  }
+
+  keyframesPrepare() {
+    return Promise.resolve(this.prepare()).catch(() => {});
+  }
+
+  async keyframesSnapshot() {
+    await this.ready;
+    await this.snapshot();
+  }
+
+  keyframesStep(n) {
+    this.#step = n;
+    if (["ready", "playing", "paused"].includes(this.#state)) this.#guard(() => this.step(n));
+  }
+
+  setParam(name, value) {
+    this.params[name] = value;
+    if (["ready", "playing", "paused"].includes(this.#state)) this.#guard(() => this.paramChanged(name, value));
+  }
+
+  disconnectedCallback() {
+    this.keyframesDispose();
+  }
+
+  #guard(fn) {
+    try {
+      fn();
+    } catch (e) {
+      this.showError(e);
+    }
+  }
+
+  showError(error) {
+    console.error(`<${this.localName}>`, error);
+    const box = document.createElement("div");
+    box.className = "keyframes-error";
+    box.textContent = `<${this.localName}> ${error?.stack || error}`;
+    this.style.position ||= "relative";
+    this.append(box);
+  }
+
+  resolveUrl(path) {
+    return new URL(path, document.baseURI).href;
+  }
+}
+
+export function onResize(el, callback) {
+  const observer = new ResizeObserver(() => callback(el.clientWidth, el.clientHeight));
+  observer.observe(el);
+  return () => observer.disconnect();
+}

keyframes/static/runtime/live.js

@@ -0,0 +1,31 @@
+export function connectLive(deck, retryDelay = 500) {
+  const url = new URL("_api/live", location.href);
+  url.protocol = location.protocol === "https:" ? "wss:" : "ws:";
+  url.search = url.hash = "";
+  const ws = new WebSocket(url);
+  let opened = false;
+
+  ws.onopen = () => {
+    if (retryDelay > 500) location.reload();
+    opened = true;
+  };
+  ws.onmessage = ({ data }) => {
+    const message = JSON.parse(data);
+    if (message.type === "slide") deck.replaceSlide(message.name, message.html);
+    if (message.type === "css") reloadStylesheets();
+    if (message.type === "reload") location.reload();
+  };
+  ws.onclose = () => {
+    const delay = opened ? 1000 : Math.min(retryDelay * 2, 5000);
+    setTimeout(() => connectLive(deck, delay), delay);
+  };
+}
+
+function reloadStylesheets() {
+  for (const link of document.querySelectorAll('link[rel="stylesheet"]')) {
+    const href = new URL(link.href);
+    if (href.pathname.includes("/_vendor/")) continue;
+    href.searchParams.set("v", Date.now());
+    link.href = href.href;
+  }
+}

keyframes/static/runtime/math.js

@@ -0,0 +1,33 @@
+const MATH_PATTERN = /\$|\\\(|\\\[|\\begin\{/;
+const DELIMITERS = [
+  { left: "$$", right: "$$", display: true },
+  { left: "\\[", right: "\\]", display: true },
+  { left: "\\begin{equation}", right: "\\end{equation}", display: true },
+  { left: "\\begin{align}", right: "\\end{align}", display: true },
+  { left: "\\(", right: "\\)", display: false },
+  { left: "$", right: "$", display: false },
+];
+
+let katexReady = null;
+
+function loadKatex() {
+  if (!katexReady) {
+    const css = document.createElement("link");
+    css.rel = "stylesheet";
+    css.href = new URL("katex.min.css", import.meta.resolve("katex/")).href;
+    document.head.append(css);
+    katexReady = import("katex/contrib/auto-render.mjs").then((m) => m.default);
+  }
+  return katexReady;
+}
+
+export async function renderMath(root) {
+  if (!MATH_PATTERN.test(root.textContent)) return;
+  const renderMathInElement = await loadKatex();
+  renderMathInElement(root, {
+    delimiters: DELIMITERS,
+    ignoredTags: ["script", "noscript", "style", "textarea", "pre", "code", "keyframes-code"],
+    ignoredClasses: ["no-math", "notes"],
+    throwOnError: false,
+  });
+}