@hajimism/dek 0.1.0

package/src/core/voice.ts

@@ -0,0 +1,321 @@
+import { createHash } from "node:crypto";
+import { existsSync, readFileSync } from "node:fs";
+import { basename, dirname, join } from "node:path";
+import { z } from "zod";
+import type { VoiceDict } from "./cue.ts";
+import { deckPaths } from "./deck-paths.ts";
+import { DekError } from "./error.ts";
+import { cacheDir, deckProjectRoot } from "./path.ts";
+import { readDeckFile } from "./resolve.ts";
+import { writeInside } from "./safe-fs.ts";
+import type { Deck } from "./schema.ts";
+import { lastStop, type Position, resolveStop } from "./step.ts";
+import {
+  type BeatTiming,
+  DEFAULT_LEAD_MS,
+  DEFAULT_PAUSE,
+  type PauseConfig,
+  type Timeline,
+  type Utterance,
+} from "./timeline.ts";
+import { parseTomlWith } from "./zod.ts";
+
+export type VoiceSettings = {
+  engine: string;
+  speaker: string;
+  speed: number;
+  pause: PauseConfig;
+  lead: number;
+  /** Keyed like the URL hash: `slug`, `slug/beat-id`, or `slug/2`. */
+  beats: Record<string, BeatTiming>;
+};
+
+export type VoiceResolved = {
+  styleId: number;
+  engineVersion: string;
+  speaker: string;
+};
+
+const VoiceToml = z.object({
+  // A name, with a port on this machine, or a URL: "voicevox:80@host" must not pass for local.
+  engine: z
+    .string()
+    .regex(/^(?:https?:\/\/\S+|[a-z][a-z0-9-]*(?::\d{1,5})?)$/i, {
+      message: 'an engine name like "voicevox", a name and port like "voicevox:50021", or a URL',
+    })
+    .default("voicevox"),
+  speaker: z.string(),
+  speed: z.number().default(1),
+  pause: z
+    .object({
+      sentence: z.number().optional(),
+      beat: z.number().optional(),
+    })
+    .optional(),
+  lead: z.number().min(0).default(DEFAULT_LEAD_MS),
+  beats: z
+    .record(
+      z.string(),
+      z.object({ lead: z.number().min(0).optional(), pause: z.number().min(0).optional() }),
+    )
+    .default({}),
+});
+
+/** Each word, a table of its reading. */
+const DictToml = z.record(
+  z.string(),
+  z.object({
+    kana: z.string(),
+    accent: z.number().optional(),
+  }),
+);
+
+export function hasVoice(deckDir: string): boolean {
+  return existsSync(deckPaths(deckDir).voiceToml);
+}
+
+/**
+ * How to give an existing deck a voice; every command that needs one and finds none says this.
+ * `dekc new` copies dek.toml `[voice]` only into decks it creates, so it is not the fix here.
+ */
+export const VOICE_SETUP_HINT =
+  'create voice/voice.toml in the deck with a speaker, like speaker = "ずんだもん/ノーマル" (engine defaults to voicevox); see https://hajimism.github.io/dek/guide/voice.html#setup';
+
+export function voiceMissingError(deckDir: string): DekError {
+  return new DekError("voice.toml not found", {
+    path: deckPaths(deckDir).voiceToml,
+    hint: VOICE_SETUP_HINT,
+  });
+}
+
+export function voiceCacheDir(deckDir: string): string {
+  return cacheDir(deckDir, "voice");
+}
+
+export function voiceCacheFile(deckDir: string, file: string): string {
+  return join(voiceCacheDir(deckDir), file);
+}
+
+export function loadVoiceSettings(deckDir: string): VoiceSettings {
+  const path = deckPaths(deckDir).voiceToml;
+  const source = readDeckFile(deckDir, path);
+  if (source === undefined) {
+    throw voiceMissingError(deckDir);
+  }
+  const data = parseTomlWith(VoiceToml, source, {
+    label: "voice.toml",
+    anchor: "voice-voice-toml",
+    path,
+  });
+  return {
+    engine: data.engine,
+    speaker: data.speaker,
+    speed: data.speed,
+    pause: {
+      sentence: data.pause?.sentence ?? DEFAULT_PAUSE.sentence,
+      beat: data.pause?.beat ?? DEFAULT_PAUSE.beat,
+    },
+    lead: data.lead,
+    beats: data.beats,
+  };
+}
+
+/**
+ * Maps voice.toml beat keys onto cue positions. A slide key frames the slide:
+ * its `lead` runs into the slide's arrival and its `pause` follows the last beat.
+ * A beat key refines its own beat. Keys that match nothing are returned in
+ * `unknown` so lint can report them.
+ */
+export function resolveBeatTiming(
+  deck: Deck,
+  settings: Pick<VoiceSettings, "lead" | "beats">,
+): { timing: (position: Position) => BeatTiming; unknown: string[] } {
+  const bySlide = new Map<number, BeatTiming>();
+  const byBeat = new Map<string, BeatTiming>();
+  const unknown: string[] = [];
+  for (const [key, value] of Object.entries(settings.beats)) {
+    const position = beatKeyPosition(deck, key);
+    if (!position) {
+      unknown.push(key);
+    } else if (key.includes("/")) {
+      byBeat.set(`${position.slideIndex}/${position.beatIndex}`, value);
+    } else {
+      bySlide.set(position.slideIndex, value);
+    }
+  }
+  return {
+    timing: (position) => {
+      const slide = bySlide.get(position.slideIndex);
+      const last = lastStop(deck.sections[position.slideIndex]?.beats ?? []);
+      const merged = {
+        lead: position.beatIndex === 0 ? (slide?.lead ?? settings.lead) : settings.lead,
+        pause: position.beatIndex === last ? slide?.pause : undefined,
+        ...byBeat.get(`${position.slideIndex}/${position.beatIndex}`),
+      };
+      return Object.fromEntries(Object.entries(merged).filter(([, v]) => v !== undefined));
+    },
+    unknown,
+  };
+}
+
+function beatKeyPosition(deck: Deck, key: string): Position | undefined {
+  const [slug, beat, ...rest] = key.split("/");
+  const slideIndex = deck.sections.findIndex((section) => section.slug === slug);
+  const section = deck.sections[slideIndex];
+  if (!section || rest.length > 0) {
+    return undefined;
+  }
+  if (beat === undefined) {
+    return { slideIndex, beatIndex: 0 };
+  }
+  const beatIndex = resolveStop(section.beats, beat);
+  return beatIndex === undefined ? undefined : { slideIndex, beatIndex };
+}
+
+export function loadVoiceDict(deckDir: string): VoiceDict {
+  const path = deckPaths(deckDir).voiceDict;
+  const source = readDeckFile(deckDir, path);
+  if (source === undefined) {
+    return {};
+  }
+  return parseTomlWith(DictToml, source, { label: "dict.toml", anchor: "voice-dict-toml", path });
+}
+
+export function writeVoiceDict(deckDir: string, dict: VoiceDict): string {
+  const path = deckPaths(deckDir).voiceDict;
+  const body = Object.entries(dict)
+    .sort(([a], [b]) => a.localeCompare(b))
+    .map(([key, entry]) => {
+      const accent = entry.accent !== undefined ? `\naccent = ${entry.accent}` : "";
+      return `[${escapeTomlKey(key)}]\nkana = ${JSON.stringify(entry.kana)}${accent}\n`;
+    })
+    .join("\n");
+  writeInside(path, body || "# voice dictionary\n", deckProjectRoot(deckDir));
+  return path;
+}
+
+export function formatVoiceToml(settings: {
+  engine: string;
+  speaker: string;
+  speed?: number;
+}): string {
+  return `engine  = ${JSON.stringify(settings.engine)}
+speaker = ${JSON.stringify(settings.speaker)}
+speed   = ${settings.speed ?? 1}
+pause   = { sentence = ${DEFAULT_PAUSE.sentence}, beat = ${DEFAULT_PAUSE.beat} }
+`;
+}
+
+const UtteranceSchema = z.object({
+  text: z.string(),
+  kana: z.string(),
+  durationMs: z.number(),
+});
+
+const TimelineSchema = z.object({
+  audio: z.string(),
+  durationMs: z.number(),
+  beats: z.array(
+    z.object({
+      position: z.object({
+        slideIndex: z.number(),
+        beatIndex: z.number(),
+      }),
+      start: z.number(),
+      end: z.number(),
+      sentences: z.array(
+        z.object({
+          text: z.string(),
+          kana: z.string(),
+          start: z.number(),
+          end: z.number(),
+        }),
+      ),
+      lead: z.number().optional(),
+    }),
+  ),
+});
+
+export function parseUtteranceJson(text: string): Utterance | undefined {
+  try {
+    const result = UtteranceSchema.safeParse(JSON.parse(text));
+    if (result.success) {
+      return result.data;
+    }
+  } catch {
+    return undefined;
+  }
+  return undefined;
+}
+
+export function parseTimelineJson(text: string, path?: string): Timeline {
+  try {
+    const result = TimelineSchema.safeParse(JSON.parse(text));
+    if (result.success) {
+      return result.data;
+    }
+  } catch (error) {
+    throw new DekError("invalid timeline.json", {
+      path,
+      hint: "run `dekc voice`",
+      cause: error,
+    });
+  }
+  throw new DekError("invalid timeline.json", {
+    path,
+    hint: "run `dekc voice`",
+  });
+}
+
+export function loadCachedTimeline(deckDir: string): Timeline | undefined {
+  const path = voiceCacheFile(deckDir, "timeline.json");
+  if (!existsSync(path)) {
+    return undefined;
+  }
+  return parseTimelineJson(readFileSync(path, "utf8"), path);
+}
+
+export function tryLoadCachedTimeline(deckDir: string): Timeline | undefined {
+  try {
+    return loadCachedTimeline(deckDir);
+  } catch (error) {
+    if (error instanceof DekError) {
+      return undefined;
+    }
+    throw error;
+  }
+}
+
+export function resolveTimelineAudio(
+  timeline: Pick<Timeline, "audio">,
+  timelinePath: string,
+): string {
+  // Only a name: the audio sits beside its timeline, and a path in the file, which a repository
+  // can commit, never sends ffmpeg to read something elsewhere.
+  return join(dirname(timelinePath), basename(timeline.audio || "audio.wav"));
+}
+
+export function writeResolved(deckDir: string, resolved: VoiceResolved): string {
+  const path = join(voiceCacheDir(deckDir), "resolved.json");
+  writeInside(path, `${JSON.stringify(resolved, null, 2)}\n`, deckProjectRoot(deckDir));
+  return path;
+}
+
+export function utteranceHash(input: {
+  text: string;
+  engine: string;
+  engineVersion: string;
+  styleId: number;
+  speed: number;
+}): string {
+  return createHash("sha256")
+    .update(
+      `${input.text}\0${input.engine}\0${input.engineVersion}\0${input.styleId}\0${input.speed}`,
+    )
+    .digest("hex")
+    .slice(0, 16);
+}
+
+function escapeTomlKey(key: string): string {
+  return /^[A-Za-z0-9_-]+$/.test(key) ? key : JSON.stringify(key);
+}

