figdiff 0.1.0-alpha.0 → 0.1.0-alpha.1

package/dist/cli.js

@@ -1,7 +1,21 @@
 #!/usr/bin/env node
+import { mkdirSync, writeFileSync } from "node:fs";
+import { dirname } from "node:path";
 import { run } from "./run.js";
 const result = run(process.argv.slice(2));
+let code = result.code;
+let stderr = result.stderr;
+for (const file of result.writes) {
+    try {
+        mkdirSync(dirname(file.path), { recursive: true });
+        writeFileSync(file.path, file.content);
+    }
+    catch (err) {
+        stderr = `figdiff: cannot write ${file.path}: ${err instanceof Error ? err.message : String(err)}\n`;
+        code = 2;
+    }
+}
 process.stdout.write(result.stdout);
-process.stderr.write(result.stderr);
-process.exitCode = result.code;
+process.stderr.write(stderr);
+process.exitCode = code;
 //# sourceMappingURL=cli.js.map

package/dist/cli.js.map

@@ -1 +1 @@
-{"version":3,"file":"cli.js","sourceRoot":"","sources":["../src/cli.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAE/B,MAAM,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;AAC1C,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;AACpC,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;AACpC,OAAO,CAAC,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAC"}
+{"version":3,"file":"cli.js","sourceRoot":"","sources":["../src/cli.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AACnD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAE/B,MAAM,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;AAC1C,IAAI,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC;AACvB,IAAI,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC;AAE3B,KAAK,MAAM,IAAI,IAAI,MAAM,CAAC,MAAM,EAAE,CAAC;IACjC,IAAI,CAAC;QACH,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;QACnD,aAAa,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;IACzC,CAAC;IAAC,OAAO,GAAG,EAAE,CAAC;QACb,MAAM,GAAG,yBAAyB,IAAI,CAAC,IAAI,KAAK,GAAG,YAAY,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC;QACrG,IAAI,GAAG,CAAC,CAAC;IACX,CAAC;AACH,CAAC;AAED,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;AACpC,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;AAC7B,OAAO,CAAC,QAAQ,GAAG,IAAI,CAAC"}

package/dist/git.d.ts

@@ -0,0 +1,12 @@
+/** A copy of an old file version on disk, to be removed with `cleanup()`. */
+export interface GitCopy {
+    path: string;
+    cleanup(): void;
+}
+/** Runs git and returns what it printed to stdout; must throw on failure. */
+export type GitRun = (args: string[], cwd: string) => Uint8Array;
+/**
+ * Save the version of `file` found at git revision `ref` (a branch, tag or commit) to a
+ * temporary file, so it can be compared with the working copy.
+ */
+export declare function extractFromGit(ref: string, file: string, git?: GitRun): GitCopy;

package/dist/git.js

@@ -0,0 +1,32 @@
+import { execFileSync } from "node:child_process";
+import { mkdtempSync, rmSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { basename, dirname, join, resolve } from "node:path";
+const defaultGit = (args, cwd) => execFileSync("git", args, { cwd, maxBuffer: 512 * 1024 * 1024, stdio: ["ignore", "pipe", "pipe"] });
+/**
+ * Save the version of `file` found at git revision `ref` (a branch, tag or commit) to a
+ * temporary file, so it can be compared with the working copy.
+ */
+export function extractFromGit(ref, file, git = defaultGit) {
+    if (ref.startsWith("-"))
+        throw new Error(`Invalid git revision "${ref}"`);
+    const absolute = resolve(file);
+    const name = basename(absolute);
+    let content;
+    try {
+        // "<ref>:./<name>" is resolved relative to the directory git runs in.
+        content = git(["show", `${ref}:./${name}`], dirname(absolute));
+    }
+    catch (err) {
+        const e = err;
+        if (e.code === "ENOENT")
+            throw new Error("git was not found. Install git to use --against.");
+        const detail = String(e.stderr ?? "").trim().split("\n")[0];
+        throw new Error(`Cannot read ${name} at "${ref}"${detail ? `: ${detail}` : ""}`);
+    }
+    const dir = mkdtempSync(join(tmpdir(), "figdiff-git-"));
+    const path = join(dir, name);
+    writeFileSync(path, content);
+    return { path, cleanup: () => rmSync(dir, { recursive: true, force: true }) };
+}
+//# sourceMappingURL=git.js.map

package/dist/git.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"git.js","sourceRoot":"","sources":["../src/git.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAC7D,OAAO,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AACjC,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAW7D,MAAM,UAAU,GAAW,CAAC,IAAI,EAAE,GAAG,EAAE,EAAE,CACvC,YAAY,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,GAAG,IAAI,GAAG,IAAI,EAAE,KAAK,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,CAAC,CAAC;AAEtG;;;GAGG;AACH,MAAM,UAAU,cAAc,CAAC,GAAW,EAAE,IAAY,EAAE,MAAc,UAAU;IAChF,IAAI,GAAG,CAAC,UAAU,CAAC,GAAG,CAAC;QAAE,MAAM,IAAI,KAAK,CAAC,yBAAyB,GAAG,GAAG,CAAC,CAAC;IAC1E,MAAM,QAAQ,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/B,MAAM,IAAI,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAEhC,IAAI,OAAmB,CAAC;IACxB,IAAI,CAAC;QACH,sEAAsE;QACtE,OAAO,GAAG,GAAG,CAAC,CAAC,MAAM,EAAE,GAAG,GAAG,MAAM,IAAI,EAAE,CAAC,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC;IACjE,CAAC;IAAC,OAAO,GAAG,EAAE,CAAC;QACb,MAAM,CAAC,GAAG,GAAsD,CAAC;QACjE,IAAI,CAAC,CAAC,IAAI,KAAK,QAAQ;YAAE,MAAM,IAAI,KAAK,CAAC,kDAAkD,CAAC,CAAC;QAC7F,MAAM,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC,MAAM,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;QAC5D,MAAM,IAAI,KAAK,CAAC,eAAe,IAAI,QAAQ,GAAG,IAAI,MAAM,CAAC,CAAC,CAAC,KAAK,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IACnF,CAAC;IAED,MAAM,GAAG,GAAG,WAAW,CAAC,IAAI,CAAC,MAAM,EAAE,EAAE,cAAc,CAAC,CAAC,CAAC;IACxD,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;IAC7B,aAAa,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IAC7B,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,GAAG,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC;AAChF,CAAC"}

package/dist/html.d.ts

@@ -0,0 +1,25 @@
+import type { Change } from "./diff/types.js";
+/**
+ * Images for one frame, as `data:image/...` URIs or http(s) URLs.
+ * A frame that exists in only one version (added or removed) has only one side.
+ */
+export interface FrameImages {
+    before?: string;
+    after?: string;
+    /** Image highlighting the pixels that differ. */
+    diff?: string;
+    /** Share of pixels that differ, from 0 to 1. */
+    changedRatio?: number;
+}
+export interface HtmlOptions {
+    title?: string;
+    beforeName?: string;
+    afterName?: string;
+    /** Optional rendered images per frame; see `frameKey`. */
+    images?: Record<string, FrameImages>;
+}
+/** Key used in `HtmlOptions.images` for a top-level frame. */
+export declare const frameKey: (page: string, frame: string) => string;
+export declare function escapeHtml(text: string): string;
+/** A single self-contained HTML page describing the changes. No network access needed to view it. */
+export declare function formatHtml(changes: Change[], options?: HtmlOptions): string;

package/dist/html.js

@@ -0,0 +1,205 @@
+import { summarize } from "./diff/summary.js";
+import { formatSummary, formatValue } from "./report.js";
+/** Key used in `HtmlOptions.images` for a top-level frame. */
+export const frameKey = (page, frame) => `${page}\u0000${frame}`;
+const SEP = " › ";
+const KIND_SYMBOL = { added: "+", removed: "−", moved: ">", modified: "~", reordered: "↕" };
+const KIND_LABEL = { added: "Added", removed: "Removed", moved: "Moved", modified: "Changed", reordered: "Reordered" };
+export function escapeHtml(text) {
+    return text
+        .replace(/&/g, "&")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;")
+        .replace(/'/g, "&#39;");
+}
+/** Only embedded images and web URLs are accepted, never script-capable schemes. */
+function safeImageSrc(src) {
+    return /^(data:image\/(png|jpeg|webp|gif|svg\+xml);|https?:\/\/)/i.test(src) ? src : undefined;
+}
+/** Escape a value for display and add a small color swatch next to every hex color. */
+function valueHtml(value) {
+    let text = formatValue(value);
+    if (text.length > 240)
+        text = text.slice(0, 240) + "…";
+    return escapeHtml(text).replace(/#[0-9A-F]{6}(?:[0-9A-F]{2})?\b/g, (hex) => `<span class="sw" style="background:${hex}"></span><code>${hex}</code>`);
+}
+function rowBody(c) {
+    switch (c.kind) {
+        case "added":
+        case "removed":
+            return `<span class="type">${escapeHtml(c.type)}</span>`;
+        case "moved":
+            return `<span class="note">moved from ${escapeHtml(c.fromTrail.join(SEP) || "(root)")}</span>`;
+        case "reordered":
+            return `<span class="note">layer order changed</span>`;
+        case "modified":
+            return (`<ul class="props">` +
+                c.props
+                    .map((p) => `<li><span class="prop">${escapeHtml(p.prop)}</span>` +
+                    `<span class="from">${valueHtml(p.from)}</span><span class="arrow">→</span>` +
+                    `<span class="to">${valueHtml(p.to)}</span></li>`)
+                    .join("") +
+                `</ul>`);
+    }
+}
+function row(c, label) {
+    return (`<li class="chg ${c.kind}" data-kind="${c.kind}">` +
+        `<span class="badge" title="${KIND_LABEL[c.kind]}">${KIND_SYMBOL[c.kind]}</span>` +
+        `<div class="what"><span class="label">${escapeHtml(label)}</span>${rowBody(c)}</div></li>`);
+}
+function percent(ratio) {
+    const p = ratio * 100;
+    if (p === 0)
+        return "0%";
+    return p < 0.1 ? "<0.1%" : `${p < 10 ? p.toFixed(1) : Math.round(p)}%`;
+}
+function compare(images) {
+    if (!images)
+        return "";
+    const before = images.before && safeImageSrc(images.before);
+    const after = images.after && safeImageSrc(images.after);
+    const diff = images.diff && safeImageSrc(images.diff);
+    if (before && after) {
+        const tabs = `<div class="tabs"><button type="button" data-view="swipe" aria-pressed="true">Swipe</button>` +
+            `<button type="button" data-view="side" aria-pressed="false">Side by side</button>` +
+            (diff ? `<button type="button" data-view="diff" aria-pressed="false">Difference</button>` : "") +
+            (diff && images.changedRatio !== undefined
+                ? `<span class="ratio">${escapeHtml(percent(images.changedRatio))} of pixels differ</span>`
+                : "") +
+            `</div>`;
+        return (`<div class="cmp" data-view="swipe" style="--pos:50%">${tabs}` +
+            `<div class="stack"><img class="b" alt="Before" src="${escapeHtml(before)}">` +
+            `<img class="a" alt="After" src="${escapeHtml(after)}"></div>` +
+            (diff ? `<img class="diffimg" alt="Differences highlighted" src="${escapeHtml(diff)}" hidden>` : "") +
+            `<input type="range" min="0" max="100" value="50" aria-label="Slide between before and after">` +
+            `<div class="cap"><span>Before</span><span>After</span></div></div>`);
+    }
+    const only = after ?? before;
+    if (!only)
+        return "";
+    return (`<figure class="single"><img alt="${after ? "After" : "Before"}" src="${escapeHtml(only)}">` +
+        `<figcaption>${after ? "Added: only in the new version" : "Removed: only in the old version"}</figcaption></figure>`);
+}
+const CSS = `
+:root{--bg:#fff;--fg:#1c1c1e;--muted:#6b6b70;--line:#e3e3e8;--card:#f7f7f9;--add:#1a7f37;--rem:#c62828;--mod:#8a5a00;--mov:#5b3fc0;--reo:#00796b}
+@media (prefers-color-scheme:dark){:root{--bg:#161618;--fg:#ececf0;--muted:#9a9aa3;--line:#2e2e33;--card:#1f1f23;--add:#56d364;--rem:#ff7b72;--mod:#e3b341;--mov:#a99bff;--reo:#4fd1c5}}
+*{box-sizing:border-box}
+body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif}
+main{max-width:920px;margin:0 auto;padding:32px 16px 64px}
+h1{font-size:22px;margin:0 0 4px}
+.files{color:var(--muted);margin:0 0 16px;overflow-wrap:anywhere}
+.files code{color:var(--fg)}
+.summary{font-size:16px;margin:0 0 16px}
+.filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px}
+.filters button{font:inherit;font-size:13px;border:1px solid var(--line);background:var(--card);color:var(--fg);border-radius:999px;padding:4px 12px;cursor:pointer}
+.filters button[aria-pressed=false]{opacity:.45;text-decoration:line-through}
+h2{font-size:17px;margin:32px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--line)}
+details{border:1px solid var(--line);border-radius:10px;margin:12px 0;background:var(--card)}
+summary{cursor:pointer;padding:10px 14px;font-weight:600;display:flex;justify-content:space-between;gap:12px}
+summary .count{color:var(--muted);font-weight:400;white-space:nowrap}
+.body{padding:0 14px 12px}
+ul.list{list-style:none;margin:0;padding:0}
+.chg{display:flex;gap:10px;padding:8px 0;border-top:1px solid var(--line)}
+.chg[hidden]{display:none}
+.badge{flex:none;width:22px;height:22px;border-radius:6px;display:grid;place-items:center;font:600 13px/1 ui-monospace,monospace;color:var(--bg)}
+.added .badge{background:var(--add)}.removed .badge{background:var(--rem)}.modified .badge{background:var(--mod)}.moved .badge{background:var(--mov)}.reordered .badge{background:var(--reo)}
+.what{min-width:0}
+.label{font-weight:600;overflow-wrap:anywhere}
+.type,.note{color:var(--muted);margin-left:8px;font-size:13px}
+ul.props{list-style:none;margin:4px 0 0;padding:0}
+ul.props li{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px;padding:1px 0}
+.prop{color:var(--muted);min-width:84px}
+.arrow{color:var(--muted)}
+code{font:12.5px ui-monospace,SFMono-Regular,Menlo,monospace}
+.sw{display:inline-block;width:12px;height:12px;border-radius:3px;border:1px solid var(--line);vertical-align:-1px;margin-right:4px}
+.cmp{margin:4px 0 12px}
+.stack{position:relative;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--bg)}
+.stack img{display:block;width:100%;height:auto}
+.stack img.a{position:absolute;inset:0;clip-path:inset(0 0 0 var(--pos))}
+.cmp input{width:100%;margin:6px 0 0}
+.cap{display:flex;justify-content:space-between;color:var(--muted);font-size:12px}
+.tabs{display:flex;align-items:center;gap:6px;margin:0 0 6px}
+.tabs button{font:inherit;font-size:12px;border:1px solid var(--line);background:var(--bg);color:var(--fg);border-radius:6px;padding:2px 10px;cursor:pointer}
+.tabs button[aria-pressed=true]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
+.tabs .ratio{margin-left:auto;color:var(--muted);font-size:12px}
+.diffimg{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:8px}
+.diffimg[hidden]{display:none}
+.cmp[data-view=diff] input,.cmp[data-view=diff] .cap,.cmp[data-view=diff] .stack,.cmp[data-view=side] input{display:none}
+.cmp[data-view=side] .stack{display:grid;grid-template-columns:1fr 1fr;gap:8px;border:0;border-radius:0;overflow:visible;background:none}
+.cmp[data-view=side] .stack img{border:1px solid var(--line);border-radius:8px;background:var(--bg)}
+.cmp[data-view=side] .stack img.a{position:static;clip-path:none}
+figure.single{margin:4px 0 12px}
+figure.single img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:8px;background:var(--bg)}
+figure.single figcaption{color:var(--muted);font-size:12px;margin-top:4px}
+footer{margin-top:40px;color:var(--muted);font-size:12px}
+`;
+const SCRIPT = `
+document.querySelectorAll('.filters button').forEach(function(btn){
+  btn.addEventListener('click',function(){
+    var on=btn.getAttribute('aria-pressed')!=='true';
+    btn.setAttribute('aria-pressed',String(on));
+    var kind=btn.getAttribute('data-kind');
+    document.querySelectorAll('.chg[data-kind="'+kind+'"]').forEach(function(el){el.hidden=!on;});
+  });
+});
+document.querySelectorAll('.cmp').forEach(function(c){
+  var r=c.querySelector('input');
+  r.addEventListener('input',function(){c.style.setProperty('--pos',r.value+'%');});
+
+  c.querySelectorAll('.tabs button').forEach(function(t){
+    t.addEventListener('click',function(){
+      var view=t.getAttribute('data-view');
+      c.setAttribute('data-view',view);
+      var d=c.querySelector('.diffimg');
+      if(d)d.hidden=view!=='diff';
+      c.querySelectorAll('.tabs button').forEach(function(o){o.setAttribute('aria-pressed',String(o===t));});
+    });
+  });
+});
+`;
+/** A single self-contained HTML page describing the changes. No network access needed to view it. */
+export function formatHtml(changes, options = {}) {
+    const title = options.title ?? "figdiff report";
+    const summary = summarize(changes);
+    const pages = new Map();
+    for (const c of changes) {
+        const page = c.trail[0] ?? "(document)";
+        const frame = c.trail[1] ?? "";
+        const frames = pages.get(page) ?? new Map();
+        frames.set(frame, [...(frames.get(frame) ?? []), c]);
+        pages.set(page, frames);
+    }
+    const kinds = ["added", "removed", "modified", "moved", "reordered"].filter((k) => changes.some((c) => c.kind === k));
+    const filters = kinds
+        .map((k) => `<button type="button" data-kind="${k}" aria-pressed="true">${KIND_SYMBOL[k]} ${KIND_LABEL[k]}</button>`)
+        .join("");
+    let sections = "";
+    for (const [page, frames] of pages) {
+        sections += `<h2>Page “${escapeHtml(page)}”</h2>`;
+        for (const [frame, group] of frames) {
+            const heading = frame === "" ? "Page itself" : `Frame “${escapeHtml(frame)}”`;
+            const images = frame === "" ? undefined : options.images?.[frameKey(page, frame)];
+            const nodeCount = new Set(group.map((c) => c.id)).size;
+            const items = group
+                .map((c) => row(c, c.trail.length > 2 ? c.trail.slice(2).join(SEP) : frame === "" ? "(page)" : "(frame itself)"))
+                .join("");
+            sections +=
+                `<details open><summary><span>${heading}</span><span class="count">${nodeCount} ${nodeCount === 1 ? "node" : "nodes"}</span></summary>` +
+                    `<div class="body">${compare(images)}<ul class="list">${items}</ul></div></details>`;
+        }
+    }
+    const files = options.beforeName || options.afterName
+        ? `<p class="files"><code>${escapeHtml(options.beforeName ?? "before")}</code> → <code>${escapeHtml(options.afterName ?? "after")}</code></p>`
+        : "";
+    const body = changes.length === 0
+        ? `<p class="summary">No changes.</p>`
+        : `<p class="summary">${escapeHtml(formatSummary(summary))}</p><div class="filters">${filters}</div>${sections}`;
+    return (`<!doctype html><html lang="en"><head><meta charset="utf-8">` +
+        `<meta name="viewport" content="width=device-width,initial-scale=1">` +
+        `<title>${escapeHtml(title)}</title><style>${CSS}</style></head><body><main>` +
+        `<h1>${escapeHtml(title)}</h1>${files}${body}` +
+        `<footer>Generated by figdiff. Changes are matched by node id.</footer>` +
+        `</main><script>${SCRIPT}</script></body></html>\n`);
+}
+//# sourceMappingURL=html.js.map

package/dist/html.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"html.js","sourceRoot":"","sources":["../src/html.ts"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -4,3 +4,15 @@ export { parseFigcraft, readDocumentJson, documentToTree } from "./parser/index.
 export { formatText, formatSummary, formatValue } from "./report.js";
 export { run } from "./run.js";
 export type { Change, DesignNode, PropChange, Summary } from "./diff/types.js";
+export { formatHtml, frameKey, escapeHtml } from "./html.js";
+export type { FrameImages, HtmlOptions } from "./html.js";
+export { decodePng, encodePng } from "./render/png.js";
+export type { Image } from "./render/png.js";
+export { compareImages } from "./render/compare.js";
+export type { Comparison } from "./render/compare.js";
+export { createCliRenderer, findFigcraftCli, RendererUnavailableError } from "./render/figcraft-cli.js";
+export type { Renderer, Exec } from "./render/figcraft-cli.js";
+export { renderChangedFrames } from "./render/frames.js";
+export type { RenderOptions, RenderedFrames } from "./render/frames.js";
+export { extractFromGit } from "./git.js";
+export type { GitCopy, GitRun } from "./git.js";

package/dist/index.js

@@ -3,4 +3,10 @@ export { summarize } from "./diff/summary.js";
 export { parseFigcraft, readDocumentJson, documentToTree } from "./parser/index.js";
 export { formatText, formatSummary, formatValue } from "./report.js";
 export { run } from "./run.js";
+export { formatHtml, frameKey, escapeHtml } from "./html.js";
+export { decodePng, encodePng } from "./render/png.js";
+export { compareImages } from "./render/compare.js";
+export { createCliRenderer, findFigcraftCli, RendererUnavailableError } from "./render/figcraft-cli.js";
+export { renderChangedFrames } from "./render/frames.js";
+export { extractFromGit } from "./git.js";
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACpF,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AACrE,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACpF,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AACrE,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAE/B,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAE7D,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAEvD,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEpD,OAAO,EAAE,iBAAiB,EAAE,eAAe,EAAE,wBAAwB,EAAE,MAAM,0BAA0B,CAAC;AAExG,OAAO,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAEzD,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC"}

package/dist/render/compare.d.ts

@@ -0,0 +1,19 @@
+import type { Image } from "./png.js";
+export interface Comparison {
+    width: number;
+    height: number;
+    changedPixels: number;
+    totalPixels: number;
+    /** changedPixels / totalPixels, from 0 to 1. */
+    ratio: number;
+    /** Faded copy of the new image with changed pixels in solid red. */
+    diff: Image;
+}
+/**
+ * Compare two images pixel by pixel. If sizes differ, the comparison canvas is the larger of
+ * the two, and any area covered by only one image counts as changed.
+ *
+ * `tolerance` is the largest per-channel difference (0 to 255) still treated as unchanged,
+ * which absorbs anti-aliasing noise.
+ */
+export declare function compareImages(before: Image, after: Image, tolerance?: number): Comparison;

package/dist/render/compare.js

@@ -0,0 +1,61 @@
+const HIGHLIGHT = [255, 45, 85, 255];
+/**
+ * Compare two images pixel by pixel. If sizes differ, the comparison canvas is the larger of
+ * the two, and any area covered by only one image counts as changed.
+ *
+ * `tolerance` is the largest per-channel difference (0 to 255) still treated as unchanged,
+ * which absorbs anti-aliasing noise.
+ */
+export function compareImages(before, after, tolerance = 8) {
+    const width = Math.max(before.width, after.width);
+    const height = Math.max(before.height, after.height);
+    const out = new Uint8Array(width * height * 4);
+    let changed = 0;
+    const read = (img, x, y) => x < img.width && y < img.height ? (y * img.width + x) * 4 : undefined;
+    for (let y = 0; y < height; y++) {
+        for (let x = 0; x < width; x++) {
+            const a = read(before, x, y);
+            const b = read(after, x, y);
+            const o = (y * width + x) * 4;
+            let isChanged;
+            if (a === undefined || b === undefined) {
+                isChanged = a !== b;
+            }
+            else {
+                isChanged = false;
+                for (let c = 0; c < 4; c++) {
+                    if (Math.abs(before.data[a + c] - after.data[b + c]) > tolerance) {
+                        isChanged = true;
+                        break;
+                    }
+                }
+            }
+            if (isChanged) {
+                changed++;
+                out.set(HIGHLIGHT, o);
+            }
+            else if (b !== undefined) {
+                // Unchanged: show the pixel faded to 25% over white so the changes stand out.
+                const alpha = after.data[b + 3] / 255;
+                for (let c = 0; c < 3; c++) {
+                    const over = after.data[b + c] * alpha + 255 * (1 - alpha);
+                    out[o + c] = Math.round(255 - (255 - over) * 0.25);
+                }
+                out[o + 3] = 255;
+            }
+            else {
+                out.set([255, 255, 255, 255], o);
+            }
+        }
+    }
+    const totalPixels = width * height;
+    return {
+        width,
+        height,
+        changedPixels: changed,
+        totalPixels,
+        ratio: totalPixels === 0 ? 0 : changed / totalPixels,
+        diff: { width, height, data: out },
+    };
+}
+//# sourceMappingURL=compare.js.map

package/dist/render/compare.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"compare.js","sourceRoot":"","sources":["../../src/render/compare.ts"],"names":[],"mappings":"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"}

package/dist/render/figcraft-cli.d.ts

@@ -0,0 +1,21 @@
+/** Runs a program; must throw if it cannot be started or exits with an error. */
+export type Exec = (command: string, args: string[]) => void;
+export declare const defaultExec: Exec;
+/** Renders one top-level frame of a design file to a PNG. */
+export interface Renderer {
+    /** Returns the PNG bytes, or undefined when the frame does not exist in that file. */
+    renderFrame(file: string, page: string, frame: string, scale: number): Uint8Array | undefined;
+}
+/** Thrown when figcraft-cli itself cannot be run, as opposed to a frame that is missing. */
+export declare class RendererUnavailableError extends Error {
+}
+/**
+ * Locate figcraft-cli. An explicit path wins; otherwise the FIGCRAFT_CLI environment
+ * variable, then `figcraft-cli` on the PATH. Returns undefined when it cannot be started.
+ */
+export declare function findFigcraftCli(explicit?: string, exec?: Exec, env?: Record<string, string | undefined>): string | undefined;
+/**
+ * Renderer backed by `figcraft-cli export`. The frame is selected by name; when the page
+ * is also passed and the CLI rejects that combination, it retries with the name alone.
+ */
+export declare function createCliRenderer(bin: string, exec?: Exec): Renderer;

package/dist/render/figcraft-cli.js

@@ -0,0 +1,63 @@
+import { execFileSync } from "node:child_process";
+import { mkdtempSync, readFileSync, rmSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+export const defaultExec = (command, args) => {
+    execFileSync(command, args, { stdio: "ignore", timeout: 120_000 });
+};
+/** Thrown when figcraft-cli itself cannot be run, as opposed to a frame that is missing. */
+export class RendererUnavailableError extends Error {
+}
+const isNotFound = (err) => err?.code === "ENOENT";
+/**
+ * Locate figcraft-cli. An explicit path wins; otherwise the FIGCRAFT_CLI environment
+ * variable, then `figcraft-cli` on the PATH. Returns undefined when it cannot be started.
+ */
+export function findFigcraftCli(explicit, exec = defaultExec, env = process.env) {
+    const candidates = explicit ? [explicit] : [env.FIGCRAFT_CLI, "figcraft-cli"];
+    for (const candidate of candidates) {
+        if (!candidate)
+            continue;
+        try {
+            exec(candidate, ["--help"]);
+            return candidate;
+        }
+        catch (err) {
+            // Exists but did not like --help: still usable. Only "not found" rules it out.
+            if (!isNotFound(err))
+                return candidate;
+        }
+    }
+    return undefined;
+}
+/**
+ * Renderer backed by `figcraft-cli export`. The frame is selected by name; when the page
+ * is also passed and the CLI rejects that combination, it retries with the name alone.
+ */
+export function createCliRenderer(bin, exec = defaultExec) {
+    return {
+        renderFrame(file, page, frame, scale) {
+            const dir = mkdtempSync(join(tmpdir(), "figdiff-render-"));
+            const out = join(dir, "frame.png");
+            try {
+                const base = ["export", file, "-o", out, "--format", "png", "--scale", String(scale)];
+                for (const selector of [["--page", page, "--node", frame], ["--node", frame]]) {
+                    try {
+                        exec(bin, [...base, ...selector]);
+                        return new Uint8Array(readFileSync(out));
+                    }
+                    catch (err) {
+                        if (isNotFound(err))
+                            throw new RendererUnavailableError(`Cannot run ${bin}`);
+                        // Otherwise: this selector did not work, or the frame is not in this file.
+                    }
+                }
+                return undefined;
+            }
+            finally {
+                rmSync(dir, { recursive: true, force: true });
+            }
+        },
+    };
+}
+//# sourceMappingURL=figcraft-cli.js.map

package/dist/render/figcraft-cli.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"figcraft-cli.js","sourceRoot":"","sources":["../../src/render/figcraft-cli.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AACjC,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAKjC,MAAM,CAAC,MAAM,WAAW,GAAS,CAAC,OAAO,EAAE,IAAI,EAAE,EAAE;IACjD,YAAY,CAAC,OAAO,EAAE,IAAI,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,CAAC;AACrE,CAAC,CAAC;AAQF,4FAA4F;AAC5F,MAAM,OAAO,wBAAyB,SAAQ,KAAK;CAAG;AAEtD,MAAM,UAAU,GAAG,CAAC,GAAY,EAAW,EAAE,CAAE,GAAgC,EAAE,IAAI,KAAK,QAAQ,CAAC;AAEnG;;;GAGG;AACH,MAAM,UAAU,eAAe,CAC7B,QAAiB,EACjB,OAAa,WAAW,EACxB,MAA0C,OAAO,CAAC,GAAG;IAErD,MAAM,UAAU,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,YAAY,EAAE,cAAc,CAAC,CAAC;IAC9E,KAAK,MAAM,SAAS,IAAI,UAAU,EAAE,CAAC;QACnC,IAAI,CAAC,SAAS;YAAE,SAAS;QACzB,IAAI,CAAC;YACH,IAAI,CAAC,SAAS,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;YAC5B,OAAO,SAAS,CAAC;QACnB,CAAC;QAAC,OAAO,GAAG,EAAE,CAAC;YACb,+EAA+E;YAC/E,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC;gBAAE,OAAO,SAAS,CAAC;QACzC,CAAC;IACH,CAAC;IACD,OAAO,SAAS,CAAC;AACnB,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,iBAAiB,CAAC,GAAW,EAAE,OAAa,WAAW;IACrE,OAAO;QACL,WAAW,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK;YAClC,MAAM,GAAG,GAAG,WAAW,CAAC,IAAI,CAAC,MAAM,EAAE,EAAE,iBAAiB,CAAC,CAAC,CAAC;YAC3D,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,EAAE,WAAW,CAAC,CAAC;YACnC,IAAI,CAAC;gBACH,MAAM,IAAI,GAAG,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;gBACtF,KAAK,MAAM,QAAQ,IAAI,CAAC,CAAC,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC;oBAC9E,IAAI,CAAC;wBACH,IAAI,CAAC,GAAG,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,QAAQ,CAAC,CAAC,CAAC;wBAClC,OAAO,IAAI,UAAU,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC;oBAC3C,CAAC;oBAAC,OAAO,GAAG,EAAE,CAAC;wBACb,IAAI,UAAU,CAAC,GAAG,CAAC;4BAAE,MAAM,IAAI,wBAAwB,CAAC,cAAc,GAAG,EAAE,CAAC,CAAC;wBAC7E,2EAA2E;oBAC7E,CAAC;gBACH,CAAC;gBACD,OAAO,SAAS,CAAC;YACnB,CAAC;oBAAS,CAAC;gBACT,MAAM,CAAC,GAAG,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;YAChD,CAAC;QACH,CAAC;KACF,CAAC;AACJ,CAAC"}

package/dist/render/frames.d.ts

@@ -0,0 +1,19 @@
+import type { Change } from "../diff/types.js";
+import type { FrameImages } from "../html.js";
+import type { Renderer } from "./figcraft-cli.js";
+export interface RenderOptions {
+    /** Render scale passed to figcraft-cli. Default 1. */
+    scale?: number;
+    /** Most frames to render, to keep reports small and fast. Default 30. */
+    maxFrames?: number;
+}
+export interface RenderedFrames {
+    images: Record<string, FrameImages>;
+    warnings: string[];
+}
+/**
+ * Render every top-level frame that has changes, in both versions, and compare them.
+ * A frame missing from one version (added or removed) gets only the image that exists.
+ * Throws RendererUnavailableError if figcraft-cli cannot be run at all.
+ */
+export declare function renderChangedFrames(changes: Change[], beforePath: string, afterPath: string, renderer: Renderer, options?: RenderOptions): RenderedFrames;

package/dist/render/frames.js

@@ -0,0 +1,53 @@
+import { frameKey } from "../html.js";
+import { compareImages } from "./compare.js";
+import { decodePng, encodePng } from "./png.js";
+const dataUri = (bytes) => `data:image/png;base64,${Buffer.from(bytes).toString("base64")}`;
+/**
+ * Render every top-level frame that has changes, in both versions, and compare them.
+ * A frame missing from one version (added or removed) gets only the image that exists.
+ * Throws RendererUnavailableError if figcraft-cli cannot be run at all.
+ */
+export function renderChangedFrames(changes, beforePath, afterPath, renderer, options = {}) {
+    const scale = options.scale ?? 1;
+    const maxFrames = options.maxFrames ?? 30;
+    const warnings = [];
+    const images = {};
+    const frames = new Map();
+    for (const c of changes) {
+        const [page, frame] = c.trail;
+        if (page !== undefined && frame !== undefined)
+            frames.set(frameKey(page, frame), [page, frame]);
+    }
+    let rendered = 0;
+    for (const [key, [page, frame]] of frames) {
+        if (rendered >= maxFrames) {
+            warnings.push(`Rendered ${maxFrames} of ${frames.size} changed frames; the rest have no images.`);
+            break;
+        }
+        rendered++;
+        const before = renderer.renderFrame(beforePath, page, frame, scale);
+        const after = renderer.renderFrame(afterPath, page, frame, scale);
+        if (!before && !after) {
+            warnings.push(`Could not render frame "${frame}" in either file.`);
+            continue;
+        }
+        const entry = {};
+        if (before)
+            entry.before = dataUri(before);
+        if (after)
+            entry.after = dataUri(after);
+        if (before && after) {
+            try {
+                const comparison = compareImages(decodePng(before), decodePng(after));
+                entry.diff = dataUri(encodePng(comparison.diff));
+                entry.changedRatio = comparison.ratio;
+            }
+            catch (err) {
+                warnings.push(`Could not compare images of frame "${frame}": ${err instanceof Error ? err.message : String(err)}`);
+            }
+        }
+        images[key] = entry;
+    }
+    return { images, warnings };
+}
+//# sourceMappingURL=frames.js.map

package/dist/render/frames.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"frames.js","sourceRoot":"","sources":["../../src/render/frames.ts"],"names":[],"mappings":"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"}