@hajimism/dek 0.1.0

package/src/core/shot/still.ts

@@ -0,0 +1,216 @@
+import { DekError } from "../error.ts";
+import {
+  askPlaywright,
+  type PagesRequest,
+  type PlaywrightRunner,
+  requirePlaywright,
+  type VisualPage,
+} from "../playwright.ts";
+import { asResolvedDeck, type ResolvedDeck, requireSection } from "../resolve.ts";
+import { dropLinks, isCachedFile } from "../safe-fs.ts";
+import type { Section } from "../schema.ts";
+import { overviewSheets, SHEET_LAYOUT_VERSION, type SheetSpec } from "../sheet.ts";
+import { bundleEntry, type CacheEntry, stillEntry } from "../shot-cache.ts";
+import { logicalSize } from "../size.ts";
+import { formatStepChoices, lastStop, resolveStop, stepKey } from "../step.ts";
+import { loadSlideSources, renderSlideHtml, type SlideSources } from "../still-page.ts";
+
+export type ShotFile = {
+  slug: string;
+  step: string;
+  path: string;
+  /** Set on a morph frame: the slide the transition goes to. */
+  to?: string;
+  /** Set on a morph frame: where in the transition the frame was taken, 0..1. */
+  at?: number;
+};
+
+export type ShotDeckOptions = {
+  slug?: string;
+  step?: string;
+  runner?: PlaywrightRunner;
+};
+
+export async function shotDeck(dir: string, options?: ShotDeckOptions): Promise<ShotFile[]>;
+export async function shotDeck(
+  source: ResolvedDeck,
+  options?: ShotDeckOptions,
+): Promise<ShotFile[]>;
+export async function shotDeck(
+  input: string | ResolvedDeck,
+  options: ShotDeckOptions = {},
+): Promise<ShotFile[]> {
+  const { deck } = asResolvedDeck(input);
+  const sections = options.slug
+    ? deck.deck.sections.filter((section) => section.slug === options.slug)
+    : deck.deck.sections;
+  if (options.slug && sections.length === 0) {
+    requireSection(deck, options.slug);
+  }
+  const stills = stillPages(deck, sections, options.step);
+  await shootStills(deck, stills, options.runner);
+  return stills.map(shotOf);
+}
+
+export type ShotSheet = {
+  /** The contact sheets, in order; one unless the deck is too long for one. */
+  sheets: string[];
+  /** Each slide's own shot, the sheets' tiles at full size. */
+  shots: ShotFile[];
+};
+
+/**
+ * Every slide at its last beat, tiled on contact sheets, so the whole deck reads in one look.
+ * The tiles are the slides' own shots, taken in the same browser run when they are stale; a deck
+ * where nothing changed starts no browser at all.
+ */
+export async function shotSheet(
+  dir: string,
+  options?: { runner?: PlaywrightRunner },
+): Promise<ShotSheet>;
+export async function shotSheet(
+  source: ResolvedDeck,
+  options?: { runner?: PlaywrightRunner },
+): Promise<ShotSheet>;
+export async function shotSheet(
+  input: string | ResolvedDeck,
+  options: { runner?: PlaywrightRunner } = {},
+): Promise<ShotSheet> {
+  const { deck } = asResolvedDeck(input);
+  const stills = stillPages(deck, deck.deck.sections);
+  const cells = stills.map((still, i) => ({
+    image: still.screenshotPath,
+    label: `${i + 1} · ${still.slug}`,
+  }));
+  // The tiles' paths hash what they show, so the key changes whenever a tile does.
+  const bundle = bundleEntry(
+    deck.dir,
+    "sheets",
+    [],
+    JSON.stringify([SHEET_LAYOUT_VERSION, deck.deck.title, cells]),
+  );
+  dropLinks(bundle.dir);
+  const sheets = overviewSheets(cells, {
+    slide: logicalSize(deck.deck.ratio),
+    title: deck.deck.title,
+    dir: bundle.dir,
+  });
+  await shootStills(deck, stills, options.runner, { sheets });
+  bundle.commit();
+  return { sheets: sheets.map((spec) => spec.path), shots: stills.map(shotOf) };
+}
+
+/**
+ * The first slide at its last beat, as a link preview shows the talk. The shot is the one
+ * `dekc shot` takes of that slide, cached by the rendered HTML, so a build only starts Chromium
+ * when the first slide changed. Returns undefined when Playwright is not installed.
+ */
+export async function coverShot(
+  deck: ResolvedDeck["deck"],
+  runner?: PlaywrightRunner,
+): Promise<string | undefined> {
+  const stills = stillPages(deck, deck.deck.sections.slice(0, 1));
+  const [still] = stills;
+  if (!still) {
+    return undefined;
+  }
+  const shot = await shootStills(deck, stills, runner, { ifMissing: "skip" });
+  return shot ? still.screenshotPath : undefined;
+}
+
+export type Still = {
+  html: string;
+  slug: string;
+  /** The step as it was asked for, or the beat's key. */
+  step: string;
+  screenshotPath: string;
+  entry: CacheEntry;
+};
+
+/** One slide at one beat as `dekc shot` takes it: its page, and the cached shot it is named by. */
+export function still(
+  deck: ResolvedDeck["deck"],
+  section: Section,
+  beatIndex: number,
+  sources: SlideSources,
+  step: string = stepKey(section.beats, beatIndex),
+): Still {
+  const html = renderSlideHtml(sources, section.slug, beatIndex);
+  const entry = stillEntry(deck.dir, section, beatIndex, html);
+  return { html, slug: section.slug, step, screenshotPath: entry.path, entry };
+}
+
+/** The still as a page to render; it is shot only when its shot is not on disk yet. */
+export function stillPage(still: Still): VisualPage {
+  return {
+    html: still.html,
+    slug: still.slug,
+    step: still.step,
+    ...(still.entry.cached ? {} : { screenshotPath: still.screenshotPath }),
+  };
+}
+
+/** Each section's still at `step` (its last beat when left out). */
+function stillPages(deck: ResolvedDeck["deck"], sections: Section[], step?: string): Still[] {
+  const sources = loadSlideSources(deck);
+  return sections.map((section) => {
+    const beat = resolveBeat(section, step);
+    return still(deck, section, beat.index, sources, beat.label);
+  });
+}
+
+/**
+ * Shoots the stills not on disk yet, and draws `sheets` in the same browser run; with nothing to
+ * shoot or draw, no browser starts. Older shots of the same stills go only once the run is done.
+ * Without Playwright this throws, or with `ifMissing: "skip"` shoots nothing and answers false.
+ */
+async function shootStills(
+  deck: ResolvedDeck["deck"],
+  stills: Still[],
+  runner: PlaywrightRunner | undefined,
+  { sheets, ifMissing = "throw" }: { sheets?: SheetSpec[]; ifMissing?: "throw" | "skip" } = {},
+): Promise<boolean> {
+  const stale = stills.filter((still) => !still.entry.cached);
+  if (stale.length > 0 || sheets?.some((spec) => !isCachedFile(spec.path))) {
+    const request: PagesRequest = {
+      kind: "pages",
+      viewport: logicalSize(deck.deck.ratio),
+      actions: [],
+      pages: stale.map(stillPage),
+      ...(sheets ? { sheets } : {}),
+    };
+    if (ifMissing === "throw") {
+      await requirePlaywright(request, runner);
+    } else if ((await askPlaywright(request, runner)) === null) {
+      return false;
+    }
+  }
+  for (const still of stills) {
+    still.entry.commit();
+  }
+  return true;
+}
+
+function shotOf(still: Still): ShotFile {
+  return { slug: still.slug, step: still.step, path: still.screenshotPath };
+}
+
+/** The beat `step` names in `section` (its last beat when left out), and its label. */
+export function resolveBeat(section: Section, step?: string): { index: number; label: string } {
+  const index = step === undefined ? lastStop(section.beats) : resolveStop(section.beats, step);
+  if (index === undefined) {
+    throw new DekError(`step "${step}" not found in "${section.slug}"`, {
+      hint: stepNotFoundHint(section),
+    });
+  }
+  return { index, label: step ?? stepKey(section.beats, index) };
+}
+
+function stepNotFoundHint(section: Section): string {
+  return section.beats.length === 0
+    ? "this slide has no beats; use 0, or leave out --step"
+    : formatStepChoices([
+        ...section.beats.flatMap((beat) => (beat.id ? [beat.id] : [])),
+        `0-${section.beats.length}`,
+      ]);
+}

