@stevejtrettel/shader-sandbox 0.1.3 → 0.1.4

package/dist-lib/layouts/tabbed.css

@@ -3,14 +3,6 @@
  * Single window with tabs switching between shader and code views
  */
 
-/* ===== Theme Variables (for code viewer) ===== */
-.layout-tabbed {
-  --tab-border: #e0e0e0;
-  --code-bg: white;
-  --code-text: #000;
-  --line-number-text: #999;
-}
-
 .layout-tabbed {
   width: 100%;
   height: 100%;
@@ -30,7 +22,7 @@
   height: 650px; /* 600px content + ~50px tabs */
   max-height: 100%;
   border-radius: 8px;
-  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25), 0 5px 15px rgba(0, 0, 0, 0.15);
+  box-shadow: var(--shadow-lg), var(--shadow-sm);
   overflow: hidden;
 }
 
@@ -39,8 +31,8 @@
   display: flex;
   align-items: center;
   flex-shrink: 0;
-  background: #f8f8f8;
-  border-bottom: 1px solid #e0e0e0;
+  background: var(--tab-bg);
+  border-bottom: 1px solid var(--border-primary);
   padding-right: 8px;
 }
 
@@ -60,7 +52,7 @@
 }
 
 .tabbed-tab-bar::-webkit-scrollbar-thumb {
-  background: #ccc;
+  background: var(--border-secondary);
   border-radius: 2px;
 }
 
@@ -73,18 +65,18 @@
   font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
   cursor: pointer;
   transition: color 0.15s, border-color 0.15s;
-  color: #666;
+  color: var(--tab-text);
   white-space: nowrap;
   flex-shrink: 0;
 }
 
 .tabbed-tab-button:hover {
-  color: #333;
+  color: var(--tab-text-hover);
 }
 
 .tabbed-tab-button.active {
-  color: #000;
-  border-bottom-color: #4a9eff;
+  color: var(--tab-text-active);
+  border-bottom-color: var(--tab-border-active);
 }
 
 .tabbed-tab-button.shader-tab {
@@ -92,12 +84,28 @@
 }
 
 .tabbed-tab-button.image-tab {
-  color: #7c4dff;
+  color: var(--accent-secondary);
 }
 
 .tabbed-tab-button.image-tab.active {
-  color: #7c4dff;
-  border-bottom-color: #7c4dff;
+  color: var(--accent-secondary);
+  border-bottom-color: var(--accent-secondary);
+}
+
+.tabbed-tab-button.uniforms-tab {
+  color: var(--accent-tertiary, var(--accent-primary));
+  padding: 8px 12px;
+}
+
+.tabbed-tab-button.uniforms-tab.active {
+  color: var(--accent-tertiary, var(--accent-primary));
+  border-bottom-color: var(--accent-tertiary, var(--accent-primary));
+}
+
+.tabbed-tab-button .uniforms-icon {
+  width: 18px;
+  height: 18px;
+  display: block;
 }
 
 /* ===== Content Area ===== */
@@ -105,7 +113,7 @@
   flex: 1;
   min-height: 0; /* Critical for flexbox scrolling */
   position: relative;
-  background: #000;
+  background: var(--bg-canvas);
   overflow: hidden;
 }
 
@@ -149,8 +157,8 @@
   text-align: right;
   padding-right: 16px;
   margin-right: 16px;
-  border-right: 1px solid var(--tab-border);
-  color: var(--line-number-text);
+  border-right: 1px solid var(--code-line-border);
+  color: var(--code-line-number);
   user-select: none;
   flex-shrink: 0;
   padding-left: 16px;
@@ -171,7 +179,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background: #f5f5f5;
+  background: var(--image-viewer-bg);
   padding: 20px;
   box-sizing: border-box;
 }
@@ -181,36 +189,18 @@
   max-height: 100%;
   object-fit: contain;
   border-radius: 4px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-}
