@vib3code/sdk 2.0.3-canary.91a95f3 → 2.0.3-canary.98b84da

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);
@@ -688,11 +700,12 @@ void main() {
     
     // 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;
@@ -1016,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
@@ -1068,7 +1072,7 @@ 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');

package/src/render/LayerPresetManager.js

@@ -0,0 +1,372 @@
+/**
+ * LayerPresetManager — Save, load, tune, and share layer relationship presets
+ *
+ * Works with LayerRelationshipGraph to persist custom layer configurations.
+ * Users and agents can:
+ *   - Save the current graph state as a named preset
+ *   - Load presets by name
+ *   - Tune individual relationship parameters at runtime
+ *   - Import/export preset libraries as JSON
+ *   - List available presets (built-in + user)
+ *
+ * Storage: localStorage by default, configurable via constructor.
+ *
+ * Usage:
+ *   const presets = new LayerPresetManager(graph);
+ *   presets.save('my-look');                          // save current graph
+ *   presets.load('my-look');                          // restore to graph
+ *   presets.tune('shadow', { opacity: 0.6, gain: 3 }); // tweak a layer
+ *   const lib = presets.exportLibrary();              // full JSON export
+ *   presets.importLibrary(lib);                       // bulk import
+ */
+
+import { LayerRelationshipGraph, PROFILES, PRESET_REGISTRY } from './LayerRelationshipGraph.js';
+
+const STORAGE_KEY = 'vib3_layer_presets';
+
+export class LayerPresetManager {
+    /**
+     * @param {LayerRelationshipGraph} graph - The live graph to save from / load into
+     * @param {object} [options]
+     * @param {Storage} [options.storage] - Storage backend (default: localStorage)
+     * @param {string} [options.storageKey] - Key prefix for storage
+     */
+    constructor(graph, options = {}) {
+        if (!(graph instanceof LayerRelationshipGraph)) {
+            throw new Error('LayerPresetManager requires a LayerRelationshipGraph instance');
+        }
+
+        /** @type {LayerRelationshipGraph} */
+        this._graph = graph;
+
+        /** @type {Storage|null} */
+        this._storage = options.storage !== undefined ? options.storage : this._getStorage();
+
+        /** @type {string} */
+        this._storageKey = options.storageKey || STORAGE_KEY;
+
+        /** @type {Map<string, object>} In-memory preset cache */
+        this._presets = new Map();
+
+        // Load persisted presets into memory
+        this._loadFromStorage();
+    }
+
+    /**
+     * Get localStorage safely (returns null in non-browser / restricted environments).
+     * @private
+     * @returns {Storage|null}
+     */
+    _getStorage() {
+        try {
+            if (typeof localStorage !== 'undefined') {
+                // Verify it works
+                localStorage.setItem('__vib3_test', '1');
+                localStorage.removeItem('__vib3_test');
+                return localStorage;
+            }
+        } catch (_e) { /* restricted */ }
+        return null;
+    }
+
+    /**
+     * Load all presets from storage into the in-memory cache.
+     * @private
+     */
+    _loadFromStorage() {
+        if (!this._storage) return;
+
+        try {
+            const raw = this._storage.getItem(this._storageKey);
+            if (raw) {
+                const data = JSON.parse(raw);
+                if (data && typeof data === 'object') {
+                    for (const [name, preset] of Object.entries(data)) {
+                        this._presets.set(name, preset);
+                    }
+                }
+            }
+        } catch (e) {
+            console.warn('LayerPresetManager: failed to load presets from storage:', e.message);
+        }
+    }
+
+    /**
+     * Persist the in-memory preset cache to storage.
+     * @private
+     */
+    _saveToStorage() {
+        if (!this._storage) return;
+
+        try {
+            const data = {};
+            for (const [name, preset] of this._presets) {
+                data[name] = preset;
+            }
+            this._storage.setItem(this._storageKey, JSON.stringify(data));
+        } catch (e) {
+            console.warn('LayerPresetManager: failed to save presets to storage:', e.message);
+        }
+    }
+
+    // ========================================================================
+    // Save / Load
+    // ========================================================================
+
+    /**
+     * Save the current graph state as a named preset.
+     *
+     * @param {string} name - Preset name (must not collide with built-in profile names)
+     * @param {object} [metadata] - Optional metadata (description, author, tags)
+     * @returns {object} The saved preset data
+     */
+    save(name, metadata = {}) {
+        if (!name || typeof name !== 'string') {
+            throw new Error('Preset name must be a non-empty string');
+        }
+
+        if (PROFILES[name]) {
+            throw new Error(`Cannot overwrite built-in profile "${name}". Choose a different name.`);
+        }
+
+        const config = this._graph.exportConfig();
+        const preset = {
+            name,
+            config,
+            metadata: {
+                ...metadata,
+                createdAt: new Date().toISOString(),
+                updatedAt: new Date().toISOString()
+            }
+        };
+
+        this._presets.set(name, preset);
+        this._saveToStorage();
+
+        return preset;
+    }
+
+    /**
+     * Load a preset by name into the live graph.
+     * Checks user presets first, then built-in profiles.
+     *
+     * @param {string} name - Preset or profile name
+     * @returns {boolean} True if loaded successfully
+     */
+    load(name) {
+        // User preset
+        const preset = this._presets.get(name);
+        if (preset && preset.config) {
+            this._graph.importConfig(preset.config);
+            return true;
+        }
+
+        // Built-in profile
+        if (PROFILES[name]) {
+            this._graph.loadProfile(name);
+            return true;
+        }
+
+        return false;
+    }
+
+    /**
+     * Delete a user preset.
+     *
+     * @param {string} name
+     * @returns {boolean} True if deleted
+     */
+    delete(name) {
+        if (PROFILES[name]) {
+            throw new Error(`Cannot delete built-in profile "${name}".`);
+        }
+
+        const existed = this._presets.delete(name);
+        if (existed) {
+            this._saveToStorage();
+        }
+        return existed;
+    }
+
+    /**
+     * Check if a preset exists (user or built-in).
+     *
+     * @param {string} name
+     * @returns {boolean}
+     */
+    has(name) {
+        return this._presets.has(name) || !!PROFILES[name];
+    }
+
+    /**
+     * Get a preset's data without loading it.
+     *
+     * @param {string} name
+     * @returns {object|null}
+     */
+    get(name) {
+        return this._presets.get(name) || null;
+    }
+
+    // ========================================================================
+    // List / Browse
+    // ========================================================================
+
+    /**
+     * List all available presets (user + built-in).
+     *
+     * @returns {{ user: string[], builtIn: string[] }}
+     */
+    list() {
+        return {
+            user: Array.from(this._presets.keys()),
+            builtIn: Object.keys(PROFILES)
+        };
+    }
+
+    /**
+     * List all preset names (user + built-in) as a flat array.
+     *
+     * @returns {string[]}
+     */
+    listAll() {
+        return [
+            ...Object.keys(PROFILES),
+            ...Array.from(this._presets.keys())
+        ];
+    }
+
+    /**
+     * Get the count of user presets.
+     *
+     * @returns {number}
+     */
+    get count() {
+        return this._presets.size;
+    }
+
+    // ========================================================================
+    // Tune
+    // ========================================================================
+
+    /**
+     * Tune (hot-patch) a layer's relationship config without replacing the full graph.
+     * Re-instantiates the relationship function with updated config.
+     *
+     * @param {string} layerName - Layer to tune
+     * @param {object} configOverrides - Config values to merge (e.g., { opacity: 0.6, gain: 3 })
+     * @returns {boolean} True if tuned successfully
+     */
+    tune(layerName, configOverrides) {
+        if (!configOverrides || typeof configOverrides !== 'object') return false;
+
+        // Read current config for this layer from the graph
+        const graphConfig = this._graph.exportConfig();
+        const currentRel = graphConfig.relationships[layerName];
+
+        if (!currentRel || !currentRel.preset) {
+            // Can't tune a custom function or missing relationship
+            return false;
+        }
+
+        const factory = PRESET_REGISTRY[currentRel.preset];
+        if (!factory) return false;
+
+        // Merge overrides into existing config
+        const newConfig = { ...(currentRel.config || {}), ...configOverrides };
+
+        // Re-set the relationship with updated config
+        this._graph.setRelationship(layerName, {
+            preset: currentRel.preset,
+            config: newConfig
+        });
+
+        return true;
+    }
+
+    /**
+     * Get the current tunable config for a layer.
+     *
+     * @param {string} layerName
+     * @returns {object|null} The current { preset, config } or null
+     */
+    getLayerConfig(layerName) {
+        const graphConfig = this._graph.exportConfig();
+        return graphConfig.relationships[layerName] || null;
+    }
+
+    // ========================================================================
+    // Import / Export
+    // ========================================================================
+
+    /**
+     * Export all user presets as a JSON-serializable library.
+     *
+     * @returns {object} Library object with version and presets
+     */
+    exportLibrary() {
+        const presets = {};
+        for (const [name, preset] of this._presets) {
+            presets[name] = preset;
+        }
+
+        return {
+            version: '1.0',
+            type: 'vib3_layer_presets',
+            exportedAt: new Date().toISOString(),
+            count: this._presets.size,
+            presets
+        };
+    }
+
+    /**
+     * Import presets from a library object.
+     * Does not overwrite existing presets unless `overwrite` is true.
+     *
+     * @param {object} library - Library object from exportLibrary()
+     * @param {object} [options]
+     * @param {boolean} [options.overwrite=false] - Overwrite existing presets
+     * @returns {{ imported: number, skipped: number }}
+     */
+    importLibrary(library, options = {}) {
+        const { overwrite = false } = options;
+
+        if (!library || !library.presets || typeof library.presets !== 'object') {
+            throw new Error('Invalid library format: missing presets object');
+        }
+
+        let imported = 0;
+        let skipped = 0;
+
+        for (const [name, preset] of Object.entries(library.presets)) {
+            if (PROFILES[name]) {
+                skipped++;
+                continue; // Never overwrite built-in profiles
+            }
+
+            if (!overwrite && this._presets.has(name)) {
+                skipped++;
+                continue;
+            }
+
+            this._presets.set(name, preset);
+            imported++;
+        }
+
+        if (imported > 0) {
+            this._saveToStorage();
+        }
+
+        return { imported, skipped };
+    }
+
+    /**
+     * Clear all user presets.
+     */
+    clear() {
+        this._presets.clear();
+        this._saveToStorage();
+    }
+}
+
+export default LayerPresetManager;