@hienlh/ppm 0.22.11 → 0.23.1

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

@@ -0,0 +1,187 @@
+/**
+ * Text measurement for the PowerPoint export, shipped to the frame as `ppm.lib` helpers.
+ *
+ * Each function travels as its own source (see bridge-script.ts), so none may reference
+ * anything in this module's scope; a helper that needs another is handed it as a parameter.
+ *
+ * A text block's content becomes a list of runs: each run is a stretch of text with one
+ * style (weight, slant, underline, colour, size, face), and `breakLine` marks a line break
+ * after it. Whitespace is collapsed the way CSS `white-space: normal` renders it, so the
+ * PowerPoint text reads like the page rather than like its source indentation.
+ */
+
+export interface ExtractedColor {
+  hex: string;
+  alpha: number;
+}
+
+export interface ExtractedRun {
+  text: string;
+  bold?: boolean;
+  italic?: boolean;
+  underline?: boolean;
+  color?: ExtractedColor;
+  sizePx?: number;
+  font?: string;
+  breakLine?: boolean;
+}
+
+/**
+ * `rgb()`/`rgba()` (comma or space syntax, `%` channels, `/ alpha`), `#rgb[a]`,
+ * `#rrggbb[aa]` and `transparent`. Anything else (`oklch()`, `color()`) is null, and the
+ * bridge resolves it through a canvas instead.
+ */
+export function parseCssColor(value: string): ExtractedColor | null {
+  const v = String(value || "").trim().toLowerCase();
+  if (v === "transparent") return { hex: "000000", alpha: 0 };
+  const round = (n: number): number => Math.round(n * 1000) / 1000;
+  const hex = /^#([0-9a-f]{3,8})$/.exec(v);
+  if (hex) {
+    let h = hex[1]!;
+    if (h.length === 3 || h.length === 4) h = h.split("").map((c) => c + c).join("");
+    if (h.length !== 6 && h.length !== 8) return null;
+    return { hex: h.slice(0, 6).toUpperCase(), alpha: h.length === 8 ? round(parseInt(h.slice(6), 16) / 255) : 1 };
+  }
+  const m = /^rgba?\(\s*([^)]*)\)$/.exec(v);
+  if (!m) return null;
+  const parts = m[1]!.split(/\s*[,/]\s*|\s+/).filter((p) => p !== "");
+  if (parts.length < 3 || parts.length > 4) return null;
+  const channels: number[] = [];
+  for (let i = 0; i < 3; i++) {
+    const p = parts[i]!;
+    const n = p.endsWith("%") ? parseFloat(p) * 2.55 : parseFloat(p);
+    if (!isFinite(n)) return null;
+    channels.push(Math.max(0, Math.min(255, Math.round(n))));
+  }
+  let alpha = 1;
+  if (parts.length === 4) {
+    const p = parts[3]!;
+    alpha = p.endsWith("%") ? parseFloat(p) / 100 : parseFloat(p);
+    if (!isFinite(alpha)) return null;
+    alpha = Math.max(0, Math.min(1, alpha));
+  }
+  const hexOf = (n: number): string => (n < 16 ? "0" : "") + n.toString(16);
+  return { hex: (hexOf(channels[0]!) + hexOf(channels[1]!) + hexOf(channels[2]!)).toUpperCase(), alpha: round(alpha) };
+}
+
+/**
+ * Joins adjacent runs of identical style, folds a bare line break into the run before it,
+ * drops empty runs, and trims the collapsed spaces at the start and end of every line.
+ */
+export function mergeTextRuns(runs: ExtractedRun[]): ExtractedRun[] {
+  const same = (a: ExtractedRun, b: ExtractedRun): boolean =>
+    !!a.bold === !!b.bold && !!a.italic === !!b.italic && !!a.underline === !!b.underline
+    && a.sizePx === b.sizePx && a.font === b.font
+    && (a.color ? a.color.hex + a.color.alpha : "") === (b.color ? b.color.hex + b.color.alpha : "");
+  const merged: ExtractedRun[] = [];
+  for (let i = 0; i < runs.length; i++) {
+    const run = runs[i]!;
+    const prev = merged[merged.length - 1];
+    if (run.text === "" && run.breakLine && prev && !prev.breakLine) {
+      prev.breakLine = true;
+      continue;
+    }
+    if (prev && !prev.breakLine && same(prev, run)) {
+      prev.text += run.text;
+      if (run.breakLine) prev.breakLine = true;
+      continue;
+    }
+    merged.push(Object.assign({}, run));
+  }
+  // Trim line edges: the first run of a line loses leading spaces, the last trailing ones.
+  let lineStart = 0;
+  for (let i = 0; i < merged.length; i++) {
+    const run = merged[i]!;
+    if (i === lineStart) run.text = run.text.replace(/^ +/, "");
+    if (run.breakLine || i === merged.length - 1) {
+      run.text = run.text.replace(/ +$/, "");
+      lineStart = i + 1;
+    }
+  }
+  const out = merged.filter((r) => r.text !== "" || r.breakLine);
+  // A trailing break has nothing after it to break before.
+  while (out.length && out[out.length - 1]!.text === "") out.pop();
+  if (out.length) delete out[out.length - 1]!.breakLine;
+  return out;
+}
+
+/**
+ * The raw runs of one text block: its text nodes and those of its `inline` descendants.
+ * Descendants laid out as boxes (block, flex, inline-block…) are left out, because the
+ * export measures them as blocks of their own. `note` records what cannot be reproduced.
+ */
+export function extractTextRuns(
+  block: Element,
+  win: Window,
+  colorOf: (value: string) => ExtractedColor | null,
+  note: (label: string) => void,
+): ExtractedRun[] {
+  const runs: ExtractedRun[] = [];
+  const SKIP = /^(script|style|template|noscript|svg|img|canvas|video|audio|iframe|object|embed|input|select|textarea)$/i;
+  // An engine that computes no display at all (happy-dom for unstyled tags) means inline.
+  const INLINE = /^(inline|contents|)$/;
+
+  const styleOf = (el: Element, underline: boolean): ExtractedRun => {
+    const cs = win.getComputedStyle(el);
+    const weight = parseInt(cs.fontWeight, 10);
+    const run: ExtractedRun = { text: "" };
+    if (cs.fontWeight === "bold" || weight >= 600) run.bold = true;
+    if (cs.fontStyle === "italic" || cs.fontStyle.indexOf("oblique") === 0) run.italic = true;
+    if (underline) run.underline = true;
+    const color = colorOf(cs.color);
+    if (color) run.color = color;
+    const size = parseFloat(cs.fontSize);
+    if (isFinite(size) && size > 0) run.sizePx = size;
+    const family = (cs.fontFamily.split(",")[0] || "").trim().replace(/^["']|["']$/g, "");
+    if (family) run.font = family;
+    return run;
+  };
+
+  const visit = (node: Node, parent: Element, underline: boolean): void => {
+    if (node.nodeType === 3) {
+      const cs = win.getComputedStyle(parent);
+      if (cs.visibility === "hidden") return;
+      let text = (node as Text).data;
+      const transform = cs.textTransform;
+      if (transform === "uppercase") text = text.toUpperCase();
+      else if (transform === "lowercase") text = text.toLowerCase();
+      const pre = /^pre/.test(cs.whiteSpace) || cs.whiteSpace === "break-spaces";
+      if (!pre) {
+        const last = runs.length ? runs[runs.length - 1]! : null;
+        text = text.replace(/[\t\n\r\f ]+/g, " ");
+        // Collapse across element boundaries: "a <b> b</b>" renders one space.
+        if (last && !last.breakLine && / $/.test(last.text) && text.charAt(0) === " ") text = text.slice(1);
+        if (text !== "") runs.push(Object.assign(styleOf(parent, underline), { text }));
+        return;
+      }
+      const lines = text.split("\n");
+      for (let i = 0; i < lines.length; i++) {
+        const run = Object.assign(styleOf(parent, underline), { text: lines[i]!.replace(/\t/g, "    ") });
+        if (i < lines.length - 1) run.breakLine = true;
+        runs.push(run);
+      }
+      return;
+    }
+    if (node.nodeType !== 1) return;
+    const el = node as Element;
+    const tag = el.tagName.toLowerCase();
+    if (tag === "br") {
+      runs.push({ text: "", breakLine: true });
+      return;
+    }
+    if (SKIP.test(tag)) return;
+    const cs = win.getComputedStyle(el);
+    if (cs.display === "none" || !INLINE.test(cs.display)) return;
+    if (parseFloat(cs.marginLeft) || parseFloat(cs.marginRight) || parseFloat(cs.paddingLeft) || parseFloat(cs.paddingRight)) {
+      note("spacing around inline text");
+    }
+    const bg = colorOf(cs.backgroundColor);
+    if (bg && bg.alpha > 0) note("background behind inline text");
+    const under = underline || cs.textDecorationLine.indexOf("underline") >= 0;
+    for (let c = el.firstChild; c; c = c.nextSibling) visit(c, el, under);
+  };
+
+  const own = win.getComputedStyle(block).textDecorationLine.indexOf("underline") >= 0;
+  for (let c = block.firstChild; c; c = c.nextSibling) visit(c, block, own);
+  return runs;
+}

package/src/services/design/bridge/bridge-layout-boxes.ts

@@ -0,0 +1,137 @@
+import type { BridgeApi } from "./bridge-core.ts";
+import type { CheckAdd } from "./bridge-layout-grid.ts";
+
+/**
+ * The canvas self-check's box rules, run over the rendered design: sideways page overflow,
+ * elements running past the viewport, text cut off by a clipping ancestor, content squeezed
+ * to nothing, and sibling blocks drawn over each other. Shipped into the frame as source
+ * (`ppm.lib`), so nothing here may reference this module's scope.
+ *
+ * Each rule reports the outermost offender only: a card that runs off the screen takes its
+ * contents with it, and listing all of them would bury the one line worth fixing. What a
+ * design does on purpose is left alone: anything inside a scroll container (reachable),
+ * fully off-screen drawers, visually-hidden text, transparent inputs, and grid children,
+ * which only overlap when their author placed them on the same cell.
+ */
+export function boxFindings(ppm: BridgeApi, add: CheckAdd): void {
+  const win = ppm.win;
+  const doc = ppm.doc;
+  const de = doc.documentElement;
+  const body = doc.body;
+  if (!de || !body) return;
+  const SKIP = /^(script|style|template|noscript|br|wbr|option|optgroup|datalist|source|track|param|area|map|ppm-design-overlay|ppm-design-handles|ppm-design-probe)$/i;
+  const REPLACED = /^(img|svg|video|canvas|iframe|input|select|textarea|button|progress|meter|embed|object)$/i;
+  const vw = de.clientWidth || win.innerWidth;
+  const label = (el: Element): string => ppm.lib.checkLabel(el, false);
+  const round = (n: number): number => Math.round(n);
+  const inside = (list: Element[], el: Element): boolean => list.some((p) => p !== el && p.contains(el));
+
+  const sheetWide = de.scrollWidth;
+  if (sheetWide > vw + 1) {
+    const hidden = win.getComputedStyle(body).overflowX !== "visible" || win.getComputedStyle(de).overflowX !== "visible";
+    add("page-overflow", "The page is " + sheetWide + "px wide in a " + vw + "px viewport, so " + (hidden
+      ? "its right side is cut off (overflow is hidden)." : "it scrolls sideways.") + " Something below is wider than the screen.");
+  }
+
+  function ownText(el: Element): boolean {
+    for (let n = el.firstChild; n; n = n.nextSibling) if (n.nodeType === 3 && /\S/.test(n.nodeValue || "")) return true;
+    return false;
+  }
+  function scrollsX(el: Element): boolean {
+    for (let p = el.parentElement; p && p !== body && p !== de; p = p.parentElement) {
+      const o = win.getComputedStyle(p).overflowX;
+      if (o === "auto" || o === "scroll") return true;
+    }
+    return false;
+  }
+  function clipper(el: Element): { el: Element; x: boolean; y: boolean } | null {
+    for (let p = el.parentElement; p && p !== body && p !== de; p = p.parentElement) {
+      const s = win.getComputedStyle(p);
+      const x = s.overflowX === "hidden" || s.overflowX === "clip";
+      const y = s.overflowY === "hidden" || s.overflowY === "clip";
+      if (s.overflowX === "auto" || s.overflowX === "scroll" || s.overflowY === "auto" || s.overflowY === "scroll") return null;
+      if (x || y) return s.textOverflow === "ellipsis" ? null : { el: p, x, y };
+    }
+    return null;
+  }
+  function visuallyHidden(s: CSSStyleDeclaration, r: DOMRect): boolean {
+    return (s.position === "absolute" || s.position === "fixed") && (r.width <= 1 || r.height <= 1)
+      && (s.overflow !== "visible" || (s.clip !== "auto" && !!s.clip) || s.clipPath !== "none");
+  }
+
+  const collapsed: Element[] = [], offscreen: Element[] = [], clipped: Element[] = [];
+  const parents: Element[] = [];
+  const all = body.getElementsByTagName("*");
+  for (let i = 0; i < all.length && i < 8000; i++) {
+    const el = all[i]!;
+    if (SKIP.test(el.localName) || (el as SVGElement).ownerSVGElement) continue;
+    const s = win.getComputedStyle(el);
+    if (s.display === "none" || s.display === "contents" || s.visibility !== "visible" || !el.getClientRects().length) continue;
+    if (el.children.length >= 2 && el.children.length <= 60 && s.display !== "grid" && s.display !== "inline-grid") parents.push(el);
+    const r = el.getBoundingClientRect();
+    const text = ownText(el);
+    const content = text || REPLACED.test(el.localName);
+    if (content && (r.width < 4 || r.height < 4) && parseFloat(s.opacity) > 0 && !visuallyHidden(s, r) && !inside(collapsed, el)) {
+      collapsed.push(el);
+      add("collapsed", "Rendered " + round(r.width) + "x" + round(r.height) + "px although it has " + (text ? "text" : "content")
+        + ", so it is invisible. Something squeezes it: a width/height, flex-shrink, min-width or an empty track.", el);
+      continue;
+    }
+    const pastRight = r.left < vw - 1 && r.right > vw + 1;
+    const pastLeft = r.left < -1 && r.right > 1;
+    if ((pastRight || pastLeft) && r.width > 4 && !inside(offscreen, el) && !scrollsX(el)) {
+      offscreen.push(el);
+      add("offscreen", pastRight
+        ? "Runs " + round(r.right - vw) + "px past the right edge of the " + vw + "px viewport (x " + round(r.left) + " to " + round(r.right) + ")."
+        : "Starts " + round(-r.left) + "px left of the viewport, so its left part is not visible.", el);
+      continue;
+    }
+    if (text && r.width >= 4 && r.height >= 4 && !inside(clipped, el)) {
+      const c = clipper(el);
+      if (c) {
+        const b = c.el.getBoundingClientRect();
+        const hitsX = r.right > b.left && r.left < b.right, hitsY = r.bottom > b.top && r.top < b.bottom;
+        const outX = c.x ? Math.max(b.left - r.left, r.right - b.right, 0) : 0;
+        const outY = c.y ? Math.max(b.top - r.top, r.bottom - b.bottom, 0) : 0;
+        if (hitsX && hitsY && (outX > 2 || outY > 2)) {
+          clipped.push(el);
+          add("clipped", "Its text is cut off by " + label(c.el) + " (overflow hidden): " + round(Math.max(outX, outY))
+            + "px of it is outside that box. Let the box grow, or make the content fit.", el);
+        }
+      }
+    }
+  }
+
+  function flowBlock(el: Element): DOMRect | null {
+    const s = win.getComputedStyle(el);
+    const inline = /^inline/.test(s.display) && s.display !== "inline-block" && s.display !== "inline-flex";
+    if (s.display === "none" || s.display === "contents" || inline) return null;
+    if (s.float !== "none" || s.transform !== "none") return null;
+    if (s.position !== "static" && s.position !== "relative") return null;
+    if (s.position === "relative" && [s.top, s.left, s.right, s.bottom].some((v) => v !== "auto" && parseFloat(v) !== 0)) return null;
+    const r = el.getBoundingClientRect();
+    return r.width * r.height >= 16 ? r : null;
+  }
+  for (let p = 0; p < parents.length; p++) {
+    const kids = parents[p]!.children;
+    const boxes: Array<{ el: Element; r: DOMRect }> = [];
+    for (let i = 0; i < kids.length; i++) {
+      if (SKIP.test(kids[i]!.localName)) continue;
+      const r = flowBlock(kids[i]!);
+      if (r) boxes.push({ el: kids[i]!, r });
+    }
+    for (let i = 1; i < boxes.length; i++) {
+      for (let j = 0; j < i; j++) {
+        const a = boxes[j]!.r, b = boxes[i]!.r;
+        const w = Math.min(a.right, b.right) - Math.max(a.left, b.left);
+        const h = Math.min(a.bottom, b.bottom) - Math.max(a.top, b.top);
+        if (w <= 0 || h <= 0) continue;
+        const share = (w * h) / Math.min(a.width * a.height, b.width * b.height);
+        if (share <= 0.25) continue;
+        add("overlap", "Overlaps its sibling " + label(boxes[j]!.el) + " by " + round(share * 100)
+          + "% of the smaller box, although neither is positioned: usually a negative margin or a fixed size that is too small.", boxes[i]!.el);
+        break;
+      }
+    }
+  }
+}

package/src/services/design/bridge/bridge-layout-check.ts

@@ -0,0 +1,99 @@
+import type { BridgeApi } from "./bridge-core.ts";
+import type { ScreenshotLib } from "./bridge-layout-screenshot.ts";
+import type { CheckAdd } from "./bridge-layout-grid.ts";
+
+/**
+ * The canvas self-check, answering the parent's `check-run`.
+ *
+ * The design agent runs on the server and never sees what it built; the only place the
+ * design is actually laid out is this frame in the user's browser. So the frame measures
+ * itself — the grid and box rules from `ppm.lib` — and, when asked, draws a screenshot with
+ * the library whose source the parent sends along. The report is capped (30 findings, 300
+ * characters each, every finding still counted by kind) and validated again by the parent
+ * and the server: a page script can post the same shape, so it is only ever data.
+ *
+ * Shipped as source, so nothing here may reference this module's scope.
+ */
+export function installLayoutCheck(ppm: BridgeApi): void {
+  const win = ppm.win as Window & { modernScreenshot?: ScreenshotLib };
+  const doc = ppm.doc;
+  const MAX = 30;
+  let shotLib: ScreenshotLib | null = null;
+
+  function measure() {
+    const findings: Array<{ kind: string; message: string; element?: string }> = [];
+    const counts: Record<string, number> = {};
+    const add: CheckAdd = (kind, message, el) => {
+      counts[kind] = (counts[kind] || 0) + 1;
+      if (findings.length >= MAX) return;
+      const finding: { kind: string; message: string; element?: string } = {
+        kind, message: message.length > 300 ? message.slice(0, 299) + "…" : message,
+      };
+      if (el) finding.element = ppm.lib.checkLabel(el, true);
+      findings.push(finding);
+    };
+    const rules = [ppm.lib.gridImplicitFindings, ppm.lib.boxFindings];
+    for (let i = 0; i < rules.length; i++) {
+      try {
+        rules[i]!(ppm, add);
+      } catch (e) {
+        ppm.issue("error", "canvas check rule failed: " + (e && (e as Error).message));
+      }
+    }
+    const de = doc.documentElement;
+    return {
+      viewport: { width: win.innerWidth, height: win.innerHeight },
+      page: { width: de ? de.scrollWidth : 0, height: de ? de.scrollHeight : 0 },
+      findings, counts,
+    } as Record<string, unknown>;
+  }
+
+  /** Runs the library once per document; the UMD wrapper is kept off any page-defined loader. */
+  function loadLib(source: unknown): ScreenshotLib | null {
+    if (shotLib) return shotLib;
+    if (typeof source !== "string" || !source) return null;
+    const previous = win.modernScreenshot;
+    try {
+      new Function("exports", "module", "define", source).call(win, undefined, undefined, undefined);
+      const lib = win.modernScreenshot;
+      shotLib = lib && typeof lib.domToCanvas === "function" && typeof lib.createContext === "function" ? lib : null;
+    } finally {
+      win.modernScreenshot = previous;
+    }
+    return shotLib;
+  }
+
+  ppm.on("check-run", (m) => {
+    const requestId = m.requestId;
+    if (typeof requestId !== "string" || !/^[A-Za-z0-9_-]{8,64}$/.test(requestId)) return;
+    let report: Record<string, unknown>;
+    try {
+      report = measure();
+    } catch (e) {
+      ppm.post("check-error", { requestId, message: String((e && (e as Error).message) || e).slice(0, 300) });
+      return;
+    }
+    if (m.screenshot !== true) {
+      ppm.post("check-result", { requestId, report });
+      return;
+    }
+    let lib: ScreenshotLib | null = null;
+    try {
+      lib = loadLib(m.lib);
+    } catch (e) {
+      report.screenshotNote = "The screenshot library failed to load: " + String((e && (e as Error).message) || e).slice(0, 200);
+    }
+    if (!lib) {
+      if (!report.screenshotNote) report.screenshotNote = "No screenshot: the screenshot library was not available.";
+      ppm.post("check-result", { requestId, report });
+      return;
+    }
+    ppm.lib.captureScreenshot(ppm, lib).then(
+      (shot) => {
+        report.screenshot = { dataUrl: shot.dataUrl, width: shot.width, height: shot.height };
+        report.screenshotNote = shot.note;
+      },
+      (e) => { report.screenshotNote = "The screenshot failed: " + String((e && (e as Error).message) || e).slice(0, 200); },
+    ).then(() => ppm.post("check-result", { requestId, report }));
+  });
+}

package/src/services/design/bridge/bridge-layout-grid.ts

@@ -0,0 +1,165 @@
+import type { BridgeApi } from "./bridge-core.ts";
+import type { CanvasCheckKind } from "../../../shared/design-canvas-check.ts";
+
+/**
+ * The canvas self-check's grid rule and the element label every rule uses. Both ship into
+ * the design frame as source (`ppm.lib`), so neither may reference this module's scope.
+ *
+ * The bug this exists for: an item with a definite row but no column (`grid-row: 1 / -1`)
+ * and another with a definite cell (`grid-column: 1 / -1; grid-row: 2`) both want column 1.
+ * The definite one is placed first, so auto-placement pushes the other into an implicit
+ * column past the template, and every later item shifts one column. Nothing errors; the
+ * page just looks wrong.
+ *
+ * Detection needs the explicit grid, which the resolved `grid-template-columns` does not
+ * give (for a grid container it lists every track, implicit ones included) and stylesheet
+ * text cannot give from an opaque origin. So each grid gets a probe for the duration of the
+ * measurement: an absolutely positioned child spanning lines `1 / -1`, whose box *is* the
+ * explicit grid area, because negative lines count from the end of the explicit grid and an
+ * absolutely positioned child takes no part in auto-placement. A static container is made
+ * `relative` for that instant so it is the probe's containing block; everything is put back
+ * before the browser can paint.
+ */
+
+export type CheckAdd = (kind: CanvasCheckKind, message: string, el?: Element) => void;
+
+/** `tag#id.class.class [data-ppm-id=N] "text…"`, at most 200 characters. */
+export function checkLabel(el: Element, withText: boolean): string {
+  let s = el.localName.toLowerCase();
+  const id = el.getAttribute("id");
+  if (id && /^[\w-]{1,40}$/.test(id)) s += "#" + id;
+  const classes = (el.getAttribute("class") || "").trim().split(/\s+/).filter(Boolean).slice(0, 3);
+  for (let i = 0; i < classes.length; i++) s += "." + classes[i]!.slice(0, 30);
+  if (!withText) return s.slice(0, 80);
+  const ppmId = el.getAttribute("data-ppm-id");
+  if (ppmId && /^\d{1,10}$/.test(ppmId)) s += " [data-ppm-id=" + ppmId + "]";
+  const text = (el.textContent || "").replace(/\s+/g, " ").trim();
+  if (text) s += ' "' + (text.length > 40 ? text.slice(0, 40) + "…" : text) + '"';
+  return s.slice(0, 200);
+}
+
+export function gridImplicitFindings(ppm: BridgeApi, add: CheckAdd): void {
+  const win = ppm.win;
+  const doc = ppm.doc;
+  if (!doc.body) return;
+  const px = (v: string): number => { const n = parseFloat(v); return isFinite(n) ? n : 0; };
+  const label = (el: Element): string => ppm.lib.checkLabel(el, false);
+
+  /** Resolved track sizes in px; null for a value that is not a plain track list. */
+  function sizes(value: string): number[] | null {
+    if (!value || value === "none" || /subgrid|masonry|repeat\(/.test(value)) return null;
+    const out: number[] = [];
+    const parts = value.replace(/\[[^\]]*\]/g, " ").trim().split(/\s+/);
+    for (let i = 0; i < parts.length; i++) {
+      if (!/^-?[\d.]+px$/.test(parts[i]!)) return null;
+      out.push(parseFloat(parts[i]!));
+    }
+    return out;
+  }
+
+  /** How many tracks lie before, inside and after the explicit span [start, start + span]. */
+  function split(tracks: number[], gap: number, contentStart: number, start: number, span: number) {
+    let before = 0, pos = contentStart;
+    if (start - contentStart > 1) {
+      while (before < tracks.length && pos + tracks[before]! <= start + 1) { pos += tracks[before]! + gap; before++; }
+    }
+    let explicit = 0, width = 0;
+    if (span > 0.5) {
+      for (let i = before; i < tracks.length; i++) {
+        const next = width + (explicit ? gap : 0) + tracks[i]!;
+        if (next > span + 1) break;
+        width = next;
+        explicit++;
+      }
+    }
+    return { before, explicit, after: tracks.length - before - explicit };
+  }
+
+  function explicitArea(grid: HTMLElement, cs: CSSStyleDeclaration): DOMRect {
+    const prev = grid.style.getPropertyValue("position");
+    const prevPriority = grid.style.getPropertyPriority("position");
+    const moved = cs.position === "static";
+    if (moved) grid.style.setProperty("position", "relative", "important");
+    const probe = doc.createElement("ppm-design-probe");
+    const props = [["position", "absolute"], ["display", "block"], ["inset", "0"], ["margin", "0"], ["padding", "0"],
+      ["border", "0"], ["grid-column", "1 / -1"], ["grid-row", "1 / -1"], ["visibility", "hidden"], ["pointer-events", "none"]];
+    for (let i = 0; i < props.length; i++) probe.style.setProperty(props[i]![0]!, props[i]![1]!, "important");
+    grid.appendChild(probe);
+    const rect = probe.getBoundingClientRect();
+    grid.removeChild(probe);
+    if (moved) {
+      if (prev) grid.style.setProperty("position", prev, prevPriority);
+      else grid.style.removeProperty("position");
+    }
+    return rect;
+  }
+
+  function items(grid: Element): Element[] {
+    const out: Element[] = [];
+    const kids = grid.children;
+    for (let i = 0; i < kids.length; i++) {
+      const s = win.getComputedStyle(kids[i]!);
+      if (s.display === "contents") { out.push.apply(out, items(kids[i]!)); continue; }
+      if (s.display === "none" || s.position === "absolute" || s.position === "fixed") continue;
+      out.push(kids[i]!);
+    }
+    return out;
+  }
+
+  function placement(el: Element): string {
+    const s = win.getComputedStyle(el);
+    const line = (a: string, b: string): string => (b === "auto" ? a : a + " / " + b);
+    const parts: string[] = [];
+    if (s.gridColumnStart !== "auto" || s.gridColumnEnd !== "auto") parts.push("grid-column: " + line(s.gridColumnStart, s.gridColumnEnd));
+    if (s.gridRowStart !== "auto" || s.gridRowEnd !== "auto") parts.push("grid-row: " + line(s.gridRowStart, s.gridRowEnd));
+    return parts.join("; ");
+  }
+
+  const all = doc.body.getElementsByTagName("*");
+  const grids: HTMLElement[] = [];
+  for (let i = 0; i < all.length && i < 8000; i++) {
+    const d = win.getComputedStyle(all[i]!).display;
+    if (d === "grid" || d === "inline-grid") grids.push(all[i] as HTMLElement);
+  }
+  for (let g = 0; g < grids.length; g++) {
+    const grid = grids[g]!;
+    const cs = win.getComputedStyle(grid);
+    const cols = sizes(cs.gridTemplateColumns), rows = sizes(cs.gridTemplateRows);
+    if (!cols || !rows || !grid.getClientRects().length) continue;
+    const area = explicitArea(grid, cs);
+    const box = grid.getBoundingClientRect();
+    const colSplit = split(cols, px(cs.columnGap), box.left + px(cs.borderLeftWidth) + px(cs.paddingLeft) - grid.scrollLeft, area.left, area.width);
+    const rowSplit = split(rows, px(cs.rowGap), box.top + px(cs.borderTopWidth) + px(cs.paddingTop) - grid.scrollTop, area.top, area.height);
+    const flowColumn = cs.gridAutoFlow.indexOf("column") >= 0;
+    const areas = !!cs.gridTemplateAreas && cs.gridTemplateAreas !== "none";
+    const axes: Array<{ name: string; prop: string; s: { before: number; explicit: number; after: number }; lo: number; hi: number; x: boolean }> = [
+      { name: "column", prop: "grid-template-columns", s: colSplit, lo: area.left, hi: area.right, x: true },
+      { name: "row", prop: "grid-template-rows", s: rowSplit, lo: area.top, hi: area.bottom, x: false },
+    ];
+    for (let a = 0; a < axes.length; a++) {
+      const axis = axes[a]!;
+      const implicit = axis.s.before + axis.s.after;
+      // Implicit tracks along the flow direction are how a grid with no row template grows;
+      // they are a mistake only when the template claims to lay out the whole grid (areas).
+      const alongFlow = axis.x === flowColumn;
+      if (axis.s.explicit === 0 || implicit === 0 || (alongFlow && !areas)) continue;
+      const list = items(grid);
+      const pushed: Element[] = [], fixed: Element[] = [];
+      for (let i = 0; i < list.length; i++) {
+        const r = list[i]!.getBoundingClientRect();
+        const mid = axis.x ? r.left + r.width / 2 : r.top + r.height / 2;
+        if (mid < axis.lo - 1 || mid > axis.hi + 1) pushed.push(list[i]!);
+        else if (placement(list[i]!)) fixed.push(list[i]!);
+      }
+      const named = pushed.slice(0, 3).map((el) => label(el) + (placement(el) ? " (" + placement(el) + ")" : "")).join(", ");
+      const plural = (n: number): string => n + " " + axis.name + (n === 1 ? "" : "s");
+      let message = axis.prop + " defines " + plural(axis.s.explicit) + ", but " + plural(implicit) + " were added implicitly";
+      if (pushed.length) message += " for " + named + (pushed.length > 3 ? " and " + (pushed.length - 3) + " more" : "");
+      message += ".";
+      if (fixed.length) message += " Placed first: " + fixed.slice(0, 2).map((el) => label(el) + " (" + placement(el) + ")").join(", ") + ".";
+      const advice = " Give the pushed items an explicit grid-" + axis.name + " or fix the template.";
+      if (message.length + advice.length <= 300) message += advice;
+      add("implicit-grid", message.length > 300 ? message.slice(0, 299) + "…" : message, grid);
+    }
+  }
+}