@stevejtrettel/shader-sandbox 0.1.2 → 0.1.4

package/src/app/app.css

@@ -1,45 +1,190 @@
 /**
- * App Styles - FPS counter and shader error overlay
+ * App Styles - Floating overlays on shader canvas
+ *
+ * All floating elements use consistent "liquid glass" styling:
+ * - Semi-transparent background with blur
+ * - Subtle border and shadow
+ * - 6px corner radius (smaller than canvas container's 8px per concentric radius rule)
  */
 
-/* ===== FPS Counter ===== */
-.fps-counter {
+/* ===== Shared Glass Overlay Variables ===== */
+:root {
+  --glass-bg: rgba(30, 30, 35, 0.65);
+  --glass-bg-hover: rgba(30, 30, 35, 0.8);
+  --glass-border: 1px solid rgba(255, 255, 255, 0.1);
+  --glass-shadow:
+    0 4px 16px rgba(0, 0, 0, 0.25),
+    0 2px 4px rgba(0, 0, 0, 0.15),
+    inset 0 1px 0 rgba(255, 255, 255, 0.1);
+  --glass-shadow-sm:
+    0 2px 8px rgba(0, 0, 0, 0.25),
+    inset 0 1px 0 rgba(255, 255, 255, 0.08);
+  --glass-blur: blur(20px);
+  --glass-radius: 6px;    /* all overlays use same radius, smaller than canvas (8px) */
+  --glass-radius-sm: 6px; /* same as above for consistency */
+  --glass-text: rgba(255, 255, 255, 0.9);
+  --glass-text-muted: rgba(255, 255, 255, 0.6);
+}
+
+/* ===== Stats Container (FPS + expandable stats) ===== */
+.stats-container {
   position: absolute;
-  bottom: 8px;
-  left: 8px;
+  bottom: 12px;
+  left: 12px;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 6px;
+}
+
+/* FPS Counter (clickable button) */
+.fps-counter {
   padding: 6px 10px;
-  background: rgba(0, 0, 0, 0.75);
-  color: white;
+  background: var(--glass-bg);
+  color: var(--glass-text);
   font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
-  font-size: 12px;
+  font-size: 11px;
   font-weight: 500;
-  border-radius: 4px;
-  pointer-events: none;
+  border-radius: var(--glass-radius-sm);
+  border: var(--glass-border);
+  cursor: pointer;
   user-select: none;
-  z-index: 1000;
-  backdrop-filter: blur(4px);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  backdrop-filter: var(--glass-blur);
+  -webkit-backdrop-filter: var(--glass-blur);
+  box-shadow: var(--glass-shadow-sm);
+  transition: all 0.2s ease;
+}
+
+.fps-counter:hover {
+  background: var(--glass-bg-hover);
+}
+
+/* Stats Grid (expandable) */
+.stats-grid {
+  display: flex;
+  flex-direction: row;
+  gap: 6px;
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(8px);
+  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
+  pointer-events: none;
+}
+
+.stats-grid.open {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+  pointer-events: auto;
+}
+
+/* Individual stat item */
+.stat-item {
+  padding: 6px 10px;
+  background: var(--glass-bg);
+  border-radius: var(--glass-radius-sm);
+  border: var(--glass-border);
+  backdrop-filter: var(--glass-blur);
+  -webkit-backdrop-filter: var(--glass-blur);
+  box-shadow: var(--glass-shadow-sm);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+  min-width: 48px;
+}
+
+.stat-value {
+  color: var(--glass-text);
+  font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
+  font-size: 11px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.stat-label {
+  color: var(--glass-text-muted);
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  font-size: 9px;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
 }
 
 /* ===== Playback Controls ===== */
 .playback-controls {
   position: absolute;
-  bottom: 8px;
-  right: 8px;
-  display: flex;
-  gap: 8px;
+  bottom: 12px;
+  right: 12px;
   z-index: 1000;
 }
 
+/* Menu toggle button (+ / -) */
+.controls-menu-button {
+  padding: 6px 8px;
+  background: var(--glass-bg);
+  color: var(--glass-text);
+  border: var(--glass-border);
+  border-radius: var(--glass-radius-sm);
+  cursor: pointer;
+  backdrop-filter: var(--glass-blur);
+  -webkit-backdrop-filter: var(--glass-blur);
+  box-shadow: var(--glass-shadow-sm);
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  font-size: 20px;
+  font-weight: 300;
+  line-height: 1;
+}
+
+.controls-menu-button:hover {
+  background: var(--glass-bg-hover);
+  transform: scale(1.05);
+}
+
+.controls-menu-button:active {
+  transform: scale(0.95);
+}
+
+/* Control buttons grid - 2x3 with menu button as last cell */
+.controls-grid {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  display: grid;
+  grid-template-columns: 32px 32px 32px;
+  grid-template-rows: 32px 32px;
+  gap: 6px;
+  opacity: 0;
+  visibility: hidden;
+  transform: scale(0.8);
+  transform-origin: bottom right;
+  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
+  pointer-events: none;
+}
+
+.controls-grid.open {
+  opacity: 1;
+  visibility: visible;
+  transform: scale(1);
+  pointer-events: auto;
+}
+
 .control-button {
   padding: 6px 8px;
-  background: rgba(0, 0, 0, 0.75);
-  color: white;
-  border: none;
-  border-radius: 4px;
+  background: var(--glass-bg);
+  color: var(--glass-text);
+  border: var(--glass-border);
+  border-radius: var(--glass-radius-sm);
   cursor: pointer;
-  backdrop-filter: blur(4px);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  backdrop-filter: var(--glass-blur);
+  -webkit-backdrop-filter: var(--glass-blur);
+  box-shadow: var(--glass-shadow-sm);
   transition: all 0.2s ease;
   display: flex;
   align-items: center;
@@ -49,7 +194,7 @@
 }
 
 .control-button:hover {
-  background: rgba(0, 0, 0, 0.85);
+  background: var(--glass-bg-hover);
   transform: scale(1.05);
 }
 
@@ -63,6 +208,18 @@
   fill: currentColor;
 }
 
+/* Menu button - standalone when closed, part of grid when open */
+.playback-controls .controls-menu-button {
+  position: relative;
+  z-index: 1;
+}
+
+/* When open, hide standalone button (it's now in the grid) */
+.playback-controls.open > .controls-menu-button {
+  opacity: 0;
+  pointer-events: none;
+}
+
 /* ===== Shader Error Overlay ===== */
 .shader-error-overlay {
   position: absolute;
@@ -206,3 +363,171 @@
   margin-left: -16px;
   padding-left: 13px;
 }
+
+/* ===== WebGL Context Lost Overlay ===== */
+.context-lost-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.9);
+  backdrop-filter: blur(8px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 3000;
+}
+
+.context-lost-content {
+  text-align: center;
+  color: white;
+  padding: 40px;
+}
+
+.context-lost-icon {
+  margin-bottom: 16px;
+  opacity: 0.8;
+}
+
+.context-lost-spinner {
+  width: 48px;
+  height: 48px;
+  border: 3px solid rgba(255, 255, 255, 0.2);
+  border-top-color: white;
+  border-radius: 50%;
+  margin: 0 auto 16px;
+  animation: context-lost-spin 1s linear infinite;
+}
+
+@keyframes context-lost-spin {
+  to { transform: rotate(360deg); }
+}
+
+.context-lost-title {
+  font-size: 18px;
+  font-weight: 600;
+  margin-bottom: 8px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+}
+
+.context-lost-message {
+  font-size: 14px;
+  opacity: 0.7;
+  margin-bottom: 20px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+}
+
+.context-lost-reload {
+  background: white;
+  color: #000;
+  border: none;
+  padding: 10px 24px;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: transform 0.2s, box-shadow 0.2s;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+}
+
+.context-lost-reload:hover {
+  transform: scale(1.02);
+  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
+}
+
+.context-lost-reload:active {
+  transform: scale(0.98);
+}
+
+/* ===== Recording Indicator ===== */
+.recording-indicator {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
+  background: rgba(220, 38, 38, 0.85);
+  border-radius: var(--glass-radius-sm);
+  border: 1px solid rgba(255, 100, 100, 0.3);
+  backdrop-filter: var(--glass-blur);
+  -webkit-backdrop-filter: var(--glass-blur);
+  box-shadow: var(--glass-shadow-sm);
+}
+
+.recording-dot {
+  width: 8px;
+  height: 8px;
+  background: white;
+  border-radius: 50%;
+  animation: recording-pulse 1s ease-in-out infinite;
+}
+
+@keyframes recording-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+}
+
+.recording-text {
+  color: white;
+  font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+}
+
+/* Record button recording state */
+.control-button.recording {
+  background: rgba(220, 38, 38, 0.7);
+  border-color: rgba(255, 100, 100, 0.3);
+}
+
+.control-button.recording:hover {
+  background: rgba(220, 38, 38, 0.85);
+}
+
+.control-button.recording svg {
+  fill: white;
+}
+
+/* ===== Media Permission Banner ===== */
+
+.media-permission-banner {
+  position: absolute;
+  bottom: 48px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--glass-bg);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: var(--glass-border);
+  box-shadow: var(--glass-shadow);
+  color: rgba(255, 255, 255, 0.9);
+  padding: 8px 16px;
+  border-radius: 6px;
+  font-size: 13px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  z-index: 100;
+  white-space: nowrap;
+}
+
+.media-banner-button {
+  background: rgba(74, 158, 255, 0.8);
+  color: #fff;
+  border: none;
+  padding: 4px 12px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 13px;
+  font-family: inherit;
+}
+
+.media-banner-button:hover {
+  background: rgba(74, 158, 255, 1);
+}

