@vib3code/sdk 2.0.1

package/src/export/CSSExporter.js

@@ -0,0 +1,226 @@
+/**
+ * CSSExporter - Export VIB3+ parameters as CSS custom properties
+ *
+ * Generates theme-ready CSS variables from visualization parameters
+ * for easy integration with any CSS framework.
+ */
+
+/**
+ * Default export options
+ */
+const DEFAULT_OPTIONS = {
+    includeDarkMode: false,
+    includeAnimations: false,
+    includeComments: true,
+    rootSelector: ':root',
+    prefix: 'vib3'
+};
+
+/**
+ * Geometry names for comments
+ */
+const GEOMETRY_NAMES = [
+    'Tetrahedron', 'Hypercube', 'Sphere', 'Torus',
+    'Klein Bottle', 'Fractal', 'Wave', 'Crystal'
+];
+
+/**
+ * System display names
+ */
+const SYSTEM_NAMES = {
+    quantum: 'Quantum',
+    faceted: 'Faceted',
+    holographic: 'Holographic'
+};
+
+/**
+ * Export parameters to CSS custom properties
+ *
+ * @param {object} params - VIB3+ parameters
+ * @param {object} options - Export options
+ * @returns {string} CSS content
+ */
+export function exportCSS(params, options = {}) {
+    const opts = { ...DEFAULT_OPTIONS, ...options };
+    const { includeDarkMode, includeAnimations, includeComments, rootSelector, prefix } = opts;
+
+    // Extract parameters with defaults
+    const system = params.system || 'quantum';
+    const geometry = params.geometry ?? 0;
+    const hue = params.hue ?? 200;
+    const saturation = params.saturation ?? 0.7;
+    const intensity = params.intensity ?? 0.8;
+    const gridDensity = params.gridDensity ?? 16;
+    const morphFactor = params.morphFactor ?? 0;
+    const chaos = params.chaos ?? 0;
+    const speed = params.speed ?? 1;
+    const dimension = params.dimension ?? 3.5;
+
+    // 6D rotation values
+    const rotXY = params.rot4dXY ?? 0;
+    const rotXZ = params.rot4dXZ ?? 0;
+    const rotYZ = params.rot4dYZ ?? 0;
+    const rotXW = params.rot4dXW ?? 0;
+    const rotYW = params.rot4dYW ?? 0;
+    const rotZW = params.rot4dZW ?? 0;
+
+    // Derived colors
+    const primaryHSL = `hsl(${hue}, ${Math.round(saturation * 100)}%, ${Math.round(40 + intensity * 20)}%)`;
+    const secondaryHSL = `hsl(${hue}, ${Math.round(saturation * 80)}%, ${Math.round(50 + intensity * 20)}%)`;
+    const accentHSL = `hsl(${(hue + 30) % 360}, ${Math.round(saturation * 100)}%, ${Math.round(50 + intensity * 10)}%)`;
+    const backgroundHSL = `hsl(${hue}, ${Math.round(saturation * 30)}%, ${Math.round(10 + intensity * 5)}%)`;
+
+    // Build CSS
+    let css = '';
+
+    // Header comment
+    if (includeComments) {
+        const timestamp = new Date().toISOString().split('T')[0];
+        css += `/* VIB3+ Theme Export - Generated ${timestamp} */\n`;
+        css += `/* System: ${SYSTEM_NAMES[system] || system} */\n`;
+        css += `/* Geometry: ${GEOMETRY_NAMES[geometry % 8] || 'Unknown'} (${geometry}) */\n\n`;
+    }
+
+    // Root variables
+    css += `${rootSelector} {\n`;
+
+    if (includeComments) {
+        css += `  /* Color palette */\n`;
+    }
+    css += `  --${prefix}-hue: ${hue};\n`;
+    css += `  --${prefix}-saturation: ${saturation};\n`;
+    css += `  --${prefix}-intensity: ${intensity};\n`;
+    css += `  --${prefix}-primary: ${primaryHSL};\n`;
+    css += `  --${prefix}-secondary: ${secondaryHSL};\n`;
+    css += `  --${prefix}-accent: ${accentHSL};\n`;
+    css += `  --${prefix}-background: ${backgroundHSL};\n`;
+    css += `\n`;
+
+    if (includeComments) {
+        css += `  /* Geometry parameters */\n`;
+    }
+    css += `  --${prefix}-geometry: ${geometry};\n`;
+    css += `  --${prefix}-system: '${system}';\n`;
+    css += `  --${prefix}-dimension: ${dimension};\n`;
+    css += `  --${prefix}-grid-density: ${gridDensity};\n`;
+    css += `  --${prefix}-morph-factor: ${morphFactor};\n`;
+    css += `  --${prefix}-chaos: ${chaos};\n`;
+    css += `\n`;
+
+    if (includeComments) {
+        css += `  /* 6D rotation (radians) */\n`;
+    }
+    css += `  --${prefix}-rot-xy: ${rotXY};\n`;
+    css += `  --${prefix}-rot-xz: ${rotXZ};\n`;
+    css += `  --${prefix}-rot-yz: ${rotYZ};\n`;
+    css += `  --${prefix}-rot-xw: ${rotXW};\n`;
+    css += `  --${prefix}-rot-yw: ${rotYW};\n`;
+    css += `  --${prefix}-rot-zw: ${rotZW};\n`;
+    css += `\n`;
+
+    if (includeComments) {
+        css += `  /* Animation timing */\n`;
+    }
+    css += `  --${prefix}-speed: ${speed};\n`;
+    css += `  --${prefix}-animation-duration: ${(1 / speed).toFixed(2)}s;\n`;
+
+    css += `}\n`;
+
+    // Dark mode variant
+    if (includeDarkMode) {
+        css += `\n`;
+        if (includeComments) {
+            css += `/* Dark mode variant */\n`;
+        }
+        css += `@media (prefers-color-scheme: dark) {\n`;
+        css += `  ${rootSelector} {\n`;
+        css += `    --${prefix}-primary: hsl(${hue}, ${Math.round(saturation * 100)}%, ${Math.round(50 + intensity * 20)}%);\n`;
+        css += `    --${prefix}-secondary: hsl(${hue}, ${Math.round(saturation * 80)}%, ${Math.round(35 + intensity * 15)}%);\n`;
+        css += `    --${prefix}-background: hsl(${hue}, ${Math.round(saturation * 20)}%, ${Math.round(5 + intensity * 3)}%);\n`;
+        css += `  }\n`;
+        css += `}\n`;
+    }
+
+    // Animation keyframes
+    if (includeAnimations) {
+        css += `\n`;
+        if (includeComments) {
+            css += `/* VIB3+ animations */\n`;
+        }
+        css += `@keyframes ${prefix}-pulse {\n`;
+        css += `  0%, 100% {\n`;
+        css += `    transform: scale(1);\n`;
+        css += `    filter: hue-rotate(0deg);\n`;
+        css += `  }\n`;
+        css += `  50% {\n`;
+        css += `    transform: scale(${1 + morphFactor * 0.05});\n`;
+        css += `    filter: hue-rotate(${chaos * 30}deg);\n`;
+        css += `  }\n`;
+        css += `}\n\n`;
+
+        css += `@keyframes ${prefix}-rotate {\n`;
+        css += `  from {\n`;
+        css += `    transform: rotate(0deg);\n`;
+        css += `  }\n`;
+        css += `  to {\n`;
+        css += `    transform: rotate(360deg);\n`;
+        css += `  }\n`;
+        css += `}\n\n`;
+
+        css += `.${prefix}-animated {\n`;
+        css += `  animation: ${prefix}-pulse var(--${prefix}-animation-duration) ease-in-out infinite;\n`;
+        css += `}\n\n`;
+
+        css += `.${prefix}-rotating {\n`;
+        css += `  animation: ${prefix}-rotate calc(var(--${prefix}-animation-duration) * 10) linear infinite;\n`;
+        css += `}\n`;
+    }
+
+    return css;
+}
+
+/**
+ * Export CSS to file (browser environment)
+ */
+export function downloadCSS(params, options = {}, filename = 'vib3-theme.css') {
+    const css = exportCSS(params, options);
+    const blob = new Blob([css], { type: 'text/css' });
+    const url = URL.createObjectURL(blob);
+
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = filename;
+    link.click();
+
+    URL.revokeObjectURL(url);
+    return css;
+}
+
+/**
+ * Generate inline style object from parameters
+ * Useful for React/Vue style props
+ */
+export function toStyleObject(params, prefix = 'vib3') {
+    const hue = params.hue ?? 200;
+    const saturation = params.saturation ?? 0.7;
+    const intensity = params.intensity ?? 0.8;
+
+    return {
+        [`--${prefix}-hue`]: hue,
+        [`--${prefix}-saturation`]: saturation,
+        [`--${prefix}-intensity`]: intensity,
+        [`--${prefix}-primary`]: `hsl(${hue}, ${Math.round(saturation * 100)}%, ${Math.round(40 + intensity * 20)}%)`,
+        [`--${prefix}-geometry`]: params.geometry ?? 0,
+        [`--${prefix}-system`]: `'${params.system || 'quantum'}'`,
+        [`--${prefix}-rot-xw`]: params.rot4dXW ?? 0,
+        [`--${prefix}-rot-yw`]: params.rot4dYW ?? 0,
+        [`--${prefix}-rot-zw`]: params.rot4dZW ?? 0,
+        [`--${prefix}-speed`]: params.speed ?? 1
+    };
+}
+
+export default {
+    exportCSS,
+    downloadCSS,
+    toStyleObject
+};

