npm - @viewscript/renderer - Versions diffs - 0.1.0-202605140639 - Mend

@viewscript/renderer 0.1.0-202605140639

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (89) hide show

package/dist/ast/types.d.ts +403 -0
package/dist/ast/types.js +33 -0
package/dist/compiler/chunk-splitter.d.ts +98 -0
package/dist/compiler/chunk-splitter.js +361 -0
package/dist/index.d.ts +55 -0
package/dist/index.js +17 -0
package/dist/rasterizer/__tests__/error-distribution.test.d.ts +7 -0
package/dist/rasterizer/__tests__/error-distribution.test.js +322 -0
package/dist/rasterizer/canvas-mapper.d.ts +280 -0
package/dist/rasterizer/canvas-mapper.js +414 -0
package/dist/rasterizer/error-distribution.d.ts +143 -0
package/dist/rasterizer/error-distribution.js +231 -0
package/dist/rasterizer/gradient-mapper.d.ts +223 -0
package/dist/rasterizer/gradient-mapper.js +352 -0
package/dist/rasterizer/topology-rounding.d.ts +151 -0
package/dist/rasterizer/topology-rounding.js +347 -0
package/dist/runtime/__tests__/event-backpressure.test.d.ts +10 -0
package/dist/runtime/__tests__/event-backpressure.test.js +190 -0
package/dist/runtime/event-backpressure.d.ts +393 -0
package/dist/runtime/event-backpressure.js +458 -0
package/dist/runtime/render-loop.d.ts +277 -0
package/dist/runtime/render-loop.js +435 -0
package/dist/runtime/wasm-resource-manager.d.ts +122 -0
package/dist/runtime/wasm-resource-manager.js +253 -0
package/dist/runtime/wgpu-renderer-adapter.d.ts +168 -0
package/dist/runtime/wgpu-renderer-adapter.js +230 -0
package/dist/semantic/__tests__/semantic-translator.test.d.ts +4 -0
package/dist/semantic/__tests__/semantic-translator.test.js +203 -0
package/dist/semantic/semantic-translator.d.ts +229 -0
package/dist/semantic/semantic-translator.js +398 -0
package/package.json +28 -0
package/playwright-report/data/0bafe4e0863f0e244bba68a838f73241f8f2efaa.md +226 -0
package/playwright-report/data/9281aca8abfb06c6cecb35d5ddd13d61f8c752d8.md +226 -0
package/playwright-report/index.html +90 -0
package/playwright.config.ts +160 -0
package/screenshot-chrome.png +0 -0
package/screenshots/visual-demo-verification.png +0 -0
package/screenshots/visual-demo.png +0 -0
package/src/ast/types.ts +473 -0
package/src/compiler/chunk-splitter.ts +534 -0
package/src/index.ts +62 -0
package/src/rasterizer/__tests__/error-distribution.test.ts +382 -0
package/src/rasterizer/canvas-mapper.ts +677 -0
package/src/rasterizer/error-distribution.ts +344 -0
package/src/rasterizer/gradient-mapper.ts +563 -0
package/src/rasterizer/topology-rounding.ts +499 -0
package/src/runtime/__tests__/event-backpressure.test.ts +254 -0
package/src/runtime/event-backpressure.ts +622 -0
package/src/runtime/render-loop.ts +660 -0
package/src/runtime/wasm-resource-manager.ts +349 -0
package/src/runtime/wgpu-renderer-adapter.ts +318 -0
package/src/semantic/__tests__/semantic-translator.test.ts +263 -0
package/src/semantic/semantic-translator.ts +637 -0
package/test-results/.last-run.json +4 -0
package/tests/e2e/async-race.spec.ts +612 -0
package/tests/e2e/bilayer-sync.spec.ts +405 -0
package/tests/e2e/failures/.gitkeep +0 -0
package/tests/e2e/fullstack.spec.ts +681 -0
package/tests/e2e/g1-continuity.spec.ts +703 -0
package/tests/e2e/golden/.gitkeep +0 -0
package/tests/e2e/golden/conic-color-wheel.raw +0 -0
package/tests/e2e/golden/conic-color-wheel.sha256 +1 -0
package/tests/e2e/golden/conic-rotated.raw +0 -0
package/tests/e2e/golden/conic-rotated.sha256 +1 -0
package/tests/e2e/golden/linear-45deg.raw +0 -0
package/tests/e2e/golden/linear-45deg.sha256 +1 -0
package/tests/e2e/golden/linear-horizontal.raw +0 -0
package/tests/e2e/golden/linear-horizontal.sha256 +1 -0
package/tests/e2e/golden/linear-multi-stop.raw +0 -0
package/tests/e2e/golden/linear-multi-stop.sha256 +1 -0
package/tests/e2e/golden/radial-circle-center.raw +0 -0
package/tests/e2e/golden/radial-circle-center.sha256 +1 -0
package/tests/e2e/golden/radial-offset.raw +0 -0
package/tests/e2e/golden/radial-offset.sha256 +1 -0
package/tests/e2e/golden/tile-mirror.raw +0 -0
package/tests/e2e/golden/tile-mirror.sha256 +1 -0
package/tests/e2e/golden/tile-repeat.raw +0 -0
package/tests/e2e/golden/tile-repeat.sha256 +1 -0
package/tests/e2e/gradient-animation.spec.ts +606 -0
package/tests/e2e/memory-stability.spec.ts +396 -0
package/tests/e2e/path-topology.spec.ts +674 -0
package/tests/e2e/performance-profile.spec.ts +501 -0
package/tests/e2e/screenshot.spec.ts +60 -0
package/tests/e2e/test-harness.html +1005 -0
package/tests/e2e/text-layout.spec.ts +451 -0
package/tests/e2e/visual-demo.html +340 -0
package/tests/e2e/visual-regression.spec.ts +335 -0
package/tsconfig.json +12 -0
package/vitest.config.ts +8 -0

