@stevejtrettel/shader-sandbox 0.1.0

package/src/layouts/split.css

@@ -0,0 +1,196 @@
+/**
+ * Split Layout Styles
+ * Includes code panel, tabs, and Prism.js syntax highlighting theme
+ */
+
+/* ===== Split Layout ===== */
+.layout-split {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  gap: 40px;
+  /* Very generous margins on large screens */
+  padding: 120px 140px;
+}
+
+.layout-split .canvas-container {
+  position: relative;
+  flex: 1;
+  background: #000;
+  border-radius: 8px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2), 0 3px 8px rgba(0, 0, 0, 0.12);
+  overflow: hidden;
+}
+
+.layout-split .code-panel {
+  position: relative;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2), 0 3px 8px rgba(0, 0, 0, 0.12);
+  overflow: hidden;
+}
+
+/* ===== Code Panel ===== */
+.tab-bar {
+  display: flex;
+  background: #f8f8f8;
+  border-bottom: 1px solid #e0e0e0;
+  padding: 8px 8px 0 8px;
+  gap: 4px;
+}
+
+.tab-button {
+  padding: 8px 16px;
+  background: transparent;
+  border: none;
+  border-radius: 6px 6px 0 0;
+  font-size: 13px;
+  font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
+  cursor: pointer;
+  transition: background 0.2s;
+  color: #666;
+}
+
+.tab-button:hover {
+  background: #e8e8e8;
+}
+
+.tab-button.active {
+  background: white;
+  color: #000;
+  font-weight: 500;
+}
+
+.copy-button {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  padding: 6px;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  color: #666;
+  cursor: pointer;
+  transition: all 0.2s;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.copy-button:hover {
+  background: rgba(0, 0, 0, 0.05);
+  color: #333;
+}
+
+.copy-button:active {
+  transform: scale(0.9);
+}
+
+.copy-button.copied {
+  color: #4caf50;
+}
+
+.code-viewer {
+  flex: 1;
+  min-height: 0; /* Allow shrinking below content size in flexbox */
+  overflow: auto;
+  position: relative;
+  background: white;
+}
+
+/* Prism.js syntax highlighting */
+.code-viewer pre {
+  margin: 0;
+  padding: 16px;
+  font-size: 13px;
+  line-height: 1.5;
+  font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
+  background: white;
+}
+
+.code-viewer code {
+  font-family: inherit;
+  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; }
+
+/* Image tab styling */
+.tab-button.image-tab {
+  color: #7c4dff;
+}
+
+.tab-button.image-tab.active {
+  color: #7c4dff;
+}
+
+/* Image viewer */
+.image-viewer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: 16px;
+  background: #f5f5f5;
+}
+
+.image-viewer img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+/* ===== Responsive adjustments ===== */
+
+/* Progressively shrink margins on smaller screens */
+@media (max-width: 1800px) {
+  .layout-split {
+    padding: 100px 120px;
+  }
+}
+
+@media (max-width: 1600px) {
+  .layout-split {
+    padding: 80px 100px;
+  }
+}
+
+@media (max-width: 1400px) {
+  .layout-split {
+    padding: 60px 80px;
+  }
+}
+
+@media (max-width: 1200px) {
+  .layout-split {
+    padding: 50px 60px;
+  }
+}
+
+@media (max-width: 1000px) {
+  .layout-split {
+    padding: 40px 50px;
+  }
+}
+
+@media (max-width: 800px) {
+  .layout-split {
+    flex-direction: column;
+    padding: 30px;
+    gap: 30px;
+  }
+}

package/src/layouts/tabbed.css

