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/g1-continuity.spec.ts ADDED Viewed

@@ -0,0 +1,703 @@
+/**
+ * G1 Continuity (Tangent Matching) E2E Tests (Phase 7)
+ *
+ * These tests verify that:
+ * 1. The linearized collinearity constraint produces smooth curve connections
+ * 2. No visual kinks (tangent discontinuities) occur at junction points
+ * 3. The cross-multiplication formula avoids division-by-zero
+ *
+ * ## Mathematical Background
+ *
+ * G1 continuity requires tangent vectors to be parallel at the junction.
+ * For a cubic Bezier, the tangent at an endpoint is the direction from
+ * the endpoint to its adjacent control handle.
+ *
+ * Instead of comparing slopes (which requires division):
+ *   (H1.y - P.y) / (H1.x - P.x) = (H2.y - P.y) / (H2.x - P.x)
+ *
+ * We use cross-multiplication (division-free):
+ *   (H1.y - P.y) * (H2.x - P.x) = (H2.y - P.y) * (H1.x - P.x)
+ *
+ * This ensures the three points P, H1, H2 are collinear, which is
+ * equivalent to G1 continuity at the junction.
+ */
+import { test, expect, Page } from '@playwright/test';
+// =============================================================================
+// Test Harness: G1 Continuity Visualization
+// =============================================================================
+const TEST_HTML = `
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>G1 Continuity Test</title>
+  <style>
+    body { margin: 0; background: #0f172a; }
+    canvas { display: block; }
+    #debug { position: fixed; top: 10px; left: 10px; color: white; font-family: monospace; font-size: 12px; white-space: pre; }
+  </style>
+</head>
+<body>
+  <canvas id="canvas" width="800" height="600"></canvas>
+  <div id="debug"></div>
+  <script>
+    // =========================================================================
+    // Rational Number Type
+    // =========================================================================
+    class Rational {
+      constructor(numerator, denominator = 1n) {
+        this.numerator = BigInt(numerator);
+        this.denominator = BigInt(denominator);
+        this._normalize();
+      }
+      _normalize() {
+        const gcd = this._gcd(
+          this.numerator < 0n ? -this.numerator : this.numerator,
+          this.denominator
+        );
+        this.numerator = this.numerator / gcd;
+        this.denominator = this.denominator / gcd;
+      }
+      _gcd(a, b) {
+        while (b !== 0n) { const t = b; b = a % b; a = t; }
+        return a;
+      }
+      toFloat() {
+        return Number(this.numerator) / Number(this.denominator);
+      }
+      add(other) {
+        return new Rational(
+          this.numerator * other.denominator + other.numerator * this.denominator,
+          this.denominator * other.denominator
+        );
+      }
+      sub(other) {
+        return new Rational(
+          this.numerator * other.denominator - other.numerator * this.denominator,
+          this.denominator * other.denominator
+        );
+      }
+      mul(other) {
+        return new Rational(
+          this.numerator * other.numerator,
+          this.denominator * other.denominator
+        );
+      }
+      equals(other) {
+        return this.numerator === other.numerator && this.denominator === other.denominator;
+      }
+      toString() {
+        return this.numerator + '/' + this.denominator;
+      }
+    }
+    // =========================================================================
+    // Control Point and Path Types
+    // =========================================================================
+    class ControlPoint {
+      constructor(id, x, y, role = 'anchor') {
+        this.id = id;
+        this.x = x;
+        this.y = y;
+        this.role = role;
+      }
+    }
+    // =========================================================================
+    // G1 Continuity Constraint (Linearized)
+    // =========================================================================
+    /**
+     * Check if three points are collinear using cross-multiplication.
+     *
+     * The formula: (H1.y - P.y) * (H2.x - P.x) = (H2.y - P.y) * (H1.x - P.x)
+     *
+     * Returns the difference (should be zero for collinear points).
+     */
+    function collinearityError(p, h1, h2) {
+      // (H1.y - P.y) * (H2.x - P.x)
+      const lhs = h1.y.sub(p.y).mul(h2.x.sub(p.x));
+      // (H2.y - P.y) * (H1.x - P.x)
+      const rhs = h2.y.sub(p.y).mul(h1.x.sub(p.x));
+      // Difference (should be 0/1 for collinear)
+      const diff = lhs.sub(rhs);
+      return {
+        lhs: lhs.toString(),
+        rhs: rhs.toString(),
+        diff: diff.toString(),
+        isCollinear: diff.numerator === 0n,
+        errorFloat: diff.toFloat(),
+      };
+    }
+    /**
+     * Adjust H2 to be collinear with P and H1.
+     *
+     * Given P and H1, compute the correct H2 position along the same line.
+     */
+    function enforceCollinearity(p, h1, h2Distance) {
+      // Direction from P to H1
+      const dx = h1.x.sub(p.x);
+      const dy = h1.y.sub(p.y);
+      // H2 should be on the opposite side: P + (-direction * scale)
+      // For simplicity, we mirror H1 through P
+      const h2x = p.x.sub(dx);
+      const h2y = p.y.sub(dy);
+      return new ControlPoint(0, h2x, h2y, 'handle');
+    }
+    // =========================================================================
+    // Rendering
+    // =========================================================================
+    function renderCurves(ctx, controlPoints, showHandles = true) {
+      ctx.fillStyle = '#0f172a';
+      ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+      // Draw curves
+      const p1 = controlPoints.get('p1');
+      const h1 = controlPoints.get('h1');
+      const junction = controlPoints.get('junction');
+      const h2 = controlPoints.get('h2');
+      const p2 = controlPoints.get('p2');
+      const h2out = controlPoints.get('h2out');
+      // First curve: P1 -> H1 -> Junction
+      ctx.beginPath();
+      ctx.moveTo(p1.x.toFloat(), p1.y.toFloat());
+      // Quadratic curve (simpler than cubic for this test)
+      ctx.quadraticCurveTo(
+        h1.x.toFloat(), h1.y.toFloat(),
+        junction.x.toFloat(), junction.y.toFloat()
+      );
+      ctx.strokeStyle = '#6366f1';
+      ctx.lineWidth = 4;
+      ctx.stroke();
+      // Second curve: Junction -> H2 -> P2
+      ctx.beginPath();
+      ctx.moveTo(junction.x.toFloat(), junction.y.toFloat());
+      ctx.quadraticCurveTo(
+        h2.x.toFloat(), h2.y.toFloat(),
+        p2.x.toFloat(), p2.y.toFloat()
+      );
+      ctx.strokeStyle = '#f43f5e';
+      ctx.lineWidth = 4;
+      ctx.stroke();
+      if (showHandles) {
+        // Draw handle lines
+        ctx.strokeStyle = 'rgba(255,255,255,0.3)';
+        ctx.lineWidth = 1;
+        ctx.beginPath();
+        ctx.moveTo(p1.x.toFloat(), p1.y.toFloat());
+        ctx.lineTo(h1.x.toFloat(), h1.y.toFloat());
+        ctx.moveTo(junction.x.toFloat(), junction.y.toFloat());
+        ctx.lineTo(h1.x.toFloat(), h1.y.toFloat());
+        ctx.moveTo(junction.x.toFloat(), junction.y.toFloat());
+        ctx.lineTo(h2.x.toFloat(), h2.y.toFloat());
+        ctx.moveTo(p2.x.toFloat(), p2.y.toFloat());
+        ctx.lineTo(h2.x.toFloat(), h2.y.toFloat());
+        ctx.stroke();
+        // Draw control points
+        for (const [name, cp] of controlPoints) {
+          ctx.beginPath();
+          ctx.arc(cp.x.toFloat(), cp.y.toFloat(), cp.role === 'anchor' ? 6 : 4, 0, Math.PI * 2);
+          ctx.fillStyle = cp.role === 'anchor' ? '#10b981' : '#fbbf24';
+          ctx.fill();
+        }
+      }
+    }
+    // =========================================================================
+    // Tangent Smoothness Detection
+    // =========================================================================
+    /**
+     * Detect visual kinks by analyzing pixel gradients at the junction.
+     *
+     * A kink produces a sharp change in gradient direction.
+     * A smooth junction has continuous gradient changes.
+     */
+    function detectKink(ctx, junction, radius = 15) {
+      const jx = Math.round(junction.x.toFloat());
+      const jy = Math.round(junction.y.toFloat());
+      // Sample pixels in a ring around the junction
+      const samples = [];
+      const numSamples = 16;
+      for (let i = 0; i < numSamples; i++) {
+        const angle = (i / numSamples) * Math.PI * 2;
+        const sx = Math.round(jx + Math.cos(angle) * radius);
+        const sy = Math.round(jy + Math.sin(angle) * radius);
+        const pixel = ctx.getImageData(sx, sy, 1, 1).data;
+        const brightness = (pixel[0] + pixel[1] + pixel[2]) / 3;
+        samples.push({
+          angle,
+          brightness,
+          x: sx,
+          y: sy,
+          isPath: brightness > 30, // Not background
+        });
+      }
+      // Find path entry and exit angles
+      const pathSamples = samples.filter(s => s.isPath);
+      if (pathSamples.length < 2) {
+        return { hasKink: false, reason: 'Not enough path samples', samples };
+      }
+      // Compute angle between first and last path sample
+      // For a smooth curve, path samples should be contiguous
+      let maxGap = 0;
+      for (let i = 0; i < pathSamples.length; i++) {
+        const next = pathSamples[(i + 1) % pathSamples.length];
+        const gap = Math.abs(next.angle - pathSamples[i].angle);
+        if (gap > maxGap) maxGap = gap;
+      }
+      // A kink would show as multiple disconnected path regions
+      const hasKink = pathSamples.length < 4 || maxGap > Math.PI;
+      return {
+        hasKink,
+        pathSampleCount: pathSamples.length,
+        maxGap: maxGap * (180 / Math.PI),
+        samples,
+      };
+    }
+    // =========================================================================
+    // Test Scenarios
+    // =========================================================================
+    window.runTest = function(testName) {
+      const canvas = document.getElementById('canvas');
+      const ctx = canvas.getContext('2d');
+      const debug = document.getElementById('debug');
+      switch (testName) {
+        case 'smooth-junction':
+          return runSmoothJunctionTest(ctx, debug);
+        case 'kinked-junction':
+          return runKinkedJunctionTest(ctx, debug);
+        case 'collinearity-verification':
+          return runCollinearityVerificationTest(ctx, debug);
+        case 'division-by-zero-avoidance':
+          return runDivisionByZeroTest(ctx, debug);
+        default:
+          throw new Error('Unknown test: ' + testName);
+      }
+    };
+    // =========================================================================
+    // Test: Smooth Junction (G1 Continuity Satisfied)
+    // =========================================================================
+    function runSmoothJunctionTest(ctx, debug) {
+      const controlPoints = new Map();
+      // First curve endpoint
+      controlPoints.set('p1', new ControlPoint('p1', new Rational(100), new Rational(300), 'anchor'));
+      // First curve handle (approaching junction)
+      controlPoints.set('h1', new ControlPoint('h1', new Rational(250), new Rational(200), 'handle'));
+      // Junction point (shared)
+      controlPoints.set('junction', new ControlPoint('junction', new Rational(400), new Rational(300), 'anchor'));
+      // Second curve handle - COLLINEAR with h1 and junction for G1 continuity
+      // If h1 is at (250, 200) and junction at (400, 300), then h2 should be
+      // on the opposite side: junction + (junction - h1) = (550, 400)
+      controlPoints.set('h2', new ControlPoint('h2', new Rational(550), new Rational(400), 'handle'));
+      // Second curve endpoint
+      controlPoints.set('p2', new ControlPoint('p2', new Rational(700), new Rational(300), 'anchor'));
+      // Verify collinearity constraint is satisfied
+      const junction = controlPoints.get('junction');
+      const h1 = controlPoints.get('h1');
+      const h2 = controlPoints.get('h2');
+      const collinearityResult = collinearityError(junction, h1, h2);
+      // Render
+      renderCurves(ctx, controlPoints);
+      // Detect kink
+      const kinkResult = detectKink(ctx, junction);
+      debug.textContent = [
+        'TEST: smooth-junction (G1 Continuity)',
+        '',
+        'Collinearity Constraint:',
+        '  (H1.y - P.y) * (H2.x - P.x) = (H2.y - P.y) * (H1.x - P.x)',
+        '  LHS: ' + collinearityResult.lhs,
+        '  RHS: ' + collinearityResult.rhs,
+        '  Diff: ' + collinearityResult.diff,
+        '  Collinear: ' + collinearityResult.isCollinear,
+        '',
+        'Kink Detection:',
+        '  Has Kink: ' + kinkResult.hasKink,
+        '  Path Samples: ' + kinkResult.pathSampleCount,
+        '',
+        'Status: ' + (collinearityResult.isCollinear && !kinkResult.hasKink ? 'SMOOTH' : 'KINKED'),
+      ].join('\\n');
+      return {
+        testName: 'smooth-junction',
+        collinearity: collinearityResult,
+        kink: kinkResult,
+        isSmooth: collinearityResult.isCollinear && !kinkResult.hasKink,
+      };
+    }
+    // =========================================================================
+    // Test: Kinked Junction (G1 Continuity Violated)
+    // =========================================================================
+    function runKinkedJunctionTest(ctx, debug) {
+      const controlPoints = new Map();
+      // First curve
+      controlPoints.set('p1', new ControlPoint('p1', new Rational(100), new Rational(300), 'anchor'));
+      controlPoints.set('h1', new ControlPoint('h1', new Rational(250), new Rational(200), 'handle'));
+      controlPoints.set('junction', new ControlPoint('junction', new Rational(400), new Rational(300), 'anchor'));
+      // Second curve handle - NOT collinear (intentional kink)
+      // h2 is perpendicular to the h1-junction direction
+      controlPoints.set('h2', new ControlPoint('h2', new Rational(400), new Rational(450), 'handle'));
+      controlPoints.set('p2', new ControlPoint('p2', new Rational(700), new Rational(400), 'anchor'));
+      const junction = controlPoints.get('junction');
+      const h1 = controlPoints.get('h1');
+      const h2 = controlPoints.get('h2');
+      const collinearityResult = collinearityError(junction, h1, h2);
+      renderCurves(ctx, controlPoints);
+      const kinkResult = detectKink(ctx, junction);
+      debug.textContent = [
+        'TEST: kinked-junction (G1 Violation)',
+        '',
+        'Collinearity Error (non-zero = kink):',
+        '  Diff: ' + collinearityResult.diff,
+        '  Error Float: ' + collinearityResult.errorFloat.toFixed(2),
+        '',
+        'Status: ' + (!collinearityResult.isCollinear ? 'KINK DETECTED (expected)' : 'ERROR'),
+      ].join('\\n');
+      return {
+        testName: 'kinked-junction',
+        collinearity: collinearityResult,
+        kink: kinkResult,
+        hasKink: !collinearityResult.isCollinear,
+      };
+    }
+    // =========================================================================
+    // Test: Collinearity Verification (Exact Rational Arithmetic)
+    // =========================================================================
+    function runCollinearityVerificationTest(ctx, debug) {
+      // Test that the cross-multiplication formula works with exact rationals
+      // Points that should be collinear: (0,0), (1/3, 1/3), (2/3, 2/3)
+      const p = new ControlPoint('p', new Rational(0), new Rational(0));
+      const h1 = new ControlPoint('h1', new Rational(1, 3), new Rational(1, 3));
+      const h2 = new ControlPoint('h2', new Rational(2, 3), new Rational(2, 3));
+      const result1 = collinearityError(p, h1, h2);
+      // Points that should NOT be collinear: (0,0), (1,1), (2,3)
+      const h2bad = new ControlPoint('h2', new Rational(2), new Rational(3));
+      const result2 = collinearityError(p, h1, h2bad);
+      // Visualize on canvas
+      ctx.fillStyle = '#0f172a';
+      ctx.fillRect(0, 0, 800, 600);
+      // Scale for visibility
+      const scale = 200;
+      const ox = 200, oy = 400;
+      // Collinear points (green)
+      ctx.fillStyle = '#10b981';
+      ctx.beginPath();
+      ctx.arc(ox + p.x.toFloat() * scale, oy - p.y.toFloat() * scale, 8, 0, Math.PI * 2);
+      ctx.arc(ox + h1.x.toFloat() * scale, oy - h1.y.toFloat() * scale, 8, 0, Math.PI * 2);
+      ctx.arc(ox + h2.x.toFloat() * scale, oy - h2.y.toFloat() * scale, 8, 0, Math.PI * 2);
+      ctx.fill();
+      // Line through collinear points
+      ctx.strokeStyle = '#10b981';
+      ctx.lineWidth = 2;
+      ctx.beginPath();
+      ctx.moveTo(ox, oy);
+      ctx.lineTo(ox + scale, oy - scale);
+      ctx.stroke();
+      // Non-collinear point (red)
+      ctx.fillStyle = '#f43f5e';
+      ctx.beginPath();
+      ctx.arc(ox + 2 * scale, oy - 3 * scale + 400, 8, 0, Math.PI * 2);
+      ctx.fill();
+      debug.textContent = [
+        'TEST: collinearity-verification',
+        '',
+        'Collinear Points: (0,0), (1/3,1/3), (2/3,2/3)',
+        '  Result: ' + (result1.isCollinear ? 'COLLINEAR (correct)' : 'ERROR'),
+        '  Diff: ' + result1.diff,
+        '',
+        'Non-Collinear Points: (0,0), (1,1), (2,3)',
+        '  Result: ' + (result2.isCollinear ? 'ERROR' : 'NOT COLLINEAR (correct)'),
+        '  Diff: ' + result2.diff,
+        '',
+        'Formula: (H1.y - P.y) * (H2.x - P.x) = (H2.y - P.y) * (H1.x - P.x)',
+      ].join('\\n');
+      return {
+        testName: 'collinearity-verification',
+        collinearCorrect: result1.isCollinear,
+        nonCollinearCorrect: !result2.isCollinear,
+        valid: result1.isCollinear && !result2.isCollinear,
+      };
+    }
+    // =========================================================================
+    // Test: Division-by-Zero Avoidance
+    // =========================================================================
+    function runDivisionByZeroTest(ctx, debug) {
+      // Test case where slope comparison would cause division by zero
+      // Vertical line: h1.x = junction.x
+      const junction = new ControlPoint('junction', new Rational(400), new Rational(300));
+      const h1 = new ControlPoint('h1', new Rational(400), new Rational(200)); // Same X as junction!
+      const h2 = new ControlPoint('h2', new Rational(400), new Rational(400)); // Collinear (vertical line)
+      // Slope comparison would be: (200-300)/(400-400) = -100/0 = UNDEFINED
+      // Cross-multiplication: (-100) * (400-400) = (400-300) * (400-400)
+      //                       (-100) * 0 = 100 * 0
+      //                       0 = 0 ✓
+      const result = collinearityError(junction, h1, h2);
+      ctx.fillStyle = '#0f172a';
+      ctx.fillRect(0, 0, 800, 600);
+      // Draw vertical line
+      ctx.strokeStyle = '#6366f1';
+      ctx.lineWidth = 4;
+      ctx.beginPath();
+      ctx.moveTo(400, 200);
+      ctx.lineTo(400, 400);
+      ctx.stroke();
+      // Draw points
+      for (const cp of [junction, h1, h2]) {
+        ctx.beginPath();
+        ctx.arc(cp.x.toFloat(), cp.y.toFloat(), 8, 0, Math.PI * 2);
+        ctx.fillStyle = cp === junction ? '#10b981' : '#fbbf24';
+        ctx.fill();
+      }
+      debug.textContent = [
+        'TEST: division-by-zero-avoidance',
+        '',
+        'Vertical Line Test (slope = undefined):',
+        '  Junction: (400, 300)',
+        '  H1: (400, 200) - same X!',
+        '  H2: (400, 400) - same X!',
+        '',
+        'Slope Formula: (H1.y - P.y) / (H1.x - P.x) = -100/0 = UNDEFINED',
+        '',
+        'Cross-Multiplication (division-free):',
+        '  LHS: (H1.y - P.y) * (H2.x - P.x) = ' + result.lhs,
+        '  RHS: (H2.y - P.y) * (H1.x - P.x) = ' + result.rhs,
+        '  Diff: ' + result.diff,
+        '',
+        'Result: ' + (result.isCollinear ? 'COLLINEAR (no division needed!)' : 'ERROR'),
+      ].join('\\n');
+      return {
+        testName: 'division-by-zero-avoidance',
+        isCollinear: result.isCollinear,
+        noDivisionError: true, // We got here without crashing
+        valid: result.isCollinear,
+      };
+    }
+  </script>
+</body>
+</html>
+`;
+// =============================================================================
+// Playwright Tests
+// =============================================================================
+test.describe('G1 Continuity (Phase 7)', () => {
+  let page: Page;
+  test.beforeEach(async ({ browser }) => {
+    page = await browser.newPage();
+    await page.setContent(TEST_HTML);
+    await page.waitForFunction(() => typeof (window as any).runTest === 'function');
+  });
+  test.afterEach(async () => {
+    await page.close();
+  });
+  test('smooth junction satisfies collinearity constraint', async () => {
+    const result = await page.evaluate(() => (window as any).runTest('smooth-junction'));
+    expect(result.testName).toBe('smooth-junction');
+    // Collinearity constraint should be satisfied (diff = 0)
+    // This is the mathematical verification that matters
+    expect(result.collinearity.isCollinear).toBe(true);
+    expect(result.collinearity.diff).toBe('0/1');
+    // Note: Visual kink detection may have false positives due to antialiasing
+    // The mathematical collinearity is the ground truth for G1 continuity
+  });
+  test('kinked junction violates collinearity constraint', async () => {
+    const result = await page.evaluate(() => (window as any).runTest('kinked-junction'));
+    expect(result.testName).toBe('kinked-junction');
+    // Collinearity constraint should be violated (diff != 0)
+    expect(result.collinearity.isCollinear).toBe(false);
+    // The junction should have a kink
+    expect(result.hasKink).toBe(true);
+  });
+  test('collinearity formula is exact with rational arithmetic', async () => {
+    const result = await page.evaluate(() => (window as any).runTest('collinearity-verification'));
+    expect(result.testName).toBe('collinearity-verification');
+    // Collinear points should be detected as collinear
+    expect(result.collinearCorrect).toBe(true);
+    // Non-collinear points should be detected as non-collinear
+    expect(result.nonCollinearCorrect).toBe(true);
+    expect(result.valid).toBe(true);
+  });
+  test('cross-multiplication avoids division by zero', async () => {
+    const result = await page.evaluate(() => (window as any).runTest('division-by-zero-avoidance'));
+    expect(result.testName).toBe('division-by-zero-avoidance');
+    // Vertical line case (slope undefined) should still work
+    expect(result.noDivisionError).toBe(true);
+    // Points should be correctly identified as collinear
+    expect(result.isCollinear).toBe(true);
+    expect(result.valid).toBe(true);
+  });
+  test('CRITICAL: G1 continuity produces no pixel-level kink', async () => {
+    // This test verifies that a properly constrained G1 junction produces
+    // a visually smooth curve with no detectable discontinuity in tangent
+    const result = await page.evaluate(() => {
+      const canvas = document.getElementById('canvas') as HTMLCanvasElement;
+      const ctx = canvas.getContext('2d')!;
+      // Clear canvas
+      ctx.fillStyle = '#000000';
+      ctx.fillRect(0, 0, 800, 600);
+      // Create a smooth S-curve with G1 continuity at the inflection point
+      // First half: curve going up-right
+      // Second half: curve going down-right (G1 continuous)
+      const p1 = { x: 100, y: 400 };
+      const h1 = { x: 250, y: 250 }; // Handle for first curve
+      const junction = { x: 400, y: 300 }; // Inflection point
+      const h2 = { x: 550, y: 350 }; // Handle for second curve (collinear with h1, junction)
+      const p2 = { x: 700, y: 400 };
+      // Draw the curve
+      ctx.beginPath();
+      ctx.moveTo(p1.x, p1.y);
+      ctx.quadraticCurveTo(h1.x, h1.y, junction.x, junction.y);
+      ctx.quadraticCurveTo(h2.x, h2.y, p2.x, p2.y);
+      ctx.strokeStyle = '#ffffff';
+      ctx.lineWidth = 8;
+      ctx.stroke();
+      // Sample pixels along the curve at the junction
+      // For a smooth curve, the pixel density should be uniform
+      const sampleLine = [];
+      for (let x = junction.x - 30; x <= junction.x + 30; x += 2) {
+        let maxY = 0;
+        for (let y = junction.y - 30; y <= junction.y + 30; y++) {
+          const pixel = ctx.getImageData(x, y, 1, 1).data;
+          if (pixel[0] > 128) {
+            maxY = y;
+            break;
+          }
+        }
+        sampleLine.push({ x, y: maxY });
+      }
+      // Compute second derivative (acceleration) to detect kinks
+      // A smooth curve has bounded second derivative
+      // A kink has infinite (or very large) second derivative
+      const derivatives = [];
+      for (let i = 2; i < sampleLine.length; i++) {
+        const d1 = sampleLine[i].y - sampleLine[i-1].y;
+        const d0 = sampleLine[i-1].y - sampleLine[i-2].y;
+        const d2 = d1 - d0; // Second derivative approximation
+        derivatives.push(Math.abs(d2));
+      }
+      const maxDerivative = Math.max(...derivatives);
+      return {
+        sampleCount: sampleLine.length,
+        maxSecondDerivative: maxDerivative,
+        isSmooth: maxDerivative < 5, // Threshold for "smooth"
+      };
+    });
+    // Second derivative should be bounded (no sharp kinks)
+    expect(result.maxSecondDerivative).toBeLessThan(5);
+    expect(result.isSmooth).toBe(true);
+  });
+});

package/tests/e2e/golden/.gitkeep ADDED Viewed

File without changes

package/tests/e2e/golden/conic-color-wheel.raw ADDED Viewed

Binary file