@hajimism/dek 0.3.0 → 0.3.2

package/CHANGELOG.md

@@ -2,6 +2,33 @@
 
 Release notes for `@hajimism/dek`. From 0.1.0 on, release-please writes this file from the Conventional Commits on `main`.
 
+## [0.3.2](https://github.com/hajimism/dek/compare/v0.3.1...v0.3.2) (2026-10-20)
+
+
+### Bug Fixes
+
+* **pdf:** print each slide as a picture with its text laid over it ([02f49a8](https://github.com/hajimism/dek/commit/02f49a855209e1c4430613fd9358699305bcbb9b))
+* **pdf:** print each slide as a picture with its text laid over it ([b88259d](https://github.com/hajimism/dek/commit/b88259dbcc80ed0a1450cc6bf6422c71120c5802))
+
+
+### Performance
+
+* **pdf:** keep a slide of photographs as a JPEG ([19a9092](https://github.com/hajimism/dek/commit/19a909214b256c8bbcf66a443f00c54c2b43766e))
+
+
+### Documentation
+
+* record the PDF as pictures in ADR 14 and the presenting guide ([c889781](https://github.com/hajimism/dek/commit/c88978175a9b3812f611d8af4de94b2de57556c1))
+* say which slides the PDF keeps as JPEGs, in ADR 14 and the guide ([de733fb](https://github.com/hajimism/dek/commit/de733fb4589d5f6f45f6f9a83b60673d2feab706))
+
+## [0.3.1](https://github.com/hajimism/dek/compare/v0.3.0...v0.3.1) (2026-10-08)
+
+
+### Performance
+
+* **build:** leave the dev server's line out of built files ([1e74ba0](https://github.com/hajimism/dek/commit/1e74ba0fb2512eeecf8ca4ba13a747374b1a651c))
+* **build:** leave the dev server's line out of built files ([93bb4fc](https://github.com/hajimism/dek/commit/93bb4fc56105940cc5b19dc86f890dc9246df850))
+
 ## [0.3.0](https://github.com/hajimism/dek/compare/v0.2.2...v0.3.0) (2026-10-07)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hajimism/dek",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "A build system for talks.",
   "license": "MIT",
   "author": "Hajime Nakagawa (https://github.com/hajimism)",
@@ -61,11 +61,11 @@
     "zod": "^4.6.5"
   },
   "devDependencies": {
-    "@biomejs/biome": "2.5.14",
-    "@happy-dom/global-registrator": "20.14.5",
+    "@biomejs/biome": "2.5.15",
+    "@happy-dom/global-registrator": "21.0.1",
     "@types/bun": "^1.4.2",
-    "happy-dom": "20.14.5",
-    "knip": "6.38.0",
+    "happy-dom": "21.0.1",
+    "knip": "6.41.0",
     "playwright": "^1.63.0",
     "typescript": "^7.0.2",
     "vitepress": "^1.6.4"

package/src/cli/commands.ts

@@ -774,7 +774,8 @@ export const COMMANDS = {
     args: [],
     flags: ["root-dist"],
     usage: ["dekc pdf [deck] [--root-dist]"],
-    summary: "Write dist/<deck>.pdf, one page per slide at its last beat. Needs Playwright.",
+    summary:
+      "Write dist/<deck>.pdf, one page per slide at its last beat: a picture of it with its text\nlaid over it, unseen, to select and search. Needs Playwright.",
     group: "Output",
     overview: [["dekc pdf [--root-dist]", "write a PDF"]],
     agent: ["dekc pdf [--root-dist]"],

package/src/core/document.ts

@@ -142,7 +142,6 @@ export function renderDeckDocument(
     bodyAttrs: `${presenterOpen ? ' class="is-presenter"' : ""}${pageConfigAttrs({
       mode,
       deck: deck.name,
-      live,
       ...(liveToken ? { liveToken } : {}),
     })}`,
     body: `${progress}

package/src/core/page.ts

@@ -45,8 +45,6 @@ export type PageMode = "player" | "presenter" | "video";
 export type PageConfig = {
   mode: PageMode;
   deck: string;
-  /** The dev server's page: it follows the server's socket and events. */
-  live: boolean;
   /** What a presenter page sends as `?token=` on its live channels. */
   liveToken?: string;
 };
@@ -56,18 +54,16 @@ export function pageConfigAttrs(config: PageConfig): string {
   return [
     ` data-mode="${config.mode}"`,
     ` data-deck="${escapeAttr(config.deck)}"`,
-    config.live ? ` data-live="true"` : "",
     config.liveToken ? ` data-live-token="${escapeAttr(config.liveToken)}"` : "",
   ].join("");
 }
 
 /** The settings `pageConfigAttrs` wrote on `body`. */
 export function readPageConfig(body: HTMLElement): PageConfig {
-  const { mode, deck, live, liveToken } = body.dataset;
+  const { mode, deck, liveToken } = body.dataset;
   return {
     mode: mode === "presenter" || mode === "video" ? mode : "player",
     deck: deck ?? "",
-    live: live === "true",
     ...(liveToken ? { liveToken } : {}),
   };
 }

package/src/core/pdf-text.ts

@@ -0,0 +1,191 @@
+/// <reference lib="dom" />
+// What a PDF prints of a slide: a picture of the slide as the browser drew it, with its text laid
+// over it, unseen, so a reader can still select, search, and copy it. Chromium writes a blurred
+// box-shadow and `background-clip: text` into a PDF as soft masks, which Apple's viewers (Preview,
+// Quick Look, Safari, iOS) draw as flat boxes; a picture looks the same in every viewer.
+
+/** The slides of the print document, one PDF page each. */
+export const PDF_SLIDES = "#deck > .slide";
+
+/**
+ * Leaves each slide's text where it was laid out and paints nothing else: no color, no
+ * background, no border, no shadow, no picture. Only paint changes, never layout, so the text lies
+ * where the picture under it shows it. In a layer, so that these `!important` declarations win
+ * over any the theme or a slide writes, whatever their selectors weigh.
+ */
+export const PDF_TEXT_CSS = `@layer dek-pdf-text {
+  #deck > .slide,
+  #deck > .slide::before,
+  #deck > .slide::after,
+  #deck > .slide *,
+  #deck > .slide *::before,
+  #deck > .slide *::after,
+  #deck > .slide *::marker,
+  #deck > .slide *::first-letter,
+  #deck > .slide *::first-line {
+    color: transparent !important;
+    -webkit-text-fill-color: transparent !important;
+    -webkit-text-stroke-color: transparent !important;
+    text-decoration-color: transparent !important;
+    text-emphasis-color: transparent !important;
+    text-shadow: none !important;
+    border-color: transparent !important;
+    border-image: none !important;
+    outline-color: transparent !important;
+    column-rule-color: transparent !important;
+    box-shadow: none !important;
+    transition: none !important;
+  }
+  #deck > .slide::before,
+  #deck > .slide::after,
+  #deck > .slide *,
+  #deck > .slide *::before,
+  #deck > .slide *::after,
+  #deck > .slide *::first-letter,
+  #deck > .slide *::first-line {
+    background: none !important;
+  }
+  #deck > .slide {
+    opacity: 1 !important;
+    mix-blend-mode: normal !important;
+  }
+  #deck > .slide :is(img, video, canvas, iframe, embed, object, input, select, textarea, button, progress, meter),
+  #deck > .slide svg image {
+    opacity: 0 !important;
+  }
+  #deck > .slide svg * {
+    fill: transparent !important;
+    stroke: transparent !important;
+  }
+}`;
+
+/**
+ * Where each slide lies on the whole page, for its picture to be shot.
+ *
+ * Runs in the page, shipped by `page.evaluate`, so it references nothing outside itself.
+ */
+export function slideBoxesInPage(
+  selector: string,
+): { x: number; y: number; width: number; height: number }[] {
+  return [...document.querySelectorAll(selector)].map((slide) => {
+    const box = slide.getBoundingClientRect();
+    return {
+      x: box.left + window.scrollX,
+      y: box.top + window.scrollY,
+      width: box.width,
+      height: box.height,
+    };
+  });
+}
+
+/**
+ * Takes every paint but the text away from the page's slides, once their pictures are shot. A
+ * filter or a backdrop filter would draw over the picture, or turn the text under it into pixels,
+ * so each goes; `will-change` keeps the box it made for its positioned descendants, so they stay
+ * where they were laid out.
+ *
+ * Runs in the page, shipped by `page.evaluate`, so it references nothing outside itself.
+ */
+export function keepOnlyTextInPage({ selector, css }: { selector: string; css: string }): void {
+  for (const slide of document.querySelectorAll(selector)) {
+    for (const el of [slide, ...slide.querySelectorAll("*")]) {
+      if (!(el instanceof HTMLElement || el instanceof SVGElement)) {
+        continue;
+      }
+      const style = getComputedStyle(el);
+      const effects = (["filter", "backdrop-filter"] as const).filter(
+        (property) => style.getPropertyValue(property) !== "none",
+      );
+      if (effects.length === 0) {
+        continue;
+      }
+      const hints = style.willChange === "auto" ? [] : [style.willChange];
+      for (const property of effects) {
+        el.style.setProperty(property, "none", "important");
+      }
+      el.style.setProperty("will-change", [...hints, ...effects].join(", "), "important");
+    }
+  }
+  const sheet = document.createElement("style");
+  sheet.textContent = css;
+  document.head.append(sheet);
+}
+
+/** How good a JPEG a photograph's slide is kept as: near the PNG to the eye, at under half its size. */
+export const PDF_JPEG_QUALITY = 90;
+
+/** How much of a slide its photographs must cover for the slide to be kept as a JPEG. */
+const PHOTO_SHARE = 0.1;
+
+/**
+ * Which of a slide's two pictures the PDF keeps: the JPEG for a slide that shows photographs,
+ * where it is smaller, and the PNG for the rest. Type and flat shapes keep their edges in a PNG;
+ * a JPEG blurs them, so a slide of them is never kept as one, however much smaller it would be.
+ */
+export function pdfPictureType(
+  sizes: { png: number; jpeg: number },
+  photoShare: number,
+): "png" | "jpeg" {
+  return photoShare >= PHOTO_SHARE && sizes.jpeg < sizes.png ? "jpeg" : "png";
+}
+
+/**
+ * How much of each slide raster pictures cover, 0 to 1: images, video, and canvases, and
+ * backgrounds drawn from a picture's URL. SVG is shapes, not a photograph, and does not count.
+ *
+ * Runs in the page, shipped by `page.evaluate`, so it references nothing outside itself.
+ */
+export function photoSharesInPage(selector: string): number[] {
+  const vector = (url: string) => /^data:image\/svg|\.svg(?:[?#]|$)/i.test(url);
+  return [...document.querySelectorAll(selector)].map((slide) => {
+    const frame = slide.getBoundingClientRect();
+    let covered = 0;
+    for (const el of [slide, ...slide.querySelectorAll("*")]) {
+      const style = getComputedStyle(el);
+      if (style.visibility !== "visible" || style.display === "none") {
+        continue;
+      }
+      const raster =
+        el instanceof HTMLImageElement
+          ? !vector(el.currentSrc || el.src)
+          : el instanceof HTMLVideoElement ||
+            el instanceof HTMLCanvasElement ||
+            [...style.backgroundImage.matchAll(/url\("?([^")]*)"?\)/g)].some(
+              ([, url]) => url !== undefined && !vector(url),
+            );
+      if (!raster) {
+        continue;
+      }
+      const box = el.getBoundingClientRect();
+      const width = Math.min(box.right, frame.right) - Math.max(box.left, frame.left);
+      const height = Math.min(box.bottom, frame.bottom) - Math.max(box.top, frame.top);
+      covered += Math.max(0, width) * Math.max(0, height);
+    }
+    return Math.min(1, covered / (frame.width * frame.height));
+  });
+}
+
+/**
+ * Sets a slide's picture, a `data:` URL, under its text: the `index`th of the page's slides.
+ * One slide a call, so no message to the page carries more than one picture.
+ *
+ * Runs in the page, shipped by `page.evaluate`, so it references nothing outside itself.
+ */
+export function setSlidePictureInPage({
+  selector,
+  index,
+  picture,
+}: {
+  selector: string;
+  index: number;
+  picture: string;
+}): void {
+  const slide = document.querySelectorAll(selector)[index];
+  if (slide instanceof HTMLElement) {
+    slide.style.setProperty(
+      "background",
+      `url("${picture}") 0 0 / 100% 100% no-repeat border-box`,
+      "important",
+    );
+  }
+}

package/src/core/playwright-module.d.ts

@@ -3,13 +3,18 @@ declare module "playwright" {
   export type Page = {
     goto(url: string): Promise<unknown>;
     setContent(html: string, options?: { waitUntil?: string }): Promise<void>;
-    emulateMedia(options: { reducedMotion?: "reduce" | "no-preference" }): Promise<void>;
+    emulateMedia(options: {
+      media?: "screen" | "print";
+      reducedMotion?: "reduce" | "no-preference";
+    }): Promise<void>;
     setViewportSize(size: Viewport): Promise<void>;
     evaluate<T, A = unknown>(fn: (arg: A) => T | Promise<T>, arg?: A): Promise<T>;
     screenshot(options: {
       path?: string;
       fullPage?: boolean;
+      clip?: { x: number; y: number; width: number; height: number };
       type?: "png" | "jpeg";
+      quality?: number;
     }): Promise<Buffer>;
     addScriptTag(options: { content: string }): Promise<unknown>;
     pdf(options: {

package/src/core/playwright-visual.ts

@@ -11,6 +11,16 @@ import {
   samePlace,
 } from "./overflow.ts";
 import { visitInPages } from "./page-pool.ts";
+import {
+  keepOnlyTextInPage,
+  PDF_JPEG_QUALITY,
+  PDF_SLIDES,
+  PDF_TEXT_CSS,
+  pdfPictureType,
+  photoSharesInPage,
+  setSlidePictureInPage,
+  slideBoxesInPage,
+} from "./pdf-text.ts";
 import type {
   ContrastFinding,
   ContrastOrigin,
@@ -50,12 +60,13 @@ export async function runVisualRequest<R extends VisualRequest>(
   browser: Browser,
   request: R,
 ): Promise<ResponseTo<R>> {
-  // A PPTX's pictures are shown full screen, so they are drawn at twice the slide's size. A deck is
-  // self-contained (DEK020), so the page needs no network, and a ref's slide scripts get none.
+  // A PPTX's and a PDF's pictures are shown full screen, so they are drawn at twice the slide's
+  // size. A deck is self-contained (DEK020), so the page needs no network, and a ref's slide
+  // scripts get none.
   const context = await browser.newContext({
     viewport: request.viewport,
     offline: true,
-    ...(request.kind === "pptx" ? { deviceScaleFactor: 2 } : {}),
+    ...(request.kind === "pptx" || request.kind === "pdf" ? { deviceScaleFactor: 2 } : {}),
   });
   try {
     return (await answer(context, request)) as ResponseTo<R>;
@@ -83,10 +94,35 @@ function answer(context: BrowserContext, request: VisualRequest) {
   }
 }
 
-/** The whole print document as one PDF, a page per slide. */
+/**
+ * The whole print document as one PDF, a page per slide: each slide shot as print draws it, then
+ * printed as that picture with its text laid over it, unseen.
+ */
 async function printPdf(context: BrowserContext, request: PdfRequest): Promise<DoneResponse> {
   const page = await context.newPage();
   await page.setContent(request.html, { waitUntil: "load" });
+  await page.evaluate(() => document.fonts.ready.then(() => undefined));
+  await page.emulateMedia({ media: "print" });
+  // A slide that shows photographs is shot as a JPEG too, and kept as one where it is smaller.
+  const shares = await page.evaluate(photoSharesInPage, PDF_SLIDES);
+  const pictures: string[] = [];
+  for (const [index, clip] of (await page.evaluate(slideBoxesInPage, PDF_SLIDES)).entries()) {
+    const share = shares[index] ?? 0;
+    const png = await page.screenshot({ clip, fullPage: true });
+    const jpeg =
+      pdfPictureType({ png: png.length, jpeg: 0 }, share) === "jpeg"
+        ? await page.screenshot({ clip, fullPage: true, type: "jpeg", quality: PDF_JPEG_QUALITY })
+        : undefined;
+    const kept =
+      jpeg && pdfPictureType({ png: png.length, jpeg: jpeg.length }, share) === "jpeg"
+        ? { type: "jpeg", data: jpeg }
+        : { type: "png", data: png };
+    pictures.push(`data:image/${kept.type};base64,${kept.data.toString("base64")}`);
+  }
+  await page.evaluate(keepOnlyTextInPage, { selector: PDF_SLIDES, css: PDF_TEXT_CSS });
+  for (const [index, picture] of pictures.entries()) {
+    await page.evaluate(setSlidePictureInPage, { selector: PDF_SLIDES, index, picture });
+  }
   await page.pdf({
     path: request.pdfPath,
     width: `${request.viewport.width}px`,

package/src/core/playwright.ts

@@ -55,7 +55,10 @@ export type PagesRequest = {
   sheets?: SheetSpec[];
 };
 
-/** One page printed to `pdfPath`, a PDF page per slide. */
+/**
+ * One page printed to `pdfPath`, a PDF page per slide: each slide a picture at twice its size,
+ * with its text laid over it, unseen, to select and search.
+ */
 export type PdfRequest = {
   kind: "pdf";
   viewport: Viewport;

package/src/runtime/browser-live.ts

@@ -0,0 +1,6 @@
+// The player of the dev server's pages: the same player, with its line to the server.
+
+import { createDevLine } from "./dev-line.ts";
+import { startPlayer } from "./start.ts";
+
+startPlayer(createDevLine);

package/src/runtime/browser.ts

@@ -1,207 +1,5 @@
-/// <reference lib="dom" />
+// The player of a file that stands alone: a build, a video, a shot. It has no dev server to reach.
 
-import { isLiveEvent } from "../core/live-protocol.ts";
-import { ANNOTATIONS_CHANGED, PAGE_ID, readPageConfig } from "../core/page.ts";
-import { deckStops, moveTarget, positionsEqual } from "../core/position.ts";
-import type { PresenterSlide } from "../core/presenter-state.ts";
-import type { Position } from "../core/step.ts";
-import { createDeckControl } from "./deck-control.ts";
-import { bindInput } from "./input.ts";
-import { createLaserView, type LaserView } from "./laser-view.ts";
-import { applyLiveEvent, hydrateLiveEvent } from "./live.ts";
-import { documentLiveHost } from "./live-host.ts";
-import { createMarksView } from "./marks-view.ts";
-import { createNavigator } from "./navigator.ts";
-import { createPresenterView } from "./presenter-view.ts";
-import { createRailView } from "./rail-view.ts";
-import { createRehearseController, fetchRehearsal } from "./rehearse.ts";
-import { deckChannelName, deckUrl, liveTokenQuery } from "./routes.ts";
-import { createStage } from "./stage.ts";
+import { startPlayer } from "./start.ts";
 
-const dataEl = document.getElementById(PAGE_ID.data);
-if (dataEl?.textContent) {
-  const page = readPageConfig(document.body);
-  const slides = JSON.parse(dataEl.textContent) as PresenterSlide[];
-  const deck = deckStops(slides);
-  const stage = createStage({ slides, deck, videoMode: page.mode === "video" });
-  const presenter = createPresenterView({ slides, deck, stage, mode: page.mode });
-
-  function fitAll(): void {
-    stage.fit();
-    presenter.fit();
-    rail.fit();
-  }
-
-  /** Draw every view at `pos`. */
-  function render(pos: Position): void {
-    stage.render(pos);
-    presenter.render(pos);
-    rail.markCurrent(pos.slideIndex);
-    marks?.render(pos);
-  }
-
-  /**
-   * The first key or move takes the key hint away. Removing it also drops its animation, which
-   * the first move would otherwise wait on before it settles.
-   */
-  function dismissKeyHint(): void {
-    document.getElementById(PAGE_ID.hint)?.remove();
-  }
-
-  const rehearse = createRehearseController({
-    load: () =>
-      fetchRehearsal(location.pathname, {
-        fetch: (input, init) => fetch(input, init),
-        audio: (src) => new Audio(src),
-      }),
-    go: (position, origin) => nav.go(position, origin),
-    current: () => nav.target(),
-  });
-  const control = createDeckControl({ go: (next, origin) => nav.go(next, origin), rehearse });
-
-  // A video shows the talk as narrated; nobody points at it.
-  const laser: LaserView | undefined =
-    page.mode === "video"
-      ? undefined
-      : createLaserView({
-          current: () => nav.position().slideIndex,
-          send: (pointer) => nav.point(pointer),
-        });
-
-  // Only the dev server has a socket to follow; a built file on a static host must not dial one.
-  const socketUrl = page.live
-    ? `${location.protocol === "https:" ? "wss:" : "ws:"}//${location.host}${deckUrl(location.pathname, { kind: "socket" })}${liveTokenQuery(page.liveToken)}`
-    : undefined;
-  const nav = createNavigator({
-    deck,
-    channelName: deckChannelName(
-      page.deck,
-      deck.map((slide) => slide.slug),
-    ),
-    ...(socketUrl ? { socketUrl } : {}),
-    present: stage.present,
-    hurry: stage.hurry,
-    beforeMove: dismissKeyHint,
-    onMove: (from, to) => {
-      render(to);
-      if (from.slideIndex !== to.slideIndex) {
-        stage.announce(to);
-        laser?.sync();
-      }
-      // A hashchange echoing this same position must not cut a running animation short.
-      if (!positionsEqual(from, to)) {
-        stage.showMove(from, to);
-      }
-    },
-    afterMove: presenter.startClock,
-    route: (next) => control.request(next, "remote"),
-    ...(laser ? { onPointer: laser.receive } : {}),
-  });
-
-  const marks = createMarksView({
-    url: `${deckUrl(location.pathname, { kind: "marks" })}${liveTokenQuery(page.liveToken)}`,
-    current: () => nav.position(),
-    fetch: (input, init) => fetch(input, init),
-  });
-
-  const rail = createRailView({
-    slides,
-    stage,
-    onPick: (slideIndex) => control.request({ slideIndex, beatIndex: 0 }, "local"),
-    onResize: fitAll,
-  });
-
-  function setPresenterOpen(open: boolean): void {
-    presenter.setOpen(open);
-    fitAll();
-    render(nav.position());
-  }
-
-  bindInput({
-    onKey: dismissKeyHint,
-    togglePresenter: () => {
-      if (!presenter.available()) {
-        return false;
-      }
-      setPresenterOpen(!presenter.isOpen());
-      return true;
-    },
-    toggleFullscreen: () => {
-      if (document.fullscreenElement) {
-        void document.exitFullscreen?.().catch(() => undefined);
-      } else {
-        void document.documentElement.requestFullscreen?.().catch(() => undefined);
-      }
-    },
-    toggleRail: () => {
-      if (!rail.available() || presenter.isOpen()) {
-        return false;
-      }
-      rail.setOpen(!rail.isOpen());
-      return true;
-    },
-    togglePlay: control.togglePlay,
-    toggleLaser: () => laser?.toggle() ?? false,
-    toggleMark: () => marks?.toggle() ?? false,
-    pointing: () => laser?.isOn() ?? false,
-    move: (move) => control.request(moveTarget(move, nav.target(), deck), "local"),
-  });
-
-  window.addEventListener("resize", fitAll);
-  window.addEventListener("beforeprint", () => stage.setPrinting(true, nav.position()));
-  window.addEventListener("afterprint", () => stage.setPrinting(false, nav.position()));
-  matchMedia("print").addEventListener?.("change", (event) =>
-    stage.setPrinting(event.matches, nav.position()),
-  );
-
-  rail.fill();
-  fitAll();
-  render(nav.position());
-  // A hash that named a beat past the slide's last now says where the deck opened.
-  nav.writeHash("replace");
-  stage.showMotion(nav.position(), page.mode === "video" ? "hold" : "final");
-  // biome-ignore lint/complexity/useLiteralKeys: video recorder looks up window["dekGo"]
-  window["dekGo"] = (next) => nav.go(next, "capture");
-  // The video recorder seeks slide scripts the way it seeks Web Animations.
-  // biome-ignore lint/complexity/useLiteralKeys: video recorder looks up window["dekMotion"]
-  window["dekMotion"] = stage.motion;
-
-  const rehearseMode = new URLSearchParams(location.search).has("rehearse");
-  if (rehearseMode) {
-    void rehearse.load();
-  }
-
-  const liveHost = documentLiveHost();
-  // Keep a string key so minify does not rename the hook liveReloadScript calls.
-  // biome-ignore lint/complexity/useLiteralKeys: liveReloadScript looks up window["dekLive"]
-  window["dekLive"] = async (raw: unknown) => {
-    if (!isLiveEvent(raw)) {
-      location.reload();
-      return;
-    }
-    if (raw.type === "timeline") {
-      if (rehearseMode) {
-        await rehearse.load();
-      }
-      return;
-    }
-    if (raw.type === "annotations") {
-      document.dispatchEvent(new Event(ANNOTATIONS_CHANGED));
-      return;
-    }
-    const event = await hydrateLiveEvent(raw, location.pathname);
-    if (!event) {
-      location.reload();
-      return;
-    }
-    if (applyLiveEvent(event, liveHost).reload) {
-      location.reload();
-      return;
-    }
-    // Whatever changed, drawing the beat again puts it back as it stood.
-    const pos = nav.position();
-    rail.fill();
-    render(pos);
-    stage.showMotion(pos, "final");
-  };
-}
+startPlayer();

package/src/runtime/deck-control.ts

@@ -18,7 +18,8 @@ export type DeckControl = {
  */
 export function createDeckControl(options: {
   go: (next: Position, origin: RequestOrigin) => Promise<void>;
-  rehearse: Pick<RehearseController, "ready" | "move" | "toggle">;
+  /** The rehearsal the dev server can load; a file that stands alone has none. */
+  rehearse?: Pick<RehearseController, "ready" | "move" | "toggle">;
 }): DeckControl {
   const { go, rehearse } = options;
   return {
@@ -26,14 +27,14 @@ export function createDeckControl(options: {
       if (!next) {
         return;
       }
-      if (rehearse.ready()) {
+      if (rehearse?.ready()) {
         rehearse.move(next, origin);
       } else {
         void go(next, origin);
       }
     },
     togglePlay() {
-      if (!rehearse.ready()) {
+      if (!rehearse?.ready()) {
         return false;
       }
       rehearse.toggle();

package/src/runtime/dev-line.ts

@@ -0,0 +1,110 @@
+/// <reference lib="dom" />
+
+import { isLiveEvent } from "../core/live-protocol.ts";
+import { ANNOTATIONS_CHANGED, type PageConfig } from "../core/page.ts";
+import type { Position } from "../core/step.ts";
+import { applyLiveEvent, hydrateLiveEvent } from "./live.ts";
+import { documentLiveHost } from "./live-host.ts";
+import { createMarksView, type MarksView } from "./marks-view.ts";
+import type { GoOrigin } from "./navigator.ts";
+import { createRehearseController, fetchRehearsal, type RehearseController } from "./rehearse.ts";
+import { deckUrl, liveTokenQuery } from "./routes.ts";
+import { createPositionSocket, type PositionHandlers, type PositionSocket } from "./socket.ts";
+
+/**
+ * What the page has of the dev server: the position socket, the marks, the rehearsal, and the
+ * live updates. Only the player the dev server embeds is built with it; a file that stands alone
+ * has no server to reach, so its player never imports this module.
+ */
+export type DevLine = {
+  /** Open the position socket, for the navigator. */
+  connect: (handlers: PositionHandlers) => PositionSocket;
+  rehearse: RehearseController;
+  /** Only the presenter bar has the mark button. */
+  marks: MarksView | undefined;
+  /**
+   * Load the rehearsal the URL asks for, and take the server's live updates from here on.
+   * `redraw` puts the beat back as it stood once one has changed the page.
+   */
+  start(redraw: () => void): void;
+};
+
+export type CreateDevLine = typeof createDevLine;
+
+export function createDevLine(options: {
+  page: PageConfig;
+  /** Move the deck. */
+  go: (position: Position, origin: GoOrigin) => Promise<void>;
+  /** Where the deck is headed. */
+  target: () => Position;
+  /** What is on screen. */
+  position: () => Position;
+}): DevLine {
+  const token = liveTokenQuery(options.page.liveToken);
+  const route = (kind: "socket" | "marks"): string =>
+    `${deckUrl(location.pathname, { kind })}${token}`;
+
+  const rehearse = createRehearseController({
+    load: () =>
+      fetchRehearsal(location.pathname, {
+        fetch: (input, init) => fetch(input, init),
+        audio: (src) => new Audio(src),
+      }),
+    go: options.go,
+    current: options.target,
+  });
+
+  const marks = createMarksView({
+    url: route("marks"),
+    current: options.position,
+    fetch: (input, init) => fetch(input, init),
+  });
+
+  function connect(handlers: PositionHandlers): PositionSocket {
+    const url = `${location.protocol === "https:" ? "wss:" : "ws:"}//${location.host}${route("socket")}`;
+    return createPositionSocket({
+      connect: () => new WebSocket(url),
+      ...handlers,
+      setTimer: (fn, ms) => window.setTimeout(fn, ms),
+      clearTimer: (id) => window.clearTimeout(id),
+    });
+  }
+
+  function start(redraw: () => void): void {
+    const rehearseMode = new URLSearchParams(location.search).has("rehearse");
+    if (rehearseMode) {
+      void rehearse.load();
+    }
+    const liveHost = documentLiveHost();
+    // Keep a string key so minify does not rename the hook liveReloadScript calls.
+    // biome-ignore lint/complexity/useLiteralKeys: liveReloadScript looks up window["dekLive"]
+    window["dekLive"] = async (raw: unknown) => {
+      if (!isLiveEvent(raw)) {
+        location.reload();
+        return;
+      }
+      if (raw.type === "timeline") {
+        if (rehearseMode) {
+          await rehearse.load();
+        }
+        return;
+      }
+      if (raw.type === "annotations") {
+        document.dispatchEvent(new Event(ANNOTATIONS_CHANGED));
+        return;
+      }
+      const event = await hydrateLiveEvent(raw, location.pathname);
+      if (!event) {
+        location.reload();
+        return;
+      }
+      if (applyLiveEvent(event, liveHost).reload) {
+        location.reload();
+        return;
+      }
+      redraw();
+    };
+  }
+
+  return { connect, rehearse, marks, start };
+}

package/src/runtime/navigator.ts

@@ -18,7 +18,7 @@ import {
 } from "../core/position.ts";
 import type { Position } from "../core/step.ts";
 import { applyIncomingPosition, createGuardedGo } from "./go.ts";
-import { createPositionSocket, type PositionSocket } from "./socket.ts";
+import type { PositionHandlers, PositionSocket } from "./socket.ts";
 
 /**
  * Where a move came from. Local moves, and the rehearsal clock's, are published to peers; remote
@@ -52,8 +52,8 @@ type GoRequest = { position: Position; origin: GoOrigin };
 export function createNavigator(options: {
   deck: DeckStops;
   channelName: string;
-  /** The dev server's position socket; a built file on a static host has none. */
-  socketUrl?: string;
+  /** Open the dev server's position socket; a file that stands alone has none to open. */
+  connect?: (handlers: PositionHandlers) => PositionSocket;
   /**
    * Draw the move from `from` to `to`. `apply` puts it on screen, perhaps inside a transition;
    * the promise settles once the move has played.
@@ -156,14 +156,10 @@ export function createNavigator(options: {
       receive(next);
     }
   });
-  if (options.socketUrl) {
-    const url = options.socketUrl;
-    remote = createPositionSocket({
-      connect: () => new WebSocket(url),
+  if (options.connect) {
+    remote = options.connect({
       onPosition: receive,
       ...(options.onPointer ? { onPointer: options.onPointer } : {}),
-      setTimer: (fn, ms) => window.setTimeout(fn, ms),
-      clearTimer: (id) => window.clearTimeout(id),
     });
     // A page that is really going away must not dial back in; one kept for Back reconnects.
     window.addEventListener("pagehide", (event) => {

package/src/runtime/player.ts

@@ -3,14 +3,24 @@ import { join } from "node:path";
 export { liveReloadScript } from "./live-reload.ts";
 
 let player: Promise<string> | undefined;
+let livePlayer: Promise<string> | undefined;
 let annotate: Promise<string> | undefined;
 
-/** The player every deck page runs. */
+/** The player a file that stands alone runs: a build, a video, a shot. */
 export function playerScript(): Promise<string> {
   player ??= compile("browser.ts", "player");
   return player;
 }
 
+/**
+ * The player the dev server's pages run: the same player, and its line to the server besides,
+ * which a file that stands alone has no server for.
+ */
+export function livePlayerScript(): Promise<string> {
+  livePlayer ??= compile("browser-live.ts", "live player");
+  return livePlayer;
+}
+
 /** Annotate mode, which only the dev server's pages for the speaker run, after the player. */
 export function annotateScript(): Promise<string> {
   annotate ??= compile("annotate.ts", "annotate mode");

package/src/runtime/socket.ts

@@ -46,6 +46,13 @@ export type PositionSocket = {
   close(): void;
 };
 
+/** Where what a peer sends over the line goes. */
+export type PositionHandlers = {
+  onPosition: (position: Position) => void;
+  /** Where a presenter's laser points, or null once it went away. */
+  onPointer?: (pointer: Pointer | null) => void;
+};
+
 /**
  * The deck's line to the server, which relays positions between the presenter, the audience,
  * and a phone remote, and where the presenter's laser points. Like an EventSource, it reconnects by itself after a drop (a restarted
@@ -55,15 +62,14 @@ export type PositionSocket = {
  * missed whatever moved meanwhile. A move this deck made while away is sent instead, and that
  * greeting, if it is still where the deck was when the line dropped, is stale and passed over.
  */
-export function createPositionSocket(options: {
-  connect: () => SocketLike;
-  onPosition: (position: Position) => void;
-  /** Where a presenter's laser points, or null once it went away. */
-  onPointer?: (pointer: Pointer | null) => void;
-  setTimer: (fn: () => void, ms: number) => number;
-  clearTimer: (id: number) => void;
-  random?: () => number;
-}): PositionSocket {
+export function createPositionSocket(
+  options: PositionHandlers & {
+    connect: () => SocketLike;
+    setTimer: (fn: () => void, ms: number) => number;
+    clearTimer: (id: number) => void;
+    random?: () => number;
+  },
+): PositionSocket {
   let socket: SocketLike | undefined;
   let timer: number | undefined;
   let attempt = 0;

package/src/runtime/start.ts

@@ -0,0 +1,171 @@
+/// <reference lib="dom" />
+
+import { PAGE_ID, readPageConfig } from "../core/page.ts";
+import { deckStops, moveTarget, positionsEqual } from "../core/position.ts";
+import type { PresenterSlide } from "../core/presenter-state.ts";
+import type { Position } from "../core/step.ts";
+import { createDeckControl } from "./deck-control.ts";
+import type { CreateDevLine } from "./dev-line.ts";
+import { bindInput } from "./input.ts";
+import { createLaserView, type LaserView } from "./laser-view.ts";
+import { createNavigator } from "./navigator.ts";
+import { createPresenterView } from "./presenter-view.ts";
+import { createRailView } from "./rail-view.ts";
+import { deckChannelName } from "./routes.ts";
+import { createStage } from "./stage.ts";
+
+/**
+ * Start the player on the page. The dev server's player passes `createDevLine`, its line to the
+ * server; a file that stands alone has no server, and its player is built without one.
+ */
+export function startPlayer(createDevLine?: CreateDevLine): void {
+  const dataEl = document.getElementById(PAGE_ID.data);
+  if (!dataEl?.textContent) {
+    return;
+  }
+  const page = readPageConfig(document.body);
+  const slides = JSON.parse(dataEl.textContent) as PresenterSlide[];
+  const deck = deckStops(slides);
+  const stage = createStage({ slides, deck, videoMode: page.mode === "video" });
+  const presenter = createPresenterView({ slides, deck, stage, mode: page.mode });
+
+  function fitAll(): void {
+    stage.fit();
+    presenter.fit();
+    rail.fit();
+  }
+
+  /** Draw every view at `pos`. */
+  function render(pos: Position): void {
+    stage.render(pos);
+    presenter.render(pos);
+    rail.markCurrent(pos.slideIndex);
+    marks?.render(pos);
+  }
+
+  /**
+   * The first key or move takes the key hint away. Removing it also drops its animation, which
+   * the first move would otherwise wait on before it settles.
+   */
+  function dismissKeyHint(): void {
+    document.getElementById(PAGE_ID.hint)?.remove();
+  }
+
+  const dev = createDevLine?.({
+    page,
+    go: (position, origin) => nav.go(position, origin),
+    target: () => nav.target(),
+    position: () => nav.position(),
+  });
+  const control = createDeckControl({
+    go: (next, origin) => nav.go(next, origin),
+    ...(dev ? { rehearse: dev.rehearse } : {}),
+  });
+
+  // A video shows the talk as narrated; nobody points at it.
+  const laser: LaserView | undefined =
+    page.mode === "video"
+      ? undefined
+      : createLaserView({
+          current: () => nav.position().slideIndex,
+          send: (pointer) => nav.point(pointer),
+        });
+
+  const nav = createNavigator({
+    deck,
+    channelName: deckChannelName(
+      page.deck,
+      deck.map((slide) => slide.slug),
+    ),
+    ...(dev ? { connect: dev.connect } : {}),
+    present: stage.present,
+    hurry: stage.hurry,
+    beforeMove: dismissKeyHint,
+    onMove: (from, to) => {
+      render(to);
+      if (from.slideIndex !== to.slideIndex) {
+        stage.announce(to);
+        laser?.sync();
+      }
+      // A hashchange echoing this same position must not cut a running animation short.
+      if (!positionsEqual(from, to)) {
+        stage.showMove(from, to);
+      }
+    },
+    afterMove: presenter.startClock,
+    route: (next) => control.request(next, "remote"),
+    ...(laser ? { onPointer: laser.receive } : {}),
+  });
+
+  const marks = dev?.marks;
+
+  const rail = createRailView({
+    slides,
+    stage,
+    onPick: (slideIndex) => control.request({ slideIndex, beatIndex: 0 }, "local"),
+    onResize: fitAll,
+  });
+
+  function setPresenterOpen(open: boolean): void {
+    presenter.setOpen(open);
+    fitAll();
+    render(nav.position());
+  }
+
+  bindInput({
+    onKey: dismissKeyHint,
+    togglePresenter: () => {
+      if (!presenter.available()) {
+        return false;
+      }
+      setPresenterOpen(!presenter.isOpen());
+      return true;
+    },
+    toggleFullscreen: () => {
+      if (document.fullscreenElement) {
+        void document.exitFullscreen?.().catch(() => undefined);
+      } else {
+        void document.documentElement.requestFullscreen?.().catch(() => undefined);
+      }
+    },
+    toggleRail: () => {
+      if (!rail.available() || presenter.isOpen()) {
+        return false;
+      }
+      rail.setOpen(!rail.isOpen());
+      return true;
+    },
+    togglePlay: control.togglePlay,
+    toggleLaser: () => laser?.toggle() ?? false,
+    toggleMark: () => marks?.toggle() ?? false,
+    pointing: () => laser?.isOn() ?? false,
+    move: (move) => control.request(moveTarget(move, nav.target(), deck), "local"),
+  });
+
+  window.addEventListener("resize", fitAll);
+  window.addEventListener("beforeprint", () => stage.setPrinting(true, nav.position()));
+  window.addEventListener("afterprint", () => stage.setPrinting(false, nav.position()));
+  matchMedia("print").addEventListener?.("change", (event) =>
+    stage.setPrinting(event.matches, nav.position()),
+  );
+
+  rail.fill();
+  fitAll();
+  render(nav.position());
+  // A hash that named a beat past the slide's last now says where the deck opened.
+  nav.writeHash("replace");
+  stage.showMotion(nav.position(), page.mode === "video" ? "hold" : "final");
+  // biome-ignore lint/complexity/useLiteralKeys: video recorder looks up window["dekGo"]
+  window["dekGo"] = (next) => nav.go(next, "capture");
+  // The video recorder seeks slide scripts the way it seeks Web Animations.
+  // biome-ignore lint/complexity/useLiteralKeys: video recorder looks up window["dekMotion"]
+  window["dekMotion"] = stage.motion;
+
+  // Whatever a live update changed, drawing the beat again puts it back as it stood.
+  dev?.start(() => {
+    const pos = nav.position();
+    rail.fill();
+    render(pos);
+    stage.showMotion(pos, "final");
+  });
+}

package/src/server/dev.ts

@@ -2,7 +2,7 @@ import { join } from "node:path";
 import { DekError } from "../core/error.ts";
 import type { PlaywrightRunner } from "../core/playwright.ts";
 import { locateDeck, type Project, resolveProject } from "../core/resolve.ts";
-import { annotateScript, liveReloadScript, playerScript } from "../runtime/player.ts";
+import { annotateScript, livePlayerScript, liveReloadScript } from "../runtime/player.ts";
 import {
   clearance,
   mayRead,
@@ -69,7 +69,7 @@ export async function startDevServer(options: DevServerOptions): Promise<DevServ
   const { scopedDeckName, deckDir } = serverScope(project, options);
   const access = accessFor(options);
   const embed = {
-    playerScript: await playerScript(),
+    playerScript: await livePlayerScript(),
     liveReloadScript: liveReloadScript(),
     annotateScript: await annotateScript(),
   };