@@ -0,0 +1,345 @@
+/**
+ * Tabbed Layout Styles
+ * 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%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px;
+  box-sizing: border-box;
+}
+
+.tabbed-wrapper {
+  display: flex;
+  flex-direction: column;
+  width: 800px;
+  max-width: 100%;
+  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);
+  overflow: hidden;
+}
+
+/* ===== Toolbar (contains tabs + buttons) ===== */
+.tabbed-toolbar {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  background: #f8f8f8;
+  border-bottom: 1px solid #e0e0e0;
+  padding-right: 8px;
+}
+
+/* ===== Tab Bar ===== */
+.tabbed-tab-bar {
+  display: flex;
+  flex: 1;
+  gap: 4px;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: thin;
+}
+
+/* Hide scrollbar on webkit but keep functionality */
+.tabbed-tab-bar::-webkit-scrollbar {
+  height: 4px;
+}
+
+.tabbed-tab-bar::-webkit-scrollbar-thumb {
+  background: #ccc;
+  border-radius: 2px;
+}
+
+.tabbed-tab-button {
+  padding: 10px 16px;
+  background: transparent;
+  border: none;
+  border-bottom: 2px solid transparent;
+  font-size: 12px;
+  font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
+  cursor: pointer;
+  transition: color 0.15s, border-color 0.15s;
+  color: #666;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.tabbed-tab-button:hover {
+  color: #333;
+}
+
+.tabbed-tab-button.active {
+  color: #000;
+  border-bottom-color: #4a9eff;
+}
+
+.tabbed-tab-button.shader-tab {
+  font-family: system-ui, -apple-system, sans-serif;
+}
+
+.tabbed-tab-button.image-tab {
+  color: #7c4dff;
+}
+
+.tabbed-tab-button.image-tab.active {
+  color: #7c4dff;
+  border-bottom-color: #7c4dff;
+}
+
+/* ===== Content Area ===== */
+.tabbed-content {
+  flex: 1;
+  min-height: 0; /* Critical for flexbox scrolling */
+  position: relative;
+  background: #000;
+  overflow: hidden;
+}
+
+.tabbed-canvas-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+/* ===== Code Viewer ===== */
+.tabbed-code-viewer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background: var(--code-bg);
+}
+
+.tabbed-code-viewer pre {
+  margin: 0;
+  padding: 16px 16px 16px 0;
+  font-size: 13px;
+  line-height: 1.6;
+  font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
+  background: var(--code-bg);
+  color: var(--code-text);
+  display: flex;
+}
+
+.tabbed-code-viewer code {
+  font-family: inherit;
+  font-size: inherit;
+}
+
+/* Line numbers */
+.tabbed-line-numbers {
+  text-align: right;
+  padding-right: 16px;
+  margin-right: 16px;
+  border-right: 1px solid var(--tab-border);
+  color: var(--line-number-text);
+  user-select: none;
+  flex-shrink: 0;
+  padding-left: 16px;
+}
+
+.tabbed-code-content {
+  flex: 1;
+  overflow-x: auto;
+}
+
+/* ===== Image Viewer ===== */
+.tabbed-image-viewer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #f5f5f5;
+  padding: 20px;
+  box-sizing: border-box;
+}
+
+.tabbed-image-viewer img {
+  max-width: 100%;
+  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; }
+
+/* ===== Responsive ===== */
+@media (max-width: 1200px) {
+  .layout-tabbed {
+    padding: 40px 60px;
+  }
+}
+
+@media (max-width: 900px) {
+  .layout-tabbed {
+    padding: 30px 40px;
+  }
+}
+
+@media (max-width: 600px) {
+  .layout-tabbed {
+    padding: 20px;
+  }
+
+  .tabbed-tab-button {
+    padding: 8px 12px;
+    font-size: 12px;
+  }
+}
+
+/* ===== Editor Mode ===== */
+.tabbed-editor-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: #ffffff;
+}
+
+/* Button container for copy and recompile (in toolbar) */
+.tabbed-button-container {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-shrink: 0;
+}
+
+/* Copy button (icon only) */
+.tabbed-copy-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: 1px solid #ccc;
+  color: #666;
+  width: 32px;
+  height: 32px;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background 0.15s, border-color 0.15s, color 0.15s;
+}
+
+.tabbed-copy-button:hover {
+  background: #f0f0f0;
+  border-color: #999;
+  color: #333;
+}
+
+.tabbed-copy-button:active {
+  background: #e0e0e0;
+}
+
+.tabbed-copy-button.copied {
+  background: #e8f5e9;
+  border-color: #4caf50;
+  color: #4caf50;
+}
+
+.tabbed-recompile-button {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  background: #4a9eff;
+  border: none;
+  color: #fff;
+  padding: 6px 12px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 12px;
+  font-weight: 500;
+  transition: background 0.15s;
+}
+
+.tabbed-recompile-button:hover {
+  background: #3a8eef;
+}
+
+.tabbed-recompile-button:active {
+  background: #2a7edf;
+}
+
+.tabbed-recompile-button svg {
+  flex-shrink: 0;
+}
+
+.tabbed-error-display {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: #fff0f0;
+  color: #c00;
+  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;
+  z-index: 10;
+}
+
+.tabbed-fallback-textarea {
+  width: 100%;
+  height: 100%;
+  background: #ffffff;
+  color: #000;
+  border: none;
+  padding: 12px;
+  font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
+  font-size: 13px;
+  resize: none;
+  outline: none;
+}

package/src/layouts/types.ts