package/src/core/shot-cache.ts

@@ -0,0 +1,140 @@
+import { createHash } from "node:crypto";
+import { readdirSync, rmSync } from "node:fs";
+import { join } from "node:path";
+import { escapeRegExp } from "./escape.ts";
+import { cacheDir, deckProjectRoot } from "./path.ts";
+import { isCachedFile, outputDir } from "./safe-fs.ts";
+import type { Section } from "./schema.ts";
+import { lastStop, stepKey } from "./step.ts";
+
+/**
+ * Every capture dek caches lives under `.cache/shots`, named by what it is and a hash of what it
+ * shows. The parts of a name are joined with "~", which no slug, beat id or number can contain,
+ * so no two captures share a name, and pruning one never reaches another.
+ */
+const SEPARATOR = "~";
+const HASH = "[0-9a-f]{8}";
+
+/** A cached file: where it goes, whether it is already there, and `commit` once it is written. */
+export type CacheEntry = {
+  path: string;
+  cached: boolean;
+  /** Removes the older runs of the same capture; call it only once this one is on disk. */
+  commit(): void;
+};
+
+/** A cached folder of files, such as a set of contact sheets. */
+type CacheBundle = {
+  dir: string;
+  commit(): void;
+};
+
+/** `.cache/shots`, made if missing, where it really is; a link out of the project is an error. */
+function shotsDir(deckDir: string): string {
+  return outputDir(cacheDir(deckDir, "shots"), deckProjectRoot(deckDir));
+}
+
+function contentHash(text: string): string {
+  return createHash("sha256").update(text).digest("hex").slice(0, 8);
+}
+
+/**
+ * `<part>~<part>.<hash>.png`, where the hash covers what the page renders (theme, slide, shown
+ * steps, inlined assets). A changed rendering gets a new path, so nothing that caches by path can
+ * show a stale image.
+ */
+export function shotName(parts: string[], content: string): string {
+  return `${parts.join(SEPARATOR)}.${contentHash(content)}.png`;
+}
+
+/**
+ * The still of `section` at `beatIndex`. It is named by the beat's own key, so `--step hook`,
+ * `--step 2` and a still at the last beat, `dekc build`'s link preview included, are one file.
+ */
+export function stillEntry(
+  deckDir: string,
+  section: Section,
+  beatIndex: number,
+  html: string,
+): CacheEntry {
+  const step = stepKey(section.beats, beatIndex);
+  // Names from before "~": `<slug>` for the last beat, `<slug>-<step>` for one asked for.
+  const legacy = [
+    ...(beatIndex === lastStop(section.beats) ? [section.slug] : []),
+    `${section.slug}-${step}`,
+    `${section.slug}-${beatIndex}`,
+  ];
+  return fileEntry(deckDir, [section.slug, step], html, legacy);
+}
+
+/** The frame `at` of the move from `from` into `to`. */
+export function morphEntry(
+  deckDir: string,
+  from: string,
+  to: string,
+  at: number,
+  html: string,
+): CacheEntry {
+  return fileEntry(deckDir, [from, to, String(at)], `${at}\0${html}`, [`${from}-to-${to}-${at}`]);
+}
+
+/**
+ * `.cache/shots/<kind>/<parts>.<hash>`, a folder a capture fills. Each set of parts keeps one
+ * folder, so runs of different captures neither evict nor race each other.
+ */
+export function bundleEntry(
+  deckDir: string,
+  kind: "sheets" | "motion",
+  parts: string[],
+  content: string,
+): CacheBundle {
+  const root = deckProjectRoot(deckDir);
+  const parent = outputDir(join(shotsDir(deckDir), kind), root);
+  const base = parts.join(SEPARATOR);
+  const name = base ? `${base}.${contentHash(content)}` : contentHash(content);
+  const pattern = new RegExp(`^${base ? `${escapeRegExp(base)}\\.` : ""}${HASH}$`);
+  return {
+    dir: outputDir(join(parent, name), root),
+    commit: () => prune(parent, [pattern], name, { recursive: true }),
+  };
+}
+
+function fileEntry(
+  deckDir: string,
+  parts: string[],
+  content: string,
+  legacy: string[],
+): CacheEntry {
+  const dir = shotsDir(deckDir);
+  const name = shotName(parts, content);
+  const path = join(dir, name);
+  const patterns = [
+    new RegExp(`^${escapeRegExp(parts.join(SEPARATOR))}\\.${HASH}\\.png$`),
+    ...legacy.map((base) => new RegExp(`^${escapeRegExp(base)}(?:\\.${HASH})?\\.png$`)),
+  ];
+  return {
+    path,
+    cached: isCachedFile(path),
+    commit: () => prune(dir, patterns, name),
+  };
+}
+
+/** Removes the entries of `dir` that a pattern names, all but `keep`. */
+function prune(
+  dir: string,
+  patterns: RegExp[],
+  keep: string,
+  options: { recursive?: boolean } = {},
+): void {
+  let names: string[];
+  try {
+    names = readdirSync(dir);
+  } catch {
+    return;
+  }
+  for (const name of names) {
+    if (name !== keep && patterns.some((pattern) => pattern.test(name))) {
+      rmSync(join(dir, name), { force: true, recursive: options.recursive === true });
+    }
+  }
+}

