@bridge-ds/mcp 0.0.0-stage → 0.3.0

package/dist/src-XSBCZV4W.js

@@ -0,0 +1,1125 @@
+import {
+  LayeredTokenSet,
+  comboKey,
+  diffLayered,
+  git,
+  listFilesAt,
+  loadConfig,
+  selectTokenFiles,
+  showFile
+} from "./chunk-X455XY4E.js";
+
+// ../visual/src/run.ts
+import { existsSync as existsSync3 } from "node:fs";
+import { mkdir as mkdir3, readFile as readFile3, rm as rm2, unlink, writeFile as writeFile3 } from "node:fs/promises";
+import { tmpdir } from "node:os";
+import { join as join3, relative as relative2, resolve } from "node:path";
+
+// ../core/src/usage.ts
+var VAR_RE = /var\(\s*(--[A-Za-z0-9_-]+)/g;
+var IMPORT_RE = /(?:import|export)\s[^'"]*?from\s*['"]([^'"]+)['"]|import\s*\(\s*['"]([^'"]+)['"]\s*\)/g;
+function cssVarsIn(text) {
+  const out = /* @__PURE__ */ new Set();
+  for (const m of text.matchAll(VAR_RE)) out.add(m[1]);
+  return [...out];
+}
+function importsIn(text) {
+  const out = /* @__PURE__ */ new Set();
+  for (const m of text.matchAll(IMPORT_RE)) out.add(m[1] ?? m[2]);
+  return [...out];
+}
+var norm = (p) => p.replace(/\\/g, "/").replace(/\/+$/, "");
+var isStory = (p) => /\.stories\.[cm]?[jt]sx?$/.test(p);
+var isTest = (p) => /\.(test|spec)\.[cm]?[jt]sx?$/.test(p);
+var isCss = (p) => /\.(css|scss|less)$/.test(p);
+var isScript = (p) => /\.[cm]?[jt]sx?$/.test(p);
+function componentOf(from, spec, componentsDir) {
+  if (!spec.startsWith(".")) return null;
+  const parts = from.split("/").slice(0, -1);
+  for (const seg of spec.split("/")) {
+    if (seg === "." || seg === "") continue;
+    if (seg === "..") parts.pop();
+    else parts.push(seg);
+  }
+  const abs = parts.join("/");
+  if (!abs.startsWith(`${componentsDir}/`)) return null;
+  return abs.slice(componentsDir.length + 1).split("/")[0] || null;
+}
+function componentForPath(path, componentsDir) {
+  const dir = norm(componentsDir);
+  const p = norm(path);
+  if (!p.startsWith(`${dir}/`)) return null;
+  const rest = p.slice(dir.length + 1).split("/");
+  return rest.length >= 2 ? rest[0] : null;
+}
+function buildUsageIndex(files, componentsDir) {
+  const dir = norm(componentsDir);
+  const modules = {};
+  const vars = /* @__PURE__ */ new Map();
+  const imports = /* @__PURE__ */ new Map();
+  const storyImports = /* @__PURE__ */ new Map();
+  const globalVars = {};
+  const get = (m, k) => m.get(k) ?? m.set(k, /* @__PURE__ */ new Set()).get(k);
+  for (const f of files) {
+    const path = norm(f.path);
+    const id = componentForPath(path, dir);
+    if (!id) {
+      if (isCss(path)) {
+        const v = cssVarsIn(f.text);
+        if (v.length) globalVars[path] = v.sort();
+      }
+      continue;
+    }
+    const mod = modules[id] ??= { id, dir: `${dir}/${id}`, files: [], vars: [], imports: [], storyImports: [] };
+    mod.files.push(path);
+    if (isTest(path)) continue;
+    for (const v of cssVarsIn(f.text)) get(vars, id).add(v);
+    if (!isScript(path)) continue;
+    for (const spec of importsIn(f.text)) {
+      const dep = componentOf(path, spec, dir);
+      if (!dep || dep === id) continue;
+      get(isStory(path) ? storyImports : imports, id).add(dep);
+    }
+  }
+  const byVar = {};
+  for (const mod of Object.values(modules)) {
+    mod.files.sort();
+    mod.vars = [...vars.get(mod.id) ?? []].sort();
+    mod.imports = [...imports.get(mod.id) ?? []].sort();
+    mod.storyImports = [...storyImports.get(mod.id) ?? []].filter((d) => !mod.imports.includes(d)).sort();
+    for (const v of mod.vars) (byVar[v] ??= []).push(mod.id);
+  }
+  for (const k of Object.keys(byVar)) byVar[k].sort();
+  return { componentsDir: dir, modules, byVar, globalVars };
+}
+function impactedModules(index, input) {
+  const reasons = /* @__PURE__ */ new Map();
+  const add = (id, reason, indirect) => {
+    const r = reasons.get(id);
+    if (r) {
+      if (!r.reasons.includes(reason)) r.reasons.push(reason);
+      r.indirect &&= indirect;
+    } else reasons.set(id, { reasons: [reason], indirect });
+  };
+  const changedVars = new Set(input.vars ?? []);
+  for (const v of changedVars) for (const id of index.byVar[v] ?? []) add(id, `uses ${v}`, false);
+  for (const f of input.files ?? []) {
+    const id = componentForPath(f, index.componentsDir);
+    if (id && index.modules[id]) add(id, `file changed: ${norm(f)}`, false);
+  }
+  const renderedBy = /* @__PURE__ */ new Map();
+  for (const m of Object.values(index.modules)) for (const d of m.imports) (renderedBy.get(d) ?? renderedBy.set(d, []).get(d)).push(m.id);
+  const queue = [...reasons.keys()];
+  while (queue.length) {
+    const id = queue.shift();
+    for (const parent of renderedBy.get(id) ?? []) {
+      const known = reasons.has(parent);
+      add(parent, `renders ${id}`, true);
+      if (!known) queue.push(parent);
+    }
+  }
+  const globalHits = Object.entries(index.globalVars).map(([file, vs]) => ({ file, vars: vs.filter((v) => changedVars.has(v)) })).filter((g) => g.vars.length > 0);
+  const modules = [...reasons.entries()].map(([id, r]) => ({ id, reasons: r.reasons, indirect: r.indirect })).sort((a, b) => Number(a.indirect) - Number(b.indirect) || a.id.localeCompare(b.id));
+  return { modules, globalHits };
+}
+
+// ../visual/src/capture.ts
+import { mkdir, writeFile } from "node:fs/promises";
+import { dirname } from "node:path";
+import { chromium } from "playwright-core";
+var FROZEN_TIME = "2026-01-15T10:00:00.000Z";
+var FREEZE_CSS = `*,*::before,*::after{animation-duration:0s!important;animation-delay:0s!important;animation-iteration-count:1!important;transition:none!important;caret-color:transparent!important;scroll-behavior:auto!important}
+::-webkit-scrollbar{display:none}
+[data-visual-mask]{visibility:hidden!important}`;
+var INIT_SCRIPT = `(() => {
+  let a = 0x2f6b1d;
+  Math.random = function () { a |= 0; a = (a + 0x6d2b79f5) | 0; let t = Math.imul(a ^ (a >>> 15), 1 | a); t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t; return ((t ^ (t >>> 14)) >>> 0) / 4294967296; };
+  const add = () => { const s = document.createElement('style'); s.setAttribute('data-bridge-visual', ''); s.textContent = ${JSON.stringify(FREEZE_CSS)}; (document.head || document.documentElement).appendChild(s); };
+  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', add); else add();
+})();`;
+var PIXEL = Buffer.from("iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mN8+P9/PQAJNAPNdHq0qgAAAABJRU5ErkJggg==", "base64");
+async function launch(o = {}) {
+  const executablePath = o.executablePath ?? process.env.BRIDGE_CHROME_PATH;
+  return chromium.launch({
+    headless: true,
+    ...executablePath ? { executablePath } : { channel: o.channel ?? process.env.BRIDGE_CHROME_CHANNEL ?? "chrome" },
+    args: ["--lang=en-US", "--disable-gpu", "--font-render-hinting=none", "--disable-lcd-text", "--force-color-profile=srgb", "--hide-scrollbars", "--disable-skia-runtime-opts", "--disable-renderer-backgrounding"]
+  });
+}
+async function newContext(browser, viewport) {
+  const ctx = await browser.newContext({ viewport, deviceScaleFactor: 1, reducedMotion: "reduce", colorScheme: "light", locale: "en-US", timezoneId: "UTC", serviceWorkers: "block" });
+  await ctx.addInitScript(INIT_SCRIPT);
+  await ctx.route(
+    /^https?:\/\/(?!127\.0\.0\.1[:/]|localhost[:/])/,
+    (route) => route.request().resourceType() === "image" ? route.fulfill({ status: 200, contentType: "image/png", body: PIXEL }) : route.abort()
+  );
+  return ctx;
+}
+async function newPage(ctx) {
+  const page = await ctx.newPage();
+  await page.clock.setFixedTime(new Date(FROZEN_TIME));
+  return page;
+}
+async function settle(page, o = {}) {
+  const timeout = o.timeout ?? 1e4;
+  if (o.network !== false) await page.waitForLoadState("networkidle", { timeout }).catch(() => void 0);
+  const work = page.evaluate(async ({ limit, quiet, interval, waitBusy }) => {
+    const frames = () => new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(() => r(null))));
+    await document.fonts.ready;
+    const sig = () => `${document.body.innerHTML.length}:${document.querySelectorAll("*").length}`;
+    let last = "";
+    let same = 0;
+    const t0 = performance.now();
+    while (performance.now() - t0 < limit) {
+      await frames();
+      await new Promise((r) => setTimeout(r, interval));
+      const s = sig();
+      const busy = waitBusy && document.querySelectorAll('[aria-busy="true"]').length > 0;
+      if (s === last && !busy) same++;
+      else same = 0;
+      last = s;
+      if (same >= quiet) break;
+    }
+    const pending = Array.from(document.images).filter((i) => !i.complete && i.loading !== "lazy");
+    await Promise.race([Promise.all(pending.map((i) => new Promise((r) => (i.onload = r, i.onerror = r)))), new Promise((r) => setTimeout(r, 3e3))]);
+    await document.fonts.ready;
+    await frames();
+  }, { limit: timeout, quiet: o.quiet ?? 3, interval: o.interval ?? 120, waitBusy: o.busy ?? true });
+  let timer;
+  await Promise.race([work, new Promise((r) => timer = setTimeout(r, timeout + 5e3))]).finally(() => clearTimeout(timer));
+}
+async function shoot(page, r) {
+  const debug = process.env.BRIDGE_VISUAL_DEBUG ? (step) => process.stderr.write(`    ${step} ${Date.now() - t0}ms
+`) : () => void 0;
+  const t0 = Date.now();
+  try {
+    if (r.navigate) await r.navigate(page);
+    else await page.goto(r.url, { waitUntil: "load", timeout: 3e4 });
+    if (r.ready) await page.waitForSelector(r.ready, { state: "attached", timeout: 15e3 });
+    if (r.readyFn) await page.waitForFunction(r.readyFn, void 0, { timeout: 2e4 });
+    if (r.waitFor) await page.waitForSelector(r.waitFor, { state: "visible", timeout: 15e3 });
+    debug("ready");
+    await settle(page, r.settle);
+    debug("settled");
+    const err = await page.evaluate(() => document.body.classList.contains("sb-show-errordisplay") ? document.querySelector("#error-message")?.textContent ?? "Story failed to render" : null);
+    const buf = await page.screenshot({
+      fullPage: r.fullPage,
+      animations: "disabled",
+      caret: "hide",
+      scale: "css",
+      mask: (r.mask ?? []).map((s) => page.locator(s)),
+      maskColor: "#ff00ff"
+    });
+    debug("shot");
+    await mkdir(dirname(r.file), { recursive: true });
+    await writeFile(r.file, buf);
+    return err;
+  } catch (e) {
+    return e.message.split("\n")[0] ?? "capture failed";
+  }
+}
+async function switchStory(page, storyId2) {
+  const ok = await page.evaluate(
+    (id) => new Promise((resolve2) => {
+      const ch = window.__STORYBOOK_ADDONS_CHANNEL__;
+      if (!ch) return resolve2(false);
+      const events = ["storyRendered", "storyErrored", "storyThrewException", "storyMissing", "playFunctionThrewException"];
+      const timer = setTimeout(() => done(), 15e3);
+      function done() {
+        clearTimeout(timer);
+        for (const e of events) ch.off(e, done);
+        resolve2(true);
+      }
+      for (const e of events) ch.on(e, done);
+      window.scrollTo(0, 0);
+      ch.emit("setCurrentStory", { storyId: id, viewMode: "story" });
+    }),
+    storyId2
+  );
+  if (!ok) throw new Error("Storybook channel not found");
+}
+
+// ../visual/src/composite.ts
+import { readFile, writeFile as writeFile2 } from "node:fs/promises";
+var esc = (s) => s.replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]);
+async function composite(page, c) {
+  const col = Math.min(c.column ?? 520, c.width);
+  const k = col / c.width;
+  const h = Math.round(c.height * k);
+  const img = async (p) => p ? `data:image/png;base64,${(await readFile(p)).toString("base64")}` : null;
+  const [b, a, d] = await Promise.all([img(c.before), img(c.after), img(c.diff)]);
+  const boxes = c.boxes.map((x) => `<i style="left:${x.x * k - 2}px;top:${x.y * k - 2}px;width:${x.width * k + 4}px;height:${x.height * k + 4}px"></i>`).join("");
+  const big = [...c.boxes].sort((p, q) => q.width * q.height - p.width * p.height)[0];
+  let zoomRow = "";
+  if (big && c.boxes.length && big.width * big.height < c.width * c.height * 0.5) {
+    const pad = 24;
+    const z = Math.min(2, col / Math.min(c.width, big.width + pad * 2));
+    const w = Math.min(c.width, col / z);
+    const hh = Math.min(c.height, Math.max(big.height + pad * 2, 100), 360 / z);
+    const clamp = (v, max) => Math.max(0, Math.min(v, max));
+    const x = clamp(big.x + big.width / 2 - w / 2, c.width - w);
+    const y = clamp(big.y + big.height / 2 - hh / 2, c.height - hh);
+    const crop = (label, src) => `<figure><figcaption>${label}</figcaption><div class="frame" style="width:${col}px;height:${Math.round(hh * z)}px">${src ? `<div style="width:${Math.round(w * z)}px;height:${Math.round(hh * z)}px;background:url(${src}) ${-x * z}px ${-y * z}px / ${c.width * z}px ${c.height * z}px no-repeat;image-rendering:pixelated"></div>` : ""}</div></figure>`;
+    zoomRow = `<div class="row zoom">${crop(`Before, zoom ${z.toFixed(1)}x`, b)}${crop("After", a)}${crop("Diff", d)}</div>`;
+  }
+  const panel = (label, src, withBoxes) => `<figure><figcaption>${label}</figcaption><div class="frame" style="width:${col}px;height:${h}px">${src ? `<img src="${src}" width="${col}" height="${h}">` : '<span class="none">Not present</span>'}${withBoxes ? boxes : ""}</div></figure>`;
+  await page.setContent(
+    `<!doctype html><html><head><style>
+      *{box-sizing:border-box;margin:0}
+      body{background:#f4f4f5;font:14px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;color:#18181b;padding:16px;display:inline-block}
+      header{display:flex;justify-content:space-between;align-items:baseline;gap:24px;margin-bottom:12px}
+      h1{font-size:16px;font-weight:600}
+      p{color:#52525b;font-variant-numeric:tabular-nums}
+      .row{display:flex;gap:12px}
+      .zoom{margin-top:12px}
+      figcaption{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#52525b;margin-bottom:6px}
+      .frame{position:relative;background:#fff;outline:1px solid #d4d4d8;overflow:hidden}
+      .frame img{display:block}
+      .frame i{position:absolute;border:2px solid #e5143c;border-radius:3px}
+      .none{position:absolute;inset:0;display:grid;place-items:center;color:#71717a}
+    </style></head><body><div id="c"><header><h1>${esc(c.title)}</h1><p>${esc(c.subtitle)}</p></header><div class="row">${panel("Before", b, false)}${panel("After", a, true)}${panel("Diff", d, true)}</div>${zoomRow}</div></body></html>`,
+    { waitUntil: "load" }
+  );
+  const buf = await page.locator("body").screenshot({ animations: "disabled", scale: "css" });
+  await writeFile2(c.out, buf);
+}
+
+// ../visual/src/diff.ts
+import pixelmatch from "pixelmatch";
+import { PNG } from "pngjs";
+var decodePng = (buf) => PNG.sync.read(buf);
+var encodePng = (png) => PNG.sync.write(png, { colorType: 6 });
+function padTo(src, width, height) {
+  if (src.width === width && src.height === height) return src;
+  const out = new PNG({ width, height });
+  for (let i = 0; i < out.data.length; i += 4) {
+    out.data[i] = 255;
+    out.data[i + 1] = 0;
+    out.data[i + 2] = 255;
+    out.data[i + 3] = 255;
+  }
+  PNG.bitblt(src, out, 0, 0, Math.min(src.width, width), Math.min(src.height, height), 0, 0);
+  return out;
+}
+function diffPngs(before, after, threshold = 0.03, cell2 = 16) {
+  const width = Math.max(before.width, after.width);
+  const height = Math.max(before.height, after.height);
+  const a = padTo(before, width, height);
+  const b = padTo(after, width, height);
+  const out = new PNG({ width, height });
+  const changedPixels = pixelmatch(a.data, b.data, out.data, width, height, { threshold, includeAA: false, alpha: 0.15, diffColor: [229, 20, 60], diffColorAlt: [229, 20, 60] });
+  const totalPixels = width * height;
+  const percent = totalPixels ? Math.round(changedPixels / totalPixels * 1e4) / 100 : 0;
+  const boxes = changedPixels ? boxesFromDiff(out, cell2) : [];
+  return { changedPixels, totalPixels, percent: changedPixels && percent === 0 ? 0.01 : percent, boxes, diff: changedPixels ? out : null, width, height };
+}
+var isDiffPixel = (d, i) => d[i] === 229 && d[i + 1] === 20 && d[i + 2] === 60;
+function boxesFromDiff(diff, cell2 = 16, max = 12) {
+  const cols = Math.ceil(diff.width / cell2);
+  const rows = Math.ceil(diff.height / cell2);
+  const hot = new Uint8Array(cols * rows);
+  for (let y = 0; y < diff.height; y++) {
+    for (let x = 0; x < diff.width; x++) {
+      if (isDiffPixel(diff.data, (y * diff.width + x) * 4)) hot[Math.floor(y / cell2) * cols + Math.floor(x / cell2)] = 1;
+    }
+  }
+  return boxesFromCells(hot, cols, rows, cell2, diff.width, diff.height, max);
+}
+function boxesFromCells(hot, cols, rows, cell2, width, height, max = 12) {
+  const seen = new Uint8Array(cols * rows);
+  let boxes = [];
+  for (let i = 0; i < hot.length; i++) {
+    if (!hot[i] || seen[i]) continue;
+    let x0 = cols, y0 = rows, x1 = -1, y1 = -1;
+    const stack = [i];
+    seen[i] = 1;
+    while (stack.length) {
+      const j = stack.pop();
+      const cx = j % cols;
+      const cy = (j - cx) / cols;
+      x0 = Math.min(x0, cx);
+      y0 = Math.min(y0, cy);
+      x1 = Math.max(x1, cx);
+      y1 = Math.max(y1, cy);
+      for (let dy = -2; dy <= 2; dy++) {
+        for (let dx = -2; dx <= 2; dx++) {
+          const nx = cx + dx;
+          const ny = cy + dy;
+          if (nx < 0 || ny < 0 || nx >= cols || ny >= rows) continue;
+          const k = ny * cols + nx;
+          if (hot[k] && !seen[k]) {
+            seen[k] = 1;
+            stack.push(k);
+          }
+        }
+      }
+    }
+    boxes.push({ x: x0 * cell2, y: y0 * cell2, width: Math.min((x1 + 1) * cell2, width) - x0 * cell2, height: Math.min((y1 + 1) * cell2, height) - y0 * cell2 });
+  }
+  boxes.sort((p, q) => p.y - q.y || p.x - q.x);
+  while (boxes.length > max) {
+    boxes.sort((p, q) => p.width * p.height - q.width * q.height);
+    const s = boxes.shift();
+    let best = 0;
+    let bestArea = Infinity;
+    boxes.forEach((b, k) => {
+      const u = union(s, b);
+      if (u.width * u.height < bestArea) bestArea = u.width * u.height, best = k;
+    });
+    boxes[best] = union(s, boxes[best]);
+    boxes = boxes.sort((p, q) => p.y - q.y || p.x - q.x);
+  }
+  return boxes;
+}
+function union(a, b) {
+  const x = Math.min(a.x, b.x);
+  const y = Math.min(a.y, b.y);
+  return { x, y, width: Math.max(a.x + a.width, b.x + b.width) - x, height: Math.max(a.y + a.height, b.y + b.height) - y };
+}
+
+// ../visual/src/manifest.ts
+var COMMENT_MARKER = "<!-- bridge-visual-impact -->";
+function summarize(shots) {
+  const count = (s) => shots.filter((x) => x.status === s).length;
+  return {
+    shots: shots.length,
+    changed: count("changed"),
+    unchanged: count("unchanged"),
+    added: count("added"),
+    removed: count("removed"),
+    errors: count("error"),
+    maxPercent: shots.reduce((m, s) => Math.max(m, s.percent), 0)
+  };
+}
+function rankShots(shots) {
+  const rank = { changed: 0, added: 1, removed: 2, error: 3, unchanged: 4 };
+  return shots.map((s, i) => ({ s, i })).sort((a, b) => rank[a.s.status] - rank[b.s.status] || b.s.percent - a.s.percent || a.i - b.i).map((x) => x.s);
+}
+var hasVisualChange = (m) => m.summary.changed + m.summary.added + m.summary.removed > 0;
+var mode = (s) => `${s.tenant ? `${s.tenant}, ` : ""}${s.brand}, ${s.theme}`;
+var modeShort = (s) => `${s.tenant ?? s.brand} ${s.theme}`;
+var pct = (s) => s.status === "changed" ? `${s.percent.toFixed(2)}%` : s.status === "unchanged" ? "0%" : s.status;
+var short = (sha) => sha.slice(0, 7);
+var cell = (t) => t.replace(/\|/g, "\\|").replace(/\n/g, " ");
+function summaryLine(m) {
+  const s = m.summary;
+  if (m.options.plan) {
+    const p = m.options.planned ?? { modes: 0, appScreens: 0 };
+    return `Plan: ${m.selection.stories.length} stories in ${p.modes} modes and ${p.appScreens} app screens would be captured between ${m.base.ref} (${short(m.base.sha)}) and ${m.head.ref} (${short(m.head.sha)}).`;
+  }
+  if (!s.shots) return `Nothing to capture: ${m.selection.app.reason.toLowerCase()} and no story is impacted.`;
+  const parts = [`${s.changed} of ${s.shots} screenshot${s.shots > 1 ? "s" : ""} changed`];
+  if (s.added) parts.push(`${s.added} new`);
+  if (s.removed) parts.push(`${s.removed} gone`);
+  if (s.errors) parts.push(`${s.errors} failed`);
+  return `${parts.join(", ")} between ${m.base.ref} (${short(m.base.sha)}) and ${m.head.ref} (${short(m.head.sha)}).${s.changed ? ` Largest change ${s.maxPercent.toFixed(2)}%.` : ""}`;
+}
+function groupByLabel(shots) {
+  const out = /* @__PURE__ */ new Map();
+  for (const s of shots) (out.get(s.label) ?? out.set(s.label, { label: s.label, shots: [] }).get(s.label)).shots.push(s);
+  return [...out.values()];
+}
+function pickImages(shots, max) {
+  const out = [];
+  const seen = /* @__PURE__ */ new Set();
+  const take = (s) => {
+    if (out.length < max && !out.includes(s)) out.push(s);
+  };
+  for (const s of shots.filter((x) => x.kind === "route")) {
+    if (out.length >= 2) break;
+    if (seen.has(s.label)) continue;
+    seen.add(s.label);
+    take(s);
+  }
+  for (const s of shots) {
+    if (seen.has(s.label)) continue;
+    seen.add(s.label);
+    take(s);
+  }
+  for (const s of shots) take(s);
+  return out;
+}
+function renderComment(m, o = {}) {
+  const maxImages = o.maxImages ?? 6;
+  const maxRows = o.maxRows ?? 40;
+  const ranked = rankShots(m.shots);
+  const changed = ranked.filter((s) => s.status !== "unchanged");
+  const unchanged = ranked.filter((s) => s.status === "unchanged");
+  const lines = [COMMENT_MARKER, "## Visual impact", ""];
+  lines.push(`${hasVisualChange(m) ? "**" : ""}${summaryLine(m)}${hasVisualChange(m) ? "**" : ""}`);
+  lines.push("");
+  const why = [];
+  if (m.selection.tokens.length) {
+    const direct = m.selection.tokens.filter((t) => t.kind === "direct").map((t) => `\`${t.path}\``);
+    why.push(`${m.selection.tokens.length} token value${m.selection.tokens.length > 1 ? "s" : ""} change${direct.length ? ` (edited: ${direct.slice(0, 5).join(", ")}${direct.length > 5 ? ", ..." : ""})` : ""}`);
+  }
+  if (m.selection.components.length) why.push(`components in scope: ${m.selection.components.map((c) => c.id).join(", ")}`);
+  if (m.selection.fallback) why.push(m.selection.fallback);
+  if (why.length) lines.push(`Why these screens: ${why.join("; ")}.`, "");
+  if (changed.length) {
+    const groups = groupByLabel(changed);
+    lines.push("| Story or screen | Changed in | Largest |", "| --- | --- | ---: |");
+    for (const g of groups.slice(0, maxRows)) {
+      const modes = g.shots.map((s) => `${modeShort(s)}${s.status === "changed" ? "" : ` (${s.status})`}`).join(", ");
+      const err = g.shots.find((s) => s.error)?.error;
+      lines.push(`| ${cell(g.label)} | ${cell(modes)} | ${pct(g.shots[0])}${err ? ` (${cell(err.slice(0, 80))})` : ""} |`);
+    }
+    if (groups.length > maxRows) lines.push(`| ${groups.length - maxRows} more | | |`);
+    lines.push("");
+  }
+  if (unchanged.length) {
+    const groups = groupByLabel(unchanged);
+    lines.push(`<details><summary>${unchanged.length} unchanged (${groups.length} ${groups.length === 1 ? "story or screen" : "stories and screens"})</summary>`, "", "| Story or screen | Modes |", "| --- | --- |");
+    for (const g of groups.slice(0, maxRows)) lines.push(`| ${cell(g.label)} | ${cell(g.shots.map(modeShort).join(", "))} |`);
+    if (groups.length > maxRows) lines.push(`| ${groups.length - maxRows} more | |`);
+    lines.push("", "</details>", "");
+  }
+  const picked = pickImages(changed.filter((s) => s.images.composite), maxImages);
+  if (picked.length && o.imageBase) {
+    lines.push("### Before, after, diff", "");
+    const base = o.imageBase.replace(/\/$/, "");
+    for (const [i, s] of picked.entries()) {
+      lines.push(`<details${i < 2 ? " open" : ""}><summary>${s.label}, ${mode(s)}: ${pct(s)}</summary>`, "", `![${s.label}, ${mode(s)}](${base}/${s.images.composite})`, "", "</details>", "");
+    }
+    const rest = changed.filter((s) => s.images.composite).length - picked.length;
+    if (rest > 0) lines.push(`${rest} more before/after/diff image${rest > 1 ? "s" : ""}: open this pull request in Bridge Reviews (slider, diff toggle, brand and theme filters) or the workflow artifact.`, "");
+  }
+  const links = [o.artifactUrl ? `[All images (workflow artifact)](${o.artifactUrl})` : "", o.imageBase ? `[manifest.json](${o.imageBase.replace(/\/$/, "")}/manifest.json)` : ""].filter(Boolean);
+  lines.push(`<sub>Bridge visual impact, threshold ${m.options.threshold}, ${Math.round(m.durationMs / 1e3)} s. Diffs never fail the check; reviewers decide.${links.length ? ` ${links.join(" \xB7 ")}` : ""}</sub>`);
+  return `${lines.join("\n")}
+`;
+}
+
+// ../visual/src/routes.ts
+var DEFAULT_ROUTES = [
+  { id: "dashboard", label: "Dashboard", path: "/" },
+  { id: "orders-list", label: "Orders list", path: "/orders" },
+  // Order 12 is cancelled in both seeded shops: the status badge uses the danger tone.
+  { id: "order-edit", label: "Order edit", path: "/orders/12", waitFor: "form" },
+  // A rejected review in each shop, on the Rejected tab, with the review drawer open.
+  {
+    id: "reviews-drawer",
+    label: "Reviews, drawer open",
+    path: "/reviews/4",
+    pathByTenant: { northwind: `/reviews/4?filter=${encodeURIComponent('{"status":"rejected"}')}`, harbor: `/reviews/9?filter=${encodeURIComponent('{"status":"rejected"}')}` },
+    waitFor: '[role="dialog"]'
+  },
+  { id: "customers", label: "Customers", path: "/customers" },
+  { id: "products", label: "Products", path: "/products" }
+];
+var DEFAULT_TENANTS = [
+  { id: "northwind", name: "Northwind Prints", brand: "bridge" },
+  { id: "harbor", name: "Harbor Goods", brand: "ocean" }
+];
+var THEMES = ["light", "dark"];
+var BRANDS = ["bridge", "ocean"];
+function routeUrl(base, route, tenant, theme) {
+  return `${base.replace(/\/$/, "")}/?tenant=${encodeURIComponent(tenant)}&theme=${encodeURIComponent(theme)}&density=comfortable&lang=en#${route.pathByTenant?.[tenant] ?? route.path}`;
+}
+function storyUrl(base, id, brand, theme) {
+  return `${base.replace(/\/$/, "")}/iframe.html?id=${encodeURIComponent(id)}&viewMode=story&globals=brand:${brand};theme:${theme};density:comfortable`;
+}
+var shotKey = (...parts) => parts.map((p) => p.toLowerCase().replace(/[^a-z0-9-]+/g, "-").replace(/^-|-$/g, "")).join("__");
+
+// ../visual/src/select.ts
+var NO_VISUAL = /(\.test\.[cm]?[jt]sx?|\.spec\.[cm]?[jt]sx?|\.docs\.json|\.mdx?|README[^/]*)$/i;
+var norm2 = (p) => p.replace(/^\.\//, "").replace(/\\/g, "/");
+var isAllStates = (s) => /--all-states$/.test(s.id) || /^all ?states$/i.test(s.name);
+function storyComponent(s, componentsDir) {
+  return componentForPath(norm2(s.importPath), componentsDir);
+}
+function selectImpact(input) {
+  const { usage, stories } = input;
+  const dir = usage.componentsDir;
+  const lib = input.librarySrc.replace(/\/$/, "");
+  const cap = input.maxStoriesPerComponent ?? 4;
+  const visualFiles = input.files.map(norm2).filter((f) => !NO_VISUAL.test(f));
+  const vars = [...new Set(input.tokens.map((t) => input.cssVar(t.path)))].sort();
+  const impact = impactedModules(usage, { vars, files: visualFiles });
+  let fallback = null;
+  const shared = visualFiles.find((f) => f.startsWith(`${lib}/`) && !f.startsWith(`${dir}/`));
+  const global = visualFiles.find((f) => (input.globalPaths ?? []).some((g) => f === g || f.startsWith(g.endsWith("/") ? g : `${g}/`)));
+  if (shared) fallback = `Shared library code changed (${shared}): every AllStates story is captured.`;
+  else if (global) fallback = `${global} changed: every AllStates story is captured.`;
+  else if (impact.globalHits.length) {
+    const g = impact.globalHits[0];
+    fallback = `${g.file} reads changed tokens (${g.vars.slice(0, 3).join(", ")}${g.vars.length > 3 ? ", ..." : ""}): every AllStates story is captured.`;
+  }
+  const hit = new Set(impact.modules.map((m) => m.id));
+  const byComponent = /* @__PURE__ */ new Map();
+  const foundations = [];
+  for (const s of stories) {
+    const c = storyComponent(s, dir);
+    if (!c) foundations.push(s);
+    else (byComponent.get(c) ?? byComponent.set(c, []).get(c)).push(s);
+  }
+  const picked = [];
+  const components = [...impact.modules];
+  for (const [c, list] of byComponent) {
+    if (hit.has(c)) continue;
+    const via = (usage.modules[c]?.storyImports ?? []).filter((d) => hit.has(d));
+    if (via.length && list.length) components.push({ id: c, reasons: via.map((d) => `story renders ${d}`), indirect: true });
+  }
+  components.sort((a, b) => Number(a.indirect) - Number(b.indirect) || a.id.localeCompare(b.id));
+  const order = (list) => [...list.filter(isAllStates), ...list.filter((s) => !isAllStates(s))];
+  for (const c of components) picked.push(...order(byComponent.get(c.id) ?? []).slice(0, c.indirect ? 1 : cap).map((s) => s.id));
+  if (input.tokens.length) picked.push(...foundations.map((s) => s.id));
+  if (fallback) {
+    for (const s of stories) if (isAllStates(s)) picked.push(s.id);
+  }
+  const appDir = input.appDir?.replace(/\/$/, "");
+  const appFile = appDir ? visualFiles.find((f) => f.startsWith(`${appDir}/`)) : void 0;
+  const app = input.tokens.length ? { include: true, reason: `${input.tokens.length} token value${input.tokens.length > 1 ? "s" : ""} changed` } : components.length || fallback ? { include: true, reason: "Component code changed" } : appFile ? { include: true, reason: `App code changed (${appFile})` } : { include: false, reason: "No token, component or app change" };
+  return {
+    tokens: input.tokens,
+    vars,
+    files: input.files.map(norm2),
+    components: components.map((c) => ({ id: c.id, reasons: c.reasons, indirect: c.indirect })),
+    stories: [...new Set(picked)],
+    fallback,
+    app
+  };
+}
+function storyId(title, exportName) {
+  const sanitize = (s) => s.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/-+/g, "-").replace(/^-+/, "").replace(/-+$/, "");
+  const startCase = exportName.replace(/([a-z0-9])([A-Z])/g, "$1 $2").replace(/([A-Z])([A-Z][a-z])/g, "$1 $2").replace(/[_-]+/g, " ").trim();
+  return `${sanitize(title)}--${sanitize(startCase)}`;
+}
+function storiesFromSource(files) {
+  const out = [];
+  for (const f of files) {
+    const title = /title:\s*['"]([^'"]+)['"]/.exec(f.text)?.[1];
+    if (!title) continue;
+    for (const m of f.text.matchAll(/export\s+const\s+([A-Z]\w*)\s*[:=]/g)) {
+      const name = m[1];
+      out.push({ id: storyId(title, name), title, name: name.replace(/([a-z0-9])([A-Z])/g, "$1 $2"), importPath: `./${norm2(f.path)}` });
+    }
+  }
+  return out;
+}
+
+// ../visual/src/serve.ts
+import { createReadStream, existsSync, statSync } from "node:fs";
+import { createServer } from "node:http";
+import { extname, join, normalize, sep } from "node:path";
+var TYPES = {
+  ".html": "text/html; charset=utf-8",
+  ".js": "text/javascript; charset=utf-8",
+  ".mjs": "text/javascript; charset=utf-8",
+  ".css": "text/css; charset=utf-8",
+  ".json": "application/json; charset=utf-8",
+  ".svg": "image/svg+xml",
+  ".png": "image/png",
+  ".jpg": "image/jpeg",
+  ".jpeg": "image/jpeg",
+  ".gif": "image/gif",
+  ".webp": "image/webp",
+  ".ico": "image/x-icon",
+  ".woff": "font/woff",
+  ".woff2": "font/woff2",
+  ".ttf": "font/ttf",
+  ".map": "application/json",
+  ".txt": "text/plain; charset=utf-8"
+};
+function serveDir(dir) {
+  const root = normalize(dir);
+  const server = createServer((req, res) => {
+    const path = decodeURIComponent(new URL(req.url ?? "/", "http://x").pathname);
+    let file = normalize(join(root, path));
+    if (!file.startsWith(root + sep) && file !== root) {
+      res.writeHead(403).end();
+      return;
+    }
+    if (existsSync(file) && statSync(file).isDirectory()) file = join(file, "index.html");
+    if (!existsSync(file)) {
+      if (extname(path)) {
+        res.writeHead(404).end();
+        return;
+      }
+      file = join(root, "index.html");
+    }
+    res.writeHead(200, { "content-type": TYPES[extname(file)] ?? "application/octet-stream", "cache-control": "no-store" });
+    createReadStream(file).pipe(res);
+  });
+  return new Promise((resolve2, reject) => {
+    server.once("error", reject);
+    server.listen(0, "127.0.0.1", () => {
+      const addr = server.address();
+      const port = typeof addr === "object" && addr ? addr.port : 0;
+      resolve2({ url: `http://127.0.0.1:${port}`, close: () => new Promise((r) => server.close(() => r())) });
+    });
+  });
+}
+
+// ../visual/src/workspace.ts
+import { spawn } from "node:child_process";
+import { existsSync as existsSync2 } from "node:fs";
+import { lstat, mkdir as mkdir2, readdir, readFile as readFile2, realpath, rm, symlink } from "node:fs/promises";
+import { dirname as dirname2, join as join2, relative } from "node:path";
+var PRIVATE = /* @__PURE__ */ new Set([".cache", ".vite", ".vite-temp", ".package-lock.json"]);
+async function workspaceDirs(root) {
+  const pkg = JSON.parse(await readFile2(join2(root, "package.json"), "utf8"));
+  const pats = Array.isArray(pkg.workspaces) ? pkg.workspaces : pkg.workspaces?.packages ?? [];
+  const out = [];
+  for (const p of pats) {
+    if (!p.endsWith("/*")) {
+      if (existsSync2(join2(root, p, "package.json"))) out.push(p);
+      continue;
+    }
+    const parent = p.slice(0, -2);
+    if (!existsSync2(join2(root, parent))) continue;
+    for (const d of await readdir(join2(root, parent))) if (existsSync2(join2(root, parent, d, "package.json"))) out.push(`${parent}/${d}`);
+  }
+  return out;
+}
+async function link(target, at) {
+  await mkdir2(dirname2(at), { recursive: true });
+  await symlink(target, at);
+}
+async function linkNodeModules(src, dst) {
+  const srcNm = await realpath(join2(src, "node_modules"));
+  const dstNm = join2(dst, "node_modules");
+  if (existsSync2(dstNm)) return;
+  const dirs = await workspaceDirs(dst);
+  const names = /* @__PURE__ */ new Map();
+  for (const d of dirs) {
+    const { name } = JSON.parse(await readFile2(join2(dst, d, "package.json"), "utf8"));
+    if (name) names.set(name, d);
+  }
+  await mkdir2(dstNm, { recursive: true });
+  for (const e of await readdir(srcNm)) {
+    if (PRIVATE.has(e)) continue;
+    if (e.startsWith("@")) {
+      for (const c of await readdir(join2(srcNm, e))) if (!names.has(`${e}/${c}`)) await link(join2(srcNm, e, c), join2(dstNm, e, c));
+    } else if (!names.has(e)) await link(join2(srcNm, e), join2(dstNm, e));
+  }
+  for (const [name, d] of names) {
+    const at = join2(dstNm, name);
+    await rm(at, { force: true, recursive: false }).catch(() => void 0);
+    await link(relative(dirname2(at), join2(dst, d)), at);
+  }
+  for (const d of dirs) {
+    const nested = join2(src, d, "node_modules");
+    if (existsSync2(nested) && !existsSync2(join2(dst, d, "node_modules"))) await link(await realpath(nested), join2(dst, d, "node_modules"));
+  }
+}
+async function addWorktree(repo, sha, dir) {
+  await rm(dir, { recursive: true, force: true });
+  await git(repo, ["worktree", "prune"]);
+  await git(repo, ["worktree", "add", "--detach", "--force", dir, sha]);
+}
+async function removeWorktree(repo, dir) {
+  try {
+    await rm(join2(dir, "node_modules"), { recursive: true, force: true });
+    await git(repo, ["worktree", "remove", "--force", dir]);
+  } catch {
+    await rm(dir, { recursive: true, force: true });
+  }
+  await git(repo, ["worktree", "prune"]).catch(() => void 0);
+}
+function run(cmd, args, cwd, log, root = cwd, env = {}) {
+  return new Promise((resolve2, reject) => {
+    const bin = [.../* @__PURE__ */ new Set([join2(cwd, "node_modules", ".bin"), join2(root, "node_modules", ".bin")])].join(":");
+    const child = spawn(cmd, args, {
+      cwd,
+      env: { ...process.env, PATH: `${bin}:${process.env.PATH}`, NODE_OPTIONS: process.env.NODE_OPTIONS ?? "--max-old-space-size=3072", STORYBOOK_DISABLE_TELEMETRY: "1", ...env },
+      stdio: ["ignore", "pipe", "pipe"]
+    });
+    let tail = "";
+    const keep = (b) => tail = (tail + b.toString()).slice(-4e3);
+    child.stdout.on("data", keep);
+    child.stderr.on("data", keep);
+    child.on("error", reject);
+    child.on("close", (code) => {
+      if (code === 0) resolve2();
+      else {
+        log(tail);
+        reject(new Error(`${cmd} ${args.join(" ")} failed in ${cwd} (exit ${code})`));
+      }
+    });
+  });
+}
+var DEFAULT_BUILD = {
+  appDir: "apps/admin",
+  storybookConfigDir: ".storybook",
+  tokensBuild: ["npm", "run", "tokens:build", "--silent"]
+};
+var isDir = async (p) => (await lstat(p).catch(() => null))?.isDirectory() ?? false;
+async function buildRef(o) {
+  const cfg = o.config ?? DEFAULT_BUILD;
+  const out = join2(o.cache, o.sha);
+  const sbOut = join2(out, "storybook");
+  const appOut = join2(out, "app");
+  const needSb = o.plan.storybook && !existsSync2(join2(sbOut, "index.json"));
+  const needApp = o.plan.app && !existsSync2(join2(appOut, "index.html"));
+  const built = { ...o.plan.storybook ? { storybook: sbOut } : {}, ...o.plan.app ? { app: appOut } : {} };
+  if (!needSb && !needApp) {
+    o.log(`  ${o.sha.slice(0, 7)}: builds cached`);
+    return built;
+  }
+  const dir = join2(o.work, `wt-${o.sha.slice(0, 12)}`);
+  o.log(`  ${o.sha.slice(0, 7)}: worktree ${dir}`);
+  await addWorktree(o.repo, o.sha, dir);
+  try {
+    await linkNodeModules(o.repo, dir);
+    o.log(`  ${o.sha.slice(0, 7)}: tokens`);
+    await run(cfg.tokensBuild[0], cfg.tokensBuild.slice(1), dir, o.log);
+    if (needSb) {
+      o.log(`  ${o.sha.slice(0, 7)}: storybook build`);
+      await rm(sbOut, { recursive: true, force: true });
+      await run("storybook", ["build", "-c", cfg.storybookConfigDir, "-o", sbOut, "--quiet", "--disable-telemetry"], dir, o.log);
+    }
+    if (needApp && await isDir(join2(dir, cfg.appDir))) {
+      o.log(`  ${o.sha.slice(0, 7)}: app build`);
+      await rm(appOut, { recursive: true, force: true });
+      await run("vite", ["build", "--outDir", appOut, "--emptyOutDir", "--logLevel", "warn"], join2(dir, cfg.appDir), o.log, dir);
+    }
+  } finally {
+    if (!o.keep) await removeWorktree(o.repo, dir);
+  }
+  if (o.plan.app && !existsSync2(join2(appOut, "index.html"))) delete built.app;
+  return built;
+}
+
+// ../visual/src/run.ts
+var STORY_READY = `document.body.classList.contains('sb-show-main') && (document.querySelector('#storybook-root')?.childElementCount > 0 || document.querySelector('[role="dialog"]')) || document.body.classList.contains('sb-show-errordisplay')`;
+var APP_READY = `document.querySelector('#root')?.childElementCount > 0 && !document.querySelector('[aria-busy="true"]')`;
+async function readConfig(root, sha) {
+  const text = await showFile(root, sha, "bridge.config.json") ?? (existsSync3(join3(root, "bridge.config.json")) ? await readFile3(join3(root, "bridge.config.json"), "utf8") : null);
+  if (!text) throw new Error("bridge.config.json not found: run `bridge init` first.");
+  return loadConfig(text);
+}
+async function tokenSetAt(root, sha, config, files) {
+  const tokensRoot = config.tokens.root.replace(/\/$/, "");
+  const picked = selectTokenFiles(config, files);
+  const texts = await Promise.all(picked.map(async (f) => [f, await showFile(root, sha, tokensRoot === "." ? f : `${tokensRoot}/${f}`)]));
+  return new LayeredTokenSet(config, new Map(texts.filter((t) => t[1] !== null)));
+}
+function changedTokens(before, after) {
+  const direct = new Set(diffLayered(before, after).map((c) => c.path));
+  const modes = /* @__PURE__ */ new Map();
+  for (const combo of after.combos()) {
+    const paths = /* @__PURE__ */ new Set([...before.view(combo).keys(), ...after.view(combo).keys()]);
+    for (const p of paths) {
+      if (before.resolve(p, combo).css === after.resolve(p, combo).css) continue;
+      (modes.get(p) ?? modes.set(p, []).get(p)).push(comboKey(combo));
+    }
+  }
+  return [...modes.entries()].map(([path, m]) => ({ path, kind: direct.has(path) ? "direct" : "alias", modes: m })).sort((a, b) => Number(a.kind === "alias") - Number(b.kind === "alias") || a.path.localeCompare(b.path));
+}
+async function readIndexJson(dir) {
+  const raw = JSON.parse(await readFile3(join3(dir, "index.json"), "utf8"));
+  return Object.values(raw.entries).filter((e) => e.type === "story").map(({ id, title, name, importPath }) => ({ id, title, name, importPath }));
+}
+async function planImpact(o) {
+  const root = resolve(o.root);
+  const rev = async (r) => (await git(root, ["rev-parse", "--verify", `${r}^{commit}`])).trim();
+  const headSha = await rev(o.head);
+  const tipSha = await rev(o.base);
+  const baseSha = (await git(root, ["merge-base", tipSha, headSha])).trim() || tipSha;
+  const config = await readConfig(root, headSha);
+  const [baseFiles, headFiles] = await Promise.all([listFilesAt(root, baseSha), listFilesAt(root, headSha)]);
+  const [before, after] = await Promise.all([tokenSetAt(root, baseSha, config, baseFiles), tokenSetAt(root, headSha, config, headFiles)]);
+  const tokens = changedTokens(before, after);
+  const changed = (await git(root, ["diff", "--name-only", baseSha, headSha])).split("\n").filter(Boolean);
+  const componentsDir = config.components?.dir ?? "packages/react/src/components";
+  const librarySrc = componentsDir.split("/").slice(0, -1).join("/") || componentsDir;
+  const libFiles = headFiles.filter((f) => f.startsWith(`${librarySrc}/`) && /\.(css|tsx?|jsx?)$/.test(f));
+  const texts = await Promise.all(libFiles.map(async (path) => ({ path, text: await showFile(root, headSha, path) ?? "" })));
+  const usage = buildUsageIndex(texts, componentsDir);
+  const stories = storiesFromSource(texts.filter((t) => /\.stories\.[jt]sx?$/.test(t.path)));
+  const build = o.build ?? DEFAULT_BUILD;
+  const only = o.only?.length ? o.only : ["stories", "app"];
+  const selection = selectImpact({
+    files: changed,
+    tokens,
+    cssVar: (p) => after.cssVarName(p),
+    usage,
+    stories,
+    librarySrc,
+    globalPaths: [build.storybookConfigDir, "packages/tokens/build.mjs", "packages/tokens/scripts", "packages/tokens/fonts.css"],
+    appDir: build.appDir,
+    ...o.maxStoriesPerComponent ? { maxStoriesPerComponent: o.maxStoriesPerComponent } : {}
+  });
+  if (!only.includes("stories")) selection.stories = [];
+  if (!only.includes("app")) selection.app = { include: false, reason: "Skipped (--only stories)" };
+  return { base: { ref: o.base, sha: baseSha }, head: { ref: o.head, sha: headSha }, config, selection, sources: { stories, librarySrc, usage } };
+}
+async function runImpact(o) {
+  const started = Date.now();
+  const log = o.log ?? ((m) => process.stderr.write(`${m}
+`));
+  const root = resolve(o.root);
+  const outDir = resolve(o.out ?? join3(root, "visual-impact"));
+  const threshold = o.threshold ?? 0.03;
+  const only = o.only?.length ? o.only : ["stories", "app"];
+  const vp = { stories: o.viewport?.stories ?? { width: 1024, height: 768 }, app: o.viewport?.app ?? { width: 1280, height: 800 } };
+  const build = o.build ?? DEFAULT_BUILD;
+  const concurrency = o.concurrency ?? Number(process.env.BRIDGE_VISUAL_CONCURRENCY ?? 2);
+  if (outDir === root || !relative2(outDir, root).startsWith("..")) throw new Error(`--out must be a folder inside or outside the repo, not the repo or one of its parents (${outDir}).`);
+  log(`bridge impact: planning ${o.base}...${o.head}`);
+  const plan = await planImpact({ ...o, only, build });
+  const { selection } = plan;
+  const modes = o.modes ?? BRANDS.flatMap((brand) => THEMES.map((theme) => ({ brand, theme })));
+  const tenants = o.tenants ?? DEFAULT_TENANTS;
+  const routes = o.routes ?? DEFAULT_ROUTES;
+  const finish = async (shots2) => {
+    const manifest = {
+      version: 1,
+      tool: "@bridge-ds/visual",
+      createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+      durationMs: Date.now() - started,
+      base: plan.base,
+      head: plan.head,
+      options: { only, threshold, ...o.plan ? { plan: true, planned: { modes: modes.length, appScreens: selection.app.include ? tenants.length * THEMES.length * routes.length : 0 } } : {}, viewport: vp },
+      selection,
+      summary: summarize(shots2),
+      shots: shots2
+    };
+    await mkdir3(outDir, { recursive: true });
+    const manifestPath = join3(outDir, "manifest.json");
+    await writeFile3(manifestPath, `${JSON.stringify(manifest, null, 2)}
+`);
+    let commentPath;
+    if (o.imageBase !== void 0 || o.artifactUrl) {
+      commentPath = join3(outDir, "comment.md");
+      await writeFile3(commentPath, renderComment(manifest, { ...o.imageBase ? { imageBase: o.imageBase } : {}, ...o.artifactUrl ? { artifactUrl: o.artifactUrl } : {} }));
+    }
+    return { manifest, outDir, manifestPath, ...commentPath ? { commentPath } : {}, summary: summaryLine(manifest) };
+  };
+  if (o.plan) return finish([]);
+  const needStories = only.includes("stories") && selection.stories.length > 0;
+  const needApp = only.includes("app") && selection.app.include;
+  if (!needStories && !needApp) {
+    log("Nothing visual to capture.");
+    return finish([]);
+  }
+  const cache = resolve(o.cacheDir ?? join3(root, "node_modules", ".cache", "bridge-visual"));
+  const work = resolve(o.workDir ?? join3(tmpdir(), `bridge-visual-${process.pid}`));
+  await mkdir3(work, { recursive: true });
+  const builds = { base: {}, head: {} };
+  try {
+    for (const side of ["head", "base"]) {
+      log(`Building ${side} (${plan[side].ref})`);
+      builds[side] = await buildRef({ repo: root, sha: plan[side].sha, work, cache, plan: { storybook: needStories, app: needApp }, config: build, log });
+    }
+  } finally {
+    await rm2(work, { recursive: true, force: true });
+  }
+  if (needStories && builds.head.storybook) {
+    const real = await readIndexJson(builds.head.storybook);
+    const refined = selectImpact({
+      files: selection.files,
+      tokens: selection.tokens,
+      cssVar: (p) => `${plan.config.cssVar.prefix}${p.split(".").join(plan.config.cssVar.separator)}`,
+      usage: plan.sources.usage,
+      stories: real,
+      librarySrc: plan.sources.librarySrc,
+      globalPaths: [build.storybookConfigDir, "packages/tokens/build.mjs", "packages/tokens/scripts", "packages/tokens/fonts.css"],
+      appDir: build.appDir,
+      ...o.maxStoriesPerComponent ? { maxStoriesPerComponent: o.maxStoriesPerComponent } : {}
+    });
+    selection.stories = refined.stories;
+    selection.components = refined.components;
+  }
+  const byId = /* @__PURE__ */ new Map();
+  if (builds.head.storybook) for (const s of await readIndexJson(builds.head.storybook)) byId.set(s.id, s);
+  if (builds.base.storybook && existsSync3(join3(builds.base.storybook, "index.json"))) {
+    for (const s of await readIndexJson(builds.base.storybook)) if (!byId.has(s.id)) byId.set(s.id, s);
+  }
+  const jobs = [];
+  if (needStories)
+    for (const m of modes)
+      for (const id of selection.stories) {
+        const s = byId.get(id);
+        jobs.push({ key: shotKey("story", id, `${m.brand}-${m.theme}`), kind: "story", label: s ? `${s.title}: ${s.name}` : id, storyId: id, brand: m.brand, theme: m.theme });
+      }
+  if (needApp && builds.head.app)
+    for (const t of tenants)
+      for (const theme of THEMES)
+        for (const r of routes) jobs.push({ key: shotKey("app", r.id, t.id, theme), kind: "route", label: r.label, route: r, tenant: t, brand: t.brand, theme });
+  await rm2(outDir, { recursive: true, force: true });
+  for (const d of ["before", "after", "diff", "composite"]) await mkdir3(join3(outDir, d), { recursive: true });
+  const errors = /* @__PURE__ */ new Map();
+  for (const side of ["base", "head"]) {
+    const b = builds[side];
+    const served = [];
+    const browser = await launch();
+    try {
+      const sb = b.storybook && existsSync3(join3(b.storybook, "index.json")) ? await serveDir(b.storybook) : null;
+      const app = b.app && existsSync3(join3(b.app, "index.html")) ? await serveDir(b.app) : null;
+      if (sb) served.push(sb);
+      if (app) served.push(app);
+      const dir = join3(outDir, side === "base" ? "before" : "after");
+      const storyJobs = jobs.filter((j) => j.kind === "story");
+      if (sb && storyJobs.length) {
+        log(`Capturing ${storyJobs.length} story shots at ${side}`);
+        const ctx = await newContext(browser, vp.stories);
+        const known = new Set((await readIndexJson(b.storybook)).map((s) => s.id));
+        const queue = [...modes];
+        const worker = async () => {
+          const page = await newPage(ctx);
+          for (let m = queue.shift(); m; m = queue.shift()) {
+            let loaded = false;
+            for (const j of storyJobs.filter((x) => x.brand === m.brand && x.theme === m.theme)) {
+              if (!known.has(j.storyId)) continue;
+              const err = await shoot(page, {
+                url: storyUrl(sb.url, j.storyId, j.brand, j.theme),
+                file: join3(dir, `${j.key}.png`),
+                fullPage: true,
+                readyFn: STORY_READY,
+                // Loading stories (Spinner, Skeleton) stay aria-busy on purpose: do not wait for them.
+                settle: loaded ? { network: false, quiet: 2, interval: 40, busy: false } : { busy: false },
+                ...loaded ? { navigate: (p) => switchStory(p, j.storyId) } : {}
+              });
+              if (err) {
+                errors.set(`${side}:${j.key}`, err);
+                loaded = false;
+              } else loaded = true;
+            }
+          }
+          await page.close();
+        };
+        await Promise.all(Array.from({ length: Math.max(1, Math.min(concurrency, modes.length)) }, worker));
+        await ctx.close();
+      }
+      const routeJobs = jobs.filter((j) => j.kind === "route");
+      if (app && routeJobs.length) {
+        log(`Capturing ${routeJobs.length} app shots at ${side}`);
+        for (const t of tenants)
+          for (const theme of THEMES) {
+            const ctx = await newContext(browser, vp.app);
+            const page = await newPage(ctx);
+            for (const j of routeJobs.filter((x) => x.tenant.id === t.id && x.theme === theme)) {
+              const err = await shoot(page, { url: routeUrl(app.url, j.route, t.id, theme), file: join3(dir, `${j.key}.png`), fullPage: false, readyFn: APP_READY, ...j.route.waitFor ? { waitFor: j.route.waitFor } : {}, mask: ["[data-visual-mask]", ...j.route.mask ?? []] });
+              if (err) errors.set(`${side}:${j.key}`, err);
+            }
+            await ctx.close();
+          }
+      }
+    } finally {
+      await browser.close();
+      for (const s of served) await s.close();
+    }
+  }
+  log("Diffing");
+  const shots = [];
+  for (const j of jobs) {
+    const bf = join3(outDir, "before", `${j.key}.png`);
+    const af = join3(outDir, "after", `${j.key}.png`);
+    const hasB = existsSync3(bf);
+    const hasA = existsSync3(af);
+    const base = {
+      key: j.key,
+      kind: j.kind,
+      label: j.label,
+      ...j.storyId ? { storyId: j.storyId } : {},
+      ...j.route ? { route: j.route.path } : {},
+      ...j.tenant ? { tenant: j.tenant.id } : {},
+      brand: j.brand,
+      theme: j.theme
+    };
+    const err = errors.get(`head:${j.key}`) ?? errors.get(`base:${j.key}`);
+    if (!hasB && !hasA) {
+      shots.push({ ...base, status: "error", changedPixels: 0, totalPixels: 0, percent: 0, boxes: [], size: { before: null, after: null }, images: {}, error: err ?? "not captured" });
+      continue;
+    }
+    if (!hasB || !hasA) {
+      const png = decodePng(await readFile3(hasA ? af : bf));
+      const size = { width: png.width, height: png.height };
+      shots.push({
+        ...base,
+        status: hasA ? "added" : "removed",
+        changedPixels: png.width * png.height,
+        totalPixels: png.width * png.height,
+        percent: 100,
+        boxes: [{ x: 0, y: 0, ...size }],
+        size: { before: hasB ? size : null, after: hasA ? size : null },
+        images: hasA ? { after: `after/${j.key}.png` } : { before: `before/${j.key}.png` },
+        ...err ? { error: err } : {}
+      });
+      continue;
+    }
+    const pb = decodePng(await readFile3(bf));
+    const pa = decodePng(await readFile3(af));
+    const d = diffPngs(pb, pa, threshold);
+    const changed = d.changedPixels > 0;
+    const images = {};
+    if (changed || o.keepUnchanged) Object.assign(images, { before: `before/${j.key}.png`, after: `after/${j.key}.png` });
+    else await Promise.all([unlink(bf), unlink(af)]);
+    if (d.diff) {
+      await writeFile3(join3(outDir, "diff", `${j.key}.png`), encodePng(d.diff));
+      images.diff = `diff/${j.key}.png`;
+    }
+    shots.push({
+      ...base,
+      status: err ? "error" : changed ? "changed" : "unchanged",
+      changedPixels: d.changedPixels,
+      totalPixels: d.totalPixels,
+      percent: d.percent,
+      boxes: d.boxes,
+      size: { before: { width: pb.width, height: pb.height }, after: { width: pa.width, height: pa.height } },
+      images,
+      ...err ? { error: err } : {}
+    });
+  }
+  const toComposite = shots.filter((s) => s.status === "changed" || s.status === "added" || s.status === "removed");
+  if (toComposite.length) {
+    log(`Composing ${toComposite.length} before/after/diff images`);
+    const browser = await launch();
+    try {
+      const ctx = await browser.newContext({ viewport: { width: 1700, height: 900 }, deviceScaleFactor: 1 });
+      const page = await ctx.newPage();
+      for (const s of toComposite) {
+        const w = Math.max(s.size.before?.width ?? 0, s.size.after?.width ?? 0);
+        const h = Math.max(s.size.before?.height ?? 0, s.size.after?.height ?? 0);
+        const file = join3(outDir, "composite", `${s.key}.png`);
+        await composite(page, {
+          title: s.label,
+          subtitle: `${s.tenant ? `${DEFAULT_TENANTS.find((t) => t.id === s.tenant)?.name ?? s.tenant}, ` : ""}${s.brand}, ${s.theme} \xB7 ${s.status === "changed" ? `${s.percent.toFixed(2)}% changed` : s.status}`,
+          before: s.images.before ? join3(outDir, s.images.before) : null,
+          after: s.images.after ? join3(outDir, s.images.after) : null,
+          diff: s.images.diff ? join3(outDir, s.images.diff) : null,
+          width: w,
+          height: h,
+          boxes: s.boxes,
+          out: file
+        });
+        s.images.composite = `composite/${s.key}.png`;
+      }
+      await ctx.close();
+    } finally {
+      await browser.close();
+    }
+  }
+  const result = await finish(shots);
+  log(`${result.summary} Manifest: ${relative2(process.cwd(), result.manifestPath) || result.manifestPath}`);
+  return result;
+}
+export {
+  COMMENT_MARKER,
+  DEFAULT_ROUTES,
+  DEFAULT_TENANTS,
+  boxesFromCells,
+  boxesFromDiff,
+  changedTokens,
+  decodePng,
+  diffPngs,
+  encodePng,
+  hasVisualChange,
+  linkNodeModules,
+  padTo,
+  planImpact,
+  rankShots,
+  renderComment,
+  routeUrl,
+  runImpact,
+  selectImpact,
+  shotKey,
+  storiesFromSource,
+  storyComponent,
+  storyId,
+  storyUrl,
+  summarize,
+  summaryLine
+};