@@ -0,0 +1,58 @@
+/**
+ * Layout Types - Common interface for all layout modes
+ */
+
+import { ShadertoyProject, PassName } from '../project/types';
+
+/**
+ * Result of a recompilation attempt.
+ */
+export interface RecompileResult {
+  success: boolean;
+  error?: string;
+}
+
+/**
+ * Callback for recompiling shader code.
+ * @param passName - 'common' for common.glsl, or a PassName for individual passes
+ * @param newSource - New GLSL source code
+ * @returns Result indicating success or failure with error message
+ */
+export type RecompileHandler = (
+  passName: 'common' | PassName,
+  newSource: string
+) => RecompileResult;
+
+/**
+ * Base interface that all layouts must implement.
+ */
+export interface BaseLayout {
+  /**
+   * Get the canvas container element where App should render.
+   */
+  getCanvasContainer(): HTMLElement;
+
+  /**
+   * Set the recompile handler for editor mode.
+   * Called by App after initialization to wire up recompilation.
+   */
+  setRecompileHandler?(handler: RecompileHandler): void;
+
+  /**
+   * Clean up all DOM elements and resources.
+   */
+  dispose(): void;
+}
+
+/**
+ * Options for creating a layout.
+ */
+export interface LayoutOptions {
+  container: HTMLElement;
+  project: ShadertoyProject;
+}
+
+/**
+ * Available layout modes.
+ */
+export type LayoutMode = 'fullscreen' | 'default' | 'split' | 'tabbed';

package/src/main.ts

@@ -0,0 +1,114 @@
+/**
+ * Main Entry Point
+ *
+ * Loads a demo project from the demos/ folder and starts the App.
+ *
+ * To run a specific demo:
+ *   npm run dev:demo <demo-name>
+ *   npm run build:demo <demo-name>
+ *
+ * Examples:
+ *   npm run dev:demo keyboard-test
+ *   npm run build:demo simple-gradient
+ */
+
+import './styles/base.css';
+
+import { App } from './app/App';
+import { createLayout } from './layouts';
+import { loadDemoProject, DEMO_NAME } from './project/generatedLoader';
+import { PassName } from './project/types';
+import { RecompileResult } from './layouts/types';
+
+async function main() {
+  try {
+    console.log(`Loading demo: ${DEMO_NAME}`);
+
+    // Load the demo project from demos/ folder
+    // The demo is determined by the generated loader (created by dev-demo.cjs or build-demo.cjs)
+    const project = await loadDemoProject();
+
+    console.log(`Loaded project: ${project.meta.title}`);
+    console.log(`Passes:`, Object.keys(project.passes).filter(k => project.passes[k as keyof typeof project.passes]));
+
+    // Get root container element
+    const rootContainer = document.getElementById('app');
+    if (!rootContainer) {
+      throw new Error('Container element #app not found');
+    }
+
+    // Create layout
+    const layout = createLayout(project.layout, {
+      container: rootContainer,
+      project,
+    });
+
+    // Get canvas container from layout
+    const canvasContainer = layout.getCanvasContainer();
+
+    // Create app
+    const app = new App({
+      container: canvasContainer,
+      project,
+      pixelRatio: window.devicePixelRatio,
+    });
+
+    // Wire up recompile handler for layouts that support it (split, tabbed)
+    if (layout.setRecompileHandler) {
+      layout.setRecompileHandler((passName: 'common' | PassName, newSource: string): RecompileResult => {
+        const engine = app.getEngine();
+        if (!engine) {
+          return { success: false, error: 'Engine not initialized' };
+        }
+
+        if (passName === 'common') {
+          const result = engine.recompileCommon(newSource);
+          if (result.success) {
+            return { success: true };
+          } else {
+            // Return first error
+            const firstError = result.errors[0];
+            return {
+              success: false,
+              error: firstError ? `${firstError.passName}: ${firstError.error}` : 'Unknown error',
+            };
+          }
+        } else {
+          return engine.recompilePass(passName, newSource);
+        }
+      });
+    }
+
+    // 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()) {
+      app.start();
+      console.log('App started!');
+    } else {
+      console.warn('App not started due to shader compilation errors');
+    }
+
+    // Expose for debugging
+    (window as any).app = app;
+    (window as any).layout = layout;
+
+  } catch (error) {
+    console.error('Failed to initialize:', error);
+    const container = document.getElementById('app');
+    if (container) {
+      container.innerHTML = `
+        <div style="color: red; padding: 20px; font-family: monospace;">
+          <h2>Error</h2>
+          <pre>${error instanceof Error ? error.message : String(error)}</pre>
+        </div>
+      `;
+    }
+  }
+}
+
+// Start when DOM is ready
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', main);
+} else {
+  main();
+}