@vib3code/sdk 2.0.1

package/src/config/ApiConfig.js

@@ -0,0 +1,88 @@
+/**
+ * API Configuration for VIB34D
+ * Manages API keys and service configurations
+ */
+
+export class ApiConfig {
+    constructor() {
+        this.keys = {
+            gemini: null
+        };
+        
+        this.endpoints = {
+            gemini: 'https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-flash:generateContent'
+        };
+        
+        this.loadFromStorage();
+    }
+    
+    /**
+     * Load API keys from localStorage
+     */
+    loadFromStorage() {
+        const storedKeys = localStorage.getItem('vib34d-api-keys');
+        if (storedKeys) {
+            try {
+                const parsed = JSON.parse(storedKeys);
+                Object.assign(this.keys, parsed);
+                console.log('🔑 API keys loaded from storage');
+            } catch (error) {
+                console.error('Error loading API keys:', error);
+            }
+        }
+    }
+    
+    /**
+     * Save API keys to localStorage
+     */
+    saveToStorage() {
+        localStorage.setItem('vib34d-api-keys', JSON.stringify(this.keys));
+        console.log('💾 API keys saved to storage');
+    }
+    
+    /**
+     * Set Gemini API key
+     */
+    setGeminiKey(apiKey) {
+        this.keys.gemini = apiKey;
+        this.saveToStorage();
+    }
+    
+    /**
+     * Get Gemini API key
+     */
+    getGeminiKey() {
+        return this.keys.gemini;
+    }
+    
+    /**
+     * Check if Gemini is configured
+     */
+    isGeminiConfigured() {
+        return !!this.keys.gemini;
+    }
+    
+    /**
+     * Clear all API keys
+     */
+    clearKeys() {
+        this.keys = {
+            gemini: null
+        };
+        localStorage.removeItem('vib34d-api-keys');
+        console.log('🗑️ API keys cleared');
+    }
+    
+    /**
+     * Get API endpoint URL with key
+     */
+    getGeminiEndpoint() {
+        if (!this.keys.gemini) {
+            throw new Error('Gemini API key not configured');
+        }
+        return `${this.endpoints.gemini}?key=${this.keys.gemini}`;
+    }
+}
+
+// Export singleton instance
+export const apiConfig = new ApiConfig();

package/src/core/CanvasManager.js

