@rettangoli/vt 0.0.1

package/README.md

@@ -0,0 +1,3 @@
+
+# Rettangoli Visual Testing
+

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@rettangoli/vt",
+  "version": "0.0.1",
+  "description": "Rettangoli Visual Testing",
+  "type": "module",
+  "main": "./src/index.js",
+  "exports": {
+    ".": "./src/index.js",
+    "./cli": "./src/cli/index.js"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "dependencies": {
+    "commander": "^13.1.0",
+    "js-yaml": "^4.1.0",
+    "liquidjs": "^10.21.0",
+    "looks-same": "^9.0.0",
+    "playwright": "^1.52.0",
+    "sharp": "^0.33.0",
+    "shiki": "^3.3.0"
+  }
+}

package/src/cli/accept.js

@@ -0,0 +1,75 @@
+import { existsSync, readdirSync, statSync } from 'node:fs';
+import { rm, cp, mkdir } from 'node:fs/promises';
+import { join, dirname } from 'node:path';
+
+/**
+ * Recursively copy only WebP files from source to destination
+ */
+async function copyWebpFiles(sourceDir, destDir) {
+  if (!existsSync(sourceDir)) {
+    return;
+  }
+
+  const items = readdirSync(sourceDir);
+
+  for (const item of items) {
+    const sourcePath = join(sourceDir, item);
+    const destPath = join(destDir, item);
+
+    if (statSync(sourcePath).isDirectory()) {
+      // Recursively copy subdirectories
+      await copyWebpFiles(sourcePath, destPath);
+    } else if (item.endsWith('.webp')) {
+      // Copy WebP files only
+      await mkdir(dirname(destPath), { recursive: true });
+      await cp(sourcePath, destPath);
+      console.log(`Copied: ${sourcePath} -> ${destPath}`);
+    }
+  }
+}
+
+/**
+ * Accepts candidate screenshots as the new reference by removing the existing reference
+ * directory and copying the candidate directory to reference.
+ */
+async function acceptReference(options = {}) {
+  const {
+    vizPath = "./viz",
+  } = options;
+
+  const referenceDir = join(vizPath, "reference");
+  const siteOutputPath = join(".rettangoli", "vt", "_site");
+  const candidateDir = join(siteOutputPath, "candidate");
+
+  console.log('Accepting candidate as new reference...');
+
+  // Check if candidate directory exists
+  if (!existsSync(candidateDir)) {
+    console.error('Error: Candidate directory does not exist!');
+    process.exit(1);
+  }
+
+  try {
+    // Remove reference directory if it exists
+    if (existsSync(referenceDir)) {
+      console.log('Removing existing reference directory...');
+      await rm(referenceDir, { recursive: true, force: true });
+    }
+
+    // Wait for 100ms to ensure the directory is removed
+    await new Promise((resolve) => {
+      setTimeout(resolve, 100);
+    })
+    
+    // Copy only WebP files from candidate to reference
+    console.log('Copying WebP files from candidate to reference...');
+    await copyWebpFiles(candidateDir, referenceDir);
+
+    console.log('Done! New reference accepted.');
+  } catch (error) {
+    console.error('Error:', error.message);
+    process.exit(1);
+  }
+}
+
+export default acceptReference;

package/src/cli/generate.js

@@ -0,0 +1,104 @@
+import { cp, rm } from "node:fs/promises";
+import { join } from "node:path";
+import { existsSync } from "node:fs";
+import {
+  generateHtml,
+  startWebServer,
+  takeScreenshots,
+  generateOverview,
+  readYaml,
+} from "../common.js";
+
+const libraryTemplatesPath = new URL('./templates', import.meta.url).pathname;
+const libraryStaticPath = new URL('./static', import.meta.url).pathname;
+
+
+/**
+ * Main function that orchestrates the entire process
+ */
+async function main(options) {
+  const {
+    skipScreenshots = false,
+    vizPath = "./vt",
+    screenshotWaitTime = 0,
+    port = 3001
+  } = options;
+
+  const specsPath = join(vizPath, "specs");
+  const mainConfigPath = "rettangoli.config.yaml";
+  const siteOutputPath = join(".rettangoli", "vt", "_site");
+  const candidatePath = join(siteOutputPath, "candidate");
+  
+  // Read VT config from main rettangoli.config.yaml
+  let configData = {};
+  try {
+    const mainConfig = await readYaml(mainConfigPath);
+    configData = mainConfig.vt || {};
+  } catch (error) {
+    console.log("Main config file not found, using defaults");
+  }
+
+  // Clear candidate directory
+  await rm(candidatePath, { recursive: true, force: true });
+  await new Promise((resolve) => setTimeout(resolve, 100));
+
+  // Copy static files from library to site directory
+  await cp(libraryStaticPath, siteOutputPath, { recursive: true });
+  
+  // Copy user's static files if they exist
+  const userStaticPath = join(vizPath, "static");
+  if (existsSync(userStaticPath)) {
+    await cp(userStaticPath, siteOutputPath, { recursive: true });
+  }
+
+  // Check for local templates first, fallback to library templates
+  const localTemplatesPath = join(vizPath, "templates");
+  const defaultTemplatePath = existsSync(join(localTemplatesPath, "default.html"))
+    ? join(localTemplatesPath, "default.html")
+    : join(libraryTemplatesPath, "default.html");
+  
+  const indexTemplatePath = existsSync(join(localTemplatesPath, "index.html"))
+    ? join(localTemplatesPath, "index.html")
+    : join(libraryTemplatesPath, "index.html");
+
+  // Generate HTML files
+  const generatedFiles = await generateHtml(
+    specsPath,
+    defaultTemplatePath,
+    candidatePath
+  );
+
+  // Generate overview page with all files
+  generateOverview(
+    generatedFiles,
+    indexTemplatePath,
+    join(siteOutputPath, "index.html"),
+    configData
+  );
+
+  if (!skipScreenshots) {
+    // Start web server from site output path to serve both /public and /candidate
+    const server = startWebServer(
+      siteOutputPath,
+      vizPath,
+      port
+    );
+    try {
+      // Take screenshots with specified concurrency
+      await takeScreenshots(
+        generatedFiles,
+        `http://localhost:${port}`,
+        candidatePath,
+        24,
+        screenshotWaitTime
+      );
+    } finally {
+      // Stop server
+      server.stop();
+      console.log("Server stopped");
+    }
+  }
+
+}
+
+export default main;