package/src/export/CardGeneratorBase.js

@@ -0,0 +1,279 @@
+/**
+ * Base class for all VIB34D trading card generators
+ * Provides shared utilities while allowing system-specific implementations
+ */
+export class CardGeneratorBase {
+    constructor(systemName) {
+        this.systemName = systemName;
+        this.canvasCount = 0;
+    }
+    
+    /**
+     * Generate a trading card HTML file
+     */
+    async generateCard(format, parameters) {
+        try {
+            const systemShaders = this.getSystemShaders();
+            const systemStyles = this.getSystemStyles();
+            const systemContent = this.generateSystemContent(parameters);
+            
+            const html = this.buildHTML({
+                format,
+                parameters,
+                shaders: systemShaders,
+                styles: systemStyles,
+                content: systemContent
+            });
+            
+            const filename = this.generateFilename(format, parameters);
+            
+            // Create and download the file
+            this.downloadFile(filename, html);
+            
+            return {
+                success: true,
+                filename,
+                system: this.systemName
+            };
+        } catch (error) {
+            console.error(`❌ ${this.systemName} card generation failed:`, error);
+            return {
+                success: false,
+                error: error.message,
+                system: this.systemName
+            };
+        }
+    }
+    
+    /**
+     * Build complete HTML structure
+     */
+    buildHTML({ format, parameters, shaders, styles, content }) {
+        const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
+        
+        return `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>${this.systemName.toUpperCase()} Trading Card</title>
+    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap" rel="stylesheet">
+    <style>
+        ${this.getBaseStyles()}
+        ${styles}
+    </style>
+</head>
+<body>
+    <div class="card-container">
+        <div class="card-header">
+            <div class="system-badge ${this.systemName.toLowerCase()}">${this.systemName.toUpperCase()}</div>
+            <div class="card-title">${this.getCardTitle(parameters)}</div>
+        </div>
+        
+        <div class="visualization-area">
+            ${content}
+        </div>
+        
+        <div class="card-footer">
+            <div class="parameters">
+                ${this.formatParameters(parameters)}
+            </div>
+            <div class="signature">
+                VIB34D Engine • ${timestamp}
+            </div>
+        </div>
+    </div>
+    
+    <script>
+        ${shaders.vertex ? `const vertexShaderSource = \`${shaders.vertex}\`;` : ''}
+        ${shaders.fragment ? `const fragmentShaderSource = \`${shaders.fragment}\`;` : ''}
+        
+        // System-specific initialization
+        ${this.getSystemJavaScript()}
+        
+        // Start visualization
+        window.addEventListener('load', () => {
+            try {
+                initializeCard(${JSON.stringify(parameters)});
+            } catch (error) {
+                console.error('Card initialization failed:', error);
+                document.querySelector('.visualization-area').innerHTML = 
+                    '<div style="color: #ff0000; text-align: center; padding: 50px;">Visualization failed to load</div>';
+            }
+        });
+    </script>
+</body>
+</html>`;
+    }
+    
+    /**
+     * Base CSS styles shared by all cards
+     */
+    getBaseStyles() {
+        return `
+            * { margin: 0; padding: 0; box-sizing: border-box; }
+            
+            body {
+                background: #000;
+                color: #fff;
+                font-family: 'Orbitron', monospace;
+                overflow: hidden;
+            }
+            
+            .card-container {
+                width: 100vw;
+                height: 100vh;
+                display: flex;
+                flex-direction: column;
+                background: radial-gradient(ellipse at center, #1a0033 0%, #000000 70%);
+            }
+            
+            .card-header {
+                padding: 20px;
+                background: rgba(0, 0, 0, 0.8);
+                border-bottom: 2px solid rgba(0, 255, 255, 0.5);
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                backdrop-filter: blur(10px);
+            }
+            
+            .system-badge {
+                padding: 8px 16px;
+                border-radius: 12px;
+                font-weight: 700;
+                font-size: 0.9rem;
+                text-shadow: 0 0 10px currentColor;
+            }
+            
+            .system-badge.faceted {
+                background: rgba(0, 255, 255, 0.2);
+                border: 2px solid #00ffff;
+                color: #00ffff;
+            }
+            
+            .system-badge.quantum {
+                background: rgba(0, 255, 255, 0.2);
+                border: 2px solid #00ffff;
+                color: #00ffff;
+            }
+            
+            .system-badge.holographic {
+                background: rgba(255, 100, 255, 0.2);
+                border: 2px solid #ff64ff;
+                color: #ff64ff;
+            }
+            
+            .system-badge.polychora {
+                background: rgba(255, 150, 0, 0.2);
+                border: 2px solid #ff9600;
+                color: #ff9600;
+            }
+            
+            .card-title {
+                font-size: 1.4rem;
+                font-weight: 700;
+                text-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
+            }
+            
+            .visualization-area {
+                flex: 1;
+                position: relative;
+                overflow: hidden;
+            }
+            
+            .card-footer {
+                padding: 15px 20px;
+                background: rgba(0, 0, 0, 0.9);
+                border-top: 1px solid rgba(255, 255, 255, 0.1);
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                font-size: 0.8rem;
+            }
+            
+            .parameters {
+                color: rgba(255, 255, 255, 0.8);
+                line-height: 1.4;
+            }
+            
+            .signature {
+                color: rgba(0, 255, 255, 0.7);
+                font-weight: 400;
+                font-size: 0.7rem;
+            }
+            
+            canvas {
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+            }
+        `;
+    }
+    
+    /**
+     * Generate filename based on parameters
+     */
+    generateFilename(format, parameters) {
+        const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
+        const geometry = this.getGeometryName(parameters);
+        return `vib34d-card-${this.systemName.toLowerCase()}-${geometry.toLowerCase().replace(/\s+/g, '-')}-${timestamp}.html`;
+    }
+    
+    /**
+     * Format parameters for display
+     */
+    formatParameters(params) {
+        const key = Object.entries(params)
+            .filter(([key, value]) => !['system', 'hideui'].includes(key))
+            .slice(0, 4)
+            .map(([key, value]) => `${key}: ${typeof value === 'number' ? value.toFixed(1) : value}`)
+            .join(' • ');
+        return key || 'Default parameters';
+    }
+    
+    /**
+     * Download the generated file
+     */
+    downloadFile(filename, content) {
+        const blob = new Blob([content], { type: 'text/html' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = filename;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+    }
+    
+    // Abstract methods that each system must implement
+    getSystemShaders() {
+        throw new Error(`${this.systemName} must implement getSystemShaders()`);
+    }
+    
+    getSystemStyles() {
+        throw new Error(`${this.systemName} must implement getSystemStyles()`);
+    }
+    
+    generateSystemContent(parameters) {
+        throw new Error(`${this.systemName} must implement generateSystemContent()`);
+    }
+    
+    getSystemJavaScript() {
+        throw new Error(`${this.systemName} must implement getSystemJavaScript()`);
+    }
+    
+    getCardTitle(parameters) {
+        return `${this.systemName.toUpperCase()} ${this.getGeometryName(parameters)}`;
+    }
+    
+    getGeometryName(parameters) {
+        // Default implementation - systems can override
+        const geometryNames = ['TETRAHEDRON', 'HYPERCUBE', 'SPHERE', 'TORUS', 'KLEIN BOTTLE', 'FRACTAL', 'WAVE', 'CRYSTAL'];
+        const geomIndex = parameters.geometry || parameters.geometryType || 0;
+        return geometryNames[geomIndex] || 'GEOMETRY';
+    }
+}