@@ -0,0 +1,217 @@
+/**
+ * Dead Simple Canvas Manager - Just hide/show containers + fresh engines
+ * No canvas destruction - HTML canvases stay put, just switch visibility
+ */
+
+export class CanvasManager {
+  constructor() {
+    this.currentSystem = null;
+    this.currentEngine = null;
+  }
+
+  async switchToSystem(systemName, engineClasses) {
+    console.log(`🔄 DESTROY OLD → CREATE NEW: ${systemName}`);
+    
+    // STEP 1: DESTROY current engine completely
+    if (this.currentEngine) {
+      if (this.currentEngine.setActive) {
+        this.currentEngine.setActive(false);
+      }
+      if (this.currentEngine.destroy) {
+        this.currentEngine.destroy();
+      }
+      console.log('💥 Old engine destroyed');
+    }
+    
+    // STEP 2: DESTROY old WebGL contexts 
+    this.destroyOldWebGLContexts();
+    
+    // STEP 3: DESTROY all canvases + CREATE 5 fresh ones
+    this.destroyAllCanvasesAndCreateFresh(systemName);
+    
+    // STEP 4: CREATE fresh engine
+    const engine = await this.createFreshEngine(systemName, engineClasses);
+    
+    // STEP 5: Start new engine
+    if (engine && engine.setActive) {
+      engine.setActive(true);
+    }
+    
+    this.currentSystem = systemName;
+    this.currentEngine = engine;
+    console.log(`✅ DESTROY → CREATE complete: ${systemName} ready`);
+    return engine;
+  }
+
+  destroyOldWebGLContexts() {
+    console.log('💥 COMPLETE DESTRUCTION: WebGL contexts + old system cleanup...');
+    
+    // STEP 1: Kill all WebGL contexts first
+    const allCanvases = document.querySelectorAll('canvas');
+    let destroyedCount = 0;
+    
+    allCanvases.forEach(canvas => {
+      // Get any existing WebGL context
+      const gl = canvas.getContext('webgl2') || canvas.getContext('webgl');
+      if (gl) {
+        // Force context loss
+        const loseContextExt = gl.getExtension('WEBGL_lose_context');
+        if (loseContextExt) {
+          loseContextExt.loseContext();
+          destroyedCount++;
+        }
+      }
+    });
+    
+    // STEP 2: Clear all global engine references (old system cleanup)
+    if (window.engine) {
+      console.log('💥 Clearing window.engine');
+      window.engine = null;
+    }
+    if (window.quantumEngine) {
+      console.log('💥 Clearing window.quantumEngine');
+      window.quantumEngine = null;
+    }
+    if (window.holographicSystem) {
+      console.log('💥 Clearing window.holographicSystem');
+      window.holographicSystem = null;
+    }
+    if (window.polychoraSystem) {
+      console.log('💥 Clearing window.polychoraSystem');
+      window.polychoraSystem = null;
+    }
+    
+    console.log(`💥 DESTRUCTION COMPLETE: ${destroyedCount} WebGL contexts destroyed, all engine refs cleared`);
+  }
+
+  destroyAllCanvasesAndCreateFresh(systemName) {
+    console.log('💥 DESTROYING ALL CANVASES + CREATING 5 FRESH ONES');
+    
+    // STEP 1: DESTROY all existing canvases completely
+    const allCanvases = document.querySelectorAll('canvas');
+    allCanvases.forEach(canvas => canvas.remove());
+    console.log(`💥 Destroyed ${allCanvases.length} old canvases`);
+    
+    // STEP 2: Clear all containers
+    const containers = ['vib34dLayers', 'quantumLayers', 'holographicLayers', 'polychoraLayers'];
+    containers.forEach(containerId => {
+      const container = document.getElementById(containerId);
+      if (container) {
+        container.innerHTML = '';
+        container.style.display = 'none';
+      }
+    });
+    
+    // STEP 3: CREATE 5 fresh canvases for the new system
+    const targetId = systemName === 'faceted' ? 'vib34dLayers' : `${systemName}Layers`;
+    const targetContainer = document.getElementById(targetId);
+    
+    if (!targetContainer) {
+      console.error(`❌ Container ${targetId} not found`);
+      return;
+    }
+    
+    // Create canvas IDs for this system
+    const canvasIds = this.getCanvasIdsForSystem(systemName);
+    
+    // Create 5 fresh canvases
+    canvasIds.forEach((canvasId, index) => {
+      const canvas = document.createElement('canvas');
+      canvas.id = canvasId;
+      canvas.className = 'visualization-canvas';
+      canvas.style.position = 'absolute';
+      canvas.style.top = '0';
+      canvas.style.left = '0';
+      canvas.style.width = '100%';
+      canvas.style.height = '100%';
+      canvas.style.zIndex = index + 1;
+      
+      // Set canvas dimensions
+      const viewWidth = window.innerWidth;
+      const viewHeight = window.innerHeight;
+      const dpr = Math.min(window.devicePixelRatio || 1, 2);
+      canvas.width = viewWidth * dpr;
+      canvas.height = viewHeight * dpr;
+      
+      targetContainer.appendChild(canvas);
+    });
+    
+    // Show the target container
+    targetContainer.style.display = 'block';
+    targetContainer.style.visibility = 'visible';
+    targetContainer.style.opacity = '1';
+    
+    console.log(`✅ Created 5 fresh canvases for ${systemName}: ${canvasIds.join(', ')}`);
+  }
+  
+  getCanvasIdsForSystem(systemName) {
+    const baseIds = ['background-canvas', 'shadow-canvas', 'content-canvas', 'highlight-canvas', 'accent-canvas'];
+    
+    switch (systemName) {
+      case 'faceted':
+        return baseIds;
+      case 'quantum':
+        return baseIds.map(id => `quantum-${id}`);
+      case 'holographic':
+        return baseIds.map(id => `holo-${id}`);
+      case 'polychora':
+        return baseIds.map(id => `polychora-${id}`);
+      default:
+        return baseIds;
+    }
+  }
+  
+  async createFreshEngine(systemName, engineClasses) {
+    console.log(`🚀 Creating fresh ${systemName} engine`);
+    
+    let engine = null;
+    
+    try {
+      switch(systemName) {
+        case 'faceted':
+          if (engineClasses.VIB34DIntegratedEngine) {
+            engine = new engineClasses.VIB34DIntegratedEngine();
+            window.engine = engine;
+            console.log('✅ Fresh Faceted engine');
+          }
+          break;
+          
+        case 'quantum':
+          if (engineClasses.QuantumEngine) {
+            engine = new engineClasses.QuantumEngine();
+            window.quantumEngine = engine;
+            console.log('✅ Fresh Quantum engine');
+          }
+          break;
+          
+        case 'holographic':
+          if (engineClasses.RealHolographicSystem) {
+            engine = new engineClasses.RealHolographicSystem();
+            window.holographicSystem = engine;
+            console.log('✅ Fresh Holographic engine');
+          }
+          break;
+          
+        case 'polychora':
+          // POLYCHORA: TBD placeholder - not production ready
+          // Engine disabled until system is complete
+          console.warn('⚠️ Polychora system is TBD placeholder - not available');
+          if (false && engineClasses.NewPolychoraEngine) {
+            engine = new engineClasses.NewPolychoraEngine();
+            window.newPolychoraEngine = engine;
+            console.log('✅ Fresh TRUE 4D Polychora Engine with VIB34D DNA');
+          }
+          break;
+          
+        default:
+          console.error(`❌ Unknown system: ${systemName}`);
+      }
+      
+    } catch (error) {
+      console.error(`💥 Engine creation failed for ${systemName}:`, error);
+      engine = null;
+    }
+    
+    return engine;
+  }
+}

