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

package/src/holograms/RealHolographicSystem.js

@@ -5,6 +5,7 @@
  */
 import { HolographicVisualizer } from './HolographicVisualizer.js';
 import { MultiCanvasBridge } from '../render/MultiCanvasBridge.js';
+import { LayerRelationshipGraph } from '../render/LayerRelationshipGraph.js';
 import { shaderLoader } from '../render/ShaderLoader.js';
 
 export class RealHolographicSystem {
@@ -19,6 +20,11 @@ export class RealHolographicSystem {
         /** @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;
@@ -27,6 +33,12 @@ export class RealHolographicSystem {
         /** @type {number} time accumulator for bridge rendering (ms) */
         this._bridgeTime = 0;
 
+        // Layer relationship graph — keystone-driven inter-layer parameter system
+        /** @type {LayerRelationshipGraph} */
+        this._layerGraph = new LayerRelationshipGraph({
+            profile: options.relationshipProfile || 'holographic'
+        });
+
         // Conditional reactivity: Use built-in only if ReactivityManager not active
         this.useBuiltInReactivity = !window.reactivityManager;
 
@@ -87,6 +99,39 @@ export class RealHolographicSystem {
             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.5 },
+                { key: 'shadow',     role: 'shadow',     reactivity: 0.7 },
+                { key: 'content',    role: 'content',    reactivity: 0.9 },
+                { key: 'highlight',  role: 'highlight',  reactivity: 1.1 },
+                { key: 'accent',     role: 'accent',     reactivity: 1.5 },
+            ];
+
+            let successfulLayers = 0;
+            layerDefs.forEach(layer => {
+                const canvas = this.canvasSet[layer.key];
+                if (!canvas) return;
+                try {
+                    const visualizer = new HolographicVisualizer(
+                        canvas, layer.role, layer.reactivity, this.currentVariant
+                    );
+                    if (visualizer.gl) {
+                        this.visualizers.push(visualizer);
+                        successfulLayers++;
+                        console.log(`✅ Created holographic layer (canvasSet): ${layer.role}`);
+                    }
+                } catch (error) {
+                    console.warn(`Failed to create holographic layer ${layer.role}:`, error);
+                }
+            });
+
+            console.log(`✅ Created ${successfulLayers} holographic visualizers via canvasSet`);
+            return;
+        }
+
         // Create the 5 visualizers using HOLO canvas IDs
         const layers = [
             { id: 'holo-background-canvas', role: 'background', reactivity: 0.5 },
@@ -182,7 +227,11 @@ export class RealHolographicSystem {
         if (Object.keys(canvasMap).length === 0) return null;
 
         const bridge = new MultiCanvasBridge();
-        await bridge.initialize({ canvases: canvasMap, preferWebGPU: options.preferWebGPU !== false });
+        await bridge.initialize({
+            canvases: canvasMap,
+            preferWebGPU: options.preferWebGPU !== false,
+            relationshipGraph: this._layerGraph
+        });
 
         // Load external shader files, fall back to inline if unavailable
         let sources = {
@@ -331,48 +380,130 @@ export class RealHolographicSystem {
     }
     
     updateParameter(param, value) {
-        // Store custom parameter overrides
+        // Store custom parameter overrides (keystone state)
         if (!this.customParams) {
             this.customParams = {};
         }
         this.customParams[param] = value;
-        
-        console.log(`🌌 Updating holographic ${param}: ${value} (${this.visualizers.length} visualizers)`);
-        
-        // CRITICAL FIX: Call updateParameters method on ALL visualizers for immediate render
+
+        // Build keystone params from current state + this update
+        const keystoneParams = { ...this._buildKeystoneParams(), [param]: value };
+
+        // Resolve all layers through the relationship graph
+        const resolved = this._layerGraph.resolveAll(keystoneParams, Date.now());
+
+        // Apply resolved params to each visualizer by role
         this.visualizers.forEach((visualizer, index) => {
+            const role = visualizer.role || 'content';
+            const layerParams = resolved[role] || keystoneParams;
+
             try {
                 if (visualizer.updateParameters) {
-                    // Use new updateParameters method with proper parameter mapping
-                    const params = {};
-                    params[param] = value;
-                    visualizer.updateParameters(params);
-                    console.log(`✅ Updated holographic layer ${index} (${visualizer.role}) with ${param}=${value}`);
-                } else {
-                    console.warn(`⚠️ Holographic layer ${index} missing updateParameters method, using fallback`);
-                    // Fallback for older method (direct parameter setting)
-                    if (visualizer.variantParams) {
-                        visualizer.variantParams[param] = value;
-                        
-                        // If it's a geometry type change, regenerate role params with new geometry
-                        if (param === 'geometryType') {
-                            visualizer.roleParams = visualizer.generateRoleParams(visualizer.role);
-                        }
-                        
-                        // Force manual render for older visualizers
-                        if (visualizer.render) {
-                            visualizer.render();
-                        }
+                    visualizer.updateParameters(layerParams);
+                } else if (visualizer.variantParams) {
+                    Object.assign(visualizer.variantParams, layerParams);
+                    if (param === 'geometryType' || param === 'geometry') {
+                        visualizer.roleParams = visualizer.generateRoleParams(role);
                     }
                 }
             } catch (error) {
-                console.error(`❌ Failed to update holographic layer ${index}:`, error);
+                console.error(`Failed to update holographic layer ${index} (${role}):`, error);
             }
         });
-        
-        console.log(`🔄 Holographic parameter update complete: ${param}=${value}`);
     }
-    
+
+    /**
+     * Update multiple parameters at once (RendererContract / VIB3Engine compatible).
+     * Resolves all layers through the relationship graph in a single pass.
+     * @param {Object} params - Key-value pairs of parameters to update
+     */
+    updateParameters(params) {
+        if (!params || typeof params !== 'object') return;
+
+        // Merge into custom params (keystone state)
+        if (!this.customParams) {
+            this.customParams = {};
+        }
+        Object.assign(this.customParams, params);
+
+        // Build keystone params + resolve all layers in one shot
+        const keystoneParams = { ...this._buildKeystoneParams(), ...params };
+        const resolved = this._layerGraph.resolveAll(keystoneParams, Date.now());
+
+        this.visualizers.forEach((visualizer, index) => {
+            const role = visualizer.role || 'content';
+            const layerParams = resolved[role] || keystoneParams;
+
+            try {
+                if (visualizer.updateParameters) {
+                    visualizer.updateParameters(layerParams);
+                } else if (visualizer.variantParams) {
+                    Object.assign(visualizer.variantParams, layerParams);
+                }
+            } catch (error) {
+                console.error(`Failed to update holographic layer ${index} (${role}):`, error);
+            }
+        });
+    }
+
+    // ========================================================================
+    // Layer Relationship Graph API
+    // ========================================================================
+
+    /**
+     * Build keystone parameters from current state.
+     * These are the driver values that get transformed by the relationship
+     * graph to produce each dependent layer's parameters.
+     * @private
+     * @returns {Object}
+     */
+    _buildKeystoneParams() {
+        const base = {};
+        // Pull from first (content) visualizer's variant params if available
+        const content = this.visualizers.find(v => v.role === 'content');
+        if (content && content.variantParams) {
+            Object.assign(base, content.variantParams);
+        }
+        // Merge custom overrides
+        if (this.customParams) {
+            Object.assign(base, this.customParams);
+        }
+        return base;
+    }
+
+    /**
+     * Get the layer relationship graph for direct configuration.
+     * @returns {LayerRelationshipGraph}
+     */
+    get layerGraph() {
+        return this._layerGraph;
+    }
+
+    /**
+     * Load a relationship profile by name.
+     * @param {string} profileName - holographic, symmetry, chord, storm, legacy
+     */
+    loadRelationshipProfile(profileName) {
+        this._layerGraph.loadProfile(profileName);
+    }
+
+    /**
+     * Set the keystone (driver) layer.
+     * @param {string} layerName - background, shadow, content, highlight, or accent
+     */
+    setKeystone(layerName) {
+        this._layerGraph.setKeystone(layerName);
+    }
+
+    /**
+     * Set the relationship for a dependent layer.
+     * @param {string} layerName
+     * @param {string|Function|Object} relationship - Preset name, function, or { preset, config }
+     */
+    setLayerRelationship(layerName, relationship) {
+        this._layerGraph.setRelationship(layerName, relationship);
+    }
+
     // Override updateVariant to preserve custom parameters
     updateVariant(newVariant) {
         if (newVariant < 0) newVariant = this.totalVariants - 1;
@@ -431,7 +562,9 @@ export class RealHolographicSystem {
             Object.assign(params, this.customParams);
         }
         
-        console.log('🌌 Holographic system getParameters:', params);
+        // Include layer relationship graph config for serialization
+        params.layerRelationship = this._layerGraph.exportConfig();
+
         return params;
     }
     
@@ -701,7 +834,7 @@ export class RealHolographicSystem {
             window.updateParameter('morphFactor', depthMorph.toFixed(2));
         }
         
-        console.log(`✨ Holographic shimmer: angle=(${angleX.toFixed(2)}, ${angleY.toFixed(2)}) → Hue=${Math.round(shimmerHue)}, Intensity=${shimmerIntensity.toFixed(2)}`);
+        // Holographic shimmer updated
     }
     
     triggerHolographicColorBurst(x, y) {
@@ -723,11 +856,13 @@ export class RealHolographicSystem {
         this.burstChaosEffect = 0.6; // Chaos/morph burst effect
         this.burstSpeedBoost = 1.8; // Animation speed burst
         
-        console.log(`🌈💥 HOLOGRAPHIC COLOR BURST: position=(${x.toFixed(2)}, ${y.toFixed(2)}), distance=${distanceFromCenter.toFixed(3)}`);
+        // Holographic color burst triggered
     }
-    
+
     startHolographicColorBurstLoop() {
+        this._burstLoopActive = true;
         const burstAnimation = () => {
+            if (!this._burstLoopActive) return;
             // DRAMATIC HOLOGRAPHIC COLOR BURST ANIMATION (like Quantum's multi-parameter effects)
             let hasActiveEffects = false;
             
@@ -797,16 +932,16 @@ export class RealHolographicSystem {
                 this.colorBurstIntensity *= 0.94;
             }
             
-            if (this.isActive) {
-                requestAnimationFrame(burstAnimation);
-            }
+            this._burstRafId = requestAnimationFrame(burstAnimation);
         };
-        
-        burstAnimation();
+
+        this._burstRafId = requestAnimationFrame(burstAnimation);
     }
     
     startRenderLoop() {
+        this._renderLoopActive = true;
         const render = () => {
+            if (!this._renderLoopActive) return;
             if (this.isActive) {
                 // Update audio reactivity
                 this.updateAudio();
@@ -821,11 +956,11 @@ export class RealHolographicSystem {
                 }
             }
 
-            requestAnimationFrame(render);
+            this._renderRafId = requestAnimationFrame(render);
         };
 
-        render();
-        console.log(`🎬 REAL Holographic render loop started (${this._renderMode} mode)`);
+        this._renderRafId = requestAnimationFrame(render);
+        console.log(`REAL Holographic render loop started (${this._renderMode} mode)`);
     }
     
     getVariantName(variant = this.currentVariant) {
@@ -833,6 +968,22 @@ export class RealHolographicSystem {
     }
     
     destroy() {
+        this.isActive = false;
+
+        // Cancel render loop
+        this._renderLoopActive = false;
+        if (this._renderRafId) {
+            cancelAnimationFrame(this._renderRafId);
+            this._renderRafId = null;
+        }
+
+        // Cancel burst effect loop
+        this._burstLoopActive = false;
+        if (this._burstRafId) {
+            cancelAnimationFrame(this._burstRafId);
+            this._burstRafId = null;
+        }
+
         // Dispose bridge if active
         if (this._multiCanvasBridge) {
             this._multiCanvasBridge.dispose();
@@ -851,7 +1002,7 @@ export class RealHolographicSystem {
             this.audioContext.close();
         }
 
-        console.log('🧹 REAL Holographic System destroyed');
+        console.log('REAL Holographic System destroyed');
     }
 
     // ============================================