@hajimism/dek 0.1.0

package/src/core/capture-go.ts

@@ -0,0 +1,72 @@
+import type { Page } from "playwright";
+import { finishBeat } from "./finish-beat.ts";
+import {
+  type EvaluatingPage,
+  freezeAt,
+  holdStarted,
+  seekStarted,
+  startGoPaused,
+} from "./in-page-go.ts";
+import type { MorphSpec } from "./playwright.ts";
+import type { Position } from "./step.ts";
+
+/** Loads the video document with motion on, the way `dekc video` plays it. */
+export async function loadVideoDoc(
+  page: Pick<Page, "emulateMedia" | "setContent">,
+  html: string,
+): Promise<void> {
+  await page.emulateMedia({ reducedMotion: "no-preference" });
+  await page.setContent(html, { waitUntil: "load" });
+}
+
+/** Goes to `position` and ends that beat, as the page stands when the talk moves on. */
+export async function settleAt(page: EvaluatingPage, position: Position): Promise<void> {
+  await page.evaluate((to) => window.dekGo?.(to), position);
+  await page.evaluate(finishBeat);
+}
+
+/**
+ * Plays `go(position)` held still: shoots it at each of `stopsFor(span)` ms into everything the
+ * go started, then ends it as a still of that beat ends it and shoots that. The span is the
+ * longest of the go's animations and the slide script's motion. Returns the span.
+ */
+export async function captureGo(
+  page: EvaluatingPage,
+  position: Position,
+  stopsFor: (span: number) => number[],
+  shoot: (ms: number, end: boolean) => Promise<void>,
+): Promise<number> {
+  await page.evaluate(startGoPaused, position);
+  const span = await page.evaluate(holdStarted);
+  for (const ms of stopsFor(span)) {
+    await page.evaluate(seekStarted, ms);
+    await shoot(ms, false);
+  }
+  await endGo(page);
+  await shoot(span, true);
+  return span;
+}
+
+/**
+ * Settles `from`, then starts `go(to)` and stops every animation (view-transition pseudo-elements
+ * included) at `at` of the view transition's span. The slide script is held at the morph's moment
+ * in ms, not at `at` of its own motion, the way the video recorder seeks both.
+ *
+ * Unlike `captureGo`, the span here is the view transition's alone: `--at` names a moment of the
+ * move between slides, however long the slide's own entrance runs.
+ */
+export async function freezeTransition(page: EvaluatingPage, morph: MorphSpec): Promise<void> {
+  await settleAt(page, morph.from);
+  if (!(await page.evaluate(startGoPaused, morph.to))) {
+    // No transition to hold at a moment of; the frame is the go at its end, as a still shows it.
+    await endGo(page);
+    return;
+  }
+  await page.evaluate(freezeAt, morph.at);
+}
+
+/** Ends the go `startGoPaused` began, as a still of its beat ends it, and waits for it to return. */
+async function endGo(page: EvaluatingPage): Promise<void> {
+  await page.evaluate(finishBeat);
+  await page.evaluate(() => window.__dekPendingGo);
+}

package/src/core/chrome.ts

