@stevejtrettel/shader-sandbox 0.1.0

package/dist-lib/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/dist-lib/layouts/types.d.ts

@@ -0,0 +1,48 @@
+/**
+ * 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';
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +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"}

package/dist-lib/layouts/types.js

@@ -0,0 +1,4 @@
+/**
+ * Layout Types - Common interface for all layout modes
+ */
+export {};

package/dist-lib/main.d.ts

@@ -0,0 +1,15 @@
+/**
+ * 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';
+//# sourceMappingURL=main.d.ts.map

package/dist-lib/main.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../src/main.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,mBAAmB,CAAC"}

package/dist-lib/main.js

@@ -0,0 +1,102 @@
+/**
+ * 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';
+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]));
+        // 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, newSource) => {
+                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.app = app;
+        window.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();
+}

package/dist-lib/project/generatedLoader.d.ts

@@ -0,0 +1,3 @@
+export declare const DEMO_NAME = "course/day5/torus-analytical";
+export declare function loadDemoProject(): Promise<import("./types").ShadertoyProject>;
+//# sourceMappingURL=generatedLoader.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"generatedLoader.d.ts","sourceRoot":"","sources":["../../src/project/generatedLoader.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,SAAS,iCAAiC,CAAC;AAExD,wBAAsB,eAAe,gDAgBpC"}

package/dist-lib/project/generatedLoader.js

@@ -0,0 +1,17 @@
+// Auto-generated - DO NOT EDIT
+import { loadDemo } from './loaderHelper';
+export const DEMO_NAME = 'course/day5/torus-analytical';
+export async function loadDemoProject() {
+    const glslFiles = import.meta.glob('/demos/course/day5/torus-analytical/**/*.glsl', {
+        query: '?raw',
+        import: 'default',
+    });
+    const jsonFiles = import.meta.glob('/demos/course/day5/torus-analytical/**/*.json', {
+        import: 'default',
+    });
+    const imageFiles = import.meta.glob('/demos/course/day5/torus-analytical/**/*.{jpg,jpeg,png,gif,webp,bmp}', {
+        query: '?url',
+        import: 'default',
+    });
+    return loadDemo(DEMO_NAME, glslFiles, jsonFiles, imageFiles);
+}

package/dist-lib/project/loadProject.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Project Layer - Config Loader
+ *
+ * Loads Shadertoy projects from disk into normalized ShadertoyProject representation.
+ * Handles both single-pass (no config) and multi-pass (with config) projects.
+ *
+ * Based on docs/project-spec.md
+ */
+import { ShadertoyProject } from './types';
+/**
+ * Load a Shadertoy project from disk.
+ *
+ * Automatically detects:
+ * - Single-pass mode (no config, just image.glsl)
+ * - Multi-pass mode (config.json present)
+ *
+ * @param root - Absolute path to project directory
+ * @returns Fully normalized ShadertoyProject
+ * @throws Error with descriptive message if project is invalid
+ */
+export declare function loadProject(root: string): Promise<ShadertoyProject>;
+//# sourceMappingURL=loadProject.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"loadProject.d.ts","sourceRoot":"","sources":["../../src/project/loadProject.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAIH,OAAO,EAQL,gBAAgB,EAGjB,MAAM,SAAS,CAAC;AAmEjB;;;;;;;;;;GAUG;AACH,wBAAsB,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,gBAAgB,CAAC,CAoBzE"}