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

package/src/quantum/QuantumEngine.js

@@ -22,6 +22,11 @@ export class QuantumEngine {
         /** @type {HTMLCanvasElement|null} */
         this.canvasOverride = options.canvas || null;
 
+        // Multi-canvas override: { background, shadow, content, highlight, accent }
+        // Enables 5-layer mode without DOM ID lookup (for landing page / multi-instance)
+        /** @type {Object<string, HTMLCanvasElement>|null} */
+        this.canvasSet = options.canvases || null;
+
         // Bridge rendering state
         /** @type {MultiCanvasBridge|null} */
         this._multiCanvasBridge = null;
@@ -89,6 +94,37 @@ export class QuantumEngine {
             return;
         }
 
+        // Multi-canvas override: 5-layer mode with provided canvas elements
+        // Used by landing page adapters to create multiple independent 5-layer instances
+        if (this.canvasSet) {
+            const layerDefs = [
+                { key: 'background', role: 'background', reactivity: 0.4 },
+                { key: 'shadow',     role: 'shadow',     reactivity: 0.6 },
+                { key: 'content',    role: 'content',    reactivity: 1.0 },
+                { key: 'highlight',  role: 'highlight',  reactivity: 1.3 },
+                { key: 'accent',     role: 'accent',     reactivity: 1.6 },
+            ];
+
+            layerDefs.forEach(layer => {
+                const canvas = this.canvasSet[layer.key];
+                if (!canvas) return;
+                try {
+                    const visualizer = new QuantumHolographicVisualizer(
+                        canvas, layer.role, layer.reactivity, 0
+                    );
+                    if (visualizer.gl) {
+                        this.visualizers.push(visualizer);
+                        console.log(`🌌 Created quantum layer (canvasSet): ${layer.role}`);
+                    }
+                } catch (error) {
+                    console.warn(`Failed to create quantum layer ${layer.role}:`, error);
+                }
+            });
+
+            console.log(`✅ Created ${this.visualizers.length} quantum visualizers via canvasSet`);
+            return;
+        }
+
         const layers = [
             { id: 'quantum-background-canvas', role: 'background', reactivity: 0.4 },
             { id: 'quantum-shadow-canvas', role: 'shadow', reactivity: 0.6 },
@@ -340,22 +376,27 @@ export class QuantumEngine {
             console.log('🌌 Quantum gesture reactivity skipped (single-canvas override mode)');
             return;
         }
-        
+
         console.log('🌌 Setting up Quantum: velocity + click + scroll + multi-parameter reactivity');
-        
+
         // Enhanced state for smooth effects
         this.clickFlashIntensity = 0;
         this.scrollMorph = 1.0; // Base morph factor
         this.velocitySmoothing = 0.8; // Smoother velocity transitions
-        
-        const quantumCanvases = [
-            'quantum-background-canvas', 'quantum-shadow-canvas', 'quantum-content-canvas',
-            'quantum-highlight-canvas', 'quantum-accent-canvas'
-        ];
-        
-        quantumCanvases.forEach(canvasId => {
-            const canvas = document.getElementById(canvasId);
-            if (!canvas) return;
+
+        // Gather canvases: from canvasSet (landing page) or DOM IDs (main app)
+        const canvasElements = [];
+        if (this.canvasSet) {
+            Object.values(this.canvasSet).forEach(c => { if (c) canvasElements.push(c); });
+        } else {
+            ['quantum-background-canvas', 'quantum-shadow-canvas', 'quantum-content-canvas',
+             'quantum-highlight-canvas', 'quantum-accent-canvas'].forEach(id => {
+                const c = document.getElementById(id);
+                if (c) canvasElements.push(c);
+            });
+        }
+
+        canvasElements.forEach(canvas => {
             
             // Mouse movement -> smooth velocity + multiple parameters
             canvas.addEventListener('mousemove', (e) => {
@@ -368,20 +409,19 @@ export class QuantumEngine {
                 this.updateEnhancedQuantumParameters(mouseX, mouseY);
             });
             
-            // Touch movement -> same enhanced parameters  
+            // Touch movement -> same enhanced parameters
             canvas.addEventListener('touchmove', (e) => {
                 if (!this.isActive) return;
-                e.preventDefault();
-                
+
                 if (e.touches.length > 0) {
                     const touch = e.touches[0];
                     const rect = canvas.getBoundingClientRect();
                     const touchX = (touch.clientX - rect.left) / rect.width;
                     const touchY = (touch.clientY - rect.top) / rect.height;
-                    
+
                     this.updateEnhancedQuantumParameters(touchX, touchY);
                 }
-            }, { passive: false });
+            }, { passive: true });
             
             // Click -> quantum flash effect
             canvas.addEventListener('click', (e) => {
@@ -398,9 +438,8 @@ export class QuantumEngine {
             // Wheel -> quantum morphing scroll effect
             canvas.addEventListener('wheel', (e) => {
                 if (!this.isActive) return;
-                e.preventDefault();
                 this.updateQuantumScroll(e.deltaY);
-            }, { passive: false });
+            }, { passive: true });
         });
         
         // Start smooth animation loops
@@ -483,7 +522,11 @@ export class QuantumEngine {
         this.lastMousePosition.x = x;
         this.lastMousePosition.y = y;
         
-        console.log(`🌌 Quantum EXPERIMENTAL: X=${x.toFixed(2)}→Rot=${rotationAngle.toFixed(2)}, Y=${y.toFixed(2)}→Density=${Math.round(gridDensity)}, Dist=${normalizedDistance.toFixed(2)}→Hue=${Math.round(hue)}, Hemisphere=${leftHemisphere ? 'L' : 'R'}${topHemisphere ? 'T' : 'B'}`);
+        // Debug logging (throttled to avoid console spam)
+        if (!this._lastLogTime || performance.now() - this._lastLogTime > 2000) {
+            this._lastLogTime = performance.now();
+            console.log(`Quantum: Rot=${rotationAngle.toFixed(2)}, Density=${Math.round(gridDensity)}, Hue=${Math.round(hue)}`);
+        }
     }
     
     triggerQuantumClick() {
@@ -495,7 +538,7 @@ export class QuantumEngine {
         this.quantumSpeedWave = 2.0; // Speed wave effect  
         this.quantumHueShift = 60; // Color explosion shift
         
-        console.log('💥 Quantum energy burst: flash + chaos + speed + hue explosion');
+        // Quantum energy burst triggered
     }
     
     updateQuantumScroll(deltaY) {
@@ -511,81 +554,60 @@ export class QuantumEngine {
             window.updateParameter('morphFactor', this.scrollMorph.toFixed(2));
         }
         
-        console.log(`🌀 Quantum scroll morph: ${this.scrollMorph.toFixed(2)}`);
+        // Quantum scroll morph updated
     }
     
     startQuantumEffectLoops() {
+        this._effectsLoopActive = true;
         const quantumEffects = () => {
-            let hasActiveEffects = false;
-            
+            if (!this._effectsLoopActive) return;
+
             // QUANTUM FLASH EFFECT (saturation + morph)
             if (this.clickFlashIntensity > 0.01) {
-                hasActiveEffects = true;
-                
-                // Flash affects saturation - quantum shimmer effect
-                const flashSaturation = 0.9 + (this.clickFlashIntensity * 0.1); // 0.9-1.0 boost
-                const flashMorph = this.scrollMorph + (this.clickFlashIntensity * 0.5); // Morph boost
-                
+                const flashSaturation = 0.9 + (this.clickFlashIntensity * 0.1);
+                const flashMorph = this.scrollMorph + (this.clickFlashIntensity * 0.5);
+
                 if (window.updateParameter) {
                     window.updateParameter('saturation', flashSaturation.toFixed(2));
                     window.updateParameter('morphFactor', flashMorph.toFixed(2));
                 }
-                
-                // Smooth decay
                 this.clickFlashIntensity *= 0.91;
             }
-            
+
             // DRAMATIC CHAOS BLAST EFFECT (fluid decay)
             if (this.quantumChaosBlast > 0.01) {
-                hasActiveEffects = true;
-                
-                const baseChaos = 0.3; // Quantum default chaos
+                const baseChaos = 0.3;
                 const currentChaos = baseChaos + this.quantumChaosBlast;
-                
                 if (window.updateParameter) {
                     window.updateParameter('chaos', Math.min(1.0, currentChaos).toFixed(2));
                 }
-                
-                // Smooth decay
-                this.quantumChaosBlast *= 0.88; // Slightly faster than faceted for quantum energy feel
+                this.quantumChaosBlast *= 0.88;
             }
-            
-            // DRAMATIC SPEED WAVE EFFECT (fluid decay)  
+
+            // DRAMATIC SPEED WAVE EFFECT (fluid decay)
             if (this.quantumSpeedWave > 0.01) {
-                hasActiveEffects = true;
-                
-                const baseSpeed = 1.0; // Quantum default speed
+                const baseSpeed = 1.0;
                 const currentSpeed = baseSpeed + this.quantumSpeedWave;
-                
                 if (window.updateParameter) {
                     window.updateParameter('speed', Math.min(3.0, currentSpeed).toFixed(2));
                 }
-                
-                // Smooth wave decay
                 this.quantumSpeedWave *= 0.89;
             }
-            
+
             // QUANTUM HUE EXPLOSION EFFECT (fluid decay)
             if (this.quantumHueShift > 1) {
-                hasActiveEffects = true;
-                
-                const baseHue = 280; // Quantum purple-blue
+                const baseHue = 280;
                 const currentHue = (baseHue + this.quantumHueShift) % 360;
-                
                 if (window.updateParameter) {
                     window.updateParameter('hue', Math.round(currentHue));
                 }
-                
-                // Smooth color return
                 this.quantumHueShift *= 0.90;
             }
-            
-            if (this.isActive) {
-                requestAnimationFrame(quantumEffects);
-            }
+
+            this._effectsRafId = requestAnimationFrame(quantumEffects);
         };
-        
-        quantumEffects();
+
+        this._effectsRafId = requestAnimationFrame(quantumEffects);
     }
     
     async enableAudio() {
@@ -691,16 +713,17 @@ export class QuantumEngine {
         if (window.mobileDebug) {
             window.mobileDebug.log(`🎬 Quantum Engine: Starting render loop with ${this.visualizers?.length} visualizers, isActive=${this.isActive}`);
         }
-        
+
+        this._renderLoopActive = true;
         const render = () => {
+            if (!this._renderLoopActive) return;
             this.renderFrame();
-            
-            requestAnimationFrame(render);
+            this._renderRafId = requestAnimationFrame(render);
         };
-        
-        render();
+
+        this._renderRafId = requestAnimationFrame(render);
         console.log('🎬 Quantum render loop started');
-        
+
         if (window.mobileDebug) {
             window.mobileDebug.log(`✅ Quantum Engine: Render loop started, will render when isActive=true`);
         }
@@ -777,6 +800,20 @@ export class QuantumEngine {
     destroy() {
         this.isActive = false;
 
+        // Cancel render loop
+        this._renderLoopActive = false;
+        if (this._renderRafId) {
+            cancelAnimationFrame(this._renderRafId);
+            this._renderRafId = null;
+        }
+
+        // Cancel effects loop
+        this._effectsLoopActive = false;
+        if (this._effectsRafId) {
+            cancelAnimationFrame(this._effectsRafId);
+            this._effectsRafId = null;
+        }
+
         // Disconnect from universal reactivity
         if (window.universalReactivity) {
             window.universalReactivity.disconnectSystem('quantum');

package/src/quantum/QuantumVisualizer.js

@@ -6,6 +6,17 @@
 
 import { GeometryLibrary } from '../geometry/GeometryLibrary.js';
 
+// Role-specific intensity values for 5-layer canvas architecture.
+// IMPORTANT: Must stay in sync with shader epsilon comparisons in the fragment shader
+// at the "LAYER-BY-LAYER COLOR SYSTEM" section (search for layerIndex).
+const ROLE_INTENSITIES = {
+    'background': 0.4,
+    'shadow': 0.6,
+    'content': 1.0,
+    'highlight': 1.3,
+    'accent': 1.6
+};
+
 export class QuantumHolographicVisualizer {
     constructor(canvasIdOrElement, role, reactivity, variant) {
         this.canvas = (canvasIdOrElement instanceof HTMLCanvasElement)
@@ -14,6 +25,7 @@ export class QuantumHolographicVisualizer {
         this.role = role;
         this.reactivity = reactivity;
         this.variant = variant;
+        this._canvasLabel = typeof canvasIdOrElement === 'string' ? canvasIdOrElement : canvasIdOrElement?.id || 'unknown';
         
         // CRITICAL FIX: Define contextOptions as instance property to match SmartCanvasPool
         this.contextOptions = {
@@ -34,9 +46,9 @@ export class QuantumHolographicVisualizer {
                   this.canvas.getContext('experimental-webgl', this.contextOptions);
         
         if (!this.gl) {
-            console.error(`WebGL not supported for ${canvasId}`);
+            console.error(`WebGL not supported for ${this._canvasLabel}`);
             if (window.mobileDebug) {
-                window.mobileDebug.log(`❌ ${canvasId}: WebGL context creation failed`);
+                window.mobileDebug.log(`❌ ${this._canvasLabel}: WebGL context creation failed`);
             }
             // Show user-friendly error instead of white screen
             this.showWebGLError();
@@ -44,7 +56,7 @@ export class QuantumHolographicVisualizer {
         } else {
             if (window.mobileDebug) {
                 const version = this.gl.getParameter(this.gl.VERSION);
-                window.mobileDebug.log(`✅ ${canvasId}: WebGL context created - ${version}`);
+                window.mobileDebug.log(`✅ ${this._canvasLabel}: WebGL context created - ${version}`);
             }
         }
         
@@ -59,15 +71,15 @@ export class QuantumHolographicVisualizer {
         this._onContextLost = (e) => {
             e.preventDefault();
             this._contextLost = true;
-            console.warn(`WebGL context lost for ${canvasId}`);
+            console.warn(`WebGL context lost for ${this._canvasLabel}`);
         };
         this._onContextRestored = () => {
-            console.log(`WebGL context restored for ${canvasId}`);
+            console.log(`WebGL context restored for ${this._canvasLabel}`);
             this._contextLost = false;
             try {
                 this.init();
             } catch (err) {
-                console.error(`Failed to reinit after context restore for ${canvasId}:`, err);
+                console.error(`Failed to reinit after context restore for ${this._canvasLabel}:`, err);
             }
         };
         this.canvas.addEventListener('webglcontextlost', this._onContextLost);
@@ -276,6 +288,7 @@ uniform float u_rot4dZW;
 uniform float u_mouseIntensity;
 uniform float u_clickIntensity;
 uniform float u_roleIntensity;
+uniform float u_breath;
 
 // 6D rotation matrices - 3D space rotations (XY, XZ, YZ)
 mat4 rotateXY(float theta) {
@@ -681,15 +694,18 @@ void main() {
     geometryIntensity += shimmer * geometryIntensity;
     
     // Apply user intensity control
-    float finalIntensity = geometryIntensity * u_intensity;
+    // Breath modulation (Exhale system)
+    float breathMod = 1.0 + (u_breath * 0.4);
+    float finalIntensity = geometryIntensity * u_intensity * breathMod;
     
     // LAYER-BY-LAYER COLOR SYSTEM with user hue/saturation/intensity controls
     // Determine canvas layer from role/variant (0=background, 1=shadow, 2=content, 3=highlight, 4=accent)
+    // Values must match ROLE_INTENSITIES in JS: bg=0.4, shadow=0.6, content=1.0, highlight=1.3, accent=1.6
     int layerIndex = 0;
-    if (u_roleIntensity == 0.7) layerIndex = 1;      // shadow layer
-    else if (u_roleIntensity == 1.0) layerIndex = 2; // content layer  
-    else if (u_roleIntensity == 0.85) layerIndex = 3; // highlight layer
-    else if (u_roleIntensity == 0.6) layerIndex = 4;  // accent layer
+    if (abs(u_roleIntensity - 0.6) < 0.05) layerIndex = 1;       // shadow layer
+    else if (abs(u_roleIntensity - 1.0) < 0.05) layerIndex = 2;  // content layer
+    else if (abs(u_roleIntensity - 1.3) < 0.05) layerIndex = 3;  // highlight layer
+    else if (abs(u_roleIntensity - 1.6) < 0.05) layerIndex = 4;  // accent layer
     
     // Get layer-specific base color using user hue/saturation controls
     float colorTime = timeSpeed * 2.0 + value * 3.0;
@@ -792,7 +808,8 @@ void main() {
             rot4dZW: this.gl.getUniformLocation(this.program, 'u_rot4dZW'),
             mouseIntensity: this.gl.getUniformLocation(this.program, 'u_mouseIntensity'),
             clickIntensity: this.gl.getUniformLocation(this.program, 'u_clickIntensity'),
-            roleIntensity: this.gl.getUniformLocation(this.program, 'u_roleIntensity')
+            roleIntensity: this.gl.getUniformLocation(this.program, 'u_roleIntensity'),
+            breath: this.gl.getUniformLocation(this.program, 'u_breath')
         };
     }
     
@@ -1012,15 +1029,6 @@ void main() {
             this._renderParamsLogged = true;
         }
         
-        // Role-specific intensity for quantum effects
-        const roleIntensities = {
-            'background': 0.4,
-            'shadow': 0.6,
-            'content': 1.0,
-            'highlight': 1.3,
-            'accent': 1.6
-        };
-        
         const time = Date.now() - this.startTime;
         
         // Set uniforms
@@ -1064,7 +1072,8 @@ void main() {
         this.gl.uniform1f(this.uniforms.rot4dZW, this.params.rot4dZW || 0.0);
         this.gl.uniform1f(this.uniforms.mouseIntensity, this.mouseIntensity);
         this.gl.uniform1f(this.uniforms.clickIntensity, this.clickIntensity);
-        this.gl.uniform1f(this.uniforms.roleIntensity, roleIntensities[this.role] || 1.0);
+        this.gl.uniform1f(this.uniforms.roleIntensity, ROLE_INTENSITIES[this.role] || 1.0);
+        this.gl.uniform1f(this.uniforms.breath, this.params.breath || 0.0);
         
         this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4);
     }

package/src/reactivity/index.js

@@ -23,10 +23,11 @@ export { ReactivityManager } from './ReactivityManager.js';
 /**
  * Create a pre-configured ReactivityManager with common settings
  */
-export function createReactivityManager(options = {}) {
+export async function createReactivityManager(options = {}) {
     const { config, parameterUpdateFn } = options;
 
-    const manager = new (await import('./ReactivityManager.js')).ReactivityManager(parameterUpdateFn);
+    const { ReactivityManager } = await import('./ReactivityManager.js');
+    const manager = new ReactivityManager(parameterUpdateFn);
 
     if (config) {
         manager.loadConfig(config);
@@ -39,7 +40,6 @@ export function createReactivityManager(options = {}) {
  * Create ReactivityConfig from a preset name
  */
 export function createPresetConfig(presetName) {
-    const { ReactivityConfig } = require('./ReactivityConfig.js');
     const config = new ReactivityConfig();
 
     switch (presetName) {
@@ -89,5 +89,3 @@ export function createPresetConfig(presetName) {
 
     return config;
 }
-
-console.log('🎛️ VIB3+ Reactivity System loaded');