@hienlh/ppm 0.22.11 → 0.23.1

package/src/services/design/bridge/bridge-element-info.ts

@@ -0,0 +1,180 @@
+import type { BridgeApi } from "./bridge-core.ts";
+import type { CommentQuote } from "../../../shared/design-comment-types.ts";
+import type { PickedElement } from "../../../shared/design-bridge-messages-picker.ts";
+
+/**
+ * What the canvas knows about one element: its anchor (id, tag, CSS path, text quote) and,
+ * for a picked element, its box, a trimmed copy of its markup and its text.
+ *
+ * Every function here is shipped into the design frame as source (`toString()`, installed
+ * as `ppm.lib.*` by the assembly), so none may reference anything in this module's scope:
+ * helpers are written inline, and other lib functions are reached through `ppm.lib`.
+ *
+ * {@link elementQuote} is also what the server runs over a parse5 tree to re-validate a
+ * re-anchor, which is why it walks through a {@link TreeAccess} instead of the DOM API:
+ * the quote a pin was stored with and the quote of a candidate must be computed the same
+ * way on both sides, or no candidate would ever score as the same element.
+ */
+
+export interface TreeAccess<N> {
+  parent(node: N): N | null;
+  children(node: N): ArrayLike<N>;
+  /** The text of a text node; null for anything else. */
+  text(node: N): string | null;
+  /** The lowercase tag name of an element; null for anything else. */
+  tag(node: N): string | null;
+}
+
+export interface ElementAnchorInfo {
+  ppmId: number | null;
+  tag: string;
+  cssPath: string;
+  quote: CommentQuote;
+}
+
+/**
+ * The element's own text (up to 160 chars) plus up to 32 chars of the text before and after
+ * it, whitespace-collapsed. The context is taken from siblings, climbing at most six
+ * ancestors and never past `<body>`; script, style, template and noscript text is ignored.
+ */
+export function elementQuote<N>(el: N, acc: TreeAccess<N>): CommentQuote {
+  const EXACT = 160;
+  const SIDE = 32;
+  const skip: Record<string, boolean> = { script: true, style: true, template: true, noscript: true };
+  const norm = (s: string): string => s.replace(/\s+/g, " ").trim();
+
+  // Text of a subtree read from one end, stopping once `want` collapsed chars are in hand.
+  function collect(node: N, want: number, fromEnd: boolean): string {
+    const t = acc.text(node);
+    if (t !== null) {
+      const cap = want * 2 + 64;
+      return t.length <= cap ? t : fromEnd ? t.slice(-cap) : t.slice(0, cap);
+    }
+    const tag = acc.tag(node);
+    if (tag === null || skip[tag]) return "";
+    const kids = acc.children(node);
+    let out = "";
+    for (let k = 0; k < kids.length; k++) {
+      const part = collect(kids[fromEnd ? kids.length - 1 - k : k]!, want, fromEnd);
+      out = fromEnd ? part + out : out + part;
+      if (norm(out).length >= want) break;
+    }
+    // Element boundaries read as a space, so a heading and the paragraph after it do not
+    // run together; collapsing makes it harmless inside inline markup.
+    return " " + out + " ";
+  }
+
+  function side(before: boolean): string {
+    let out = "";
+    let cur: N = el;
+    for (let depth = 0; depth < 6; depth++) {
+      const parent = acc.parent(cur);
+      if (parent === null) break;
+      const kids = acc.children(parent);
+      const at = Array.prototype.indexOf.call(kids, cur);
+      if (at < 0) break;
+      for (let i = before ? at - 1 : at + 1; before ? i >= 0 : i < kids.length; i += before ? -1 : 1) {
+        const part = collect(kids[i]!, SIDE, before);
+        out = before ? part + out : out + part;
+        if (norm(out).length >= SIDE) break;
+      }
+      const tag = acc.tag(parent);
+      if (norm(out).length >= SIDE || tag === null || tag === "body" || tag === "head" || tag === "html") break;
+      cur = parent;
+    }
+    const n = norm(out);
+    return before ? n.slice(-SIDE) : n.slice(0, SIDE);
+  }
+
+  return { exact: norm(collect(el, EXACT, false)).slice(0, EXACT), prefix: side(true), suffix: side(false) };
+}
+
+/** A {@link TreeAccess} over the live DOM. */
+export function domTreeAccess(): TreeAccess<Node> {
+  return {
+    parent: (n) => n.parentNode,
+    children: (n) => n.childNodes,
+    text: (n) => (n.nodeType === 3 ? n.nodeValue || "" : null),
+    tag: (n) => (n.nodeType === 1 ? (n as Element).localName.toLowerCase() : null),
+  };
+}
+
+/**
+ * `#id` when the element (or an ancestor, at most six levels up) has a plain, unique id,
+ * otherwise a `tag:nth-of-type(n)` chain from `body`. Used only to break ties.
+ */
+export function cssPathOf(el: Element): string {
+  const plainId = /^[A-Za-z][\w-]{0,63}$/;
+  const doc = el.ownerDocument;
+  const parts: string[] = [];
+  let cur: Element | null = el;
+  for (let depth = 0; cur && depth < 6; depth++) {
+    const tag = cur.localName.toLowerCase();
+    if (tag === "html") break;
+    const id = cur.getAttribute("id");
+    if (id && plainId.test(id) && doc.querySelectorAll("#" + id).length === 1) {
+      parts.unshift("#" + id);
+      break;
+    }
+    if (tag === "body") {
+      parts.unshift("body");
+      break;
+    }
+    let n = 1;
+    for (let s = cur.previousElementSibling; s; s = s.previousElementSibling) if (s.localName === cur.localName) n++;
+    parts.unshift(tag + ":nth-of-type(" + n + ")");
+    cur = cur.parentElement;
+  }
+  return parts.join(" > ");
+}
+
+/** The anchor fields of a live element. Ids come from the serve-time `data-ppm-id`. */
+export function anchorOf(el: Element, ppm: BridgeApi): ElementAnchorInfo {
+  const raw = el.getAttribute("data-ppm-id");
+  const id = raw !== null && /^\d{1,10}$/.test(raw) ? parseInt(raw, 10) : NaN;
+  return {
+    ppmId: Number.isFinite(id) && id <= 0x7fffffff ? id : null,
+    tag: el.localName.toLowerCase(),
+    cssPath: ppm.lib.cssPathOf(el),
+    quote: ppm.lib.elementQuote<Node>(el, ppm.lib.domTreeAccess()),
+  };
+}
+
+/**
+ * Everything the parent shows about a picked element. The markup is a depth-2 copy with
+ * long text cut, built in an inert document so copying an `<img>` fetches nothing.
+ */
+export function describeElement(el: Element, ppm: BridgeApi): PickedElement {
+  const anchor = ppm.lib.anchorOf(el, ppm);
+  const box = el.getBoundingClientRect();
+  const inert = ppm.doc.implementation.createHTMLDocument("");
+  function copy(node: Node, depth: number): Node {
+    if (node.nodeType === 3) {
+      const t = node.nodeValue || "";
+      return inert.createTextNode(t.length > 80 ? t.slice(0, 80) + "…" : t);
+    }
+    if (node.nodeType !== 1) return inert.createTextNode("");
+    const clone = inert.importNode(node, false) as Element;
+    clone.removeAttribute("data-ppm-id");
+    const kids = node.childNodes;
+    if (depth < 2) {
+      for (let i = 0; i < kids.length && i < 20; i++) clone.appendChild(copy(kids[i]!, depth + 1));
+      if (kids.length > 20) clone.appendChild(inert.createTextNode("…"));
+    } else if (kids.length) {
+      clone.appendChild(inert.createTextNode("…"));
+    }
+    return clone;
+  }
+  const gen = /^[0-9a-f]{16}$/.test(ppm.boot.gen) ? ppm.boot.gen : null;
+  return {
+    ppmId: anchor.ppmId,
+    gen,
+    file: ppm.boot.file,
+    tag: anchor.tag,
+    rect: { x: box.left, y: box.top, w: box.width, h: box.height },
+    cssPath: anchor.cssPath,
+    outerHtml: (copy(el, 0) as Element).outerHTML.slice(0, 2000),
+    text: (el.textContent || "").replace(/\s+/g, " ").trim().slice(0, 500),
+    quote: anchor.quote,
+  };
+}

