@bridge-ds/mcp 0.8.4 → 0.9.0

package/dist/{src-DRJFSLRV.js → src-RUS6SPYZ.js}

@@ -11,7 +11,7 @@ import {
   referenceImagePath,
   selectTokenFiles,
   showFile
-} from "./chunk-PMZGEZGX.js";
+} from "./chunk-ZVORAO5H.js";
 
 // ../visual/src/run.ts
 import { existsSync as existsSync3 } from "node:fs";
@@ -317,6 +317,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;
+  }
+}
 
 // ../visual/src/composite.ts
 import { readFile, writeFile as writeFile2 } from "node:fs/promises";
@@ -368,6 +379,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 });
@@ -1208,9 +1228,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;
@@ -1219,25 +1242,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 });
@@ -1248,6 +1263,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 });
@@ -1268,6 +1292,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,
@@ -1276,11 +1329,13 @@ export {
   boxesFromDiff,
   captureFigmaReferences,
   changedTokens,
+  cropPng,
   decodePng,
   diffPngs,
   encodePng,
   hasVisualChange,
   linkNodeModules,
+  openMeasurePage,
   padTo,
   planImpact,
   rankShots,

package/dist/studio.d.ts

@@ -114,6 +114,16 @@ export declare function getSettings(ctx: BridgeContext): Promise<{
     visualImpact: import("@bridge-ds/core").VisualImpactMode;
     note: string;
 }>;
+/**
+ * One count of components everywhere: the component folders (snapshot.json and llms.txt count the same), then what the
+ * other numbers are: layout helpers have no Figma component, and in Figma popups and items are sets of their own.
+ */
+export declare function coverageLine(s: {
+    inFigma: number;
+    drafted: number;
+    layout: number;
+    total: number;
+}, figmaSets: number): string;
 /** Which components are in Figma (Studio's "In Figma" column), and whether code images exist for the fidelity check. */
 export declare function figmaCoverage(ctx: BridgeContext, a?: {
     component?: string | undefined;

package/dist/suggestions.d.ts

@@ -9,7 +9,9 @@ export declare const SUGGEST_RIGHTS = "Issues: read and write (Contents: read is
  */
 export declare function changesFor(ctx: BridgeContext, explicit?: ChangesMode | undefined): Promise<ChangesMode>;
 /** What to do next once a suggestion is filed. The wording matches the issue's "How to apply". */
-export declare const appliedNext: (n: number) => string;
+export declare const appliedNext: (n: number, ctx?: {
+    surface: "mcp" | "cli";
+}) => string;
 /** Why nothing was filed: no GitHub repo, or no token that can write issues. */
 export declare function noSuggestionAccess(ctx: BridgeContext, gh: GitHubClient | null): string;
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bridge-ds/mcp",
-  "version": "0.8.4",
+  "version": "0.9.0",
   "type": "module",
   "description": "Bridge MCP server: lets Claude (Claude Code, Claude Desktop or any MCP client) read, check and propose changes to a DTCG design system repo through pull requests.",
   "license": "MIT",
@@ -51,11 +51,12 @@
     "typecheck": "tsc -p tsconfig.json --noEmit",
     "test": "npm run build && vitest run --config vitest.config.ts",
     "start": "node dist/index.js",
+    "readme:tools": "BRIDGE_UPDATE_README=1 vitest run --config vitest.config.ts packages/mcp/test/readme.test.ts",
     "build:package": "node ../../scripts/build-packages.mjs mcp"
   },
   "dependencies": {
-    "@bridge-ds/core": "^0.17.0",
-    "@bridge-ds/visual": "^0.3.11",
+    "@bridge-ds/core": "^0.19.0",
+    "@bridge-ds/visual": "^0.3.13",
     "@modelcontextprotocol/sdk": "1.31.0",
     "typescript": "5.9.3",
     "zod": "3.25.76"