package/src/core/ErrorReporter.js

@@ -0,0 +1,117 @@
+/**
+ * VIB3+ Opt-in Error Reporter
+ *
+ * Captures unhandled errors and rejections for crash telemetry.
+ * OFF by default. Must be explicitly enabled by the host application.
+ *
+ * Usage:
+ *   import { ErrorReporter } from '@vib3code/sdk/core/error-reporter';
+ *   const reporter = new ErrorReporter({ endpoint: '/api/errors' });
+ *   reporter.enable();
+ *
+ * No data is sent unless enable() is called. All reports are anonymized
+ * (no user IDs, no cookies, no PII).
+ */
+
+export class ErrorReporter {
+
+    /**
+     * @param {Object} [options]
+     * @param {string} [options.endpoint] - URL to POST error reports to
+     * @param {Function} [options.onError] - Custom callback instead of HTTP POST
+     * @param {number} [options.maxReports=50] - Max reports per session (rate limiting)
+     * @param {boolean} [options.includeStack=true] - Include stack traces
+     */
+    constructor(options = {}) {
+        this._endpoint = options.endpoint || null;
+        this._onError = typeof options.onError === 'function' ? options.onError : null;
+        this._maxReports = options.maxReports ?? 50;
+        this._includeStack = options.includeStack !== false;
+        this._reportCount = 0;
+        this._enabled = false;
+        this._boundOnError = this._handleError.bind(this);
+        this._boundOnRejection = this._handleRejection.bind(this);
+    }
+
+    /** Enable error capture. Must be called explicitly. */
+    enable() {
+        if (this._enabled || typeof window === 'undefined') return;
+        this._enabled = true;
+        window.addEventListener('error', this._boundOnError);
+        window.addEventListener('unhandledrejection', this._boundOnRejection);
+    }
+
+    /** Disable error capture and remove listeners. */
+    disable() {
+        if (!this._enabled || typeof window === 'undefined') return;
+        this._enabled = false;
+        window.removeEventListener('error', this._boundOnError);
+        window.removeEventListener('unhandledrejection', this._boundOnRejection);
+    }
+
+    /** @returns {boolean} Whether the reporter is active */
+    get isEnabled() {
+        return this._enabled;
+    }
+
+    /** @private */
+    _handleError(event) {
+        this._report({
+            type: 'error',
+            message: event.message || 'Unknown error',
+            filename: event.filename || '',
+            lineno: event.lineno || 0,
+            colno: event.colno || 0,
+            stack: this._includeStack && event.error ? event.error.stack : undefined,
+        });
+    }
+
+    /** @private */
+    _handleRejection(event) {
+        const reason = event.reason;
+        this._report({
+            type: 'unhandledrejection',
+            message: reason instanceof Error ? reason.message : String(reason),
+            stack: this._includeStack && reason instanceof Error ? reason.stack : undefined,
+        });
+    }
+
+    /** @private */
+    _report(data) {
+        if (this._reportCount >= this._maxReports) return;
+        this._reportCount++;
+
+        const report = {
+            ...data,
+            timestamp: Date.now(),
+            url: typeof location !== 'undefined' ? location.pathname : '',
+            userAgent: typeof navigator !== 'undefined' ? navigator.userAgent : '',
+            sdkVersion: '2.0.0',
+        };
+
+        // Custom callback takes priority
+        if (this._onError) {
+            try { this._onError(report); } catch (_) { /* swallow */ }
+            return;
+        }
+
+        // HTTP POST if endpoint configured
+        if (this._endpoint && typeof fetch === 'function') {
+            fetch(this._endpoint, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(report),
+                keepalive: true,
+            }).catch(() => { /* swallow network errors */ });
+        }
+    }
+
+    /** Destroy reporter and clean up. */
+    dispose() {
+        this.disable();
+        this._onError = null;
+        this._endpoint = null;
+    }
+}
+
+export default ErrorReporter;