mixdog 1.0.4 → 1.0.6

package/src/runtime/office/authoring/pptx-html-measure.mjs

@@ -8,14 +8,16 @@ import { writeFile } from 'node:fs/promises';
 import { createRequire } from 'node:module';
 import { pathToFileURL } from 'node:url';
 
-import { buildPuppeteerLaunchArgs, resolveBrowserLaunchOptions } from '../../shared/browser-launch.mjs';
-import { startChildGuardian } from '../../shared/child-guardian.mjs';
+import { launchHtmlBrowser, runInBrowser } from './html-browser.mjs';
 import { iconGlobal } from './pptx-icons.mjs';
 import { GEOMETRY_TOLERANCE_PX, NEAR_MISS_PX, readGeometry } from './pptx-html-geometry.mjs';
 
 const require = createRequire(import.meta.url);
 
-export const HTML_CANVAS = { width: 1920, height: 1080 };
+/** The deck canvas in CSS px and the page it lands on in inches; a PDF's designed pages pass their sheet instead. */
+export const HTML_CANVAS = { width: 1920, height: 1080, inchWidth: 13.333, inchHeight: 7.5 };
+
+const viewport = (canvas, deviceScaleFactor) => ({ width: canvas.width, height: canvas.height, deviceScaleFactor });
 
 // Runs inside the page: everything it needs is defined here. Returns one
 // slide's items in paint order (a parent's box before its children).