package/src/core/zod.ts

@@ -0,0 +1,79 @@
+import type { z } from "zod";
+import { DekError } from "./error.ts";
+
+const REFERENCE = "https://hajimism.github.io/dek/reference/config.html";
+
+type ConfigAnchor = "dek-toml" | "frontmatter" | "voice-voice-toml" | "voice-dict-toml";
+
+/** Where the keys of a config file are documented, as a hint. */
+export function configHint(anchor: ConfigAnchor): string {
+  return `see ${REFERENCE}#${anchor}`;
+}
+
+/**
+ * A parser's syntax error in its own words, without the class name or banner Bun puts in front.
+ * Bun's parsers say no line of the file: the error's own `line` is where JavaScript called them.
+ */
+export function parseFailure(error: unknown): string {
+  return (error instanceof Error ? error.message : String(error)).replace(
+    /^(?:SyntaxError: )?(?:TOML Parse error: )?/,
+    "",
+  );
+}
+
+export function formatZodIssues(error: z.ZodError): string {
+  return error.issues
+    .map((issue) => {
+      const path = issue.path.join(".");
+      // "expected string, received undefined" says less than "required".
+      const message =
+        issue.code === "invalid_type" && /received undefined$/.test(issue.message)
+          ? "required"
+          : issue.message;
+      return path ? `${path}: ${message}` : message;
+    })
+    .join("; ");
+}
+
+/**
+ * A TOML file read through `schema`: a syntax error names the file, a schema issue names the key,
+ * and both point at where the file's keys are documented.
+ */
+export function parseTomlWith<S extends z.ZodType>(
+  schema: S,
+  source: string,
+  where: { label: string; anchor: ConfigAnchor; path?: string },
+): z.output<S> {
+  const hint = configHint(where.anchor);
+  let parsed: unknown;
+  try {
+    parsed = Bun.TOML.parse(source);
+  } catch (error) {
+    throw new DekError(`invalid ${where.label}: ${parseFailure(error)}`, {
+      path: where.path,
+      cause: error,
+      hint,
+    });
+  }
+  const result = schema.safeParse(parsed ?? {});
+  if (!result.success) {
+    throw new DekError(formatZodIssues(result.error), { path: where.path, hint });
+  }
+  return result.data;
+}
+
+/**
+ * The keys of `value` that a strict `schema` does not know, each as its full path. Parsing with
+ * the lenient schema drops them without a word; this is how lint hears of them.
+ */
+export function unrecognizedKeys(schema: z.ZodType, value: unknown): string[][] {
+  const result = schema.safeParse(value);
+  if (result.success) {
+    return [];
+  }
+  return result.error.issues.flatMap((issue) =>
+    issue.code === "unrecognized_keys"
+      ? issue.keys.map((key) => [...issue.path.map(String), key])
+      : [],
+  );
+}

