@stevejtrettel/shader-sandbox 0.1.0

package/src/editor/editor-panel.css

@@ -0,0 +1,175 @@
+/**
+ * Editor Panel Styles
+ */
+
+/* Toolbar with tabs and recompile button */
+.editor-toolbar {
+  display: flex;
+  align-items: center;
+  background: #f8f8f8;
+  border-bottom: 1px solid #e0e0e0;
+  padding-right: 8px;
+}
+
+.editor-tab-bar {
+  display: flex;
+  flex: 1;
+  overflow-x: auto;
+  scrollbar-width: thin;
+}
+
+.editor-tab-button {
+  background: transparent;
+  border: none;
+  color: #666;
+  padding: 10px 16px;
+  cursor: pointer;
+  font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
+  font-size: 12px;
+  white-space: nowrap;
+  border-bottom: 2px solid transparent;
+  transition: color 0.15s, border-color 0.15s;
+}
+
+.editor-tab-button:hover {
+  color: #333;
+}
+
+.editor-tab-button.active {
+  color: #000;
+  border-bottom-color: #4a9eff;
+}
+
+.editor-tab-button.image-tab {
+  color: #7c4dff;
+}
+
+.editor-tab-button.image-tab.active {
+  color: #7c4dff;
+  border-bottom-color: #7c4dff;
+}
+
+/* Copy button (icon only) */
+.editor-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;
+  flex-shrink: 0;
+  margin-right: 6px;
+}
+
+.editor-copy-button:hover {
+  background: #f0f0f0;
+  border-color: #999;
+  color: #333;
+}
+
+.editor-copy-button:active {
+  background: #e0e0e0;
+}
+
+.editor-copy-button.copied {
+  background: #e8f5e9;
+  border-color: #4caf50;
+  color: #4caf50;
+}
+
+.editor-copy-button svg {
+  flex-shrink: 0;
+}
+
+/* Recompile button */
+.editor-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;
+  flex-shrink: 0;
+}
+
+.editor-recompile-button:hover {
+  background: #3a8eef;
+}
+
+.editor-recompile-button:active {
+  background: #2a7edf;
+}
+
+.editor-recompile-button svg {
+  flex-shrink: 0;
+}
+
+/* Content area */
+.editor-content-area {
+  flex: 1;
+  overflow: hidden;
+  position: relative;
+  background: #ffffff;
+}
+
+.editor-prism-container {
+  height: 100%;
+  width: 100%;
+}
+
+/* Fallback textarea */
+.editor-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;
+}
+
+/* Image viewer */
+.editor-image-viewer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  background: #f5f5f5;
+  padding: 20px;
+}
+
+.editor-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);
+}
+
+/* Error display */
+.editor-error-display {
+  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;
+}

package/src/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/src/editor/prism-editor.ts

@@ -0,0 +1,124 @@
+/**
+ * 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';
+
+export interface EditorInstance {
+  getSource: () => string;
+  setSource: (source: string) => void;
+  destroy: () => void;
+}
+
+/**
+ * Create a lightweight editor with Prism syntax highlighting.
+ */
+export function createEditor(
+  container: HTMLElement,
+  initialSource: string,
+  onChange?: (source: string) => void
+): EditorInstance {
+  // 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: KeyboardEvent) {
+    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: string) => {
+      textarea.value = source;
+      update();
+    },
+    destroy: () => {
+      textarea.removeEventListener('input', update);
+      textarea.removeEventListener('scroll', syncScroll);
+      textarea.removeEventListener('keydown', handleKeydown);
+      container.removeChild(wrapper);
+    },
+  };
+}

package/src/embed.ts

@@ -0,0 +1,55 @@
+/**
+ * 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 interface EmbedOptions {
+  container: HTMLElement | string;
+  pixelRatio?: number;
+}
+
+export interface EmbedResult {
+  app: App;
+  destroy: () => void;
+}
+
+export async function embed(options: EmbedOptions): Promise<EmbedResult> {
+  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 };