package/src/cli/index.js

@@ -0,0 +1,9 @@
+import generate from './generate.js';
+import report from './report.js';
+import accept from './accept.js';
+
+export {
+  generate,
+  report,
+  accept,
+}

package/src/cli/report.js

@@ -0,0 +1,214 @@
+import fs from "fs";
+import path from "path";
+import looksSame from "looks-same";
+import sharp from "sharp";
+import { Liquid } from "liquidjs";
+import { cp } from "node:fs/promises";
+
+const libraryTemplatesPath = new URL('./templates', import.meta.url).pathname;
+
+// Initialize Liquid engine
+const engine = new Liquid();
+
+// Add custom filter to convert string to lowercase and replace spaces with hyphens
+engine.registerFilter("slug", (value) => {
+  if (typeof value !== "string") return "";
+  return value.toLowerCase().replace(/\s+/g, "-");
+});
+
+// Recursively get all files in a directory
+function getAllFiles(dir, fileList = []) {
+  const files = fs.readdirSync(dir);
+
+  files.forEach((file) => {
+    const filePath = path.join(dir, file);
+    if (fs.statSync(filePath).isDirectory()) {
+      fileList = getAllFiles(filePath, fileList);
+    } else {
+      fileList.push(filePath);
+    }
+  });
+
+  return fileList;
+}
+
+async function compareImages(artifactPath, goldPath) {
+  try {
+    const {equal, diffBounds, diffClusters} = await looksSame(artifactPath, goldPath, {
+      strict: true,
+      ignoreAntialiasing: true,
+      ignoreCaret: true,
+      shouldCluster: true,
+      clustersSize: 10
+    });
+
+    return {
+      equal,
+      error: false,
+      diffBounds,
+      diffClusters
+    };
+  } catch (error) {
+    console.error("Error comparing images:", error);
+    return { 
+      equal: false,
+      error: true,
+      diffBounds: null,
+      diffClusters: null
+    };
+  }
+}
+
+async function generateReport({ results, templatePath, outputPath }) {
+  try {
+    // Read the template file
+    const templateContent = fs.readFileSync(templatePath, "utf8");
+
+    // Render the template with the results data
+    const renderedHtml = await engine.parseAndRender(templateContent, {
+      files: results,
+    });
+
+    // Write the rendered HTML to the output file
+    fs.writeFileSync(outputPath, renderedHtml);
+
+    console.log(`Report generated successfully at ${outputPath}`);
+  } catch (error) {
+    console.error("Error generating report:", error);
+  }
+}
+
+async function main(options = {}) {
+  const { vizPath = "./viz" } = options;
+
+  const siteOutputPath = path.join(".rettangoli", "vt", "_site");
+  const candidateDir = path.join(siteOutputPath, "candidate");
+  const originalReferenceDir = path.join(vizPath, "reference");
+  const siteReferenceDir = path.join(siteOutputPath, "reference");
+  const templatePath = path.join(libraryTemplatesPath, "report.html");
+  const outputPath = path.join(siteOutputPath, "report.html");
+
+  if (!fs.existsSync(originalReferenceDir)) {
+    console.log("Reference directory does not exist, creating it...");
+    fs.mkdirSync(originalReferenceDir, { recursive: true });
+  }
+
+  // Copy reference directory to _site for web access
+  if (fs.existsSync(originalReferenceDir)) {
+    console.log("Copying reference directory to _site...");
+    await cp(originalReferenceDir, siteReferenceDir, { recursive: true });
+  }
+
+  try {
+    // Get all WebP files recursively (only compare screenshots, not HTML)
+    const candidateFiles = getAllFiles(candidateDir).filter(file => file.endsWith('.webp'));
+    const referenceFiles = getAllFiles(originalReferenceDir).filter(file => file.endsWith('.webp'));
+
+    console.log("Candidate Screenshots:", candidateFiles.length);
+    console.log("Reference Screenshots:", referenceFiles.length);
+
+    const results = [];
+
+    // Get relative paths for comparison
+    const candidateRelativePaths = candidateFiles.map((file) =>
+      path.relative(candidateDir, file)
+    );
+    const referenceRelativePaths = referenceFiles.map((file) =>
+      path.relative(originalReferenceDir, file)
+    );
+
+    // Get all unique paths from both directories
+    const allPaths = [
+      ...new Set([...candidateRelativePaths, ...referenceRelativePaths]),
+    ];
+
+    for (const relativePath of allPaths) {
+      const candidatePath = path.join(candidateDir, relativePath);
+      const referencePath = path.join(originalReferenceDir, relativePath);
+      const siteReferencePath = path.join(siteReferenceDir, relativePath);
+
+      const candidateExists = fs.existsSync(candidatePath);
+      const referenceExists = fs.existsSync(referencePath);
+
+      // Skip if neither file exists (shouldn't happen, but just in case)
+      if (!candidateExists && !referenceExists) continue;
+
+      let equal = true;
+      let error = false;
+      let diffBounds = null;
+      let diffClusters = null;
+
+      // Compare images if both exist
+      if (candidateExists && referenceExists) {
+        const comparison = await compareImages(candidatePath, referencePath);
+        equal = comparison.equal;
+        error = comparison.error;
+        diffBounds = comparison.diffBounds;
+        diffClusters = comparison.diffClusters;
+      } else {
+        equal = false; // If one file is missing, they're not equal
+      }
+
+      if (!error) {
+        results.push({
+          candidatePath: candidateExists ? candidatePath : null,
+          referencePath: referenceExists ? siteReferencePath : null, // Use site reference path for HTML report
+          path: relativePath,
+          equal: candidateExists && referenceExists ? equal : false,
+          diffBounds,
+          diffClusters,
+          onlyInCandidate: candidateExists && !referenceExists,
+          onlyInReference: !candidateExists && referenceExists,
+        });
+      }
+    }
+
+    const mismatchingItems = results
+      .filter(
+        (result) =>
+          !result.equal || result.onlyInCandidate || result.onlyInReference
+      )
+      .map((result) => {
+        return {
+          candidatePath: result.candidatePath
+            ? path.relative(siteOutputPath, result.candidatePath)
+            : null,
+          referencePath: result.referencePath
+            ? path.relative(siteOutputPath, result.referencePath)
+            : null,
+          equal: result.equal,
+          diffBounds: result.diffBounds,
+          diffClusters: result.diffClusters,
+          onlyInCandidate: result.onlyInCandidate,
+          onlyInReference: result.onlyInReference,
+        };
+      });
+    console.log("Mismatching Items (JSON):");
+    mismatchingItems.forEach(item => {
+      const logData = {
+        candidatePath: item.candidatePath,
+        referencePath: item.referencePath,
+        equal: item.equal,
+        diffBounds: item.diffBounds,
+        diffClusters: item.diffClusters
+      };
+      console.log(JSON.stringify(logData, null, 2));
+    });
+    
+    // Summary at the end
+    console.log(`\nSummary:`);
+    console.log(`Total images: ${results.length}`);
+    console.log(`Mismatched images: ${mismatchingItems.length}`);
+    
+    // Generate HTML report
+    await generateReport({
+      results: mismatchingItems,
+      templatePath,
+      outputPath,
+    });
+  } catch (error) {
+    console.error("Error reading directories:", error);
+  }
+}
+
+export default main;

