@stevejtrettel/shader-sandbox 0.1.0

package/dist-lib/editor/EditorPanel.js

@@ -0,0 +1,274 @@
+/**
+ * Editor Panel - Shared component for code editing in layouts
+ *
+ * Provides:
+ * - CodeMirror editor (dynamically loaded)
+ * - Recompile button with keyboard shortcut
+ * - Error display
+ * - Tab management for multiple passes
+ */
+import './editor-panel.css';
+export class EditorPanel {
+    constructor(container, project) {
+        this.recompileHandler = null;
+        this.tabs = [];
+        this.activeTabIndex = 0;
+        // Editor instance (null if not in editor mode or viewing image)
+        this.editorInstance = null;
+        // Track modified sources (passName -> modified source)
+        this.modifiedSources = new Map();
+        this.container = container;
+        this.project = project;
+        // Build tabs
+        this.buildTabs();
+        // Create tab bar
+        this.tabBar = document.createElement('div');
+        this.tabBar.className = 'editor-tab-bar';
+        this.buildTabBar();
+        // Create content area
+        this.contentArea = document.createElement('div');
+        this.contentArea.className = 'editor-content-area';
+        // Create copy button (icon only)
+        this.copyButton = document.createElement('button');
+        this.copyButton.className = 'editor-copy-button';
+        this.copyButton.innerHTML = `
+      <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+        <path d="M4 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V2z" opacity="0.4"/>
+        <path d="M2 5a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2H2zm0 1h7a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1z"/>
+      </svg>
+    `;
+        this.copyButton.title = 'Copy code to clipboard';
+        this.copyButton.addEventListener('click', () => this.copyToClipboard());
+        // Create recompile button
+        this.recompileButton = document.createElement('button');
+        this.recompileButton.className = 'editor-recompile-button';
+        this.recompileButton.innerHTML = `
+      <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
+        <path d="M4 3v10l8-5-8-5z"/>
+      </svg>
+      Recompile
+    `;
+        this.recompileButton.title = 'Recompile shader (Ctrl+Enter)';
+        this.recompileButton.addEventListener('click', () => this.recompile());
+        // Create error display
+        this.errorDisplay = document.createElement('div');
+        this.errorDisplay.className = 'editor-error-display';
+        this.errorDisplay.style.display = 'none';
+        // Assemble panel
+        const toolbar = document.createElement('div');
+        toolbar.className = 'editor-toolbar';
+        toolbar.appendChild(this.tabBar);
+        toolbar.appendChild(this.copyButton);
+        toolbar.appendChild(this.recompileButton);
+        this.container.appendChild(toolbar);
+        this.container.appendChild(this.contentArea);
+        this.container.appendChild(this.errorDisplay);
+        // Set up keyboard shortcut
+        this.setupKeyboardShortcut();
+        // Load editor for first tab
+        this.showTab(0);
+    }
+    setRecompileHandler(handler) {
+        this.recompileHandler = handler;
+    }
+    dispose() {
+        if (this.editorInstance) {
+            this.editorInstance.destroy();
+            this.editorInstance = null;
+        }
+        this.container.innerHTML = '';
+    }
+    buildTabs() {
+        this.tabs = [];
+        // 1. Common first (if exists)
+        if (this.project.commonSource) {
+            this.tabs.push({
+                kind: 'code',
+                name: 'common.glsl',
+                passName: 'common',
+                source: this.project.commonSource,
+            });
+        }
+        // 2. Buffers in order (A, B, C, D)
+        const bufferOrder = [
+            'BufferA', 'BufferB', 'BufferC', 'BufferD',
+        ];
+        for (const bufferName of bufferOrder) {
+            const pass = this.project.passes[bufferName];
+            if (pass) {
+                this.tabs.push({
+                    kind: 'code',
+                    name: `${bufferName.toLowerCase()}.glsl`,
+                    passName: bufferName,
+                    source: pass.glslSource,
+                });
+            }
+        }
+        // 3. Image pass
+        const imagePass = this.project.passes.Image;
+        this.tabs.push({
+            kind: 'code',
+            name: 'image.glsl',
+            passName: 'Image',
+            source: imagePass.glslSource,
+        });
+        // 4. Textures (images) - not editable
+        for (const texture of this.project.textures) {
+            this.tabs.push({
+                kind: 'image',
+                name: texture.filename || texture.name,
+                url: texture.source,
+            });
+        }
+    }
+    buildTabBar() {
+        this.tabBar.innerHTML = '';
+        this.tabs.forEach((tab, index) => {
+            const tabButton = document.createElement('button');
+            tabButton.className = 'editor-tab-button';
+            if (tab.kind === 'image') {
+                tabButton.classList.add('image-tab');
+            }
+            tabButton.textContent = tab.name;
+            if (index === this.activeTabIndex) {
+                tabButton.classList.add('active');
+            }
+            tabButton.addEventListener('click', () => this.showTab(index));
+            this.tabBar.appendChild(tabButton);
+        });
+    }
+    async showTab(index) {
+        // Save current editor content before switching
+        this.saveCurrentEditorContent();
+        this.activeTabIndex = index;
+        const tab = this.tabs[index];
+        // Update tab bar active state
+        this.tabBar.querySelectorAll('.editor-tab-button').forEach((btn, i) => {
+            btn.classList.toggle('active', i === index);
+        });
+        // Clear content area
+        this.contentArea.innerHTML = '';
+        // Destroy previous editor instance
+        if (this.editorInstance) {
+            this.editorInstance.destroy();
+            this.editorInstance = null;
+        }
+        if (tab.kind === 'code') {
+            // Show buttons
+            this.copyButton.style.display = '';
+            this.recompileButton.style.display = '';
+            // Get source (use modified if available, otherwise original)
+            const source = this.modifiedSources.get(tab.passName) ?? tab.source;
+            // Create editor container
+            const editorContainer = document.createElement('div');
+            editorContainer.className = 'editor-prism-container';
+            this.contentArea.appendChild(editorContainer);
+            // Dynamically load editor and create instance
+            try {
+                const { createEditor } = await import('./prism-editor');
+                this.editorInstance = createEditor(editorContainer, source, (newSource) => {
+                    // Track modifications
+                    this.modifiedSources.set(tab.passName, newSource);
+                });
+            }
+            catch (err) {
+                console.error('Failed to load editor:', err);
+                // Fallback to textarea
+                const textarea = document.createElement('textarea');
+                textarea.className = 'editor-fallback-textarea';
+                textarea.value = source;
+                textarea.addEventListener('input', () => {
+                    this.modifiedSources.set(tab.passName, textarea.value);
+                });
+                editorContainer.appendChild(textarea);
+            }
+        }
+        else {
+            // Hide buttons for image tabs
+            this.copyButton.style.display = 'none';
+            this.recompileButton.style.display = 'none';
+            // Show image
+            const imgContainer = document.createElement('div');
+            imgContainer.className = 'editor-image-viewer';
+            const img = document.createElement('img');
+            img.src = tab.url;
+            img.alt = tab.name;
+            imgContainer.appendChild(img);
+            this.contentArea.appendChild(imgContainer);
+        }
+    }
+    saveCurrentEditorContent() {
+        if (this.editorInstance) {
+            const tab = this.tabs[this.activeTabIndex];
+            if (tab.kind === 'code') {
+                const source = this.editorInstance.getSource();
+                this.modifiedSources.set(tab.passName, source);
+            }
+        }
+    }
+    recompile() {
+        if (!this.recompileHandler) {
+            console.warn('No recompile handler set');
+            return;
+        }
+        // Save current content first
+        this.saveCurrentEditorContent();
+        const tab = this.tabs[this.activeTabIndex];
+        if (tab.kind !== 'code') {
+            return;
+        }
+        const source = this.modifiedSources.get(tab.passName) ?? tab.source;
+        const result = this.recompileHandler(tab.passName, source);
+        if (result.success) {
+            this.hideError();
+            // Update the original source in the tab
+            tab.source = source;
+        }
+        else {
+            this.showError(result.error || 'Compilation failed');
+        }
+    }
+    showError(message) {
+        this.errorDisplay.textContent = message;
+        this.errorDisplay.style.display = 'block';
+    }
+    hideError() {
+        this.errorDisplay.style.display = 'none';
+    }
+    async copyToClipboard() {
+        const tab = this.tabs[this.activeTabIndex];
+        if (tab.kind !== 'code')
+            return;
+        // Get current source (modified or original)
+        const source = this.editorInstance
+            ? this.editorInstance.getSource()
+            : (this.modifiedSources.get(tab.passName) ?? tab.source);
+        try {
+            await navigator.clipboard.writeText(source);
+            // Show checkmark feedback
+            const originalHTML = this.copyButton.innerHTML;
+            this.copyButton.innerHTML = `
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+          <path d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"/>
+        </svg>
+      `;
+            this.copyButton.classList.add('copied');
+            setTimeout(() => {
+                this.copyButton.innerHTML = originalHTML;
+                this.copyButton.classList.remove('copied');
+            }, 1500);
+        }
+        catch (err) {
+            console.error('Failed to copy:', err);
+        }
+    }
+    setupKeyboardShortcut() {
+        // Listen for Ctrl+Enter / Cmd+Enter
+        this.container.addEventListener('keydown', (e) => {
+            if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
+                e.preventDefault();
+                this.recompile();
+            }
+        });
+    }
+}

