@hajimism/dek 0.3.2 → 0.4.0

package/src/core/pack.ts

@@ -0,0 +1,137 @@
+import { existsSync, readdirSync, readFileSync, statSync } from "node:fs";
+import { join, relative } from "node:path";
+import { loadConfig } from "./config.ts";
+import { DekError } from "./error.ts";
+import { licenseText } from "./licenses.ts";
+import { type DistOptions, distFile } from "./path.ts";
+import { keepsInDeck, LICENSE_NAMES, MAX_SNAPSHOT_BYTES } from "./ref.ts";
+import { isRefDeckName, REF_DECK_NAME_RULE } from "./ref-name.ts";
+import { followInside, requireInside, writeInside } from "./safe-fs.ts";
+
+/**
+ * A deck handed over as a file, to be read as a ref by someone who cannot reach it on GitHub:
+ * a gzipped tar of a project that holds only that deck, under a folder named for it. The deck
+ * keeps what `dekc ref` keeps of a repository; the project's dek.toml goes empty, so the
+ * sender's refs and voice settings stay home. Its LICENSE is the one `packLicense` picks.
+ */
+export async function packDeck(
+  project: { root: string },
+  deck: { name: string; dir: string },
+  options: { maxBytes?: number } = {},
+): Promise<Uint8Array> {
+  if (!isRefDeckName(deck.name)) {
+    throw new DekError(`deck "${deck.name}" cannot be read as a ref by that name`, {
+      path: deck.dir,
+      hint: `${REF_DECK_NAME_RULE}; rename the deck's folder, e.g. to 2026-10-talk, and pack it again`,
+    });
+  }
+  // Each file by its path in the pack and where it really is, measured before any is read.
+  const sources: Array<readonly [string, string]> = deckFiles(deck.dir, project.root).map(
+    (path) =>
+      [`decks/${deck.name}/${path}`, requireInside(join(deck.dir, path), project.root)] as const,
+  );
+  const license = packLicense(project.root);
+  if (license?.path) {
+    sources.push([license.name, license.path]);
+  }
+  const maxBytes = options.maxBytes ?? MAX_SNAPSHOT_BYTES;
+  const size = sources.reduce((sum, [, real]) => sum + statSync(real).size, 0);
+  if (size > maxBytes) {
+    throw new DekError(
+      `deck "${deck.name}" is larger than a ref keeps, ${maxBytes / 1024 / 1024} MB`,
+      {
+        path: deck.dir,
+        hint: "a deck to read as a model should be far smaller; check its assets",
+      },
+    );
+  }
+  const files = new Map<string, Uint8Array>([["dek.toml", new Uint8Array()]]);
+  for (const [path, real] of sources) {
+    files.set(path, readFileSync(real));
+  }
+  if (license?.text !== undefined) {
+    files.set(license.name, new TextEncoder().encode(license.text));
+  }
+  const entries: Record<string, Uint8Array> = {};
+  for (const [path, bytes] of files) {
+    entries[`${deck.name}/${path}`] = bytes;
+  }
+  return new Bun.Archive(entries, { compress: "gzip" }).bytes();
+}
+
+/**
+ * The LICENSE a pack carries: the legal code `[pack] license` names, which says what the reader
+ * may do with a deck handed over on purpose; else the project's own LICENSE file; else none.
+ */
+function packLicense(
+  root: string,
+):
+  | { name: string; text: string; path?: undefined }
+  | { name: string; path: string; text?: undefined }
+  | undefined {
+  const id = loadConfig(join(root, "dek.toml")).pack?.license;
+  if (id) {
+    return { name: "LICENSE", text: licenseText(id) };
+  }
+  const name = LICENSE_NAMES.find((file) => isFile(join(root, file), root));
+  return name ? { name, path: requireInside(join(root, name), root) } : undefined;
+}
+
+/** Said to the sender, who can fix it, when a pack would go out with no license. */
+const NO_PACK_LICENSE =
+  'the pack carries no license, so its reader is told to ask you before reusing it; add `[pack] license = "CC0-1.0"` to dek.toml to let them reuse it freely, or put a LICENSE at the project root';
+
+/** `dekc pack`: write the deck's pack as dist/<deck>.tgz. */
+export async function writePack(
+  project: { root: string },
+  deck: { name: string; dir: string },
+  options: DistOptions = {},
+): Promise<{ outPath: string; warnings: string[] }> {
+  const bytes = await packDeck(project, deck);
+  const outPath = distFile(project, deck, "tgz", options);
+  writeInside(outPath, bytes, project.root);
+  return { outPath, warnings: packLicense(project.root) ? [] : [NO_PACK_LICENSE] };
+}
+
+/** What `deckFiles` looks at in the deck's own folder; dist/, .cache/, and voice/ are not read. */
+const DECK_TOP = new Set(["script.md", "theme.css", "slides", "assets"]);
+
+/**
+ * The deck's files a ref keeps, relative to the deck, in a stable order. A file or folder whose
+ * name starts with a dot stays behind; a link dek would not follow anywhere else is an error.
+ */
+function deckFiles(deckDir: string, root: string): string[] {
+  const found: string[] = [];
+  const walk = (rel: string) => {
+    const dir = requireInside(join(deckDir, rel), root);
+    for (const name of readdirSync(dir).sort()) {
+      if (name.startsWith(".") || (rel === "" && !DECK_TOP.has(name))) {
+        continue;
+      }
+      const path = rel === "" ? name : `${rel}/${name}`;
+      const real = requireInside(join(deckDir, path), root);
+      if (!existsSync(real)) {
+        throw new DekError(`${relative(root, join(deckDir, path))} is missing`, {
+          path: join(deckDir, path),
+          hint: "it is a symlink to nothing; remove it, or copy the file it meant in its place",
+        });
+      }
+      if (statSync(real).isDirectory()) {
+        walk(path);
+      } else if (keepsInDeck(path)) {
+        found.push(path);
+      }
+    }
+  };
+  walk("");
+  return found;
+}
+
+function isFile(path: string, root: string): boolean {
+  const real = followInside(path, root);
+  try {
+    return real !== undefined && statSync(real).isFile();
+  } catch {
+    return false;
+  }
+}

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