package/src/services/design/bridge/bridge-extract-blocks.ts

@@ -0,0 +1,115 @@
+import type { ExtractedColor, extractTextRuns, mergeTextRuns } from "./bridge-extract-text.ts";
+
+/**
+ * What one laid-out box on a slide turns into for the PowerPoint export, shipped to the frame
+ * as `ppm.lib` helpers (each references nothing outside itself; collaborators are parameters).
+ */
+
+export type SlideBoxPx = { x: number; y: number; w: number; h: number; rotation: number };
+
+/**
+ * The element's rotation in degrees from its computed `transform` and `rotate`, and whether
+ * that is all the transform does. A scale or skew cannot be carried over, so `pure` is false.
+ */
+export function cssRotation(cs: CSSStyleDeclaration): { deg: number; pure: boolean } {
+  let deg = 0;
+  let pure = true;
+  const m = /^matrix\(([^)]+)\)$/.exec(cs.transform || "");
+  if (m) {
+    const [a, b, c, d] = m[1]!.split(",").map(parseFloat) as [number, number, number, number];
+    deg = (Math.atan2(b, a) * 180) / Math.PI;
+    if (Math.abs(Math.hypot(a, b) - 1) > 0.01 || Math.abs(Math.hypot(c, d) - 1) > 0.01 || Math.abs(a * d - b * c - 1) > 0.01) pure = false;
+  } else if (cs.transform && cs.transform !== "none") pure = false;
+  const r = /^(-?[\d.]+)deg$/.exec(cs.rotate || "");
+  if (r) deg += parseFloat(r[1]!);
+  else if (cs.rotate && cs.rotate !== "none") pure = false;
+  if (cs.scale && cs.scale !== "none" && cs.scale !== "1") pure = false;
+  return { deg: Math.round((((deg % 360) + 360) % 360) * 100) / 100, pure };
+}
+
+/**
+ * The shape (background and uniform border) and the text box of one non-inline element, in
+ * paint order. `opacity` is the element's own times its ancestors', folded into every colour.
+ */
+export function blockItems(
+  el: Element,
+  win: Window,
+  box: SlideBoxPx,
+  opacity: number,
+  colorOf: (value: string) => ExtractedColor | null,
+  note: (label: string) => void,
+  text: { extractTextRuns: typeof extractTextRuns; mergeTextRuns: typeof mergeTextRuns },
+): Array<Record<string, unknown>> {
+  const cs = win.getComputedStyle(el);
+  const items: Array<Record<string, unknown>> = [];
+  const px = (v: string): number => parseFloat(v) || 0;
+  const fade = (c: ExtractedColor | null): ExtractedColor | null =>
+    (c && c.alpha * opacity > 0.01 ? { hex: c.hex, alpha: Math.round(c.alpha * opacity * 1000) / 1000 } : null);
+
+  if (cs.backgroundImage && cs.backgroundImage !== "none") {
+    note(cs.backgroundImage.indexOf("gradient") >= 0 ? "gradient background" : "background image");
+  }
+  if (cs.boxShadow && cs.boxShadow !== "none") note("box shadow");
+  if (cs.filter && cs.filter !== "none") note("CSS filter");
+  if (cs.mixBlendMode && cs.mixBlendMode !== "normal") note("blend mode");
+
+  const sides = ["top", "right", "bottom", "left"].map((s) => ({
+    w: px(cs.getPropertyValue("border-" + s + "-width")),
+    style: cs.getPropertyValue("border-" + s + "-style"),
+    color: cs.getPropertyValue("border-" + s + "-color"),
+  }));
+  const drawn = sides.filter((s) => s.w > 0 && s.style !== "none" && s.style !== "hidden");
+  const uniform = drawn.length === 4 && drawn.every((s) => s.w === drawn[0]!.w && s.color === drawn[0]!.color);
+  if (drawn.length && !uniform) note("border on some sides only");
+  const fill = fade(colorOf(cs.backgroundColor));
+  const borderColor = uniform ? fade(colorOf(drawn[0]!.color)) : null;
+  if (fill || borderColor) {
+    const shape: Record<string, unknown> = Object.assign({ kind: "shape" }, box);
+    if (fill) shape.fill = fill;
+    if (borderColor) shape.border = { widthPx: drawn[0]!.w, color: borderColor };
+    const radius = cs.borderTopLeftRadius || "";
+    const r = radius.slice(-1) === "%" ? (px(radius) * Math.min(box.w, box.h)) / 100 : px(radius);
+    if (r > 0) shape.radiusPx = Math.min(r, Math.min(box.w, box.h) / 2);
+    items.push(shape);
+  }
+
+  // Text of its own: a text node, or an inline element holding text, directly inside.
+  let ownText = false;
+  for (let c = el.firstChild; c && !ownText; c = c.nextSibling) {
+    if (c.nodeType === 3) ownText = /\S/.test((c as Text).data);
+    else if (c.nodeType === 1 && !/^(script|style|template|noscript|img|svg|canvas)$/i.test((c as Element).tagName)) {
+      ownText = /^(inline|contents|)$/.test(win.getComputedStyle(c as Element).display) && /\S/.test(c.textContent || "");
+    }
+  }
+  if (!ownText) return items;
+  const runs = text.mergeTextRuns(text.extractTextRuns(el, win, colorOf, note));
+  for (const run of runs) if (run.color) run.color = fade(run.color) || { hex: run.color.hex, alpha: 0 };
+  if (!runs.length) return items;
+  const inset = {
+    l: px(cs.borderLeftWidth) + px(cs.paddingLeft), r: px(cs.borderRightWidth) + px(cs.paddingRight),
+    t: px(cs.borderTopWidth) + px(cs.paddingTop), b: px(cs.borderBottomWidth) + px(cs.paddingBottom),
+  };
+  const item: Record<string, unknown> = Object.assign({ kind: "text" }, box, {
+    x: box.x + inset.l, y: box.y + inset.t,
+    w: Math.max(1, box.w - inset.l - inset.r), h: Math.max(1, box.h - inset.t - inset.b), runs,
+  });
+  // A flex or grid box that centres its text does it with alignment, not `text-align`;
+  // in a column flex box the two axes swap.
+  const flex = /flex|grid/.test(cs.display);
+  const column = flex && /column/.test(cs.flexDirection);
+  const main = flex ? cs.justifyContent : "";
+  const cross = flex ? cs.alignItems : "";
+  const across = column ? cross : main;
+  const down = column ? main : cross;
+  const ta = cs.textAlign;
+  item.align = ta === "center" || across === "center" ? "center"
+    : ta === "right" || (ta === "end" && cs.direction !== "rtl") || /flex-end|^end$/.test(across) ? "right"
+    : ta === "justify" ? "justify" : "left";
+  item.valign = down === "center" ? "middle" : /flex-end|^end$/.test(down) ? "bottom" : "top";
+  if (cs.lineHeight !== "normal" && px(cs.lineHeight) > 0) item.lineHeightPx = px(cs.lineHeight);
+  if (el.tagName === "LI" && cs.listStyleType !== "none") {
+    item.bullet = el.parentElement && el.parentElement.tagName === "OL" ? "number" : "bullet";
+  }
+  items.push(item);
+  return items;
+}