package/src/cli/static/public/theme.css

@@ -0,0 +1,155 @@
+html {
+  height: 100%;
+  margin: 0;
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
+
+:root {
+  --width-stretch: 100%;
+}
+
+/* Override in supported browsers */
+@supports (width: -webkit-fill-available) {
+  :root {
+    --width-stretch: -webkit-fill-available;
+  }
+}
+@supports (width: -moz-available) {
+  :root {
+    --width-stretch: -moz-available;
+  }
+}
+
+/* Hide scrollbar for Chrome, Safari */
+html::-webkit-scrollbar {
+  display: none;
+}
+
+body::-webkit-scrollbar {
+  display: none;
+}
+
+body {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  height: 100%;
+  margin: 0;
+  font-family: Roboto, -apple-system, "Helvetica Neue", sans-serif;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--background);
+  color: var(--foreground);
+}
+
+:root {
+  --spacing-xs: 2px;
+  --spacing-sm: 4px;
+  --spacing-md: 8px;
+  --spacing-lg: 16px;
+  --spacing-xl: 32px;
+
+  --border-radius-xs: 1px;
+  --border-radius-sm: 2px;
+  --border-radius-md: 4px;
+  --border-radius-lg: 8px;
+  --border-radius-xl: 16px;
+  --border-radius-f: 50%;
+
+  --border-width-xs: 1px;
+  --border-width-sm: 2px;
+  --border-width-md: 4px;
+  --border-width-lg: 8px;
+  --border-width-xl: 16px;
+
+  --shadow-sm: 0px 2px 6px rgba(0, 0, 0, .45), 0px 3px 5px rgba(0, 0, 0, .35), inset 0px .5px 0px rgba(255, 255, 255, .08), inset 0px 0px .5px rgba(255, 255, 255, .35);
+  --shadow-md: 0px 5px 12px rgba(0, 0, 0, .45), 0px 3px 5px rgba(0, 0, 0, .35), inset 0px .5px 0px rgba(255, 255, 255, .08), inset 0px 0px .5px rgba(255, 255, 255, .35);
+  --shadow-lg: 0px 10px 24px rgba(0, 0, 0, .45), 0px 3px 5px rgba(0, 0, 0, .35), inset 0px .5px 0px rgba(255, 255, 255, .08), inset 0px 0px .5px rgba(255, 255, 255, .35);
+
+  --h1-font-size: 3rem;
+  --h1-font-weight: 800;
+  --h1-line-height: 1;
+  --h1-letter-spacing: -.025em;
+
+  --h2-font-size: 1.875rem;
+  --h2-font-weight: 600;
+  --h2-line-height: 2.25rem;
+  --h2-letter-spacing: -.025em;
+
+  --h3-font-size: 1.5rem;
+  --h3-font-weight: 600;
+  --h3-line-height: 2rem;
+  --h3-letter-spacing: -.025em;
+
+  --h4-font-size: 1.25rem;
+  --h4-font-weight: 600;
+  --h4-line-height: 1.75rem;
+  --h4-letter-spacing: -.025em;
+
+  --lg-font-size: 1.125rem;
+  --lg-font-weight: 400;
+  --lg-line-height: 1.75rem;
+  --lg-letter-spacing: normal;
+
+  --md-font-size: 1rem;
+  --md-font-weight: normal;
+  --md-line-height: 1.5rem;
+  --md-letter-spacing: normal;
+
+  --sm-font-size: .875rem;
+  --sm-font-weight: 400;
+  --sm-line-height: 1;
+  --sm-letter-spacing: normal;
+
+  --xs-font-size: .75rem;
+  --xs-font-weight: normal;
+  --xs-line-height: 1;
+  --xs-letter-spacing: normal;
+
+
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.145 0 0);
+
+  /* surface color */
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+
+  /* item hovered color */
+  /* can also be used with opacity 0.5 for hover */
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+
+  /* item selected color */
+  --accent: oklch(0.95 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+
+  /* border/outline */
+  --border: oklch(0.922 0 0);
+
+  /* background of text inputs */
+  --input: oklch(0.922 0 0);
+
+  /* ring of text inputs */
+  --ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.305 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.371 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+}

