@stevejtrettel/shader-sandbox 0.1.3 → 0.1.4

package/dist-lib/layouts/UILayout.js

@@ -0,0 +1,147 @@
+/**
+ * UI Layout
+ *
+ * Shader on left, uniform controls panel on right (~200px wide).
+ * Playback controls (play/pause, reset, screenshot) at bottom of UI panel.
+ * Responsive: stacks vertically on small screens (<600px).
+ */
+import './ui.css';
+export class UILayout {
+    constructor(opts) {
+        this.uniformControls = null;
+        this.playPauseButton = null;
+        // Callbacks (set by App)
+        this.onPlayPause = null;
+        this.onReset = null;
+        this.onScreenshot = null;
+        this.onUniformChange = null;
+        this.container = opts.container;
+        this.project = opts.project;
+        // Create root layout container
+        this.root = document.createElement('div');
+        this.root.className = 'layout-ui';
+        // Create canvas container (left side)
+        this.canvasContainer = document.createElement('div');
+        this.canvasContainer.className = 'ui-canvas-container';
+        // Create UI panel (right side)
+        this.uiPanel = document.createElement('div');
+        this.uiPanel.className = 'ui-panel';
+        // Create uniforms container (scrollable, vertically centered)
+        this.uniformsContainer = document.createElement('div');
+        this.uniformsContainer.className = 'ui-uniforms-container';
+        this.uiPanel.appendChild(this.uniformsContainer);
+        // Create playback controls container (fixed at bottom)
+        this.playbackContainer = document.createElement('div');
+        this.playbackContainer.className = 'ui-playback-container';
+        this.buildPlaybackControls();
+        this.uiPanel.appendChild(this.playbackContainer);
+        // Load uniform controls
+        this.loadUniformControls();
+        // Assemble and append to DOM
+        this.root.appendChild(this.canvasContainer);
+        this.root.appendChild(this.uiPanel);
+        this.container.appendChild(this.root);
+    }
+    getCanvasContainer() {
+        return this.canvasContainer;
+    }
+    /**
+     * Set callbacks for playback controls.
+     * Called by App after initialization.
+     */
+    setPlaybackCallbacks(callbacks) {
+        this.onPlayPause = callbacks.onPlayPause;
+        this.onReset = callbacks.onReset;
+        this.onScreenshot = callbacks.onScreenshot;
+    }
+    /**
+     * Set callback for uniform changes.
+     * Called by App after initialization.
+     */
+    setUniformCallback(callback) {
+        this.onUniformChange = callback;
+    }
+    /**
+     * Update play/pause button state.
+     */
+    setPaused(paused) {
+        if (this.playPauseButton) {
+            this.playPauseButton.innerHTML = paused
+                ? `<svg viewBox="0 0 16 16"><path d="M4 3v10l8-5-8-5z"/></svg>`
+                : `<svg viewBox="0 0 16 16"><path d="M5 3h2v10H5V3zm4 0h2v10H9V3z"/></svg>`;
+            this.playPauseButton.title = paused ? 'Play' : 'Pause';
+        }
+    }
+    dispose() {
+        if (this.uniformControls) {
+            this.uniformControls.destroy();
+            this.uniformControls = null;
+        }
+        this.container.innerHTML = '';
+    }
+    /**
+     * Build playback control buttons.
+     */
+    buildPlaybackControls() {
+        // Play/Pause button
+        this.playPauseButton = document.createElement('button');
+        this.playPauseButton.className = 'ui-control-button';
+        this.playPauseButton.title = 'Pause';
+        this.playPauseButton.innerHTML = `<svg viewBox="0 0 16 16"><path d="M5 3h2v10H5V3zm4 0h2v10H9V3z"/></svg>`;
+        this.playPauseButton.addEventListener('click', () => {
+            if (this.onPlayPause)
+                this.onPlayPause();
+        });
+        // Reset button
+        const resetButton = document.createElement('button');
+        resetButton.className = 'ui-control-button';
+        resetButton.title = 'Reset';
+        resetButton.innerHTML = `<svg viewBox="0 0 16 16"><path d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"/><path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"/></svg>`;
+        resetButton.addEventListener('click', () => {
+            if (this.onReset)
+                this.onReset();
+        });
+        // Screenshot button
+        const screenshotButton = document.createElement('button');
+        screenshotButton.className = 'ui-control-button';
+        screenshotButton.title = 'Screenshot';
+        screenshotButton.innerHTML = `<svg viewBox="0 0 16 16"><path d="M10.5 8.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z"/><path d="M2 4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-1.172a2 2 0 0 1-1.414-.586l-.828-.828A2 2 0 0 0 9.172 2H6.828a2 2 0 0 0-1.414.586l-.828.828A2 2 0 0 1 3.172 4H2zm.5 2a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1zm9 2.5a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0z"/></svg>`;
+        screenshotButton.addEventListener('click', () => {
+            if (this.onScreenshot)
+                this.onScreenshot();
+        });
+        this.playbackContainer.appendChild(this.playPauseButton);
+        this.playbackContainer.appendChild(resetButton);
+        this.playbackContainer.appendChild(screenshotButton);
+    }
+    /**
+     * Load uniform controls dynamically.
+     */
+    async loadUniformControls() {
+        const uniforms = this.project.uniforms;
+        // If no uniforms, show empty state
+        if (!uniforms || Object.keys(uniforms).length === 0) {
+            const emptyState = document.createElement('div');
+            emptyState.className = 'ui-empty-state';
+            emptyState.textContent = 'No uniforms';
+            this.uniformsContainer.appendChild(emptyState);
+            return;
+        }
+        try {
+            const { UniformControls } = await import('../uniforms/UniformControls');
+            this.uniformControls = new UniformControls({
+                container: this.uniformsContainer,
+                uniforms: uniforms,
+                onChange: (name, value) => {
+                    if (this.onUniformChange) {
+                        this.onUniformChange(name, value);
+                    }
+                },
+            });
+        }
+        catch (err) {
+            console.error('Failed to load uniform controls:', err);
+            this.uniformsContainer.textContent = 'Failed to load controls';
+        }
+    }
+}