package/src/services/design/bridge/bridge-extract-images.ts

@@ -0,0 +1,96 @@
+/**
+ * Image capture for the PowerPoint export, shipped to the frame as a `ppm.lib` helper (so,
+ * like every helper, it references nothing outside itself).
+ *
+ * The answer is always a PNG or JPEG data URL, the two formats every PowerPoint opens:
+ *  - an image from the design's own files is fetched (the design CSP's `connect-src` allows
+ *    exactly that source) and kept as-is when it is already PNG/JPEG, else drawn to a canvas;
+ *  - an image from a CDN cannot be fetched, so it is loaded with `crossOrigin="anonymous"`
+ *    and drawn — jsDelivr and unpkg send CORS headers, anything that does not taints the
+ *    canvas, and that image is reported rather than exported;
+ *  - an inline `<svg>` is serialised and rasterised at twice its on-screen size, so it
+ *    stays sharp on a projector; a `<canvas>` is read directly.
+ * Null means "could not be read", never a partial image.
+ */
+export function imageDataUrl(el: Element, win: Window): Promise<string | null> {
+  const doc = win.document;
+  const MAX_EDGE = 4096;
+  const rect = el.getBoundingClientRect();
+
+  const draw = (img: HTMLImageElement, w: number, h: number): string | null => {
+    if (!(w > 0 && h > 0)) return null;
+    const scale = Math.min(1, MAX_EDGE / Math.max(w, h));
+    const canvas = doc.createElement("canvas");
+    canvas.width = Math.max(1, Math.round(w * scale));
+    canvas.height = Math.max(1, Math.round(h * scale));
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return null;
+    try {
+      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+      return canvas.toDataURL("image/png");
+    } catch (e) {
+      // A tainted canvas (a cross-origin image without CORS) refuses to be read.
+      return null;
+    }
+  };
+
+  const load = (src: string, cors: boolean): Promise<HTMLImageElement | null> => new Promise((resolve) => {
+    const img = new (win as Window & typeof globalThis).Image();
+    if (cors) img.crossOrigin = "anonymous";
+    img.onload = () => resolve(img);
+    img.onerror = () => resolve(null);
+    img.src = src;
+  });
+
+  const fromBlob = (blob: Blob, vector: boolean): Promise<string | null> => {
+    if (blob.type === "image/png" || blob.type === "image/jpeg") {
+      return new Promise((resolve) => {
+        const reader = new FileReader();
+        reader.onload = () => resolve(typeof reader.result === "string" ? reader.result : null);
+        reader.onerror = () => resolve(null);
+        reader.readAsDataURL(blob);
+      });
+    }
+    const url = URL.createObjectURL(blob);
+    return load(url, false).then((img) => {
+      URL.revokeObjectURL(url);
+      if (!img) return null;
+      // A vector source has no meaningful natural size: draw it at twice its displayed size.
+      return vector || !img.naturalWidth
+        ? draw(img, rect.width * 2, rect.height * 2)
+        : draw(img, img.naturalWidth, img.naturalHeight);
+    });
+  };
+
+  const tag = el.tagName.toLowerCase();
+  if (tag === "canvas") {
+    try {
+      return Promise.resolve((el as HTMLCanvasElement).toDataURL("image/png"));
+    } catch (e) {
+      return Promise.resolve(null);
+    }
+  }
+  if (tag === "svg") {
+    let xml = new XMLSerializer().serializeToString(el);
+    if (!/^<svg[^>]*\sxmlns=/.test(xml)) xml = xml.replace(/^<svg/, '<svg xmlns="http://www.w3.org/2000/svg"');
+    return fromBlob(new Blob([xml], { type: "image/svg+xml" }), true);
+  }
+  if (tag !== "img") return Promise.resolve(null);
+  const src = (el as HTMLImageElement).currentSrc || (el as HTMLImageElement).src;
+  if (!src) return Promise.resolve(null);
+  if (/^data:image\/(png|jpeg);base64,/.test(src)) return Promise.resolve(src);
+  let own = false;
+  try {
+    const url = new URL(src, doc.baseURI);
+    own = url.protocol === "data:" || url.protocol === "blob:" || url.origin === win.location.origin;
+  } catch (e) {
+    return Promise.resolve(null);
+  }
+  if (own) {
+    return fetch(src)
+      .then((res) => (res.ok ? res.blob() : null))
+      .then((blob) => (blob ? fromBlob(blob, blob.type === "image/svg+xml") : null))
+      .catch(() => null);
+  }
+  return load(src, true).then((img) => (img ? draw(img, img.naturalWidth || rect.width * 2, img.naturalHeight || rect.height * 2) : null));
+}

