@stevejtrettel/shader-sandbox 0.1.0

package/bin/cli.js

@@ -0,0 +1,389 @@
+#!/usr/bin/env node
+
+/**
+ * Shader Sandbox CLI
+ * Commands:
+ *   shader create <name>       - Create a new shader project (recommended)
+ *   shader init                - Initialize shaders in current directory
+ *   shader new <name>          - Create a new shader
+ *   shader dev <shader-name>   - Start development server
+ *   shader build <shader-name> - Build for production
+ *   shader list                - List available shaders
+ */
+
+import { spawn } from 'child_process';
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const packageRoot = path.resolve(__dirname, '..');
+
+const args = process.argv.slice(2);
+const command = args[0];
+
+function printUsage() {
+  console.log(`
+Shader Sandbox - Local GLSL shader development
+
+Usage:
+  shader create <name>       Create a new shader project (recommended)
+  shader init                Initialize shaders in current directory
+  shader new <name>          Create a new shader
+  shader dev <shader-name>   Start development server
+  shader build <shader-name> Build for production
+  shader list                List available shaders
+
+Examples:
+  shader create my-shaders   Create a new project with everything set up
+  shader new my-shader       Create shaders/my-shader/
+  shader dev my-shader       Run shader in dev mode
+  shader build my-shader     Build shader to dist/
+  shader list                Show all shaders
+`);
+}
+
+function copyDir(src, dest, skipFiles = []) {
+  fs.mkdirSync(dest, { recursive: true });
+  const entries = fs.readdirSync(src, { withFileTypes: true });
+
+  for (const entry of entries) {
+    // Skip specified files
+    if (skipFiles.includes(entry.name)) continue;
+
+    const srcPath = path.join(src, entry.name);
+    const destPath = path.join(dest, entry.name);
+
+    if (entry.isDirectory()) {
+      copyDir(srcPath, destPath, skipFiles);
+    } else {
+      fs.copyFileSync(srcPath, destPath);
+    }
+  }
+}
+
+function listShaders(cwd) {
+  const shadersDir = path.join(cwd, 'shaders');
+  if (!fs.existsSync(shadersDir)) {
+    console.error('Error: shaders/ directory not found');
+    console.error('Run "shader init" first');
+    process.exit(1);
+  }
+
+  const entries = fs.readdirSync(shadersDir, { withFileTypes: true });
+  const shaders = entries.filter(e => e.isDirectory()).map(e => e.name);
+
+  if (shaders.length === 0) {
+    console.log('No shaders found. Run "shader new <name>" to create one.');
+    return;
+  }
+
+  console.log('Available shaders:');
+  shaders.forEach(s => console.log(`  ${s}`));
+}
+
+async function create(projectName) {
+  // Validate name
+  if (!projectName || !/^[a-zA-Z0-9_-]+$/.test(projectName)) {
+    console.error('Error: Invalid project name');
+    console.error('Use only letters, numbers, hyphens, and underscores');
+    process.exit(1);
+  }
+
+  const projectDir = path.join(process.cwd(), projectName);
+  const templatesDir = path.join(packageRoot, 'templates');
+
+  // Check if directory already exists
+  if (fs.existsSync(projectDir)) {
+    console.error(`Error: Directory "${projectName}" already exists`);
+    process.exit(1);
+  }
+
+  console.log(`Creating shader project "${projectName}"...`);
+
+  // Create project directory
+  fs.mkdirSync(projectDir, { recursive: true });
+
+  // Generate package.json
+  const packageJson = {
+    name: projectName,
+    version: '1.0.0',
+    type: 'module',
+    scripts: {
+      dev: 'shader dev',
+      build: 'shader build',
+      list: 'shader list'
+    },
+    dependencies: {
+      '@stevejtrettel/shader-sandbox': '^0.1.0',
+      'vite': '^5.0.0'
+    }
+  };
+
+  fs.writeFileSync(
+    path.join(projectDir, 'package.json'),
+    JSON.stringify(packageJson, null, 2) + '\n'
+  );
+
+  // Copy template files (skip package.json since we generated our own)
+  copyDir(templatesDir, projectDir, ['package.json']);
+
+  // Run npm install
+  console.log('Installing dependencies...');
+
+  const npmCmd = process.platform === 'win32' ? 'npm.cmd' : 'npm';
+  const child = spawn(npmCmd, ['install'], {
+    cwd: projectDir,
+    stdio: 'inherit',
+    shell: process.platform === 'win32'
+  });
+
+  child.on('error', (err) => {
+    console.error('Failed to run npm install:', err.message);
+    console.log('\nProject created but dependencies not installed.');
+    console.log(`Run: cd ${projectName} && npm install`);
+    process.exit(1);
+  });
+
+  child.on('close', (code) => {
+    if (code !== 0) {
+      console.error('\nnpm install failed.');
+      console.log(`Run: cd ${projectName} && npm install`);
+      process.exit(code);
+    }
+
+    console.log(`
+✓ Project "${projectName}" created!
+
+Next steps:
+  cd ${projectName}
+  shader dev example-gradient    Run a shader
+  shader list                    Show all shaders
+  shader new my-shader           Create a new shader
+`);
+  });
+}
+
+async function init() {
+  const cwd = process.cwd();
+  const templatesDir = path.join(packageRoot, 'templates');
+
+  // Check if directory already has shader files
+  const shaderDir = path.join(cwd, 'shaders');
+  if (fs.existsSync(shaderDir)) {
+    console.error('Error: shaders/ directory already exists');
+    process.exit(1);
+  }
+
+  console.log('Creating shader collection...');
+
+  // Copy template files (skip package.json to not overwrite user's)
+  copyDir(templatesDir, cwd, ['package.json']);
+
+  console.log(`
+✓ Shader collection created!
+
+Structure:
+  shaders/
+    example-gradient/    Simple animated gradient
+    example-buffer/      BufferA feedback example
+
+Next steps:
+  shader list                    Show all shaders
+  shader dev example-gradient    Run a shader
+  shader new my-shader           Create a new shader
+`);
+}
+
+function createNewShader(name) {
+  const cwd = process.cwd();
+  const shadersDir = path.join(cwd, 'shaders');
+
+  // Check shaders directory exists
+  if (!fs.existsSync(shadersDir)) {
+    console.error('Error: shaders/ directory not found');
+    console.error('Run "shader init" first');
+    process.exit(1);
+  }
+
+  // Validate name
+  if (!name || !/^[a-zA-Z0-9_-]+$/.test(name)) {
+    console.error('Error: Invalid shader name');
+    console.error('Use only letters, numbers, hyphens, and underscores');
+    process.exit(1);
+  }
+
+  const shaderDir = path.join(shadersDir, name);
+
+  // Check if already exists
+  if (fs.existsSync(shaderDir)) {
+    console.error(`Error: Shader "${name}" already exists`);
+    process.exit(1);
+  }
+
+  // Create directory
+  fs.mkdirSync(shaderDir, { recursive: true });
+
+  // Create image.glsl with starter template
+  const imageGlsl = `void mainImage(out vec4 fragColor, in vec2 fragCoord)
+{
+    // Normalized pixel coordinates (0 to 1)
+    vec2 uv = fragCoord / iResolution.xy;
+
+    // Time varying pixel color
+    vec3 col = 0.5 + 0.5 * cos(iTime + uv.xyx + vec3(0, 2, 4));
+
+    // Output to screen
+    fragColor = vec4(col, 1.0);
+}
+`;
+
+  fs.writeFileSync(path.join(shaderDir, 'image.glsl'), imageGlsl);
+
+  // Create config.json
+  const config = {
+    layout: 'default',
+    controls: true
+  };
+
+  fs.writeFileSync(path.join(shaderDir, 'config.json'), JSON.stringify(config, null, 2) + '\n');
+
+  console.log(`
+✓ Created shader "${name}"
+
+Files:
+  shaders/${name}/image.glsl     Main shader
+  shaders/${name}/config.json    Configuration
+
+Run it:
+  shader dev ${name}
+`);
+}
+
+function runVite(viteArgs, shaderName) {
+  const cwd = process.cwd();
+
+  // Check for vite.config.js
+  if (!fs.existsSync(path.join(cwd, 'vite.config.js'))) {
+    console.error('Error: vite.config.js not found');
+    console.error('Run "shader init" first');
+    process.exit(1);
+  }
+
+  // Find vite binary
+  const viteBin = path.join(cwd, 'node_modules', '.bin', 'vite');
+  if (!fs.existsSync(viteBin)) {
+    console.error('Error: vite not found in node_modules');
+    console.error('Run "npm install" first');
+    process.exit(1);
+  }
+
+  const env = { ...process.env, SHADER_NAME: shaderName };
+
+  const child = spawn(viteBin, viteArgs, {
+    cwd,
+    stdio: 'inherit',
+    shell: process.platform === 'win32',
+    env
+  });
+
+  child.on('error', (err) => {
+    console.error('Failed to start vite:', err.message);
+    process.exit(1);
+  });
+
+  child.on('close', (code) => {
+    process.exit(code || 0);
+  });
+}
+
+// Main command handler
+switch (command) {
+  case 'create': {
+    const name = args[1];
+    if (!name) {
+      console.error('Error: Specify a project name');
+      console.error('  shader create <name>');
+      process.exit(1);
+    }
+    create(name);
+    break;
+  }
+
+  case 'init':
+    init();
+    break;
+
+  case 'new': {
+    const name = args[1];
+    if (!name) {
+      console.error('Error: Specify a shader name');
+      console.error('  shader new <name>');
+      process.exit(1);
+    }
+    createNewShader(name);
+    break;
+  }
+
+  case 'dev': {
+    const shaderName = args[1];
+    if (!shaderName) {
+      console.error('Error: Specify a shader name');
+      console.error('  shader dev <shader-name>');
+      console.error('  shader list');
+      process.exit(1);
+    }
+
+    const cwd = process.cwd();
+    const shaderPath = path.join(cwd, 'shaders', shaderName);
+    if (!fs.existsSync(shaderPath)) {
+      console.error(`Error: Shader "${shaderName}" not found`);
+      console.error('Run "shader list" to see available shaders');
+      process.exit(1);
+    }
+
+    console.log(`Starting dev server for "${shaderName}"...`);
+    runVite([], shaderName);
+    break;
+  }
+
+  case 'build': {
+    const shaderName = args[1];
+    if (!shaderName) {
+      console.error('Error: Specify a shader name');
+      console.error('  shader build <shader-name>');
+      process.exit(1);
+    }
+
+    const cwd = process.cwd();
+    const shaderPath = path.join(cwd, 'shaders', shaderName);
+    if (!fs.existsSync(shaderPath)) {
+      console.error(`Error: Shader "${shaderName}" not found`);
+      process.exit(1);
+    }
+
+    console.log(`Building "${shaderName}"...`);
+    runVite(['build'], shaderName);
+    break;
+  }
+
+  case 'list':
+    listShaders(process.cwd());
+    break;
+
+  case 'help':
+  case '--help':
+  case '-h':
+    printUsage();
+    break;
+
+  case undefined:
+    printUsage();
+    break;
+
+  default:
+    console.error(`Unknown command: ${command}`);
+    printUsage();
+    process.exit(1);
+}

