@stevejtrettel/shader-sandbox 0.1.2 → 0.1.4

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

@@ -3,7 +3,7 @@
  *
  * Types for the browser runtime coordinator.
  */
-import type { ShadertoyProject } from '../project/types';
+import type { ShaderProject } from '../project/types';
 /**
  * Options for creating the App.
  */
@@ -15,18 +15,61 @@ 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;
+}
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/app/types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAEzD;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB;;OAEG;IACH,SAAS,EAAE,WAAW,CAAC;IAEvB;;OAEG;IACH,OAAO,EAAE,gBAAgB,CAAC;IAE1B;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;;;;GAKG;AACH,MAAM,MAAM,UAAU,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/app/types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEtD;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB;;OAEG;IACH,SAAS,EAAE,WAAW,CAAC;IAEvB;;OAEG;IACH,OAAO,EAAE,aAAa,CAAC;IAEvB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;;OAGG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AAED;;;;;;GAMG;AACH,MAAM,MAAM,UAAU,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;AAE1D;;;;;GAKG;AACH,MAAM,MAAM,UAAU,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;AAE1D;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,OAAO,EAAE,CAAC,UAAU,EAAE,UAAU,EAAE,UAAU,CAAC,CAAC;IAC9C,uEAAuE;IACvE,KAAK,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,UAAU,EAAE,MAAM,CAAC;IACnB,2CAA2C;IAC3C,WAAW,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAC/B;AAED;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAChB"}

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

@@ -7,7 +7,7 @@
  * - Error display
  * - Tab management for multiple passes
  */
-import { ShadertoyProject } from '../project/types';
+import { ShaderProject } from '../project/types';
 import { RecompileHandler } from '../layouts/types';
 import './editor-panel.css';
 export declare class EditorPanel {
@@ -23,7 +23,7 @@ export declare class EditorPanel {
     private activeTabIndex;
     private editorInstance;
     private modifiedSources;
-    constructor(container: HTMLElement, project: ShadertoyProject);
+    constructor(container: HTMLElement, project: ShaderProject);
     setRecompileHandler(handler: RecompileHandler): void;
     dispose(): void;
     private buildTabs;

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

@@ -1 +1 @@
-{"version":3,"file":"EditorPanel.d.ts","sourceRoot":"","sources":["../../src/editor/EditorPanel.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EAAE,gBAAgB,EAAY,MAAM,kBAAkB,CAAC;AAC9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAEpD,OAAO,oBAAoB,CAAC;AAY5B,qBAAa,WAAW;IACtB,OAAO,CAAC,SAAS,CAAc;IAC/B,OAAO,CAAC,OAAO,CAAmB;IAClC,OAAO,CAAC,gBAAgB,CAAiC;IAEzD,OAAO,CAAC,MAAM,CAAc;IAC5B,OAAO,CAAC,WAAW,CAAc;IACjC,OAAO,CAAC,UAAU,CAAc;IAChC,OAAO,CAAC,eAAe,CAAc;IACrC,OAAO,CAAC,YAAY,CAAc;IAElC,OAAO,CAAC,IAAI,CAAa;IACzB,OAAO,CAAC,cAAc,CAAa;IAGnC,OAAO,CAAC,cAAc,CAA+B;IAGrD,OAAO,CAAC,eAAe,CAAkC;gBAE7C,SAAS,EAAE,WAAW,EAAE,OAAO,EAAE,gBAAgB;IA+D7D,mBAAmB,CAAC,OAAO,EAAE,gBAAgB,GAAG,IAAI;IAIpD,OAAO,IAAI,IAAI;IAQf,OAAO,CAAC,SAAS;IAgDjB,OAAO,CAAC,WAAW;YAmBL,OAAO;IAsErB,OAAO,CAAC,wBAAwB;IAUhC,OAAO,CAAC,SAAS;IA0BjB,OAAO,CAAC,SAAS;IAKjB,OAAO,CAAC,SAAS;YAIH,eAAe;IA4B7B,OAAO,CAAC,qBAAqB;CAS9B"}
+{"version":3,"file":"EditorPanel.d.ts","sourceRoot":"","sources":["../../src/editor/EditorPanel.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EAAE,aAAa,EAAY,MAAM,kBAAkB,CAAC;AAC3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAEpD,OAAO,oBAAoB,CAAC;AAY5B,qBAAa,WAAW;IACtB,OAAO,CAAC,SAAS,CAAc;IAC/B,OAAO,CAAC,OAAO,CAAgB;IAC/B,OAAO,CAAC,gBAAgB,CAAiC;IAEzD,OAAO,CAAC,MAAM,CAAc;IAC5B,OAAO,CAAC,WAAW,CAAc;IACjC,OAAO,CAAC,UAAU,CAAc;IAChC,OAAO,CAAC,eAAe,CAAc;IACrC,OAAO,CAAC,YAAY,CAAc;IAElC,OAAO,CAAC,IAAI,CAAa;IACzB,OAAO,CAAC,cAAc,CAAa;IAGnC,OAAO,CAAC,cAAc,CAA+B;IAGrD,OAAO,CAAC,eAAe,CAAkC;gBAE7C,SAAS,EAAE,WAAW,EAAE,OAAO,EAAE,aAAa;IA+D1D,mBAAmB,CAAC,OAAO,EAAE,gBAAgB,GAAG,IAAI;IAIpD,OAAO,IAAI,IAAI;IAQf,OAAO,CAAC,SAAS;IAgDjB,OAAO,CAAC,WAAW;YAmBL,OAAO;IAsErB,OAAO,CAAC,wBAAwB;IAUhC,OAAO,CAAC,SAAS;IA0BjB,OAAO,CAAC,SAAS;IAKjB,OAAO,CAAC,SAAS;YAIH,eAAe;IA4B7B,OAAO,CAAC,qBAAqB;CAS9B"}

package/dist-lib/editor/EditorPanel.js

@@ -80,7 +80,7 @@ export class EditorPanel {
     }
     buildTabs() {
         this.tabs = [];
-        // 1. Common first (if exists)
+        // 1. Common (if exists)
         if (this.project.commonSource) {
             this.tabs.push({
                 kind: 'code',