@hajimism/dek 0.3.3 → 0.5.0

package/src/core/rumdl.ts

@@ -2,9 +2,16 @@ import { dirname } from "node:path";
 import { type Diagnostic, errorDiagnostic } from "./diagnostic.ts";
 import { resolveBinFromAncestors } from "./optional.ts";
 import type { SarifLog } from "./sarif.ts";
-import { awaitPiped, workerCommand } from "./spawn.ts";
+import { OverrunError, runPiped, workerCommand } from "./spawn.ts";
 
-export type RumdlRunner = (scriptPath: string) => Promise<string | null>;
+/** Why lint has no findings from rumdl for a script: the `reason` when dek knows it, and `hung`. */
+export type RumdlSkip = { reason?: string; hung?: true };
+
+/** rumdl's SARIF for a script, or why there is none. */
+export type RumdlRunner = (scriptPath: string) => Promise<string | RumdlSkip>;
+
+/** rumdl checks a script in well under a second; a run this long is one that hangs. */
+const RUMDL_TIMEOUT_MS = 30 * 1000;
 
 export function resolveRumdlBin(): string | undefined {
   if (process.env.DEK_RUMDL) {
@@ -17,30 +24,45 @@ export function resolveRumdlBin(): string | undefined {
   return onPath ?? resolveBinFromAncestors("rumdl", import.meta.dir);
 }
 
-export async function defaultRumdlRunner(scriptPath: string): Promise<string | null> {
+/** Runs rumdl beside the script; one that cannot start says nothing, one that hangs is stopped. */
+export async function defaultRumdlRunner(
+  scriptPath: string,
+  options: { timeoutMs?: number } = {},
+): Promise<string | RumdlSkip> {
   const bin = resolveRumdlBin();
   if (!bin) {
-    return null;
+    return {};
   }
 
+  const timeoutMs = options.timeoutMs ?? RUMDL_TIMEOUT_MS;
   try {
     const args = ["check", scriptPath, "--output-format", "sarif"];
-    const cmd = workerCommand(bin, args);
-    const proc = Bun.spawn(cmd, {
+    // A rumdl that cannot start is skipped below, so its label and hint never reach the user.
+    const { stdout, exitCode, cutShort } = await runPiped(workerCommand(bin, args), {
+      label: "rumdl failed",
+      hint: "",
+      // runPiped passes the environment as it is now, like the PATH rumdl was found on.
       cwd: dirname(scriptPath),
-      // The environment as it is now, like the PATH rumdl was found on; left out, Bun passes
-      // the one the process started with.
-      env: process.env,
-      stdout: "pipe",
-      stderr: "pipe",
+      timeoutMs,
     });
-    const { stdout, exitCode } = await awaitPiped(proc);
     if (exitCode === 2) {
-      return null;
+      return {};
+    }
+    if (cutShort) {
+      return {
+        reason:
+          "rumdl exited while a process it started still held its output, so it was cut short",
+      };
     }
     return stdout;
-  } catch {
-    return null;
+  } catch (error) {
+    if (error instanceof OverrunError) {
+      return {
+        reason: `rumdl did not finish within ${timeoutMs / 1000}s and was stopped`,
+        hung: true,
+      };
+    }
+    return {};
   }
 }
 
@@ -51,34 +73,38 @@ export async function rumdlDiagnostics(
   return (await runRumdl(scriptPath, run)).diagnostics;
 }
 
+/**
+ * rumdl's findings on the script, or why there are none (`skipped`): the deck is not what is
+ * wrong, so lint goes on without them and says why.
+ */
 export async function runRumdl(
   scriptPath: string,
   run: RumdlRunner = defaultRumdlRunner,
-): Promise<{ diagnostics: Diagnostic[]; sarif?: SarifLog; skipped?: boolean }> {
+): Promise<{ diagnostics: Diagnostic[]; sarif?: SarifLog; skipped?: RumdlSkip }> {
   const text = await run(scriptPath);
-  if (text === null) {
-    return { diagnostics: [], skipped: true };
+  if (typeof text !== "string") {
+    return { diagnostics: [], skipped: text };
   }
   return parseRumdlSarif(text);
 }
 
-function parseRumdlSarif(text: string | null): {
+/** rumdl prints SARIF even for a clean script, so anything else is a check that did not happen. */
+const NOT_SARIF: RumdlSkip = { reason: "rumdl printed something other than SARIF" };
+
+function parseRumdlSarif(text: string): {
   diagnostics: Diagnostic[];
   sarif?: SarifLog;
+  skipped?: RumdlSkip;
 } {
-  if (!text?.trim()) {
-    return { diagnostics: [] };
-  }
-
   let parsed: unknown;
   try {
     parsed = JSON.parse(text);
   } catch {
-    return { diagnostics: [] };
+    return { diagnostics: [], skipped: NOT_SARIF };
   }
 
   if (!parsed || typeof parsed !== "object" || !("runs" in parsed) || !Array.isArray(parsed.runs)) {
-    return { diagnostics: [] };
+    return { diagnostics: [], skipped: NOT_SARIF };
   }
 
   const sarif = parsed as SarifLog;

package/src/core/safe-fs.ts

@@ -1,5 +1,6 @@
 import { randomUUID } from "node:crypto";
 import {
+  chmodSync,
   existsSync,
   lstatSync,
   mkdirSync,
@@ -146,7 +147,8 @@ export function writeInside(
 /**
  * Write `data` as a new file at `path`, in a folder already known to be inside the project: a
  * link at `path`, such as one planted at a cache entry's predictable name, is replaced, never
- * written through.
+ * written through. The new file takes `mode`, else the mode of the file it replaces, as a write
+ * in place keeps it, so a script.md only its owner may read stays that way.
  */
 export function replaceFile(
   path: string,
@@ -154,11 +156,16 @@ export function replaceFile(
   options: { mode?: number } = {},
 ): void {
   const temp = join(dirname(path), `.${basename(path)}.${randomUUID().slice(0, 8)}.tmp`);
+  const mode = options.mode ?? modeOf(path);
   writeFileSync(temp, data, {
     flag: "wx",
-    ...(options.mode !== undefined ? { mode: options.mode } : {}),
+    ...(mode !== undefined ? { mode } : {}),
   });
   try {
+    // The mode as it was, not as the umask leaves it on a new file.
+    if (options.mode === undefined && mode !== undefined) {
+      chmodSync(temp, mode);
+    }
     renameSync(temp, path);
   } catch (error) {
     rmSync(temp, { force: true });
@@ -166,6 +173,16 @@ export function replaceFile(
   }
 }
 
+/** The permission bits of the plain file at `path`, if one is there; a link's target is not asked. */
+function modeOf(path: string): number | undefined {
+  try {
+    const stat = lstatSync(path);
+    return stat.isFile() ? stat.mode & 0o777 : undefined;
+  } catch {
+    return undefined;
+  }
+}
+
 /** Remove every link directly in `dir`, a folder of dek's own output that a writer fills by name. */
 export function dropLinks(dir: string): void {
   for (const entry of readdirSync(dir, { withFileTypes: true })) {

package/src/core/sandbox.ts

@@ -0,0 +1,217 @@
+import { DekError } from "./error.ts";
+import { runJsonWorker } from "./spawn.ts";
+
+/**
+ * Set to 1, the user accepts that Chromium draws without its sandbox where the sandbox cannot
+ * start, as in a container running as root: a ref's slides too, which are refused otherwise, and
+ * the project's own with no warning. Read only from the environment dek starts in (ADR 12).
+ */
+const ALLOW_UNSANDBOXED = "DEK_ALLOW_UNSANDBOXED";
+
+/**
+ * What a Playwright worker is told of Chromium's sandbox: draw only inside it, or inside it where
+ * it starts and without it where it does not. A worker told anything else requires it.
+ */
+export type SandboxMode = "required" | "preferred";
+
+/** Chromium drew without its sandbox: why, in Chromium's words, and how to have it back. */
+type Unsandboxed = { reason: string; hint: string };
+
+function accepted(): boolean {
+  return process.env[ALLOW_UNSANDBOXED] === "1";
+}
+
+/**
+ * How a worker may draw: a ref's slide scripts are someone else's, so only in the sandbox unless
+ * the user accepted otherwise; the project's own wherever Chromium starts (ADR 29).
+ */
+export function sandboxMode(ref: boolean): SandboxMode {
+  return ref && !accepted() ? "required" : "preferred";
+}
+
+/**
+ * What Chromium says when its sandbox cannot start: as root, without user namespaces, or with its
+ * SUID helper set up wrong; then what Playwright 1.64 puts in place of Chromium's log when it holds
+ * one of those, which the call log after it still holds.
+ */
+const SANDBOX_SAYS = [
+  /No usable sandbox!|Running as root without --no-sandbox|SUID sandbox helper|Failed to move to new namespace|Received invalid process ID for zygote/,
+  /Chromium sandboxing failed!/,
+];
+
+/** A line Chromium wrote to stderr, as Playwright's call log marks it, or one it logged as FATAL. */
+const CHROMIUM_SAYS = /\[err\]|FATAL/;
+
+/** The most of a line a reason keeps, in whole sentences; it keeps the first however long. */
+const REASON_CHARS = 280;
+
+/** A sentence: up to a `.`, `!`, or `?` that ends a word, outside parentheses, as `(0 vs. 1)` is. */
+const SENTENCE = /(?:\([^)]*\)|\((?!\)|$)|[^()!?\.]|[.!?](?!\s|$))+(?:[.!?]+|$)/g;
+
+/**
+ * What Chromium said when it failed: its words for a sandbox that cannot start, else its first
+ * line of error, past the call log's `- [pid=…][err]` and its own `[…:FATAL:…]`. Undefined when
+ * it said nothing, as when Playwright found no Chromium to start.
+ */
+export function chromiumFailure(error: unknown): string | undefined {
+  const lines = (error instanceof Error ? error.message : String(error)).split("\n");
+  for (const pattern of [...SANDBOX_SAYS, CHROMIUM_SAYS]) {
+    const line = lines.find((text) => pattern.test(text));
+    if (line !== undefined) {
+      return sentences(line.replace(/^[\s-]*(?:\[[^\]]*\]\s*)*/, ""));
+    }
+  }
+  return undefined;
+}
+
+/**
+ * Why a launch failed, in a line: what Chromium said, else the first line of Playwright's error.
+ * Never the command line Playwright's call log opens with, or its advice to launch without the
+ * sandbox.
+ */
+export function launchFailure(error: unknown): string {
+  const first = (error instanceof Error ? error.message : String(error)).split("\n")[0] ?? "";
+  return chromiumFailure(error) ?? sentences(first);
+}
+
+function sentences(text: string): string {
+  let kept = "";
+  for (const [found] of text.trim().matchAll(SENTENCE)) {
+    const sentence = found.trim();
+    const next = kept ? `${kept} ${sentence}` : sentence;
+    if (kept && next.length > REASON_CHARS) {
+      break;
+    }
+    kept = next;
+  }
+  return kept || text.trim();
+}
+
+const GENERAL_HELP =
+  "run dekc where Chromium's sandbox can start: as a user other than root, with user namespaces allowed (on Ubuntu 23.10 and later, `sudo sysctl -w kernel.apparmor_restrict_unprivileged_userns=0`)";
+
+/** What lets the sandbox start, for what Chromium said. */
+function sandboxHelp(reason: string): string {
+  if (/Running as root/.test(reason)) {
+    return "run dekc as a user other than root, where Chromium's sandbox can start";
+  }
+  if (/No usable sandbox|namespace|zygote|AppArmor/i.test(reason)) {
+    return "let Chromium make user namespaces: on Ubuntu 23.10 and later, `sudo sysctl -w kernel.apparmor_restrict_unprivileged_userns=0`, or an AppArmor profile for it; in a container, a seccomp profile that allows them";
+  }
+  return GENERAL_HELP;
+}
+
+/** How to have the sandbox back, and while the user has not, how to accept going without it. */
+function unsandboxedHint(reason: string): string {
+  const help = sandboxHelp(reason);
+  return accepted() ? help : `${help}; or set ${ALLOW_UNSANDBOXED}=1 to accept drawing without it`;
+}
+
+/** Why Chromium drew without its sandbox in this run, once it has; see `takeUnsandboxed`. */
+let drewUnsandboxed: string | undefined;
+
+/**
+ * Says on stderr that Chromium drew without its sandbox, once a run, as lint --visual starts a
+ * worker or two per deck and the dev server one per pass; and keeps why, for the result. The
+ * project's own pages go unsaid once the user accepted it, a ref's never: it is someone else's code.
+ */
+function noteUnsandboxed(reason: string, ref: boolean): void {
+  if (drewUnsandboxed === undefined && (ref || !accepted())) {
+    process.stderr.write(
+      ref
+        ? `warning: Chromium drew a ref without its sandbox, as ${ALLOW_UNSANDBOXED}=1 lets it: ${reason}\n  help: ${sandboxHelp(reason)}\n`
+        : `warning: Chromium drew without its sandbox, which did not start here: ${reason}\n  help: ${unsandboxedHint(reason)}\n`,
+    );
+  }
+  drewUnsandboxed = reason;
+}
+
+/**
+ * `{ unsandboxed }` when Chromium drew without its sandbox since the last call, for the result's
+ * `--json`, and nothing otherwise, as `skipped` is absent when every check ran. Each call starts
+ * the next run afresh.
+ */
+export function takeUnsandboxed(): { unsandboxed?: Unsandboxed } {
+  const reason = drewUnsandboxed;
+  drewUnsandboxed = undefined;
+  return reason === undefined ? {} : { unsandboxed: { reason, hint: unsandboxedHint(reason) } };
+}
+
+/**
+ * A worker's answer and why it drew without the sandbox; or, having drawn nothing, why the
+ * sandbox did not start, and why Chromium did not start without it either when it tried.
+ */
+type Drawn<T> =
+  | { answer: T; unsandboxed?: string }
+  | { refused: string }
+  | { failed: string; unsandboxed: string };
+
+/** The worker's JSON as `parse` reads it, with what it says of the sandbox. */
+function readDrawn<T>(
+  text: string,
+  sandbox: SandboxMode,
+  parse: (text: string) => T | null,
+): Drawn<T> | null {
+  let said: { unsandboxed?: unknown; failed?: unknown } | null;
+  try {
+    said = JSON.parse(text);
+  } catch {
+    return null;
+  }
+  const { unsandboxed, failed } = said ?? {};
+  if (unsandboxed !== undefined && typeof unsandboxed !== "string") {
+    return null;
+  }
+  if (typeof unsandboxed === "string" && typeof failed === "string") {
+    return { failed, unsandboxed };
+  }
+  if (unsandboxed !== undefined && sandbox === "required") {
+    return { refused: unsandboxed };
+  }
+  const answer = parse(text);
+  return answer === null ? null : { answer, ...(unsandboxed === undefined ? {} : { unsandboxed }) };
+}
+
+/**
+ * Runs a Playwright worker as `runJsonWorker` does, telling it how it may draw: `ref` pages only in
+ * Chromium's sandbox unless the user accepted otherwise. A draw without the sandbox is said and
+ * kept for the result; a ref's pages the sandbox could not hold are refused, undrawn.
+ */
+export async function runDrawingWorker<T>(
+  cmd: string[],
+  request: object,
+  parse: (text: string) => T | null,
+  options: Parameters<typeof runJsonWorker>[3] & { ref?: boolean },
+): Promise<T> {
+  const { ref = false, ...worker } = options;
+  const sandbox = sandboxMode(ref);
+  const drawn = await runJsonWorker(
+    cmd,
+    { ...request, sandbox },
+    (text) => readDrawn(text, sandbox, parse),
+    worker,
+  );
+  if ("failed" in drawn) {
+    const first =
+      drawn.failed === drawn.unsandboxed ? "" : `; with it, Chromium said: ${drawn.unsandboxed}`;
+    throw new DekError(`Chromium did not start, with its sandbox or without: ${drawn.failed}`, {
+      hint: `${worker.hint}${first}`,
+    });
+  }
+  if ("refused" in drawn) {
+    // A failure that names no sandbox may be Chromium missing as well.
+    const missing = /sandbox|namespace|zygote|as root/i.test(drawn.refused)
+      ? ""
+      : `${worker.hint}; or `;
+    throw new DekError(
+      `Chromium did not start with its sandbox here, and a ref is drawn only inside it: ${drawn.refused}`,
+      {
+        hint: `${missing}${sandboxHelp(drawn.refused)}; if you accept running this ref's slide scripts without the sandbox, set ${ALLOW_UNSANDBOXED}=1 and run again`,
+      },
+    );
+  }
+  if (drawn.unsandboxed !== undefined) {
+    noteUnsandboxed(drawn.unsandboxed, ref);
+  }
+  return drawn.answer;
+}

package/src/core/shot/morph.ts

@@ -62,7 +62,7 @@ export async function shotMorph(
   const step = stepKey(fromSection.beats, from.beatIndex);
 
   const html = videoDocument(resolved, options.playerScript);
-  const entry = morphEntry(deck.dir, options.from, options.to, at, html);
+  const entry = morphEntry(deck, options.from, options.to, at, html);
   if (!entry.cached) {
     await requirePlaywright(
       {

package/src/core/shot/motion.ts

@@ -2,7 +2,6 @@ import { readFileSync } from "node:fs";
 import { isAbsolute, join, relative } from "node:path";
 import pkg from "../../../package.json";
 import { DekError } from "../error.ts";
-import { deckProjectRoot } from "../path.ts";
 import { type PlaywrightRunner, requirePlaywright } from "../playwright.ts";
 import { deckStops, retreat } from "../position.ts";
 import { asResolvedDeck, type ResolvedDeck, requireSection } from "../resolve.ts";
@@ -103,7 +102,7 @@ export async function shotMotion(
   const key = `${JSON.stringify([pkg.version, SHEET_LAYOUT_VERSION, MOTION_FRACTIONS, plan.from, beats, title])}\0${html}`;
   // Each step keeps its own entry, so runs of different steps neither evict nor race each other.
   const capture = options.step === undefined ? [section.slug] : [section.slug, String(first)];
-  const bundle = bundleEntry(deck.dir, "motion", capture, key);
+  const bundle = bundleEntry(deck, "motion", capture, key);
   const manifest = join(bundle.dir, "motion.json");
   const cached = readMotionManifest(manifest, bundle.dir);
   if (cached) {
@@ -112,7 +111,7 @@ export async function shotMotion(
   }
   // Chromium writes the frames and sheets by name, so no link may stand where one goes.
   dropLinks(bundle.dir);
-  dropLinks(outputDir(join(bundle.dir, "frames"), deckProjectRoot(deck.dir)));
+  dropLinks(outputDir(join(bundle.dir, "frames"), bundle.root));
 
   const response = await requirePlaywright(
     {

package/src/core/shot/still.ts

@@ -84,7 +84,7 @@ export async function shotSheet(
   }));
   // The tiles' paths hash what they show, so the key changes whenever a tile does.
   const bundle = bundleEntry(
-    deck.dir,
+    deck,
     "sheets",
     [],
     JSON.stringify([SHEET_LAYOUT_VERSION, deck.deck.title, cells]),
@@ -136,7 +136,7 @@ export function still(
   step: string = stepKey(section.beats, beatIndex),
 ): Still {
   const html = renderSlideHtml(sources, section.slug, beatIndex);
-  const entry = stillEntry(deck.dir, section, beatIndex, html);
+  const entry = stillEntry(deck, section, beatIndex, html);
   return { html, slug: section.slug, step, screenshotPath: entry.path, entry };
 }
 

package/src/core/shot-cache.ts

@@ -1,8 +1,10 @@
 import { createHash } from "node:crypto";
+// biome-ignore lint/style/noRestrictedImports: rmSync, which prunes old entries by name in the folder outputDir returned, and takes a link, not its target.
 import { readdirSync, rmSync } from "node:fs";
 import { join } from "node:path";
 import { escapeRegExp } from "./escape.ts";
 import { cacheDir, deckProjectRoot } from "./path.ts";
+import type { ProjectDeck } from "./resolve.ts";
 import { isCachedFile, outputDir } from "./safe-fs.ts";
 import type { Section } from "./schema.ts";
 import { lastStop, stepKey } from "./step.ts";
@@ -26,12 +28,22 @@ export type CacheEntry = {
 /** A cached folder of files, such as a set of contact sheets. */
 type CacheBundle = {
   dir: string;
+  /** The project the folder is in, for what a capture writes inside it. */
+  root: string;
   commit(): void;
 };
 
-/** `.cache/shots`, made if missing, where it really is; a link out of the project is an error. */
-function shotsDir(deckDir: string): string {
-  return outputDir(cacheDir(deckDir, "shots"), deckProjectRoot(deckDir));
+/** The deck a capture is of: its folder, and for a ref, where its cache is instead. */
+type ShotDeck = Pick<ProjectDeck, "dir" | "cache">;
+
+/**
+ * `.cache/shots`, made if missing, where it really is, and the project it is in; a link out of
+ * the project is an error. A ref's shots go in the cache of the project that reads it.
+ */
+function shotsDir(deck: ShotDeck): { dir: string; root: string } {
+  const root = deck.cache?.root ?? deckProjectRoot(deck.dir);
+  const dir = deck.cache ? join(deck.cache.dir, "shots") : cacheDir(deck.dir, "shots");
+  return { dir: outputDir(dir, root), root };
 }
 
 function contentHash(text: string): string {
@@ -52,7 +64,7 @@ export function shotName(parts: string[], content: string): string {
  * `--step 2` and a still at the last beat, `dekc build`'s link preview included, are one file.
  */
 export function stillEntry(
-  deckDir: string,
+  deck: ShotDeck,
   section: Section,
   beatIndex: number,
   html: string,
@@ -64,18 +76,18 @@ export function stillEntry(
     `${section.slug}-${step}`,
     `${section.slug}-${beatIndex}`,
   ];
-  return fileEntry(deckDir, [section.slug, step], html, legacy);
+  return fileEntry(deck, [section.slug, step], html, legacy);
 }
 
 /** The frame `at` of the move from `from` into `to`. */
 export function morphEntry(
-  deckDir: string,
+  deck: ShotDeck,
   from: string,
   to: string,
   at: number,
   html: string,
 ): CacheEntry {
-  return fileEntry(deckDir, [from, to, String(at)], `${at}\0${html}`, [`${from}-to-${to}-${at}`]);
+  return fileEntry(deck, [from, to, String(at)], `${at}\0${html}`, [`${from}-to-${to}-${at}`]);
 }
 
 /**
@@ -83,29 +95,26 @@ export function morphEntry(
  * folder, so runs of different captures neither evict nor race each other.
  */
 export function bundleEntry(
-  deckDir: string,
+  deck: ShotDeck,
   kind: "sheets" | "motion",
   parts: string[],
   content: string,
 ): CacheBundle {
-  const root = deckProjectRoot(deckDir);
-  const parent = outputDir(join(shotsDir(deckDir), kind), root);
+  const shots = shotsDir(deck);
+  const { root } = shots;
+  const parent = outputDir(join(shots.dir, kind), root);
   const base = parts.join(SEPARATOR);
   const name = base ? `${base}.${contentHash(content)}` : contentHash(content);
   const pattern = new RegExp(`^${base ? `${escapeRegExp(base)}\\.` : ""}${HASH}$`);
   return {
     dir: outputDir(join(parent, name), root),
+    root,
     commit: () => prune(parent, [pattern], name, { recursive: true }),
   };
 }
 
-function fileEntry(
-  deckDir: string,
-  parts: string[],
-  content: string,
-  legacy: string[],
-): CacheEntry {
-  const dir = shotsDir(deckDir);
+function fileEntry(deck: ShotDeck, parts: string[], content: string, legacy: string[]): CacheEntry {
+  const { dir } = shotsDir(deck);
   const name = shotName(parts, content);
   const path = join(dir, name);
   const patterns = [

package/src/core/slide-eval-worker.ts

@@ -6,6 +6,7 @@
  * that never ends is cut off; the parent's timeout covers anything that
  * escapes into the microtask queue.
  */
+// biome-ignore lint/style/noRestrictedImports: writeSync, to stdout (fd 1), so each answer is out before the worker is killed or exits.
 import { readFileSync, writeSync } from "node:fs";
 import vm from "node:vm";
 

package/src/core/slide-measure.ts

@@ -45,6 +45,22 @@ export type MeasuredElement = {
   picture: boolean;
   /** Whether it paints its own box: a background, or a border in a color that shows. */
   paints: boolean;
+  /**
+   * Whether it is laid out on a line of text, as `<strong>` or an inline-block chip is, rather
+   * than as a box of its own: it sits on the line's baseline.
+   */
+  inline: boolean;
+  /**
+   * Whether a transform turns or skews it, its own or an ancestor's: its box is then the box
+   * around its shape, not the shape the audience sees.
+   */
+  tilted: boolean;
+  /**
+   * Where the first line of its own text sits, in viewport pixels from the top: the baseline of
+   * its first text node's first line, which is not its first line when an inline element such as
+   * `<strong>` opens it.
+   */
+  baseline?: number;
   /**
    * What an ancestor inside the slide cuts it to, with `overflow` other than `visible`: the
    * nearest such ancestor, and the box every one of them leaves visible. `intended` when the cut is
@@ -196,6 +212,35 @@ export function measureSlideInPage(): SlideMeasure {
         .map(toBox);
     });
 
+  // Turned or skewed, by its own transform or rotate, or an ancestor's.
+  const tilts = new Map<Element, boolean>();
+  const tilted = (el: Element | null): boolean => {
+    if (!el || el === slide) {
+      return false;
+    }
+    const known = tilts.get(el);
+    if (known !== undefined) {
+      return known;
+    }
+    const style = getComputedStyle(el);
+    const matrix = style.transform === "none" ? undefined : new DOMMatrixReadOnly(style.transform);
+    const own =
+      (matrix !== undefined && (matrix.b !== 0 || matrix.c !== 0)) ||
+      (style.rotate !== "none" && style.rotate !== "");
+    const found = own || tilted(el.parentElement);
+    tilts.set(el, found);
+    return found;
+  };
+  // A line's baseline sits the font's ascent below the top of the box its text is drawn in.
+  const metrics = document.createElement("canvas").getContext("2d");
+  const baselineOf = (style: CSSStyleDeclaration, line: Box | undefined): number | undefined => {
+    if (!line || !metrics) {
+      return undefined;
+    }
+    metrics.font = `${style.fontStyle} ${style.fontWeight} ${style.fontSize} ${style.fontFamily}`;
+    return line.top + metrics.measureText("x").fontBoundingBoxAscent;
+  };
+
   const all = [...slide.querySelectorAll("*")];
   const indexOf = new Map(all.map((el, index) => [el, index]));
   const elements = all.map((el): MeasuredElement => {
@@ -209,19 +254,24 @@ export function measureSlideInPage(): SlideMeasure {
     const whole = el instanceof HTMLElement ? el.innerText : el.textContent;
     const text = own || squash(whole ?? "");
     const parentEl = el.parentElement;
+    const textRects = lineBoxes(textNodes);
+    const baseline = baselineOf(style, textRects[0]);
     return {
       box: describe(el),
       parent: parentEl ? (indexOf.get(parentEl) ?? -1) : -1,
       rect: extent(el, textNodes),
       ...(text ? { text } : {}),
       ownText: own !== "",
-      textRects: lineBoxes(textNodes),
+      textRects,
+      ...(baseline !== undefined ? { baseline } : {}),
       opacity: opacityOf(el),
       fontSize: Number.parseFloat(style.fontSize),
       fontWeight: Number(style.fontWeight) || 400,
       decorative: el.closest('[aria-hidden="true"]') !== null,
       picture: pictures.has(el.tagName.toLowerCase()) || style.backgroundImage.includes("url("),
       paints: paints(style),
+      inline: style.display.startsWith("inline"),
+      tilted: tilted(el),
       ...clipped(clipOf(el)),
     };
   });