@viji-dev/sdk 1.0.0 → 1.0.2

package/src/cli/utils/scene-compiler.js

@@ -149,16 +149,8 @@ export class SceneCompiler {
    * Ensure a directory exists, create it if it doesn't
    */
   async ensureDirectory(dirPath) {
-    try {
-      // In browser environment, this would need to be simulated
-      // For now, we'll use a simple check
-      if (!existsSync(dirPath)) {
-        // In a real implementation: await mkdir(dirPath, { recursive: true });
-        console.log(`📁 Directory would be created: ${dirPath}`);
-      }
-    } catch (error) {
-      console.warn(`Could not create directory: ${dirPath}`, error);
-    }
+    const { mkdir } = await import('fs/promises');
+    await mkdir(dirPath, { recursive: true });
   }
 
   async analyzeScene(code, filePath) {
@@ -183,12 +175,15 @@ export class SceneCompiler {
     const exportMatches = [...code.matchAll(/export\s+(?:const|function|class|let|var)\s+(\w+)/g)];
     analysis.exports = exportMatches.map(match => match[1]);
 
-    // Validate required exports
-    analysis.validation.hasRender = analysis.exports.includes('render');
-    analysis.validation.hasInit = analysis.exports.includes('init');
-    
+    analysis.validation.hasRender =
+      analysis.exports.includes('render') ||
+      /function\s+render\s*\(/.test(code);
+    analysis.validation.hasInit =
+      analysis.exports.includes('init') ||
+      /function\s+(?:setup|init)\s*\(/.test(code);
+
     if (!analysis.validation.hasRender) {
-      analysis.validation.issues.push('Missing required export: render');
+      analysis.validation.issues.push('Missing required function: render');
       analysis.validation.isValid = false;
     }
 
@@ -343,12 +338,10 @@ export class SceneCompiler {
 
     // No compatibility wrapper; emit plain concatenated code
 
-    // Add bundle metadata
     output += `\n// === Bundle Metadata ===\n`;
     output += `const BUNDLE_METADATA = {\n`;
     output += `  version: "1.0.0",\n`;
     output += `  generatedAt: "${timestamp}",\n`;
-    output += `  parameters: SCENE_PARAMETERS,\n`;
     output += `  exports: ${JSON.stringify(analysis.exports)},\n`;
     output += `  hasAssets: ${bundle.assets.size > 0},\n`;
     output += `  hasShaders: ${bundle.shaders.size > 0},\n`;

package/src/templates/scene-templates.js

@@ -0,0 +1,85 @@
+const TEMPLATES = {
+  native: `// @renderer native
+
+const speed = viji.slider(1.0, { min: 0.1, max: 5.0, label: 'Speed' });
+const baseColor = viji.color('#4488ff', { label: 'Color' });
+
+function render(viji) {
+  const ctx = viji.useContext('2d');
+  const { width, height, time } = viji;
+
+  ctx.fillStyle = '#000000';
+  ctx.fillRect(0, 0, width, height);
+
+  const x = width / 2 + Math.cos(time * speed.value) * 100;
+  const y = height / 2 + Math.sin(time * speed.value) * 100;
+
+  ctx.beginPath();
+  ctx.arc(x, y, 40, 0, Math.PI * 2);
+  ctx.fillStyle = baseColor.value;
+  ctx.fill();
+}
+`,
+
+  p5: `// @renderer p5
+
+const speed = viji.slider(1.0, { min: 0.1, max: 5.0, label: 'Speed' });
+const baseColor = viji.color('#4488ff', { label: 'Color' });
+
+function render(viji, p5) {
+  p5.background(0);
+
+  const x = viji.width / 2 + p5.cos(viji.time * speed.value) * 100;
+  const y = viji.height / 2 + p5.sin(viji.time * speed.value) * 100;
+
+  p5.noStroke();
+  p5.fill(baseColor.value);
+  p5.ellipse(x, y, 80, 80);
+}
+`,
+
+  shader: `// @renderer shader
+precision highp float;
+
+uniform vec2 u_resolution;
+uniform float u_time;
+uniform vec2 u_mouse;
+
+void main() {
+    vec2 uv = gl_FragCoord.xy / u_resolution;
+    vec2 center = u_mouse / u_resolution;
+
+    float d = length(uv - center);
+    float ring = smoothstep(0.3, 0.29, d) - smoothstep(0.25, 0.24, d);
+
+    vec3 col = 0.5 + 0.5 * cos(u_time + uv.xyx + vec3(0.0, 2.0, 4.0));
+    col = mix(col * 0.2, col, ring);
+
+    gl_FragColor = vec4(col, 1.0);
+}
+`,
+};
+
+const GLOBAL_DTS_FILE = {
+  native: 'artist-global.d.ts',
+  p5: 'artist-global-p5.d.ts',
+  shader: null,
+};
+
+export function getSceneTemplate(renderer = 'native') {
+  const template = TEMPLATES[renderer];
+  if (!template) {
+    throw new Error(`Unknown renderer: "${renderer}". Valid options: ${Object.keys(TEMPLATES).join(', ')}`);
+  }
+  return template;
+}
+
+export function getGlobalDtsFileName(renderer = 'native') {
+  return GLOBAL_DTS_FILE[renderer] ?? GLOBAL_DTS_FILE.native;
+}
+
+export function getSceneFileExtension(renderer = 'native') {
+  return renderer === 'shader' ? '.glsl' : '.js';
+}
+
+export const VALID_RENDERERS = Object.keys(TEMPLATES);

package/.gitignore

@@ -1,29 +0,0 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-
-node_modules
-dist
-dist-ssr
-*.local
-
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-.DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
-
-# Documentation for other project parts
-/core_docs
-/backend_docs
-/sdk_docs

package/eslint.config.js

@@ -1,37 +0,0 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import tseslint from 'typescript-eslint'
-import { globalIgnores } from 'eslint/config'
-
-export default tseslint.config([
-  globalIgnores(['dist']),
-  {
-    files: ['scenes/**/*.{js,ts}'],
-    languageOptions: {
-      ecmaVersion: 2020,
-      globals: {
-        ...globals.browser,
-        viji: 'readonly',
-        render: 'readonly',
-      },
-    },
-    rules: {
-      'no-undef': 'off',
-    },
-  },
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      js.configs.recommended,
-      tseslint.configs.recommended,
-      reactHooks.configs['recommended-latest'],
-      reactRefresh.configs.vite,
-    ],
-    languageOptions: {
-      ecmaVersion: 2020,
-      globals: globals.browser,
-    },
-  },
-])

package/postcss.config.js

@@ -1,6 +0,0 @@
-export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}; 

package/scenes/audio-visualizer/main.js

@@ -1,287 +0,0 @@
-// Audio Reactive Visualizer Scene - Parameter Object API
-console.log('🎵 AUDIO VISUALIZER SCENE LOADED');
-
-// Define parameters using helper functions (returns parameter objects)
-const primaryColor = viji.color('#ff6b6b', {
-  label: 'Primary Color',
-  description: 'Main color for frequency bars',
-  group: 'colors'
-});
-
-const secondaryColor = viji.color('#4ecdc4', {
-  label: 'Secondary Color',
-  description: 'Background and accent color',
-  group: 'colors'
-});
-
-const backgroundColor = viji.color('#1a1a2e', {
-  label: 'Background Color',
-  description: 'Scene background color',
-  group: 'colors'
-});
-
-const audioSensitivity = viji.slider(2.0, {
-  min: 0.1,
-  max: 5.0,
-  step: 0.1,
-  label: 'Audio Sensitivity',
-  description: 'Overall sensitivity to audio input',
-  group: 'audio',
-  category: 'audio'
-});
-
-const bassBoost = viji.slider(1.5, {
-  min: 0.5,
-  max: 3.0,
-  step: 0.1,
-  label: 'Bass Boost',
-  description: 'Amplification for bass frequencies',
-  group: 'audio',
-  category: 'audio'
-});
-
-const trebleBoost = viji.slider(1.2, {
-  min: 0.5,
-  max: 3.0,
-  step: 0.1,
-  label: 'Treble Boost',
-  description: 'Amplification for treble frequencies',
-  group: 'audio',
-  category: 'audio'
-});
-
-const barCount = viji.slider(64, {
-  min: 8,
-  max: 128,
-  step: 8,
-  label: 'Bar Count',
-  description: 'Number of frequency analysis bars',
-  group: 'visual'
-});
-
-const barSpacing = viji.slider(2, {
-  min: 0,
-  max: 10,
-  step: 1,
-  label: 'Bar Spacing',
-  description: 'Space between frequency bars',
-  group: 'visual'
-});
-
-const showWaveform = viji.toggle(true, {
-  label: 'Show Waveform',
-  description: 'Display audio waveform overlay',
-  group: 'visual'
-});
-
-const showCenterCircle = viji.toggle(true, {
-  label: 'Show Center Circle',
-  description: 'Show reactive circle in center',
-  group: 'visual'
-});
-
-const rotationSpeed = viji.slider(0.5, {
-  min: -2.0,
-  max: 2.0,
-  step: 0.1,
-  label: 'Rotation Speed',
-  description: 'Speed of circular rotation',
-  group: 'animation'
-});
-
-const pulseIntensity = viji.slider(0.8, {
-  min: 0.0,
-  max: 2.0,
-  step: 0.1,
-  label: 'Pulse Intensity',
-  description: 'Intensity of audio-driven pulsing',
-  group: 'animation'
-});
-
-const smoothing = viji.slider(0.7, {
-  min: 0.0,
-  max: 0.95,
-  step: 0.05,
-  label: 'Smoothing',
-  description: 'Temporal smoothing of audio data',
-  group: 'animation'
-});
-
-const mouseInfluence = viji.toggle(true, {
-  label: 'Mouse Influence',
-  description: 'Allow mouse to affect visualization',
-  group: 'interaction',
-  category: 'interaction'
-});
-
-const mouseRadius = viji.slider(100, {
-  min: 50,
-  max: 300,
-  step: 10,
-  label: 'Mouse Radius',
-  description: 'Radius of mouse influence',
-  group: 'interaction',
-  category: 'interaction'
-});
-
-// Render function using parameter object API with interactions, audio, and video
-function render(viji) {
-  const ctx = viji.useContext('2d');
-  
-  // Get interaction state
-  const mouse = viji.mouse;
-  const keyboard = viji.keyboard;
-  const touches = viji.touches;
-  
-  // Get audio state
-  const audio = viji.audio;
-  
-  // Get video state
-  const video = viji.video;
-  
-  // Clear background
-  ctx.fillStyle = backgroundColor.value;
-  ctx.fillRect(0, 0, viji.width, viji.height);
-  
-  // Only proceed if audio is connected
-  if (!audio || !audio.isConnected) {
-    // Show instructions when no audio
-    ctx.fillStyle = primaryColor.value;
-    ctx.font = '24px Arial';
-    ctx.textAlign = 'center';
-    ctx.fillText('🎵 Connect audio to see visualization', viji.width / 2, viji.height / 2);
-    
-    ctx.font = '16px Arial';
-    ctx.fillStyle = secondaryColor.value;
-    ctx.fillText('Use the audio controls to connect microphone, file, or screen audio', viji.width / 2, viji.height / 2 + 40);
-    return;
-  }
-  
-  const centerX = viji.width / 2;
-  const centerY = viji.height / 2;
-  
-  // Get audio data with parameters
-  const currentVolume = (((audio && audio.volume && audio.volume.rms) || 0)) * audioSensitivity.value;
-  const bassEnergy = ((((audio && audio.bands && audio.bands.bass) || 0) + ((audio && audio.bands && audio.bands.subBass) || 0)) / 2) * bassBoost.value;
-  const trebleEnergy = ((((audio && audio.bands && audio.bands.treble) || 0) + ((audio && audio.bands && audio.bands.presence) || 0)) / 2) * trebleBoost.value;
-  
-  // Center reactive circle
-  if (showCenterCircle.value) {
-    const circleRadius = 50 + (currentVolume * pulseIntensity.value * 100);
-    const circleAlpha = Math.min(1, currentVolume * 2);
-    
-    // Outer circle (bass reactive)
-    ctx.beginPath();
-    ctx.arc(centerX, centerY, circleRadius + (bassEnergy * 50), 0, Math.PI * 2);
-    ctx.strokeStyle = primaryColor.value + Math.floor(circleAlpha * 128).toString(16).padStart(2, '0');
-    ctx.lineWidth = 3;
-    ctx.stroke();
-    
-    // Inner circle (treble reactive)
-    ctx.beginPath();
-    ctx.arc(centerX, centerY, circleRadius * 0.6 + (trebleEnergy * 30), 0, Math.PI * 2);
-    ctx.fillStyle = secondaryColor.value + Math.floor(circleAlpha * 64).toString(16).padStart(2, '0');
-    ctx.fill();
-  }
-  
-  // Frequency bars in circular arrangement
-  const radius = Math.min(viji.width, viji.height) * 0.3;
-  const bands = ['subBass', 'bass', 'lowMid', 'mid', 'highMid', 'presence', 'brilliance', 'treble'];
-  
-  for (let i = 0; i < barCount.value; i++) {
-    const angle = (i / barCount.value) * Math.PI * 2 + (viji.time * rotationSpeed.value);
-    const bandIndex = Math.floor((i / barCount.value) * bands.length);
-    const bandValue = (audio && audio.bands ? (audio.bands[bands[bandIndex]] || 0) : 0);
-    
-    // Apply audio sensitivity
-    const barHeight = bandValue * audioSensitivity.value * 200;
-    
-    // Mouse influence
-    let mouseInfluenceValue = 1;
-    if (mouseInfluence.value && mouse && mouse.isInCanvas) {
-      const barX = centerX + Math.cos(angle) * radius;
-      const barY = centerY + Math.sin(angle) * radius;
-      const distToMouse = Math.sqrt((barX - mouse.x) ** 2 + (barY - mouse.y) ** 2);
-      
-      if (distToMouse < mouseRadius.value) {
-        mouseInfluenceValue = 1 + (1 - distToMouse / mouseRadius.value) * 2;
-      }
-    }
-    
-    const finalBarHeight = barHeight * mouseInfluenceValue;
-    
-    // Calculate bar position
-    const startX = centerX + Math.cos(angle) * radius;
-    const startY = centerY + Math.sin(angle) * radius;
-    const endX = centerX + Math.cos(angle) * (radius + finalBarHeight);
-    const endY = centerY + Math.sin(angle) * (radius + finalBarHeight);
-    
-    // Color based on frequency band
-    const hue = (bandIndex / bands.length) * 360;
-    const intensity = Math.min(1, bandValue * audioSensitivity.value * 3);
-    ctx.strokeStyle = `hsla(${hue}, 80%, ${50 + intensity * 30}%, ${0.6 + intensity * 0.4})`;
-    ctx.lineWidth = Math.max(1, (viji.width / barCount.value) - barSpacing.value);
-    
-    // Draw frequency bar
-    ctx.beginPath();
-    ctx.moveTo(startX, startY);
-    ctx.lineTo(endX, endY);
-    ctx.stroke();
-  }
-  
-  // Waveform overlay
-  if (showWaveform.value && audio.isConnected) {
-    ctx.strokeStyle = primaryColor.value + '60';
-    ctx.lineWidth = 2;
-    ctx.beginPath();
-    
-    // Simulate waveform
-    for (let x = 0; x < viji.width; x += 4) {
-      const waveY = centerY + Math.sin(x * 0.02 + viji.time * 3 + bassEnergy * 10) * 
-                    (currentVolume * 50) + 
-                    Math.sin(x * 0.05 + viji.time * 5 + trebleEnergy * 15) * 
-                    (currentVolume * 25);
-      
-      if (x === 0) {
-        ctx.moveTo(x, waveY);
-      } else {
-        ctx.lineTo(x, waveY);
-      }
-    }
-    ctx.stroke();
-  }
-  
-  // Audio info display
-  ctx.fillStyle = primaryColor.value + 'CC';
-  ctx.font = '14px monospace';
-  ctx.textAlign = 'left';
-  
-  let infoY = 20;
-  ctx.fillText('🎵 AUDIO REACTIVE VISUALIZER', 20, infoY);
-  infoY += 20;
-  ctx.fillText(`Volume: ${(currentVolume * 100).toFixed(1)}%`, 20, infoY);
-  infoY += 16;
-  ctx.fillText(`Bass: ${(bassEnergy * 100).toFixed(1)}%`, 20, infoY);
-  infoY += 16;
-  ctx.fillText(`Treble: ${(trebleEnergy * 100).toFixed(1)}%`, 20, infoY);
-  infoY += 16;
-  ctx.fillText(`Bars: ${barCount.value}`, 20, infoY);
-  
-  // Mouse interaction indicator
-  if (mouseInfluence.value && mouse && mouse.isInCanvas) {
-    ctx.strokeStyle = secondaryColor.value + '80';
-    ctx.lineWidth = 2;
-    ctx.setLineDash([5, 5]);
-    ctx.beginPath();
-    ctx.arc(mouse.x, mouse.y, mouseRadius.value, 0, Math.PI * 2);
-    ctx.stroke();
-    ctx.setLineDash([]);
-  }
-  
-  // Performance info
-  ctx.fillStyle = secondaryColor.value + 'AA';
-  ctx.font = '12px monospace';
-  ctx.textAlign = 'right';
-  ctx.fillText(`Frame: ${viji.frameCount}`, viji.width - 20, viji.height - 25);
-  ctx.fillText(`Time: ${viji.time.toFixed(1)}s`, viji.width - 20, viji.height - 10);
-}