@hajimism/dek 0.2.0 → 0.2.2

package/src/core/html-scan.ts

@@ -39,8 +39,17 @@ export type HtmlScan = {
    * collapsed. An SVG's `<title>` and `<desc>` describe it and are never drawn, so they hold none.
    */
   hiddenTexts: Array<{ element: HtmlElement; text: string }>;
+  /**
+   * Each outermost picture a screen reader is not told to skip: an `<img>`, an `<svg>`, or an
+   * element with `role="img"`, none of them under `aria-hidden="true"`. `text` says whether it
+   * holds any text to read, and `titled` whether a `<title>` inside it names it.
+   */
+  pictures: Picture[];
 };
 
+/** A picture in the markup, with what it holds that a screen reader could say. */
+export type Picture = { element: HtmlElement; text: boolean; titled: boolean };
+
 const HEADING_TAGS = new Set(["h1", "h2", "h3", "h4", "h5", "h6"]);
 /** Elements that give a heading something to show without any text. */
 const CONTENT_TAGS = new Set(["img", "svg", "picture", "video", "canvas", "object", "math"]);
@@ -62,6 +71,10 @@ export function scanSlideHtml(html: string): HtmlScan {
   // The outermost aria-hidden element still open, and how many undrawn elements are open in it.
   let hiding: { index: number; text: string } | undefined;
   let undrawn = 0;
+  // The outermost picture still open, and whether a <title> inside it is open.
+  const pictures: Array<{ index: number; text: boolean; titled: boolean }> = [];
+  let picture: { index: number; text: boolean; titled: boolean } | undefined;
+  let titles = 0;
 
   const transformed = new HTMLRewriter()
     .on("*", {
@@ -94,6 +107,27 @@ export function scanSlideHtml(html: string): HtmlScan {
             hiding = undefined;
           });
         }
+        if (picture) {
+          if (tag === "title" && el.canHaveContent) {
+            titles++;
+            el.onEndTag(() => {
+              titles--;
+            });
+          }
+        } else if (
+          !hiding &&
+          el.getAttribute("aria-hidden")?.trim() !== "true" &&
+          isPicture(tag, el.getAttribute("role"))
+        ) {
+          const entry = { index: parsed.length, text: false, titled: false };
+          pictures.push(entry);
+          if (el.canHaveContent) {
+            picture = entry;
+            el.onEndTag(() => {
+              picture = undefined;
+            });
+          }
+        }
         if (HEADING_TAGS.has(tag) && el.canHaveContent) {
           const heading = {
             index: parsed.length,
@@ -119,6 +153,10 @@ export function scanSlideHtml(html: string): HtmlScan {
         if (hiding && undrawn === 0) {
           hiding.text += chunk.text;
         }
+        if (picture && !hiding && chunk.text.trim() !== "") {
+          picture.text = true;
+          picture.titled ||= titles > 0;
+        }
         if (open.length > 0 && chunk.text.trim() !== "") {
           for (const heading of open) {
             heading.content = true;
@@ -187,9 +225,25 @@ export function scanSlideHtml(html: string): HtmlScan {
       const squashed = text.replace(/\s+/g, " ").trim();
       return element && squashed !== "" ? [{ element, text: squashed }] : [];
     }),
+    pictures: pictures.flatMap(({ index, text, titled }) => {
+      const element = elements[index];
+      return element ? [{ element, text, titled }] : [];
+    }),
   };
 }
 
+/**
+ * Whether an element draws a picture a screen reader must be told about. `role="presentation"`
+ * or `"none"` says it is decoration, as `aria-hidden` does.
+ */
+function isPicture(tag: string, role: string | null): boolean {
+  const roles = (role ?? "").trim().toLowerCase().split(/\s+/);
+  if (roles[0] === "presentation" || roles[0] === "none") {
+    return false;
+  }
+  return tag === "img" || tag === "svg" || roles[0] === "img";
+}
+
 /** The value of `name` on `element`, as the parser read it. */
 function attributeValue(element: HtmlElement, name: string): string | undefined {
   return element.attributes.find((attribute) => attribute.name === name)?.value;

package/src/core/html.ts

@@ -1,6 +1,8 @@
+import { cutText } from "./annotation-rows.ts";
 import { assetInliner } from "./assets.ts";
 import { deckPaths } from "./deck-paths.ts";
 import { escapeAttr, escapeHtml } from "./escape.ts";
+import { type LineColumn, lineLocator } from "./lines.ts";
 import { isInside } from "./path.ts";
 import { type ProjectDeck, readDeckFile } from "./resolve.ts";
 import { FALLBACK_LANG, type Section } from "./schema.ts";
@@ -41,6 +43,11 @@ export function hasSlideClass(className: string | null | undefined): boolean {
  * written. A slide that never closes runs to `</body>`, or to the end.
  */
 export function extractSlideSection(html: string): string | undefined {
+  return locateSlideSection(html)?.section;
+}
+
+/** The first slide section, as `extractSlideSection` reads it, and the offset it starts at. */
+function locateSlideSection(html: string): { section: string; start: number } | undefined {
   const mark = uniqueMark(html);
   let found = false;
   let closed = false;
@@ -68,10 +75,13 @@ export function extractSlideSection(html: string): string | undefined {
     : undefined;
   // The parser closes an unclosed slide at the end of its parent, past `</body>`.
   if (slide !== undefined && /<\/section\s*>$/i.test(slide)) {
-    return slide;
+    return { section: slide, start };
   }
   const bodyClose = html.slice(start).search(/<\/body>/i);
-  return bodyClose >= 0 ? html.slice(start, start + bodyClose) : html.slice(start);
+  return {
+    section: bodyClose >= 0 ? html.slice(start, start + bodyClose) : html.slice(start),
+    start,
+  };
 }
 
 /** A deck's slide markup, each file read at most once. */
@@ -86,32 +96,43 @@ export type DeckSlides = {
    * stops on them, because at the venue a deck that shows beats one that does not.
    */
   section(slug: string): string;
+  /** Where the written section is in `slides/<slug>.html`; none for a skeleton. */
+  source(slug: string): SlideSource | undefined;
 };
 
+/** A slide file and the offset its section starts at: the section is `file` from `start`. */
+type SlideSource = { file: string; start: number };
+
 export function deckSlides(deck: ProjectDeck): DeckSlides {
   const paths = deckPaths(deck.dir);
-  const read = new Map<string, string | undefined>();
+  const read = new Map<string, (SlideSource & { section: string }) | undefined>();
   let layouts: SkeletonLayouts | undefined;
   const skeleton = (slug: string): string | undefined => {
     layouts ??= deckLayouts(deck.dir);
     return skeletonHtml(deck.deck, slug, layouts);
   };
-  const written = (slug: string): string | undefined => {
+  const located = (slug: string): (SlideSource & { section: string }) | undefined => {
     if (!read.has(slug)) {
       const path = paths.slide(slug, ".html");
       // A slug from a URL may try to climb out of slides/.
-      const source =
+      const file =
         isSafeSlideSlug(slug) && isInside(path, paths.slides)
           ? readDeckFile(deck.dir, path)
           : undefined;
-      read.set(slug, source === undefined ? undefined : extractSlideSection(source));
+      const found = file === undefined ? undefined : locateSlideSection(file);
+      read.set(slug, file !== undefined && found ? { file, ...found } : undefined);
     }
     return read.get(slug);
   };
+  const written = (slug: string): string | undefined => located(slug)?.section;
   return {
     has: (slug) => written(slug) !== undefined,
     written,
     section: (slug) => written(slug) ?? extractSlideSection(skeleton(slug) ?? "") ?? "",
+    source(slug) {
+      const found = located(slug);
+      return found && { file: found.file, start: found.start };
+    },
   };
 }
 
@@ -140,15 +161,24 @@ export type SlideStamp = {
   beat?: { index: number; step: string };
   /** Inline the deck's files as data: URIs, for a page that stands alone. */
   inline?: { deckDir: string };
+  /**
+   * Where the section is written, for the dev server's pages: every start tag then says where
+   * in the file it is, as `data-dek-source="<line>:<column>"`, and the classes it is written
+   * with, as `data-dek-class`, so annotate mode can name it as the file does whatever a script
+   * adds to it.
+   */
+  source?: SlideSource;
 };
 
 /**
  * One slide section with what the page needs on it, in one parser pass: its `data-slug` unless
- * it names its own, its place as `--dek-slide-number` and `--dek-slide-count`, and for a still
- * page the classes and beat the player would have set.
+ * it names its own, its place as `--dek-slide-number` and `--dek-slide-count`, for a still page
+ * the classes and beat the player would have set, and for the dev server where each tag is
+ * written.
  */
 export function stampSlide(html: string, stamp: SlideStamp): string {
   let done = false;
+  const spots = stamp.source && startTagSpots(html, stamp.source);
   return rewriteHtml(html, (rewriter) => {
     rewriter.on("section", {
       element(el) {
@@ -186,21 +216,121 @@ export function stampSlide(html: string, stamp: SlideStamp): string {
     if (stamp.inline) {
       rewriter.on("*", assetInliner(stamp.inline.deckDir));
     }
+    if (spots) {
+      // The same parser over the same markup meets the start tags in the same order.
+      let index = 0;
+      rewriter.on("*", {
+        element(el) {
+          const spot = spots[index++];
+          if (spot) {
+            el.setAttribute("data-dek-source", `${spot.line}:${spot.column}`);
+            if (spot.classes !== undefined) {
+              el.setAttribute("data-dek-class", spot.classes);
+            }
+          }
+        },
+      });
+    }
+  });
+}
+
+/**
+ * Where a start tag is written, its tag, its classes as written (none when it has no `class`),
+ * and the text inside it as written, whitespace collapsed.
+ */
+type TagSpot = LineColumn & { tag: string; classes?: string; text: string };
+
+/**
+ * Where each start tag of `html` is written in the file it was taken from, in document order,
+ * read before anything else touches the markup. A marker goes in front of each tag; where the
+ * markers land, less their own length, is where the tags were.
+ */
+function startTagSpots(html: string, source: SlideSource): TagSpot[] {
+  const mark = uniqueMark(html);
+  const tags: Array<{ tag: string; classes: string | null; text: string }> = [];
+  const open: number[] = [];
+  const marked = rewriteHtml(html, (rewriter) => {
+    rewriter.on("*", {
+      element(el) {
+        el.before(mark, { html: true });
+        const index = tags.length;
+        tags.push({ tag: el.tagName.toLowerCase(), classes: el.getAttribute("class"), text: "" });
+        if (el.canHaveContent) {
+          open.push(index);
+          el.onEndTag(() => {
+            open.splice(open.lastIndexOf(index), 1);
+          });
+        }
+      },
+    });
+    rewriter.onDocument({
+      text(chunk) {
+        for (const index of open) {
+          const tag = tags[index];
+          if (tag) {
+            tag.text += chunk.text;
+          }
+        }
+      },
+    });
   });
+  const spot = lineLocator(source.file);
+  let offset = source.start;
+  return marked
+    .split(mark)
+    .slice(0, -1)
+    .map((before, index) => {
+      offset += before.length;
+      const { tag = "", classes = null, text = "" } = tags[index] ?? {};
+      const found = { ...spot(offset), tag, text: text.replace(/\s+/g, " ").trim() };
+      return classes === null
+        ? found
+        : { ...found, classes: classes.split(/\s+/).filter(Boolean).join(" ") };
+    });
 }
 
-/** Every slide of the deck in script order, as the player pages hold them. */
-export function collectSlidesHtml(deck: ProjectDeck, options: { inline: boolean }): string {
+/**
+ * An element of a written slide as annotate mode names it, whatever a script adds to it: where
+ * its start tag is written, `<line>:<column>`, its tag and classes as written, as `div.chevron`,
+ * and its text as written, cut short. The slide itself has no text: all of the slide names
+ * nothing.
+ */
+export type WrittenElement = { source: string; name: string; text: string };
+
+/** Every element of the slide `slides/<slug>.html` writes, in document order; none for a skeleton. */
+export function writtenElements(slides: DeckSlides, slug: string): WrittenElement[] | undefined {
+  const html = slides.written(slug);
+  const source = slides.source(slug);
+  if (html === undefined || source === undefined) {
+    return undefined;
+  }
+  return startTagSpots(html, source).map((spot, index) => ({
+    source: `${spot.line}:${spot.column}`,
+    name: [spot.tag, ...(spot.classes ?? "").split(" ").filter(Boolean)].join("."),
+    text: index === 0 ? "" : cutText(spot.text),
+  }));
+}
+
+/**
+ * Every slide of the deck in script order, as the player pages hold them. `sources` says where
+ * each tag is written, for the dev server's pages.
+ */
+export function collectSlidesHtml(
+  deck: ProjectDeck,
+  options: { inline: boolean; sources?: boolean },
+): string {
   const slides = deckSlides(deck);
   const { sections } = deck.deck;
   return sections
-    .map((section, index) =>
-      stampSlide(slides.section(section.slug), {
+    .map((section, index) => {
+      const source = options.sources ? slides.source(section.slug) : undefined;
+      return stampSlide(slides.section(section.slug), {
         slug: section.slug,
         place: slidePlace(sections, index),
         ...(options.inline ? { inline: { deckDir: deck.dir } } : {}),
-      }),
-    )
+        ...(source ? { source } : {}),
+      });
+    })
     .join("");
 }
 

package/src/core/lint/slide-html.ts

@@ -1,8 +1,9 @@
 import { type Diagnostic, diag } from "../diagnostic.ts";
-import type { HtmlAttribute, HtmlScan, SourceSpot } from "../html-scan.ts";
+import type { HtmlAttribute, HtmlScan, Picture, SourceSpot } from "../html-scan.ts";
 import type { Section } from "../schema.ts";
 import { beatAt, formatStepChoices, resolveStep, stepChoices } from "../step.ts";
 import { suggest } from "../suggest.ts";
+import { RUNTIME_CLASSES } from "../theme-facts.ts";
 import { isUrlAttribute } from "../url-attributes.ts";
 import { assetRefDiagnostics } from "./asset-refs.ts";
 import { RESERVED_MORPHS } from "./morph.ts";
@@ -52,6 +53,7 @@ export function lintSlideHtml(
     ...presentationDiagnostics(slide),
     ...emptyHeadingDiagnostics(slide),
     ...hiddenTextDiagnostics(slide),
+    ...pictureDiagnostics(slide),
     ...(options.classes
       ? unknownClassDiagnostics(slide, options.classes, options.hasScript === true)
       : []),
@@ -442,7 +444,85 @@ function hiddenTextDiagnostics({ section, path, scan }: SlideHtml): Diagnostic[]
   });
 }
 
-/** DEK010: a class neither theme.css nor the slide's own stylesheet defines. */
+/**
+ * DEK034: a picture with nothing for a screen reader to say: an `<img>` without `alt`, an `<svg>`
+ * with no text and no name, or an element whose `role="img"` has no name. Each is either content,
+ * which wants words, or decoration, which says so: `alt=""` or `aria-hidden="true"`. An SVG with
+ * text of its own is read as it is, so the hint never sends a labeled figure to `aria-hidden`,
+ * where DEK029 would warn of it.
+ */
+function pictureDiagnostics({ section, path, scan }: SlideHtml): Diagnostic[] {
+  return scan.pictures.flatMap((picture) => {
+    const found = unnamedPicture(picture);
+    return found
+      ? [
+          diag("DEK034", {
+            message: found.message,
+            path,
+            ...spotOf(picture.element),
+            slug: section.slug,
+            hint: found.hint,
+            data: found.data,
+          }),
+        ]
+      : [];
+  });
+}
+
+function unnamedPicture({
+  element,
+  text,
+  titled,
+}: Picture): { message: string; hint: string; data: Record<string, string> } | undefined {
+  const value = (name: string): string | undefined =>
+    element.attributes.find((attribute) => attribute.name === name)?.value;
+  const named = [value("aria-label"), value("aria-labelledby"), value("title")].some(
+    (name) => name !== undefined && name.trim() !== "",
+  );
+  const { tag } = element;
+  if (named || (tag === "img" && value("alt") !== undefined)) {
+    return undefined;
+  }
+  if ((value("role") ?? "").trim().toLowerCase().split(/\s+/)[0] === "img") {
+    if (titled) {
+      return undefined;
+    }
+    const data = { tag, role: "img" };
+    return text
+      ? {
+          message: `<${tag} role="img"> has no name, and role="img" keeps a screen reader from reading its text`,
+          hint: 'give it aria-label="…" saying what it shows, or remove role="img" so its text is read',
+          data,
+        }
+      : {
+          message: `<${tag} role="img"> has no name, so a screen reader cannot say what it shows`,
+          hint: 'give it aria-label="…" saying what it shows, or replace role="img" with aria-hidden="true" if it is decoration',
+          data,
+        };
+  }
+  if (tag === "img") {
+    const src = value("src");
+    return {
+      message: `<img${src === undefined ? "" : ` src="${src}"`}> has no alt, so a screen reader cannot say what it shows`,
+      hint: 'add alt="…" saying what the picture shows, or alt="" if it is decoration',
+      data: src === undefined ? { tag } : { tag, src },
+    };
+  }
+  if (text) {
+    return undefined;
+  }
+  return {
+    message: `<${tag}> has nothing to read and no name, so a screen reader skips what it shows`,
+    hint: 'give it role="img" and aria-label="…" saying what it shows, or aria-hidden="true" if it is decoration',
+    data: { tag },
+  };
+}
+
+/**
+ * DEK010: a class neither theme.css nor the slide's own stylesheet defines, or a state class the
+ * player sets, which markup that writes it would claim before the player does. `classes` holds
+ * neither.
+ */
 function unknownClassDiagnostics(
   { section, path, scan }: SlideHtml,
   classes: Set<string>,
@@ -468,6 +548,16 @@ function unknownClassDiagnostics(
     }
   }
   return [...unknown].map(([name, attribute]) => {
+    if (RUNTIME_CLASSES.has(name)) {
+      return diag("DEK010", {
+        message: `class "${name}" is a state the player sets at runtime, not a class for markup`,
+        path,
+        ...spotOf(attribute),
+        slug: section.slug,
+        hint: `remove "${name}" from the class attribute: the player puts is-current on the slide on screen and is-shown on each data-step element once its beat plays. To style that state, select it in theme.css or slides/${section.slug}.css, as .slide.is-current [data-step].is-shown`,
+        data: { class: name, state: true },
+      });
+    }
     const suggestion = suggest(name, known);
     return diag("DEK010", {
       message: `class "${name}" is not defined in theme.css`,

package/src/core/lint.ts

@@ -19,6 +19,7 @@ import { voiceDiagnostics } from "./lint/voice.ts";
 import { asResolvedDeck, type Project, type ProjectDeck } from "./resolve.ts";
 import type { Section } from "./schema.ts";
 import { evaluateSlideScripts, slideScriptsProblems } from "./slide-script-eval.ts";
+import { RUNTIME_CLASSES } from "./theme-facts.ts";
 
 export { unreadableScriptDiagnostics } from "./lint/script.ts";
 export { silentCueDiagnostics } from "./lint/voice.ts";
@@ -122,7 +123,13 @@ function slideDiagnostics(ctx: LintContext, section: Section): Diagnostic[] {
       deckDir: ctx.deck.dir,
       skeleton: source.skeleton,
       hasScript: script !== undefined,
-      classes: ctx.theme && new Set([...ctx.theme.classes, ...(sheet ? cssClassNames(sheet) : [])]),
+      classes:
+        ctx.theme &&
+        new Set(
+          [...ctx.theme.classes, ...(sheet ? cssClassNames(sheet) : [])].filter(
+            (name) => !RUNTIME_CLASSES.has(name),
+          ),
+        ),
       // A theme with no layouts at all has nothing to check a data-layout against.
       ...(ctx.theme && ctx.theme.layouts.length > 0
         ? {

package/src/core/live-protocol.ts

@@ -12,7 +12,9 @@ export type LiveEvent =
   | { type: "reload-theme" }
   | { type: "reload-script"; slugs: string[] }
   | { type: "diagnostics"; diagnostics: Diagnostic[] }
-  | { type: "timeline" };
+  | { type: "timeline" }
+  /** The deck's annotations changed; a page that shows them asks for them again. */
+  | { type: "annotations" };
 
 export type LiveEventType = LiveEvent["type"];
 
@@ -32,6 +34,7 @@ const FIELDS_OK: Record<LiveEventType, (event: Record<string, unknown>) => boole
   "reload-script": (event) => isStrings(event.slugs),
   diagnostics: (event) => Array.isArray(event.diagnostics),
   timeline: () => true,
+  annotations: () => true,
 };
 
 /** Whether a message read off the stream is one this build of the page understands. */

package/src/core/page.ts

@@ -28,10 +28,17 @@ export const PAGE_ID = {
   laser: "dek-laser",
   laserToggle: "dek-laser-toggle",
   markToggle: "dek-mark-toggle",
+  annotateToggle: "dek-annotate-toggle",
   hint: "dek-hint",
   announce: "dek-announce",
 } as const;
 
+/**
+ * The event the player fires on `document` when the dev server says the deck's annotations
+ * changed, for annotate mode, which is compiled apart from the player, to ask for them again.
+ */
+export const ANNOTATIONS_CHANGED = "dek-annotations";
+
 export type PageMode = "player" | "presenter" | "video";
 
 /** The page's settings, written on <body> as `data-*` and read back once by the runtime. */

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

@@ -34,7 +34,10 @@ declare module "playwright" {
   };
   export type Browser = {
     newPage(options?: { viewport?: Viewport }): Promise<Page>;
-    newContext(options?: { viewport?: Viewport }): Promise<BrowserContext>;
+    newContext(options?: {
+      viewport?: Viewport;
+      deviceScaleFactor?: number;
+    }): Promise<BrowserContext>;
     close(): Promise<void>;
   };
   export const chromium: {

package/src/core/playwright-visual.ts

@@ -21,12 +21,15 @@ import type {
   PagesRequest,
   PagesResponse,
   PdfRequest,
+  PptxRequest,
+  PptxResponse,
   ResponseTo,
   VisualPage,
   VisualRequest,
 } from "./playwright.ts";
 import { captureMotion } from "./playwright-motion.ts";
 import { renderSheets } from "./playwright-sheet.ts";
+import { measurePptxTextsInPage, PPTX_OWNER_ATTR } from "./pptx-text.ts";
 import { pseudoTextBoxes } from "./pseudo-text.ts";
 import { motionSheets } from "./sheet.ts";
 import {
@@ -47,7 +50,11 @@ export async function runVisualRequest<R extends VisualRequest>(
   browser: Browser,
   request: R,
 ): Promise<ResponseTo<R>> {
-  const context = await browser.newContext({ viewport: request.viewport });
+  // A PPTX's pictures are shown full screen, so they are drawn at twice the slide's size.
+  const context = await browser.newContext({
+    viewport: request.viewport,
+    ...(request.kind === "pptx" ? { deviceScaleFactor: 2 } : {}),
+  });
   try {
     return (await answer(context, request)) as ResponseTo<R>;
   } finally {
@@ -65,6 +72,8 @@ function answer(context: BrowserContext, request: VisualRequest) {
       return shootMorph(context, request);
     case "motion":
       return shootMotion(context, request);
+    case "pptx":
+      return shootPptx(context, request);
     default: {
       const unknown: never = request;
       throw new Error(`unknown visual request ${JSON.stringify(unknown)}`);
@@ -86,6 +95,70 @@ async function printPdf(context: BrowserContext, request: PdfRequest): Promise<D
   return {};
 }
 
+/** Each slide's text measured and taken out, and the slide shot without it, page by page. */
+async function shootPptx(context: BrowserContext, request: PptxRequest): Promise<PptxResponse> {
+  const slides = await visitInPages(
+    request.pages,
+    () => context.newPage(),
+    async (page, pageReq) => {
+      await page.setContent(pageReq.html, { waitUntil: "load" });
+      await page.evaluate(() => document.fonts.ready.then(() => undefined));
+      const measured = await page.evaluate(measurePptxTextsInPage);
+      const fonts = await platformFonts(page);
+      await page.screenshot({ path: pageReq.screenshotPath, fullPage: false });
+      return {
+        slug: pageReq.slug,
+        description: measured.description,
+        boxes: measured.boxes.map((box) => ({
+          ...box,
+          runs: box.runs.map(({ owner, ...run }) => {
+            const font = fonts.get(owner);
+            return font === undefined ? run : { ...run, font };
+          }),
+        })),
+      };
+    },
+  );
+  return { slides };
+}
+
+/**
+ * The font Chromium drew each marked element's text with, by the element's number: the one that
+ * drew most of its glyphs, as the DevTools protocol reports it. A theme names a stack, or only
+ * `sans-serif`; this is the face that was found.
+ */
+async function platformFonts(page: Page): Promise<Map<number, string>> {
+  const fonts = new Map<number, string>();
+  const cdp = await page.context().newCDPSession(page);
+  try {
+    await cdp.send("DOM.enable");
+    await cdp.send("CSS.enable");
+    const { root } = (await cdp.send("DOM.getDocument", { depth: -1 })) as {
+      root: { nodeId: number };
+    };
+    const { nodeIds } = (await cdp.send("DOM.querySelectorAll", {
+      nodeId: root.nodeId,
+      selector: `[${PPTX_OWNER_ATTR}]`,
+    })) as { nodeIds: number[] };
+    for (const nodeId of nodeIds) {
+      const { attributes } = (await cdp.send("DOM.getAttributes", { nodeId })) as {
+        attributes: string[];
+      };
+      const owner = Number(attributes[attributes.indexOf(PPTX_OWNER_ATTR) + 1]);
+      const { fonts: used } = (await cdp.send("CSS.getPlatformFontsForNode", { nodeId })) as {
+        fonts: Array<{ familyName: string; glyphCount: number }>;
+      };
+      const main = [...used].sort((a, b) => b.glyphCount - a.glyphCount)[0];
+      if (main && Number.isInteger(owner)) {
+        fonts.set(owner, main.familyName);
+      }
+    }
+  } finally {
+    await cdp.detach();
+  }
+  return fonts;
+}
+
 /** The move between two slides, frozen at a moment and shot. */
 async function shootMorph(context: BrowserContext, request: MorphRequest): Promise<DoneResponse> {
   const page = await context.newPage();