@@ -0,0 +1,128 @@
+export function playerChromeCss(
+  options: { presenter?: boolean; width?: number; height?: number } = {},
+): string {
+  const width = options.width ?? 1280;
+  const height = options.height ?? 720;
+  const base = `html, body { margin: 0; height: 100%; background: #000; color: #fff; }
+#dek-shell { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "current"; }
+body:not(.is-presenter):not(.is-rail-hidden) #dek-shell:has(> #dek-rail) { grid-template-columns: var(--dek-rail-w, 188px) minmax(0, 1fr); grid-template-areas: "rail current"; }
+#dek-current { grid-area: current; height: 100%; display: flex; flex-direction: column; min-height: 0; }
+#dek-current-stage { flex: 1; min-height: 0; position: relative; overflow: hidden; touch-action: pan-y pinch-zoom; }
+#dek-current-stage #deck { position: absolute; top: 0; left: 0; margin: 0; transform-origin: top left; }
+#deck { position: relative; width: ${width}px; height: ${height}px; margin: 0 auto; transform-origin: top center; }
+@media not print { #deck > .slide:not(.is-current) { display: none; } }
+#deck { view-transition-name: slide; }
+::view-transition-group(slide) { overflow: clip; }
+::view-transition-old(root), ::view-transition-new(root) { animation: none; }
+#dek-rail { grid-area: rail; min-height: 0; background: #141414; border-right: 1px solid rgba(255,255,255,0.08); overflow: auto; padding: 12px 10px; display: flex; flex-direction: column; gap: 12px; box-sizing: border-box; scrollbar-width: thin; }
+.dek-thumb { display: flex; align-items: flex-start; gap: 8px; color: inherit; text-decoration: none; outline: none; }
+.dek-thumb-num { width: 16px; flex: none; font: 500 11px/1.2 system-ui, sans-serif; text-align: right; color: rgba(255,255,255,0.55); padding-top: 2px; font-variant-numeric: tabular-nums; }
+.dek-thumb-frame { position: relative; flex: 1; min-width: 0; aspect-ratio: ${width}/${height}; background: #111; border-radius: 4px; outline: 2px solid transparent; overflow: hidden; }
+.dek-thumb-stage { position: absolute; top: 0; left: 0; transform-origin: top left; pointer-events: none; }
+.dek-thumb-stage > .slide { width: 100%; height: 100%; }
+#dek-rail .slide [data-step] { opacity: 1 !important; transform: none !important; transition: none !important; }
+.dek-thumb.is-current .dek-thumb-num { color: #fff; }
+.dek-thumb.is-current .dek-thumb-frame { outline-color: #3ab9d5; }
+.dek-thumb:hover .dek-thumb-frame, .dek-thumb:focus-visible .dek-thumb-frame { outline-color: rgba(255,255,255,0.25); }
+.dek-thumb.is-current:hover .dek-thumb-frame, .dek-thumb.is-current:focus-visible .dek-thumb-frame { outline-color: #3ab9d5; }
+#dek-rail-resize { position: fixed; left: calc(var(--dek-rail-w, 188px) - 3px); top: 0; bottom: 0; width: 6px; cursor: col-resize; z-index: 5; touch-action: none; }
+#dek-rail-resize:hover, #dek-rail-resize[data-dragging] { background: rgba(255,255,255,0.12); }
+body.is-rail-hidden #dek-rail, body.is-rail-hidden #dek-rail-resize, body[data-mode="video"] #dek-rail, body[data-mode="video"] #dek-rail-resize { display: none; }
+@media (max-width: 640px) {
+  body:not(.is-presenter):not(.is-rail-hidden) #dek-shell:has(> #dek-rail) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "current"; }
+  #dek-rail, #dek-rail-resize { display: none; }
+  body:not(.is-rail-hidden):has(> #dek-shell > #dek-rail) #dek-hint { left: 50%; }
+}
+.dek-panel-label { display: none; }
+#dek-announce { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+#dek-hint { position: fixed; left: 50%; bottom: 28px; z-index: 20; display: flex; gap: 18px; padding: 10px 18px; background: rgba(18,18,18,0.86); color: #fff; border: 1px solid rgba(255,255,255,0.14); border-radius: 999px; box-shadow: 0 8px 28px rgba(0,0,0,0.35); font: 500 13px/1.4 system-ui, sans-serif; white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-50%, 12px); animation: dek-hint 5s cubic-bezier(0.22, 1, 0.36, 1) 0.5s forwards; }
+body:not(.is-rail-hidden):has(> #dek-shell > #dek-rail) #dek-hint { left: calc(50% + var(--dek-rail-w, 188px) / 2); }
+#dek-hint > span { display: inline-flex; align-items: center; gap: 8px; }
+#dek-hint kbd { min-width: 1.6em; padding: 1px 6px; box-sizing: border-box; border: 1px solid rgba(255,255,255,0.35); border-bottom-width: 2px; border-radius: 5px; font: 600 12px/1.4 ui-monospace, monospace; text-align: center; }
+@keyframes dek-hint { 12% { opacity: 1; transform: translate(-50%, 0); } 80% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, 0); } }
+@media (prefers-reduced-motion: reduce) { #dek-hint { transform: translate(-50%, 0); animation-name: dek-hint-fade; } @keyframes dek-hint-fade { 12%, 80% { opacity: 1; } } }
+@media (pointer: coarse) { #dek-hint { display: none; } }
+#dek-laser { position: absolute; z-index: 30; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; background: radial-gradient(circle, #fff 0 12%, #ff3b30 22% 38%, rgba(255,59,48,0.45) 52%, rgba(255,59,48,0) 70%); pointer-events: none; }
+#dek-laser[hidden] { display: none; }
+body.is-laser #dek-current-stage { cursor: crosshair; touch-action: none; }
+.dek-diagnostics { position: fixed; left: 0; right: 0; bottom: 0; padding: 8px 12px; background: #900; color: #fff; font: 12px/1.4 monospace; white-space: pre-wrap; z-index: 10; }
+body[data-mode="video"] .dek-diagnostics { display: none !important; }
+@media print {
+${indent(printPageCss({ width, height }))}
+  body, #dek-shell, #dek-current, #dek-current-stage { display: block; height: auto; overflow: visible; position: static; padding: 0; }
+  #deck [data-step] { opacity: 1 !important; transform: none !important; transition: none !important; }
+  #dek-rail, #dek-rail-resize, #dek-hint, #dek-laser, .dek-panel-label, .dek-diagnostics { display: none !important; }
+}`;
+  if (options.presenter === false) {
+    return base;
+  }
+  return `${base}
+@media print { #dek-presenter, #dek-progress { display: none !important; } }
+body[data-mode="video"] #dek-presenter, body[data-mode="video"] #dek-progress { display: none !important; }
+#dek-presenter[hidden], #dek-progress[hidden], #dek-next-end[hidden] { display: none; }
+#dek-mark-toggle { flex: none; width: 2.25rem; height: 2.25rem; padding: 0; border: 1px solid rgba(255,255,255,0.2); border-radius: 50%; background: transparent; color: rgba(255,255,255,0.45); cursor: pointer; font: 600 1rem/1 system-ui, sans-serif; }
+#dek-mark-toggle::before { content: "✎"; }
+#dek-mark-toggle[aria-pressed="true"] { border-color: #eab308; color: #eab308; }
+#dek-mark-toggle[data-error] { border-color: #ef4444; }
+#dek-beats li.is-marked::after { content: " ✎"; color: #eab308; }
+#dek-laser-toggle { flex: none; width: 2.25rem; height: 2.25rem; padding: 0; border: 1px solid rgba(255,255,255,0.2); border-radius: 50%; background: transparent; cursor: pointer; }
+#dek-laser-toggle::before { content: ""; display: block; width: 10px; height: 10px; margin: auto; border-radius: 50%; background: rgba(255,255,255,0.45); }
+#dek-laser-toggle[aria-pressed="true"] { border-color: #ff3b30; }
+#dek-laser-toggle[aria-pressed="true"]::before { background: #ff3b30; box-shadow: 0 0 8px #ff3b30; }
+body.is-presenter { background: #121212; color: #ddd; font-family: system-ui, sans-serif; display: flex; flex-direction: column; }
+body.is-presenter .dek-panel-label { display: block; font: 12px/1.4 system-ui, sans-serif; opacity: 0.65; padding: 4px 8px; }
+body.is-presenter #dek-progress:not([hidden]) { display: flex; height: 4px; flex: none; background: #121212; gap: 1px; }
+#dek-progress > span { flex: 1; background: rgba(255,255,255,0.12); position: relative; }
+#dek-progress > span.is-done { background: #3ab9d5; }
+#dek-progress > span.is-current::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--dek-fill, 0%); background: #3ab9d5; }
+body.is-presenter #dek-rail, body.is-presenter #dek-rail-resize { display: none; }
+body.is-presenter #dek-shell { flex: 1; min-height: 0; height: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 26%); grid-template-rows: minmax(0, 1.15fr) minmax(0, 1fr) auto; grid-template-areas: "current next" "current notes" "bar bar"; gap: 1px; background: rgba(255,255,255,0.12); }
+body.is-presenter #dek-current { grid-area: current; height: auto; background: #121212; }
+body.is-presenter #dek-current-stage { padding: 8px 16px 16px; box-sizing: border-box; }
+body.is-presenter #dek-presenter:not([hidden]) { display: contents; }
+#dek-next-panel { grid-area: next; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #121212; }
+.dek-next-body { flex: 1; min-height: 0; position: relative; }
+#dek-next-stage { height: 100%; position: relative; overflow: hidden; }
+.dek-preview-frame { position: absolute; top: 0; left: 0; transform-origin: top left; }
+.dek-preview-frame > .slide { width: 100%; height: 100%; }
+#dek-next-end { margin: 0; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0.5; font: 14px/1.4 system-ui, sans-serif; pointer-events: none; }
+#dek-next { margin: 0; padding: 4px 8px; font: 12px/1.4 system-ui, sans-serif; opacity: 0.7; }
+#dek-next:empty { display: none; }
+#dek-notes-panel { grid-area: notes; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #121212; overflow: hidden; }
+#dek-beats { margin: 0; padding: 8px 12px; list-style: none; font: 13px/1.4 system-ui, sans-serif; border-bottom: 1px solid rgba(255,255,255,0.12); overflow: auto; max-height: 40%; }
+#dek-beats li { padding: 2px 6px; border-radius: 2px; }
+.is-current-beat { background: rgba(255,255,255,0.12); }
+#dek-script { flex: 1; margin: 0; padding: 12px; overflow: auto; white-space: pre-wrap; font: 14px/1.5 system-ui, sans-serif; }
+#dek-presenter-bar { grid-area: bar; display: flex; align-items: baseline; gap: 12px; padding: 8px 12px; background: #121212; font: 14px/1.4 system-ui, sans-serif; }
+#dek-page { opacity: 0.85; }
+#dek-page .dek-page-total { opacity: 0.5; font-size: 0.85em; }
+#dek-elapsed { margin: 0 0 0 auto; font: 1.5rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
+#dek-elapsed.is-warn { color: #eab308; }
+#dek-elapsed.is-over { color: #ef4444; }
+#dek-budget { margin: 0; opacity: 0.5; font: 0.85rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
+#dek-budget:empty { display: none; }
+@media (max-aspect-ratio: 1/1) {
+  body.is-presenter #dek-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1.4fr) minmax(7rem, 0.55fr) minmax(0, 1fr) auto; grid-template-areas: "current" "next" "notes" "bar"; }
+}`;
+}
+
+/**
+ * One slide per page at the deck's logical size. A slide's display is its layout, which the
+ * theme owns, so neither this nor the player's chrome ever sets it: the player hides the
+ * slides it is not showing on screen only. `dekc pdf` prints with it, and the player wraps
+ * it in `@media print` so the browser's own Print gives the same pages.
+ */
+export function printPageCss(size: { width: number; height: number }): string {
+  return `@page { size: ${size.width}px ${size.height}px; margin: 0 }
+html, body { margin: 0; padding: 0; background: #000; }
+#deck { position: static; width: ${size.width}px; height: auto; margin: 0; transform: none !important; }
+#deck > .slide { width: ${size.width}px; height: ${size.height}px; break-inside: avoid; }
+#deck > .slide:not(:last-child) { break-after: page; }`;
+}
+
+function indent(css: string): string {
+  return css
+    .split("\n")
+    .map((line) => `  ${line}`)
+    .join("\n");
+}