package/tests/e2e/visual-demo.html ADDED Viewed

@@ -0,0 +1,340 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>ViewScript Visual Demo</title>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+    body {
+      width: 800px;
+      height: 600px;
+      overflow: hidden;
+      background: #1a1a2e;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    }
+    #vs-canvas {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 800px;
+      height: 600px;
+    }
+    #vs-dom-layer {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 800px;
+      height: 600px;
+      pointer-events: auto;
+    }
+    .vs-dom-element {
+      position: absolute;
+      pointer-events: auto;
+      will-change: transform;
+    }
+    #info-overlay {
+      position: absolute;
+      bottom: 10px;
+      left: 10px;
+      color: rgba(255, 255, 255, 0.7);
+      font-size: 12px;
+      font-family: monospace;
+      z-index: 1000;
+    }
+  </style>
+</head>
+<body>
+  <canvas id="vs-canvas" width="800" height="600"></canvas>
+  <div id="vs-dom-layer"></div>
+  <div id="info-overlay"></div>
+  <script type="module">
+    /**
+     * ViewScript Visual Demo
+     *
+     * Demonstrates the complete rendering pipeline:
+     * 1. IR (Intermediate Representation) construction
+     * 2. Constraint-based P-dimension positioning
+     * 3. T-vector driven animations
+     * 4. Canvas + DOM bilayer rendering
+     */
+    const canvas = document.getElementById('vs-canvas');
+    const ctx = canvas.getContext('2d');
+    const domLayer = document.getElementById('vs-dom-layer');
+    const infoOverlay = document.getElementById('info-overlay');
+    // ==========================================================================
+    // IR Construction (Simulating vsc CLI output)
+    // ==========================================================================
+    /**
+     * This IR represents what `vsc build` would produce.
+     * Structure matches the vsc-core IR schema.
+     */
+    const ir = {
+      schema_version: 1,
+      project: {
+        name: "visual-demo",
+        version: "0.1.0"
+      },
+      entities: [
+        // Title text
+        {
+          id: 1,
+          type: "text",
+          content: "ViewScript P-Dimension Demo",
+          bounds: { x: 50, y: 50, width: 400, height: 40 },
+          fill: "#ffffff",
+          font: { family: "sans-serif", size: 28, weight: "bold" }
+        },
+        // Main rectangle (constrained to center)
+        {
+          id: 2,
+          type: "rect",
+          bounds: { x: 300, y: 200, width: 200, height: 200 },
+          fill: "#6366f1",
+          interactive: true,
+          stroke: { color: "#818cf8", width: 2 }
+        },
+        // Satellite rectangles (constrained relative to main)
+        {
+          id: 3,
+          type: "rect",
+          bounds: { x: 150, y: 250, width: 80, height: 80 },
+          fill: "#22c55e",
+          interactive: true
+        },
+        {
+          id: 4,
+          type: "rect",
+          bounds: { x: 570, y: 250, width: 80, height: 80 },
+          fill: "#f59e0b",
+          interactive: true
+        },
+        // Constraint visualization lines
+        {
+          id: 5,
+          type: "line",
+          from: { x: 230, y: 290 },
+          to: { x: 300, y: 300 },
+          stroke: { color: "rgba(255, 255, 255, 0.3)", width: 2, dash: [5, 5] }
+        },
+        {
+          id: 6,
+          type: "line",
+          from: { x: 500, y: 300 },
+          to: { x: 570, y: 290 },
+          stroke: { color: "rgba(255, 255, 255, 0.3)", width: 2, dash: [5, 5] }
+        },
+        // Labels
+        {
+          id: 7,
+          type: "text",
+          content: "Entity #2",
+          bounds: { x: 350, y: 420, width: 100, height: 20 },
+          fill: "rgba(255, 255, 255, 0.6)",
+          font: { family: "monospace", size: 12 }
+        },
+        {
+          id: 8,
+          type: "text",
+          content: "Entity #3",
+          bounds: { x: 150, y: 350, width: 80, height: 20 },
+          fill: "rgba(255, 255, 255, 0.6)",
+          font: { family: "monospace", size: 12 }
+        },
+        {
+          id: 9,
+          type: "text",
+          content: "Entity #4",
+          bounds: { x: 570, y: 350, width: 80, height: 20 },
+          fill: "rgba(255, 255, 255, 0.6)",
+          font: { family: "monospace", size: 12 }
+        },
+        // Constraint info box
+        {
+          id: 10,
+          type: "rect",
+          bounds: { x: 50, y: 450, width: 700, height: 120 },
+          fill: "rgba(255, 255, 255, 0.05)",
+          stroke: { color: "rgba(255, 255, 255, 0.2)", width: 1 }
+        },
+        {
+          id: 11,
+          type: "text",
+          content: "Active Constraints (P-Dimension):",
+          bounds: { x: 70, y: 475, width: 300, height: 20 },
+          fill: "#a5b4fc",
+          font: { family: "monospace", size: 14 }
+        },
+        {
+          id: 12,
+          type: "text",
+          content: "E2.x = 300/1  |  E3.x = E2.x - 150/1  |  E4.x = E2.x + 270/1",
+          bounds: { x: 70, y: 500, width: 600, height: 16 },
+          fill: "rgba(255, 255, 255, 0.7)",
+          font: { family: "monospace", size: 13 }
+        },
+        {
+          id: 13,
+          type: "text",
+          content: "T-Vector State: hover=0, animation_t=0.00",
+          bounds: { x: 70, y: 530, width: 400, height: 16 },
+          fill: "rgba(255, 255, 255, 0.5)",
+          font: { family: "monospace", size: 12 }
+        }
+      ],
+      constraints: [
+        // E2 (main) positioned at center
+        { id: 1, target: 2, component: "x", relation: "eq", term: { type: "const", value: "300/1" } },
+        { id: 2, target: 2, component: "y", relation: "eq", term: { type: "const", value: "200/1" } },
+        // E3 positioned relative to E2
+        { id: 3, target: 3, component: "x", relation: "eq", term: { type: "linear", coefficient: "1/1", entity_id: 2, component: "x", offset: "-150/1" } },
+        // E4 positioned relative to E2
+        { id: 4, target: 4, component: "x", relation: "eq", term: { type: "linear", coefficient: "1/1", entity_id: 2, component: "x", offset: "270/1" } }
+      ],
+      containments: []
+    };
+    // ==========================================================================
+    // Rendering Pipeline
+    // ==========================================================================
+    function render() {
+      // Clear canvas
+      ctx.fillStyle = '#1a1a2e';
+      ctx.fillRect(0, 0, 800, 600);
+      // Render grid background
+      renderGrid();
+      // Render each entity
+      for (const entity of ir.entities) {
+        renderEntity(entity);
+      }
+      // Update info overlay
+      updateInfo();
+    }
+    function renderGrid() {
+      ctx.strokeStyle = 'rgba(255, 255, 255, 0.05)';
+      ctx.lineWidth = 1;
+      // Vertical lines
+      for (let x = 0; x <= 800; x += 50) {
+        ctx.beginPath();
+        ctx.moveTo(x, 0);
+        ctx.lineTo(x, 600);
+        ctx.stroke();
+      }
+      // Horizontal lines
+      for (let y = 0; y <= 600; y += 50) {
+        ctx.beginPath();
+        ctx.moveTo(0, y);
+        ctx.lineTo(800, y);
+        ctx.stroke();
+      }
+    }
+    function renderEntity(entity) {
+      const { type, bounds, fill, stroke, content, font } = entity;
+      switch (type) {
+        case 'rect':
+          // Fill
+          ctx.fillStyle = fill || '#ffffff';
+          ctx.fillRect(bounds.x, bounds.y, bounds.width, bounds.height);
+          // Stroke
+          if (stroke) {
+            ctx.strokeStyle = stroke.color;
+            ctx.lineWidth = stroke.width;
+            ctx.strokeRect(bounds.x, bounds.y, bounds.width, bounds.height);
+          }
+          break;
+        case 'text':
+          ctx.fillStyle = fill || '#ffffff';
+          const fontSize = font?.size || 16;
+          const fontFamily = font?.family || 'sans-serif';
+          const fontWeight = font?.weight || 'normal';
+          ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
+          ctx.fillText(content, bounds.x, bounds.y + fontSize);
+          break;
+        case 'line':
+          ctx.strokeStyle = entity.stroke?.color || '#ffffff';
+          ctx.lineWidth = entity.stroke?.width || 1;
+          if (entity.stroke?.dash) {
+            ctx.setLineDash(entity.stroke.dash);
+          }
+          ctx.beginPath();
+          ctx.moveTo(entity.from.x, entity.from.y);
+          ctx.lineTo(entity.to.x, entity.to.y);
+          ctx.stroke();
+          ctx.setLineDash([]);
+          break;
+      }
+    }
+    function updateInfo() {
+      const now = new Date().toISOString();
+      infoOverlay.textContent = `ViewScript Renderer | Entities: ${ir.entities.length} | Constraints: ${ir.constraints.length} | ${now}`;
+    }
+    // ==========================================================================
+    // Animation Loop (T-Vector driven)
+    // ==========================================================================
+    let animationT = 0;
+    let hoverState = 0;
+    function animate(timestamp) {
+      animationT = (timestamp / 1000) % 10; // 10-second cycle
+      // Update T-vector display
+      const tVectorText = ir.entities.find(e => e.id === 13);
+      if (tVectorText) {
+        tVectorText.content = `T-Vector State: hover=${hoverState}, animation_t=${animationT.toFixed(2)}`;
+      }
+      // Animate main rectangle color based on T
+      const mainRect = ir.entities.find(e => e.id === 2);
+      if (mainRect) {
+        const hue = (animationT / 10) * 360;
+        mainRect.fill = `hsl(${hue}, 70%, 60%)`;
+      }
+      // Render
+      render();
+      requestAnimationFrame(animate);
+    }
+    // ==========================================================================
+    // Initialize
+    // ==========================================================================
+    // Initial render
+    render();
+    // Start animation
+    requestAnimationFrame(animate);
+    // Signal ready for screenshot
+    window.__VS_DEMO_READY__ = true;
+    console.log('[ViewScript] Visual Demo initialized');
+    console.log('[ViewScript] IR entities:', ir.entities.length);
+    console.log('[ViewScript] Constraints:', ir.constraints.length);
+  </script>
+</body>
+</html>

