@vib3code/sdk 2.0.1 → 2.0.3-canary.0a63e71

package/src/viewer/ViewerPortal.js

@@ -185,14 +185,14 @@ export class ViewerPortal extends EventEmitter {
 
     captureFrame(format = 'png', quality = 0.92) {
         if (!this.canvas) return null;
-        return this.canvas.toDataURL(\`image/\${format}\`, quality);
+        return this.canvas.toDataURL(`image/${format}`, quality);
     }
 
     downloadFrame(filename = 'vib3-capture', format = 'png') {
         const dataUrl = this.captureFrame(format);
         if (!dataUrl) return;
         const link = document.createElement('a');
-        link.download = \`\${filename}.\${format}\`;
+        link.download = `${filename}.${format}`;
         link.href = dataUrl;
         link.click();
     }

package/src/viewer/index.js

@@ -5,7 +5,7 @@
  */
 
 export { ViewerPortal, ViewerMode, ProjectionMode } from './ViewerPortal.js';
-export { ReactivityManager } from './ReactivityManager.js';
+export { ReactivityManager } from './ViewerInputHandler.js';
 export { CardBending, BendPreset } from './CardBending.js';
 export { TradingCardExporter, CardSize, FrameStyle, Rarity } from './TradingCardExporter.js';
 export { AudioReactivity, AudioSource, FrequencyBand } from './AudioReactivity.js';

package/tools/headless-renderer.js

@@ -0,0 +1,258 @@
+#!/usr/bin/env node
+
+/**
+ * headless-renderer.js - VIB3+ Headless Frame Capture Utility
+ *
+ * Uses Puppeteer to render VIB3+ visualizations in a headless browser and
+ * capture screenshots. Designed for:
+ * - Agent visual feedback loops (capture → analyze → refine)
+ * - CI visual regression testing
+ * - Thumbnail generation for gallery entries
+ * - Offline batch rendering
+ *
+ * Usage:
+ *   node tools/headless-renderer.js [options]
+ *
+ * Options:
+ *   --url <url>         Dev server URL (default: http://localhost:5173)
+ *   --output <path>     Output directory (default: ./renders)
+ *   --width <px>        Viewport width (default: 512)
+ *   --height <px>       Viewport height (default: 512)
+ *   --params <json>     JSON parameter object to apply
+ *   --system <name>     System: quantum|faceted|holographic
+ *   --geometry <index>  Geometry index 0-23
+ *   --delay <ms>        Wait time after parameter set (default: 500)
+ *   --frames <count>    Number of frames to capture (default: 1)
+ *   --interval <ms>     Interval between frames (default: 100)
+ *   --format <type>     png|jpeg|webp (default: png)
+ *   --base64            Output base64 to stdout instead of file
+ *
+ * Examples:
+ *   # Single frame with custom params
+ *   node tools/headless-renderer.js --system quantum --geometry 11 --params '{"hue":200,"chaos":0.3}'
+ *
+ *   # 10 frames of animation
+ *   node tools/headless-renderer.js --frames 10 --interval 200 --output ./animation
+ *
+ *   # Base64 output for piping to agents
+ *   node tools/headless-renderer.js --base64 --params '{"hue":120}'
+ *
+ * @module tools/headless-renderer
+ * @version 1.0.0
+ */
+
+import { existsSync, mkdirSync } from 'fs';
+import { join, resolve } from 'path';
+
+// Parse CLI arguments
+function parseArgs(argv) {
+    const args = {
+        url: 'http://localhost:5173',
+        output: './renders',
+        width: 512,
+        height: 512,
+        params: null,
+        system: null,
+        geometry: null,
+        delay: 500,
+        frames: 1,
+        interval: 100,
+        format: 'png',
+        base64: false
+    };
+
+    for (let i = 2; i < argv.length; i++) {
+        const flag = argv[i];
+        const next = argv[i + 1];
+
+        switch (flag) {
+            case '--url': args.url = next; i++; break;
+            case '--output': args.output = next; i++; break;
+            case '--width': args.width = parseInt(next, 10); i++; break;
+            case '--height': args.height = parseInt(next, 10); i++; break;
+            case '--params': args.params = JSON.parse(next); i++; break;
+            case '--system': args.system = next; i++; break;
+            case '--geometry': args.geometry = parseInt(next, 10); i++; break;
+            case '--delay': args.delay = parseInt(next, 10); i++; break;
+            case '--frames': args.frames = parseInt(next, 10); i++; break;
+            case '--interval': args.interval = parseInt(next, 10); i++; break;
+            case '--format': args.format = next; i++; break;
+            case '--base64': args.base64 = true; break;
+            case '--help':
+                console.log('Usage: node tools/headless-renderer.js [options]');
+                console.log('See file header for full option list.');
+                process.exit(0);
+        }
+    }
+
+    return args;
+}
+
+async function main() {
+    const args = parseArgs(process.argv);
+
+    // Dynamic import puppeteer (devDependency)
+    let puppeteer;
+    try {
+        puppeteer = await import('puppeteer-core');
+        if (puppeteer.default) puppeteer = puppeteer.default;
+    } catch {
+        try {
+            puppeteer = await import('puppeteer');
+            if (puppeteer.default) puppeteer = puppeteer.default;
+        } catch {
+            console.error('Error: puppeteer or puppeteer-core is required.');
+            console.error('Install with: npm install puppeteer-core');
+            process.exit(1);
+        }
+    }
+
+    // Find Chrome/Chromium
+    const executablePath = findChromium();
+
+    console.log(`[headless-renderer] Launching browser...`);
+    const browser = await puppeteer.launch({
+        headless: 'new',
+        executablePath,
+        args: [
+            '--no-sandbox',
+            '--disable-setuid-sandbox',
+            '--disable-dev-shm-usage',
+            '--use-gl=swiftshader',  // Software GPU for headless
+            `--window-size=${args.width},${args.height}`
+        ]
+    });
+
+    const page = await browser.newPage();
+    await page.setViewport({ width: args.width, height: args.height });
+
+    console.log(`[headless-renderer] Loading ${args.url}...`);
+    try {
+        await page.goto(args.url, { waitUntil: 'networkidle2', timeout: 30000 });
+    } catch (err) {
+        console.error(`Error: Could not load ${args.url}`);
+        console.error('Is the dev server running? Start it with: npm run dev');
+        await browser.close();
+        process.exit(1);
+    }
+
+    // Wait for VIB3+ engine to initialize
+    await page.waitForFunction(() => {
+        return typeof window.engine !== 'undefined' ||
+               document.querySelector('canvas') !== null;
+    }, { timeout: 10000 }).catch(() => {
+        console.warn('[headless-renderer] Warning: Engine not detected, capturing anyway');
+    });
+
+    // Apply system switch
+    if (args.system) {
+        console.log(`[headless-renderer] Switching to system: ${args.system}`);
+        await page.evaluate((system) => {
+            if (window.switchSystem) window.switchSystem(system);
+            else if (window.engine?.switchSystem) window.engine.switchSystem(system);
+        }, args.system);
+        await sleep(200);
+    }
+
+    // Apply geometry
+    if (args.geometry !== null) {
+        console.log(`[headless-renderer] Setting geometry: ${args.geometry}`);
+        await page.evaluate((geo) => {
+            if (window.selectGeometry) window.selectGeometry(geo);
+            else if (window.engine?.setParameter) window.engine.setParameter('geometry', geo);
+        }, args.geometry);
+        await sleep(100);
+    }
+
+    // Apply custom parameters
+    if (args.params) {
+        console.log(`[headless-renderer] Applying parameters:`, JSON.stringify(args.params));
+        await page.evaluate((params) => {
+            for (const [key, value] of Object.entries(params)) {
+                if (window.updateParameter) window.updateParameter(key, value);
+                else if (window.engine?.setParameter) window.engine.setParameter(key, value);
+            }
+        }, args.params);
+    }
+
+    // Wait for render to settle
+    console.log(`[headless-renderer] Waiting ${args.delay}ms for render...`);
+    await sleep(args.delay);
+
+    // Wait one animation frame
+    await page.evaluate(() => new Promise(r => requestAnimationFrame(r)));
+
+    // Capture frames
+    if (!args.base64 && !existsSync(args.output)) {
+        mkdirSync(args.output, { recursive: true });
+    }
+
+    for (let i = 0; i < args.frames; i++) {
+        const screenshot = await page.screenshot({
+            type: args.format === 'jpeg' ? 'jpeg' : 'png',
+            encoding: args.base64 ? 'base64' : 'binary',
+            fullPage: false
+        });
+
+        if (args.base64) {
+            // Output base64 to stdout (for agent consumption)
+            if (args.frames === 1) {
+                process.stdout.write(screenshot);
+            } else {
+                console.log(JSON.stringify({
+                    frame: i,
+                    format: args.format,
+                    data: screenshot
+                }));
+            }
+        } else {
+            const ext = args.format === 'jpeg' ? 'jpg' : args.format;
+            const filename = args.frames === 1
+                ? `capture.${ext}`
+                : `frame_${String(i).padStart(4, '0')}.${ext}`;
+            const filepath = join(resolve(args.output), filename);
+
+            const fs = await import('fs');
+            fs.writeFileSync(filepath, screenshot);
+            console.log(`[headless-renderer] Saved: ${filepath}`);
+        }
+
+        // Wait between frames
+        if (i < args.frames - 1 && args.interval > 0) {
+            await sleep(args.interval);
+            await page.evaluate(() => new Promise(r => requestAnimationFrame(r)));
+        }
+    }
+
+    await browser.close();
+    console.log(`[headless-renderer] Done.`);
+}
+
+function sleep(ms) {
+    return new Promise(r => setTimeout(r, ms));
+}
+
+function findChromium() {
+    const candidates = [
+        '/usr/bin/chromium-browser',
+        '/usr/bin/chromium',
+        '/usr/bin/google-chrome',
+        '/usr/bin/google-chrome-stable',
+        '/snap/bin/chromium',
+        '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
+        'C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe',
+        'C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe'
+    ];
+
+    for (const path of candidates) {
+        if (existsSync(path)) return path;
+    }
+
+    // Let puppeteer figure it out
+    return undefined;
+}
+
+main().catch(err => {
+    console.error('[headless-renderer] Fatal error:', err.message);
+    process.exit(1);
+});

package/tools/shader-sync-verify.js

@@ -34,7 +34,8 @@ export class ShaderSyncVerifier {
                 'u_rot4dXY', 'u_rot4dXZ', 'u_rot4dYZ',
                 'u_rot4dXW', 'u_rot4dYW', 'u_rot4dZW',
                 'u_gridDensity', 'u_morphFactor', 'u_chaos',
-                'u_speed', 'u_hue', 'u_intensity', 'u_dimension'
+                'u_speed', 'u_hue', 'u_intensity', 'u_dimension',
+                'u_breath' // Exhale feature
             ],
             recommended: [
                 'u_saturation', 'u_mouseIntensity', 'u_clickIntensity',
@@ -590,6 +591,7 @@ uniform float u_rot4dZW;
 uniform float u_mouseIntensity;
 uniform float u_clickIntensity;
 uniform float u_roleIntensity;
+uniform float u_breath;
 void main() { gl_FragColor = vec4(0.0); }
 `;
 
@@ -600,6 +602,7 @@ const FACETED_GLSL_FRAGMENT = `
 precision highp float;
 uniform float u_time;
 uniform vec2 u_resolution;
+uniform vec2 u_mouse;
 uniform float u_geometry;
 uniform float u_rot4dXY;
 uniform float u_rot4dXZ;
@@ -617,9 +620,11 @@ uniform float u_saturation;
 uniform float u_speed;
 uniform float u_mouseIntensity;
 uniform float u_clickIntensity;
+uniform float u_roleIntensity;
 uniform float u_bass;
 uniform float u_mid;
 uniform float u_high;
+uniform float u_breath;
 void main() { gl_FragColor = vec4(0.0); }
 `;
 
@@ -657,14 +662,15 @@ struct VIB3Uniforms {
     layerColor: vec3<f32>,
     densityMult: f32,
     speedMult: f32,
-    _pad2: vec3<f32>,
+    breath: f32,
 };
 @group(0) @binding(0) var<uniform> u: VIB3Uniforms;
 `;
 
 /**
  * Holographic system GLSL fragment shader uniforms (from HolographicVisualizer.js).
- * This system uses non-standard names for several uniforms.
+ * Uses standard names (u_gridDensity, u_morphFactor, u_geometry) plus many
+ * system-specific uniforms for audio/touch/scroll reactivity.
  */
 const HOLOGRAPHIC_GLSL_FRAGMENT = `
 precision highp float;
@@ -672,7 +678,7 @@ uniform vec2 u_resolution;
 uniform float u_time;
 uniform vec2 u_mouse;
 uniform float u_geometry;
-uniform float u_density;
+uniform float u_gridDensity;
 uniform float u_speed;
 uniform vec3 u_color;
 uniform float u_intensity;
@@ -683,9 +689,8 @@ uniform float u_chaosIntensity;
 uniform float u_mouseIntensity;
 uniform float u_clickIntensity;
 uniform float u_densityVariation;
-uniform float u_geometryType;
 uniform float u_chaos;
-uniform float u_morph;
+uniform float u_morphFactor;
 uniform float u_touchMorph;
 uniform float u_touchChaos;
 uniform float u_scrollParallax;
@@ -702,6 +707,7 @@ uniform float u_rot4dYZ;
 uniform float u_rot4dXW;
 uniform float u_rot4dYW;
 uniform float u_rot4dZW;
+uniform float u_breath;
 void main() { gl_FragColor = vec4(0.0); }
 `;
 
@@ -739,7 +745,7 @@ struct VIB3Uniforms {
     layerColor: vec3<f32>,
     densityMult: f32,
     speedMult: f32,
-    _pad2: vec3<f32>,
+    breath: f32,
 };
 @group(0) @binding(0) var<uniform> u: VIB3Uniforms;
 `;
@@ -778,7 +784,7 @@ struct VIB3Uniforms {
     layerColor: vec3<f32>,
     densityMult: f32,
     speedMult: f32,
-    _pad2: vec3<f32>,
+    breath: f32,
 };
 @group(0) @binding(0) var<uniform> u: VIB3Uniforms;
 `;

package/tools/site-analysis/all-reports.json

@@ -0,0 +1,32 @@
+[
+  {
+    "site": "clickerss",
+    "url": "https://www.clickerss.com/",
+    "error": "page.goto: net::ERR_TUNNEL_CONNECTION_FAILED at https://www.clickerss.com/\nCall log:\n  - navigating to \"https://www.clickerss.com/\", waiting until \"networkidle\"\n"
+  },
+  {
+    "site": "facetad",
+    "url": "https://www.facetad.com/",
+    "error": "page.goto: net::ERR_TUNNEL_CONNECTION_FAILED at https://www.facetad.com/\nCall log:\n  - navigating to \"https://www.facetad.com/\", waiting until \"networkidle\"\n"
+  },
+  {
+    "site": "wix-template-3630",
+    "url": "https://www.wix.com/website-template/view/html/3630",
+    "error": "page.goto: net::ERR_TUNNEL_CONNECTION_FAILED at https://www.wix.com/website-template/view/html/3630\nCall log:\n  - navigating to \"https://www.wix.com/website-template/view/html/3630\", waiting until \"networkidle\"\n"
+  },
+  {
+    "site": "tableside",
+    "url": "https://www.tableside.com.au/",
+    "error": "page.goto: net::ERR_TUNNEL_CONNECTION_FAILED at https://www.tableside.com.au/\nCall log:\n  - navigating to \"https://www.tableside.com.au/\", waiting until \"networkidle\"\n"
+  },
+  {
+    "site": "wix-studio-space",
+    "url": "https://www.wix.com/studio/design/inspiration/space",
+    "error": "page.goto: net::ERR_TUNNEL_CONNECTION_FAILED at https://www.wix.com/studio/design/inspiration/space\nCall log:\n  - navigating to \"https://www.wix.com/studio/design/inspiration/space\", waiting until \"networkidle\"\n"
+  },
+  {
+    "site": "simone-webflow",
+    "url": "https://weare-simone.webflow.io/",
+    "error": "page.goto: net::ERR_TUNNEL_CONNECTION_FAILED at https://weare-simone.webflow.io/\nCall log:\n  - navigating to \"https://weare-simone.webflow.io/\", waiting until \"networkidle\"\n"
+  }
+]

package/tools/site-analysis/combined-analysis.md

@@ -0,0 +1,50 @@
+# Reference Site Scroll Analysis
+
+*Generated: 2026-02-09T14:01:29.902Z*
+
+Analyzed 6 sites for scroll effects, parallax, morphing, depth illusions, and multi-element coordination.
+
+---
+
+### clickerss (https://www.clickerss.com/)
+
+**ERROR**: page.goto: net::ERR_TUNNEL_CONNECTION_FAILED at https://www.clickerss.com/
+Call log:
+  - navigating to "https://www.clickerss.com/", waiting until "networkidle"
+
+
+### facetad (https://www.facetad.com/)
+
+**ERROR**: page.goto: net::ERR_TUNNEL_CONNECTION_FAILED at https://www.facetad.com/
+Call log:
+  - navigating to "https://www.facetad.com/", waiting until "networkidle"
+
+
+### wix-template-3630 (https://www.wix.com/website-template/view/html/3630)
+
+**ERROR**: page.goto: net::ERR_TUNNEL_CONNECTION_FAILED at https://www.wix.com/website-template/view/html/3630
+Call log:
+  - navigating to "https://www.wix.com/website-template/view/html/3630", waiting until "networkidle"
+
+
+### tableside (https://www.tableside.com.au/)
+
+**ERROR**: page.goto: net::ERR_TUNNEL_CONNECTION_FAILED at https://www.tableside.com.au/
+Call log:
+  - navigating to "https://www.tableside.com.au/", waiting until "networkidle"
+
+
+### wix-studio-space (https://www.wix.com/studio/design/inspiration/space)
+
+**ERROR**: page.goto: net::ERR_TUNNEL_CONNECTION_FAILED at https://www.wix.com/studio/design/inspiration/space
+Call log:
+  - navigating to "https://www.wix.com/studio/design/inspiration/space", waiting until "networkidle"
+
+
+### simone-webflow (https://weare-simone.webflow.io/)
+
+**ERROR**: page.goto: net::ERR_TUNNEL_CONNECTION_FAILED at https://weare-simone.webflow.io/
+Call log:
+  - navigating to "https://weare-simone.webflow.io/", waiting until "networkidle"
+
+