package/src/core/size.ts

@@ -0,0 +1,11 @@
+export type Size = {
+  width: number;
+  height: number;
+};
+
+export function logicalSize(ratio?: "16:9" | "4:3"): Size {
+  if (ratio === "4:3") {
+    return { width: 1024, height: 768 };
+  }
+  return { width: 1280, height: 720 };
+}

package/src/core/skeleton-record.ts

@@ -0,0 +1,51 @@
+import { createHash } from "node:crypto";
+import { join } from "node:path";
+import { deckProjectRoot } from "./path.ts";
+import { readSourceIfExists, writeInside } from "./safe-fs.ts";
+
+/**
+ * Which slides are still dek's own: the skeletons dek wrote that nobody has touched since, kept as
+ * hashes of their bytes in `.cache/skeletons`. The shape of a skeleton proves nothing, since an
+ * author who retypes its heading keeps the shape; only the bytes dek wrote do.
+ *
+ * The record is a cache, and anyone may delete it. Without it, a slide that is exactly the
+ * skeleton dek would write now is still provably dek's, and every other slide is the author's, so
+ * a lost record costs refreshes, never edits.
+ */
+export type SkeletonRecord = {
+  /** Whether `html` is dek's: what it wrote before, or byte for byte what it would write now. */
+  owns(html: string, now: string | undefined): boolean;
+  /** Notes `html` as dek's for the next run; what is not kept is forgotten on `save`. */
+  keep(html: string): void;
+  /** Writes what was kept, when that differs from what was read. */
+  save(): void;
+};
+
+export function skeletonRecord(deckDir: string): SkeletonRecord {
+  const root = deckProjectRoot(deckDir);
+  const path = join(deckDir, ".cache", "skeletons");
+  const source = readSourceIfExists(path, root);
+  const written = new Set(source?.split("\n").filter((line) => HASH_RE.test(line)));
+  const kept = new Set<string>();
+  return {
+    owns: (html, now) => html === now || written.has(hashOf(html)),
+    keep: (html) => {
+      kept.add(hashOf(html));
+    },
+    save: () => {
+      const next = [...kept]
+        .sort()
+        .map((hash) => `${hash}\n`)
+        .join("");
+      if (next !== (source ?? "")) {
+        writeInside(path, next, root);
+      }
+    },
+  };
+}
+
+const HASH_RE = /^[0-9a-f]{64}$/;
+
+function hashOf(html: string): string {
+  return createHash("sha256").update(html).digest("hex");
+}