package/src/core/config-keys.ts

@@ -0,0 +1,82 @@
+import { DekToml, Voice } from "./config.ts";
+import { splitLines } from "./lines.ts";
+import { readFrontmatterYaml } from "./parse.ts";
+import { Frontmatter } from "./schema.ts";
+import { suggest } from "./suggest.ts";
+import { scanTomlKeys } from "./toml-keys.ts";
+import { unrecognizedKeys } from "./zod.ts";
+
+/** A key dek does not read, where it is, and the known key it most likely meant. */
+export type UnknownKey = { key: string; line: number; suggestion?: string };
+
+/** dek.toml's schema, but a key it does not read is an issue; `refs` still takes any key. */
+const StrictDekToml = DekToml.extend({ voice: Voice.strict().optional() }).strict();
+
+/** Every key dek.toml may hold, as dotted paths. */
+const DEK_TOML_KEYS: readonly string[] = [
+  ...Object.keys(DekToml.shape),
+  ...Object.keys(Voice.shape).map((key) => `voice.${key}`),
+];
+
+export const FRONTMATTER_KEYS: readonly string[] = Object.keys(Frontmatter.shape);
+
+/**
+ * Keys in dek.toml that dek ignores. Parsing drops unknown keys without a word, so a typo such
+ * as `latin_per_minut` would silently leave the default in place. The schema decides what is
+ * unknown, inline tables such as `voice = { sped = 1 }` included; the scan only says where. A
+ * file that does not parse has none: loading it reports that.
+ */
+export function unknownTomlKeys(source: string): UnknownKey[] {
+  let parsed: unknown;
+  try {
+    parsed = Bun.TOML.parse(source);
+  } catch {
+    return [];
+  }
+  const unread = unrecognizedKeys(StrictDekToml, parsed ?? {});
+  if (unread.length === 0) {
+    return [];
+  }
+  const scanned = scanTomlKeys(source);
+  return unread
+    .map((path) => {
+      const key = path.join(".");
+      const written =
+        scanned.find((entry) => entry.path.join(".") === key) ??
+        scanned.find((entry) => entry.path.join(".").startsWith(`${key}.`));
+      return withSuggestion({ key, line: written?.line ?? 1 }, DEK_TOML_KEYS);
+    })
+    .sort((a, b) => a.line - b.line);
+}
+
+/**
+ * Top-level frontmatter keys dek ignores, with 1-based lines in script.md; `firstLine` is the line
+ * the YAML starts on, right after the opening `---`. The schema decides what is unknown, as it
+ * does for dek.toml; YAML that does not parse has none, since the deck then fails to load.
+ */
+export function unknownFrontmatterKeys(yaml: string, firstLine: number): UnknownKey[] {
+  let parsed: unknown;
+  try {
+    parsed = readFrontmatterYaml(yaml);
+  } catch {
+    return [];
+  }
+  const lines = splitLines(yaml);
+  return unrecognizedKeys(Frontmatter.strict(), parsed ?? {})
+    .map(([key = ""]) => {
+      const index = lines.findIndex((text) => topLevelKey(text) === key);
+      return withSuggestion({ key, line: firstLine + Math.max(0, index) }, FRONTMATTER_KEYS);
+    })
+    .sort((a, b) => a.line - b.line);
+}
+
+/** The key a top-level YAML line writes, quoted or not. */
+function topLevelKey(text: string): string | undefined {
+  const match = text.match(/^(?:"([^"]*)"|'([^']*)'|([A-Za-z_][\w-]*))\s*:/);
+  return match?.[1] ?? match?.[2] ?? match?.[3];
+}
+
+function withSuggestion(entry: UnknownKey, known: readonly string[]): UnknownKey {
+  const suggestion = suggest(entry.key, [...known]);
+  return suggestion ? { ...entry, suggestion } : entry;
+}