package/dist-lib/app/App.d.ts

@@ -0,0 +1,134 @@
+/**
+ * App Layer - Browser Runtime Coordinator
+ *
+ * Responsibilities:
+ *  - Create and manage canvas
+ *  - Initialize ShadertoyEngine
+ *  - Run animation loop (requestAnimationFrame)
+ *  - Handle resize and mouse events
+ *  - Present Image pass output to screen
+ */
+import './app.css';
+import { ShadertoyEngine } from '../engine/ShadertoyEngine';
+import { AppOptions } from './types';
+export declare class App {
+    private container;
+    private canvas;
+    private gl;
+    private engine;
+    private project;
+    private pixelRatio;
+    private animationId;
+    private startTime;
+    private mouse;
+    private fpsDisplay;
+    private frameCount;
+    private lastFpsUpdate;
+    private currentFps;
+    private controlsContainer;
+    private playPauseButton;
+    private isPaused;
+    private errorOverlay;
+    private resizeObserver;
+    private intersectionObserver;
+    private isVisible;
+    constructor(opts: AppOptions);
+    /**
+     * Check if there were any shader compilation errors.
+     * Returns true if the engine has errors and should not be started.
+     */
+    hasErrors(): boolean;
+    /**
+     * Get the underlying engine instance.
+     * Used for live recompilation in editor mode.
+     */
+    getEngine(): ShadertoyEngine;
+    /**
+     * Start the animation loop.
+     */
+    start(): void;
+    /**
+     * Stop the animation loop.
+     */
+    stop(): void;
+    /**
+     * Clean up all resources.
+     */
+    dispose(): void;
+    private animate;
+    /**
+     * Update FPS counter.
+     * Updates the display roughly once per second.
+     */
+    private updateFps;
+    /**
+     * Present the Image pass output to the screen.
+     *
+     * Since Image is the final pass and we execute all passes to their FBOs,
+     * we need to blit the Image pass output to the default framebuffer.
+     */
+    private presentToScreen;
+    private updateCanvasSize;
+    private setupMouseTracking;
+    /**
+     * Create playback control buttons (play/pause and reset).
+     */
+    private createControls;
+    /**
+     * Set up keyboard tracking for shader keyboard texture.
+     * Tracks all key presses/releases and forwards to engine.
+     */
+    private setupKeyboardTracking;
+    /**
+     * Set up global keyboard shortcuts (always available).
+     */
+    private setupGlobalShortcuts;
+    /**
+     * Set up keyboard shortcuts for playback control.
+     */
+    private setupKeyboardShortcuts;
+    /**
+     * Toggle between play and pause states.
+     */
+    private togglePlayPause;
+    /**
+     * Reset the shader to frame 0.
+     */
+    private reset;
+    /**
+     * Capture and download a screenshot of the current canvas as PNG.
+     * Filename format: shadertoy-{folderName}-{timestamp}.png
+     */
+    private screenshot;
+    /**
+     * Update play/pause button icon based on current state.
+     */
+    private updatePlayPauseButton;
+    /**
+     * Display shader compilation errors in an overlay.
+     */
+    private showErrorOverlay;
+    /**
+     * Parse and improve WebGL shader error messages.
+     */
+    private parseShaderError;
+    /**
+     * Extract code context around error line (±3 lines).
+     * Returns HTML with the error line highlighted.
+     */
+    private extractCodeContext;
+    /**
+     * Extract code context from common.glsl file.
+     * Similar to extractCodeContext but uses the original common source.
+     */
+    private extractCodeContextFromCommon;
+    /**
+     * Escape HTML to prevent XSS.
+     */
+    private escapeHTML;
+    /**
+     * Hide the error overlay.
+     */
+    private hideErrorOverlay;
+}
+//# sourceMappingURL=App.d.ts.map

