@vib3code/sdk 2.0.1

package/src/ui/adaptive/renderers/webgpu/index.ts

@@ -0,0 +1,112 @@
+/**
+ * VIB3+ WebGPU Module
+ * Experimental WebGPU backend for 4D visualization
+ *
+ * @fileoverview WebGPU feature flags and exports
+ *
+ * Usage:
+ *   import { WebGPURenderer, enableWebGPU } from './webgpu';
+ *
+ *   // Check and enable WebGPU
+ *   if (await WebGPURenderer.isAvailable()) {
+ *     enableWebGPU();
+ *     const renderer = new WebGPURenderer();
+ *     await renderer.init({ canvas: myCanvas });
+ *   }
+ */
+
+// Re-export components
+export { BufferLayout, createStd140Layout, createStd430Layout, GlassUniformLayout } from './BufferLayout.ts';
+export { TripleBufferedUniform } from './TripleBufferedUniform.ts';
+export { PolytopeInstanceBuffer } from './PolytopeInstanceBuffer.ts';
+export { WebGPURenderer } from './WebGPURenderer.ts';
+
+/**
+ * WebGPU feature flags
+ * Set enabled=true to activate WebGPU backend
+ */
+export const WEBGPU_FEATURE_FLAGS = {
+  enabled: false,
+  reason: 'WebGPU backend is experimental; enable explicitly in host apps.',
+  fallback: 'webgl2' as 'webgl' | 'webgl2' | 'canvas2d',
+  debug: false
+};
+
+/**
+ * Check if WebGPU is currently enabled
+ */
+export function isWebGPUEnabled(): boolean {
+  return WEBGPU_FEATURE_FLAGS.enabled;
+}
+
+/**
+ * Enable WebGPU backend
+ * @param options - Optional configuration
+ */
+export function enableWebGPU(options?: {
+  fallback?: 'webgl' | 'webgl2' | 'canvas2d';
+  debug?: boolean;
+}): void {
+  WEBGPU_FEATURE_FLAGS.enabled = true;
+  WEBGPU_FEATURE_FLAGS.reason = 'Enabled by application';
+  if (options?.fallback) {
+    WEBGPU_FEATURE_FLAGS.fallback = options.fallback;
+  }
+  if (options?.debug !== undefined) {
+    WEBGPU_FEATURE_FLAGS.debug = options.debug;
+  }
+}
+
+/**
+ * Disable WebGPU backend
+ */
+export function disableWebGPU(): void {
+  WEBGPU_FEATURE_FLAGS.enabled = false;
+  WEBGPU_FEATURE_FLAGS.reason = 'Disabled by application';
+}
+
+/**
+ * Check WebGPU support in current environment
+ * @returns Promise<boolean> true if WebGPU is supported
+ */
+export async function checkWebGPUSupport(): Promise<{
+  supported: boolean;
+  reason: string;
+  adapter?: unknown;
+}> {
+  if (typeof navigator === 'undefined') {
+    return { supported: false, reason: 'Not in browser environment' };
+  }
+
+  if (!navigator.gpu) {
+    return { supported: false, reason: 'WebGPU API not available' };
+  }
+
+  try {
+    const adapter = await navigator.gpu.requestAdapter();
+    if (!adapter) {
+      return { supported: false, reason: 'No GPU adapter available' };
+    }
+    return { supported: true, reason: 'WebGPU available', adapter };
+  } catch (error) {
+    return {
+      supported: false,
+      reason: `WebGPU initialization failed: ${error instanceof Error ? error.message : 'Unknown error'}`
+    };
+  }
+}
+
+/**
+ * Get the appropriate renderer based on feature flags and support
+ * @returns 'webgpu' | 'webgl2' | 'webgl' | 'canvas2d'
+ */
+export async function getPreferredRenderer(): Promise<'webgpu' | 'webgl2' | 'webgl' | 'canvas2d'> {
+  if (WEBGPU_FEATURE_FLAGS.enabled) {
+    const support = await checkWebGPUSupport();
+    if (support.supported) {
+      return 'webgpu';
+    }
+    console.warn(`WebGPU not available: ${support.reason}. Falling back to ${WEBGPU_FEATURE_FLAGS.fallback}`);
+  }
+  return WEBGPU_FEATURE_FLAGS.fallback;
+}

package/src/variations/VariationManager.js

