canicode 0.8.5 → 0.8.7

package/README.md

@@ -108,7 +108,7 @@ Or with a Figma API token (no Figma MCP needed):
 claude mcp add canicode -e FIGMA_TOKEN=figd_xxxxxxxxxxxxx -- npx -y -p canicode canicode-mcp
 ```
 
-For Cursor / Claude Desktop config, see [`docs/CUSTOMIZATION.md`](docs/CUSTOMIZATION.md).
+For Cursor / Claude Desktop config, see [`docs/REFERENCE.md`](docs/REFERENCE.md).
 
 **Figma MCP Rate Limits**
 
@@ -160,7 +160,7 @@ Posts analysis as a PR comment. Fails if score is below threshold. See [**canico
 
 > Ask any LLM *"Write a canicode custom rule that checks X"* — it can generate the JSON for you.
 
-See [`docs/CUSTOMIZATION.md`](docs/CUSTOMIZATION.md) for the full guide, examples, and all available options.
+See [`docs/REFERENCE.md`](docs/REFERENCE.md) for the full guide, examples, and all available options.
 
 ---
 

package/dist/cli/index.js

@@ -72,12 +72,26 @@ function resizePng(png, targetWidth, targetHeight) {
 function compareScreenshots(path1, path2, diffOutputPath) {
   const raw1 = PNG.sync.read(readFileSync(path1));
   const raw2 = PNG.sync.read(readFileSync(path2));
-  const width = Math.max(raw1.width, raw2.width);
-  const height = Math.max(raw1.height, raw2.height);
-  const img1 = raw1.width !== width || raw1.height !== height ? resizePng(raw1, width, height) : raw1;
-  const img2 = raw2.width !== width || raw2.height !== height ? resizePng(raw2, width, height) : raw2;
+  if (raw1.width !== raw2.width || raw1.height !== raw2.height) {
+    const width2 = Math.max(raw1.width, raw2.width);
+    const height2 = Math.max(raw1.height, raw2.height);
+    const img1 = resizePng(raw1, width2, height2);
+    const img2 = resizePng(raw2, width2, height2);
+    const diff2 = new PNG({ width: width2, height: height2 });
+    pixelmatch(img1.data, img2.data, diff2.data, width2, height2, { threshold: 0.1 });
+    mkdirSync(dirname(diffOutputPath), { recursive: true });
+    writeFileSync(diffOutputPath, PNG.sync.write(diff2));
+    return {
+      similarity: 0,
+      diffPixels: width2 * height2,
+      totalPixels: width2 * height2,
+      width: width2,
+      height: height2
+    };
+  }
+  const { width, height } = raw1;
   const diff = new PNG({ width, height });
-  const diffPixels = pixelmatch(img1.data, img2.data, diff.data, width, height, {
+  const diffPixels = pixelmatch(raw1.data, raw2.data, diff.data, width, height, {
     threshold: 0.1
   });
   mkdirSync(dirname(diffOutputPath), { recursive: true });
@@ -1105,7 +1119,7 @@ async function loadFromApi(fileKey, nodeId, token) {
 }
 
 // package.json
-var version = "0.8.5";
+var version = "0.8.7";
 var AnalysisNodeTypeSchema = z.enum([
   "DOCUMENT",
   "CANVAS",
@@ -4267,7 +4281,7 @@ EXAMPLE
 USAGE
   canicode analyze <url> --custom-rules ./my-rules.json
 
-  Full guide: docs/CUSTOMIZATION.md
+  Full guide: docs/REFERENCE.md
   Examples:   examples/custom-rules.json
 
 TIP: Ask any LLM "Write a canicode custom rule that checks X" with the
@@ -4302,16 +4316,61 @@ EXAMPLE
 USAGE
   canicode analyze <url> --config ./my-config.json
 
-  Full guide: docs/CUSTOMIZATION.md
+  Full guide: docs/REFERENCE.md
   Examples:   examples/config.json
 `.trimStart());
 }
+function printDocsVisualCompare() {
+  console.log(`
+VISUAL COMPARE \u2014 Pixel-level comparison between Figma and AI-generated code
+
+USAGE
+  canicode visual-compare ./index.html --figma-url 'https://www.figma.com/design/ABC/File?node-id=1-234'
+
+OPTIONS
+  --figma-url <url>   Figma URL with node-id (required)
+  --token <token>     Figma API token (or FIGMA_TOKEN env var)
+  --output <dir>      Output directory (default: /tmp/canicode-visual-compare)
+  --width <px>        Viewport width override (default: match Figma screenshot)
+  --height <px>       Viewport height override (default: match Figma screenshot)
+
+OUTPUT FILES
+  /tmp/canicode-visual-compare/
+    figma.png         Figma screenshot (scale=2)
+    code.png          Playwright render of your HTML
+    diff.png          Pixel diff (red = different pixels)
+
+JSON OUTPUT (stdout)
+  {
+    "similarity": 87,        // 0-100%
+    "diffPixels": 1340,
+    "totalPixels": 102400,
+    "width": 800,
+    "height": 600,
+    "figmaScreenshot": "/tmp/.../figma.png",
+    "codeScreenshot": "/tmp/.../code.png",
+    "diff": "/tmp/.../diff.png"
+  }
+
+HOW IT WORKS
+  1. Fetches Figma screenshot via REST API (scale=2)
+  2. Reads screenshot dimensions
+  3. Renders your HTML with Playwright at the same viewport size
+  4. Compares pixel-by-pixel with pixelmatch (threshold: 0.1)
+  5. Returns similarity % and diff image
+
+REQUIREMENTS
+  npx playwright install chromium
+  Figma API token with read access
+`.trimStart());
+}
 var DOCS_TOPICS = {
   setup: printDocsSetup,
   install: printDocsSetup,
   // alias
   rules: printDocsRules,
-  config: printDocsConfig
+  config: printDocsConfig,
+  "visual-compare": printDocsVisualCompare
 };
 function handleDocs(topic) {
   if (!topic) {
@@ -4323,7 +4382,7 @@ function handleDocs(topic) {
     handler();
   } else {
     console.error(`Unknown docs topic: ${topic}`);
-    console.error(`Available topics: setup, rules, config`);
+    console.error(`Available topics: setup, rules, config, visual-compare`);
     process.exit(1);
   }
 }
@@ -5034,7 +5093,7 @@ cli.command("list-rules", "List all analysis rules with scores and severity").op
     process.exit(1);
   }
 });
-cli.command("docs [topic]", "Show documentation (topics: setup, rules, config)").action((topic) => {
+cli.command("docs [topic]", "Show documentation (topics: setup, rules, config, visual-compare)").action((topic) => {
   handleDocs(topic);
 });
 cli.help((sections) => {