package/dist-lib/app/App.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../../src/app/App.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,WAAW,CAAC;AAEnB,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAE5D,OAAO,EAAE,UAAU,EAAc,MAAM,SAAS,CAAC;AAEjD,qBAAa,GAAG;IACd,OAAO,CAAC,SAAS,CAAc;IAC/B,OAAO,CAAC,MAAM,CAAoB;IAClC,OAAO,CAAC,EAAE,CAAyB;IACnC,OAAO,CAAC,MAAM,CAAkB;IAChC,OAAO,CAAC,OAAO,CAAmB;IAElC,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,WAAW,CAAuB;IAC1C,OAAO,CAAC,SAAS,CAAa;IAG9B,OAAO,CAAC,KAAK,CAA8B;IAG3C,OAAO,CAAC,UAAU,CAAc;IAChC,OAAO,CAAC,UAAU,CAAa;IAC/B,OAAO,CAAC,aAAa,CAAa;IAClC,OAAO,CAAC,UAAU,CAAa;IAG/B,OAAO,CAAC,iBAAiB,CAA4B;IACrD,OAAO,CAAC,eAAe,CAA4B;IACnD,OAAO,CAAC,QAAQ,CAAkB;IAGlC,OAAO,CAAC,YAAY,CAA4B;IAGhD,OAAO,CAAC,cAAc,CAAiB;IAGvC,OAAO,CAAC,oBAAoB,CAAuB;IACnD,OAAO,CAAC,SAAS,CAAiB;gBAEtB,IAAI,EAAE,UAAU;IA4F5B;;;OAGG;IACH,SAAS,IAAI,OAAO;IAIpB;;;OAGG;IACH,SAAS,IAAI,eAAe;IAI5B;;OAEG;IACH,KAAK,IAAI,IAAI;IASb;;OAEG;IACH,IAAI,IAAI,IAAI;IAOZ;;OAEG;IACH,OAAO,IAAI,IAAI;IAaf,OAAO,CAAC,OAAO,CAuBb;IAEF;;;OAGG;IACH,OAAO,CAAC,SAAS;IAYjB;;;;;OAKG;IACH,OAAO,CAAC,eAAe;IAkCvB,OAAO,CAAC,gBAAgB;IAexB,OAAO,CAAC,kBAAkB;IA2B1B;;OAEG;IACH,OAAO,CAAC,cAAc;IA+CtB;;;OAGG;IACH,OAAO,CAAC,qBAAqB;IAmB7B;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAU5B;;OAEG;IACH,OAAO,CAAC,sBAAsB;IAgB9B;;OAEG;IACH,OAAO,CAAC,eAAe;IAKvB;;OAEG;IACH,OAAO,CAAC,KAAK;IAOb;;;OAGG;IACH,OAAO,CAAC,UAAU;IAoClB;;OAEG;IACH,OAAO,CAAC,qBAAqB;IAwB7B;;OAEG;IACH,OAAO,CAAC,gBAAgB;IA8ExB;;OAEG;IACH,OAAO,CAAC,gBAAgB;IAexB;;;OAGG;IACH,OAAO,CAAC,kBAAkB;IAgC1B;;;OAGG;IACH,OAAO,CAAC,4BAA4B;IA8BpC;;OAEG;IACH,OAAO,CAAC,UAAU;IAMlB;;OAEG;IACH,OAAO,CAAC,gBAAgB;CAMzB"}