@bridge-ds/visual 0.3.12 → 0.3.13

package/dist/capture.d.ts

@@ -38,3 +38,13 @@ export declare function shoot(page: Page, r: ShotRequest): Promise<string | null
  * click a story), much faster than a page load per story. Resolves once the story rendered or failed.
  */
 export declare function switchStory(page: Page, storyId: string): Promise<void>;
+/**
+ * A page for `bridge specs --measure`: an installed Chrome, one page at 1200x800, light scheme, reduced motion. Unlike
+ * the capture context it reaches remote hosts (a team's deployed Storybook). Close it when done.
+ */
+export declare function openMeasurePage(o?: LaunchOptions & {
+    scale?: number;
+}): Promise<{
+    page: Page;
+    close: () => Promise<void>;
+}>;

package/dist/diff.d.ts

@@ -12,6 +12,8 @@ export interface DiffResult {
 }
 export declare const decodePng: (buf: Buffer) => PNG;
 export declare const encodePng: (png: PNG) => Buffer;
+/** The `x, y, width, height` region of `src` (px of the image), clipped to it. */
+export declare function cropPng(src: PNG, x: number, y: number, width: number, height: number): PNG;
 /** Copies `src` onto a `width` x `height` canvas filled with an opaque neutral, so sizes can differ. */
 export declare function padTo(src: PNG, width: number, height: number): PNG;
 /**

package/dist/index.d.ts

@@ -1,8 +1,9 @@
 export { runImpact, planImpact, changedTokens, type ImpactOptions, type ImpactResult, type Plan } from './run.js';
 export { selectImpact, storiesFromSource, storyId, storyComponent, type SelectInput } from './select.js';
-export { diffPngs, boxesFromDiff, boxesFromCells, padTo, decodePng, encodePng, type DiffResult } from './diff.js';
+export { diffPngs, boxesFromDiff, boxesFromCells, padTo, cropPng, decodePng, encodePng, type DiffResult } from './diff.js';
 export { COMMENT_MARKER, hasVisualChange, rankShots, renderComment, summarize, summaryLine, type CommentOptions } from './manifest.js';
 export { DEFAULT_ROUTES, DEFAULT_TENANTS, routeUrl, storyUrl, shotKey } from './routes.js';
 export { captureFigmaReferences, type ReferencesOptions, type ReferencesResult } from './references.js';
 export { linkNodeModules } from './workspace.js';
+export { openMeasurePage } from './capture.js';
 export type * from './types.js';

package/dist/index.js

@@ -121,6 +121,12 @@ var CONFIG_FILE = "bridge.config.json";
 var CHANGES_MODES = ["suggest", "direct"];
 var DEFAULT_CHANGES_MODE = "suggest";
 var DEFAULT_OVERRIDE = { allowed: [], requireReason: true, minReasonLength: 20 };
+var TEAM_NAME_MAX = 60;
+function teamName(value) {
+  if (typeof value !== "string") return void 0;
+  const v = value.trim().replace(/\s+/g, " ");
+  return v && v.length <= TEAM_NAME_MAX ? v : void 0;
+}
 var DEFAULT_TOKEN_PATHS = {
   root: "tokens",
   primitives: "primitives",
@@ -226,6 +232,7 @@ function defineConfig(input) {
   const g = input.governance ?? {};
   const contrastFile = contrastPath ?? [root === "." ? "" : root, paths.contrastChecks].filter(Boolean).join("/");
   return {
+    ...teamName(input.name) ? { name: teamName(input.name) } : {},
     repo: parseRepoInput(input.repo, input.branch),
     tokens: { ...paths, include: input.tokens?.include ?? ["**/*.tokens.json"], exclude: input.tokens?.exclude ?? [], tiers, layers, ...t.usage ? { usage: trimSlashes(t.usage) } : {} },
     axes,