package/dist-lib/layouts/default.css

@@ -15,8 +15,8 @@
   position: relative;
   width: 800px;
   height: 600px;
-  background: #000;
+  background: var(--bg-canvas);
   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;
 }

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

@@ -1,18 +1,28 @@
 /**
  * Layouts - Modular layout system for Shadertoy viewer
  *
- * Provides four layout modes:
+ * Provides five layout modes:
  * - Default: Canvas centered with styling
  * - Fullscreen: Canvas fills entire viewport
  * - Split: Canvas on left, code viewer on right
  * - Tabbed: Single window with tabs for shader and code
+ * - UI: Canvas on left, uniforms panel on right
  */
 export { FullscreenLayout } from './FullscreenLayout';
 export { DefaultLayout } from './DefaultLayout';
 export { SplitLayout } from './SplitLayout';
 export { TabbedLayout } from './TabbedLayout';
+export { UILayout } from './UILayout';
 export type { BaseLayout, LayoutOptions, LayoutMode } from './types';
 import { BaseLayout, LayoutOptions, LayoutMode } from './types';
+import { ThemeMode } from '../project/types';
+/**
+ * Apply theme to the document.
+ * Sets the data-theme attribute on the html element.
+ *
+ * @param theme - Theme mode to apply ('light', 'dark', or 'system')
+ */
+export declare function applyTheme(theme: ThemeMode): void;
 /**
  * Factory function to create the appropriate layout based on mode.
  *

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/layouts/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,UAAU,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAMrE,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAEhE;;;;;;GAMG;AACH,wBAAgB,YAAY,CAC1B,IAAI,EAAE,UAAU,EAChB,OAAO,EAAE,aAAa,GACrB,UAAU,CAWZ"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/layouts/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,UAAU,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAOrE,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAChE,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAE7C;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI,CAEjD;AAED;;;;;;GAMG;AACH,wBAAgB,YAAY,CAC1B,IAAI,EAAE,UAAU,EAChB,OAAO,EAAE,aAAa,GACrB,UAAU,CAgBZ"}

package/dist-lib/layouts/index.js

@@ -1,20 +1,32 @@
 /**
  * Layouts - Modular layout system for Shadertoy viewer
  *
- * Provides four layout modes:
+ * Provides five layout modes:
  * - Default: Canvas centered with styling
  * - Fullscreen: Canvas fills entire viewport
  * - Split: Canvas on left, code viewer on right
  * - Tabbed: Single window with tabs for shader and code
+ * - UI: Canvas on left, uniforms panel on right
  */
 export { FullscreenLayout } from './FullscreenLayout';
 export { DefaultLayout } from './DefaultLayout';
 export { SplitLayout } from './SplitLayout';
 export { TabbedLayout } from './TabbedLayout';
+export { UILayout } from './UILayout';
 import { FullscreenLayout } from './FullscreenLayout';
 import { DefaultLayout } from './DefaultLayout';
 import { SplitLayout } from './SplitLayout';
 import { TabbedLayout } from './TabbedLayout';