package/src/app/types.ts

@@ -4,7 +4,7 @@
  * Types for the browser runtime coordinator.
  */
 
-import type { ShadertoyProject } from '../project/types';
+import type { ShaderProject } from '../project/types';
 
 /**
  * Options for creating the App.
@@ -18,19 +18,67 @@ export interface AppOptions {
   /**
    * Loaded Shadertoy project.
    */
-  project: ShadertoyProject;
+  project: ShaderProject;
 
   /**
    * Canvas pixel ratio (default: window.devicePixelRatio).
    * Set to 1 for performance, or higher for retina displays.
    */
   pixelRatio?: number;
+
+  /**
+   * Skip creating the floating uniforms panel.
+   * Used by 'ui' layout which has its own uniforms panel.
+   */
+  skipUniformsPanel?: boolean;
+
+  /**
+   * Skip creating the playback controls overlay.
+   * Used by 'ui' layout which has its own playback controls.
+   */
+  skipPlaybackControls?: boolean;
 }
 
 /**
- * Mouse state for iMouse uniform.
+ * Mouse state for iMouse uniform (Shadertoy spec).
  * Format: [x, y, clickX, clickY]
- * - x, y: current mouse position in pixels
- * - clickX, clickY: position of last click (or -1, -1 if no click)
+ * - x, y: mouse position while button is held (freezes on release)
+ * - clickX, clickY: click origin position (positive while held, negated on release)
+ * The sign of clickX serves as a "mouse is down" signal (z > 0.0 = pressed).
  */
 export type MouseState = [number, number, number, number];
