@vib3code/sdk 2.0.3-canary.75a3290 → 2.0.3-canary.7b9491f

package/src/math/Vec4.js

@@ -2,7 +2,8 @@
  * Vec4 - 4D Vector Class
  *
  * Represents a point or direction in 4-dimensional space.
- * Uses Float32Array for GPU compatibility and potential SIMD optimization.
+ * Uses plain numeric properties internally for minimal allocation overhead.
+ * GPU-compatible Float32Array created on demand via toFloat32Array().
  *
  * @example
  * const v = new Vec4(1, 2, 3, 0.5);
@@ -19,26 +20,66 @@ export class Vec4 {
      * @param {number} w - W component (4th dimension)
      */
     constructor(x = 0, y = 0, z = 0, w = 0) {
-        // Use Float32Array for GPU compatibility
-        this.data = new Float32Array(4);
-        this.data[0] = x;
-        this.data[1] = y;
-        this.data[2] = z;
-        this.data[3] = w;
+        this._x = x;
+        this._y = y;
+        this._z = z;
+        this._w = w;
     }
 
-    // Property accessors for readability
-    get x() { return this.data[0]; }
-    set x(v) { this.data[0] = v; }
+    // Property accessors
+    get x() { return this._x; }
+    set x(v) { this._x = v; }
 
-    get y() { return this.data[1]; }
-    set y(v) { this.data[1] = v; }
+    get y() { return this._y; }
+    set y(v) { this._y = v; }
 
-    get z() { return this.data[2]; }
-    set z(v) { this.data[2] = v; }
+    get z() { return this._z; }
+    set z(v) { this._z = v; }
 
-    get w() { return this.data[3]; }
-    set w(v) { this.data[3] = v; }
+    get w() { return this._w; }
+    set w(v) { this._w = v; }
+
+    /**
+     * Backward-compatible .data getter.
+     * Returns a Float32Array snapshot of current values.
+     * Note: writes to the returned array do NOT propagate back.
+     * Use setComponent(index, value) for index-based mutation.
+     * @returns {Float32Array}
+     */
+    get data() {
+        return new Float32Array([this._x, this._y, this._z, this._w]);
+    }
+
+    /**
+     * Set a component by index (0=x, 1=y, 2=z, 3=w)
+     * @param {number} index - Component index (0-3)
+     * @param {number} value - New value
+     * @returns {Vec4} this
+     */
+    setComponent(index, value) {
+        switch (index) {
+            case 0: this._x = value; break;
+            case 1: this._y = value; break;
+            case 2: this._z = value; break;
+            case 3: this._w = value; break;
+        }
+        return this;
+    }
+
+    /**
+     * Get a component by index (0=x, 1=y, 2=z, 3=w)
+     * @param {number} index - Component index (0-3)
+     * @returns {number}
+     */
+    getComponent(index) {
+        switch (index) {
+            case 0: return this._x;
+            case 1: return this._y;
+            case 2: return this._z;
+            case 3: return this._w;
+            default: return 0;
+        }
+    }
 
     /**
      * Create a Vec4 from an array
@@ -54,7 +95,7 @@ export class Vec4 {
      * @returns {Vec4}
      */
     clone() {
-        return new Vec4(this.x, this.y, this.z, this.w);
+        return new Vec4(this._x, this._y, this._z, this._w);
     }
 
     /**
@@ -63,10 +104,10 @@ export class Vec4 {
      * @returns {Vec4} this (for chaining)
      */
     copy(v) {
-        this.data[0] = v.data[0];
-        this.data[1] = v.data[1];
-        this.data[2] = v.data[2];
-        this.data[3] = v.data[3];
+        this._x = v._x;
+        this._y = v._y;
+        this._z = v._z;
+        this._w = v._w;
         return this;
     }
 
@@ -79,24 +120,32 @@ export class Vec4 {
      * @returns {Vec4} this
      */
     set(x, y, z, w) {
-        this.data[0] = x;
-        this.data[1] = y;
-        this.data[2] = z;
-        this.data[3] = w;
+        this._x = x;
+        this._y = y;
+        this._z = z;
+        this._w = w;
         return this;
     }
 
     /**
-     * Add another vector (immutable)
+     * Add another vector (immutable unless target provided)
      * @param {Vec4} v
-     * @returns {Vec4} New vector
-     */
-    add(v) {
+     * @param {Vec4} [target=null] - Optional target vector
+     * @returns {Vec4} New vector or target
+     */
+    add(v, target = null) {
+        if (target) {
+            target._x = this._x + v._x;
+            target._y = this._y + v._y;
+            target._z = this._z + v._z;
+            target._w = this._w + v._w;
+            return target;
+        }
         return new Vec4(
-            this.x + v.x,
-            this.y + v.y,
-            this.z + v.z,
-            this.w + v.w
+            this._x + v._x,
+            this._y + v._y,
+            this._z + v._z,
+            this._w + v._w
         );
     }
 
@@ -106,24 +155,32 @@ export class Vec4 {
      * @returns {Vec4} this
      */
     addInPlace(v) {
-        this.data[0] += v.data[0];
-        this.data[1] += v.data[1];
-        this.data[2] += v.data[2];
-        this.data[3] += v.data[3];
+        this._x += v._x;
+        this._y += v._y;
+        this._z += v._z;
+        this._w += v._w;
         return this;
     }
 
     /**
-     * Subtract another vector (immutable)
+     * Subtract another vector (immutable unless target provided)
      * @param {Vec4} v
-     * @returns {Vec4} New vector
-     */
-    sub(v) {
+     * @param {Vec4} [target=null] - Optional target vector
+     * @returns {Vec4} New vector or target
+     */
+    sub(v, target = null) {
+        if (target) {
+            target._x = this._x - v._x;
+            target._y = this._y - v._y;
+            target._z = this._z - v._z;
+            target._w = this._w - v._w;
+            return target;
+        }
         return new Vec4(
-            this.x - v.x,
-            this.y - v.y,
-            this.z - v.z,
-            this.w - v.w
+            this._x - v._x,
+            this._y - v._y,
+            this._z - v._z,
+            this._w - v._w
         );
     }
 
@@ -133,24 +190,32 @@ export class Vec4 {
      * @returns {Vec4} this
      */
     subInPlace(v) {
-        this.data[0] -= v.data[0];
-        this.data[1] -= v.data[1];
-        this.data[2] -= v.data[2];
-        this.data[3] -= v.data[3];
+        this._x -= v._x;
+        this._y -= v._y;
+        this._z -= v._z;
+        this._w -= v._w;
         return this;
     }
 
     /**
-     * Multiply by scalar (immutable)
+     * Multiply by scalar (immutable unless target provided)
      * @param {number} s
-     * @returns {Vec4} New vector
-     */
-    scale(s) {
+     * @param {Vec4} [target=null] - Optional target vector
+     * @returns {Vec4} New vector or target
+     */
+    scale(s, target = null) {
+        if (target) {
+            target._x = this._x * s;
+            target._y = this._y * s;
+            target._z = this._z * s;
+            target._w = this._w * s;
+            return target;
+        }
         return new Vec4(
-            this.x * s,
-            this.y * s,
-            this.z * s,
-            this.w * s
+            this._x * s,
+            this._y * s,
+            this._z * s,
+            this._w * s
         );
     }
 
@@ -160,33 +225,49 @@ export class Vec4 {
      * @returns {Vec4} this
      */
     scaleInPlace(s) {
-        this.data[0] *= s;
-        this.data[1] *= s;
-        this.data[2] *= s;
-        this.data[3] *= s;
+        this._x *= s;
+        this._y *= s;
+        this._z *= s;
+        this._w *= s;
         return this;
     }
 
     /**
      * Component-wise multiply (Hadamard product)
      * @param {Vec4} v
-     * @returns {Vec4} New vector
-     */
-    multiply(v) {
+     * @param {Vec4} [target=null] - Optional target vector
+     * @returns {Vec4} New vector or target
+     */
+    multiply(v, target = null) {
+        if (target) {
+            target._x = this._x * v._x;
+            target._y = this._y * v._y;
+            target._z = this._z * v._z;
+            target._w = this._w * v._w;
+            return target;
+        }
         return new Vec4(
-            this.x * v.x,
-            this.y * v.y,
-            this.z * v.z,
-            this.w * v.w
+            this._x * v._x,
+            this._y * v._y,
+            this._z * v._z,
+            this._w * v._w
         );
     }
 
     /**
-     * Negate vector (immutable)
-     * @returns {Vec4} New vector
+     * Negate vector (immutable unless target provided)
+     * @param {Vec4} [target=null] - Optional target vector
+     * @returns {Vec4} New vector or target
      */
-    negate() {
-        return new Vec4(-this.x, -this.y, -this.z, -this.w);
+    negate(target = null) {
+        if (target) {
+            target._x = -this._x;
+            target._y = -this._y;
+            target._z = -this._z;
+            target._w = -this._w;
+            return target;
+        }
+        return new Vec4(-this._x, -this._y, -this._z, -this._w);
     }
 
     /**
@@ -194,10 +275,10 @@ export class Vec4 {
      * @returns {Vec4} this
      */
     negateInPlace() {
-        this.data[0] = -this.data[0];
-        this.data[1] = -this.data[1];
-        this.data[2] = -this.data[2];
-        this.data[3] = -this.data[3];
+        this._x = -this._x;
+        this._y = -this._y;
+        this._z = -this._z;
+        this._w = -this._w;
         return this;
     }
 
@@ -207,7 +288,7 @@ export class Vec4 {
      * @returns {number}
      */
     dot(v) {
-        return this.x * v.x + this.y * v.y + this.z * v.z + this.w * v.w;
+        return this._x * v._x + this._y * v._y + this._z * v._z + this._w * v._w;
     }
 
     /**
@@ -215,7 +296,7 @@ export class Vec4 {
      * @returns {number}
      */
     lengthSquared() {
-        return this.x * this.x + this.y * this.y + this.z * this.z + this.w * this.w;
+        return this._x * this._x + this._y * this._y + this._z * this._z + this._w * this._w;
     }
 
     /**
@@ -245,15 +326,23 @@ export class Vec4 {
     }
 
     /**
-     * Normalize to unit length (immutable)
-     * @returns {Vec4} New normalized vector
+     * Normalize to unit length (immutable unless target provided)
+     * @param {Vec4} [target=null] - Optional target vector
+     * @returns {Vec4} New normalized vector or target
      */
-    normalize() {
+    normalize(target = null) {
         const len = this.length();
         if (len < 1e-10) {
+            if (target) {
+                target._x = 0;
+                target._y = 0;
+                target._z = 0;
+                target._w = 0;
+                return target;
+            }
             return new Vec4(0, 0, 0, 0);
         }
-        return this.scale(1 / len);
+        return this.scale(1 / len, target);
     }
 
     /**
@@ -273,14 +362,22 @@ export class Vec4 {
      * Linear interpolation to another vector
      * @param {Vec4} v - Target vector
      * @param {number} t - Interpolation factor (0-1)
-     * @returns {Vec4} New interpolated vector
-     */
-    lerp(v, t) {
+     * @param {Vec4} [target=null] - Optional target vector
+     * @returns {Vec4} New interpolated vector or target
+     */
+    lerp(v, t, target = null) {
+        if (target) {
+            target._x = this._x + (v._x - this._x) * t;
+            target._y = this._y + (v._y - this._y) * t;
+            target._z = this._z + (v._z - this._z) * t;
+            target._w = this._w + (v._w - this._w) * t;
+            return target;
+        }
         return new Vec4(
-            this.x + (v.x - this.x) * t,
-            this.y + (v.y - this.y) * t,
-            this.z + (v.z - this.z) * t,
-            this.w + (v.w - this.w) * t
+            this._x + (v._x - this._x) * t,
+            this._y + (v._y - this._y) * t,
+            this._z + (v._z - this._z) * t,
+            this._w + (v._w - this._w) * t
         );
     }
 
@@ -292,10 +389,10 @@ export class Vec4 {
      */
     equals(v, epsilon = 1e-6) {
         return (
-            Math.abs(this.x - v.x) < epsilon &&
-            Math.abs(this.y - v.y) < epsilon &&
-            Math.abs(this.z - v.z) < epsilon &&
-            Math.abs(this.w - v.w) < epsilon
+            Math.abs(this._x - v._x) < epsilon &&
+            Math.abs(this._y - v._y) < epsilon &&
+            Math.abs(this._z - v._z) < epsilon &&
+            Math.abs(this._w - v._w) < epsilon
         );
     }
 
@@ -321,10 +418,10 @@ export class Vec4 {
             d = options.distance ?? options.d ?? 2;
         }
         const epsilon = options.epsilon ?? 1e-5;
-        const denom = d - this.w;
+        const denom = d - this._w;
         const clamped = Math.abs(denom) < epsilon ? (denom >= 0 ? epsilon : -epsilon) : denom;
         const scale = 1 / clamped;
-        return new Vec4(this.x * scale, this.y * scale, this.z * scale, 0);
+        return new Vec4(this._x * scale, this._y * scale, this._z * scale, 0);
     }
 
     /**
@@ -335,10 +432,10 @@ export class Vec4 {
      */
     projectStereographic(options = {}) {
         const epsilon = options.epsilon ?? 1e-5;
-        const denom = 1 - this.w;
+        const denom = 1 - this._w;
         const clamped = Math.abs(denom) < epsilon ? (denom >= 0 ? epsilon : -epsilon) : denom;
         const scale = 1 / clamped;
-        return new Vec4(this.x * scale, this.y * scale, this.z * scale, 0);
+        return new Vec4(this._x * scale, this._y * scale, this._z * scale, 0);
     }
 
     /**
@@ -347,7 +444,7 @@ export class Vec4 {
      * @returns {Vec4} Projected point (w component is 0)
      */
     projectOrthographic() {
-        return new Vec4(this.x, this.y, this.z, 0);
+        return new Vec4(this._x, this._y, this._z, 0);
     }
 
     /**
@@ -355,7 +452,7 @@ export class Vec4 {
      * @returns {number[]}
      */
     toArray() {
-        return [this.x, this.y, this.z, this.w];
+        return [this._x, this._y, this._z, this._w];
     }
 
     /**
@@ -363,7 +460,7 @@ export class Vec4 {
      * @returns {Float32Array}
      */
     toFloat32Array() {
-        return new Float32Array(this.data);
+        return new Float32Array([this._x, this._y, this._z, this._w]);
     }
 
     /**
@@ -371,7 +468,7 @@ export class Vec4 {
      * @returns {number[]}
      */
     toArray3() {
-        return [this.x, this.y, this.z];
+        return [this._x, this._y, this._z];
     }
 
     /**
@@ -380,7 +477,7 @@ export class Vec4 {
      * @returns {string}
      */
     toString(precision = 3) {
-        return `Vec4(${this.x.toFixed(precision)}, ${this.y.toFixed(precision)}, ${this.z.toFixed(precision)}, ${this.w.toFixed(precision)})`;
+        return `Vec4(${this._x.toFixed(precision)}, ${this._y.toFixed(precision)}, ${this._z.toFixed(precision)}, ${this._w.toFixed(precision)})`;
     }
 
     /**
@@ -388,7 +485,7 @@ export class Vec4 {
      * @returns {object}
      */
     toJSON() {
-        return { x: this.x, y: this.y, z: this.z, w: this.w };
+        return { x: this._x, y: this._y, z: this._z, w: this._w };
     }
 
     // Static factory methods for common vectors

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/render/ShaderLoader.js

@@ -199,6 +199,44 @@ export class ShaderLoader {
         return results;
     }
 
+    /**
+     * Resolve #include directives in shader source.
+     * GLSL: #include "common/rotation4d.glsl"
+     * WGSL: // @include "common/rotation4d.wgsl"
+     *
+     * Includes are resolved from the loader's cache (call loadCommonLibrary() first).
+     * Non-recursive — only resolves one level of includes.
+     *
+     * @param {string} source - Shader source with include directives
+     * @returns {string} Resolved shader source
+     */
+    resolveIncludes(source) {
+        if (!source) return source;
+
+        // GLSL: #include "path"
+        // WGSL: // @include "path"
+        const includeRegex = /(?:^|\n)\s*(?:#include|\/\/\s*@include)\s+"([^"]+)"\s*(?:\n|$)/g;
+
+        return source.replace(includeRegex, (match, path) => {
+            const cached = this._cache.get(path);
+            if (cached) {
+                return '\n// --- included from ' + path + ' ---\n' + cached + '\n// --- end ' + path + ' ---\n';
+            }
+            console.warn(`ShaderLoader: Include not found in cache: "${path}" — load it first via loadCommonLibrary()`);
+            return match; // Leave directive in place if not found
+        });
+    }
+
+    /**
+     * Load a shader file and resolve includes.
+     * @param {string} relativePath
+     * @returns {Promise<string|null>}
+     */
+    async loadAndResolve(relativePath) {
+        const source = await this.load(relativePath);
+        return source ? this.resolveIncludes(source) : null;
+    }
+
     /**
      * Clear all cached shaders.
      */

package/src/render/ShaderProgram.js

@@ -384,10 +384,10 @@ export const ShaderLib = {
         mat4 rotateXZ(float angle) {
             float c = cos(angle), s = sin(angle);
             return mat4(
-                c, 0, -s, 0,
-                0, 1,  0, 0,
-                s, 0,  c, 0,
-                0, 0,  0, 1
+                c, 0, s, 0,
+                0, 1, 0, 0,
+               -s, 0, c, 0,
+                0, 0, 0, 1
             );
         }
 

package/src/render/UnifiedRenderBridge.js

@@ -25,7 +25,7 @@ import { createWebGPUBackend, isWebGPUSupported, WGSLShaderLib } from './backend
  * @returns {Float32Array}
  */
 function packVIB3Uniforms(uniforms) {
-    // Total: 32 floats = 128 bytes → aligned to 256 bytes in buffer
+    // Total: 33 floats (indices 0-32) = 132 bytes → padded to 256 bytes in buffer
     const data = new Float32Array(64); // 256 bytes
 
     data[0] = uniforms.u_time || 0;