@stevejtrettel/shader-sandbox 0.1.2 → 0.1.4

package/src/layouts/ui.css

@@ -0,0 +1,289 @@
+/**
+ * UI Layout Styles
+ * Shader canvas with adjacent uniforms panel
+ */
+
+/* ===== UI Layout ===== */
+.layout-ui {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  gap: 24px;
+  padding: 60px 80px;
+}
+
+/* Canvas container - takes remaining space */
+.layout-ui .ui-canvas-container {
+  position: relative;
+  flex: 1;
+  max-width: 1200px;
+  background: var(--bg-canvas);
+  border-radius: 8px;
+  box-shadow: var(--shadow-md), var(--shadow-sm);
+  overflow: hidden;
+}
+
+/* UI Panel - fixed width on right */
+.layout-ui .ui-panel {
+  width: 200px;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  background: var(--bg-secondary);
+  border-radius: 8px;
+  box-shadow: var(--shadow-md), var(--shadow-sm);
+  overflow: hidden;
+}
+
+/* Uniforms container - scrollable, vertically centered content */
+.layout-ui .ui-uniforms-container {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+/* Empty state for no uniforms */
+.layout-ui .ui-empty-state {
+  text-align: center;
+  color: var(--text-muted);
+  font-size: 13px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  padding: 20px;
+}
+
+/* Override uniform controls for UI panel */
+.layout-ui .uniform-controls {
+  padding: 20px;
+  gap: 16px;
+  background: transparent;
+}
+
+.layout-ui .uniform-controls-header {
+  display: none;
+}
+
+.layout-ui .uniform-controls-list {
+  gap: 20px;
+}
+
+.layout-ui .uniform-control {
+  gap: 8px;
+}
+
+.layout-ui .uniform-control-label {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-primary);
+}
+
+.layout-ui .uniform-control-value {
+  font-size: 11px;
+  padding: 3px 8px;
+  min-width: 44px;
+  color: var(--text-muted);
+  background: var(--bg-tertiary);
+  border-radius: 4px;
+}
+
+/* Slider styling */
+.layout-ui .uniform-control-slider {
+  height: 4px;
+  background: var(--border-primary);
+}
+
+.layout-ui .uniform-control-slider::-webkit-slider-runnable-track {
+  height: 4px;
+  background: var(--border-primary);
+}
+
+.layout-ui .uniform-control-slider::-webkit-slider-thumb {
+  width: 14px;
+  height: 14px;
+  margin-top: -5px;
+  background: var(--accent-primary);
+  border: 2px solid var(--bg-secondary);
+  box-shadow: var(--shadow-sm);
+}
+
+.layout-ui .uniform-control-slider::-moz-range-track {
+  height: 4px;
+  background: var(--border-primary);
+}
+
+.layout-ui .uniform-control-slider::-moz-range-thumb {
+  width: 14px;
+  height: 14px;
+  background: var(--accent-primary);
+  border: 2px solid var(--bg-secondary);
+  box-shadow: var(--shadow-sm);
+}
+
+/* XY pad styling */
+.layout-ui .uniform-control-xy-pad {
+  height: 100px;
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-primary);
+  border-radius: 4px;
+}
+
+.layout-ui .uniform-control-xy-handle {
+  width: 12px;
+  height: 12px;
+  background: var(--accent-primary);
+  border: 2px solid var(--bg-secondary);
+  box-shadow: var(--shadow-sm);
+}
+
+/* Color swatch */
+.layout-ui .uniform-control-color-swatch {
+  height: 28px;
+  border-radius: 4px;
+  border: 1px solid var(--border-primary);
+}
+
+/* Toggle switch */
+.layout-ui .uniform-control-toggle {
+  width: 36px;
+  height: 20px;
+}
+
+.layout-ui .uniform-control-toggle-slider {
+  background: var(--border-primary);
+  border-radius: 20px;
+}
+
+.layout-ui .uniform-control-toggle-slider::before {
+  width: 14px;
+  height: 14px;
+  left: 3px;
+  bottom: 3px;
+  background: var(--bg-primary);
+  box-shadow: var(--shadow-sm);
+}
+
+.layout-ui .uniform-control-toggle input:checked + .uniform-control-toggle-slider {
+  background: var(--accent-primary);
+}
+
+.layout-ui .uniform-control-toggle input:checked + .uniform-control-toggle-slider::before {
+  transform: translateX(16px);
+}
+
+/* Vec component labels */
+.layout-ui .uniform-control-vec-component {
+  font-size: 10px;
+  width: 14px;
+  color: var(--text-muted);
+  font-weight: 500;
+}
+
+.layout-ui .uniform-control-vec-value {
+  font-size: 10px;
+  min-width: 36px;
+  padding: 2px 6px;
+  color: var(--text-muted);
+  background: var(--bg-tertiary);
+  border-radius: 4px;
+}
+
+/* Scrollbar styling */
+.layout-ui .ui-uniforms-container::-webkit-scrollbar {
+  width: 6px;
+}
+
+.layout-ui .ui-uniforms-container::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.layout-ui .ui-uniforms-container::-webkit-scrollbar-thumb {
+  background: var(--border-primary);
+  border-radius: 3px;
+}
+
+.layout-ui .ui-uniforms-container::-webkit-scrollbar-thumb:hover {
+  background: var(--text-muted);
+}
+
+/* ===== Playback Controls ===== */
+.layout-ui .ui-playback-container {
+  display: flex;
+  justify-content: center;
+  gap: 12px;
+  padding: 16px 20px;
+  border-top: 1px solid var(--border-primary);
+  background: var(--bg-tertiary);
+}
+
+.layout-ui .ui-control-button {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--button-bg);
+  border: 1px solid var(--border-primary);
+  border-radius: 8px;
+  color: var(--text-primary);
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.layout-ui .ui-control-button:hover {
+  background: var(--button-bg-hover);
+  color: var(--text-primary);
+}
+
+.layout-ui .ui-control-button:active {
+  transform: scale(0.95);
+}
+
+.layout-ui .ui-control-button svg {
+  width: 18px;
+  height: 18px;
+  fill: currentColor;
+}
+
+/* ===== Responsive adjustments ===== */
+
+@media (max-width: 1200px) {
+  .layout-ui {
+    padding: 40px 60px;
+  }
+}
+
+@media (max-width: 1000px) {
+  .layout-ui {
+    padding: 30px 40px;
+  }
+}
+
+@media (max-width: 800px) {
+  .layout-ui {
+    padding: 24px 30px;
+    gap: 16px;
+  }
+}
+
+/* Stack vertically on small screens */
+@media (max-width: 600px) {
+  .layout-ui {
+    flex-direction: column;
+    padding: 16px;
+    gap: 16px;
+  }
+
+  .layout-ui .ui-canvas-container {
+    flex: none;
+    /* Maintain aspect ratio when stacked */
+    aspect-ratio: 16 / 9;
+  }
+
+  .layout-ui .ui-panel {
+    width: 100%;
+    max-height: 300px;
+  }
+}