package/src/runtime/browser.ts

@@ -0,0 +1,203 @@
+/// <reference lib="dom" />
+
+import { isLiveEvent } from "../core/live-protocol.ts";
+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 { 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";
+
+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;
+    }
+    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");
+  };
+}

package/src/runtime/clone.ts

@@ -0,0 +1,52 @@
+/// <reference lib="dom" />
+
+/**
+ * A copy of a slide to look at, never to use: a rail thumbnail or the presenter's next preview.
+ * It shows as the stage would (theme CSS reveals steps only on `.is-current`), takes no ids or
+ * morph names from the real slide, loads no media, and is inert and hidden from assistive tech,
+ * so focus and the accessibility tree meet each slide once, on the stage.
+ */
+export function visualClone(source: HTMLElement): HTMLElement | undefined {
+  const clone = source.cloneNode(true);
+  if (!(clone instanceof HTMLElement)) {
+    return undefined;
+  }
+  clone.classList.add("is-current");
+  for (const el of [clone, ...clone.querySelectorAll<HTMLElement>("[id], [data-morph]")]) {
+    el.removeAttribute("id");
+    el.style.removeProperty("view-transition-name");
+  }
+  for (const el of clone.querySelectorAll("video, audio, iframe, object, embed")) {
+    el.removeAttribute("src");
+    el.removeAttribute("srcdoc");
+    el.replaceChildren();
+  }
+  clone.setAttribute("inert", "");
+  clone.setAttribute("aria-hidden", "true");
+  return clone;
+}
+
+/** The deck's size on screen, or the default stage before it is laid out. */
+export function deckSize(deckEl: { offsetWidth: number; offsetHeight: number }): {
+  width: number;
+  height: number;
+} {
+  return { width: deckEl.offsetWidth || 1280, height: deckEl.offsetHeight || 720 };
+}
+
+/**
+ * A box the deck's size holding `clone`, so a copy of a slide lays out as the slide does before
+ * it is scaled down to a thumbnail or a preview.
+ */
+export function stillFrame(
+  className: string,
+  clone: HTMLElement,
+  size: { width: number; height: number },
+): HTMLDivElement {
+  const frame = document.createElement("div");
+  frame.className = className;
+  frame.style.width = `${size.width}px`;
+  frame.style.height = `${size.height}px`;
+  frame.append(clone);
+  return frame;
+}