package/src/cli/templates/default.html

@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="/public/theme.css">
+    <script>
+      window.rtglIcons = {
+        text: `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M4 12H20M4 8H20M4 16H12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
+        home: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M23.121,9.069,15.536,1.483a5.008,5.008,0,0,0-7.072,0L.879,9.069A2.978,2.978,0,0,0,0,11.19v9.817a3,3,0,0,0,3,3H21a3,3,0,0,0,3-3V11.19A2.978,2.978,0,0,0,23.121,9.069ZM15,22.007H9V18.073a3,3,0,0,1,6,0Zm7-1a1,1,0,0,1-1,1H17V18.073a5,5,0,0,0-10,0v3.934H3a1,1,0,0,1-1-1V11.19a1.008,1.008,0,0,1,.293-.707L9.878,2.9a3.008,3.008,0,0,1,4.244,0l7.585,7.586A1.008,1.008,0,0,1,22,11.19Z"/></svg>`,
+        threeDots: `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" d="M18 12H18.01M12 12H12.01M6 12H6.01M13 12C13 12.5523 12.5523 13 12 13C11.4477 13 11 12.5523 11 12C11 11.4477 11.4477 11 12 11C12.5523 11 13 11.4477 13 12ZM19 12C19 12.5523 18.5523 13 18 13C17.4477 13 17 12.5523 17 12C17 11.4477 17.4477 11 18 11C18.5523 11 19 11.4477 19 12ZM7 12C7 12.5523 6.55228 13 6 13C5.44772 13 5 12.5523 5 12C5 11.4477 5.44772 11 6 11C6.55228 11 7 11.4477 7 12Z"/></svg>`,
+        play: `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M16.6582 9.28663C18.098 10.1864 18.8178 10.6363 19.0647 11.2124C19.2803 11.7154 19.2803 12.2849 19.0647 12.788C18.8178 13.364 18.098 13.8139 16.6582 14.7138L9.896 18.9402C8.29805 19.9389 7.49907 20.4383 6.83973 20.3852C6.26501 20.339 5.73818 20.0471 5.3944 19.5842C5 19.0532 5 18.111 5 16.2266V7.77382C5 5.88944 5 4.94726 5.3944 4.41623C5.73818 3.95335 6.26501 3.66136 6.83973 3.61515C7.49907 3.56215 8.29805 4.06151 9.896 5.06023L16.6582 9.28663Z" fill="currentColor"/>
+  </svg>
+  `,
+        plus: `<svg viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0_911_81)">
+  <path d="M106.25 50H93.75V93.75H50V106.25H93.75V150H106.25V106.25H150V93.75H106.25V50Z" fill="currentColor"/>
+  <path d="M100 0C44.7691 0 0 44.7691 0 100C0 155.231 44.7691 200 100 200C155.231 200 200 155.231 200 100C200 44.7691 155.231 0 100 0ZM100 184.375C53.3996 184.375 15.625 146.6 15.625 100C15.625 53.3996 53.3996 15.625 100 15.625C146.6 15.625 184.375 53.3996 184.375 100C184.375 146.6 146.6 184.375 100 184.375Z" fill="currentColor"/>
+  </g>
+  <defs>
+  <clipPath id="clip0_911_81">
+  <rect width="200" height="200" fill="currentColor"/>
+  </clipPath>
+  </defs>
+  </svg>
+  `,
+        music: `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M9 19C9 20.1046 7.65685 21 6 21C4.34315 21 3 20.1046 3 19C3 17.8954 4.34315 17 6 17C7.65685 17 9 17.8954 9 19ZM9 19V5L21 3V17M21 17C21 18.1046 19.6569 19 18 19C16.3431 19 15 18.1046 15 17C15 15.8954 16.3431 15 18 15C19.6569 15 21 15.8954 21 17ZM9 9L21 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  </svg>`,
+        arrowLeft: `
+  <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M685.248 104.704a64 64 0 0 1 0 90.496L368.448 512l316.8 316.8a64 64 0 0 1-90.496 90.496L232.704 557.248a64 64 0 0 1 0-90.496l362.048-362.048a64 64 0 0 1 90.496 0z"/></svg>
+        `,
+        arrowRight: `
+        <svg viewBox="0 0 212 212" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M70.132 21.6763C67.648 24.161 66.2526 27.5306 66.2526 31.044C66.2526 34.5575 67.648 37.9271 70.132 40.4118L135.719 105.999L70.132 171.587C67.7184 174.086 66.3829 177.433 66.4131 180.907C66.4432 184.381 67.8367 187.704 70.2934 190.161C72.75 192.618 76.0733 194.011 79.5474 194.041C83.0215 194.071 86.3685 192.736 88.8675 190.322L163.823 115.367C166.307 112.882 167.702 109.513 167.702 105.999C167.702 102.486 166.307 99.1163 163.823 96.6315L88.8675 21.6763C86.3827 19.1923 83.0132 17.7969 79.4997 17.7969C75.9863 17.7969 72.6167 19.1923 70.132 21.6763Z" fill="currentColor"/>
+  </svg>
+        `,
+      }
+    </script>
+    <script src="https://cdn.jsdelivr.net/npm/rettangoli-ui@0.1.0-rc2/dist/rettangoli-iife-ui.min.js"></script>
+    <script src="/public/main.js"></script>
+  </head>
+  <body class="dark">
+    <div class="container">
+      {{ content }}
+    </div>
+  </body>
+</html>