package/tests/e2e/visual-regression.spec.ts ADDED Viewed

@@ -0,0 +1,335 @@
+/**
+ * Deterministic Visual Regression Tests
+ *
+ * This module ensures bit-perfect reproducibility of Canvas rendering
+ * by forcing the GPU renderer into CPU-only software rendering mode.
+ *
+ * ## The Problem: GPU Non-Determinism
+ *
+ * Different GPUs (NVIDIA vs AMD vs Intel) produce subtly different
+ * anti-aliasing patterns. Even the same GPU can produce different
+ * results across driver versions. This is unacceptable for a
+ * mathematically rigorous GUI framework.
+ *
+ * ## Solution: Software Rendering + Hash Comparison
+ *
+ * 1. Force wgpu renderer to use CPU rasterizer (no GPU)
+ * 2. Disable subpixel text positioning
+ * 3. Use fixed-width fonts for text tests
+ * 4. Compare output against golden snapshots via SHA-256 hash
+ *
+ * ## Test Artifact Storage
+ *
+ * Golden snapshots are stored in:
+ *   tests/e2e/golden/<test-name>-<platform>.png
+ *
+ * Failed diffs are output to:
+ *   tests/e2e/failures/<test-name>-diff.png
+ */
+import { test, expect, type Page } from '@playwright/test';
+import * as crypto from 'crypto';
+import * as fs from 'fs';
+import * as path from 'path';
+import { fileURLToPath } from 'url';
+// =============================================================================
+// Test Configuration
+// =============================================================================
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const GOLDEN_DIR = path.join(__dirname, 'golden');
+const FAILURE_DIR = path.join(__dirname, 'failures');
+/**
+ * GPU renderer initialization options for deterministic rendering.
+ */
+const WGPU_DETERMINISTIC_CONFIG = {
+  // Force CPU-only rendering (no WebGL)
+  disableWebGL: true,
+  // Use software rasterizer
+  preferLowPowerToHighPerformance: false,
+  // Disable subpixel antialiasing (font-dependent)
+  useSubpixelText: false,
+  // Fixed DPI for consistent sizing
+  devicePixelRatio: 1.0,
+};
+// =============================================================================
+// Test Fixtures
+// =============================================================================
+test.describe('Visual Regression: Bit-Perfect Rendering', () => {
+  test.beforeAll(async () => {
+    // Ensure directories exist
+    if (!fs.existsSync(GOLDEN_DIR)) {
+      fs.mkdirSync(GOLDEN_DIR, { recursive: true });
+    }
+    if (!fs.existsSync(FAILURE_DIR)) {
+      fs.mkdirSync(FAILURE_DIR, { recursive: true });
+    }
+  });
+  /**
+   * Test: Simple Rectangle Rendering
+   *
+   * Constraint Graph (IR):
+   *   Entity #1: rect at (10, 10) size (100, 50), fill: #FF0000
+   *
+   * Expected: Red rectangle, bit-perfect match with golden snapshot.
+   */
+  test('renders simple rectangle with bit-perfect hash match', async ({ page }) => {
+    // Setup: Load VS renderer in deterministic mode
+    await setupDeterministicRenderer(page);
+    // Act: Render a simple constraint graph
+    const pixelBuffer = await renderConstraintGraph(page, {
+      entities: [
+        {
+          id: 1,
+          type: 'rect',
+          bounds: { x: 10, y: 10, width: 100, height: 50 },
+          fill: '#FF0000',
+        },
+      ],
+      constraints: [],
+    });
+    // Assert: Hash match
+    const hash = computeHash(pixelBuffer);
+    const goldenHash = loadGoldenHash('simple-rectangle');
+    if (goldenHash === null) {
+      // First run: save as golden
+      saveGolden('simple-rectangle', pixelBuffer, hash);
+      console.log(`[GOLDEN] Saved new golden snapshot: simple-rectangle (${hash})`);
+    } else {
+      expect(hash).toBe(goldenHash);
+    }
+  });
+  /**
+   * Test: Adjacent Rectangles (Topology Preservation)
+   *
+   * This tests the core topology-preserving rounding:
+   * Three adjacent rects of 33.333...px width in 100px container.
+   *
+   * Expected: No gaps, no overlaps, bit-perfect.
+   */
+  test('renders adjacent rectangles without subpixel gaps', async ({ page }) => {
+    await setupDeterministicRenderer(page);
+    const pixelBuffer = await renderConstraintGraph(page, {
+      entities: [
+        // Container
+        { id: 0, type: 'rect', bounds: { x: 0, y: 0, width: 100, height: 30 }, fill: '#000000' },
+        // Three children with irrational widths
+        { id: 1, type: 'rect', bounds: { x: 0, y: 0, width: 100/3, height: 30 }, fill: '#FF0000' },
+        { id: 2, type: 'rect', bounds: { x: 100/3, y: 0, width: 100/3, height: 30 }, fill: '#00FF00' },
+        { id: 3, type: 'rect', bounds: { x: 200/3, y: 0, width: 100/3, height: 30 }, fill: '#0000FF' },
+      ],
+      constraints: [
+        { type: 'adjacent', a: { entityId: 1, edge: 'right' }, b: { entityId: 2, edge: 'left' } },
+        { type: 'adjacent', a: { entityId: 2, edge: 'right' }, b: { entityId: 3, edge: 'left' } },
+      ],
+      containments: [
+        { parentId: 0, childIds: [1, 2, 3], axis: 'horizontal' },
+      ],
+    });
+    // Verify no black pixels (gaps) between colored rectangles
+    const hasGaps = detectGaps(pixelBuffer, 100, 30);
+    expect(hasGaps).toBe(false);
+    // Hash comparison
+    const hash = computeHash(pixelBuffer);
+    const goldenHash = loadGoldenHash('adjacent-rectangles');
+    if (goldenHash === null) {
+      saveGolden('adjacent-rectangles', pixelBuffer, hash);
+    } else {
+      expect(hash).toBe(goldenHash);
+    }
+  });
+  /**
+   * Test: Text Rendering (Font Determinism)
+   *
+   * CRITICAL: Uses embedded WOFF2 font to guarantee cross-platform consistency.
+   * Generic font families (monospace, serif) resolve to different fonts per OS.
+   */
+  test('renders text with deterministic glyph placement', async ({ page }) => {
+    await setupDeterministicRenderer(page);
+    // Load embedded font before rendering
+    await page.evaluate(async () => {
+      // Wait for VS embedded font to load
+      await (window as any).__VS_RENDERER__.loadFont('vs-mono');
+      await document.fonts.ready;
+    });
+    const pixelBuffer = await renderConstraintGraph(page, {
+      entities: [
+        {
+          id: 1,
+          type: 'text',
+          bounds: { x: 10, y: 10, width: 200, height: 20 },
+          content: 'ViewScript',
+          font: {
+            family: 'vs-mono', // Embedded font for determinism
+            size: 16,
+            weight: 400,
+          },
+          fill: '#000000',
+        },
+      ],
+      constraints: [],
+    });
+    const hash = computeHash(pixelBuffer);
+    const goldenHash = loadGoldenHash(`text-deterministic-${process.platform}`);
+    if (goldenHash === null) {
+      saveGolden(`text-deterministic-${process.platform}`, pixelBuffer, hash);
+    } else {
+      expect(hash).toBe(goldenHash);
+    }
+  });
+});
+// =============================================================================
+// Helper Functions
+// =============================================================================
+/**
+ * Setup Playwright page with deterministic wgpu renderer configuration.
+ */
+async function setupDeterministicRenderer(page: Page): Promise<void> {
+  // Navigate to test harness (follow redirect if needed)
+  await page.goto('/test-harness.html', { waitUntil: 'networkidle' });
+  // Inject deterministic configuration
+  await page.evaluate((config) => {
+    (window as any).__VS_RENDERER_CONFIG__ = config;
+  }, WGPU_DETERMINISTIC_CONFIG);
+  // Wait for renderer initialization
+  await page.waitForFunction(() => (window as any).__VS_RENDERER_READY__ === true, {
+    timeout: 10000,
+  });
+}
+/**
+ * Render a constraint graph and return the pixel buffer.
+ */
+async function renderConstraintGraph(
+  page: Page,
+  ir: unknown,
+): Promise<Uint8Array> {
+  const base64 = await page.evaluate(async (constraintGraph) => {
+    const renderer = (window as any).__VS_RENDERER__;
+    // Render the constraint graph
+    await renderer.render(constraintGraph);
+    // Force flush and extract pixel buffer
+    const canvas = document.getElementById('vs-canvas') as HTMLCanvasElement;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) throw new Error('No 2D context');
+    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+    const buffer = imageData.data;
+    // Convert to base64 in chunks to avoid stack overflow
+    let binary = '';
+    const chunkSize = 8192;
+    for (let i = 0; i < buffer.length; i += chunkSize) {
+      const chunk = buffer.subarray(i, Math.min(i + chunkSize, buffer.length));
+      binary += String.fromCharCode.apply(null, Array.from(chunk));
+    }
+    return btoa(binary);
+  }, ir);
+  // Decode base64 to Uint8Array
+  const binary = atob(base64);
+  const bytes = new Uint8Array(binary.length);
+  for (let i = 0; i < binary.length; i++) {
+    bytes[i] = binary.charCodeAt(i);
+  }
+  return bytes;
+}
+/**
+ * Compute SHA-256 hash of pixel buffer.
+ */
+function computeHash(buffer: Uint8Array): string {
+  return crypto.createHash('sha256').update(buffer).digest('hex');
+}
+/**
+ * Load golden hash from file.
+ */
+function loadGoldenHash(testName: string): string | null {
+  const hashFile = path.join(GOLDEN_DIR, `${testName}.sha256`);
+  if (fs.existsSync(hashFile)) {
+    return fs.readFileSync(hashFile, 'utf-8').trim();
+  }
+  return null;
+}
+/**
+ * Save golden snapshot and hash.
+ */
+function saveGolden(testName: string, buffer: Uint8Array, hash: string): void {
+  const pngFile = path.join(GOLDEN_DIR, `${testName}.raw`);
+  const hashFile = path.join(GOLDEN_DIR, `${testName}.sha256`);
+  fs.writeFileSync(pngFile, buffer);
+  fs.writeFileSync(hashFile, hash);
+}
+/**
+ * Detect gaps between adjacent colored rectangles.
+ *
+ * Strategy: Scan horizontal lines and detect transitions.
+ * A gap exists if we see: [Color A] -> [Black] -> [Color B]
+ * The container background is expected to be black, so we only flag
+ * black pixels that appear BETWEEN colored regions.
+ */
+function detectGaps(buffer: Uint8Array, width: number, height: number): boolean {
+  // In RGBA format, check each row for gap patterns
+  for (let y = 0; y < height; y++) {
+    let inColoredRegion = false;
+    let sawBlackAfterColor = false;
+    for (let x = 0; x < width; x++) {
+      const offset = (y * width + x) * 4;
+      const r = buffer[offset];
+      const g = buffer[offset + 1];
+      const b = buffer[offset + 2];
+      const a = buffer[offset + 3];
+      const isBlack = r === 0 && g === 0 && b === 0 && a === 255;
+      const isColored = !isBlack && a === 255;
+      if (isColored) {
+        if (sawBlackAfterColor) {
+          // Found: [Color] -> [Black] -> [Color] = gap!
+          console.warn(`[GAP DETECTED] black pixel between colors at row ${y}, near x=${x}`);
+          return true;
+        }
+        inColoredRegion = true;
+        sawBlackAfterColor = false;
+      } else if (isBlack && inColoredRegion) {
+        sawBlackAfterColor = true;
+      }
+    }
+  }
+  return false;
+}

package/tsconfig.json ADDED Viewed

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "declaration": true,
+    "strict": true,
+    "outDir": "dist",
+    "rootDir": "src"
+  },
+  "include": ["src"]
+}

package/vitest.config.ts ADDED Viewed

@@ -0,0 +1,8 @@
+import { defineConfig } from 'vitest/config';
+export default defineConfig({
+  test: {
+    include: ['src/**/*.test.ts'],
+    environment: 'node',
+  },
+});