package/src/services/design/bridge/bridge-extract-slides.ts

@@ -0,0 +1,169 @@
+import type { BridgeApi } from "./bridge-core.ts";
+
+/**
+ * The PowerPoint export's measuring pass, run by the bridge inside the live canvas.
+ *
+ * The browser already rendering the design is the renderer: every position comes from
+ * `getBoundingClientRect` and every colour, size and face from `getComputedStyle`, so no
+ * headless browser is involved. Slides are the `section.slide` elements (the slide convention
+ * the design instructions teach), else `[data-slide]`, else the whole page as one slide.
+ * Inside a slide, each laid-out box becomes a shape when it paints a background or a uniform
+ * border, a text box when it holds text of its own, and images/SVG/canvas become pictures.
+ *
+ * What PowerPoint cannot show (gradients, background images, shadows, partial borders,
+ * filters, blend modes, transforms other than rotation…) is counted per slide and reported,
+ * never silently dropped. Shipped as source, so it references nothing outside itself; the
+ * text and image helpers arrive through `ppm.lib`.
+ */
+export function installSlidesExtract(ppm: BridgeApi): void {
+  const win = ppm.win as Window & typeof globalThis;
+  const doc = ppm.doc;
+  const lib = ppm.lib;
+  const MAX_ITEMS = 600;
+  const MAX_SLIDES = 200;
+  const MAX_IMAGE_BYTES = 50 * 1024 * 1024;
+  const MAX_EDGE = 5376;
+  const SKIP = /^(script|style|template|noscript|head|meta|link|title|br|wbr|option|datalist|ppm-design-overlay|ppm-design-handles)$/i;
+  const MEDIA = /^(img|svg|canvas)$/i;
+  // An engine that computes no display at all (happy-dom for unstyled tags) means inline.
+  const INLINE = /^(inline|contents|)$/;
+  type Color = { hex: string; alpha: number };
+  type Frame = { left: number; top: number; scale: number; w: number; h: number };
+  let probe: CanvasRenderingContext2D | null = null;
+
+  function colorOf(value: string): Color | null {
+    const parsed = lib.parseCssColor(value);
+    if (parsed || !value) return parsed;
+    // oklch(), lab(), color(): the canvas converts whatever the engine can paint.
+    try {
+      if (!probe) {
+        const c = doc.createElement("canvas");
+        c.width = c.height = 1;
+        probe = c.getContext("2d", { willReadFrequently: true });
+      }
+      if (!probe) return null;
+      probe.clearRect(0, 0, 1, 1);
+      probe.fillStyle = value;
+      probe.fillRect(0, 0, 1, 1);
+      const d = probe.getImageData(0, 0, 1, 1).data;
+      return lib.parseCssColor("rgba(" + d[0] + "," + d[1] + "," + d[2] + "," + d[3]! / 255 + ")");
+    } catch (e) {
+      return null;
+    }
+  }
+
+  /** The element's box in slide px; rotated boxes use their layout size around the rect's centre. */
+  function boxOf(el: Element, f: Frame, deg: number) {
+    const r = el.getBoundingClientRect();
+    const he = el as HTMLElement;
+    const rotated = deg !== 0 && typeof he.offsetWidth === "number";
+    const w = rotated ? he.offsetWidth : r.width * f.scale;
+    const h = rotated ? he.offsetHeight : r.height * f.scale;
+    const cx = (r.left + r.width / 2 - f.left) * f.scale;
+    const cy = (r.top + r.height / 2 - f.top) * f.scale;
+    return { x: cx - w / 2, y: cy - h / 2, w, h, rotation: deg };
+  }
+
+  async function extractSlide(root: Element, f: Frame, note: (label: string) => void) {
+    const items: Array<Record<string, unknown> | Promise<Record<string, unknown> | null>> = [];
+    const onSlide = (b: { x: number; y: number; w: number; h: number }): boolean =>
+      b.x < f.w && b.y < f.h && b.x + b.w > 0 && b.y + b.h > 0;
+    const stack: Array<{ el: Element; opacity: number }> = [];
+    const pushChildren = (el: Element, opacity: number): void => {
+      for (let i = el.children.length - 1; i >= 0; i--) stack.push({ el: el.children[i]!, opacity });
+    };
+    pushChildren(root, 1);
+    while (stack.length) {
+      const { el, opacity } = stack.pop()!;
+      if (SKIP.test(el.tagName)) continue;
+      const cs = win.getComputedStyle(el);
+      if (cs.display === "none") continue;
+      const op = opacity * (parseFloat(cs.opacity) >= 0 ? parseFloat(cs.opacity) : 1);
+      if (op <= 0.01) continue;
+      const visible = cs.visibility !== "hidden";
+      const media = MEDIA.test(el.tagName);
+      if (visible && (media || !INLINE.test(cs.display))) {
+        const rot = lib.cssRotation(cs);
+        if (!rot.pure) note("transform other than rotation");
+        const box = boxOf(el, f, rot.deg);
+        // An empty box paints nothing: not worth a warning, and never an item.
+        if (!(box.w > 0.5 && box.h > 0.5)) { /* nothing to draw */ }
+        else if (!onSlide(box)) note("element outside the slide, left out");
+        else if (items.length >= MAX_ITEMS) note("element over the per-slide limit, left out");
+        else if (media) {
+          if (op < 0.99) note("image opacity");
+          items.push(lib.imageDataUrl(el, win).then((data) => {
+            if (data) return Object.assign({ kind: "image", data }, box);
+            note("image that could not be read");
+            return null;
+          }));
+        } else {
+          for (const item of lib.blockItems(el, win, box, op, colorOf, note, lib)) items.push(item);
+        }
+      }
+      if (!media) pushChildren(el, op);
+    }
+    const resolved = await Promise.all(items);
+    return resolved.filter((item): item is Record<string, unknown> => item !== null);
+  }
+
+  function backgroundOf(el: Element): Color | null {
+    for (let node: Element | null = el; node; node = node.parentElement) {
+      const c = colorOf(win.getComputedStyle(node).backgroundColor);
+      if (c && c.alpha > 0) return c;
+    }
+    return null;
+  }
+
+  async function extractDeck() {
+    if (doc.fonts && doc.fonts.ready) await doc.fonts.ready;
+    let roots = Array.prototype.slice.call(doc.querySelectorAll("section.slide")) as Element[];
+    if (!roots.length) roots = Array.prototype.slice.call(doc.querySelectorAll("[data-slide]")) as Element[];
+    const warnings: string[] = [];
+    const de = doc.documentElement;
+    const whole = roots.length === 0;
+    const first = (whole ? de : roots[0]) as HTMLElement;
+    const width = Math.min(MAX_EDGE, whole ? de.clientWidth : first.offsetWidth);
+    const height = Math.min(MAX_EDGE, whole ? de.scrollHeight : first.offsetHeight);
+    if (whole && de.scrollHeight > MAX_EDGE) warnings.push("The page is taller than a slide can be; everything below " + MAX_EDGE + "px was left out.");
+    if (!whole && win.innerWidth < width * 0.9) warnings.push("The canvas is narrower than the slides; export from the Slide frame for the exact layout.");
+    if (roots.length > MAX_SLIDES) warnings.push("Only the first " + MAX_SLIDES + " slides were exported.");
+    if (!(width > 0 && height > 0)) throw new Error("The slides have no size on the canvas");
+    const slides: Array<Record<string, unknown>> = [];
+    let imageBytes = 0;
+    const list = whole ? [doc.body || de] : roots.slice(0, MAX_SLIDES);
+    for (let i = 0; i < list.length; i++) {
+      const root = list[i]!;
+      const r = (whole ? de : root).getBoundingClientRect();
+      const counts: Record<string, number> = {};
+      const note = (label: string): void => { counts[label] = (counts[label] || 0) + 1; };
+      const layoutWidth = whole ? width : (root as HTMLElement).offsetWidth;
+      if (!(r.width > 0 && layoutWidth > 0)) {
+        warnings.push("Slide " + (i + 1) + " is hidden on the canvas, so it was exported empty.");
+        slides.push({ items: [] });
+        continue;
+      }
+      const frame = { left: r.left, top: r.top, scale: layoutWidth / r.width, w: width, h: height };
+      const items = await extractSlide(root, frame, note);
+      for (const item of items) if (typeof item.data === "string") imageBytes += item.data.length;
+      if (imageBytes > MAX_IMAGE_BYTES) throw new Error("The slides' images add up to more than 50 MB");
+      const slide: Record<string, unknown> = { items };
+      const bg = backgroundOf(root);
+      if (bg) slide.background = bg;
+      const own = win.getComputedStyle(root).backgroundImage;
+      if (own && own !== "none") note(own.indexOf("gradient") >= 0 ? "gradient slide background" : "slide background image");
+      for (const label in counts) warnings.push("Slide " + (i + 1) + ": " + label + (counts[label]! > 1 ? " (" + counts[label] + "x)" : ""));
+      slides.push(slide);
+    }
+    return { width, height, slides, warnings: warnings.slice(0, 200) };
+  }
+
+  ppm.on("slides-extract", (m) => {
+    const requestId = m.requestId;
+    if (typeof requestId !== "string" || !/^[A-Za-z0-9_-]{8,64}$/.test(requestId)) return;
+    extractDeck().then(
+      (deck) => ppm.post("slides-data", { requestId, doc: deck }),
+      (e) => ppm.post("slides-error", { requestId, message: String((e && (e as Error).message) || e).slice(0, 300) }),
+    );
+  });
+}