@@ -15,6 +15,7 @@ declare module "playwright" {
       clip?: { x: number; y: number; width: number; height: number };
       type?: "png" | "jpeg";
       quality?: number;
+      omitBackground?: boolean;
     }): Promise<Buffer>;
     addScriptTag(options: { content: string }): Promise<unknown>;
     pdf(options: {

package/src/core/playwright-visual.ts

@@ -1,7 +1,9 @@
 import type { Browser, BrowserContext, Page } from "playwright";
+import { findMisalignments } from "./alignment.ts";
 import { freezeTransition, loadVideoDoc } from "./capture-go.ts";
 import { measureFill } from "./fill.ts";
 import { finishBeat } from "./finish-beat.ts";
+import { findLineBreaks, measureTextFlowsInPage } from "./line-break.ts";
 import {
   crossesEdge,
   findClippedText,
@@ -31,6 +33,7 @@ import type {
   PagesRequest,
   PagesResponse,
   PdfRequest,
+  PptxPictureFile,
   PptxRequest,
   PptxResponse,
   ResponseTo,
@@ -39,8 +42,24 @@ import type {
 } from "./playwright.ts";
 import { captureMotion } from "./playwright-motion.ts";
 import { renderSheets } from "./playwright-sheet.ts";
+import { mapPictures } from "./pptx-package.ts";
+import {
+  describePptxPicturesInPage,
+  hidePptxLiftedInPage,
+  measurePptxPaintInPage,
+  measurePptxThemeInPage,
+  PPTX_PSEUDO_ATTR,
+  pptxFontProbesInPage,
+  pptxPictureEmptyInPage,
+  pptxSvgInPage,
+  SVG_CHECKED,
+  SVG_PAINT,
+  showOnlyPptxNodeInPage,
+} from "./pptx-paint.ts";
+import { planPptxLayers, pptxPageFacts } from "./pptx-plan.ts";
 import { measurePptxTextsInPage, PPTX_OWNER_ATTR } from "./pptx-text.ts";
-import { pseudoTextBoxes } from "./pseudo-text.ts";
+import type { PptxPageTheme } from "./pptx-theme.ts";
+import { pseudoElementBoxes, pseudoTextBoxes } from "./pseudo-text.ts";
 import { motionSheets } from "./sheet.ts";
 import {
   type Box,
@@ -133,7 +152,10 @@ 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. */
+/**
+ * Each slide's text and paint measured; what is laid over the picture planned, each picture
+ * drawn alone, and the slide shot without what was laid over it, page by page.
+ */
 async function shootPptx(context: BrowserContext, request: PptxRequest): Promise<PptxResponse> {
   const slides = await visitInPages(
     request.pages,
@@ -141,19 +163,86 @@ async function shootPptx(context: BrowserContext, request: PptxRequest): Promise
     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 paint = {
+        ...(await page.evaluate(measurePptxPaintInPage)),
+        described: await page.evaluate(describePptxPicturesInPage),
+      };
+      const texts = await page.evaluate(measurePptxTextsInPage);
       const fonts = await platformFonts(page);
-      await page.screenshot({ path: pageReq.screenshotPath, fullPage: false });
+      const placed = await pseudoElementBoxes(page, PPTX_PSEUDO_ATTR, "border", [
+        "before",
+        "after",
+        "marker",
+      ]);
+      for (const run of [
+        ...texts.boxes.flatMap((box) => box.runs),
+        ...texts.blocks.flatMap((block) => block.runs),
+      ]) {
+        const font = fonts.get(run.owner);
+        if (font !== undefined) {
+          run.font = font;
+        }
+      }
+      const plan = planPptxLayers(pptxPageFacts(paint, texts, placed));
+
+      const files = new Map<number, PptxPictureFile>();
+      for (const [index, node] of plan.lifted.pictures.entries()) {
+        const measured = paint.nodes[node];
+        const rect =
+          (measured?.paint?.kind === "picture" ? measured.paint.extent : undefined) ??
+          measured?.rect;
+        if (!rect) {
+          continue;
+        }
+        const svg = await page.evaluate(pptxSvgInPage, {
+          node,
+          paint: SVG_PAINT,
+          checked: SVG_CHECKED,
+        });
+        const png = pageReq.screenshotPath.replace(/\.png$/, `-${index + 1}.png`);
+        await page.evaluate(showOnlyPptxNodeInPage, node);
+        await page.screenshot({
+          path: png,
+          omitBackground: true,
+          clip: {
+            x: paint.origin.left + rect.left,
+            y: paint.origin.top + rect.top,
+            width: rect.right - rect.left,
+            height: rect.bottom - rect.top,
+          },
+        });
+        await page.evaluate(showOnlyPptxNodeInPage, null);
+        files.set(node, svg === undefined ? { png } : { png, svg });
+      }
+      const layers = mapPictures(plan.layers, ({ node, ...picture }) => ({
+        ...picture,
+        ...(files.get(node) ?? { png: "" }),
+      }));
+      // With the background PowerPoint's, the slide is shot on nothing, and a picture with
+      // nothing left in it is no picture.
+      const { background } = plan;
+      await page.evaluate(hidePptxLiftedInPage, {
+        ...plan.lifted,
+        background: background !== undefined,
+      });
+      const shot = await page.screenshot({
+        path: pageReq.screenshotPath,
+        fullPage: false,
+        ...(background ? { omitBackground: true } : {}),
+      });
+      const empty =
+        background !== undefined &&
+        (await page.evaluate(
+          pptxPictureEmptyInPage,
+          `data:image/png;base64,${shot.toString("base64")}`,
+        ));
       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 };
-          }),
-        })),
+        description: plan.description,
+        layers,
+        picture: !empty,
+        ...(background ? { background } : {}),
+        theme: await pageTheme(page),
       };
     },
   );