package/src/core/skeleton.ts

@@ -0,0 +1,89 @@
+import { cssLayoutNames, parseCss } from "./css.ts";
+import { deckPaths } from "./deck-paths.ts";
+import { escapeHtml } from "./escape.ts";
+import { readDeckFile } from "./resolve.ts";
+import type { Deck, Section } from "./schema.ts";
+import { beatStep } from "./step.ts";
+
+// The slide HTML `dekc sync` writes for a section nobody has written yet. Rendering, lint, and
+// `dekc mv` read it too, so it lives apart from the writes in sync.ts.
+
+/**
+ * The layouts a deck's theme.css lays out. A skeleton names a layout only from these, so a new
+ * deck passes lint in whatever theme it was made with.
+ */
+export type SkeletonLayouts = ReadonlySet<string>;
+
+export function deckLayouts(deckDir: string): SkeletonLayouts {
+  const css = readDeckFile(deckDir, deckPaths(deckDir).theme);
+  return css === undefined ? new Set() : cssLayoutNames(parseCss(css));
+}
+
+/**
+ * A heading that is only an id (`## intro`) has no display text. The first
+ * section takes the deck title; later ones stay empty so the slug never ends
+ * up on a published slide. Lint reports the empty heading (DEK024) with the
+ * fix: a title in script.md, which the next sync writes here.
+ */
+function skeletonHeading(
+  section: Pick<Section, "slug" | "title">,
+  index: number,
+  deckTitle: string,
+): string {
+  if (section.title !== section.slug) {
+    return section.title;
+  }
+  return index === 0 ? deckTitle : "";
+}
+
+/** The HTML `dekc sync` would generate for `slug`, or undefined when the deck has no such section. */
+export function skeletonHtml(
+  deck: Deck,
+  slug: string,
+  layouts: SkeletonLayouts,
+): string | undefined {
+  const index = deck.sections.findIndex((section) => section.slug === slug);
+  return index < 0 ? undefined : sectionSkeleton(deck, index, layouts);
+}
+
+/** The skeleton of the section at `index`, which must exist. */
+export function sectionSkeleton(deck: Deck, index: number, layouts: SkeletonLayouts): string {
+  const section = deck.sections[index];
+  if (!section) {
+    throw new RangeError(`no section at ${index}`);
+  }
+  const heading = skeletonHeading(section, index, deck.title);
+  const inner =
+    section.beats.length === 0
+      ? renderTitleSlide(heading, layouts)
+      : renderBeatSlide(section, heading, layouts);
+  return `${inner}\n`;
+}
+
+/** The opening tag, naming `layout` only when the theme lays it out; a bare slide is valid. */
+function openSlide(layout: string, layouts: SkeletonLayouts): string {
+  return layouts.has(layout)
+    ? `<section class="slide" data-layout="${layout}">`
+    : `<section class="slide">`;
+}
+
+function renderTitleSlide(heading: string, layouts: SkeletonLayouts): string {
+  return `${openSlide("title", layouts)}
+  <h2 class="slide-title">${escapeHtml(heading)}</h2>
+</section>`;
+}
+
+function renderBeatSlide(section: Section, heading: string, layouts: SkeletonLayouts): string {
+  const items = section.beats
+    .map(
+      (beat, index) =>
+        `    <li data-step="${beatStep(section.beats, index)}">${escapeHtml(beat.title)}</li>`,
+    )
+    .join("\n");
+  return `${openSlide("default", layouts)}
+  <h2 class="slide-title">${escapeHtml(heading)}</h2>
+  <ul>
+${items}
+  </ul>
+</section>`;
+}

