keyframes 0.1.0__py3-none-any.whl

keyframes/scaffold/slides/02-intro.html

@@ -0,0 +1,17 @@
+<section data-layout="split">
+  <h2 class="title" data-block="title" data-x="88" data-y="72" data-w="800" data-h="170">The claim this slide makes, as one sentence</h2>
+  <div class="body" data-block="points" data-x="88" data-y="270" data-w="800" data-h="560">
+    Lead-in that sets up the figure:
+    <ul class="small">
+      <li>Supporting point with a number: 87% vs 41%</li>
+      <li>Second supporting point</li>
+    </ul>
+    <p class="lead" data-step="1">Takeaway, revealed last.</p>
+  </div>
+  <div class="media figure" data-block="figure" data-x="1010" data-y="180" data-w="860" data-h="600">
+    <img class="contain" src="assets/figure.svg" alt="">
+  </div>
+  <p class="caption" data-block="caption" data-x="1010" data-y="788" data-w="860" data-h="90">What the figure shows · simulation, 100 trials</p>
+  <p class="cite" data-block="cite" data-x="88" data-y="975" data-w="800" data-h="60">Author et al. Venue Year</p>
+  <aside class="notes">Point at the figure first. Mention the main caveat. End on why it matters.</aside>
+</section>

keyframes/server.py

