@viji-dev/core 0.3.26 → 0.3.28

package/dist/assets/{viji.worker-PAf0oIec.js → viji.worker-CdHkRwxI.js}

@@ -1792,6 +1792,7 @@ class P5WorkerAdapter {
     this.offscreenCanvas = offscreenCanvas;
     this.setupFn = sceneCode.setup || null;
     this.renderFn = sceneCode.render;
+    this.p5CanvasMode = sceneCode.canvasMode === "webgl" ? "webgl" : "2d";
     this.installMinimalShims();
   }
   p5Instance = null;
@@ -1804,6 +1805,7 @@ class P5WorkerAdapter {
   imageParameterCache = /* @__PURE__ */ new Map();
   // Track if P5.js's main canvas has been created
   mainCanvasCreated = false;
+  p5CanvasMode;
   /**
    * Initialize P5 instance after P5.js library is loaded
    * This must be called after the P5 class is available
@@ -1816,7 +1818,15 @@ class P5WorkerAdapter {
         new this.p5Class((p) => {
           this.p5Instance = p;
           p.setup = () => {
-            p.createCanvas(this.offscreenCanvas.width, this.offscreenCanvas.height);
+            if (this.p5CanvasMode === "webgl") {
+              p.createCanvas(
+                this.offscreenCanvas.width,
+                this.offscreenCanvas.height,
+                p.WEBGL
+              );
+            } else {
+              p.createCanvas(this.offscreenCanvas.width, this.offscreenCanvas.height);
+            }
             p.noLoop();
             this.p5InternalSetupComplete = true;
             resolve();
@@ -2052,8 +2062,8 @@ class P5WorkerAdapter {
         height: bitmap.height
       };
     }
-    if (Array.isArray(vijiAPI.streams)) {
-      for (const stream of vijiAPI.streams) {
+    if (Array.isArray(vijiAPI.videoStreams)) {
+      for (const stream of vijiAPI.videoStreams) {
         if (stream?.currentFrame instanceof OffscreenCanvas) {
           const canvas = stream.currentFrame;
           stream.currentFrame = {
@@ -2379,12 +2389,14 @@ class ShaderWorkerAdapter {
       this.gl = gl;
     }
   }
-  static MAX_STREAMS = 8;
+  static MAX_VIDEO_STREAMS = 8;
   // Maximum number of compositor input streams
   static MAX_EXTERNAL_DEVICES = 8;
   // Maximum number of external devices
   static MAX_DEVICE_VIDEOS = 8;
   // Maximum number of device video streams
+  static MAX_AUDIO_STREAMS = 8;
+  // Maximum number of additional audio streams
   gl;
   program = null;
   uniformLocations = /* @__PURE__ */ new Map();
@@ -2404,7 +2416,7 @@ class ShaderWorkerAdapter {
   segmentationTexture = null;
   keyboardTexture = null;
   // Multi-stream textures
-  streamTextures = [];
+  videoStreamTextures = [];
   // Device video textures
   deviceTextures = new Array(ShaderWorkerAdapter.MAX_DEVICE_VIDEOS).fill(null);
   // Accumulator state (CPU-side phase accumulators for smooth parameter-driven animation)
@@ -2692,31 +2704,31 @@ uniform vec2 u_videoResolution; // Video frame width and height in pixels
 uniform float u_videoFrameRate; // Video frame rate in frames per second
 
 // Multi-Stream Compositor Support (using individual uniforms due to WebGL 1.0 limitations)
-uniform int u_streamCount; // Number of available compositor input streams (0-8)
-uniform sampler2D u_stream0; // Stream 0 texture
-uniform sampler2D u_stream1; // Stream 1 texture
-uniform sampler2D u_stream2; // Stream 2 texture
-uniform sampler2D u_stream3; // Stream 3 texture
-uniform sampler2D u_stream4; // Stream 4 texture
-uniform sampler2D u_stream5; // Stream 5 texture
-uniform sampler2D u_stream6; // Stream 6 texture
-uniform sampler2D u_stream7; // Stream 7 texture
-uniform vec2 u_stream0Resolution; // Stream 0 resolution
-uniform vec2 u_stream1Resolution; // Stream 1 resolution
-uniform vec2 u_stream2Resolution; // Stream 2 resolution
-uniform vec2 u_stream3Resolution; // Stream 3 resolution
-uniform vec2 u_stream4Resolution; // Stream 4 resolution
-uniform vec2 u_stream5Resolution; // Stream 5 resolution
-uniform vec2 u_stream6Resolution; // Stream 6 resolution
-uniform vec2 u_stream7Resolution; // Stream 7 resolution
-uniform bool u_stream0Connected; // Stream 0 connection status
-uniform bool u_stream1Connected; // Stream 1 connection status
-uniform bool u_stream2Connected; // Stream 2 connection status
-uniform bool u_stream3Connected; // Stream 3 connection status
-uniform bool u_stream4Connected; // Stream 4 connection status
-uniform bool u_stream5Connected; // Stream 5 connection status
-uniform bool u_stream6Connected; // Stream 6 connection status
-uniform bool u_stream7Connected; // Stream 7 connection status
+uniform int u_videoStreamCount; // Number of available compositor input streams (0-8)
+uniform sampler2D u_videoStream0; // Video stream 0 texture
+uniform sampler2D u_videoStream1; // Video stream 1 texture
+uniform sampler2D u_videoStream2; // Video stream 2 texture
+uniform sampler2D u_videoStream3; // Video stream 3 texture
+uniform sampler2D u_videoStream4; // Video stream 4 texture
+uniform sampler2D u_videoStream5; // Video stream 5 texture
+uniform sampler2D u_videoStream6; // Video stream 6 texture
+uniform sampler2D u_videoStream7; // Video stream 7 texture
+uniform vec2 u_videoStream0Resolution; // Video stream 0 resolution
+uniform vec2 u_videoStream1Resolution; // Video stream 1 resolution
+uniform vec2 u_videoStream2Resolution; // Video stream 2 resolution
+uniform vec2 u_videoStream3Resolution; // Video stream 3 resolution
+uniform vec2 u_videoStream4Resolution; // Video stream 4 resolution
+uniform vec2 u_videoStream5Resolution; // Video stream 5 resolution
+uniform vec2 u_videoStream6Resolution; // Video stream 6 resolution
+uniform vec2 u_videoStream7Resolution; // Video stream 7 resolution
+uniform bool u_videoStream0Connected; // Video stream 0 connection status
+uniform bool u_videoStream1Connected; // Video stream 1 connection status
+uniform bool u_videoStream2Connected; // Video stream 2 connection status
+uniform bool u_videoStream3Connected; // Video stream 3 connection status
+uniform bool u_videoStream4Connected; // Video stream 4 connection status
+uniform bool u_videoStream5Connected; // Video stream 5 connection status
+uniform bool u_videoStream6Connected; // Video stream 6 connection status
+uniform bool u_videoStream7Connected; // Video stream 7 connection status
 
 // Device Video Support (device cameras)
 uniform int u_deviceCount; // Number of device videos (0-8)
@@ -2745,6 +2757,81 @@ uniform bool u_device5Connected; // Device 5 connection status
 uniform bool u_device6Connected; // Device 6 connection status
 uniform bool u_device7Connected; // Device 7 connection status
 
+// Additional Audio Streams (lightweight analysis, no beat/FFT)
+uniform int u_audioStreamCount; // Number of additional audio streams (0-8)
+uniform bool u_audioStream0Connected; // Stream 0 connection status
+uniform float u_audioStream0Volume; // Stream 0 volume (0-1)
+uniform float u_audioStream0Low; // Stream 0 low band (0-1)
+uniform float u_audioStream0LowMid; // Stream 0 low-mid band (0-1)
+uniform float u_audioStream0Mid; // Stream 0 mid band (0-1)
+uniform float u_audioStream0HighMid; // Stream 0 high-mid band (0-1)
+uniform float u_audioStream0High; // Stream 0 high band (0-1)
+uniform float u_audioStream0Brightness; // Stream 0 spectral brightness (0-1)
+uniform float u_audioStream0Flatness; // Stream 0 spectral flatness (0-1)
+uniform bool u_audioStream1Connected;
+uniform float u_audioStream1Volume;
+uniform float u_audioStream1Low;
+uniform float u_audioStream1LowMid;
+uniform float u_audioStream1Mid;
+uniform float u_audioStream1HighMid;
+uniform float u_audioStream1High;
+uniform float u_audioStream1Brightness;
+uniform float u_audioStream1Flatness;
+uniform bool u_audioStream2Connected;
+uniform float u_audioStream2Volume;
+uniform float u_audioStream2Low;
+uniform float u_audioStream2LowMid;
+uniform float u_audioStream2Mid;
+uniform float u_audioStream2HighMid;
+uniform float u_audioStream2High;
+uniform float u_audioStream2Brightness;
+uniform float u_audioStream2Flatness;
+uniform bool u_audioStream3Connected;
+uniform float u_audioStream3Volume;
+uniform float u_audioStream3Low;
+uniform float u_audioStream3LowMid;
+uniform float u_audioStream3Mid;
+uniform float u_audioStream3HighMid;
+uniform float u_audioStream3High;
+uniform float u_audioStream3Brightness;
+uniform float u_audioStream3Flatness;
+uniform bool u_audioStream4Connected;
+uniform float u_audioStream4Volume;
+uniform float u_audioStream4Low;
+uniform float u_audioStream4LowMid;
+uniform float u_audioStream4Mid;
+uniform float u_audioStream4HighMid;
+uniform float u_audioStream4High;
+uniform float u_audioStream4Brightness;
+uniform float u_audioStream4Flatness;
+uniform bool u_audioStream5Connected;
+uniform float u_audioStream5Volume;
+uniform float u_audioStream5Low;
+uniform float u_audioStream5LowMid;
+uniform float u_audioStream5Mid;
+uniform float u_audioStream5HighMid;
+uniform float u_audioStream5High;
+uniform float u_audioStream5Brightness;
+uniform float u_audioStream5Flatness;
+uniform bool u_audioStream6Connected;
+uniform float u_audioStream6Volume;
+uniform float u_audioStream6Low;
+uniform float u_audioStream6LowMid;
+uniform float u_audioStream6Mid;
+uniform float u_audioStream6HighMid;
+uniform float u_audioStream6High;
+uniform float u_audioStream6Brightness;
+uniform float u_audioStream6Flatness;
+uniform bool u_audioStream7Connected;
+uniform float u_audioStream7Volume;
+uniform float u_audioStream7Low;
+uniform float u_audioStream7LowMid;
+uniform float u_audioStream7Mid;
+uniform float u_audioStream7HighMid;
+uniform float u_audioStream7High;
+uniform float u_audioStream7Brightness;
+uniform float u_audioStream7Flatness;
+
 // CV - Face Detection & Expressions
 uniform int u_faceCount; // Number of detected faces (0-1)
 uniform vec4 u_face0Bounds; // First face bounding box (x, y, width, height) normalized 0-1
@@ -2973,7 +3060,7 @@ ${error}`);
       if (info) {
         const location = gl.getUniformLocation(this.program, info.name);
         this.uniformLocations.set(info.name, location);
-        if (info.name.includes("stream") || info.name.includes("u_stream")) {
+        if (info.name.includes("Stream") || info.name.includes("stream")) {
           streamUniforms.push(info.name);
         }
       }
@@ -2993,8 +3080,11 @@ ${error}`);
     this.textureUnits.set("u_video", this.nextTextureUnit++);
     this.textureUnits.set("u_segmentationMask", this.nextTextureUnit++);
     this.textureUnits.set("u_keyboard", this.nextTextureUnit++);
-    for (let i = 0; i < ShaderWorkerAdapter.MAX_STREAMS; i++) {
-      this.textureUnits.set(`u_stream${i}`, this.nextTextureUnit++);
+    for (let i = 0; i < ShaderWorkerAdapter.MAX_VIDEO_STREAMS; i++) {
+      this.textureUnits.set(`u_videoStream${i}`, this.nextTextureUnit++);
+    }
+    for (let i = 0; i < ShaderWorkerAdapter.MAX_DEVICE_VIDEOS; i++) {
+      this.textureUnits.set(`u_device${i}`, this.nextTextureUnit++);
     }
     if (this.backbufferEnabled) {
       this.textureUnits.set("backbuffer", this.nextTextureUnit++);
@@ -3165,18 +3255,18 @@ ${error}`);
       this.setUniform("u_videoResolution", "vec2", [0, 0]);
       this.setUniform("u_videoFrameRate", "float", 0);
     }
-    const streams = viji.streams || [];
-    const streamCount = Math.min(streams.length, ShaderWorkerAdapter.MAX_STREAMS);
-    this.setUniform("u_streamCount", "int", streamCount);
-    for (let i = 0; i < ShaderWorkerAdapter.MAX_STREAMS; i++) {
-      const connectedUniform = `u_stream${i}Connected`;
-      const resolutionUniform = `u_stream${i}Resolution`;
-      if (i < streamCount && streams[i]?.isConnected && streams[i]?.currentFrame) {
-        this.updateStreamTexture(i, streams[i].currentFrame);
+    const videoStreams = viji.videoStreams || [];
+    const videoStreamCount = Math.min(videoStreams.length, ShaderWorkerAdapter.MAX_VIDEO_STREAMS);
+    this.setUniform("u_videoStreamCount", "int", videoStreamCount);
+    for (let i = 0; i < ShaderWorkerAdapter.MAX_VIDEO_STREAMS; i++) {
+      const connectedUniform = `u_videoStream${i}Connected`;
+      const resolutionUniform = `u_videoStream${i}Resolution`;
+      if (i < videoStreamCount && videoStreams[i]?.isConnected && videoStreams[i]?.currentFrame) {
+        this.updateVideoStreamTexture(i, videoStreams[i].currentFrame);
         this.setUniform(
           resolutionUniform,
           "vec2",
-          [streams[i].frameWidth, streams[i].frameHeight]
+          [videoStreams[i].frameWidth, videoStreams[i].frameHeight]
         );
         this.setUniform(connectedUniform, "bool", true);
       } else {
@@ -3203,6 +3293,34 @@ ${error}`);
         this.setUniform(connectedUniform, "bool", false);
       }
     }
