@vib3code/sdk 2.0.3-canary.6f35b4c → 2.0.3-canary.75a3290

package/src/core/renderers/QuantumRendererAdapter.js

@@ -7,16 +7,20 @@ export class QuantumRendererAdapter extends RendererContract {
         this.system = system;
     }
 
-    init() {
-        return true;
+    init(context = {}) {
+        return this.system.init ? this.system.init(context) : true;
     }
 
-    resize() {
-        // Canvas sizing is handled by visualizers.
+    resize(width, height, pixelRatio = 1) {
+        if (this.system.resize) {
+            this.system.resize(width, height, pixelRatio);
+        }
     }
 
-    render() {
-        this.system.renderFrame();
+    render(frameState) {
+        if (this.system.render) {
+            this.system.render(frameState);
+        }
     }
 
     setActive(active) {
@@ -24,6 +28,6 @@ export class QuantumRendererAdapter extends RendererContract {
     }
 
     dispose() {
-        this.system.setActive(false);
+        this.system.dispose();
     }
 }

package/src/creative/index.js

@@ -0,0 +1,11 @@
+/**
+ * VIB3+ Creative Tooling Module
+ * @module creative
+ */
+
+export { ColorPresetsSystem } from './ColorPresetsSystem.js';
+export { TransitionAnimator } from './TransitionAnimator.js';
+export { PostProcessingPipeline } from './PostProcessingPipeline.js';
+export { ParameterTimeline } from './ParameterTimeline.js';
+export { ChoreographyPlayer } from './ChoreographyPlayer.js';
+export { AestheticMapper } from './AestheticMapper.js';

package/src/export/index.js

@@ -8,7 +8,17 @@ export { exportSVG, downloadSVG } from './SVGExporter.js';
 export { exportCSS, downloadCSS, toStyleObject } from './CSSExporter.js';
 export { exportLottie, downloadLottie } from './LottieExporter.js';
 
-// Re-export existing managers
+// Core managers
 export { ExportManager } from './ExportManager.js';
 export { CardGeneratorBase } from './CardGeneratorBase.js';
 export { TradingCardManager } from './TradingCardManager.js';
+
+// Shader & package exporters
+export { ShaderExporter } from './ShaderExporter.js';
+export { VIB3PackageExporter, VIB3_PACKAGE_VERSION, createVIB3Package } from './VIB3PackageExporter.js';
+export { TradingCardGenerator } from './TradingCardGenerator.js';
+
+// Per-system card generators
+export { TradingCardSystemFaceted } from './systems/TradingCardSystemFaceted.js';
+export { TradingCardSystemHolographic } from './systems/TradingCardSystemHolographic.js';
+export { TradingCardSystemQuantum } from './systems/TradingCardSystemQuantum.js';

package/src/faceted/FacetedSystem.js

@@ -634,15 +634,19 @@ export class FacetedSystem {
         return false;
     }
 
-    async initialize() {
+    async initialize(options = {}) {
         if (this.initialized) return true;
-        const canvas = document.getElementById('faceted-content-canvas') ||
+        const canvas = options.canvas ||
+                      document.getElementById('faceted-content-canvas') ||
                       document.getElementById('content-canvas');
         if (!canvas) {
             console.warn("FacetedSystem: No canvas found for initialize()");
             return false;
         }
-        return this.initWithBridge(canvas, { preferWebGPU: false });
+        return this.initWithBridge(canvas, {
+            preferWebGPU: options.preferWebGPU !== undefined ? options.preferWebGPU : true,
+            debug: options.debug || false
+        });
     }
 
     // ─── Parameters ───
@@ -775,7 +779,7 @@ export class FacetedSystem {
         if (layer) layer.style.display = active ? 'block' : 'none';
     }
 
-    init(context) { return this.initialize(); }
+    init(context = {}) { return this.initialize(context); }
 
     resize(width, height, pixelRatio = 1) {
         const w = Math.floor(width * pixelRatio);

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 {
@@ -32,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;
 
@@ -220,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 = {
@@ -369,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;
@@ -469,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;
     }
     

package/src/math/index.js

@@ -59,10 +59,10 @@ export {
     clamp, lerp, smoothstep, smootherstep
 } from './constants.js';
 
-// Default export for convenience
-export default {
-    Vec4: (await import('./Vec4.js')).Vec4,
-    Rotor4D: (await import('./Rotor4D.js')).Rotor4D,
-    Mat4x4: (await import('./Mat4x4.js')).Mat4x4,
-    Projection: (await import('./Projection.js')).Projection
-};
+// Default export — uses the static imports already declared above
+import { Vec4 as _Vec4 } from './Vec4.js';
+import { Rotor4D as _Rotor4D } from './Rotor4D.js';
+import { Mat4x4 as _Mat4x4 } from './Mat4x4.js';
+import { Projection as _Projection } from './Projection.js';
+
+export default { Vec4: _Vec4, Rotor4D: _Rotor4D, Mat4x4: _Mat4x4, Projection: _Projection };

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');