@@ -0,0 +1,204 @@
+import asyncio
+import contextlib
+import json
+import socket
+import threading
+import time
+from pathlib import Path
+
+import httpx
+from starlette.applications import Starlette
+from starlette.requests import Request
+from starlette.responses import HTMLResponse, JSONResponse, Response
+from starlette.routing import Mount, Route, WebSocketRoute
+from starlette.staticfiles import StaticFiles
+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 .render import render_index, render_slide
+from .terminal import TerminalManager
+from .vendor import VendorCache
+
+IGNORED_DIRS = {".keyframes", "dist", ".git", ".venv", "node_modules", "__pycache__"}
+
+
+class NoCacheStatic(StaticFiles):
+    def file_response(self, *args, **kwargs):
+        response = super().file_response(*args, **kwargs)
+        response.headers["Cache-Control"] = "no-store"
+        return response
+
+
+class LiveReload:
+    """Watches the deck and pushes changes to connected browsers, ignoring our own writes."""
+
+    def __init__(self, deck: Deck):
+        self.deck = deck
+        self.clients: set[WebSocket] = set()
+        self.own_writes: dict[Path, str] = {}
+
+    def write(self, path: Path, content: str):
+        self.own_writes[path] = content
+        path.write_text(content)
+
+    async def broadcast(self, message: dict):
+        for ws in list(self.clients):
+            try:
+                await ws.send_text(json.dumps(message))
+            except Exception:
+                self.clients.discard(ws)
+
+    def _message_for(self, change: Change, path: Path) -> dict | None:
+        if path.parent == self.deck.slides_dir and path.suffix == ".html":
+            if change != Change.modified:
+                return {"type": "reload"}
+            content = path.read_text()
+            if self.own_writes.pop(path, None) == content:
+                return None
+            return {"type": "slide", "name": path.stem, "html": render_slide(path.stem, content)}
+        if path.suffix == ".css":
+            return {"type": "css"}
+        return {"type": "reload"}
+
+    async def watch(self):
+        watched = [self.deck.root, self.deck.theme_dir]
+        async for changes in awatch(*watched, watch_filter=self._watch_filter):
+            messages = []
+            for change, raw in changes:
+                message = self._message_for(change, Path(raw))
+                if message and message not in messages:
+                    messages.append(message)
+            if any(m["type"] == "reload" for m in messages):
+                messages = [{"type": "reload"}]
+            for message in messages:
+                await self.broadcast(message)
+
+    def _watch_filter(self, change: Change, raw: str) -> bool:
+        return not (IGNORED_DIRS & set(Path(raw).parts)) and not raw.endswith("~")
+
+
+def same_origin(headers) -> bool:
+    """Blocks other websites from driving the local editor APIs (and its terminals)."""
+    origin = headers.get("origin")
+    return origin is None or origin.split("://", 1)[-1] == headers.get("host")
+
+
+def create_app(deck: Deck, mode: str = "dev") -> Starlette:
+    vendor = VendorCache(deck.cache_dir)
+    live = LiveReload(deck)
+    terminals = TerminalManager(str(deck.root))
+
+    async def index(request: Request):
+        return HTMLResponse(render_index(deck, mode), headers={"Cache-Control": "no-store"})
+
+    async def vendor_file(request: Request):
+        host = request.path_params["host"]
+        path = "/" + request.path_params["path"]
+        try:
+            entry = await vendor.get(host, path, request.url.query)
+        except PermissionError as e:
+            return Response(str(e), status_code=403)
+        except httpx.HTTPError as e:
+            return Response(f"Vendor fetch failed: {e}", status_code=502)
+        return Response(
+            entry.body,
+            media_type=entry.content_type,
+            headers={"Cache-Control": "public, max-age=31536000, immutable"},
+        )
+
+    async def save_geometry(request: Request):
+        if not same_origin(request.headers):
+            return JSONResponse({"error": "cross-origin request"}, status_code=403)
+        payload = await request.json()
+        try:
+            path = deck.slide_path(payload["slide"])
+            updates = {bid: geometry_attrs(g) for bid, g in payload["blocks"].items()}
+            live.write(path, patch_blocks(path.read_text(), updates))
+        except (DeckError, KeyError, ValueError) as e:
+            return JSONResponse({"error": str(e)}, status_code=400)
+        return JSONResponse({"ok": True})
+
+    async def source(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)
+        if request.method == "PUT":
+            path.write_text((await request.body()).decode())
+            return JSONResponse({"ok": True})
+        return Response(path.read_text(), media_type="text/plain", headers={"Cache-Control": "no-store"})
+
+    async def info(request: Request):
+        return JSONResponse({"terminals": list(terminals.commands)})
+
+    async def terminal(ws: WebSocket):
+        if not same_origin(ws.headers):
+            await ws.close(code=4403)
+            return
+        await terminals.serve(ws, ws.path_params["name"])
+
+    async def websocket(ws: WebSocket):
+        await ws.accept()
+        live.clients.add(ws)
+        try:
+            while True:
+                await ws.receive_text()
+        except WebSocketDisconnect:
+            live.clients.discard(ws)
+
+    @contextlib.asynccontextmanager
+    async def lifespan(app):
+        task = asyncio.create_task(live.watch()) if mode == "dev" else None
+        yield
+        if task:
+            task.cancel()
+        terminals.stop_all()
+        await vendor.close()
+
+    dev_routes = [
+        Route("/_api/geometry", save_geometry, methods=["POST"]),
+        Route("/_api/source/{slide}", source, methods=["GET", "PUT"]),
+        Route("/_api/info", info),
+        WebSocketRoute("/_api/live", websocket),
+        WebSocketRoute("/_api/term/{name}", terminal),
+    ]
+    routes = [
+        Route("/", index),
+        *(dev_routes if mode == "dev" else []),
+        Route("/_vendor/{host}/{path:path}", vendor_file),
+        Mount("/_keyframes", NoCacheStatic(directory=STATIC_DIR)),
+        Mount("/_theme", NoCacheStatic(directory=deck.theme_dir)),
+        Mount("/", NoCacheStatic(directory=deck.root)),
+    ]
+    return Starlette(routes=routes, lifespan=lifespan)
+
+
+def free_port(start: int) -> int:
+    for port in range(start, start + 50):
+        with socket.socket() as s:
+            if s.connect_ex(("127.0.0.1", port)) != 0:
+                return port
+    raise RuntimeError("No free port found")
+
+
+@contextlib.contextmanager
+def background_server(deck: Deck, mode: str = "present"):
+    import uvicorn
+
+    port = free_port(8900)
+    server = uvicorn.Server(
+        uvicorn.Config(create_app(deck, mode), host="127.0.0.1", port=port, log_level="warning")
+    )
+    thread = threading.Thread(target=server.run, daemon=True)
+    thread.start()
+    while not server.started:
+        time.sleep(0.05)
+    try:
+        yield f"http://127.0.0.1:{port}/"
+    finally:
+        server.should_exit = True
+        thread.join()

keyframes/static/components/keyframes-code.js