+import { UILayout } from './UILayout';
+/**
+ * Apply theme to the document.
+ * Sets the data-theme attribute on the html element.
+ *
+ * @param theme - Theme mode to apply ('light', 'dark', or 'system')
+ */
+export function applyTheme(theme) {
+    document.documentElement.setAttribute('data-theme', theme);
+}
 /**
  * Factory function to create the appropriate layout based on mode.
  *
@@ -23,6 +35,8 @@ import { TabbedLayout } from './TabbedLayout';
  * @returns Layout instance implementing BaseLayout interface
  */
 export function createLayout(mode, options) {
+    // Apply theme from project configuration
+    applyTheme(options.project.theme);
     switch (mode) {
         case 'fullscreen':
             return new FullscreenLayout(options);
@@ -32,5 +46,7 @@ export function createLayout(mode, options) {
             return new SplitLayout(options);
         case 'tabbed':
             return new TabbedLayout(options);
+        case 'ui':
+            return new UILayout(options);
     }
 }

package/dist-lib/layouts/split.css

@@ -16,9 +16,9 @@
 .layout-split .canvas-container {
   position: relative;
   flex: 1;
-  background: #000;
+  background: var(--bg-canvas);
   border-radius: 8px;
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2), 0 3px 8px rgba(0, 0, 0, 0.12);
+  box-shadow: var(--shadow-md), var(--shadow-sm);
   overflow: hidden;
 }
 
@@ -27,17 +27,17 @@
   flex: 1;
   display: flex;
   flex-direction: column;
-  background: white;
+  background: var(--bg-secondary);
   border-radius: 8px;
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2), 0 3px 8px rgba(0, 0, 0, 0.12);
+  box-shadow: var(--shadow-md), var(--shadow-sm);
   overflow: hidden;
 }
 
 /* ===== Code Panel ===== */
 .tab-bar {
   display: flex;
-  background: #f8f8f8;
-  border-bottom: 1px solid #e0e0e0;
+  background: var(--tab-bg);
+  border-bottom: 1px solid var(--border-primary);
   padding: 8px 8px 0 8px;
   gap: 4px;
 }
@@ -50,17 +50,18 @@
   font-size: 13px;
   font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
   cursor: pointer;
-  transition: background 0.2s;
-  color: #666;
+  transition: background 0.2s, color 0.2s;
+  color: var(--tab-text);
 }
 
 .tab-button:hover {
-  background: #e8e8e8;
+  background: var(--button-bg-hover);
+  color: var(--tab-text-hover);
 }
 
 .tab-button.active {
-  background: white;
-  color: #000;
+  background: var(--bg-secondary);
+  color: var(--tab-text-active);
   font-weight: 500;
 }
 
@@ -69,10 +70,10 @@
   top: 12px;
   right: 12px;
   padding: 6px;
-  background: transparent;
+  background: var(--button-bg);
   border: none;
   border-radius: 4px;
-  color: #666;
+  color: var(--button-text);
   cursor: pointer;
   transition: all 0.2s;
   z-index: 10;
@@ -82,8 +83,8 @@
 }
 
 .copy-button:hover {
-  background: rgba(0, 0, 0, 0.05);
-  color: #333;
+  background: var(--button-bg-hover);
+  color: var(--button-text-hover);
 }
 
 .copy-button:active {
@@ -91,7 +92,7 @@
 }
 
 .copy-button.copied {
-  color: #4caf50;
+  color: var(--success-text);
 }
 
 .code-viewer {
@@ -99,7 +100,7 @@
   min-height: 0; /* Allow shrinking below content size in flexbox */
   overflow: auto;
   position: relative;
-  background: white;
+  background: var(--code-bg);
 }
 
 /* Prism.js syntax highlighting */
@@ -109,7 +110,8 @@
   font-size: 13px;
   line-height: 1.5;
   font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
-  background: white;
+  background: var(--code-bg);
+  color: var(--code-text);
 }
 
 .code-viewer code {
@@ -117,23 +119,23 @@
   font-size: inherit;
 }
 
-/* Prism theme - simple light theme */
-.token.comment { color: #6a9955; }
-.token.keyword { color: #0000ff; }
-.token.string { color: #a31515; }
-.token.number { color: #098658; }
-.token.operator { color: #000000; }
-.token.function { color: #795e26; }
-.token.class-name { color: #267f99; }
-.token.punctuation { color: #000000; }
+/* Prism theme - uses CSS variables */
+.token.comment { color: var(--syntax-comment); }
+.token.keyword { color: var(--syntax-keyword); }
+.token.string { color: var(--syntax-string); }
+.token.number { color: var(--syntax-number); }
+.token.operator { color: var(--syntax-operator); }
+.token.function { color: var(--syntax-function); }
+.token.class-name { color: var(--syntax-class); }
+.token.punctuation { color: var(--syntax-punctuation); }
 
 /* Image tab styling */
 .tab-button.image-tab {
-  color: #7c4dff;
+  color: var(--accent-secondary);
 }
 
 .tab-button.image-tab.active {
-  color: #7c4dff;
+  color: var(--accent-secondary);
 }
 
 /* Image viewer */
@@ -143,7 +145,7 @@
   justify-content: center;
   height: 100%;
   padding: 16px;
-  background: #f5f5f5;
+  background: var(--image-viewer-bg);
 }
 
 .image-viewer img {
@@ -151,7 +153,7 @@
   max-height: 100%;
   object-fit: contain;
   border-radius: 4px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--shadow-sm);
 }
 
 /* ===== Responsive adjustments ===== */