@stevejtrettel/shader-sandbox 0.1.2 → 0.1.4

package/bin/cli.js

@@ -63,24 +63,41 @@ function copyDir(src, dest, skipFiles = []) {
   }
 }
 
-function listShaders(cwd) {
+function getShaderList(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);
+    return null;
   }
 
   const entries = fs.readdirSync(shadersDir, { withFileTypes: true });
-  const shaders = entries.filter(e => e.isDirectory()).map(e => e.name);
+  return entries.filter(e => e.isDirectory()).map(e => e.name);
+}
+
+function listShaders(cwd) {
+  const shaders = getShaderList(cwd);
+
+  if (shaders === null) {
+    console.error('Error: shaders/ directory not found');
+    console.error('');
+    console.error('To get started:');
+    console.error('  shader init     Initialize shaders in current directory');
+    console.error('  shader create   Create a new shader project');
+    process.exit(1);
+  }
 
   if (shaders.length === 0) {
-    console.log('No shaders found. Run "shader new <name>" to create one.');
+    console.log('No shaders found.');
+    console.log('');
+    console.log('Create your first shader:');
+    console.log('  shader new my-shader');
     return;
   }
 
   console.log('Available shaders:');
   shaders.forEach(s => console.log(`  ${s}`));
+  console.log('');
+  console.log('Run a shader:');
+  console.log(`  shader dev ${shaders[0]}`);
 }
 
 async function create(projectName) {
@@ -328,18 +345,61 @@ switch (command) {
 
   case 'dev': {
     const shaderName = args[1];
+    const cwd = process.cwd();
+
     if (!shaderName) {
-      console.error('Error: Specify a shader name');
-      console.error('  shader dev <shader-name>');
-      console.error('  shader list');
+      const shaders = getShaderList(cwd);
+
+      if (shaders === null) {
+        console.error('Error: shaders/ directory not found');
+        console.error('');
+        console.error('To get started:');
+        console.error('  shader init     Initialize shaders in current directory');
+        console.error('  shader create   Create a new shader project');
+        process.exit(1);
+      }
+
+      if (shaders.length === 0) {
+        console.error('Error: No shaders found');
+        console.error('');
+        console.error('Create your first shader:');
+        console.error('  shader new my-shader');
+        process.exit(1);
+      }
+
+      console.error('Error: Specify which shader to run');
+      console.error('');
+      console.error('Available shaders:');
+      shaders.forEach(s => console.error(`  ${s}`));
+      console.error('');
+      console.error('Usage:');
+      console.error(`  shader dev ${shaders[0]}`);
       process.exit(1);
     }
 
-    const cwd = process.cwd();
     const shaderPath = path.join(cwd, 'shaders', shaderName);
     if (!fs.existsSync(shaderPath)) {
+      const shaders = getShaderList(cwd);
+
       console.error(`Error: Shader "${shaderName}" not found`);
-      console.error('Run "shader list" to see available shaders');
+
+      if (shaders && shaders.length > 0) {
+        // Check for similar names (typo detection)
+        const similar = shaders.filter(s =>
+          s.toLowerCase().includes(shaderName.toLowerCase()) ||
+          shaderName.toLowerCase().includes(s.toLowerCase())
+        );
+
+        if (similar.length > 0) {
+          console.error('');
+          console.error('Did you mean:');
+          similar.forEach(s => console.error(`  ${s}`));
+        } else {
+          console.error('');
+          console.error('Available shaders:');
+          shaders.forEach(s => console.error(`  ${s}`));
+        }
+      }
       process.exit(1);
     }
 
@@ -350,16 +410,48 @@ switch (command) {
 
   case 'build': {
     const shaderName = args[1];
+    const cwd = process.cwd();
+
     if (!shaderName) {
-      console.error('Error: Specify a shader name');
-      console.error('  shader build <shader-name>');
+      const shaders = getShaderList(cwd);
+
+      if (shaders && shaders.length > 0) {
+        console.error('Error: Specify which shader to build');
+        console.error('');
+        console.error('Available shaders:');
+        shaders.forEach(s => console.error(`  ${s}`));
+        console.error('');
+        console.error('Usage:');
+        console.error(`  shader build ${shaders[0]}`);
+      } else {
+        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)) {
+      const shaders = getShaderList(cwd);
+
       console.error(`Error: Shader "${shaderName}" not found`);
+
+      if (shaders && shaders.length > 0) {
+        const similar = shaders.filter(s =>
+          s.toLowerCase().includes(shaderName.toLowerCase()) ||
+          shaderName.toLowerCase().includes(s.toLowerCase())
+        );
+
+        if (similar.length > 0) {
+          console.error('');
+          console.error('Did you mean:');
+          similar.forEach(s => console.error(`  ${s}`));
+        } else {
+          console.error('');
+          console.error('Available shaders:');
+          shaders.forEach(s => console.error(`  ${s}`));
+        }
+      }
       process.exit(1);
     }
 

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

@@ -3,13 +3,13 @@
  *
  * Responsibilities:
  *  - Create and manage canvas
- *  - Initialize ShadertoyEngine
+ *  - Initialize ShaderEngine
  *  - Run animation loop (requestAnimationFrame)
  *  - Handle resize and mouse events
  *  - Present Image pass output to screen
  */
 import './app.css';
-import { ShadertoyEngine } from '../engine/ShadertoyEngine';
+import { ShaderEngine } from '../engine/ShaderEngine';
 import { AppOptions } from './types';
 export declare class App {
     private container;
@@ -21,18 +21,54 @@ export declare class App {
     private animationId;
     private startTime;
     private mouse;
+    private isMouseDown;
+    private touchState;
+    private activePointers;
     private fpsDisplay;
     private frameCount;
     private lastFpsUpdate;
     private currentFps;
+    private statsContainer;
+    private statsGrid;
+    private timeDisplay;
+    private frameDisplay;
+    private resolutionDisplay;
+    private totalFrameCount;
+    private isStatsOpen;
     private controlsContainer;
+    private controlsGrid;
+    private menuButton;
     private playPauseButton;
     private isPaused;
+    private isMenuOpen;
     private errorOverlay;
+    private mediaBanner;
     private resizeObserver;
     private intersectionObserver;
     private isVisible;
+    private contextLostOverlay;
+    private isContextLost;
+    private uniformsPanel;
+    private scriptAPI;
+    private scriptErrorCount;
+    private _lastOnFrameTime;
+    private static readonly MAX_SCRIPT_ERRORS;
+    private mediaInitialized;
+    private isRecording;
+    private mediaRecorder;
+    private recordedChunks;
+    private recordButton;
+    private recordingIndicator;
     constructor(opts: AppOptions);
+    /**
+     * Initialize audio/webcam on first user gesture (required by browser policy).
+     * Video files are auto-started in the constructor since muted videos don't need gestures.
+     */
+    private initMediaOnGesture;
+    /**
+     * Start video file playback (muted, doesn't require user gesture).
+     */
+    private initVideoFiles;
     /**
      * Check if there were any shader compilation errors.
      * Returns true if the engine has errors and should not be started.
@@ -42,7 +78,7 @@ export declare class App {
      * Get the underlying engine instance.
      * Used for live recompilation in editor mode.
      */
-    getEngine(): ShadertoyEngine;
+    getEngine(): ShaderEngine;
     /**
      * Start the animation loop.
      */
@@ -58,9 +94,25 @@ export declare class App {
     private animate;
     /**
      * Update FPS counter.
-     * Updates the display roughly once per second.
+     * FPS display updates once per second, frame count updates every frame.
      */
     private updateFps;
+    /**
+     * Update frame count display.
+     */
+    private updateFrameDisplay;
+    /**
+     * Update time display.
+     */
+    private updateTimeDisplay;
+    /**
+     * Update resolution display.
+     */
+    private updateResolutionDisplay;
+    /**
+     * Toggle the stats panel open/closed.
+     */
+    private toggleStats;
     /**
      * Present the Image pass output to the screen.
      *
@@ -71,9 +123,23 @@ export declare class App {
     private updateCanvasSize;
     private setupMouseTracking;
     /**
-     * Create playback control buttons (play/pause and reset).
+     * Set up pointer event tracking for touch support.
+     * Uses Pointer Events API for unified mouse/touch/pen handling.
+     */
+    private setupTouchTracking;
+    /**
+     * Update touch state from active pointers.
+     * Calculates pinch gesture when 2+ fingers are active.
+     */
+    private updateTouchState;
+    /**
+     * Create playback control buttons with collapsible menu.
      */
     private createControls;
+    /**
+     * Toggle the controls menu open/closed.
+     */
+    private toggleControlsMenu;
     /**
      * Set up keyboard tracking for shader keyboard texture.
      * Tracks all key presses/releases and forwards to engine.
@@ -87,41 +153,103 @@ export declare class App {
      * Set up keyboard shortcuts for playback control.
      */
     private setupKeyboardShortcuts;
+    /**
+     * Set up handlers for WebGL context loss and restoration.
+     * Context can be lost due to GPU driver issues, system sleep, etc.
+     */
+    private setupContextLossHandling;
+    /**
+     * Handle WebGL context loss - pause rendering and show overlay.
+     */
+    private handleContextLost;
+    /**
+     * Handle WebGL context restoration - reinitialize and resume.
+     */
+    private handleContextRestored;
+    /**
+     * Show overlay when WebGL context is lost.
+     */
+    private showContextLostOverlay;
+    /**
+     * Hide the context lost overlay.
+     */
+    private hideContextLostOverlay;
     /**
      * Toggle between play and pause states.
+     * Public for UILayout to call.
+     */
+    togglePlayPause(): void;
+    /**
+     * Get current paused state.
      */
-    private togglePlayPause;
+    getPaused(): boolean;
     /**
      * Reset the shader to frame 0.
+     * Public for UILayout to call.
      */
-    private reset;
+    reset(): void;
     /**
      * Capture and download a screenshot of the current canvas as PNG.
      * Filename format: shadertoy-{folderName}-{timestamp}.png
+     * Public for UILayout to call.
+     */
+    screenshot(): void;
+    /**
+     * Toggle video recording on/off.
+     * Public for UILayout to call.
+     */
+    toggleRecording(): void;
+    /**
+     * Start recording the canvas as WebM video.
+     */
+    private startRecording;
+    /**
+     * Stop recording and trigger download.
+     */
+    private stopRecording;
+    /**
+     * Update record button appearance based on recording state.
+     */
+    private updateRecordButton;
+    /**
+     * Show the recording indicator (pulsing red dot in corner).
+     */
+    private showRecordingIndicator;
+    /**
+     * Hide the recording indicator.
+     */
+    private hideRecordingIndicator;
+    /**
+     * Export the current shader as a standalone HTML file.
+     * Bakes in current uniform values and replaces textures with procedural grid.
+     */
+    exportHTML(): void;
+    /**
+     * Generate standalone HTML with embedded shaders.
      */
-    private screenshot;
+    private generateStandaloneHTML;
     /**
      * Update play/pause button icon based on current state.
      */
     private updatePlayPauseButton;
+    private showMediaBanner;
+    private hideMediaBanner;
     /**
      * Display shader compilation errors in an overlay.
      */
     private showErrorOverlay;
     /**
-     * Parse and improve WebGL shader error messages.
+     * Parse WebGL error messages into user-friendly format with correct line numbers.
      */
     private parseShaderError;
     /**
-     * Extract code context around error line (±3 lines).
-     * Returns HTML with the error line highlighted.
+     * Add helpful hints to common GLSL error messages.
      */
-    private extractCodeContext;
+    private friendlyGLSLError;
     /**
-     * Extract code context from common.glsl file.
-     * Similar to extractCodeContext but uses the original common source.
+     * Build code context HTML around an error line (±3 lines) from source.
      */
-    private extractCodeContextFromCommon;
+    private buildCodeContext;
     /**
      * Escape HTML to prevent XSS.
      */

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

@@ -1 +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"}
+{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../../src/app/App.ts"],"names":[],"mappings":"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"}