@@ -264,6 +271,7 @@ function defineConfig(input) {
     changes: input.changes === "direct" ? "direct" : DEFAULT_CHANGES_MODE,
     ...input.storybook?.url ? { storybook: { url: input.storybook.url.trim().replace(/\/+$/, "") } } : {},
     ...input.library?.public === true ? { library: { public: true } } : {},
+    ...input.demo?.viewer?.trim() ? { demo: { viewer: input.demo.viewer.trim(), ...input.demo.role?.trim() ? { role: input.demo.role.trim() } : {} } } : {},
     ...input.audit ? { audit: { ...input.audit } } : {},
     ...input.visualImpact ? { visualImpact: { mode: input.visualImpact.mode === "on-demand" ? "on-demand" : "auto" } } : {},
     ...input.integrations ? { integrations: { ...input.integrations } } : {},
@@ -388,6 +396,7 @@ function loadConfig(source) {
     }
   }
   problems.push(...visualImpactProblems(d.visualImpact));
+  if (d.name !== void 0 && teamName(d.name) === void 0) problems.push(`"name" must be the team's name, 1 to ${TEAM_NAME_MAX} characters`);
   if (d.changes !== void 0 && !CHANGES_MODES.includes(d.changes)) problems.push(`"changes" must be "suggest" or "direct" (got ${JSON.stringify(d.changes)})`);
   const sb = d.storybook;
   if (sb !== void 0) {
@@ -403,6 +412,14 @@ function loadConfig(source) {
       for (const k of Object.keys(lib)) if (k !== "public") problems.push(`"library.${k}" is not a known key`);
     }
   }