package/src/main.ts

@@ -16,8 +16,9 @@ import './styles/base.css';
 
 import { App } from './app/App';
 import { createLayout } from './layouts';
+import { UILayout } from './layouts/UILayout';
 import { loadDemoProject, DEMO_NAME } from './project/generatedLoader';
-import { PassName } from './project/types';
+import { PassName, UniformValue } from './project/types';
 import { RecompileResult } from './layouts/types';
 
 async function main() {
@@ -46,11 +47,16 @@ async function main() {
     // Get canvas container from layout
     const canvasContainer = layout.getCanvasContainer();
 
+    // Check if this is a UILayout (which has its own uniforms panel and playback controls)
+    const isUILayout = layout instanceof UILayout;
+
     // Create app
     const app = new App({
       container: canvasContainer,
       project,
       pixelRatio: window.devicePixelRatio,
+      skipUniformsPanel: isUILayout,
+      skipPlaybackControls: isUILayout,
     });
 
     // Wire up recompile handler for layouts that support it (split, tabbed)
@@ -79,6 +85,38 @@ async function main() {
       });
     }
 
+    // Wire up uniform change handler for layouts that support it (split, tabbed)
+    if (layout.setUniformHandler) {
+      layout.setUniformHandler((name: string, value: UniformValue) => {
+        const engine = app.getEngine();
+        if (engine) {
+          engine.setUniformValue(name, value);
+        }
+      });
+    }
+
+    // Wire up UILayout callbacks (playback controls and uniforms)
+    if (layout instanceof UILayout) {
+      layout.setPlaybackCallbacks({
+        onPlayPause: () => {
+          app.togglePlayPause();
+          layout.setPaused(app.getPaused());
+        },
+        onReset: () => app.reset(),
+        onScreenshot: () => app.screenshot(),
+      });
+
+      layout.setUniformCallback((name: string, value: UniformValue) => {
+        const engine = app.getEngine();
+        if (engine) {
+          engine.setUniformValue(name, value);
+        }
+      });
+
+      // Sync initial paused state (from project.startPaused)
+      layout.setPaused(app.getPaused());
+    }
+
     // Only start animation loop if there are no compilation errors
     // If there are errors, the error overlay is already shown by App constructor
     if (!app.hasErrors()) {

package/src/project/configHelpers.ts

@@ -0,0 +1,225 @@
+/**
+ * Shared helpers for config loading.
+ * Used by both the Node/CLI loader (loadProject.ts) and
+ * the browser/Vite loader (loaderHelper.ts).
+ */
+
+import type { PassName, ChannelValue, ChannelJSONObject } from './types';
+
+/**
+ * Type guard for PassName.
+ */
+export function isPassName(s: string): s is PassName {
+  return s === 'Image' || s === 'BufferA' || s === 'BufferB' || s === 'BufferC' || s === 'BufferD';
+}
+
+/**
+ * Get default source file name for a pass.
+ */
+export function defaultSourceForPass(name: PassName): string {
+  switch (name) {
+    case 'Image':
+      return 'image.glsl';
+    case 'BufferA':
+      return 'bufferA.glsl';
+    case 'BufferB':
+      return 'bufferB.glsl';
+    case 'BufferC':
+      return 'bufferC.glsl';
+    case 'BufferD':
+      return 'bufferD.glsl';
+  }
+}
+
+/**
+ * Parse a channel value (string shorthand or object) into normalized ChannelJSONObject.
+ *
+ * String shortcuts:
+ * - "BufferA", "BufferB", etc. → buffer reference
+ * - "keyboard" → keyboard input
+ * - "audio" → microphone audio input
+ * - "webcam" → webcam video input
+ * - "photo.jpg" (with extension) → texture file
+ */
+export function parseChannelValue(value: ChannelValue): ChannelJSONObject | null {
+  if (typeof value === 'string') {
+    if (isPassName(value)) {
+      return { buffer: value };
+    }
+    if (value === 'keyboard') {
+      return { keyboard: true };
+    }
+    if (value === 'audio') {
+      return { audio: true };
+    }
+    if (value === 'webcam') {
+      return { webcam: true };
+    }
+    // Assume texture (file path)
+    return { texture: value };
+  }
+  // Already an object
+  return value;
+}
+
+/** The ordered list of pass names for iteration. */
+export const PASS_ORDER = ['Image', 'BufferA', 'BufferB', 'BufferC', 'BufferD'] as const;
+
+/** The four buffer pass names (excludes Image). */
+export const BUFFER_PASS_NAMES: PassName[] = ['BufferA', 'BufferB', 'BufferC', 'BufferD'];
+
+/** The four channel keys. */
+export const CHANNEL_KEYS = ['iChannel0', 'iChannel1', 'iChannel2', 'iChannel3'] as const;
+
+/** Default layout for projects. */
+export const DEFAULT_LAYOUT = 'default' as const;
+
+/** Default controls setting. */
+export const DEFAULT_CONTROLS = false;
+
+/** Default theme. */
+export const DEFAULT_THEME = 'light' as const;
+
+// =============================================================================
+// Config Validation
+// =============================================================================
+
+/** Built-in uniform names that cannot be used as custom uniform names. */
+const RESERVED_UNIFORM_NAMES = new Set([
+  'iResolution', 'iTime', 'iTimeDelta', 'iFrame', 'iMouse',
+  'iDate', 'iFrameRate', 'iChannelResolution',
+  'iChannel0', 'iChannel1', 'iChannel2', 'iChannel3',
+  'iTouchCount', 'iTouch0', 'iTouch1', 'iTouch2',
+  'iPinch', 'iPinchDelta', 'iPinchCenter',
+]);
+
+const GLSL_IDENTIFIER_RE = /^[a-zA-Z_][a-zA-Z0-9_]*$/;
+
+const GLSL_RESERVED_WORDS = new Set([
+  'attribute', 'const', 'uniform', 'varying', 'break', 'continue',
+  'do', 'for', 'while', 'if', 'else', 'in', 'out', 'inout',
+  'float', 'int', 'void', 'bool', 'true', 'false',
+  'discard', 'return', 'mat2', 'mat3', 'mat4',
+  'vec2', 'vec3', 'vec4', 'ivec2', 'ivec3', 'ivec4',
+  'bvec2', 'bvec3', 'bvec4', 'sampler2D', 'samplerCube',
+  'struct', 'precision', 'highp', 'mediump', 'lowp',
+  'layout', 'centroid', 'flat', 'smooth', 'noperspective',
+  'switch', 'case', 'default',
+]);
+
+/** Check if a string is a valid GLSL identifier (not a reserved word). */
+export function isValidGLSLIdentifier(name: string): boolean {
+  return GLSL_IDENTIFIER_RE.test(name) && !GLSL_RESERVED_WORDS.has(name);
+}
+
+const VALID_LAYOUTS = new Set(['fullscreen', 'default', 'split', 'tabbed']);
+const VALID_THEMES = new Set(['light', 'dark', 'system']);
+
+const VALID_TOP_LEVEL_KEYS = new Set([
+  'mode', 'title', 'author', 'description', 'layout', 'theme', 'controls',
+  'common', 'startPaused', 'pixelRatio', 'uniforms', 'buffers', 'textures',
+  'Image', 'BufferA', 'BufferB', 'BufferC', 'BufferD',
+]);
+
+const VALID_PASS_KEYS = new Set(['source', 'iChannel0', 'iChannel1', 'iChannel2', 'iChannel3']);
+
+const SPECIAL_TEXTURE_SOURCES = new Set(['keyboard', 'audio', 'webcam']);
+
+/**
+ * Validate a project config and throw on errors.
+ * Logs warnings for non-fatal issues.
+ */
+export function validateConfig(config: Record<string, any>, root: string): void {
+  const warnings: string[] = [];
+  const errors: string[] = [];
+
+  // Warn on unknown top-level keys
+  for (const key of Object.keys(config)) {
+    if (!VALID_TOP_LEVEL_KEYS.has(key)) {
+      warnings.push(`Unknown config key '${key}'`);
+    }
+  }
+
+  // Validate layout
+  if (config.layout !== undefined && !VALID_LAYOUTS.has(config.layout)) {
+    errors.push(`Invalid layout '${config.layout}'. Expected one of: ${[...VALID_LAYOUTS].join(', ')}`);
+  }
+
+  // Validate theme
+  if (config.theme !== undefined && !VALID_THEMES.has(config.theme)) {
+    errors.push(`Invalid theme '${config.theme}'. Expected one of: ${[...VALID_THEMES].join(', ')}`);
+  }
+
+  // Validate uniform names
+  if (config.uniforms && typeof config.uniforms === 'object') {
+    for (const name of Object.keys(config.uniforms)) {
+      if (RESERVED_UNIFORM_NAMES.has(name)) {
+        errors.push(`Uniform name '${name}' is reserved (built-in uniform)`);
+      }
+      if (!isValidGLSLIdentifier(name)) {
+        errors.push(`Uniform name '${name}' is not a valid GLSL identifier`);
+      }
+    }
+  }
+
+  // Validate buffer names
+  const bufferNames = new Set<string>();
+  if (config.buffers) {
+    const names = Array.isArray(config.buffers) ? config.buffers : Object.keys(config.buffers);
+    for (const name of names) {
+      if (typeof name !== 'string') {
+        errors.push(`Buffer name must be a string, got ${typeof name}`);
+        continue;
+      }
+      if (!isValidGLSLIdentifier(name)) {
+        errors.push(`Buffer name '${name}' is not a valid GLSL identifier`);
+      }
+      bufferNames.add(name);
+    }
+  }
+
+  // Validate texture names and sources
+  if (config.textures && typeof config.textures === 'object') {
+    for (const [name, value] of Object.entries(config.textures)) {
+      if (!isValidGLSLIdentifier(name)) {
+        errors.push(`Texture name '${name}' is not a valid GLSL identifier`);
+      }
+      if (bufferNames.has(name)) {
+        errors.push(`Texture name '${name}' collides with a buffer name`);
+      }
+      if (typeof value !== 'string') {
+        errors.push(`Texture source for '${name}' must be a string`);
+      } else if (!SPECIAL_TEXTURE_SOURCES.has(value) && !/\.\w+$/.test(value) && !isValidGLSLIdentifier(value)) {
+        errors.push(`Invalid texture source '${value}' for '${name}'. Expected a file path with extension, a script texture name, or one of: ${[...SPECIAL_TEXTURE_SOURCES].join(', ')}`);
+      }
+    }
+  }
+
+  // Validate pass configs
+  for (const passName of PASS_ORDER) {
+    const passConfig = config[passName];
+    if (!passConfig || typeof passConfig !== 'object') continue;
+
+    for (const key of Object.keys(passConfig)) {
+      if (!VALID_PASS_KEYS.has(key)) {
+        warnings.push(`Unknown key '${key}' in pass '${passName}'`);
+      }
+    }
+
+    // Check channel buffer references
+    for (const chKey of CHANNEL_KEYS) {
+      const val = passConfig[chKey];
+      if (!val) continue;
+      if (typeof val === 'string' && isPassName(val) && val !== 'Image' && !config[val]) {
+        warnings.push(`${passName}.${chKey} references '${val}' but no ${val} pass is configured`);
+      }
+    }
+  }
+
+  for (const w of warnings) console.warn(`[config] ${root}: ${w}`);
+  if (errors.length > 0) {
+    throw new Error(
+      `Config validation failed for '${root}':\n${errors.map(e => `  - ${e}`).join('\n')}`
+    );
+  }
+}

package/src/project/generatedLoader.ts

@@ -1,23 +1,44 @@
 // Auto-generated - DO NOT EDIT
 import { loadDemo } from './loaderHelper';
-import { ShadertoyConfig } from './types';
+import { ProjectConfig } from './types';
 
-export const DEMO_NAME = 'course/day5/torus-analytical';
+export const DEMO_NAME = 'demos/examples/ubo-dynamic';
+
+// Transform glob keys from "/path" to "./path" format
+function transformKeys<T>(files: Record<string, T>): Record<string, T> {
+  const result: Record<string, T> = {};
+  for (const [key, value] of Object.entries(files)) {
+    // Convert /demos/... to ./demos/...
+    const newKey = key.startsWith('/') ? '.' + key : key;
+    result[newKey] = value;
+  }
+  return result;
+}
 
 export async function loadDemoProject() {
-  const glslFiles = import.meta.glob<string>('/demos/course/day5/torus-analytical/**/*.glsl', {
+  // Use root-relative paths for globs (works from any file location)
+  const glslFilesRaw = import.meta.glob<string>('/demos/examples/ubo-dynamic/**/*.glsl', {
     query: '?raw',
     import: 'default',
   });
 
-  const jsonFiles = import.meta.glob<ShadertoyConfig>('/demos/course/day5/torus-analytical/**/*.json', {
+  const jsonFilesRaw = import.meta.glob<ProjectConfig>('/demos/examples/ubo-dynamic/**/*.json', {
     import: 'default',
   });
 
-  const imageFiles = import.meta.glob<string>('/demos/course/day5/torus-analytical/**/*.{jpg,jpeg,png,gif,webp,bmp}', {
+  const imageFilesRaw = import.meta.glob<string>('/demos/examples/ubo-dynamic/**/*.{jpg,jpeg,png,gif,webp,bmp}', {
     query: '?url',
     import: 'default',
   });
 
-  return loadDemo(DEMO_NAME, glslFiles, jsonFiles, imageFiles);
+  // Script files (setup.js / script.js hooks for JS-driven computation)
+  const scriptFilesRaw = import.meta.glob<any>('/demos/examples/ubo-dynamic/**/script.js');
+
+  // Transform keys to ./ format that loadDemo expects
+  const glslFiles = transformKeys(glslFilesRaw);
+  const jsonFiles = transformKeys(jsonFilesRaw);
+  const imageFiles = transformKeys(imageFilesRaw);
+  const scriptFiles = transformKeys(scriptFilesRaw);
+
+  return loadDemo(DEMO_NAME, glslFiles, jsonFiles, imageFiles, scriptFiles);
 }