@@ -161,12 +250,44 @@ async function shootPptx(context: BrowserContext, request: PptxRequest): Promise
 }
 
 /**
- * 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.
+ * What the slide says of the deck's theme: its color tokens, and each font token as the
+ * `font-family` it is and the faces Chromium drew Latin and East Asian text in with it. Measured
+ * after the slide's last shot, since it puts text in the page to measure.
  */
+async function pageTheme(page: Page): Promise<PptxPageTheme> {
+  const { colors, families } = await page.evaluate(measurePptxThemeInPage);
+  await page.evaluate(pptxFontProbesInPage, true);
+  const faces = await platformFaces(page, "data-dek-pptx-probe");
+  await page.evaluate(pptxFontProbesInPage, false);
+  const fonts: PptxPageTheme["fonts"] = {};
+  for (const token of ["title", "body"] as const) {
+    const family = families[token];
+    const latin = faces.get(`${token}-latin`);
+    if (family !== undefined && latin !== undefined) {
+      fonts[token] = { family, latin, ea: faces.get(`${token}-ea`) ?? latin };
+    }
+  }
+  return { colors, fonts };
+}
+
+/** The font Chromium drew each marked element's text with, by the element's number. */
 async function platformFonts(page: Page): Promise<Map<number, string>> {
   const fonts = new Map<number, string>();
+  for (const [owner, face] of await platformFaces(page, PPTX_OWNER_ATTR)) {
+    if (Number.isInteger(Number(owner))) {
+      fonts.set(Number(owner), face);
+    }
+  }
+  return fonts;
+}
+
+/**
+ * The font Chromium drew each element marked with `attr` in, by the attribute's value: 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 platformFaces(page: Page, attr: string): Promise<Map<string, string>> {
+  const fonts = new Map<string, string>();
   const cdp = await page.context().newCDPSession(page);
   try {
     await cdp.send("DOM.enable");
@@ -176,19 +297,19 @@ async function platformFonts(page: Page): Promise<Map<number, string>> {
     };
     const { nodeIds } = (await cdp.send("DOM.querySelectorAll", {
       nodeId: root.nodeId,
-      selector: `[${PPTX_OWNER_ATTR}]`,
+      selector: `[${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 value = attributes[attributes.indexOf(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);
+      if (main && value !== undefined) {
+        fonts.set(value, main.familyName);
       }
     }
   } finally {
@@ -240,6 +361,8 @@ async function visitPages(context: BrowserContext, request: PagesRequest): Promi
     drawErrors: found.flatMap((page) => page.drawErrors ?? []),
     collisions: found.flatMap((page) => page.collisions ?? []),
     fills: found.flatMap((page) => page.fills ?? []),
+    lineBreaks: found.flatMap((page) => page.lineBreaks ?? []),
+    misalignments: found.flatMap((page) => page.misalignments ?? []),
   };
 }
 
@@ -343,7 +466,14 @@ async function visitPage(
   pageReq: VisualPage,
   { actions, viewport }: Pick<PagesRequest, "actions" | "viewport">,
 ): Promise<PagesResponse> {
-  const response: PagesResponse = { overflows: [], contrasts: [], collisions: [], fills: [] };
+  const response: PagesResponse = {
+    overflows: [],
+    contrasts: [],
+    collisions: [],
+    fills: [],
+    lineBreaks: [],
+    misalignments: [],
+  };
   const failing: Failing[] = [];
   const crossing: Crossing[] = [];
   await page.setContent(pageReq.html, { waitUntil: "load" });
@@ -362,6 +492,36 @@ async function visitPage(
     if (actions.includes("fill") && frame) {
       response.fills?.push({ slug, step, ...measureFill(frame, measured.elements) });
     }
+    if (actions.includes("alignment")) {
+      for (const { element, other, ...miss } of findMisalignments(measured.elements)) {
+        const [one, two] = [measured.elements[element], measured.elements[other]];
+        response.misalignments?.push({
+          slug,
+          step,
+          box: one?.box ?? "",
+          ...(one?.text ? { text: one.text } : {}),
+          other: two?.box ?? "",
+          ...(two?.text ? { otherText: two.text } : {}),
+          ...miss,
+        });
+      }
+    }
+    if (actions.includes("breaks")) {
+      const { wordBreak, flows } = await page.evaluate(measureTextFlowsInPage);
+      const textWraps = new Map(flows.map((flow) => [flow.element, flow.textWrap]));
+      for (const { element, ...found } of findLineBreaks(flows)) {
+        const el = measured.elements[element];
+        response.lineBreaks?.push({
+          slug,
+          step,
+          box: el?.box ?? "",
+          ...(el?.text ? { text: el.text } : {}),
+          ...found,
+          wordBreak,
+          textWrap: textWraps.get(element) ?? "wrap",
+        });
+      }
+    }
     if (actions.includes("overflow") && frame) {
       for (const { element, ...overflow } of [
         ...findOverflows(frame, measured.elements),