package/src/core/config.ts

@@ -0,0 +1,95 @@
+import { existsSync, readFileSync } from "node:fs";
+import { z } from "zod";
+import { parsePublicUrl } from "./ogp.ts";
+import { isPinnedRev, isPlainRefName } from "./ref-name.ts";
+import { parseTomlWith } from "./zod.ts";
+
+export const Voice = z.object({
+  engine: z.string().optional(),
+  speaker: z.string(),
+  speed: z.number().optional(),
+});
+
+export const DekToml = z.object({
+  url: z
+    .string()
+    .refine((value) => parsePublicUrl(value) !== undefined, {
+      message:
+        "write the absolute http(s) URL dist/ is served from, like https://example.com/talks/",
+    })
+    .optional(),
+  max_classes: z.number().optional(),
+  cjk_per_minute: z.number().optional(),
+  latin_per_minute: z.number().optional(),
+  voice: Voice.optional(),
+  refs: z
+    .record(z.string(), z.string())
+    .superRefine((refs, ctx) => {
+      for (const [name, rev] of Object.entries(refs)) {
+        if (!isPlainRefName(name)) {
+          ctx.addIssue({ code: "custom", path: [name], message: "a ref is named owner/repo/deck" });
+        } else if (!isPinnedRev(rev)) {
+          ctx.addIssue({
+            code: "custom",
+            path: [name],
+            message: `pin a ref to a 40-character commit sha; run \`dekc ref ${name}\` to pin one`,
+          });
+        }
+      }
+    })
+    .optional(),
+});
+
+type VoiceDefaults = {
+  engine: string;
+  speaker: string;
+  speed: number;
+};
+
+export type DekConfig = {
+  /** Where dist/ is served from, ending in a slash; link previews need it for og:image. */
+  url?: string;
+  maxClasses: number;
+  cjkPerMinute: number;
+  latinPerMinute: number;
+  voice?: VoiceDefaults;
+  /** `[refs]`: each ref name and the commit it is pinned to. */
+  refs?: Record<string, string>;
+};
+
+export const DEFAULT_CONFIG: DekConfig = {
+  maxClasses: 40,
+  cjkPerMinute: 300,
+  latinPerMinute: 130,
+};
+
+export function parseDekToml(source: string, path?: string): DekConfig {
+  const data = parseTomlWith(DekToml, source, {
+    label: "dek.toml",
+    anchor: "dek-toml",
+    ...(path === undefined ? {} : { path }),
+  });
+  const voice = data.voice
+    ? {
+        engine: data.voice.engine ?? "voicevox",
+        speaker: data.voice.speaker,
+        speed: data.voice.speed ?? 1,
+      }
+    : undefined;
+  const url = data.url === undefined ? undefined : parsePublicUrl(data.url);
+  return {
+    ...(url ? { url } : {}),
+    maxClasses: data.max_classes ?? DEFAULT_CONFIG.maxClasses,
+    cjkPerMinute: data.cjk_per_minute ?? DEFAULT_CONFIG.cjkPerMinute,
+    latinPerMinute: data.latin_per_minute ?? DEFAULT_CONFIG.latinPerMinute,
+    ...(voice ? { voice } : {}),
+    ...(data.refs && Object.keys(data.refs).length > 0 ? { refs: data.refs } : {}),
+  };
+}
+
+export function loadConfig(configPath: string): DekConfig {
+  if (!existsSync(configPath)) {
+    return { ...DEFAULT_CONFIG };
+  }
+  return parseDekToml(readFileSync(configPath, "utf8"), configPath);
+}