package/dist-lib/editor/prism-editor.css

@@ -0,0 +1,99 @@
+/**
+ * Prism Editor Styles
+ * Textarea + syntax highlighting overlay
+ */
+
+.prism-editor-wrapper {
+  display: flex;
+  height: 100%;
+  background: #ffffff;
+  font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+/* Line numbers column */
+.prism-editor-line-numbers {
+  flex-shrink: 0;
+  padding: 16px 12px 16px 16px;
+  text-align: right;
+  color: #999;
+  border-right: 1px solid #e0e0e0;
+  user-select: none;
+  overflow: hidden;
+}
+
+.prism-editor-line-numbers span {
+  display: block;
+}
+
+/* Editor area containing textarea and highlight overlay */
+.prism-editor-area {
+  flex: 1;
+  position: relative;
+  overflow: hidden;
+}
+
+/* Shared styles for textarea and highlight */
+.prism-editor-textarea,
+.prism-editor-highlight {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  padding: 16px;
+  margin: 0;
+  border: none;
+  outline: none;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  overflow: auto;
+  box-sizing: border-box;
+}
+
+/* Textarea - user types here */
+.prism-editor-textarea {
+  background: transparent;
+  color: transparent;
+  caret-color: #000;
+  resize: none;
+  z-index: 1;
+  -webkit-text-fill-color: transparent;
+}
+
+.prism-editor-textarea::selection {
+  background: rgba(173, 214, 255, 0.4);
+}
+
+.prism-editor-textarea::-moz-selection {
+  background: rgba(173, 214, 255, 0.4);
+}
+
+/* Highlighted code overlay */
+.prism-editor-highlight {
+  background: #ffffff;
+  color: #000;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.prism-editor-highlight code {
+  font-family: inherit;
+  font-size: inherit;
+  background: none;
+  padding: 0;
+}
+
+/* Prism syntax highlighting colors */
+.prism-editor-highlight .token.comment { color: #6a9955; }
+.prism-editor-highlight .token.keyword { color: #0000ff; }
+.prism-editor-highlight .token.string { color: #a31515; }
+.prism-editor-highlight .token.number { color: #098658; }
+.prism-editor-highlight .token.operator { color: #000000; }
+.prism-editor-highlight .token.function { color: #795e26; }
+.prism-editor-highlight .token.class-name { color: #267f99; }
+.prism-editor-highlight .token.punctuation { color: #000000; }

package/dist-lib/editor/prism-editor.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Lightweight Prism Editor
+ *
+ * Simple textarea with Prism syntax highlighting overlay.
+ * Uses the existing Prism.js dependency - adds ~0 extra bytes to bundle.
+ */
+import 'prismjs/components/prism-c';
+import 'prismjs/components/prism-cpp';
+import './prism-editor.css';
+export interface EditorInstance {
+    getSource: () => string;
+    setSource: (source: string) => void;
+    destroy: () => void;
+}
+/**
+ * Create a lightweight editor with Prism syntax highlighting.
+ */
+export declare function createEditor(container: HTMLElement, initialSource: string, onChange?: (source: string) => void): EditorInstance;
+//# sourceMappingURL=prism-editor.d.ts.map

package/dist-lib/editor/prism-editor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"prism-editor.d.ts","sourceRoot":"","sources":["../../src/editor/prism-editor.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,4BAA4B,CAAC;AACpC,OAAO,8BAA8B,CAAC;AAEtC,OAAO,oBAAoB,CAAC;AAE5B,MAAM,WAAW,cAAc;IAC7B,SAAS,EAAE,MAAM,MAAM,CAAC;IACxB,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED;;GAEG;AACH,wBAAgB,YAAY,CAC1B,SAAS,EAAE,WAAW,EACtB,aAAa,EAAE,MAAM,EACrB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,GAClC,cAAc,CAiGhB"}

package/dist-lib/editor/prism-editor.js

@@ -0,0 +1,96 @@
+/**
+ * Lightweight Prism Editor
+ *
+ * Simple textarea with Prism syntax highlighting overlay.
+ * Uses the existing Prism.js dependency - adds ~0 extra bytes to bundle.
+ */
+import * as Prism from 'prismjs';
+import 'prismjs/components/prism-c';
+import 'prismjs/components/prism-cpp';
+import './prism-editor.css';
+/**
+ * Create a lightweight editor with Prism syntax highlighting.
+ */
+export function createEditor(container, initialSource, onChange) {
+    // Create wrapper
+    const wrapper = document.createElement('div');
+    wrapper.className = 'prism-editor-wrapper';
+    // Create line numbers
+    const lineNumbers = document.createElement('div');
+    lineNumbers.className = 'prism-editor-line-numbers';
+    // Create editor area (textarea + highlighted overlay)
+    const editorArea = document.createElement('div');
+    editorArea.className = 'prism-editor-area';
+    // Create textarea (user types here)
+    const textarea = document.createElement('textarea');
+    textarea.className = 'prism-editor-textarea';
+    textarea.value = initialSource;
+    textarea.spellcheck = false;
+    textarea.autocapitalize = 'off';
+    textarea.autocomplete = 'off';
+    // Create highlighted code overlay
+    const highlight = document.createElement('pre');
+    highlight.className = 'prism-editor-highlight';
+    const code = document.createElement('code');
+    code.className = 'language-cpp';
+    highlight.appendChild(code);
+    // Assemble
+    editorArea.appendChild(textarea);
+    editorArea.appendChild(highlight);
+    wrapper.appendChild(lineNumbers);
+    wrapper.appendChild(editorArea);
+    container.appendChild(wrapper);
+    // Update highlighting and line numbers
+    function update() {
+        const source = textarea.value;
+        // Update highlighted code
+        // Add a trailing newline to prevent layout shift when typing at end
+        code.textContent = source + '\n';
+        Prism.highlightElement(code);
+        // Update line numbers
+        const lines = source.split('\n');
+        lineNumbers.innerHTML = lines.map((_, i) => `<span>${i + 1}</span>`).join('');
+        // Notify listener
+        if (onChange) {
+            onChange(source);
+        }
+    }
+    // Sync scroll position
+    function syncScroll() {
+        highlight.scrollTop = textarea.scrollTop;
+        highlight.scrollLeft = textarea.scrollLeft;
+        lineNumbers.scrollTop = textarea.scrollTop;
+    }
+    // Handle tab key for indentation
+    function handleKeydown(e) {
+        if (e.key === 'Tab') {
+            e.preventDefault();
+            const start = textarea.selectionStart;
+            const end = textarea.selectionEnd;
+            const value = textarea.value;
+            // Insert 2 spaces
+            textarea.value = value.substring(0, start) + '  ' + value.substring(end);
+            textarea.selectionStart = textarea.selectionEnd = start + 2;
+            update();
+        }
+    }
+    // Set up event listeners
+    textarea.addEventListener('input', update);
+    textarea.addEventListener('scroll', syncScroll);
+    textarea.addEventListener('keydown', handleKeydown);
+    // Initial render
+    update();
+    return {
+        getSource: () => textarea.value,
+        setSource: (source) => {
+            textarea.value = source;
+            update();
+        },
+        destroy: () => {
+            textarea.removeEventListener('input', update);
+            textarea.removeEventListener('scroll', syncScroll);
+            textarea.removeEventListener('keydown', handleKeydown);
+            container.removeChild(wrapper);
+        },
+    };
+}

package/dist-lib/embed.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Embeddable Entry Point
+ */
+import './styles/embed.css';
+import { App } from './app/App';
+import { DEMO_NAME } from './project/generatedLoader';
+export interface EmbedOptions {
+    container: HTMLElement | string;
+    pixelRatio?: number;
+}
+export interface EmbedResult {
+    app: App;
+    destroy: () => void;
+}
+export declare function embed(options: EmbedOptions): Promise<EmbedResult>;
+export { DEMO_NAME };
+//# sourceMappingURL=embed.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"embed.d.ts","sourceRoot":"","sources":["../src/embed.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,oBAAoB,CAAC;AAE5B,OAAO,EAAE,GAAG,EAAE,MAAM,WAAW,CAAC;AAEhC,OAAO,EAAmB,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAEvE,MAAM,WAAW,YAAY;IAC3B,SAAS,EAAE,WAAW,GAAG,MAAM,CAAC;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,WAAW;IAC1B,GAAG,EAAE,GAAG,CAAC;IACT,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,wBAAsB,KAAK,CAAC,OAAO,EAAE,YAAY,GAAG,OAAO,CAAC,WAAW,CAAC,CAgCvE;AAED,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist-lib/embed.js

@@ -0,0 +1,35 @@
+/**
+ * Embeddable Entry Point
+ */
+import './styles/embed.css'; // <-- changed from base.css
+import { App } from './app/App';
+import { createLayout } from './layouts';
+import { loadDemoProject, DEMO_NAME } from './project/generatedLoader';
+export async function embed(options) {
+    const container = typeof options.container === 'string'
+        ? document.querySelector(options.container)
+        : options.container;
+    if (!container || !(container instanceof HTMLElement)) {
+        throw new Error(`Container not found: ${options.container}`);
+    }
+    const project = await loadDemoProject();
+    const layout = createLayout(project.layout, {
+        container,
+        project,
+    });
+    const app = new App({
+        container: layout.getCanvasContainer(),
+        project,
+        pixelRatio: options.pixelRatio ?? window.devicePixelRatio,
+    });
+    if (!app.hasErrors()) {
+        app.start();
+    }
+    return {
+        app,
+        destroy: () => {
+            app.stop?.();
+        },
+    };
+}
+export { DEMO_NAME };