@@ -0,0 +1,423 @@
+import { SwComponent } from "../runtime/component.js";
+
+const LANGUAGES = {
+  python: () => import("@codemirror/lang-python").then((m) => m.python()),
+  javascript: () => import("@codemirror/lang-javascript").then((m) => m.javascript()),
+  js: () => LANGUAGES.javascript(),
+  typescript: () => import("@codemirror/lang-javascript").then((m) => m.javascript({ typescript: true })),
+  ts: () => LANGUAGES.typescript(),
+  jsx: () => import("@codemirror/lang-javascript").then((m) => m.javascript({ jsx: true })),
+  tsx: () => import("@codemirror/lang-javascript").then((m) => m.javascript({ jsx: true, typescript: true })),
+  cpp: () => import("@codemirror/lang-cpp").then((m) => m.cpp()),
+  c: () => LANGUAGES.cpp(),
+  rust: () => import("@codemirror/lang-rust").then((m) => m.rust()),
+  json: () => import("@codemirror/lang-json").then((m) => m.json()),
+  css: () => import("@codemirror/lang-css").then((m) => m.css()),
+  html: () => import("@codemirror/lang-html").then((m) => m.html()),
+};
+
+const RUNNERS = { python: runPython, javascript: runJavaScript, js: runJavaScript };
+
+const STYLE = `
+keyframes-code {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
+  text-align: left;
+  color: var(--fg);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 16px;
+  font-family: var(--font-mono);
+  font-size: var(--keyframes-code-size, 26px);
+  line-height: 1.55;
+  font-variant-ligatures: none;
+}
+keyframes-code > .keyframes-code-editor { flex: 1 1 auto; min-height: 0; }
+keyframes-code > .keyframes-code-editor > pre { margin: 0; padding: 0.8em 1.1em; font: inherit; white-space: pre; overflow: hidden; }
+keyframes-code .cm-editor { height: 100%; }
+keyframes-code .keyframes-dim { opacity: 0.3; transition: opacity 0.3s ease; }
+keyframes-code .keyframes-hl { background: color-mix(in srgb, var(--accent) 9%, transparent); transition: opacity 0.3s ease; }
+keyframes-code > .keyframes-code-bar {
+  display: flex;
+  align-items: center;
+  gap: 0.8em;
+  padding: 0.4em 0.5em 0.4em 1.1em;
+  border-top: 1px solid var(--border);
+  font: 600 0.62em var(--font-sans);
+  color: var(--muted);
+}
+keyframes-code .keyframes-code-lang { text-transform: uppercase; letter-spacing: 0.1em; }
+keyframes-code .keyframes-code-hint { margin-left: auto; font-weight: 400; }
+keyframes-code .keyframes-code-run {
+  font: inherit;
+  color: #fff;
+  background: var(--accent);
+  border: 0;
+  border-radius: 8px;
+  padding: 0.35em 1.1em;
+  cursor: pointer;
+}
+keyframes-code .keyframes-code-run:disabled { opacity: 0.55; cursor: progress; }
+keyframes-code > .keyframes-code-output {
+  flex: 0 0 var(--keyframes-code-output, 30%);
+  margin: 0;
+  padding: 0.6em 1.1em;
+  overflow: auto;
+  box-sizing: border-box;
+  background: var(--bg);
+  border-top: 1px solid var(--border);
+  font: inherit;
+  font-size: 0.8em;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+keyframes-code .keyframes-code-output .err { color: #c62828; }
+keyframes-code .keyframes-code-output .status { color: var(--muted); font-style: italic; }
+`;
+
+let codeMirror = null;
+let pyodide = null;
+let python = null;
+let pythonQueue = Promise.resolve();
+
+function loadCodeMirror() {
+  codeMirror ??= Promise.all([
+    import("@codemirror/state"),
+    import("@codemirror/view"),
+    import("@codemirror/commands"),
+    import("@codemirror/language"),
+    import("@lezer/highlight"),
+  ]).then(([state, view, commands, language, highlight]) => ({ state, view, commands, language, highlight }));
+  return codeMirror;
+}
+
+function loadPython() {
+  pyodide ??= import("pyodide")
+    .then((m) => m.loadPyodide())
+    .then((py) => (python = py))
+    .catch((e) => {
+      pyodide = null;
+      throw e;
+    });
+  return pyodide;
+}
+
+function injectStyle() {
+  if (document.getElementById("keyframes-code-style")) return;
+  const style = document.createElement("style");
+  style.id = "keyframes-code-style";
+  style.textContent = STYLE;
+  document.head.append(style);
+}
+
+function readSource(el) {
+  const script = el.querySelector(':scope > script[type="text/plain"]');
+  const text = script ? script.textContent.replaceAll("<\\/script>", "</script>") : el.textContent;
+  return dedent(text);
+}
+
+function dedent(text) {
+  const lines = text.replace(/\r\n?/g, "\n").split("\n");
+  while (lines.length && !lines[0].trim()) lines.shift();
+  while (lines.length && !lines.at(-1).trim()) lines.pop();
+  const indents = lines.filter((l) => l.trim()).map((l) => l.match(/^[ \t]*/)[0].length);
+  const indent = indents.length ? Math.min(...indents) : 0;
+  return lines.map((l) => l.slice(indent).trimEnd()).join("\n");
+}
+
+function parseHighlight(spec) {
+  if (!spec) return [];
+  return spec.split("|").map((segment) => {
+    if (!segment.trim()) return null;
+    return segment.split(",").map((part) => {
+      const [a, b = a] = part.split("-").map(Number);
+      return [a, b];
+    });
+  });
+}
+
+function element(tag, className, text = "") {
+  const el = document.createElement(tag);
+  el.className = className;
+  el.textContent = text;
+  return el;
+}
+
+function format(value) {
+  if (typeof value === "string") return value;
+  if (value instanceof Error) return `${value.name}: ${value.message}`;
+  try {
+    return JSON.stringify(value) ?? String(value);
+  } catch {
+    return String(value);
+  }
+}
+
+const SANDBOX = `<script>
+const fmt = ${format.toString()};
+const send = (kind, args) => parent.postMessage({ kind, text: args.map(fmt).join(" ") }, "*");
+for (const [name, kind] of [["log", "out"], ["info", "out"], ["debug", "out"], ["warn", "err"], ["error", "err"]]) {
+  console[name] = (...args) => send(kind, args);
+}
+addEventListener("error", (e) => send("err", [e.error ?? e.message]));
+addEventListener("unhandledrejection", (e) => send("err", [e.reason]));
+addEventListener("message", async ({ data }) => {
+  try {
+    await new (async () => {}).constructor(data)();
+  } catch (e) {
+    send("err", [e]);
+  }
+  parent.postMessage({ kind: "done" }, "*");
+});
+<\/script>`;
+
+async function runJavaScript(code, { print, host }) {
+  const frame = document.createElement("iframe");
+  frame.sandbox = "allow-scripts";
+  frame.hidden = true;
+  frame.srcdoc = SANDBOX;
+  const previous = host.querySelector(":scope > iframe");
+  previous?.stop.abort();
+  previous?.remove();
+  frame.stop = new AbortController();
+  host.append(frame);
+  await new Promise((resolve) => frame.addEventListener("load", resolve, { once: true }));
+  const done = new Promise((resolve) => {
+    const listen = ({ source, data }) => {
+      if (source !== frame.contentWindow) return;
+      if (data.kind === "done") resolve();
+      else print(data.text, data.kind);
+    };
+    addEventListener("message", listen, { signal: frame.stop.signal });
+  });
+  frame.contentWindow.postMessage(code, "*");
+  await done;
+}
+
+function cleanTraceback(message) {
+  const lines = message.trimEnd().split("\n");
+  const start = lines.findIndex((l) => l.includes('File "<exec>"'));
+  return start < 0 ? message : [lines[0], ...lines.slice(start)].join("\n");
+}
+
+async function runPython(code, { print, status, packages }) {
+  if (!python) status("Loading Python…");
+  const py = await loadPython();
+  const messageCallback = (msg) => status(msg);
+  if (packages.length) await py.loadPackage(packages, { messageCallback });
+  await py.loadPackagesFromImports(code, { messageCallback });
+  status(null);
+  py.setStdout({ batched: (s) => print(s, "out") });
+  py.setStderr({ batched: (s) => print(s, "err") });
+  const globals = py.toPy({});
+  try {
+    const result = await py.runPythonAsync(code, { globals });
+    if (result !== undefined) print(String(result), "out");
+    result?.destroy?.();
+  } catch (e) {
+    print(cleanTraceback(String(e.message ?? e)), "err");
+  } finally {
+    globals.destroy();
+  }
+}
+
+class SwCode extends SwComponent {
+  #code = null;
+  #view = null;
+  #highlight = [];
+  #step = 0;
+  #decorations = null;
+  #shell = null;
+  #running = false;
+
+  get lang() {
+    return (this.getAttribute("lang") || "text").toLowerCase();
+  }
+
+  get code() {
+    return this.#view ? this.#view.state.doc.toString() : this.#code;
+  }
+
+  connectedCallback() {
+    if (this.#shell) return;
+    injectStyle();
+    this.#code = readSource(this);
+    this.#highlight = parseHighlight(this.getAttribute("highlight"));
+    const size = this.getAttribute("font-size");
+    if (size) this.style.setProperty("--keyframes-code-size", /^\d+(\.\d+)?$/.test(size) ? `${size}px` : size);
+    this.#shell = { editor: element("div", "keyframes-code-editor") };
+    this.#shell.editor.append(element("pre", "", this.#code));
+    const parts = [this.#shell.editor];
+    if (this.hasAttribute("run") && RUNNERS[this.lang]) parts.push(...this.#buildRunner());
+    const markers = this.#highlight.slice(1).map((_, i) => {
+      const marker = element("span", "keyframes-code-step");
+      marker.hidden = true;
+      marker.dataset.step = String(i + 1);
+      return marker;
+    });
+    this.replaceChildren(...parts, ...markers);
+  }
+
+  #buildRunner() {
+    const bar = element("div", "keyframes-code-bar");
+    const button = element("button", "keyframes-code-run", "▶ Run");
+    button.addEventListener("mousedown", (e) => e.preventDefault());
+    button.addEventListener("click", () => this.run());
+    bar.append(element("span", "keyframes-code-lang", this.lang), element("span", "keyframes-code-hint", "⇧↵ to run"), button);
+    const output = element("pre", "keyframes-code-output");
+    output.append(element("span", "status", "Output appears here"));
+    Object.assign(this.#shell, { button, output });
+    return [bar, output];
+  }
+
+  async init() {
+    if (this.hasAttribute("run") && !RUNNERS[this.lang]) {
+      throw new Error(`run supports lang="python" or lang="javascript", not "${this.lang}"`);
+    }
+    const [cm, language] = await Promise.all([loadCodeMirror(), LANGUAGES[this.lang]?.()]);
+    const { EditorState, Compartment, Prec } = cm.state;
+    const { EditorView, keymap, lineNumbers, drawSelection } = cm.view;
+    const { defaultKeymap, history, historyKeymap, indentWithTab } = cm.commands;
+    const { syntaxHighlighting, bracketMatching, indentOnInput } = cm.language;
+    const readonly = this.hasAttribute("readonly");
+    this.#decorations = new Compartment();
+    const runKeys = [
+      { key: "Mod-Enter", run: () => (this.run(), true) },
+      { key: "Shift-Enter", run: () => (this.run(), true) },
+    ];
+    const extensions = [
+      theme(EditorView),
+      syntaxHighlighting(highlightStyle(cm)),
+      drawSelection(),
+      bracketMatching(),
+      indentOnInput(),
+      history(),
+      EditorState.tabSize.of(4),
+      Prec.highest(keymap.of([...(this.#shell.button ? runKeys : []), { key: "Escape", run: blur }])),
+      keymap.of([...defaultKeymap, ...historyKeymap, indentWithTab]),
+      this.#decorations.of(this.#lineDecorations(cm)),
+      language ?? [],
+      this.hasAttribute("line-numbers") ? lineNumbers() : [],
+      readonly ? [EditorState.readOnly.of(true), EditorView.editable.of(false)] : [],
+    ];
+    this.#view = new EditorView({ doc: this.#code, extensions });
+    this.#shell.editor.replaceChildren(this.#view.dom);
+  }
+
+  #lineDecorations(cm, segment = this.#highlight[Math.min(this.#step, this.#highlight.length - 1)]) {
+    if (!segment) return [];
+    const { Decoration, EditorView } = cm.view;
+    const hl = Decoration.line({ class: "keyframes-hl" });
+    const dim = Decoration.line({ class: "keyframes-dim" });
+    return EditorView.decorations.of((view) => {
+      const doc = view.state.doc;
+      const marks = [];
+      for (let n = 1; n <= doc.lines; n++) {
+        const on = segment.some(([a, b]) => n >= a && n <= b);
+        marks.push((on ? hl : dim).range(doc.line(n).from));
+      }
+      return Decoration.set(marks);
+    });
+  }
+
+  async #setDecorations(segment) {
+    const cm = await loadCodeMirror();
+    this.#view?.dispatch({ effects: this.#decorations.reconfigure(this.#lineDecorations(cm, segment)) });
+  }
+
+  step(n) {
+    this.#step = n;
+    if (this.#view && this.#highlight.length) this.#setDecorations();
+  }
+
+  async snapshot() {
+    const { output } = this.#shell;
+    if (output?.querySelector(":scope > .status:only-child")) output.hidden = true;
+    if (this.#view && this.#highlight.length) await this.#setDecorations(null);
+  }
+
+  destroy() {
+    this.#code = this.#view.state.doc.toString();
+    this.#view.destroy();
+    this.#view = null;
+    this.#shell.editor.replaceChildren(element("pre", "", this.#code));
+  }
+
+  async run() {
+    const { button, output } = this.#shell;
+    if (this.#running || !button) return;
+    this.#running = true;
+    button.disabled = true;
+    output.replaceChildren();
+    let statusLine = null;
+    const status = (text) => {
+      statusLine?.remove();
+      statusLine = text ? output.appendChild(element("span", "status", `${text}\n`)) : null;
+    };
+    const print = (text, kind) => {
+      output.append(element("span", kind, `${text}\n`));
+      output.scrollTop = output.scrollHeight;
+    };
+    const packages = (this.getAttribute("packages") || "").split(/[\s,]+/).filter(Boolean);
+    const runner = RUNNERS[this.lang];
+    const job = () => runner(this.code, { print, status, packages, host: this });
+    try {
+      status("Running…");
+      if (runner === runPython) await (pythonQueue = pythonQueue.then(job, job));
+      else await job();
+      status(null);
+      if (!output.childNodes.length) output.append(element("span", "status", "(no output)"));
+    } catch (e) {
+      status(null);
+      print(String(e?.message ?? e), "err");
+    } finally {
+      this.#running = false;
+      button.disabled = false;
+    }
+  }
+}
+
+function blur(view) {
+  view.contentDOM.blur();
+  return true;
+}
+
+function theme(EditorView) {
+  return EditorView.theme({
+    "&": { height: "100%", backgroundColor: "transparent", color: "var(--fg)", fontSize: "inherit" },
+    "&.cm-focused": { outline: "none" },
+    ".cm-scroller": { fontFamily: "var(--font-mono)", lineHeight: "1.55" },
+    ".cm-content": { padding: "0.8em 0", caretColor: "var(--accent)" },
+    ".cm-line": { padding: "0 1.1em" },
+    ".cm-cursor, .cm-dropCursor": { borderLeftColor: "var(--accent)", borderLeftWidth: "2px" },
+    "&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, ::selection":
+      { backgroundColor: "color-mix(in srgb, var(--accent) 20%, transparent)" },
+    ".cm-gutters": { backgroundColor: "transparent", color: "var(--muted)", border: "none", opacity: "0.6" },
+    ".cm-lineNumbers .cm-gutterElement": { padding: "0 0.2em 0 0.9em", minWidth: "1.6em" },
+    "&.cm-focused .cm-matchingBracket": { backgroundColor: "color-mix(in srgb, var(--accent-2) 25%, transparent)" },
+  });
+}
+
+function highlightStyle(cm) {
+  const { tags: t } = cm.highlight;
+  return cm.language.HighlightStyle.define([
+    { tag: [t.keyword, t.controlKeyword, t.moduleKeyword, t.operatorKeyword, t.definitionKeyword], color: "#7c3aed", fontWeight: "600" },
+    { tag: [t.string, t.special(t.string), t.regexp], color: "#0f7b4a" },
+    { tag: [t.number, t.bool, t.null, t.atom], color: "#c2570c" },
+    { tag: [t.comment, t.lineComment, t.blockComment], color: "var(--muted)", fontStyle: "italic" },
+    { tag: [t.function(t.variableName), t.function(t.propertyName)], color: "var(--accent)" },
+    { tag: [t.definition(t.variableName), t.definition(t.function(t.variableName))], color: "var(--accent)", fontWeight: "600" },
+    { tag: [t.className, t.typeName, t.namespace], color: "#b45309" },
+    { tag: [t.self, t.special(t.variableName)], color: "#be185d" },
+    { tag: [t.propertyName, t.attributeName], color: "#0e7490" },
+    { tag: [t.tagName], color: "#7c3aed" },
+    { tag: [t.operator, t.punctuation, t.bracket], color: "#5d6470" },
+    { tag: t.invalid, color: "#c62828" },
+  ]);
+}
+
+customElements.define("keyframes-code", SwCode);