+
+/**
+ * Single touch point state.
+ * Format: [x, y, startX, startY]
+ * - x, y: current touch position in pixels
+ * - startX, startY: position where touch started
+ */
+export type TouchPoint = [number, number, number, number];
+
+/**
+ * Touch state for touch uniforms.
+ */
+export interface TouchState {
+  /** Number of active touches (0-10) */
+  count: number;
+  /** Up to 3 tracked touches for shader uniforms */
+  touches: [TouchPoint, TouchPoint, TouchPoint];
+  /** Pinch scale factor (1.0 = no pinch, >1 = zoom in, <1 = zoom out) */
+  pinch: number;
+  /** Pinch change since last frame */
+  pinchDelta: number;
+  /** Center point of pinch gesture [x, y] */
+  pinchCenter: [number, number];
+}
+
+/**
+ * Internal pointer tracking for gesture recognition.
+ */
+export interface PointerData {
+  id: number;
+  x: number;
+  y: number;
+  startX: number;
+  startY: number;
+}

package/src/editor/EditorPanel.ts

@@ -8,7 +8,7 @@
  * - Tab management for multiple passes
  */
 
-import { ShadertoyProject, PassName } from '../project/types';
+import { ShaderProject, PassName } from '../project/types';
 import { RecompileHandler } from '../layouts/types';
 
 import './editor-panel.css';
@@ -25,7 +25,7 @@ interface EditorInstance {
 
 export class EditorPanel {
   private container: HTMLElement;
-  private project: ShadertoyProject;
+  private project: ShaderProject;
   private recompileHandler: RecompileHandler | null = null;
 
   private tabBar: HTMLElement;
@@ -43,7 +43,7 @@ export class EditorPanel {
   // Track modified sources (passName -> modified source)
   private modifiedSources: Map<string, string> = new Map();
 
-  constructor(container: HTMLElement, project: ShadertoyProject) {
+  constructor(container: HTMLElement, project: ShaderProject) {
     this.container = container;
     this.project = project;
 
@@ -121,7 +121,7 @@ export class EditorPanel {
   private buildTabs(): void {
     this.tabs = [];
 
-    // 1. Common first (if exists)
+    // 1. Common (if exists)
     if (this.project.commonSource) {
       this.tabs.push({
         kind: 'code',
@@ -247,7 +247,7 @@ export class EditorPanel {
       imgContainer.className = 'editor-image-viewer';
 
       const img = document.createElement('img');
-      img.src = tab.url;
+      img.src = (tab as ImageTab).url;
       img.alt = tab.name;
 
       imgContainer.appendChild(img);