package/src/core/css-scan.ts

@@ -0,0 +1,158 @@
+/**
+ * The one way dek steps through CSS text: strings and comments are opaque, and a newline ends an
+ * unclosed string, as the CSS tokenizer reads it. Every scanner in css.ts and lint/tokens.ts is built on
+ * these, so none of them can disagree about where a string or a block ends.
+ */
+
+/** The index just past the string that opens at `start`, or the newline that cuts it short. */
+export function consumeString(source: string, start: number, end = source.length): number {
+  const quote = source[start];
+  let i = start + 1;
+  while (i < end) {
+    const ch = source[i];
+    if (ch === "\\") {
+      i += 2;
+      continue;
+    }
+    if (ch === quote) {
+      return i + 1;
+    }
+    if (ch === "\n") {
+      return i;
+    }
+    i++;
+  }
+  return end;
+}
+
+/** The index just past the comment that opens at `start`; an unclosed one runs to the end. */
+export function consumeComment(source: string, start: number, end = source.length): number {
+  const close = source.indexOf("*/", start + 2);
+  return close === -1 || close + 2 > end ? end : close + 2;
+}
+
+function isCommentStart(source: string, i: number): boolean {
+  return source[i] === "/" && source[i + 1] === "*";
+}
+
+/**
+ * The first index from `start` whose character is one of `stops` outside strings, comments, and
+ * `()`/`[]`; `end` when there is none. An opening brace counts only when `{` is a stop.
+ */
+export function scanTopLevel(source: string, start: number, end: number, stops: string): number {
+  let depth = 0;
+  let i = start;
+  while (i < end) {
+    const ch = source[i] ?? "";
+    if (ch === '"' || ch === "'") {
+      i = consumeString(source, i, end);
+      continue;
+    }
+    if (isCommentStart(source, i)) {
+      i = consumeComment(source, i, end);
+      continue;
+    }
+    if (ch === "\\") {
+      i += 2;
+      continue;
+    }
+    if (depth === 0 && stops.includes(ch)) {
+      return i;
+    }
+    if (ch === "(" || ch === "[") {
+      depth++;
+    } else if ((ch === ")" || ch === "]") && depth > 0) {
+      depth--;
+    }
+    i++;
+  }
+  return end;
+}
+
+/** The index of the `}` that closes the block opening at `open`, or `end` when it never closes. */
+export function matchBrace(source: string, open: number, end = source.length): number {
+  let depth = 0;
+  let i = open;
+  while (i < end) {
+    i = scanTopLevel(source, i, end, "{}");
+    if (source[i] === "{") {
+      depth++;
+    } else if (source[i] === "}") {
+      depth--;
+      if (depth === 0) {
+        return i;
+      }
+    }
+    i++;
+  }
+  return end;
+}
+
+/** The text with each comment removed, strings kept byte for byte. */
+export function stripComments(source: string): string {
+  return replaceOpaque(source, { comment: () => "" });
+}
+
+/**
+ * The text with each string and comment blanked to spaces, newlines kept, so only CSS syntax is
+ * left and every offset still points where it did.
+ */
+export function blankStringsAndComments(source: string): string {
+  const blank = (text: string) => text.replace(/[^\n]/g, " ");
+  return replaceOpaque(source, { comment: blank, string: blank });
+}
+
+function replaceOpaque(
+  source: string,
+  replace: { comment?: (text: string) => string; string?: (text: string) => string },
+): string {
+  let out = "";
+  let from = 0;
+  let i = 0;
+  while (i < source.length) {
+    const ch = source[i];
+    if (ch === '"' || ch === "'") {
+      const end = consumeString(source, i);
+      if (replace.string) {
+        out += source.slice(from, i) + replace.string(source.slice(i, end));
+        from = end;
+      }
+      i = end;
+      continue;
+    }
+    if (isCommentStart(source, i)) {
+      const end = consumeComment(source, i);
+      if (replace.comment) {
+        out += source.slice(from, i) + replace.comment(source.slice(i, end));
+        from = end;
+      }
+      i = end;
+      continue;
+    }
+    i += ch === "\\" ? 2 : 1;
+  }
+  return out + source.slice(from);
+}
+
+/** Splits on top-level commas only, leaving `:is(.a, .b)` or `var(--a, b)` whole. */
+export function splitTopLevel(text: string, separator = ","): string[] {
+  const parts: string[] = [];
+  let start = 0;
+  for (;;) {
+    const at = scanTopLevel(text, start, text.length, separator);
+    parts.push(text.slice(start, at));
+    if (at >= text.length) {
+      return parts;
+    }
+    start = at + 1;
+  }
+}
+
+/** Each whole identifier in a value outside strings and comments, with where it starts. */
+export function cssIdents(value: string): Array<{ ident: string; start: number }> {
+  const bare = blankStringsAndComments(value);
+  return [...bare.matchAll(/-?[_a-zA-Z\u0080-\uffff][-\w\u0080-\uffff]*/g)].map((match) => ({
+    ident: match[0],
+    start: match.index,
+  }));
+}

