@hajimism/dek 0.3.0 → 0.3.1

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 Release notes for `@hajimism/dek`. From 0.1.0 on, release-please writes this file from the Conventional Commits on `main`.
 
+## [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.1",
   "description": "A build system for talks.",
   "license": "MIT",
   "author": "Hajime Nakagawa (https://github.com/hajimism)",

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/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(),
   };