package/src/core/slide-draw.ts

@@ -0,0 +1,165 @@
+// Runs in the page; dom.iterable for older compilers, as in slide-measure.ts.
+/// <reference lib="dom" />
+/// <reference lib="dom.iterable" />
+/**
+ * Draws slide scripts' frames. The player calls these directly; pages without
+ * the player (shots, lint --visual, PDF) embed the same functions as source
+ * via `stillDrawScript`, so they reference nothing outside this file and use
+ * only the global `DekSlide` types.
+ */
+import { finishBeat } from "./finish-beat.ts";
+
+/** A beat's motion in ms, keyed like `data-step`; 0 when it has none or it is not positive. */
+export function stepMotionMs(module: DekSlide | undefined, step: string): number {
+  const ms = module?.motion?.[step];
+  return typeof ms === "number" && ms > 0 ? ms : 0;
+}
+
+/**
+ * The one place a slide's `draw` runs: a throw is logged and handed back, never passed to the
+ * player, which keeps presenting whatever a slide does.
+ */
+export function drawFrame(
+  module: DekSlide | undefined,
+  slide: HTMLElement,
+  frame: DekMotionFrame,
+): { error: unknown } | undefined {
+  if (!module || typeof module.draw !== "function") {
+    return undefined;
+  }
+  try {
+    module.draw(slide, frame);
+    return undefined;
+  } catch (error) {
+    console.error(error);
+    return { error };
+  }
+}
+
+/** Draws a beat as it ends, for pages that show a still: thumbnails, previews, shots, PDF. */
+export function drawAtEnd(
+  module: DekSlide | undefined,
+  slide: HTMLElement,
+  index: number,
+  step: string,
+): { t: number; error: unknown } | undefined {
+  const t = stepMotionMs(module, step);
+  const failed = drawFrame(module, slide, { index, step, t });
+  return failed && { t, error: failed.error };
+}
+
+/**
+ * Draws every slide `markBeat` marked, at the end of its beat, and checks each draw as it goes. A
+ * draw that throws leaves the slide as it was before; one that changes the page outside its slide
+ * reaches another slide in the built deck; and one that draws the end of its beat differently after
+ * drawing its start keeps state between calls, which a seek in video and shots cannot replay. Each
+ * is kept in `window.__dekDrawErrors` for whoever measures the page. What the draws change in
+ * attributes, inline styles above all, can be taken back with `window.__dekUndoDraw`, so a
+ * measurement can tell what the script draws from what CSS does.
+ */
+function drawMarkedSlides(): void {
+  const modules = window.__dekSlides ?? {};
+  const errors: NonNullable<Window["__dekDrawErrors"]> = [];
+  window.__dekDrawErrors = errors;
+  const observer = new window.MutationObserver(() => {});
+  observer.observe(document.documentElement, {
+    attributes: true,
+    attributeOldValue: true,
+    characterData: true,
+    childList: true,
+    subtree: true,
+  });
+  const changes: MutationRecord[] = [];
+  /** What the draws since the last call changed, kept for the undo as well. */
+  const taken = (): MutationRecord[] => {
+    const records = observer.takeRecords();
+    changes.push(...records);
+    return records;
+  };
+  const describe = (node: Node): string => {
+    const el = node instanceof Element ? node : node.parentElement;
+    const tag = `<${(el?.tagName ?? "document").toLowerCase()}>`;
+    const other = el?.closest(".slide[data-slug]")?.getAttribute("data-slug");
+    return other ? `the "${other}" slide's ${tag}` : tag;
+  };
+  for (const el of document.querySelectorAll<HTMLElement>(".slide[data-slug]")) {
+    // markBeat writes the step key, so this page never derives one itself.
+    const step = el.getAttribute("data-dek-step");
+    if (step === null) {
+      continue;
+    }
+    const slug = el.getAttribute("data-slug") ?? "";
+    const module = modules[slug];
+    const index = Number(el.getAttribute("data-dek-beat") || 0);
+    taken();
+    const failed = drawAtEnd(module, el, index, step);
+    const t = stepMotionMs(module, step);
+    if (failed) {
+      const { error } = failed;
+      const message = error instanceof Error ? `${error.name}: ${error.message}` : String(error);
+      errors.push({ slug, step, t, kind: "throw", message });
+      continue;
+    }
+    if (typeof module?.draw !== "function") {
+      continue;
+    }
+    const end = el.outerHTML;
+    drawFrame(module, el, { index, step, t: 0 });
+    drawFrame(module, el, { index, step, t });
+    if (el.outerHTML !== end) {
+      errors.push({
+        slug,
+        step,
+        t,
+        kind: "seek",
+        message: "draws the end of the beat differently after drawing its start",
+      });
+    }
+    const outside = new Set(
+      taken()
+        .filter((change) => !el.contains(change.target))
+        .map((change) => describe(change.target)),
+    );
+    for (const where of outside) {
+      errors.push({ slug, step, t, kind: "reach", message: `changes ${where} outside its slide` });
+    }
+  }
+  taken();
+  observer.disconnect();
+  const attributeChanges = changes.filter((change) => change.type === "attributes");
+  if (attributeChanges.length > 0) {
+    window.__dekUndoDraw = () => {
+      // The first old value of each attribute is what it held before any draw ran.
+      const before = new Map<Element, Map<string, string | null>>();
+      for (const change of attributeChanges) {
+        const el = change.target as Element;
+        const attrs = before.get(el) ?? new Map<string, string | null>();
+        if (change.attributeName !== null && !attrs.has(change.attributeName)) {
+          attrs.set(change.attributeName, change.oldValue);
+        }
+        before.set(el, attrs);
+      }
+      for (const [el, attrs] of before) {
+        for (const [name, value] of attrs) {
+          if (value === null) {
+            el.removeAttribute(name);
+          } else {
+            el.setAttribute(name, value);
+          }
+        }
+      }
+    };
+  }
+}
+
+/** What a still page runs: each marked slide drawn at the end of its beat, then every animation ended. */
+export function stillDrawScript(): string {
+  return `(function () {
+${stepMotionMs}
+${drawFrame}
+${drawAtEnd}
+(${drawMarkedSlides})();
+(${finishBeat})();
+})();
+`;
+}