+    const audioStreams = viji.audioStreams || [];
+    const audioStreamCount = Math.min(audioStreams.length, ShaderWorkerAdapter.MAX_AUDIO_STREAMS);
+    this.setUniform("u_audioStreamCount", "int", audioStreamCount);
+    for (let i = 0; i < ShaderWorkerAdapter.MAX_AUDIO_STREAMS; i++) {
+      const prefix = `u_audioStream${i}`;
+      if (i < audioStreamCount && audioStreams[i]?.isConnected) {
+        const s = audioStreams[i];
+        this.setUniform(`${prefix}Connected`, "bool", true);
+        this.setUniform(`${prefix}Volume`, "float", s.volume?.current || 0);
+        this.setUniform(`${prefix}Low`, "float", s.bands?.low || 0);
+        this.setUniform(`${prefix}LowMid`, "float", s.bands?.lowMid || 0);
+        this.setUniform(`${prefix}Mid`, "float", s.bands?.mid || 0);
+        this.setUniform(`${prefix}HighMid`, "float", s.bands?.highMid || 0);
+        this.setUniform(`${prefix}High`, "float", s.bands?.high || 0);
+        this.setUniform(`${prefix}Brightness`, "float", s.spectral?.brightness || 0);
+        this.setUniform(`${prefix}Flatness`, "float", s.spectral?.flatness || 0);
+      } else {
+        this.setUniform(`${prefix}Connected`, "bool", false);
+        this.setUniform(`${prefix}Volume`, "float", 0);
+        this.setUniform(`${prefix}Low`, "float", 0);
+        this.setUniform(`${prefix}LowMid`, "float", 0);
+        this.setUniform(`${prefix}Mid`, "float", 0);
+        this.setUniform(`${prefix}HighMid`, "float", 0);
+        this.setUniform(`${prefix}High`, "float", 0);
+        this.setUniform(`${prefix}Brightness`, "float", 0);
+        this.setUniform(`${prefix}Flatness`, "float", 0);
+      }
+    }
     const faces = video.faces || [];
     this.setUniform("u_faceCount", "int", faces.length);
     if (faces.length > 0) {
@@ -3732,18 +3850,18 @@ ${error}`);
     }
   }
   /**
-   * Update compositor stream texture at specified index
+   * Update compositor video stream texture at specified index
    * Supports both OffscreenCanvas and ImageBitmap for zero-copy pipeline
    */
-  updateStreamTexture(index, streamFrame) {
+  updateVideoStreamTexture(index, streamFrame) {
     const gl = this.gl;
-    const uniformName = `u_stream${index}`;
+    const uniformName = `u_videoStream${index}`;
     const unit = this.textureUnits.get(uniformName);
-    if (!this.streamTextures[index]) {
-      this.streamTextures[index] = gl.createTexture();
+    if (!this.videoStreamTextures[index]) {
+      this.videoStreamTextures[index] = gl.createTexture();
     }
     gl.activeTexture(gl.TEXTURE0 + unit);
-    gl.bindTexture(gl.TEXTURE_2D, this.streamTextures[index]);
+    gl.bindTexture(gl.TEXTURE_2D, this.videoStreamTextures[index]);
     const shouldFlip = streamFrame instanceof OffscreenCanvas;
     if (shouldFlip) {
       gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
@@ -3781,7 +3899,8 @@ ${error}`);
     }
     const texture = this.deviceTextures[index];
     if (!texture) return;