package/src/cli/templates/index.html

@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="/public/theme.css">
+  <script>
+    window.addEventListener('DOMContentLoaded', () => {
+      if (location.hash) {
+        const el = document.getElementById(location.hash.substring(1));
+        if (el) {
+          el.scrollIntoView({ behavior: 'auto' });
+        }
+      }
+    });
+  </script>
+  <script src="https://cdn.jsdelivr.net/npm/rettangoli-ui@0.1.0-rc2/dist/rettangoli-iife-ui.min.js"></script>
+
+  <style>
+    pre {
+      width: 100%;
+      margin: 0px;
+    }
+
+    code {
+      white-space: pre-wrap;
+      display: block;
+      overflow: auto;
+      max-height: 400px;
+      word-break: break-all;
+      padding: 1rem;
+      width: -webkit-fill-available;
+    }
+
+    iframe {
+      height: 400px;
+      border: none;
+      border-color: var(--border);
+      border-width: 1px;
+      border-style: solid;
+      box-sizing: border-box;
+    }
+  </style>
+</head>
+
+<body class="dark">
+  <rtgl-view d="h" w="100vw" h="100vh">
+
+    <rtgl-view h="f" sm-hidden>
+      <rtgl-sidebar items="{{ sidebarItems }}">
+      </rtgl-sidebar>
+    </rtgl-view>
+
+    <rtgl-view id="content" h="100vh" w="f" flex="1" p="lg" g="lg" style="flex-wrap: nowrap;" sv ah="c">
+      <rtgl-view w="f" g="xl">
+        <rtgl-text s="h2">{{ currentSection.title }} </rtgl-text>
+        {% for file in files %}
+        <rtgl-view w="f">
+          <a style="display: contents; text-decoration: none; color: inherit;"
+            href="#{{ file.frontMatter.title | slug }}">
+            <rtgl-text id="{{ file.frontMatter.title | slug }}" s="h3">{{ file.frontMatter.title | default: file.path
+              }}</rtgl-text>
+          </a>
+
+          {% if file.frontMatter.description %}
+              <rtgl-text>{{ file.frontMatter.description }}</rtgl-text>
+          {% endif %}
+          
+          {% if file.frontMatter.specs %}
+            <ul>
+              {% for spec in file.frontMatter.specs %}
+                <li>{{ spec }}</li>
+              {% endfor %}
+            </ul>
+          {% endif %}
+
+          <rtgl-view w="f" mt="sm">
+            <rtgl-view w="f">
+              {{ file.contentShiki }}
+            </rtgl-view>
+            <rtgl-view w="f">
+              <iframe
+                loading="lazy"
+                width="100%"
+                src="/candidate/{{ file.path }}"
+                frameborder="0"
+                style="
+                      width: 1080px;
+                      height: 720px;
+                      transform: scale(0.66);
+                      transform-origin: top left;
+                      border: none;
+                "
+              ></iframe>
+            </rtgl-view>
+          </rtgl-view>
+        </rtgl-view>
+        {% endfor %}
+        <rtgl-view h="33vh"></rtgl-view>
+      </rtgl-view>
+    </rtgl-view>
+    <rtgl-view lg-hidden>
+      <rtgl-page-outline id="page-outline" target-id="content"></rtgl-page-outline>
+    </rtgl-view>
+  </rtgl-view>
+</body>
+
+</html>

package/src/cli/templates/report.html

@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="/public/theme.css">
+  <script src="https://cdn.jsdelivr.net/npm/rettangoli-ui@0.1.0-rc2/dist/rettangoli-iife-ui.min.js"></script>
+  <style>
+    code {
+      white-space: pre-wrap;
+      display: block;
+      padding: 10px;
+      overflow: auto;
+      max-height: 400px;
+      background-color: var(--color-surface-container-low);
+      width: 100%;
+      word-break: break-all;
+    }
+    iframe {
+      height: 400px;
+      border: none;
+    }
+  </style>
+</head>
+
+<body class="dark">
+  <rtgl-view d="h" w="100vw" h="100vh">
+    <rtgl-view h="f" w="200" bgc="su">
+      <rtgl-view p="sm">
+      </rtgl-view>
+    </rtgl-view>
+    <rtgl-view h="100vh" w="f" flex="1" bgc="su" p="lg" g="lg" style="flex-wrap: nowrap;" sv>
+      <rtgl-view>
+        <rtgl-text s="tl">Rettangoli Components</rtgl-text>
+        <rtgl-text s="sm">{{ files.length }} components failed</rtgl-text>
+      </rtgl-view>
+      {% for file in files %}
+      <rtgl-view w="f">
+        <rtgl-view w="f" d="h" g="lg">
+          <rtgl-view flex="1">
+            <rtgl-text>{{ file.referencePath }}</rtgl-text>
+            <img width="100%" src="/{{ file.referencePath }}">
+          </rtgl-view>
+          <rtgl-view flex="1">
+            <rtgl-text>{{ file.candidatePath }}</rtgl-text>
+            <img width="100%" src="/{{ file.candidatePath }}">
+          </rtgl-view>
+        </rtgl-view>
+      </rtgl-view>
+      {% endfor %}
+    </rtgl-view>
+  </rtgl-view>
+</body>
+
+</html>

