@vib3code/sdk 2.0.3-canary.91a95f3 → 2.0.3-canary.ef8d292

package/src/math/Rotor4D.js

@@ -324,53 +324,114 @@ export class Rotor4D {
      * Rotate a 4D vector using sandwich product: v' = R v R†
      *
      * @param {Vec4} v - Vector to rotate
+     * @param {Vec4} [target] - Optional target vector to write result to
      * @returns {Vec4} Rotated vector
      */
-    rotate(v) {
-        // For efficiency, we expand the sandwich product directly
-        // rather than doing two rotor multiplications
+    rotate(v, target) {
+        // Direct matrix multiplication without allocation
 
-        const x = v.x, y = v.y, z = v.z, w = v.w;
-
-        // Compute R v (rotor times vector)
-        // Vector in GA is: x*e1 + y*e2 + z*e3 + w*e4
-        // This produces a mixed multivector
-
-        // Then multiply by R† (reverse of rotor)
-        // Extract the vector part of the result
+        // Normalize components for stability (same as toMatrix)
+        const n = this.norm();
+        const invN = n > 1e-10 ? 1 / n : 1;
 
-        // Pre-compute some common terms
-        const s = this.s;
-        const xy = this.xy, xz = this.xz, yz = this.yz;
-        const xw = this.xw, yw = this.yw, zw = this.zw;
-        const xyzw = this.xyzw;
+        const s = this.s * invN;
+        const xy = this.xy * invN;
+        const xz = this.xz * invN;
+        const yz = this.yz * invN;
+        const xw = this.xw * invN;
+        const yw = this.yw * invN;
+        const zw = this.zw * invN;
+        const xyzw = this.xyzw * invN;
 
-        // Squared terms for the rotation formula
+        // Pre-compute products
         const s2 = s * s;
-        const xy2 = xy * xy, xz2 = xz * xz, yz2 = yz * yz;
-        const xw2 = xw * xw, yw2 = yw * yw, zw2 = zw * zw;
+        const xy2 = xy * xy;
+        const xz2 = xz * xz;
+        const yz2 = yz * yz;
+        const xw2 = xw * xw;
+        const yw2 = yw * yw;
+        const zw2 = zw * zw;
         const xyzw2 = xyzw * xyzw;
 
-        // The full rotation formula derived from R v R†
-        const newX =
-            x * (s2 + xy2 + xz2 - yz2 + xw2 - yw2 - zw2 - xyzw2) +
-            2 * y * (s * xy + xz * yz + xw * yw - s * xyzw * zw + xy * s - xyzw * zw) +
-            2 * z * (s * xz - xy * yz + xw * zw + xyzw * yw) +
-            2 * w * (s * xw - xy * yw - xz * zw - xyzw * yz);
-
-        // Simplified rotation using matrix form
-        // This is equivalent but clearer
-
-        // Actually, let's use the direct matrix multiplication approach
-        // which is more numerically stable
-
-        const m = this.toMatrix();
-        return new Vec4(
-            m[0] * x + m[4] * y + m[8] * z + m[12] * w,
-            m[1] * x + m[5] * y + m[9] * z + m[13] * w,
-            m[2] * x + m[6] * y + m[10] * z + m[14] * w,
-            m[3] * x + m[7] * y + m[11] * z + m[15] * w
-        );
+        // Cross terms
+        const sxy = 2 * s * xy;
+        const sxz = 2 * s * xz;
+        const syz = 2 * s * yz;
+        const sxw = 2 * s * xw;
+        const syw = 2 * s * yw;
+        const szw = 2 * s * zw;
+        // const sxyzw = 2 * s * xyzw; // Unused in rotation matrix
+
+        const xyxz = 2 * xy * xz;
+        const xyyz = 2 * xy * yz;
+        const xyxw = 2 * xy * xw;
+        const xyyw = 2 * xy * yw;
+        // const xyzw_c = 2 * xy * zw; // Unused in rotation matrix
+
+        const xzyz = 2 * xz * yz;
+        const xzxw = 2 * xz * xw;
+        const xzyw = 2 * xz * yw;
+        const xzzw = 2 * xz * zw;
+
+        const yzxw = 2 * yz * xw;
+        const yzyw = 2 * yz * yw;
+        const yzzw = 2 * yz * zw;
+
+        const xwyw = 2 * xw * yw;
+        const xwzw = 2 * xw * zw;
+        const ywzw = 2 * yw * zw;
+
+        const xyxyzw = 2 * xy * xyzw;
+        const xzxyzw = 2 * xz * xyzw;
+        const yzxyzw = 2 * yz * xyzw;
+        const xwxyzw = 2 * xw * xyzw;
+        const ywxyzw = 2 * yw * xyzw;
+        const zwxyzw = 2 * zw * xyzw;
+
+        // Matrix elements
+        // Col 0
+        const m00 = s2 - xy2 - xz2 + yz2 - xw2 + yw2 + zw2 - xyzw2;
+        const m01 = sxy + xzyz + xwyw - zwxyzw;
+        const m02 = sxz - xyyz + xwzw + ywxyzw;
+        const m03 = sxw - xyyw - xzzw - yzxyzw;
+
+        // Col 1
+        const m10 = -sxy + xzyz + xwyw + zwxyzw;
+        const m11 = s2 - xy2 + xz2 - yz2 + xw2 - yw2 + zw2 - xyzw2;
+        const m12 = syz + xyxz + ywzw - xwxyzw;
+        const m13 = syw + xyxw - yzzw + xzxyzw;
+
+        // Col 2
+        const m20 = -sxz - xyyz + xwzw - ywxyzw;
+        const m21 = -syz + xyxz + ywzw + xwxyzw;
+        const m22 = s2 + xy2 - xz2 - yz2 + xw2 + yw2 - zw2 - xyzw2;
+        const m23 = szw + xzxw + yzyw - xyxyzw;
+
+        // Col 3
+        const m30 = -sxw - xyyw - xzzw + yzxyzw;
+        const m31 = -syw + xyxw - yzzw - xzxyzw;
+        const m32 = -szw + xzxw + yzyw + xyxyzw;
+        const m33 = s2 + xy2 + xz2 + yz2 - xw2 - yw2 - zw2 - xyzw2;
+
+        const x = v.x;
+        const y = v.y;
+        const z = v.z;
+        const w = v.w;
+
+        const rx = m00 * x + m10 * y + m20 * z + m30 * w;
+        const ry = m01 * x + m11 * y + m21 * z + m31 * w;
+        const rz = m02 * x + m12 * y + m22 * z + m32 * w;
+        const rw = m03 * x + m13 * y + m23 * z + m33 * w;
+
+        if (target) {
+            target.x = rx;
+            target.y = ry;
+            target.z = rz;
+            target.w = rw;
+            return target;
+        }
+
+        return new Vec4(rx, ry, rz, rw);
     }
 
     /**

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/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;