-    const textureUnit = 8 + index;
+    const textureUnit = this.textureUnits.get(`u_device${index}`);
+    if (textureUnit === void 0) return;
     this.gl.activeTexture(this.gl.TEXTURE0 + textureUnit);
     this.gl.bindTexture(this.gl.TEXTURE_2D, texture);
     const shouldFlip = frame instanceof OffscreenCanvas;
@@ -3803,6 +3922,11 @@ ${error}`);
     this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MAG_FILTER, this.gl.LINEAR);
     this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_S, this.gl.CLAMP_TO_EDGE);
     this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_T, this.gl.CLAMP_TO_EDGE);
+    const uniformName = `u_device${index}`;
+    const location = this.uniformLocations.get(uniformName);
+    if (location) {
+      this.gl.uniform1i(location, textureUnit);
+    }
     if (frame instanceof ImageBitmap) {
       frame.close();
     }
@@ -3934,10 +4058,10 @@ ${error}`);
     if (this.audioWaveformTexture) gl.deleteTexture(this.audioWaveformTexture);
     if (this.videoTexture) gl.deleteTexture(this.videoTexture);
     if (this.segmentationTexture) gl.deleteTexture(this.segmentationTexture);
-    for (const texture of this.streamTextures) {
+    for (const texture of this.videoStreamTextures) {
       if (texture) gl.deleteTexture(texture);
     }
-    this.streamTextures = [];
+    this.videoStreamTextures = [];
     for (const texture of this.deviceTextures) {
       if (texture) gl.deleteTexture(texture);
     }
@@ -3953,6 +4077,394 @@ ${error}`);
     if (this.quadBuffer) gl.deleteBuffer(this.quadBuffer);
   }
 }
+const _PK = {
+  kty: "EC",
+  crv: "P-256",
+  x: "6bkPbVZXx-c08blVs6qIwm0gfSRLS2nnf2Tsz19ggtM",
+  y: "lhi486ASKQkS8TGbVee-FpdAu7qKaO3gad_4ScX8qJI"
+};
+const GRACE_SECONDS = 60;
+let _key = null;
+let _restricted = false;
+let _cache = null;
+let _expiry = 0;
+function _b64url(s) {
+  const padded = s.replace(/-/g, "+").replace(/_/g, "/");
+  const bin = atob(padded);
+  const bytes = new Uint8Array(bin.length);
+  for (let i = 0; i < bin.length; i++) bytes[i] = bin.charCodeAt(i);
+  return bytes;
+}
+async function init$1() {
+  if (typeof crypto === "undefined" || !crypto.subtle) {
+    _restricted = true;
+    console.warn("[Viji] _SC: secure context required — restricted mode active");
+    return;
+  }
+  try {
+    _key = await crypto.subtle.importKey(
+      "jwk",
+      _PK,
+      { name: "ECDSA", namedCurve: "P-256" },
+      false,
+      ["verify"]
+    );
+  } catch {
+    _restricted = true;
+    console.warn("[Viji] _SC: key import failed — restricted mode active");
+  }
+}
+async function update(token) {
+  if (_restricted || !_key) {
+    _cache = null;
+    _expiry = 0;
+    return;
+  }
+  try {
+    const parts = token.split(".");
+    if (parts.length !== 3) throw new Error("malformed");
+    const signingInput = new TextEncoder().encode(parts[0] + "." + parts[1]);
+    const signature = _b64url(parts[2]);
+    const valid = await crypto.subtle.verify(
+      { name: "ECDSA", hash: "SHA-256" },
+      _key,
+      signature.buffer,
+      signingInput.buffer
+    );
+    if (!valid) throw new Error("invalid signature");
+    const payload = JSON.parse(new TextDecoder().decode(_b64url(parts[1])));
+    _cache = payload.c ?? {};
+    _expiry = payload.e ?? 0;
+  } catch {
+    _cache = null;
+    _expiry = 0;
+  }
+}
+function get$1(key, defaultValue) {
+  if (_restricted || !_cache) return defaultValue;
+  const now = Math.floor(Date.now() / 1e3);
+  if (_expiry > 0 && _expiry + GRACE_SECONDS < now) {
+    _cache = null;
+    _expiry = 0;
+    return defaultValue;
+  }
+  return typeof _cache[key] === "number" ? _cache[key] : defaultValue;
+}
+const FULL_W = 44, FULL_H = 74;
+const MINI_W = 44, MINI_H = 23;
+const STROKE_COLOR = "#F1F1F1";
+let _bufferFull = null;
+let _bufferMini = null;
+let _glTexFull = null;
+let _glTexMini = null;
+let _glProgram = null;
+let _glVbo = null;
+let _glVao = null;
+let _glInitFor = null;
+let _hint = 0;
+const VERT_SRC = `
+attribute vec2 a_pos;
+attribute vec2 a_uv;
+varying vec2 v_uv;
+void main() {
+  v_uv = a_uv;
+  gl_Position = vec4(a_pos, 0.0, 1.0);
+}`;
+const FRAG_SRC = `
+precision mediump float;
+uniform sampler2D u_tex;
+uniform float u_alpha;
+varying vec2 v_uv;
+void main() {
+  gl_FragColor = texture2D(u_tex, v_uv) * u_alpha;
+}`;
+function renderFullLogo(ctx) {
+  ctx.strokeStyle = STROKE_COLOR;
+  ctx.lineCap = "round";
+  ctx.lineWidth = 2.8;
+  ctx.beginPath();
+  ctx.moveTo(21.9991, 5);
+  ctx.lineTo(5, 21.999);
+  ctx.stroke();
+  ctx.beginPath();
+  ctx.moveTo(38.9981, 21.998);
+  ctx.lineTo(21.999, 38.9971);
+  ctx.stroke();
+  ctx.beginPath();
+  ctx.moveTo(38.9984, 5);
+  ctx.lineTo(5, 38.9983);
+  ctx.stroke();
+  ctx.lineWidth = 3.5;
+  ctx.beginPath();
+  ctx.moveTo(5.00052, 5.00155);
+  ctx.lineTo(5.00098, 5);
+  ctx.stroke();
+  ctx.beginPath();
+  ctx.moveTo(38.9986, 38.9996);
+  ctx.lineTo(38.999, 38.998);
+  ctx.stroke();
+  ctx.lineWidth = 2.8;
+  ctx.lineJoin = "round";
+  ctx.beginPath();
+  ctx.moveTo(5.875, 53);
+  ctx.lineTo(10.1417, 60);
+  ctx.lineTo(13.875, 53);
+  ctx.stroke();
+  ctx.beginPath();
+  ctx.moveTo(21, 53);
+  ctx.lineTo(21, 60);
+  ctx.stroke();
+  ctx.beginPath();
+  ctx.moveTo(38.125, 53);
+  ctx.lineTo(38.125, 60);
+  ctx.stroke();
+  ctx.beginPath();
+  ctx.moveTo(30, 53);
+  ctx.lineTo(30, 62.1502);
+  ctx.bezierCurveTo(30, 64.2764, 28.2764, 66, 26.1502, 66);
+  ctx.lineTo(26, 66);
+  ctx.stroke();
+}
+function renderMiniLogo(ctx) {
+  ctx.strokeStyle = STROKE_COLOR;
+  ctx.lineCap = "round";
+  ctx.lineJoin = "round";
+  ctx.lineWidth = 2.8;
+  ctx.beginPath();
+  ctx.moveTo(5.875, 5);
+  ctx.lineTo(10.1417, 12);
+  ctx.lineTo(13.875, 5);
+  ctx.stroke();
+  ctx.beginPath();
+  ctx.moveTo(21, 5);
+  ctx.lineTo(21, 12);
+  ctx.stroke();
+  ctx.beginPath();
+  ctx.moveTo(38.125, 5);
+  ctx.lineTo(38.125, 12);
+  ctx.stroke();
+  ctx.beginPath();
+  ctx.moveTo(30, 5);
+  ctx.lineTo(30, 14.1502);
+  ctx.bezierCurveTo(30, 16.2764, 28.2764, 18, 26.1502, 18);
+  ctx.lineTo(26, 18);
+  ctx.stroke();
+}
+function init(_canvas) {
+  try {
+    _bufferFull = new OffscreenCanvas(FULL_W, FULL_H);
+    const ctxFull = _bufferFull.getContext("2d");
+    if (ctxFull) renderFullLogo(ctxFull);
+    _bufferMini = new OffscreenCanvas(MINI_W, MINI_H);
+    const ctxMini = _bufferMini.getContext("2d");
+    if (ctxMini) renderMiniLogo(ctxMini);
+  } catch (e) {
+    console.warn("[Viji] overlay: init failed", e);
+  }
+}
+function setRenderHint(h) {
+  _hint = h;
+}
+function draw(canvas, ctx, gl, brandingMode, displayScale = 1) {
+  if (brandingMode >= 2) return;
+  if (!_bufferFull && !_bufferMini) return;
+  const isMini = _hint === 1;
+  const s = displayScale || 1;
+  if (ctx) {
+    draw2D(ctx, isMini, canvas.width, s);
+  } else if (gl) {
+    drawGL(gl, canvas, isMini, s);
+  }
+}
+const GL_VERTEX_ARRAY_BINDING = 34229;
+function uploadTexture(gl, source) {
+  if (!source) return null;
+  const prevTexBinding = gl.getParameter(gl.TEXTURE_BINDING_2D);
+  const prevFlipY = gl.getParameter(gl.UNPACK_FLIP_Y_WEBGL);
+  const prevPremultiply = gl.getParameter(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL);
+  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);
+  gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, 0);
+  const tex = gl.createTexture();
+  gl.bindTexture(gl.TEXTURE_2D, tex);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
+  gl.bindTexture(gl.TEXTURE_2D, prevTexBinding);
+  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, prevFlipY ? 1 : 0);
+  gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, prevPremultiply ? 1 : 0);
+  return tex;
+}
+function initGL(gl) {
+  if (_glInitFor === gl) return;
+  _glInitFor = gl;
+  _glTexFull = uploadTexture(gl, _bufferFull);
+  _glTexMini = uploadTexture(gl, _bufferMini);
+  const vs = gl.createShader(gl.VERTEX_SHADER);
+  gl.shaderSource(vs, VERT_SRC);
+  gl.compileShader(vs);
+  const fs = gl.createShader(gl.FRAGMENT_SHADER);
+  gl.shaderSource(fs, FRAG_SRC);
+  gl.compileShader(fs);
+  _glProgram = gl.createProgram();
+  gl.attachShader(_glProgram, vs);
+  gl.attachShader(_glProgram, fs);
+  gl.linkProgram(_glProgram);
+  gl.deleteShader(vs);
+  gl.deleteShader(fs);
+  if (!gl.getProgramParameter(_glProgram, gl.LINK_STATUS)) {
+    console.warn("[Viji] overlay: shader link failed");
+    _glProgram = null;
+    return;
+  }
+  _glVbo = gl.createBuffer();
+  const gl2 = gl;
+  if (typeof gl2.createVertexArray === "function") {
+    const prevVAO = gl.getParameter(GL_VERTEX_ARRAY_BINDING);
+    const prevBuf = gl.getParameter(gl.ARRAY_BUFFER_BINDING);
+    _glVao = gl2.createVertexArray();
+    gl2.bindVertexArray(_glVao);
+    gl.bindBuffer(gl.ARRAY_BUFFER, _glVbo);
+    const aPos = gl.getAttribLocation(_glProgram, "a_pos");
+    const aUv = gl.getAttribLocation(_glProgram, "a_uv");
+    gl.enableVertexAttribArray(aPos);
+    gl.enableVertexAttribArray(aUv);
+    gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 16, 0);
+    gl.vertexAttribPointer(aUv, 2, gl.FLOAT, false, 16, 8);
+    gl2.bindVertexArray(prevVAO);
+    gl.bindBuffer(gl.ARRAY_BUFFER, prevBuf);
+  }
+}
+function draw2D(ctx, mini, canvasW, s) {
+  const buffer = mini ? _bufferMini : _bufferFull;
+  if (!buffer) return;
+  const drawW = (mini ? MINI_W : FULL_W) * s;
+  const drawH = (mini ? MINI_H : FULL_H) * s;
+  const x = mini ? Math.round((canvasW - drawW) / 2) : Math.round(48 * s);
+  const y = Math.round((mini ? 52 : 48) * s);
+  ctx.save();
+  ctx.globalAlpha = 0.85;
+  ctx.drawImage(buffer, x, y, drawW, drawH);
+  ctx.restore();
+}
+function drawGL(gl, canvas, mini, s) {
+  initGL(gl);
+  if (!_glProgram || !_glVbo) return;
+  const tex = mini ? _glTexMini : _glTexFull;
+  if (!tex) return;
+  const logoW = (mini ? MINI_W : FULL_W) * s;
+  const logoH = (mini ? MINI_H : FULL_H) * s;
+  const cw = canvas.width;
+  const ch = canvas.height;
+  const px = mini ? Math.round((cw - logoW) / 2) : Math.round(48 * s);
+  const py = Math.round((mini ? 52 : 48) * s);
+  const x0 = px / cw * 2 - 1;
+  const y0 = 1 - (py + logoH) / ch * 2;
+  const x1 = (px + logoW) / cw * 2 - 1;
+  const y1 = 1 - py / ch * 2;
+  const gl2 = gl;
+  const hasVAO = _glVao && typeof gl2.bindVertexArray === "function";
+  const prevProgram = gl.getParameter(gl.CURRENT_PROGRAM);
+  const prevActiveTexture = gl.getParameter(gl.ACTIVE_TEXTURE);
+  gl.activeTexture(gl.TEXTURE0);
+  const prevTex0 = gl.getParameter(gl.TEXTURE_BINDING_2D);
+  const prevArrayBuffer = gl.getParameter(gl.ARRAY_BUFFER_BINDING);
+  const prevFramebuffer = gl.getParameter(gl.FRAMEBUFFER_BINDING);
+  const prevViewport = gl.getParameter(gl.VIEWPORT);
+  const prevBlend = gl.isEnabled(gl.BLEND);
+  const prevBlendSrcRGB = gl.getParameter(gl.BLEND_SRC_RGB);
+  const prevBlendDstRGB = gl.getParameter(gl.BLEND_DST_RGB);
+  const prevBlendSrcAlpha = gl.getParameter(gl.BLEND_SRC_ALPHA);
+  const prevBlendDstAlpha = gl.getParameter(gl.BLEND_DST_ALPHA);
+  const prevBlendEqRGB = gl.getParameter(gl.BLEND_EQUATION_RGB);
+  const prevBlendEqAlpha = gl.getParameter(gl.BLEND_EQUATION_ALPHA);
+  const prevDepthTest = gl.isEnabled(gl.DEPTH_TEST);
+  const prevScissorTest = gl.isEnabled(gl.SCISSOR_TEST);
+  const prevStencilTest = gl.isEnabled(gl.STENCIL_TEST);
+  const prevCullFace = gl.isEnabled(gl.CULL_FACE);
+  const prevColorMask = gl.getParameter(gl.COLOR_WRITEMASK);
+  const prevUnpackFlipY = gl.getParameter(gl.UNPACK_FLIP_Y_WEBGL);
+  const prevVAO = hasVAO ? gl.getParameter(GL_VERTEX_ARRAY_BINDING) : null;
+  gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+  gl.viewport(0, 0, cw, ch);
+  gl.useProgram(_glProgram);
+  gl.enable(gl.BLEND);
+  gl.blendEquation(gl.FUNC_ADD);
+  gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+  gl.disable(gl.DEPTH_TEST);
+  gl.disable(gl.SCISSOR_TEST);
+  gl.disable(gl.STENCIL_TEST);
+  gl.disable(gl.CULL_FACE);
+  gl.colorMask(true, true, true, true);
+  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 0);
+  gl.bindTexture(gl.TEXTURE_2D, tex);
+  gl.uniform1i(gl.getUniformLocation(_glProgram, "u_tex"), 0);
+  gl.uniform1f(gl.getUniformLocation(_glProgram, "u_alpha"), 0.85);
+  const verts = new Float32Array([
+    x0,
+    y0,
+    0,
+    0,
+    x1,
+    y0,
+    1,
+    0,
+    x0,
+    y1,
+    0,
+    1,
+    x0,
+    y1,
+    0,
+    1,
+    x1,
+    y0,
+    1,
+    0,
+    x1,
+    y1,
+    1,
+    1
+  ]);
+  if (hasVAO) {
+    gl2.bindVertexArray(_glVao);
+    gl.bindBuffer(gl.ARRAY_BUFFER, _glVbo);
+    gl.bufferData(gl.ARRAY_BUFFER, verts, gl.DYNAMIC_DRAW);
+  } else {
+    gl.bindBuffer(gl.ARRAY_BUFFER, _glVbo);
+    gl.bufferData(gl.ARRAY_BUFFER, verts, gl.DYNAMIC_DRAW);
+    const aPos = gl.getAttribLocation(_glProgram, "a_pos");
+    const aUv = gl.getAttribLocation(_glProgram, "a_uv");
+    gl.enableVertexAttribArray(aPos);
+    gl.enableVertexAttribArray(aUv);
+    gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 16, 0);
+    gl.vertexAttribPointer(aUv, 2, gl.FLOAT, false, 16, 8);
+  }
+  gl.drawArrays(gl.TRIANGLES, 0, 6);
+  if (hasVAO) gl2.bindVertexArray(prevVAO);
+  gl.bindFramebuffer(gl.FRAMEBUFFER, prevFramebuffer);
+  gl.viewport(prevViewport[0], prevViewport[1], prevViewport[2], prevViewport[3]);
+  gl.bindBuffer(gl.ARRAY_BUFFER, prevArrayBuffer);
+  gl.colorMask(prevColorMask[0], prevColorMask[1], prevColorMask[2], prevColorMask[3]);
+  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, prevUnpackFlipY ? 1 : 0);
+  if (prevScissorTest) gl.enable(gl.SCISSOR_TEST);
+  else gl.disable(gl.SCISSOR_TEST);
+  if (prevStencilTest) gl.enable(gl.STENCIL_TEST);
+  else gl.disable(gl.STENCIL_TEST);
+  if (prevCullFace) gl.enable(gl.CULL_FACE);
+  else gl.disable(gl.CULL_FACE);
+  if (prevDepthTest) gl.enable(gl.DEPTH_TEST);
+  else gl.disable(gl.DEPTH_TEST);
+  if (prevBlend) gl.enable(gl.BLEND);
+  else gl.disable(gl.BLEND);
+  gl.blendFuncSeparate(prevBlendSrcRGB, prevBlendDstRGB, prevBlendSrcAlpha, prevBlendDstAlpha);
+  gl.blendEquationSeparate(prevBlendEqRGB, prevBlendEqAlpha);
+  gl.activeTexture(gl.TEXTURE0);
+  gl.bindTexture(gl.TEXTURE_2D, prevTex0);
+  gl.activeTexture(prevActiveTexture);
+  gl.useProgram(prevProgram);
+}
 class VijiWorkerRuntime {
   canvas = null;
   ctx = null;
@@ -3972,6 +4484,8 @@ class VijiWorkerRuntime {
   // Shader adapter for shader mode
   shaderAdapter = null;
   rendererType = "native";
+  _isHeadless = false;
+  _displayScale = 1;
   // Pending capture requests (queue to handle multiple simultaneous requests)
   pendingCaptures = [];
   /**
@@ -4027,6 +4541,11 @@ class VijiWorkerRuntime {
   };
   // Map deviceId → streamIndex for O(1) device video lookup
   deviceVideoMap = /* @__PURE__ */ new Map();
+  // Audio stream state management (mirroring video stream pattern)
+  static AUDIO_ADDITIONAL_BASE = 1;
+  static AUDIO_DEVICE_BASE = 100;
+  audioStreamStates = /* @__PURE__ */ new Map();
+  deviceAudioMap = /* @__PURE__ */ new Map();
   // Video state is now managed by the worker-side VideoSystem
   // Artist API object
   viji = {
@@ -4124,7 +4643,9 @@ class VijiWorkerRuntime {
       }
     },
     // Additional video streams (index 1+, no CV)
-    streams: [],
+    videoStreams: [],
+    // Additional audio streams (lightweight analysis, no beat detection)
+    audioStreams: [],
     // Interaction APIs will be added during construction
     mouse: {},
     keyboard: {},
@@ -4195,7 +4716,7 @@ class VijiWorkerRuntime {
    * Initialize P5.js mode
    * Sets up P5 rendering with P5WorkerAdapter
    */
-  async initP5Mode(setup, render) {
+  async initP5Mode(setup, render, options) {
     try {
       this.rendererType = "p5";
       this.debugLog("🎨 Initializing P5.js mode...");
@@ -4204,7 +4725,8 @@ class VijiWorkerRuntime {
         this.viji,
         {
           setup,
-          render
+          render,
+          canvasMode: options?.canvasMode === "webgl" ? "webgl" : "2d"
         }
       );
       await this.p5Adapter.init();
@@ -4296,20 +4818,47 @@ class VijiWorkerRuntime {
     if (this.videoSystems[0]) {
       Object.assign(this.viji.video, this.videoSystems[0].getVideoAPI());
     }
-    this.updateVijiStreams();
+    this.updateVijiVideoStreams();
   }
   /**
-   * Updates viji.streams from videoSystems array.
+   * Updates viji.videoStreams from videoSystems array.
    * Collects 'additional' MediaStreams first, then 'directFrame' injected frames.
    * Excludes 'main' and 'device' streams (those go to viji.video and viji.devices[].video).
    */
-  updateVijiStreams() {
+  updateVijiVideoStreams() {
     const additional = this.videoSystems.filter((vs) => vs && vs.getStreamType() === "additional").map((vs) => vs.getVideoAPI());
     const directFrames = this.videoSystems.filter((vs) => vs && vs.getStreamType() === "directFrame").map((vs) => vs.getVideoAPI());
     const freshStreams = [...additional, ...directFrames];
-    this.viji.streams.length = freshStreams.length;
+    this.viji.videoStreams.length = freshStreams.length;
     for (let i = 0; i < freshStreams.length; i++) {
-      this.viji.streams[i] = freshStreams[i];
+      this.viji.videoStreams[i] = freshStreams[i];
+    }
+  }
+  /**
+   * Rebuilds viji.audioStreams from audioStreamStates.
+   * Collects entries in the additional range (1-99), maps to AudioStreamAPI objects.
+   */
+  updateVijiAudioStreams() {
+    const entries = [];
+    for (const [idx, state2] of this.audioStreamStates) {
+      if (idx >= VijiWorkerRuntime.AUDIO_ADDITIONAL_BASE && idx < VijiWorkerRuntime.AUDIO_DEVICE_BASE) {
+        entries.push({ index: idx, ...state2 });
+      }
+    }
+    entries.sort((a, b) => a.index - b.index);
+    this.viji.audioStreams.length = entries.length;
+    for (let i = 0; i < entries.length; i++) {
+      const s = entries[i];
+      const freqData = s.frequencyData;
+      const waveData = s.waveformData;
+      this.viji.audioStreams[i] = {
+        isConnected: s.isConnected,
+        volume: s.volume,
+        bands: s.bands,
+        spectral: s.spectral,
+        getFrequencyData: () => freqData,
+        getWaveform: () => waveData
+      };
     }
   }
   // Send all parameters (from helper functions) to host
@@ -4353,6 +4902,9 @@ class VijiWorkerRuntime {
         case "audio-analysis-update":
           this.handleAudioAnalysisUpdate(message);
           break;
+        case "audio-stream-setup":
+          this.handleAudioStreamSetup(message);
+          break;
         case "video-canvas-setup":
           this.handleVideoCanvasSetup(message);
           break;
@@ -4398,6 +4950,12 @@ class VijiWorkerRuntime {
         case "capture-frame":
           this.handleCaptureFrame(message);
           break;
+        case "sc-update":
+          update(message.data.t);
+          break;
+        case "rh-update":
+          setRenderHint(message.data.h);
+          break;
       }
     };
   }
@@ -4405,8 +4963,25 @@ class VijiWorkerRuntime {
     try {
       this.canvas = message.data.canvas;
       this.viji.canvas = this.canvas;
+      this._isHeadless = !!message.data.isHeadless;
+      const origGetContext = this.canvas.getContext.bind(this.canvas);
+      this.canvas.getContext = (type, attrs) => {
+        const result = origGetContext(type, attrs);
+        if (result) {
+          if (type === "2d") {
+            this.ctx = result;
+            this.viji.ctx = this.ctx;
+          } else if (type === "webgl" || type === "webgl2") {
+            this.gl = result;
+            this.viji.gl = this.gl;
+          }
+        }
+        return result;
+      };
       this.viji.width = this.canvas.width;
       this.viji.height = this.canvas.height;
+      init$1();
+      init(this.canvas);
       this.startRenderLoop();
       this.postMessage("init-response", {
         id: message.id
@@ -4491,6 +5066,7 @@ class VijiWorkerRuntime {
       }
       this.viji.width = Math.round(message.data.effectiveWidth);
       this.viji.height = Math.round(message.data.effectiveHeight);
+      this._displayScale = message.data.displayScale ?? 1;
       if (this.gl) {
         this.gl.viewport(0, 0, this.viji.width, this.viji.height);
       }
@@ -4510,8 +5086,8 @@ class VijiWorkerRuntime {
   }
   handleParameterBatchUpdate(message) {
     if (message.data && message.data.updates) {
-      for (const update of message.data.updates) {
-        this.parameterSystem.updateParameterValue(update.name, update.value);
+      for (const update2 of message.data.updates) {
+        this.parameterSystem.updateParameterValue(update2.name, update2.value);
       }
       this.parameterSystem.markInitialValuesSynced();
       this.debugLog("Parameter system initialized successfully");
@@ -4522,6 +5098,14 @@ class VijiWorkerRuntime {
   }
   handleAudioAnalysisUpdate(message) {
     const d = message.data;
+    const streamIndex = d.streamIndex ?? 0;
+    if (streamIndex === 0) {
+      this.handleMainAudioUpdate(d);
+    } else {
+      this.handleAdditionalAudioUpdate(streamIndex, d);
+    }
+  }
+  handleMainAudioUpdate(d) {
     const audio = this.viji.audio;
     audio.isConnected = d.isConnected;
     audio.volume.current = d.volume.current;
@@ -4537,30 +5121,78 @@ class VijiWorkerRuntime {
     audio.bands.midSmoothed = d.bands.midSmoothed;
     audio.bands.highMidSmoothed = d.bands.highMidSmoothed;
     audio.bands.highSmoothed = d.bands.highSmoothed;
-    audio.beat.kick = d.beat.kick;
-    audio.beat.snare = d.beat.snare;
-    audio.beat.hat = d.beat.hat;
-    audio.beat.any = d.beat.any;
-    audio.beat.kickSmoothed = d.beat.kickSmoothed;
-    audio.beat.snareSmoothed = d.beat.snareSmoothed;
-    audio.beat.hatSmoothed = d.beat.hatSmoothed;
-    audio.beat.anySmoothed = d.beat.anySmoothed;
-    const events = d.beat.events || [];
-    if (events.length > 0) {
-      audio.beat.triggers.kick = audio.beat.triggers.kick || events.some((e) => e.type === "kick");
-      audio.beat.triggers.snare = audio.beat.triggers.snare || events.some((e) => e.type === "snare");
-      audio.beat.triggers.hat = audio.beat.triggers.hat || events.some((e) => e.type === "hat");
-      audio.beat.triggers.any = true;
-      audio.beat.events.push(...events);
-    }
-    audio.beat.bpm = d.beat.bpm;
-    audio.beat.confidence = d.beat.confidence;
-    audio.beat.isLocked = d.beat.isLocked;
+    if (d.beat) {
+      audio.beat.kick = d.beat.kick;
+      audio.beat.snare = d.beat.snare;
+      audio.beat.hat = d.beat.hat;
+      audio.beat.any = d.beat.any;
+      audio.beat.kickSmoothed = d.beat.kickSmoothed;
+      audio.beat.snareSmoothed = d.beat.snareSmoothed;
+      audio.beat.hatSmoothed = d.beat.hatSmoothed;
+      audio.beat.anySmoothed = d.beat.anySmoothed;
+      const events = d.beat.events || [];
+      if (events.length > 0) {
+        audio.beat.triggers.kick = audio.beat.triggers.kick || events.some((e) => e.type === "kick");
+        audio.beat.triggers.snare = audio.beat.triggers.snare || events.some((e) => e.type === "snare");
+        audio.beat.triggers.hat = audio.beat.triggers.hat || events.some((e) => e.type === "hat");
+        audio.beat.triggers.any = true;
+        audio.beat.events.push(...events);
+      }
+      audio.beat.bpm = d.beat.bpm;
+      audio.beat.confidence = d.beat.confidence;
+      audio.beat.isLocked = d.beat.isLocked;
+    }
     audio.spectral.brightness = d.spectral.brightness;
     audio.spectral.flatness = d.spectral.flatness;
     this.audioFrequencyData = new Uint8Array(d.frequencyData);
     this.audioWaveformData = d.waveformData ? new Float32Array(d.waveformData) : new Float32Array(0);
   }
+  handleAdditionalAudioUpdate(streamIndex, d) {
+    const frequencyData = new Uint8Array(d.frequencyData);
+    const waveformData = d.waveformData ? new Float32Array(d.waveformData) : new Float32Array(0);
+    this.audioStreamStates.set(streamIndex, {
+      isConnected: d.isConnected,
+      volume: { ...d.volume },
+      bands: { ...d.bands },
+      spectral: { ...d.spectral },
+      frequencyData,
+      waveformData
+    });
+    this.updateVijiAudioStreams();
+  }
+  /**
+   * Handles audio-stream-setup: registers stream type and device mapping.
+   * Mirrors handleVideoCanvasSetup — two-phase protocol where setup establishes
+   * the stream identity, and subsequent audio-analysis-update messages carry data.
+   */
+  handleAudioStreamSetup(message) {
+    const { streamIndex, streamType, deviceId } = message.data;
+    switch (streamType) {
+      case "additional":
+        this.updateVijiAudioStreams();
+        break;
+      case "device":
+        if (deviceId) {
+          this.deviceAudioMap.set(deviceId, streamIndex);
+          const device = this.viji.devices.find((d) => d.id === deviceId);
+          if (device) {
+            const audioState = this.audioStreamStates.get(streamIndex);
+            if (audioState) {
+              device.audio = {
+                isConnected: audioState.isConnected,
+                volume: audioState.volume,
+                bands: audioState.bands,
+                spectral: audioState.spectral,
+                getFrequencyData: () => audioState.frequencyData,
+                getWaveform: () => audioState.waveformData
+              };
+            }
+          }
+        }
+        break;
+    }
+    this.debugLog(`Audio stream setup at index ${streamIndex}, type: ${streamType}${deviceId ? `, deviceId: ${deviceId}` : ""}`);
+  }
   /**
    * Reset frame-scoped audio events (triggers + events array).
    * Called after each render, mirroring interactionSystem.frameStart().
@@ -4613,6 +5245,9 @@ class VijiWorkerRuntime {
     audio.spectral.flatness = 0;
     this.audioFrequencyData = new Uint8Array(0);
     this.audioWaveformData = new Float32Array(0);
+    this.audioStreamStates.clear();
+    this.deviceAudioMap.clear();
+    this.viji.audioStreams.length = 0;
   }
   handleVideoCanvasSetup(message) {
     const { streamIndex, streamType, deviceId } = message.data;
@@ -4633,7 +5268,7 @@ class VijiWorkerRuntime {
         Object.assign(this.viji.video, videoSystem.getVideoAPI());
         break;
       case "additional":
-        this.updateVijiStreams();
+        this.updateVijiVideoStreams();
         break;
       case "device":
         if (deviceId) {
@@ -4724,7 +5359,7 @@ class VijiWorkerRuntime {
       this.videoSystems[index].setDebugMode(this.debugMode);
       this.videoSystems[index].initializeForDirectFrames(this.rendererType);
     }
-    this.updateVijiStreams();
+    this.updateVijiVideoStreams();
     this.debugLog(`[Compositor] Prepared ${directFrameCount} direct frame slot(s)`);
   }
   handleVideoFrameDirect(message) {
@@ -4852,7 +5487,8 @@ class VijiWorkerRuntime {
   renderFrame() {
     if (!this.isRunning) return;
     const currentTime = performance.now();
-    this.updateVijiStreams();
+    this.updateVijiVideoStreams();
+    this.updateVijiAudioStreams();
     this.viji.fps = this.frameRateMode === "full" ? this.screenRefreshRate : this.screenRefreshRate / 2;
     let shouldRender = true;
     if (this.frameRateMode === "half") {
@@ -4920,6 +5556,10 @@ class VijiWorkerRuntime {
           console.warn("[AutoCapture] Failed:", error);
         }
       }
+      if (!this._isHeadless && this.canvas) {
+        const brandingMode = get$1("b", 0);
+        draw(this.canvas, this.ctx, this.gl, brandingMode, this._displayScale);
+      }
     }
     this.reportPerformanceStats(currentTime);
     this.interactionSystem.frameStart();
@@ -4952,17 +5592,29 @@ class VijiWorkerRuntime {
     this.viji.device = this.deviceState.device;
     const updatedDevices = this.deviceState.devices.map((deviceData) => {
       const existingDevice = this.viji.devices.find((d) => d.id === deviceData.id);
+      const videoStreamIndex = this.deviceVideoMap.get(deviceData.id);
+      const videoSystem = videoStreamIndex !== void 0 ? this.videoSystems[videoStreamIndex] : void 0;
+      const audioStreamIndex = this.deviceAudioMap.get(deviceData.id);
+      const audioState = audioStreamIndex !== void 0 ? this.audioStreamStates.get(audioStreamIndex) : void 0;
+      const audioAPI = audioState ? {
+        isConnected: audioState.isConnected,
+        volume: audioState.volume,
+        bands: audioState.bands,
+        spectral: audioState.spectral,
+        getFrequencyData: () => audioState.frequencyData,
+        getWaveform: () => audioState.waveformData
+      } : null;
       if (existingDevice) {
         existingDevice.name = deviceData.name;
         existingDevice.motion = deviceData.motion;
         existingDevice.orientation = deviceData.orientation;
+        if (audioAPI) existingDevice.audio = audioAPI;
         return existingDevice;
       } else {
-        const streamIndex = this.deviceVideoMap.get(deviceData.id);
-        const videoSystem = streamIndex !== void 0 ? this.videoSystems[streamIndex] : void 0;
         return {
           ...deviceData,
-          video: videoSystem ? videoSystem.getVideoAPI() : null
+          video: videoSystem ? videoSystem.getVideoAPI() : null,
+          audio: audioAPI
         };
       }
     });
@@ -4991,6 +5643,21 @@ class SceneAnalyzer {
     }
     return "native";
   }
+  /**
+   * P5 main-canvas mode from the renderer directive (only meaningful when
+   * {@link detectRendererType} is `'p5'`).
+   *
+   * - `// @renderer p5` → 2D (default)
+   * - `// @renderer p5 webgl` → WEBGL
+   */
+  static detectP5CanvasMode(sceneCode) {
+    if (/\/\/\s*@renderer\s+p5\s+webgl\b|\/\*\s*@renderer\s+p5\s+webgl\s*\*\//i.test(
+      sceneCode
+    )) {
+      return "webgl";
+    }
+    return "2d";
+  }
 }
 var ContextualKeyword;
 (function(ContextualKeyword2) {
@@ -26312,6 +26979,7 @@ async function setSceneCode(sceneCode) {
       await runtime.initShaderMode(sceneCode);
       runtime.sendAllParametersToHost();
     } else if (rendererType === "p5") {
+      const p5CanvasMode = SceneAnalyzer.detectP5CanvasMode(sceneCode);
       const jsCode = prepareSceneCode(sceneCode);
       const functionBody = jsCode + '\nreturn {   setup: typeof setup !== "undefined" ? setup : null,   render: typeof render !== "undefined" ? render : null };';
       const sceneFunction = new Function("viji", "p5", functionBody);
@@ -26319,7 +26987,7 @@ async function setSceneCode(sceneCode) {
       if (!render) {
         throw new Error("P5 mode requires a render(viji, p5) function");
       }
-      await runtime.initP5Mode(setup, render);
+      await runtime.initP5Mode(setup, render, { canvasMode: p5CanvasMode });
       runtime.sendAllParametersToHost();
     } else {
       const jsCode = prepareSceneCode(sceneCode);
@@ -26345,4 +27013,4 @@ async function setSceneCode(sceneCode) {
   }
 }
 self.setSceneCode = setSceneCode;
-//# sourceMappingURL=viji.worker-PAf0oIec.js.map
+//# sourceMappingURL=viji.worker-CdHkRwxI.js.map