package/src/cli.js

@@ -0,0 +1,36 @@
+import { Command } from 'commander';
+import generate from './generate.js';
+import accept from './accept.js'; 
+import report from './report.js';
+
+const program = new Command();
+
+program
+  .version('0.0.1')
+  .description('Rettangoli visualization CLI');
+
+program
+  .command('generate')
+  .description('Generate visualizations')
+  .option('--skip-screenshots', 'Skip screenshot generation')
+  .option('--screenshot-wait-time <time>', 'Wait time between screenshots', '0')
+  .option('--viz-path <path>', 'Path to the viz directory', './viz')
+  .action((options) => {
+    generate(options);
+  });
+
+program
+  .command('report')
+  .description('Create reports')
+  .action(() => {
+    report();
+  });
+
+program
+  .command('accept')
+  .description('Accept changes')
+  .action(() => {
+    accept();
+  });
+
+program.parse(process.argv);

package/src/common.js

@@ -0,0 +1,479 @@
+import {
+  readdirSync,
+  statSync,
+  readFileSync,
+  writeFileSync,
+  mkdirSync,
+  existsSync,
+} from "fs";
+import { join, dirname, resolve, extname } from "path";
+import { load as loadYaml } from "js-yaml";
+import { Liquid } from "liquidjs";
+import { chromium } from "playwright";
+import { codeToHtml } from "shiki";
+import sharp from "sharp";
+import path from "path";
+
+const convertToHtmlExtension = (filePath) => {
+  if (filePath.endsWith(".html")) {
+    return filePath;
+  }
+  // Remove existing extension and add .html
+  const baseName = filePath.replace(/\.[^/.]+$/, "");
+  return baseName + ".html";
+};
+
+// Initialize LiquidJS with output escaping disabled
+const engine = new Liquid();
+
+/**
+ * Read and parse a YAML file
+ */
+async function readYaml(filePath) {
+  try {
+    const fileContent = readFileSync(filePath, "utf8");
+    return loadYaml(fileContent);
+  } catch (error) {
+    console.error(`Error reading YAML file ${filePath}:`, error);
+    throw error;
+  }
+}
+
+// Add custom filter to convert string to lowercase and replace spaces with hyphens
+engine.registerFilter("slug", (value) => {
+  if (typeof value !== "string") return "";
+  return value.toLowerCase().replace(/\s+/g, "-");
+});
+
+/**
+ * Get all files from a directory recursively
+ */
+function getAllFiles(dirPath, arrayOfFiles = []) {
+  if (!existsSync(dirPath)) {
+    console.log(`Directory ${dirPath} does not exist, skipping...`);
+    return arrayOfFiles;
+  }
+
+  const files = readdirSync(dirPath);
+
+  files.forEach((file) => {
+    const filePath = join(dirPath, file);
+    if (statSync(filePath).isDirectory()) {
+      arrayOfFiles = getAllFiles(filePath, arrayOfFiles);
+    } else {
+      arrayOfFiles.push(filePath);
+    }
+  });
+
+  return arrayOfFiles;
+}
+
+/**
+ * Extract frontmatter from content
+ */
+function extractFrontMatter(content) {
+  const frontMatterRegex = /^---\s*\n([\s\S]*?)\n---\s*\n/;
+  const match = content.match(frontMatterRegex);
+
+  if (!match) {
+    return {
+      content: content,
+      frontMatter: null,
+    };
+  }
+
+  const frontMatter = match[1].trim();
+  const contentWithoutFrontMatter = content.slice(match[0].length).trim();
+
+  return {
+    content: contentWithoutFrontMatter,
+    frontMatter: frontMatter,
+  };
+}
+
+/**
+ * Ensure directory exists
+ */
+function ensureDirectoryExists(dirPath) {
+  const absolutePath = resolve(dirPath);
+  if (!statSync(absolutePath, { throwIfNoEntry: false })) {
+    mkdirSync(absolutePath, { recursive: true });
+  }
+}
+
+/**
+ * Main function to generate HTML files from specs
+ */
+async function generateHtml(specsDir, templatePath, outputDir) {
+  try {
+    // Initialize LiquidJS engine
+
+    // Read template
+    const templateContent = readFileSync(templatePath, "utf8");
+
+    // Ensure output directory exists
+    ensureDirectoryExists(outputDir);
+
+    // Get all files from specs directory
+    const allFiles = getAllFiles(specsDir);
+
+    // Process each file
+    const processedFiles = [];
+    for (const filePath of allFiles) {
+      const fileContent = readFileSync(filePath, "utf8");
+      const { content, frontMatter } = extractFrontMatter(fileContent);
+      const lang = filePath.includes(".yaml") ? "yaml" : "html";
+      const contentShiki = await codeToHtml(content, {
+        lang,
+        theme: "slack-dark",
+      });
+
+      // Parse YAML frontmatter
+      let frontMatterObj = null;
+      if (frontMatter) {
+        try {
+          frontMatterObj = loadYaml(frontMatter);
+        } catch (e) {
+          console.error(`Error parsing frontmatter in ${filePath}:`, e.message);
+        }
+      }
+
+      // Render template
+      let renderedContent = "";
+      try {
+        renderedContent = engine.parseAndRenderSync(templateContent, {
+          content: content,
+          frontMatter: frontMatterObj || {},
+        });
+      } catch (error) {
+        console.error(`Error rendering template for ${filePath}:`, error);
+        renderedContent = `<html><body><h1>Error rendering template</h1><p>${error.message}</p><pre>${content}</pre></body></html>`;
+      }
+
+      // Get relative path from specs directory
+      const relativePath = path.relative(specsDir, filePath);
+      
+      // Save file
+      const outputPath = join(outputDir, convertToHtmlExtension(relativePath));
+      ensureDirectoryExists(dirname(outputPath));
+      writeFileSync(outputPath, renderedContent, "utf8");
+      console.log(`Generated: ${outputPath}`);
+
+      processedFiles.push({
+        path: relativePath,
+        content,
+        contentShiki,
+        frontMatter: frontMatterObj,
+        fullContent: fileContent,
+        renderedContent,
+      });
+    }
+
+    console.log(`Successfully generated ${processedFiles.length} files`);
+    return processedFiles;
+  } catch (error) {
+    console.error("Error generating HTML:", error);
+    throw error;
+  }
+}
+
+/**
+ * Start a web server to serve static files
+ */
+function startWebServer(artifactsDir, staticDir, port) {
+  const server = Bun.serve({
+    port: port,
+    fetch(req) {
+      const url = new URL(req.url);
+      let path = url.pathname;
+
+      // Default to index.html for root path
+      if (path === "/") {
+        path = "/index.html";
+      }
+
+      // Remove leading slash for file path
+      const filePath = path.startsWith("/") ? path.slice(1) : path;
+
+      // Try to serve from artifacts directory first
+      const artifactsPath = join(artifactsDir, filePath);
+      if (existsSync(artifactsPath) && statSync(artifactsPath).isFile()) {
+        const fileContent = readFileSync(artifactsPath);
+        const contentType = getContentType(artifactsPath);
+        return new Response(fileContent, {
+          headers: { "Content-Type": contentType },
+        });
+      }
+
+      // Then try to serve from static directory
+      const staticPath = join(staticDir, filePath);
+      if (existsSync(staticPath) && statSync(staticPath).isFile()) {
+        const fileContent = readFileSync(staticPath);
+        const contentType = getContentType(staticPath);
+        return new Response(fileContent, {
+          headers: { "Content-Type": contentType },
+        });
+      }
+
+      // If not found in either directory, return 404
+      return new Response("Not Found", {
+        status: 404,
+        headers: { "Content-Type": "text/plain" },
+      });
+    },
+  });
+
+  console.log(`Server started at http://localhost:${port}`);
+  return server;
+}
+
+/**
+ * Get content type based on file extension
+ */
+function getContentType(filePath) {
+  const ext = extname(filePath).toLowerCase();
+  const contentTypes = {
+    ".html": "text/html",
+    ".css": "text/css",
+    ".js": "application/javascript",
+    ".json": "application/json",
+    ".png": "image/png",
+    ".jpg": "image/jpeg",
+    ".jpeg": "image/jpeg",
+    ".gif": "image/gif",
+    ".svg": "image/svg+xml",
+  };
+
+  return contentTypes[ext] || "application/octet-stream";
+}
+
+/**
+ * Take screenshots of all generated HTML files
+ */
+async function takeScreenshots(
+  generatedFiles,
+  serverUrl,
+  screenshotsDir,
+  concurrency = 8,
+  waitTime = 0
+) {
+  // Ensure screenshots directory exists
+  ensureDirectoryExists(screenshotsDir);
+
+  // Launch browser
+  console.log("Launching browser to take screenshots...");
+  const browser = await chromium.launch();
+
+  try {
+    // Process files in parallel with limited concurrency
+    const files = [...generatedFiles]; // Create a copy to work with
+    const total = files.length;
+    let completed = 0;
+
+    // Process files in batches based on concurrency
+    while (files.length > 0) {
+      const batch = files.splice(0, concurrency);
+      const batchPromises = batch.map(async (file) => {
+        // Create a new context and page for each file (for parallelism)
+        const context = await browser.newContext();
+        const page = await context.newPage();
+
+        try {
+          // Construct URL from file path (add /candidate prefix since server serves from parent)
+          const fileUrl = convertToHtmlExtension(
+            `${serverUrl}/candidate/${file.path.replace(/\\/g, '/')}`
+          );
+          console.log(`Taking screenshot of ${fileUrl}`);
+
+          // Navigate to the page
+          await page.goto(fileUrl, { waitUntil: "networkidle" });
+
+          // Create screenshot output path (remove extension and add .webp)
+          const baseName = file.path.replace(/\.[^/.]+$/, "");
+          const tempPngPath = join(screenshotsDir, `${baseName}.png`);
+          const screenshotPath = join(screenshotsDir, `${baseName}.webp`);
+          ensureDirectoryExists(dirname(screenshotPath));
+
+          if (waitTime > 0) {
+            await new Promise((resolve) => setTimeout(resolve, waitTime));
+          }
+
+          // Take screenshot as PNG first (Playwright doesn't support WebP)
+          await page.screenshot({ 
+            path: tempPngPath, 
+            fullPage: true
+          });
+
+          // Convert PNG to WebP using Sharp
+          await sharp(tempPngPath)
+            .webp({ quality: 85 })
+            .toFile(screenshotPath);
+
+          // Remove temporary PNG file
+          if (existsSync(tempPngPath)) {
+            await import('fs').then(fs => fs.promises.unlink(tempPngPath));
+          }
+
+          // example instructions:
+          for (const instruction of file.frontMatter?.instructions || []) {
+            const [command, ...args] = instruction.split(" ");
+            switch (command) {
+              case "lc":
+                const x = Number(args[0]);
+                const y = Number(args[1]);
+                await page.mouse.click(x, y, {
+                  button: "left",
+                });
+                break;
+              case "ss":
+                const baseName = file.path.replace(/\.[^/.]+$/, "");
+                const tempAdditionalPngPath = join(
+                  screenshotsDir,
+                  `${baseName}-${args[0]}.png`
+                );
+                const additonalScreenshotPath = join(
+                  screenshotsDir,
+                  `${baseName}-${args[0]}.webp`
+                );
+                console.log(`Taking additional screenshot at ${additonalScreenshotPath}`);
+                
+                // Take screenshot as PNG first
+                await page.screenshot({
+                  path: tempAdditionalPngPath,
+                  fullPage: true
+                });
+
+                // Convert PNG to WebP using Sharp
+                await sharp(tempAdditionalPngPath)
+                  .webp({ quality: 85 })
+                  .toFile(additonalScreenshotPath);
+
+                // Remove temporary PNG file
+                if (existsSync(tempAdditionalPngPath)) {
+                  await import('fs').then(fs => fs.promises.unlink(tempAdditionalPngPath));
+                }
+
+                console.log(
+                  `Additional screenshot taken at ${additonalScreenshotPath}`
+                );
+                break;
+            }
+          }
+
+          completed++;
+          console.log(
+            `Screenshot saved: ${screenshotPath} (${completed}/${total})`
+          );
+        } catch (error) {
+          console.error(`Error taking screenshot for ${file.path}:`, error);
+        } finally {
+          // Close the context when done
+          await context.close();
+        }
+      });
+
+      // Wait for current batch to complete before processing next batch
+      await Promise.all(batchPromises);
+    }
+  } catch (error) {
+    console.error("Error taking screenshots:", error);
+  } finally {
+    // Close browser
+    await browser.close();
+    console.log("Browser closed");
+  }
+}
+
+/**
+ * Generate overview HTML from template and data
+ */
+function generateOverview(data, templatePath, outputPath, configData) {
+  try {
+    // Read template
+    const templateContent = readFileSync(templatePath, "utf8");
+
+    // Ensure output directory exists
+    ensureDirectoryExists(dirname(outputPath));
+
+    // Process sections to extract all items (flat or grouped)
+    const allSections = [];
+    configData.sections.forEach((section) => {
+      if (section.type === "groupLabel" && section.items) {
+        // It's a group, add all items from the group
+        section.items.forEach((item) => {
+          allSections.push(item);
+        });
+      } else if (section.files) {
+        // It's a flat section
+        allSections.push(section);
+      }
+    });
+
+    // Transform sections for sidebar (maintaining group structure)
+    const sidebarItems = configData.sections.map((section) => {
+      if (section.type === "groupLabel") {
+        return {
+          title: section.title,
+          type: "groupLabel",
+          items: section.items.map((item) => ({
+            id: item.title.toLowerCase().replace(/\s+/g, "-"),
+            title: item.title,
+            href: `/${item.title.toLowerCase().replace(/\s+/g, "-")}.html`,
+          })),
+        };
+      } else {
+        // Flat item (backwards compatibility)
+        return {
+          id: section.title.toLowerCase().replace(/\s+/g, "-"),
+          title: section.title,
+          href: `/${section.title.toLowerCase().replace(/\s+/g, "-")}.html`,
+        };
+      }
+    });
+
+    // Generate pages for each section
+    allSections.forEach((section) => {
+      // Render template with data
+      let renderedContent = "";
+      try {
+        renderedContent = engine.parseAndRenderSync(templateContent, {
+          ...configData,
+          files: data.filter((file) => {
+            const filePath = path.normalize(file.path);
+            const sectionPath = path.normalize(section.files);
+            // Check if file is in the folder or any subfolder
+            const fileDir = path.dirname(filePath);
+            return fileDir === sectionPath || fileDir.startsWith(sectionPath + path.sep);
+          }),
+          currentSection: section,
+          sidebarItems: encodeURIComponent(JSON.stringify(sidebarItems)),
+        });
+      } catch (error) {
+        console.error(`Error rendering overview template:`, error);
+        renderedContent = `<html><body><h1>Error rendering overview template</h1><p>${error.message}</p></body></html>`;
+      }
+
+      const finalOutputPath = outputPath.replace(
+        "index.html",
+        `${section.title.toLowerCase().replace(/\s+/g, "-")}.html`
+      );
+      // Save file
+      writeFileSync(finalOutputPath, renderedContent, "utf8");
+      console.log(`Generated overview: ${finalOutputPath}`);
+    });
+  } catch (error) {
+    console.error("Error generating overview HTML:", error);
+    throw error;
+  }
+}
+
+export {
+  generateHtml,
+  getAllFiles,
+  extractFrontMatter,
+  ensureDirectoryExists,
+  startWebServer,
+  takeScreenshots,
+  generateOverview,
+  readYaml,
+};