package/src/runtime/deck-control.ts

@@ -0,0 +1,43 @@
+import type { Position } from "../core/step.ts";
+import type { GoOrigin } from "./navigator.ts";
+import type { RehearseController } from "./rehearse.ts";
+
+/** Where a move someone asked for came from: a key or a click on this page, or a peer. */
+export type RequestOrigin = Extract<GoOrigin, "local" | "remote">;
+
+export type DeckControl = {
+  /** Move the deck to `next`; nothing at either end of the talk. */
+  request(next: Position | null, origin: RequestOrigin): void;
+  /** Play or pause the rehearsal; false when none is loaded, so the key is left alone. */
+  togglePlay(): boolean;
+};
+
+/**
+ * Who a move goes through. While a rehearsal is loaded its clock owns the deck, so a move goes
+ * through the clock and the clock moves with it; otherwise the navigator takes it directly.
+ */
+export function createDeckControl(options: {
+  go: (next: Position, origin: RequestOrigin) => Promise<void>;
+  rehearse: Pick<RehearseController, "ready" | "move" | "toggle">;
+}): DeckControl {
+  const { go, rehearse } = options;
+  return {
+    request(next, origin) {
+      if (!next) {
+        return;
+      }
+      if (rehearse.ready()) {
+        rehearse.move(next, origin);
+      } else {
+        void go(next, origin);
+      }
+    },
+    togglePlay() {
+      if (!rehearse.ready()) {
+        return false;
+      }
+      rehearse.toggle();
+      return true;
+    },
+  };
+}