+  const demo = d.demo;
+  if (demo !== void 0) {
+    if (!isObj(demo) || !isStr(demo.viewer) || !demo.viewer.trim()) problems.push('"demo" must be { "viewer" }, for example { "viewer": "Dana", "role": "DS lead" }');
+    else {
+      if (demo.role !== void 0 && !isStr(demo.role)) problems.push('"demo.role" must be a string, for example "DS lead"');
+      for (const k of Object.keys(demo)) if (k !== "viewer" && k !== "role") problems.push(`"demo.${k}" is not a known key`);
+    }
+  }
   problems.push(...productProblems(d.products));
   const audit = d.audit;
   if (audit !== void 0) {
@@ -897,7 +914,7 @@ var STATE_PSEUDO = {
 var iconName = (component) => component.replace(/^Icon\//, "");
 var exportName = (name) => name.replace(/[^A-Za-z0-9]+/g, "");
 function planReference(spec, variant, file) {
-  if (spec.view === "popup") return { ok: false, reason: "drawn open in Figma; the code image shows it closed" };
+  if (spec.view === "popup") return planPopup(spec, variant);
   const props = { ...spec.fixed ?? {} };
   let pseudo;
   for (const axis of spec.axes) {
@@ -926,6 +943,7 @@ function planReference(spec, variant, file) {
     if (part.swap && swapTo) {
       const slot = file?.slots?.find((s) => s.name === swapTo);
       if (!slot) return { reason: `${swapTo} is not in the specs` };
+      if (slot.kind === "media") return { reason: `Figma shows a media placeholder (${swapTo}); code shows the image it is given, nothing to compare` };
       if (slot.kind !== "text" || !slot.text) return { reason: `Figma shows a placeholder (${swapTo}) that code has no example of` };
       return slot.text.default;
     }
@@ -977,10 +995,13 @@ function planReference(spec, variant, file) {
   }
   const example = spec.example;
   const exampleChildren = example?.children?.length ? example.children : void 0;
+  const component = exportName(example?.c ?? (spec.name.includes("/") ? spec.component ?? spec.name : spec.name));
+  const parent = spec.component ? exportName(spec.component) : void 0;
   return {
     ok: true,
     render: {
-      component: exportName(spec.view || spec.fixed || example ? example?.c ?? spec.component ?? spec.name : spec.name),
+      component,
+      ...parent && parent !== component ? { within: parent } : {},
       props: { ...example?.p ?? {}, ...props },
       ...exampleChildren ? { children: exampleChildren } : {},
       ...text !== void 0 && !exampleChildren ? { text } : {},
@@ -991,6 +1012,28 @@ function planReference(spec, variant, file) {
     }
   };
 }
+function planPopup(spec, variant) {
+  const root = spec.parts.find((p) => !p.parent);
+  const own = {};
+  for (const axis of spec.axes) {
+    const value = variant.props[axis.name];
+    if (!axis.prop || value === void 0) return { ok: false, reason: `${axis.name} has no matching option in code` };
+    own[axis.prop] = value === "true" ? true : value === "false" ? false : value;
+  }
+  const className = /\.module\.css \.([\w-]+)/.exec(root?.source ?? "")?.[1];
+  const component = spec.component ? exportName(spec.component) : void 0;
+  const example = spec.example;
+  if (!component || !example) return { ok: false, reason: "drawn open from no code example: nothing to open in code" };
+  if (!className) return { ok: false, reason: "the popup has no class to find it by in code" };
+  const popup = { className };
+  if (exportName(example.c) === component) {
+    return { ok: true, render: { component, props: { ...example.p ?? {}, ...own, defaultOpen: true }, ...example.children?.length ? { children: example.children } : {}, popup } };
+  }
+  return {
+    ok: true,
+    render: { component, props: { defaultOpen: true }, children: [{ c: `${component}Trigger`, children: ["Open"] }, { ...example, p: { ...example.p ?? {}, ...own } }], popup }
+  };
+}
 function referenceImagePath(component, key) {
   const slug = (s) => s.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
   const file = key.split(",").map((kv) => slug(kv)).filter(Boolean).join("__");
@@ -1214,6 +1257,17 @@ async function switchStory(page, storyId2) {
   );
   if (!ok) throw new Error("Storybook channel not found");
 }
+async function openMeasurePage(o = {}) {
+  const browser = await launch(o);
+  try {
+    const ctx = await browser.newContext({ viewport: { width: 1200, height: 800 }, deviceScaleFactor: o.scale ?? 1, reducedMotion: "reduce", colorScheme: "light", locale: "en-US", serviceWorkers: "block" });
+    const page = await ctx.newPage();
+    return { page, close: () => browser.close().catch(() => void 0) };
+  } catch (e) {
+    await browser.close().catch(() => void 0);
+    throw e;
+  }
+}
 
 // src/composite.ts
 import { readFile, writeFile as writeFile2 } from "node:fs/promises";
@@ -1265,6 +1319,15 @@ 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 cropPng(src, x, y, width, height) {
+  const left = Math.max(0, Math.round(x));
+  const top = Math.max(0, Math.round(y));
+  const w = Math.max(1, Math.min(src.width - left, Math.round(width)));
+  const h = Math.max(1, Math.min(src.height - top, Math.round(height)));
+  const out = new PNG({ width: w, height: h });
+  PNG.bitblt(src, out, left, top, w, h, 0, 0);
+  return out;
+}
 function padTo(src, width, height) {
   if (src.width === width && src.height === height) return src;
   const out = new PNG({ width, height });
@@ -2105,9 +2168,12 @@ async function captureFigmaReferences(o) {
   try {
     const ctx = await newContext(browser, { width: 1200, height: 800 }, scale);
     const page = await newPage(ctx);
-    await page.goto(storyUrl(served.url, FIGMA_REFERENCE_STORY, brand, theme), { waitUntil: "load", timeout: 3e4 });
-    await page.waitForSelector("[data-fidelity-root], [data-fidelity-error]", { state: "attached", timeout: 2e4 });
-    await settle(page, { busy: false });
+    const openStory = async () => {
+      await page.goto(storyUrl(served.url, FIGMA_REFERENCE_STORY, brand, theme), { waitUntil: "load", timeout: 3e4 });
+      await page.waitForSelector("[data-fidelity-root], [data-fidelity-error]", { state: "attached", timeout: 2e4 });
+      await settle(page, { busy: false });
+    };
+    await openStory();
     log(`Capturing ${jobs.length} variants at ${scale}x (${brand} ${theme})`);
     for (const j of jobs) {
       const variants = manifest.components[j.component].variants;
@@ -2116,25 +2182,17 @@ async function captureFigmaReferences(o) {
         skipped++;
         continue;
       }
-      const plan = JSON.stringify(j.plan.render);
-      await page.evaluate(
-        ({ id, plan: plan2 }) => new Promise((resolve2) => {
-          const ch = window.__STORYBOOK_ADDONS_CHANNEL__;
-          const done = () => {
-            clearTimeout(timer);
-            ch.off("storyRendered", done);
-            resolve2();
-          };
-          const timer = setTimeout(done, 1e4);
-          ch.on("storyRendered", done);
-          ch.emit("updateStoryArgs", { storyId: id, updatedArgs: { plan: plan2 } });
-        }),
-        { id: FIGMA_REFERENCE_STORY, plan }
-      );
+      const shown = await renderPlan(page, JSON.stringify(j.plan.render));
+      if (shown.broken) {
+        variants[j.key] = { skipped: `the code example threw: ${shown.error ?? "the story did not finish rendering"}` };
+        skipped++;
+        await openStory();
+        continue;
+      }
       await settle(page, { network: false, quiet: 2, interval: 40, busy: false });
       const error = await page.locator("[data-fidelity-error]").first().textContent({ timeout: 200 }).catch(() => null);
       let target = page.locator("[data-fidelity-root] > *").first();
-      if (!error && !await target.count()) {
+      if (!error && (j.plan.render.within || j.plan.render.popup || !await target.count())) {
         const marked = page.locator("[data-fidelity-target]").first();
         await marked.waitFor({ state: "visible", timeout: 3e3 }).catch(() => void 0);
         await settle(page, { network: false, quiet: 2, interval: 40, busy: false });
@@ -2145,6 +2203,15 @@ async function captureFigmaReferences(o) {
         skipped++;
         continue;
       }
+      const transparent = await target.evaluate((el) => {
+        for (let e = el; e; e = e.parentElement) if (getComputedStyle(e).opacity === "0") return true;
+        return false;
+      });
+      if (transparent) {
+        variants[j.key] = { skipped: "the code example rendered invisible (opacity 0)" };
+        skipped++;
+        continue;
+      }
       const file = referenceImagePath(j.component, j.key);
       const path = join4(o.out, file);
       await mkdir4(dirname3(path), { recursive: true });
@@ -2165,6 +2232,35 @@ async function captureFigmaReferences(o) {
   log(`${captured} images, ${skipped} variants skipped. ${manifestPath}`);
   return { manifest, manifestPath, captured, skipped };
 }
+async function renderPlan(page, plan) {
+  const r = await page.evaluate(
+    ({ id, plan: plan2 }) => new Promise((resolve2) => {
+      const ch = window.__STORYBOOK_ADDONS_CHANNEL__;
+      let error;
+      const failed = (p) => {
+        const e = p;
+        error ??= e?.message ?? e?.title ?? e?.description;
+      };
+      const finish = (rendered) => {
+        clearTimeout(timer);
+        ch.off("storyRendered", done);
+        ch.off("storyThrewException", failed);
+        ch.off("storyErrored", failed);
+        resolve2({ rendered, ...error ? { error } : {} });
+      };
+      const done = () => finish(true);
+      document.querySelectorAll("[data-fidelity-target]").forEach((el) => el.removeAttribute("data-fidelity-target"));
+      const timer = setTimeout(() => finish(false), 1e4);
+      ch.on("storyThrewException", failed);
+      ch.on("storyErrored", failed);
+      ch.on("storyRendered", done);
+      ch.emit("updateStoryArgs", { storyId: id, updatedArgs: { plan: plan2 } });
+    }),
+    { id: FIGMA_REFERENCE_STORY, plan }
+  );
+  const errorScreen = await page.evaluate(() => document.body.classList.contains("sb-show-errordisplay"));
+  return { broken: !r.rendered || !!r.error || errorScreen, ...r.error ? { error: r.error } : {} };
+}
 export {
   COMMENT_MARKER,
   DEFAULT_ROUTES,
@@ -2173,11 +2269,13 @@ export {
   boxesFromDiff,
   captureFigmaReferences,
   changedTokens,
+  cropPng,
   decodePng,
   diffPngs,
   encodePng,
   hasVisualChange,
   linkNodeModules,
+  openMeasurePage,
   padTo,
   planImpact,
   rankShots,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bridge-ds/visual",
-  "version": "0.3.12",
+  "version": "0.3.13",
   "type": "module",
   "description": "Bridge visual impact analysis: screenshots the stories and app screens a design system change touches, at the base and head refs, and pixel-diffs them into before/after/diff images and a JSON manifest.",
   "license": "MIT",
@@ -47,7 +47,7 @@
     "build:package": "node ../../scripts/build-packages.mjs visual"
   },
   "dependencies": {
-    "@bridge-ds/core": "^0.18.0",
+    "@bridge-ds/core": "^0.19.0",
     "pixelmatch": "7.1.0",
     "playwright-core": "1.63.0",
     "pngjs": "7.0.0"