@@ -464,7 +466,7 @@ function showSlide(index) {
 
 // <i data-icon="name" data-sw="1.75"> becomes the offline Lucide SVG, sized by the <i>'s CSS box
 // and stroked in its CSS color.
-function injectIcons(table, viewBox) {
+export function injectIcons(table, viewBox) {
   const missing = [];
   for (const i of document.querySelectorAll('i[data-icon]')) {
     const markup = table[String(i.dataset.icon || '').toLowerCase()];
@@ -488,18 +490,18 @@ const CAPTURE_SCALE = 2;
 
 // Each marked element photographed alone at twice the canvas density on a transparent page, trimmed to
 // what it painted (shadows, pseudo-elements and turned corners included): id → { png, box } in CSS px.
-async function captureRichPaint(page, slideBox, ids) {
+async function captureRichPaint(page, slideBox, ids, canvas) {
   const out = new Map();
   if (!ids.length) return out;
   const sharp = require('sharp');
-  await page.setViewport({ ...HTML_CANVAS, deviceScaleFactor: CAPTURE_SCALE });
+  await page.setViewport(viewport(canvas, CAPTURE_SCALE));
   try {
     for (const id of ids) {
       await page.evaluate(isolateCapture, id);
       // Runtimes with Uint8Array.fromBase64 get a plain Uint8Array back, whose toString is not base64.
       const shot = Buffer.from(
         await page.screenshot({
-          clip: { x: slideBox.x, y: slideBox.y, width: HTML_CANVAS.width, height: HTML_CANVAS.height },
+          clip: { x: slideBox.x, y: slideBox.y, width: canvas.width, height: canvas.height },
           omitBackground: true,
           type: 'png',
         })
@@ -511,7 +513,7 @@ async function captureRichPaint(page, slideBox, ids) {
       if (!alpha || alpha.min === 255) {
         out.set(id, {
           png: shot.toString('base64'),
-          draw: { x: 0, y: 0, w: HTML_CANVAS.width, h: HTML_CANVAS.height },
+          draw: { x: 0, y: 0, w: canvas.width, h: canvas.height },
         });
         continue;
       }
@@ -530,39 +532,40 @@ async function captureRichPaint(page, slideBox, ids) {
     }
   } finally {
     await page.evaluate(isolateCapture, null);
-    await page.setViewport({ ...HTML_CANVAS, deviceScaleFactor: 1 });
+    await page.setViewport(viewport(canvas, 1));
   }
   return out;
 }
 
+/** The offline Lucide table `injectIcons` takes, keyed by icon name. */
+export function iconTable() {
+  const icons = iconGlobal();
+  return { icons, table: Object.fromEntries(icons.names.map((name) => [name, icons(name)])) };
+}
+
 /**
  * Lays out an HTML deck in a local browser and measures it.
  * @param {string} html the deck
- * @param {{ sourcePath: string, shotPath: (page: number) => string, timeoutMs?: number, signal?: AbortSignal }} options
+ * @param {{ sourcePath: string, shotPath: (page: number) => string, timeoutMs?: number, signal?: AbortSignal,
+ *   prepare?: (page: object) => Promise<object> }} options
  *   sourcePath: where the HTML is written before loading (beside the deck, so relative <img> paths resolve)
- * @returns {Promise<{ width: number, height: number, slides: object[], shots: string[], notes: string[], geometry: object[] }>}
+ *   prepare: run on the loaded page; returns the canvas (`HTML_CANVAS` shape) the slides are measured on
+ * @returns {Promise<{ width: number, height: number, inchWidth: number, inchHeight: number, slides: object[], shots: string[], notes: string[], geometry: object[] }>}
  *   geometry: per slide with findings, `{ slide, findings }` from pptx-html-geometry.mjs
  */
-export async function measureHtmlDeck(html, { sourcePath, shotPath, timeoutMs = 90_000, signal = null }) {
+export async function measureHtmlDeck(
+  html,
+  { sourcePath, shotPath, timeoutMs = 90_000, signal = null, prepare = null }
+) {
   await writeFile(sourcePath, html, 'utf8');
-  const puppeteer = (await import('puppeteer-core')).default;
-  const browser = await puppeteer.launch({
-    headless: true,
-    ...resolveBrowserLaunchOptions(),
-    args: buildPuppeteerLaunchArgs(['--font-render-hinting=none']),
-  });
-  try {
-    startChildGuardian({ childPid: browser.process?.()?.pid, label: 'pptx-html-browser' });
-  } catch {}
-  const abort = () => browser.close().catch(() => {});
-  signal?.addEventListener('abort', abort, { once: true });
-  let timer = null;
-  const work = (async () => {
+  const browser = await launchHtmlBrowser('pptx-html-browser');
+  const work = async () => {
     const page = await browser.newPage();
-    await page.setViewport({ ...HTML_CANVAS, deviceScaleFactor: 1 });
+    await page.setViewport(viewport(HTML_CANVAS, 1));
     await page.goto(pathToFileURL(sourcePath).href, { waitUntil: 'load' });
-    const icons = iconGlobal();
-    const table = Object.fromEntries(icons.names.map((name) => [name, icons(name)]));
+    const canvas = prepare ? await prepare(page) : HTML_CANVAS;
+    if (canvas !== HTML_CANVAS) await page.setViewport(viewport(canvas, 1));
+    const { icons, table } = iconTable();
     const missing = await page.evaluate(injectIcons, table, '0 0 24 24');
     if (missing.length) {
       const hint = missing.map((name) => {
@@ -578,7 +581,7 @@ export async function measureHtmlDeck(html, { sourcePath, shotPath, timeoutMs =
     const count = await page.$$eval('section.slide', (sections) => sections.length);
     if (!count)
       throw new Error(
-        'The HTML holds no <section class="slide">; every page is one section.slide on a 1920×1080 canvas.'
+        `The HTML holds no <section class="slide">; every page is one section.slide on a ${canvas.width}×${canvas.height} canvas.`
       );
     const slides = [];
     const shots = [];
@@ -589,9 +592,9 @@ export async function measureHtmlDeck(html, { sourcePath, shotPath, timeoutMs =
       await page.evaluate(() => document.fonts.ready);
       const element = (await page.$$('section.slide'))[index];
       const box = await element.boundingBox();
-      if (Math.round(box.width) !== HTML_CANVAS.width || Math.round(box.height) !== HTML_CANVAS.height) {
+      if (Math.round(box.width) !== canvas.width || Math.round(box.height) !== canvas.height) {
         throw new Error(
-          `slide ${index + 1} measures ${Math.round(box.width)}×${Math.round(box.height)} px; every section.slide is exactly 1920×1080.`
+          `slide ${index + 1} measures ${Math.round(box.width)}×${Math.round(box.height)} px; every section.slide is exactly ${canvas.width}×${canvas.height}.`
         );
       }
       const shot = shotPath(index + 1);
@@ -601,7 +604,7 @@ export async function measureHtmlDeck(html, { sourcePath, shotPath, timeoutMs =
       for (const note of measured.notes) notes.push(`slide ${index + 1}: ${note}`);
       const findings = await page.evaluate(readGeometry, index, GEOMETRY_TOLERANCE_PX, NEAR_MISS_PX);
       if (findings.length) geometry.push({ slide: index + 1, findings });
-      const drawn = await captureRichPaint(page, box, measured.captures);
+      const drawn = await captureRichPaint(page, box, measured.captures, canvas);
       const items = measured.items
         .map((item) => {
           if (item.kind !== 'capture') return item;
@@ -611,16 +614,7 @@ export async function measureHtmlDeck(html, { sourcePath, shotPath, timeoutMs =
         .filter(Boolean);
       slides.push({ bg: measured.bg, items, notes: measured.speakerNotes });
     }
-    return { ...HTML_CANVAS, slides, shots, notes, geometry };
-  })();
-  const timeout = new Promise((_, reject) => {
-    timer = setTimeout(() => reject(new Error(`HTML layout exceeded ${timeoutMs} ms`)), timeoutMs);
-  });
-  try {
-    return await Promise.race([work, timeout]);
-  } finally {
-    clearTimeout(timer);
-    signal?.removeEventListener('abort', abort);
-    await browser.close().catch(() => {});
-  }
+    return { ...canvas, slides, shots, notes, geometry };
+  };
+  return runInBrowser(browser, { signal, timeoutMs }, work);
 }

package/src/runtime/office/authoring/pptx-html-runner.mjs

@@ -41,9 +41,18 @@ function failure(error, startedAt) {
   };
 }
 
-export async function runPptxHtmlAuthoring(html, output, { target, signal = null }) {
+/** Whether the HTML is written as pages under the deck contract: one <section class="slide"> per page. */
+export function hasSlideSections(html) {
+  return /<section[^>]*class=["'][^"']*\bslide\b/i.test(String(html || ''));
+}
+
+/**
+ * @param {{ target: string, signal?: AbortSignal, prepare?: (page: object) => Promise<object> }} options
+ *   prepare: names the canvas on the loaded page (pptx-html-measure.mjs); the deck's 1920 × 1080 without it
+ */
+export async function runPptxHtmlAuthoring(html, output, { target, signal = null, prepare = null }) {
   const source = String(html || '');
-  if (!/<section[^>]*class=["'][^"']*\bslide\b/i.test(source)) {
+  if (!hasSlideSections(source)) {
     throw new Error('author html requires <section class="slide"> pages; see the pptx skill html reference.');
   }
   const startedAt = performance.now();
@@ -52,7 +61,12 @@ export async function runPptxHtmlAuthoring(html, output, { target, signal = null
   await rm(output, { force: true });
   let measure;
   try {
-    measure = await measureHtmlDeck(source, { sourcePath: artifacts.source, shotPath: artifacts.shot, signal });
+    measure = await measureHtmlDeck(source, {
+      sourcePath: artifacts.source,
+      shotPath: artifacts.shot,
+      signal,
+      prepare,
+    });
   } catch (error) {
     if (signal?.aborted) throw error;
     return failure(error, startedAt);
@@ -70,6 +84,7 @@ export async function runPptxHtmlAuthoring(html, output, { target, signal = null
     bytes: info.size,
     logs: measure.notes.map((text) => ({ level: 'warn', text })),
     kit: 'html',
+    slideCount: measure.slides.length,
     normalizedParagraphs: normalized.removed,
     htmlShots: measure.shots,
     htmlText: measure.slides.map((slide) => {

package/src/runtime/office/authoring/pptx-receipt.mjs

@@ -8,7 +8,13 @@ import { plannedCarrierGaps } from './pptx-brief.mjs';
 import { isPictureShape, relativeLuminance } from '../design/design-discipline.mjs';
 import { rectangleGap } from '../portable/pptx-relations.mjs';
 
-const CANVAS_AREA = 960 * 540; // 13.33 × 7.5 in, in points
+// The page the shapes sit on, in points: the deck's 13.33 × 7.5 in unless the document names its slide size
+// (a PDF's designed pages are a sheet).
+const WIDE_CANVAS = Object.freeze({ width: 960, height: 540 });
+const canvasOf = (document) =>
+  Number(document?.slideWidth) > 0 && Number(document?.slideHeight) > 0
+    ? { width: Number(document.slideWidth), height: Number(document.slideHeight) }
+    : WIDE_CANVAS;
 
 function backgroundRole(slide) {
   const l = relativeLuminance(slide?.background?.color);
@@ -27,8 +33,8 @@ function saturation(hex) {
 
 // A field that owns the page: a dark or saturated surface over three fifths of the canvas is what a reader
 // sees as a beat (a cover, a section mark, a claim on a field), whatever the slide's own background says.
-function isBeatField(fill, area) {
-  if (!fill || area < CANVAS_AREA * 0.6) return false;
+function isBeatField(fill, area, canvas) {
+  if (!fill || area < canvas.width * canvas.height * 0.6) return false;
   const l = relativeLuminance(fill);
   return (l !== null && l < 0.35) || saturation(fill) > 0.35;
 }
@@ -48,8 +54,6 @@ function surfaceColor(shape) {
 // Air, quadrant air, the largest object's share, the visual footprint, text
 // left edges, fill areas, and where the title sits. Read from shape footprints
 // on a 5 pt raster; no threshold turns any of them into a verdict.
-const CANVAS_W = 960;
-const CANVAS_H = 540;
 const CELL = 5;
 
 function footprint(shape) {
@@ -72,9 +76,9 @@ function extent(shape) {
   return { left, top, width, height };
 }
 
-function raster(shapes) {
-  const cols = Math.ceil(CANVAS_W / CELL),
-    rows = Math.ceil(CANVAS_H / CELL);
+function raster(shapes, canvas) {
+  const cols = Math.ceil(canvas.width / CELL),
+    rows = Math.ceil(canvas.height / CELL);
   const cells = new Uint8Array(cols * rows);
   for (const box of shapes) {
     const x0 = Math.max(0, Math.floor(box.left / CELL)),
@@ -211,20 +215,20 @@ function noteSpec(specs, shape) {
 // in canvas units [0, 1]; offset is its ellipse-normalized distance from the canvas center with
 // a horizontal tolerance of 0.05 and a vertical one of 0.15 (a sideways drift reads first, as in
 // AeSlides' imbalance metric). Both are numbers the author weighs; a breathing slide may sit off center on purpose.
-function centroidOf(boxes) {
+function centroidOf(boxes, canvas) {
   let area = 0,
     sx = 0,
     sy = 0;
   for (const box of boxes) {
     const a = box.width * box.height;
-    if (a >= CANVAS_W * CANVAS_H * 0.9) continue;
+    if (a >= canvas.width * canvas.height * 0.9) continue;
     area += a;
     sx += a * (box.left + box.width / 2);
     sy += a * (box.top + box.height / 2);
   }
   if (!area) return null;
-  const x = sx / area / CANVAS_W,
-    y = sy / area / CANVAS_H;
+  const x = sx / area / canvas.width,
+    y = sy / area / canvas.height;
   const offset = Math.sqrt(((x - 0.5) / 0.05) ** 2 + ((y - 0.5) / 0.15) ** 2);
   return { centroid: [Number(x.toFixed(2)), Number(y.toFixed(2))], centroidOffset: Number(offset.toFixed(1)) };
 }
@@ -233,16 +237,17 @@ function centroidOf(boxes) {
 // content zone begins. Read across the deck it shows whether content slides share one body top.
 // Body fill: how much of the zone under the title (down to the lower safe margin) the content spans,
 // as a share — a dense slide whose content stops halfway reads as a hollow; a breathing slide is meant to.
-function bodyTopOf(boxes, titleBox) {
+function bodyTopOf(boxes, titleBox, canvas) {
   if (!titleBox) return { bodyTop: null, bodyFill: null };
   const titleBottom = titleBox.top + titleBox.height;
   const below = boxes.filter(
-    (box) => box !== titleBox && box.top >= titleBottom - 2 && box.width * box.height < CANVAS_W * CANVAS_H * 0.9
+    (box) =>
+      box !== titleBox && box.top >= titleBottom - 2 && box.width * box.height < canvas.width * canvas.height * 0.9
   );
   if (!below.length) return { bodyTop: null, bodyFill: null };
   const top = Math.min(...below.map((box) => box.top)),
     bottom = Math.max(...below.map((box) => box.top + box.height));
-  const zone = CANVAS_H - 0.5 * 72 - top;
+  const zone = canvas.height - 0.5 * 72 - top;
   return {
     bodyTop: Number((top / 72).toFixed(2)),
     bodyFill: zone > 0 ? Number(Math.min(1, (bottom - top) / zone).toFixed(2)) : null,
@@ -253,8 +258,8 @@ function bodyTopOf(boxes, titleBox) {
 // fieldFill is the share of each field of 6% of the canvas or more (a full-page background is not one)
 // that content actually covers, lowest first. Neither `air` nor `quadrantAir` can say this — the field's
 // own footprint fills the very quadrant it leaves empty (user: 이 사각은 밸런스가 망가진 것 같은데).
-function fieldFillOf(surfaces, grid) {
-  const canvas = CANVAS_W * CANVAS_H;
+function fieldFillOf(surfaces, grid, page) {
+  const canvas = page.width * page.height;
   return surfaces
     .filter((box) => box.width * box.height >= canvas * 0.06 && box.width * box.height < canvas * 0.9)
     .map(
@@ -275,27 +280,28 @@ function fieldFillOf(surfaces, grid) {
 
 function observe(
   shapes,
-  { textBoxes, visuals, content, blocks, surfaces = [], constructs = [], labels = [], fills, titleBox }
+  { textBoxes, visuals, content, blocks, surfaces = [], constructs = [], labels = [], fills, titleBox, page }
 ) {
   const boxes = shapes.map(footprint).filter(Boolean);
   if (!boxes.length) return null;
   const authored = shapes.filter((shape) => !isChrome(shape));
   const typeSet = [...new Set(authored.flatMap(typeSizesOf))].sort((a, b) => a - b);
   const textColors = [...new Set(authored.filter((shape) => String(shape.text || '').trim()).flatMap(textColorsOf))];
-  const all = raster(boxes);
-  const inner = raster(content); // the same canvas read from content alone: where a surface is carrying nothing
-  const centroid = centroidOf(boxes);
+  const all = raster(boxes, page);
+  const inner = raster(content, page); // the same canvas read from content alone: where a surface is carrying nothing
+  const centroid = centroidOf(boxes, page);
   // Body top and gaps read the content (text, charts, tables, pictures, contours), never a surface field or a rule.
   const { bodyTop, bodyFill } = bodyTopOf(
     content,
     titleBox
       ? content.find((box) => box.left === titleBox.left && box.top === titleBox.top && box.width === titleBox.width) ||
           titleBox
-      : null
+      : null,
+    page
   );
   const midX = Math.floor(all.cols / 2),
     midY = Math.floor(all.rows / 2);
-  const canvas = CANVAS_W * CANVAS_H;
+  const canvas = page.width * page.height;
   const fillShares = [...fills.entries()]
     .map(([color, area]) => ({ color, share: Number((area / canvas).toFixed(2)) }))
     .filter((entry) => entry.share > 0)
@@ -327,9 +333,9 @@ function observe(
       airOf(inner, 0, midY, midX, inner.rows),
       airOf(inner, midX, midY, inner.cols, inner.rows),
     ],
-    fieldFill: fieldFillOf(surfaces, inner),
+    fieldFill: fieldFillOf(surfaces, inner, page),
     largestShare: Number((Math.max(...boxes.map((box) => box.width * box.height)) / canvas).toFixed(2)),
-    visualShare: visuals.length ? Number((1 - airOf(raster(visuals))).toFixed(2)) : 0,
+    visualShare: visuals.length ? Number((1 - airOf(raster(visuals, page))).toFixed(2)) : 0,
     presence,
     textColumns: { ...leftEdges(textBoxes.filter((box) => !labels.includes(box))), labels: labels.length },
     fills: fillShares,
@@ -343,7 +349,7 @@ function observe(
   };
 }
 
-export function slideReceipt(slide) {
+export function slideReceipt(slide, page = WIDE_CANVAS) {
   const shapes = Array.isArray(slide?.shapes) ? slide.shapes : [];
   const receipt = {
     slide: Number(slide?.index) || 0,
@@ -362,10 +368,10 @@ export function slideReceipt(slide) {
     coverage: 0,
     grammar: 'text',
   };
-  const read = readShapes(shapes, receipt);
+  const read = readShapes(shapes, receipt, page);
   receipt.presets = [...read.presets];
   if (Object.keys(read.specs).length) receipt.specs = read.specs;
-  receipt.coverage = Math.min(1, Number((read.covered / CANVAS_AREA).toFixed(2)));
+  receipt.coverage = Math.min(1, Number((read.covered / (page.width * page.height)).toFixed(2)));
   receipt.grammar = pageGrammar(receipt, read);
   const observed = observe(read.seen, {
     textBoxes: read.textBoxes,
@@ -377,6 +383,7 @@ export function slideReceipt(slide) {
     labels: diagramLabels(read.textBoxes, read.constructs),
     fills: read.fills,
     titleBox: read.titleBox,
+    page,
   });
   if (observed) receipt.observe = observed;
   return receipt;
@@ -388,7 +395,7 @@ export function slideReceipt(slide) {
  * content, spacing blocks, surfaces, drawn constructs — plus the covered
  * area, the fill weights and the largest text box.
  */
-function readShapes(shapes, receipt) {
+function readShapes(shapes, receipt, page) {
   let covered = 0;
   let beatField = false;
   const presets = new Set();
@@ -481,7 +488,7 @@ function readShapes(shapes, receipt) {
       receipt.fields += 1;
       covered += area;
       if (box && fill) surfaces.push(box);
-      if (isBeatField(fill, area)) beatField = true;
+      if (isBeatField(fill, area, page)) beatField = true;
     } else if (geometry) {
       presets.add(geometry);
       covered += area;
@@ -540,7 +547,8 @@ function diagramLabels(textBoxes, constructs) {
 // The whole deck: per-slide receipts, totals, the families that never appear,
 // and the plan lines whose named carriers the snapshot cannot see.
 export function compositionReceipt(document, brief = null) {
-  const slides = (Array.isArray(document?.slides) ? document.slides : []).map(slideReceipt);
+  const page = canvasOf(document);
+  const slides = (Array.isArray(document?.slides) ? document.slides : []).map((slide) => slideReceipt(slide, page));
   const deck = {
     slides: slides.length,
     charts: 0,

package/src/runtime/office/authoring/pptx-review-artifacts.mjs

@@ -21,7 +21,15 @@ export async function pptxReviewArtifacts(session, preview) {
   // The receipt reads an authored deck against the brief it was written to. A deck opened for editing has no
   // brief, and its pages are reviewed as edits, so its render carries the pages alone — a template's receipt
   // ran to fifteen thousand characters beside three page images.
-  const receipt = session.authored === true ? await readCompositionReceipt(session) : null;
+  // A PDF of designed pages keeps the receipt its working deck was read into at author time (the PDF
+  // itself holds no shapes); each render reads its own copy against the printed pixels.
+  const receipt = session.authoredFrame
+    ? session.frameReceipt
+      ? structuredClone(session.frameReceipt)
+      : null
+    : session.authored === true
+      ? await readCompositionReceipt(session)
+      : null;
   if (receipt) {
     const air = await renderedAirByPage(result._images).catch(() => null);
     if (air) attachRenderedAir(receipt, air);

package/src/runtime/office/authoring/pptx-script-runner.mjs

@@ -98,7 +98,11 @@ async function pathExists(path) {
   }
 }
 
-export async function runPptxAuthoringScript(script, output, { timeoutMs = PPTX_SCRIPT_CONTRACT.timeoutMs } = {}) {
+export async function runPptxAuthoringScript(
+  script,
+  output,
+  { timeoutMs = PPTX_SCRIPT_CONTRACT.timeoutMs, cwd = dirname(output) } = {}
+) {
   const source = String(script || '');
   if (!source.trim()) throw new Error('author requires a non-empty pptxgenjs script');
   await mkdir(dirname(output), { recursive: true });
@@ -126,7 +130,7 @@ export async function runPptxAuthoringScript(script, output, { timeoutMs = PPTX_
   } catch (error) {
     return { ok: false, error: scriptError(error, source, preludeLines), logs, elapsedMs: 0 };
   }
-  const scopedProcess = { env: { ...process.env }, cwd: () => dirname(output), platform: process.platform };
+  const scopedProcess = { env: { ...process.env }, cwd: () => cwd, platform: process.platform };
   let timer = null;
   const timeout = new Promise((_, reject) => {
     timer = setTimeout(() => reject(new Error(`Authoring script exceeded ${timeoutMs} ms`)), timeoutMs);