-
-/* ===== Prism Theme (Light) ===== */
-.tabbed-code-viewer .token.comment { color: #6a9955; }
-.tabbed-code-viewer .token.keyword { color: #0000ff; }
-.tabbed-code-viewer .token.string { color: #a31515; }
-.tabbed-code-viewer .token.number { color: #098658; }
-.tabbed-code-viewer .token.operator { color: #000000; }
-.tabbed-code-viewer .token.function { color: #795e26; }
-.tabbed-code-viewer .token.class-name { color: #267f99; }
-.tabbed-code-viewer .token.punctuation { color: #000000; }
-
-/* ===== Prism Theme (Dark) ===== */
-[data-bs-theme="dark"] .tabbed-code-viewer .token.comment,
-.dark .tabbed-code-viewer .token.comment { color: #6a9955; }
-[data-bs-theme="dark"] .tabbed-code-viewer .token.keyword,
-.dark .tabbed-code-viewer .token.keyword { color: #569cd6; }
-[data-bs-theme="dark"] .tabbed-code-viewer .token.string,
-.dark .tabbed-code-viewer .token.string { color: #ce9178; }
-[data-bs-theme="dark"] .tabbed-code-viewer .token.number,
-.dark .tabbed-code-viewer .token.number { color: #b5cea8; }
-[data-bs-theme="dark"] .tabbed-code-viewer .token.operator,
-.dark .tabbed-code-viewer .token.operator { color: #d4d4d4; }
-[data-bs-theme="dark"] .tabbed-code-viewer .token.function,
-.dark .tabbed-code-viewer .token.function { color: #dcdcaa; }
-[data-bs-theme="dark"] .tabbed-code-viewer .token.class-name,
-.dark .tabbed-code-viewer .token.class-name { color: #4ec9b0; }
-[data-bs-theme="dark"] .tabbed-code-viewer .token.punctuation,
-.dark .tabbed-code-viewer .token.punctuation { color: #d4d4d4; }
+  box-shadow: var(--shadow-sm);
+}
+
+/* ===== Prism Theme (uses CSS variables) ===== */
+.tabbed-code-viewer .token.comment { color: var(--syntax-comment); }
+.tabbed-code-viewer .token.keyword { color: var(--syntax-keyword); }
+.tabbed-code-viewer .token.string { color: var(--syntax-string); }
+.tabbed-code-viewer .token.number { color: var(--syntax-number); }
+.tabbed-code-viewer .token.operator { color: var(--syntax-operator); }
+.tabbed-code-viewer .token.function { color: var(--syntax-function); }
+.tabbed-code-viewer .token.class-name { color: var(--syntax-class); }
+.tabbed-code-viewer .token.punctuation { color: var(--syntax-punctuation); }
 
 /* ===== Responsive ===== */
 @media (max-width: 1200px) {
@@ -244,7 +234,7 @@
   width: 100%;
   height: 100%;
   overflow: hidden;
-  background: #ffffff;
+  background: var(--code-bg);
 }
 
 /* Button container for copy and recompile (in toolbar) */
@@ -260,9 +250,9 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background: transparent;
-  border: 1px solid #ccc;
-  color: #666;
+  background: var(--button-bg);
+  border: 1px solid var(--button-border);
+  color: var(--button-text);
   width: 32px;
   height: 32px;
   border-radius: 4px;
@@ -271,43 +261,43 @@
 }
 
 .tabbed-copy-button:hover {
-  background: #f0f0f0;
-  border-color: #999;
-  color: #333;
+  background: var(--button-bg-hover);
+  border-color: var(--button-border-hover);
+  color: var(--button-text-hover);
 }
 
 .tabbed-copy-button:active {
-  background: #e0e0e0;
+  background: var(--button-bg-hover);
 }
 
 .tabbed-copy-button.copied {
-  background: #e8f5e9;
-  border-color: #4caf50;
-  color: #4caf50;
+  background: var(--success-bg);
+  border-color: var(--success-border);
+  color: var(--success-text);
 }
 
 .tabbed-recompile-button {
   display: flex;
   align-items: center;
   gap: 6px;
-  background: #4a9eff;
+  background: var(--recompile-bg);
   border: none;
-  color: #fff;
+  color: var(--recompile-text);
   padding: 6px 12px;
   border-radius: 4px;
   cursor: pointer;
   font-family: inherit;
   font-size: 12px;
   font-weight: 500;
-  transition: background 0.15s;
+  transition: background 0.15s, color 0.15s;
 }
 
 .tabbed-recompile-button:hover {
-  background: #3a8eef;
+  background: var(--recompile-bg-hover);
 }
 
 .tabbed-recompile-button:active {
-  background: #2a7edf;
+  background: var(--recompile-bg-active);
 }
 
 .tabbed-recompile-button svg {
@@ -319,23 +309,23 @@
   bottom: 0;
   left: 0;
   right: 0;
-  background: #fff0f0;
-  color: #c00;
+  background: var(--error-bg);
+  color: var(--error-text);
   padding: 10px 14px;
   font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
   font-size: 12px;
   white-space: pre-wrap;
   overflow: auto;
   max-height: 120px;
-  border-top: 1px solid #fcc;
+  border-top: 1px solid var(--error-border);
   z-index: 10;
 }
 
 .tabbed-fallback-textarea {
   width: 100%;
   height: 100%;
-  background: #ffffff;
-  color: #000;
+  background: var(--code-bg);
+  color: var(--code-text);
   border: none;
   padding: 12px;
   font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
@@ -343,3 +333,66 @@
   resize: none;
   outline: none;
 }
+
+/* ===== Uniforms Container (semi-transparent overlay) ===== */
+.tabbed-uniforms-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(8px);
+  display: flex;
+  justify-content: center;
+  padding: 20px;
+  box-sizing: border-box;
+}
+
+/* Center the uniform controls and constrain width */
+.tabbed-uniforms-container .uniform-controls {
+  max-width: 400px;
+  width: 100%;
+  background: rgba(30, 30, 35, 0.95);
+  border-radius: 12px;
+  padding: 20px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
+  height: fit-content;
+}
+
+/* Ensure text is visible in the overlay */
+.tabbed-uniforms-container .uniform-control-label {
+  color: #e0e0e0;
+}
+
+.tabbed-uniforms-container .uniform-control-value {
+  color: #a0a0a0;
+  background: rgba(0, 0, 0, 0.3);
+}
+
+.tabbed-uniforms-container .uniform-controls-header {
+  color: #909090;
+  border-bottom-color: rgba(255, 255, 255, 0.1);
+}
+
+.tabbed-uniforms-container .uniform-control-slider {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.tabbed-uniforms-container .uniform-control-slider::-webkit-slider-thumb {
+  background: #ffffff;
+}
+
+.tabbed-uniforms-container .uniform-control-slider::-moz-range-thumb {
+  background: #ffffff;
+}
+
+.tabbed-uniforms-container .uniform-control-vec-component {
+  color: #909090;
+}
+
+.tabbed-uniforms-container .uniform-control-vec-value {
+  color: #a0a0a0;
+  background: rgba(0, 0, 0, 0.3);
+}

package/dist-lib/layouts/types.d.ts

@@ -1,7 +1,7 @@
 /**
  * Layout Types - Common interface for all layout modes
  */
-import { ShadertoyProject, PassName } from '../project/types';
+import { ShaderProject, PassName, UniformValue } from '../project/types';
 /**
  * Result of a recompilation attempt.
  */
@@ -16,6 +16,12 @@ export interface RecompileResult {
  * @returns Result indicating success or failure with error message
  */
 export type RecompileHandler = (passName: 'common' | PassName, newSource: string) => RecompileResult;
+/**
+ * Callback for uniform value changes.
+ * @param name - Uniform name
+ * @param value - New uniform value
+ */
+export type UniformChangeHandler = (name: string, value: UniformValue) => void;
 /**
  * Base interface that all layouts must implement.
  */
@@ -29,6 +35,11 @@ export interface BaseLayout {
      * Called by App after initialization to wire up recompilation.
      */
     setRecompileHandler?(handler: RecompileHandler): void;
+    /**
+     * Set the uniform change handler for uniform controls.
+     * Called by App after initialization to wire up uniform changes.
+     */
+    setUniformHandler?(handler: UniformChangeHandler): void;
     /**
      * Clean up all DOM elements and resources.
      */
@@ -39,10 +50,10 @@ export interface BaseLayout {
  */
 export interface LayoutOptions {
     container: HTMLElement;
-    project: ShadertoyProject;
+    project: ShaderProject;
 }
 /**
  * Available layout modes.
  */
-export type LayoutMode = 'fullscreen' | 'default' | 'split' | 'tabbed';
+export type LayoutMode = 'fullscreen' | 'default' | 'split' | 'tabbed' | 'ui';
 //# sourceMappingURL=types.d.ts.map

package/dist-lib/layouts/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/layouts/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE9D;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;GAKG;AACH,MAAM,MAAM,gBAAgB,GAAG,CAC7B,QAAQ,EAAE,QAAQ,GAAG,QAAQ,EAC7B,SAAS,EAAE,MAAM,KACd,eAAe,CAAC;AAErB;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB;;OAEG;IACH,kBAAkB,IAAI,WAAW,CAAC;IAElC;;;OAGG;IACH,mBAAmB,CAAC,CAAC,OAAO,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAEtD;;OAEG;IACH,OAAO,IAAI,IAAI,CAAC;CACjB;AAED;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,SAAS,EAAE,WAAW,CAAC;IACvB,OAAO,EAAE,gBAAgB,CAAC;CAC3B;AAED;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,YAAY,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/layouts/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEzE;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;GAKG;AACH,MAAM,MAAM,gBAAgB,GAAG,CAC7B,QAAQ,EAAE,QAAQ,GAAG,QAAQ,EAC7B,SAAS,EAAE,MAAM,KACd,eAAe,CAAC;AAErB;;;;GAIG;AACH,MAAM,MAAM,oBAAoB,GAAG,CACjC,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,YAAY,KAChB,IAAI,CAAC;AAEV;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB;;OAEG;IACH,kBAAkB,IAAI,WAAW,CAAC;IAElC;;;OAGG;IACH,mBAAmB,CAAC,CAAC,OAAO,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAEtD;;;OAGG;IACH,iBAAiB,CAAC,CAAC,OAAO,EAAE,oBAAoB,GAAG,IAAI,CAAC;IAExD;;OAEG;IACH,OAAO,IAAI,IAAI,CAAC;CACjB;AAED;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,SAAS,EAAE,WAAW,CAAC;IACvB,OAAO,EAAE,aAAa,CAAC;CACxB;AAED;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,YAAY,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,IAAI,CAAC"}

package/dist-lib/main.js

@@ -14,6 +14,7 @@
 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';
 async function main() {
     try {
@@ -35,11 +36,15 @@ 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)
         if (layout.setRecompileHandler) {
@@ -67,6 +72,34 @@ async function main() {
                 }
             });
         }
+        // Wire up uniform change handler for layouts that support it (split, tabbed)
+        if (layout.setUniformHandler) {
+            layout.setUniformHandler((name, value) => {
+                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, value) => {
+                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/dist-lib/project/configHelpers.d.ts

@@ -0,0 +1,45 @@
+/**
+ * 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 declare function isPassName(s: string): s is PassName;
+/**
+ * Get default source file name for a pass.
+ */
+export declare function defaultSourceForPass(name: PassName): string;
+/**
+ * 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 declare function parseChannelValue(value: ChannelValue): ChannelJSONObject | null;
+/** The ordered list of pass names for iteration. */
+export declare const PASS_ORDER: readonly ["Image", "BufferA", "BufferB", "BufferC", "BufferD"];
+/** The four buffer pass names (excludes Image). */
+export declare const BUFFER_PASS_NAMES: PassName[];
+/** The four channel keys. */
+export declare const CHANNEL_KEYS: readonly ["iChannel0", "iChannel1", "iChannel2", "iChannel3"];
+/** Default layout for projects. */
+export declare const DEFAULT_LAYOUT: "default";
+/** Default controls setting. */
+export declare const DEFAULT_CONTROLS = false;
+/** Default theme. */
+export declare const DEFAULT_THEME: "light";
+/** Check if a string is a valid GLSL identifier (not a reserved word). */
+export declare function isValidGLSLIdentifier(name: string): boolean;
+/**
+ * Validate a project config and throw on errors.
+ * Logs warnings for non-fatal issues.
+ */
+export declare function validateConfig(config: Record<string, any>, root: string): void;
+//# sourceMappingURL=configHelpers.d.ts.map

package/dist-lib/project/configHelpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"configHelpers.d.ts","sourceRoot":"","sources":["../../src/project/configHelpers.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAEzE;;GAEG;AACH,wBAAgB,UAAU,CAAC,CAAC,EAAE,MAAM,GAAG,CAAC,IAAI,QAAQ,CAEnD;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,QAAQ,GAAG,MAAM,CAa3D;AAED;;;;;;;;;GASG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,YAAY,GAAG,iBAAiB,GAAG,IAAI,CAmB/E;AAED,oDAAoD;AACpD,eAAO,MAAM,UAAU,gEAAiE,CAAC;AAEzF,mDAAmD;AACnD,eAAO,MAAM,iBAAiB,EAAE,QAAQ,EAAiD,CAAC;AAE1F,6BAA6B;AAC7B,eAAO,MAAM,YAAY,+DAAgE,CAAC;AAE1F,mCAAmC;AACnC,eAAO,MAAM,cAAc,EAAG,SAAkB,CAAC;AAEjD,gCAAgC;AAChC,eAAO,MAAM,gBAAgB,QAAQ,CAAC;AAEtC,qBAAqB;AACrB,eAAO,MAAM,aAAa,EAAG,OAAgB,CAAC;AA6B9C,0EAA0E;AAC1E,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAE3D;AAeD;;;GAGG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI,CA6F9E"}