@@ -0,0 +1,431 @@
+/**
+ * VIB34D Variation Management System
+ * Manages 100 total variations: 30 default + 70 custom
+ */
+
+import { GeometryLibrary } from '../geometry/GeometryLibrary.js';
+
+export class VariationManager {
+    /**
+     * Sanitize a variation name to prevent XSS and enforce limits.
+     * @param {*} name
+     * @param {string} fallback
+     * @returns {string}
+     */
+    static sanitizeName(name, fallback = 'Unnamed') {
+        if (typeof name !== 'string') return fallback;
+        // Strip HTML tags and limit length
+        const clean = name.replace(/<[^>]*>/g, '').trim();
+        if (clean.length === 0) return fallback;
+        return clean.slice(0, 100);
+    }
+
+    constructor(engine) {
+        this.engine = engine;
+        
+        // Default variation names (30 total)
+        this.variationNames = [
+            // Tetrahedron Lattice (0-3)
+            'TETRAHEDRON LATTICE 1', 'TETRAHEDRON LATTICE 2', 'TETRAHEDRON LATTICE 3', 'TETRAHEDRON LATTICE 4',
+            
+            // Hypercube Lattice (4-7)
+            'HYPERCUBE LATTICE 1', 'HYPERCUBE LATTICE 2', 'HYPERCUBE LATTICE 3', 'HYPERCUBE LATTICE 4',
+            
+            // Sphere Lattice (8-11)
+            'SPHERE LATTICE 1', 'SPHERE LATTICE 2', 'SPHERE LATTICE 3', 'SPHERE LATTICE 4',
+            
+            // Torus Lattice (12-15)
+            'TORUS LATTICE 1', 'TORUS LATTICE 2', 'TORUS LATTICE 3', 'TORUS LATTICE 4',
+            
+            // Klein Bottle Lattice (16-19)
+            'KLEIN BOTTLE LATTICE 1', 'KLEIN BOTTLE LATTICE 2', 'KLEIN BOTTLE LATTICE 3', 'KLEIN BOTTLE LATTICE 4',
+            
+            // Fractal Lattice (20-22)
+            'FRACTAL LATTICE 1', 'FRACTAL LATTICE 2', 'FRACTAL LATTICE 3',
+            
+            // Wave Lattice (23-25)
+            'WAVE LATTICE 1', 'WAVE LATTICE 2', 'WAVE LATTICE 3',
+            
+            // Crystal Lattice (26-29)
+            'CRYSTAL LATTICE 1', 'CRYSTAL LATTICE 2', 'CRYSTAL LATTICE 3', 'CRYSTAL LATTICE 4'
+        ];
+        
+        // Custom variations storage (70 slots)
+        this.customVariations = new Array(70).fill(null);
+        
+        // Total variation count
+        this.totalVariations = 100;
+    }
+    
+    /**
+     * Get variation name for display
+     */
+    getVariationName(index) {
+        if (index < 30) {
+            return this.variationNames[index];
+        } else {
+            const customIndex = index - 30;
+            const customVar = this.customVariations[customIndex];
+            return customVar ? customVar.name : `CUSTOM ${customIndex + 1}`;
+        }
+    }
+    
+    /**
+     * Generate default variation parameters
+     */
+    generateDefaultVariation(index) {
+        if (index >= 30) return null;
+        
+        const geometryType = Math.floor(index / 4);
+        let level = index % 4;
+        
+        // Special handling for reduced geometry sets
+        let adjustedGeometryType = geometryType;
+        if (geometryType === 5 && level > 2) { // Fractal only has 3 levels
+            adjustedGeometryType = 5;
+            level = 2;
+        }
+        if (geometryType === 6 && level > 2) { // Wave only has 3 levels  
+            adjustedGeometryType = 6;
+            level = 2;
+        }
+        
+        return {
+            variation: index,
+            geometry: adjustedGeometryType,
+            gridDensity: 8 + adjustedGeometryType * 2 + level * 1.5,
+            morphFactor: 0.2 + level * 0.2,
+            chaos: level * 0.2,
+            speed: 0.8 + level * 0.2,
+            hue: (index * 12.27) % 360,
+            rot4dXW: (level - 1.5) * 0.3,
+            rot4dYW: (adjustedGeometryType % 2) * 0.2,
+            rot4dZW: ((adjustedGeometryType + level) % 3) * 0.15,
+            dimension: 3.2 + level * 0.2
+        };
+    }
+    
+    /**
+     * Apply specific variation to the engine
+     */
+    applyVariation(index) {
+        if (index < 0 || index >= this.totalVariations) return false;
+        
+        let params;
+        
+        if (index < 30) {
+            // Default variation
+            params = this.generateDefaultVariation(index);
+        } else {
+            // Custom variation
+            const customIndex = index - 30;
+            const customVar = this.customVariations[customIndex];
+            
+            if (customVar) {
+                params = { ...customVar.parameters, variation: index };
+            } else {
+                // Empty slot - use current parameters
+                params = { ...this.engine.parameterManager.getAllParameters(), variation: index };
+            }
+        }
+        
+        if (params) {
+            this.engine.parameterManager.setParameters(params);
+            this.engine.currentVariation = index;
+            return true;
+        }
+        
+        return false;
+    }
+    
+    /**
+     * Save current state as custom variation
+     */
+    saveCurrentAsCustom() {
+        // Find first empty custom slot
+        const emptyIndex = this.customVariations.findIndex(slot => slot === null);
+        
+        if (emptyIndex === -1) {
+            return -1; // No empty slots
+        }
+        
+        const currentParams = this.engine.parameterManager.getAllParameters();
+        const currentGeometry = GeometryLibrary.getGeometryName(currentParams.geometry);
+        
+        const customVariation = {
+            name: `${currentGeometry} CUSTOM ${emptyIndex + 1}`,
+            timestamp: new Date().toISOString(),
+            parameters: { ...currentParams },
+            metadata: {
+                basedOnVariation: this.engine.currentVariation,
+                createdFrom: 'current-state'
+            }
+        };
+        
+        this.customVariations[emptyIndex] = customVariation;
+        this.saveCustomVariations();
+        
+        return 30 + emptyIndex; // Return absolute variation index
+    }
+    
+    /**
+     * Delete custom variation
+     */
+    deleteCustomVariation(customIndex) {
+        if (customIndex >= 0 && customIndex < 70) {
+            this.customVariations[customIndex] = null;
+            this.saveCustomVariations();
+            return true;
+        }
+        return false;
+    }
+    
+    /**
+     * Populate the variation grid UI
+     */
+    populateGrid() {
+        const gridContainer = document.getElementById('variationGrid');
+        if (!gridContainer) return;
+        
+        gridContainer.innerHTML = '';
+        
+        // Create sections for different geometry types
+        const sections = [
+            { name: 'Tetrahedron', range: [0, 3], class: 'tetrahedron' },
+            { name: 'Hypercube', range: [4, 7], class: 'hypercube' },
+            { name: 'Sphere', range: [8, 11], class: 'sphere' },
+            { name: 'Torus', range: [12, 15], class: 'torus' },
+            { name: 'Klein Bottle', range: [16, 19], class: 'klein' },
+            { name: 'Fractal', range: [20, 22], class: 'fractal' },
+            { name: 'Wave', range: [23, 25], class: 'wave' },
+            { name: 'Crystal', range: [26, 29], class: 'crystal' }
+        ];
+        
+        // Add default variations
+        sections.forEach(section => {
+            const sectionDiv = document.createElement('div');
+            sectionDiv.className = 'variation-section';
+            const sectionHeader = document.createElement('h3');
+            sectionHeader.textContent = `${section.name} Lattice`;
+            sectionDiv.appendChild(sectionHeader);
+            
+            const buttonContainer = document.createElement('div');
+            buttonContainer.className = 'variation-buttons';
+            
+            for (let i = section.range[0]; i <= section.range[1]; i++) {
+                if (i < this.variationNames.length) {
+                    const button = this.createVariationButton(i, true, section.class);
+                    buttonContainer.appendChild(button);
+                }
+            }
+            
+            sectionDiv.appendChild(buttonContainer);
+            gridContainer.appendChild(sectionDiv);
+        });
+        
+        // Add custom variations section
+        const customSection = document.createElement('div');
+        customSection.className = 'variation-section custom-section';
+        const customHeader = document.createElement('h3');
+        customHeader.textContent = 'Custom Variations';
+        customSection.appendChild(customHeader);
+        
+        const customContainer = document.createElement('div');
+        customContainer.className = 'variation-buttons custom-grid';
+        
+        for (let i = 0; i < 70; i++) {
+            const button = this.createVariationButton(30 + i, false, 'custom');
+            customContainer.appendChild(button);
+        }
+        
+        customSection.appendChild(customContainer);
+        gridContainer.appendChild(customSection);
+    }
+    
+    /**
+     * Create individual variation button
+     */
+    createVariationButton(variationIndex, isDefault, geomClass) {
+        const button = document.createElement('button');
+        const name = this.getVariationName(variationIndex);
+        
+        button.className = `preset-btn ${geomClass} ${isDefault ? 'default-variation' : 'custom-variation'}`;
+        button.dataset.variation = variationIndex;
+        button.title = `${variationIndex + 1}. ${name}`;
+        
+        // Button content
+        if (isDefault) {
+            button.innerHTML = `
+                <div class="variation-number">${(variationIndex + 1).toString().padStart(2, '0')}</div>
+                <div class="variation-level">Level ${(variationIndex % 4) + 1}</div>
+            `;
+        } else {
+            const customIndex = variationIndex - 30;
+            const hasCustom = this.customVariations[customIndex] !== null;
+            
+            button.innerHTML = `
+                <div class="variation-number">${(variationIndex + 1).toString()}</div>
+                <div class="variation-type">${hasCustom ? 'CUSTOM' : 'EMPTY'}</div>
+            `;
+            
+            if (!hasCustom) {
+                button.classList.add('empty-slot');
+            }
+        }
+        
+        // Click handler
+        button.addEventListener('click', () => {
+            if (isDefault || this.customVariations[variationIndex - 30] !== null) {
+                this.engine.setVariation(variationIndex);
+                this.updateVariationGrid();
+            }
+        });
+        
+        // Right-click for custom variations (delete)
+        if (!isDefault) {
+            button.addEventListener('contextmenu', (e) => {
+                e.preventDefault();
+                const customIndex = variationIndex - 30;
+                if (this.customVariations[customIndex] !== null) {
+                    if (confirm(`Delete custom variation ${variationIndex + 1}?`)) {
+                        this.deleteCustomVariation(customIndex);
+                        this.populateGrid();
+                    }
+                }
+            });
+        }
+        
+        return button;
+    }
+    
+    /**
+     * Update variation grid to show current selection
+     */
+    updateVariationGrid() {
+        const buttons = document.querySelectorAll('.preset-btn');
+        buttons.forEach(btn => {
+            btn.classList.remove('active');
+            if (parseInt(btn.dataset.variation) === this.engine.currentVariation) {
+                btn.classList.add('active');
+            }
+        });
+    }
+    
+    /**
+     * Load custom variations from localStorage
+     */
+    loadCustomVariations() {
+        try {
+            const stored = localStorage.getItem('vib34d-custom-variations');
+            if (stored) {
+                // Limit stored data size (1 MB) to prevent DoS from bloated localStorage
+                if (stored.length > 1024 * 1024) {
+                    console.warn('Custom variations data exceeds 1 MB, ignoring');
+                    return;
+                }
+                const parsed = JSON.parse(stored);
+                if (Array.isArray(parsed) && parsed.length === 70) {
+                    // Sanitize all variation names loaded from storage
+                    this.customVariations = parsed.map(v => {
+                        if (v && typeof v === 'object') {
+                            return { ...v, name: VariationManager.sanitizeName(v.name, 'Custom') };
+                        }
+                        return v;
+                    });
+                }
+            }
+        } catch (error) {
+            console.warn('Failed to load custom variations:', error);
+        }
+    }
+    
+    /**
+     * Save custom variations to localStorage
+     */
+    saveCustomVariations() {
+        try {
+            localStorage.setItem('vib34d-custom-variations', JSON.stringify(this.customVariations));
+        } catch (error) {
+            console.warn('Failed to save custom variations:', error);
+        }
+    }
+    
+    /**
+     * Export all custom variations as JSON
+     */
+    exportCustomVariations() {
+        const exportData = {
+            type: 'vib34d-custom-variations',
+            version: '1.0.0',
+            timestamp: new Date().toISOString(),
+            variations: this.customVariations.filter(v => v !== null)
+        };
+        
+        const json = JSON.stringify(exportData, null, 2);
+        const blob = new Blob([json], { type: 'application/json' });
+        const url = URL.createObjectURL(blob);
+        
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = 'vib34d-custom-variations.json';
+        link.click();
+        
+        URL.revokeObjectURL(url);
+    }
+    
+    /**
+     * Import custom variations from JSON
+     */
+    async importCustomVariations(file) {
+        try {
+            const text = await file.text();
+            // Limit import file size (2 MB)
+            if (text.length > 2 * 1024 * 1024) {
+                console.warn('Import file exceeds 2 MB, rejecting');
+                return 0;
+            }
+            const data = JSON.parse(text);
+
+            if (data.type === 'vib34d-custom-variations' && Array.isArray(data.variations)) {
+                // Merge imported variations (sanitize names)
+                let importCount = 0;
+
+                data.variations.forEach(variation => {
+                    if (!variation || typeof variation !== 'object') return;
+                    const emptyIndex = this.customVariations.findIndex(slot => slot === null);
+                    if (emptyIndex !== -1) {
+                        // Sanitize name from imported data
+                        variation.name = VariationManager.sanitizeName(variation.name, `Imported ${emptyIndex + 1}`);
+                        this.customVariations[emptyIndex] = variation;
+                        importCount++;
+                    }
+                });
+                
+                this.saveCustomVariations();
+                this.populateGrid();
+                
+                return importCount;
+            }
+        } catch (error) {
+            console.error('Failed to import custom variations:', error);
+        }
+        
+        return 0;
+    }
+    
+    /**
+     * Get variation statistics
+     */
+    getStatistics() {
+        const customCount = this.customVariations.filter(v => v !== null).length;
+        
+        return {
+            totalVariations: this.totalVariations,
+            defaultVariations: 30,
+            customVariations: customCount,
+            emptySlots: 70 - customCount,
+            currentVariation: this.engine.currentVariation,
+            isCustom: this.engine.currentVariation >= 30
+        };
+    }
+}