@stevejtrettel/shader-sandbox 0.1.2 → 0.1.4

package/src/layouts/index.ts

@@ -1,24 +1,38 @@
 /**
  * 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 { FullscreenLayout } from './FullscreenLayout';
 import { DefaultLayout } from './DefaultLayout';
 import { SplitLayout } from './SplitLayout';
 import { TabbedLayout } from './TabbedLayout';
+import { UILayout } from './UILayout';
 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 function applyTheme(theme: ThemeMode): void {
+  document.documentElement.setAttribute('data-theme', theme);
+}
 
 /**
  * Factory function to create the appropriate layout based on mode.
@@ -31,6 +45,9 @@ export function createLayout(
   mode: LayoutMode,
   options: LayoutOptions
 ): BaseLayout {
+  // Apply theme from project configuration
+  applyTheme(options.project.theme);
+
   switch (mode) {
     case 'fullscreen':
       return new FullscreenLayout(options);
@@ -40,5 +57,7 @@ export function createLayout(
       return new SplitLayout(options);
     case 'tabbed':
       return new TabbedLayout(options);
+    case 'ui':
+      return new UILayout(options);
   }
 }

package/src/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 ===== */

package/src/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/src/layouts/types.ts

@@ -2,7 +2,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.
@@ -23,6 +23,16 @@ export type RecompileHandler = (
   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.
  */
@@ -38,6 +48,12 @@ export interface BaseLayout {
    */
   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.
    */
@@ -49,10 +65,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';