package/src/core/css-transform.ts

@@ -0,0 +1,140 @@
+import { outermostStyleRules, type Stylesheet, splitSelectorList, startsAtSlide } from "./css.ts";
+import { consumeComment, consumeString, cssIdents } from "./css-scan.ts";
+
+/** Text to put in place of `[start, end)` of the stylesheet as it was read. */
+type CssEdit = { start: number; end: number; text: string };
+
+/** One rewrite, as the edits it makes to a stylesheet. */
+export type CssEditor = (sheet: Stylesheet) => CssEdit[];
+
+/**
+ * The stylesheet with every editor's edits applied at once. Each editor reads the same sheet, so
+ * a pipeline of rewrites parses the stylesheet once; their edits must not overlap.
+ */
+export function rewriteCss(sheet: Stylesheet, ...editors: CssEditor[]): string {
+  const edits = editors.flatMap((editor) => editor(sheet)).sort((a, b) => a.start - b.start);
+  let out = "";
+  let from = 0;
+  for (const edit of edits) {
+    out += sheet.source.slice(from, edit.start) + edit.text;
+    from = edit.end;
+  }
+  return out + sheet.source.slice(from);
+}
+
+/**
+ * Scopes a slide's own stylesheet to that slide. A leading `.slide` compound
+ * gains `:where([data-slug])`; any other selector is nested under the scoped
+ * slide. The scope weighs exactly one `.slide`, so a rule behaves as if it were
+ * written at the end of theme.css: it beats the theme's `.slide .x`, and the
+ * theme's state rules (`.slide.is-current [data-step]`) still beat it.
+ * Local keyframes are renamed so two slides can both define `pop`.
+ */
+export function scopeToSlide(slug: string): CssEditor {
+  const scope = `.slide:where([data-slug="${slug}"])`;
+  const rename = (name: string) => `${slug}--${name}`;
+  return (sheet) => {
+    const edits: CssEdit[] = outermostStyleRules(sheet).map((rule) => ({
+      start: rule.preludeStart,
+      end: rule.preludeEnd,
+      text: splitSelectorList(rule.prelude)
+        .map((part) => {
+          const item = part.trim();
+          return startsAtSlide(item)
+            ? `${scope}${item.slice(".slide".length)}`
+            : `${scope} ${item}`;
+        })
+        .join(", "),
+    }));
+    const local = new Set(sheet.keyframes.map((keyframes) => keyframes.name));
+    for (const keyframes of sheet.keyframes) {
+      edits.push({ start: keyframes.start, end: keyframes.end, text: rename(keyframes.name) });
+    }
+    for (const decl of sheet.decls) {
+      if (local.size === 0 || !ANIMATION_PROPERTY_RE.test(decl.property)) {
+        continue;
+      }
+      for (const { ident, start } of cssIdents(
+        sheet.source.slice(decl.valueStart, decl.valueEnd),
+      )) {
+        if (local.has(ident)) {
+          const at = decl.valueStart + start;
+          edits.push({ start: at, end: at + ident.length, text: rename(ident) });
+        }
+      }
+    }
+    return edits;
+  };
+}
+
+const ANIMATION_PROPERTY_RE = /^(-\w+-)?animation(-name)?$/i;
+
+/**
+ * Gives the view-transition pseudo-elements the theme's tokens. They hang off the root, not
+ * `.slide`, so `var(--step-transition)` in `::view-transition-new(slide)` would find nothing.
+ * Each rule that sets tokens on every slide gains a twin on `::view-transition` holding those
+ * tokens alone, inside the same at-rule, so the transition sees the values the slides see.
+ */
+export const shareTokensWithTransitions: CssEditor = (sheet) =>
+  outermostStyleRules(sheet).flatMap((rule) => {
+    if (!splitSelectorList(rule.prelude).some((part) => part.trim() === ".slide")) {
+      return [];
+    }
+    const tokens = rule.decls
+      // A `url()` token is an image the transition never draws; copying it would inline it twice.
+      .filter(
+        (decl) =>
+          decl.property.startsWith("--") &&
+          !sheet.urls.some((url) => url.start >= decl.valueStart && url.start < decl.valueEnd),
+      )
+      .map((decl) => `${decl.property}: ${decl.value};`);
+    const at = rule.bodyEnd + 1;
+    return tokens.length === 0
+      ? []
+      : [{ start: at, end: at, text: `\n::view-transition { ${tokens.join(" ")} }` }];
+  });
+
+/**
+ * Each `url()` that `cssUrls` reports rewritten to `url("<replacement>")`, or left as written
+ * when `replace` has none for it.
+ */
+export function replaceUrls(replace: (value: string) => string | undefined): CssEditor {
+  return (sheet) =>
+    sheet.urls.flatMap((url) => {
+      const next = replace(url.value);
+      return next === undefined ? [] : [{ start: url.start, end: url.end, text: `url("${next}")` }];
+    });
+}
+
+/** Whitespace as CSS defines it. U+3000 and NBSP are content, not whitespace. */
+const CSS_WHITESPACE = new Set([" ", "\t", "\n", "\r", "\f"]);
+
+/**
+ * Drops comments and collapses whitespace to one space, leaving strings byte for byte, so
+ * `content: "a　b"` or `"  "` renders in the build as it does on the dev server.
+ */
+export function minifyCss(css: string): string {
+  let out = "";
+  let space = false;
+  let i = 0;
+  while (i < css.length) {
+    const ch = css[i] ?? "";
+    if (ch === "/" && css[i + 1] === "*") {
+      i = consumeComment(css, i);
+      continue;
+    }
+    if (CSS_WHITESPACE.has(ch)) {
+      space = true;
+      i++;
+      continue;
+    }
+    if (space && out !== "") {
+      out += " ";
+    }
+    space = false;
+    const end = ch === '"' || ch === "'" ? consumeString(css, i) : ch === "\\" ? i + 2 : i + 1;
+    out += css.slice(i, end);
+    i = end;
+  }
+  return out;
+}