@viji-dev/core 0.5.2 → 0.5.3

package/dist/docs-api.js

@@ -1,7 +1,7 @@
 export const docsApi = {
   "version": "1.1.0",
-  "coreVersion": "0.5.2",
-  "generatedAt": "2026-05-07T08:59:31.105Z",
+  "coreVersion": "0.5.3",
+  "generatedAt": "2026-05-07T10:18:06.592Z",
   "navigation": [
     {
       "id": "getting-started",
@@ -3025,7 +3025,7 @@ export const docsApi = {
         {
           "type": "live-example",
           "title": "Video with Face Detection",
-          "sceneCode": "const useFace = viji.toggle(false, { label: 'Face Detection', category: 'video' });\n\nfunction videoFit(viji, mode = 'cover') {\n  const vw = viji.video.frameWidth, vh = viji.video.frameHeight;\n  const w = viji.width, h = viji.height;\n  if (!vw || !vh) return { x: 0, y: 0, width: 0, height: 0 };\n  const scale = mode === 'cover' ? Math.max(w / vw, h / vh) : Math.min(w / vw, h / vh);\n  const dw = vw * scale, dh = vh * scale;\n  return { x: (w - dw) / 2, y: (h - dh) / 2, width: dw, height: dh };\n}\n\nfunction render(viji) {\n  const ctx = viji.useContext('2d');\n  const w = viji.width;\n  const h = viji.height;\n\n  ctx.fillStyle = '#111';\n  ctx.fillRect(0, 0, w, h);\n\n  if (!viji.video.isConnected || !viji.video.currentFrame) {\n    ctx.fillStyle = '#555';\n    ctx.font = `${Math.min(w, h) * 0.04}px sans-serif`;\n    ctx.textAlign = 'center';\n    ctx.fillText('Waiting for video...', w / 2, h / 2);\n    return;\n  }\n\n  if (useFace.value) viji.video.cv.enableFaceDetection(true);\n  else viji.video.cv.enableFaceDetection(false);\n\n  const v = videoFit(viji, 'contain');\n  ctx.globalAlpha = 0.6;\n  ctx.drawImage(viji.video.currentFrame, v.x, v.y, v.width, v.height);\n  ctx.globalAlpha = 1.0;\n\n  viji.video.cv.faces.forEach(face => {\n    const bx = v.x + face.bounds.x * v.width;\n    const by = v.y + face.bounds.y * v.height;\n    const bw = face.bounds.width * v.width;\n    const bh = face.bounds.height * v.height;\n\n    ctx.strokeStyle = '#4ecdc4';\n    ctx.lineWidth = 2;\n    ctx.strokeRect(bx, by, bw, bh);\n\n    ctx.fillStyle = '#4ecdc4';\n    ctx.font = `${Math.min(w, h) * 0.03}px sans-serif`;\n    ctx.textAlign = 'left';\n    ctx.fillText('Face #' + face.id + ' (' + (face.confidence * 100).toFixed(0) + '%)', bx, by - 6);\n  });\n}\n",
+          "sceneCode": "const useFace = viji.toggle(false, { label: 'Face Detection', category: 'video' });\n\nfunction videoFit(viji, mode = 'cover') {\n  const vw = viji.video.frameWidth, vh = viji.video.frameHeight;\n  const w = viji.width, h = viji.height;\n  if (!vw || !vh) return { x: 0, y: 0, width: 0, height: 0 };\n  const scale = mode === 'cover' ? Math.max(w / vw, h / vh) : Math.min(w / vw, h / vh);\n  const dw = vw * scale, dh = vh * scale;\n  return { x: (w - dw) / 2, y: (h - dh) / 2, width: dw, height: dh };\n}\n\nfunction cvHint(ctx, viji, label) {\n  const s = Math.min(viji.width, viji.height);\n  const t = (Math.sin(viji.time * 3) + 1) / 2;\n  const bandH = s * 0.18;\n  const bandY = (viji.height - bandH) / 2;\n  ctx.fillStyle = `rgba(255, 200, 0, ${0.85 + t * 0.15})`;\n  ctx.fillRect(0, bandY, viji.width, bandH);\n  ctx.fillStyle = '#111';\n  ctx.font = `bold ${s * 0.045}px sans-serif`;\n  ctx.textAlign = 'center';\n  ctx.textBaseline = 'middle';\n  ctx.fillText(`Enable \"${label}\" in parameters`, viji.width / 2, viji.height / 2);\n  ctx.textBaseline = 'alphabetic';\n}\n\nfunction render(viji) {\n  const ctx = viji.useContext('2d');\n  const w = viji.width;\n  const h = viji.height;\n\n  ctx.fillStyle = '#111';\n  ctx.fillRect(0, 0, w, h);\n\n  if (!viji.video.isConnected || !viji.video.currentFrame) {\n    ctx.fillStyle = '#555';\n    ctx.font = `${Math.min(w, h) * 0.04}px sans-serif`;\n    ctx.textAlign = 'center';\n    ctx.fillText('Waiting for video...', w / 2, h / 2);\n    return;\n  }\n\n  if (useFace.value) viji.video.cv.enableFaceDetection(true);\n  else viji.video.cv.enableFaceDetection(false);\n\n  const v = videoFit(viji, 'contain');\n  ctx.globalAlpha = 0.6;\n  ctx.drawImage(viji.video.currentFrame, v.x, v.y, v.width, v.height);\n  ctx.globalAlpha = 1.0;\n\n  if (!useFace.value) {\n    cvHint(ctx, viji, 'Face Detection');\n    return;\n  }\n\n  viji.video.cv.faces.forEach(face => {\n    const bx = v.x + face.bounds.x * v.width;\n    const by = v.y + face.bounds.y * v.height;\n    const bw = face.bounds.width * v.width;\n    const bh = face.bounds.height * v.height;\n\n    ctx.strokeStyle = '#4ecdc4';\n    ctx.lineWidth = 2;\n    ctx.strokeRect(bx, by, bw, bh);\n\n    ctx.fillStyle = '#4ecdc4';\n    ctx.font = `${Math.min(w, h) * 0.03}px sans-serif`;\n    ctx.textAlign = 'left';\n    ctx.fillText('Face #' + face.id + ' (' + (face.confidence * 100).toFixed(0) + '%)', bx, by - 6);\n  });\n}\n",
           "sceneFile": "video-overview.scene.js",
           "capabilities": {
             "video": true
@@ -3198,7 +3198,7 @@ export const docsApi = {
         {
           "type": "live-example",
           "title": "Face Detection",
-          "sceneCode": "const useFace = viji.toggle(false, { label: 'Face Detection', category: 'video' });\n\nfunction videoFit(viji, mode = 'cover') {\n  const vw = viji.video.frameWidth, vh = viji.video.frameHeight;\n  const w = viji.width, h = viji.height;\n  if (!vw || !vh) return { x: 0, y: 0, width: 0, height: 0 };\n  const scale = mode === 'cover' ? Math.max(w / vw, h / vh) : Math.min(w / vw, h / vh);\n  const dw = vw * scale, dh = vh * scale;\n  return { x: (w - dw) / 2, y: (h - dh) / 2, width: dw, height: dh };\n}\n\nfunction render(viji) {\n  const ctx = viji.useContext('2d');\n  const w = viji.width;\n  const h = viji.height;\n\n  ctx.fillStyle = '#111';\n  ctx.fillRect(0, 0, w, h);\n\n  if (useFace.value) viji.video.cv.enableFaceDetection(true);\n  else viji.video.cv.enableFaceDetection(false);\n\n  if (!viji.video.isConnected || !viji.video.currentFrame) {\n    ctx.fillStyle = '#555';\n    ctx.font = `${Math.min(w, h) * 0.04}px sans-serif`;\n    ctx.textAlign = 'center';\n    ctx.fillText('Waiting for video...', w / 2, h / 2);\n    return;\n  }\n\n  const v = videoFit(viji, 'contain');\n  ctx.drawImage(viji.video.currentFrame, v.x, v.y, v.width, v.height);\n\n  viji.video.cv.faces.forEach(face => {\n    const bx = v.x + face.bounds.x * v.width;\n    const by = v.y + face.bounds.y * v.height;\n    const bw = face.bounds.width * v.width;\n    const bh = face.bounds.height * v.height;\n\n    ctx.strokeStyle = '#4ecdc4';\n    ctx.lineWidth = 2;\n    ctx.strokeRect(bx, by, bw, bh);\n\n    ctx.fillStyle = '#4ecdc4';\n    ctx.beginPath();\n    ctx.arc(v.x + face.center.x * v.width, v.y + face.center.y * v.height, 4, 0, Math.PI * 2);\n    ctx.fill();\n\n    ctx.font = `${Math.min(w, h) * 0.025}px sans-serif`;\n    ctx.textAlign = 'left';\n    ctx.fillText('Face #' + face.id + ' (' + (face.confidence * 100).toFixed(0) + '%)', bx, by - 6);\n  });\n}\n",
+          "sceneCode": "const useFace = viji.toggle(false, { label: 'Face Detection', category: 'video' });\n\nfunction videoFit(viji, mode = 'cover') {\n  const vw = viji.video.frameWidth, vh = viji.video.frameHeight;\n  const w = viji.width, h = viji.height;\n  if (!vw || !vh) return { x: 0, y: 0, width: 0, height: 0 };\n  const scale = mode === 'cover' ? Math.max(w / vw, h / vh) : Math.min(w / vw, h / vh);\n  const dw = vw * scale, dh = vh * scale;\n  return { x: (w - dw) / 2, y: (h - dh) / 2, width: dw, height: dh };\n}\n\nfunction cvHint(ctx, viji, label) {\n  const s = Math.min(viji.width, viji.height);\n  const t = (Math.sin(viji.time * 3) + 1) / 2;\n  const bandH = s * 0.18;\n  const bandY = (viji.height - bandH) / 2;\n  ctx.fillStyle = `rgba(255, 200, 0, ${0.85 + t * 0.15})`;\n  ctx.fillRect(0, bandY, viji.width, bandH);\n  ctx.fillStyle = '#111';\n  ctx.font = `bold ${s * 0.045}px sans-serif`;\n  ctx.textAlign = 'center';\n  ctx.textBaseline = 'middle';\n  ctx.fillText(`Enable \"${label}\" in parameters`, viji.width / 2, viji.height / 2);\n  ctx.textBaseline = 'alphabetic';\n}\n\nfunction render(viji) {\n  const ctx = viji.useContext('2d');\n  const w = viji.width;\n  const h = viji.height;\n\n  ctx.fillStyle = '#111';\n  ctx.fillRect(0, 0, w, h);\n\n  if (useFace.value) viji.video.cv.enableFaceDetection(true);\n  else viji.video.cv.enableFaceDetection(false);\n\n  if (!viji.video.isConnected || !viji.video.currentFrame) {\n    ctx.fillStyle = '#555';\n    ctx.font = `${Math.min(w, h) * 0.04}px sans-serif`;\n    ctx.textAlign = 'center';\n    ctx.fillText('Waiting for video...', w / 2, h / 2);\n    return;\n  }\n\n  const v = videoFit(viji, 'contain');\n  ctx.drawImage(viji.video.currentFrame, v.x, v.y, v.width, v.height);\n\n  if (!useFace.value) {\n    cvHint(ctx, viji, 'Face Detection');\n    return;\n  }\n\n  viji.video.cv.faces.forEach(face => {\n    const bx = v.x + face.bounds.x * v.width;\n    const by = v.y + face.bounds.y * v.height;\n    const bw = face.bounds.width * v.width;\n    const bh = face.bounds.height * v.height;\n\n    ctx.strokeStyle = '#4ecdc4';\n    ctx.lineWidth = 2;\n    ctx.strokeRect(bx, by, bw, bh);\n\n    ctx.fillStyle = '#4ecdc4';\n    ctx.beginPath();\n    ctx.arc(v.x + face.center.x * v.width, v.y + face.center.y * v.height, 4, 0, Math.PI * 2);\n    ctx.fill();\n\n    ctx.font = `${Math.min(w, h) * 0.025}px sans-serif`;\n    ctx.textAlign = 'left';\n    ctx.fillText('Face #' + face.id + ' (' + (face.confidence * 100).toFixed(0) + '%)', bx, by - 6);\n  });\n}\n",
           "sceneFile": "face-detection-demo.scene.js",
           "capabilities": {
             "video": true
@@ -3254,7 +3254,7 @@ export const docsApi = {
         {
           "type": "live-example",
           "title": "Face Mesh",
-          "sceneCode": "const useMesh = viji.toggle(false, { label: 'Face Mesh', category: 'video' });\n\nfunction videoFit(viji, mode = 'cover') {\n  const vw = viji.video.frameWidth, vh = viji.video.frameHeight;\n  const w = viji.width, h = viji.height;\n  if (!vw || !vh) return { x: 0, y: 0, width: 0, height: 0 };\n  const scale = mode === 'cover' ? Math.max(w / vw, h / vh) : Math.min(w / vw, h / vh);\n  const dw = vw * scale, dh = vh * scale;\n  return { x: (w - dw) / 2, y: (h - dh) / 2, width: dw, height: dh };\n}\n\nfunction render(viji) {\n  const ctx = viji.useContext('2d');\n  const w = viji.width;\n  const h = viji.height;\n\n  ctx.fillStyle = '#111';\n  ctx.fillRect(0, 0, w, h);\n\n  if (useMesh.value) viji.video.cv.enableFaceMesh(true);\n  else viji.video.cv.enableFaceMesh(false);\n\n  if (!viji.video.isConnected || !viji.video.currentFrame) {\n    ctx.fillStyle = '#555';\n    ctx.font = `${Math.min(w, h) * 0.04}px sans-serif`;\n    ctx.textAlign = 'center';\n    ctx.fillText('Waiting for video...', w / 2, h / 2);\n    return;\n  }\n\n  const v = videoFit(viji, 'contain');\n  ctx.globalAlpha = 0.4;\n  ctx.drawImage(viji.video.currentFrame, v.x, v.y, v.width, v.height);\n  ctx.globalAlpha = 1.0;\n\n  viji.video.cv.faces.forEach(face => {\n    if (face.landmarks.length === 0) return;\n\n    ctx.fillStyle = 'rgba(69, 183, 209, 0.7)';\n    face.landmarks.forEach(pt => {\n      ctx.beginPath();\n      ctx.arc(v.x + pt.x * v.width, v.y + pt.y * v.height, 1, 0, Math.PI * 2);\n      ctx.fill();\n    });\n\n    const fontSize = Math.min(w, h) * 0.025;\n    ctx.fillStyle = '#fff';\n    ctx.font = `${fontSize}px sans-serif`;\n    ctx.textAlign = 'left';\n    const hp = face.headPose;\n    ctx.fillText(\n      face.landmarks.length + ' landmarks | Pitch: ' + hp.pitch.toFixed(1) +\n      ' Yaw: ' + hp.yaw.toFixed(1) + ' Roll: ' + hp.roll.toFixed(1),\n      w * 0.03, h - fontSize * 0.8\n    );\n  });\n}\n",
+          "sceneCode": "const useMesh = viji.toggle(false, { label: 'Face Mesh', category: 'video' });\n\nfunction videoFit(viji, mode = 'cover') {\n  const vw = viji.video.frameWidth, vh = viji.video.frameHeight;\n  const w = viji.width, h = viji.height;\n  if (!vw || !vh) return { x: 0, y: 0, width: 0, height: 0 };\n  const scale = mode === 'cover' ? Math.max(w / vw, h / vh) : Math.min(w / vw, h / vh);\n  const dw = vw * scale, dh = vh * scale;\n  return { x: (w - dw) / 2, y: (h - dh) / 2, width: dw, height: dh };\n}\n\nfunction cvHint(ctx, viji, label) {\n  const s = Math.min(viji.width, viji.height);\n  const t = (Math.sin(viji.time * 3) + 1) / 2;\n  const bandH = s * 0.18;\n  const bandY = (viji.height - bandH) / 2;\n  ctx.fillStyle = `rgba(255, 200, 0, ${0.85 + t * 0.15})`;\n  ctx.fillRect(0, bandY, viji.width, bandH);\n  ctx.fillStyle = '#111';\n  ctx.font = `bold ${s * 0.045}px sans-serif`;\n  ctx.textAlign = 'center';\n  ctx.textBaseline = 'middle';\n  ctx.fillText(`Enable \"${label}\" in parameters`, viji.width / 2, viji.height / 2);\n  ctx.textBaseline = 'alphabetic';\n}\n\nfunction render(viji) {\n  const ctx = viji.useContext('2d');\n  const w = viji.width;\n  const h = viji.height;\n\n  ctx.fillStyle = '#111';\n  ctx.fillRect(0, 0, w, h);\n\n  if (useMesh.value) viji.video.cv.enableFaceMesh(true);\n  else viji.video.cv.enableFaceMesh(false);\n\n  if (!viji.video.isConnected || !viji.video.currentFrame) {\n    ctx.fillStyle = '#555';\n    ctx.font = `${Math.min(w, h) * 0.04}px sans-serif`;\n    ctx.textAlign = 'center';\n    ctx.fillText('Waiting for video...', w / 2, h / 2);\n    return;\n  }\n\n  const v = videoFit(viji, 'contain');\n  ctx.globalAlpha = 0.4;\n  ctx.drawImage(viji.video.currentFrame, v.x, v.y, v.width, v.height);\n  ctx.globalAlpha = 1.0;\n\n  if (!useMesh.value) {\n    cvHint(ctx, viji, 'Face Mesh');\n    return;\n  }\n\n  viji.video.cv.faces.forEach(face => {\n    if (face.landmarks.length === 0) return;\n\n    ctx.fillStyle = 'rgba(69, 183, 209, 0.7)';\n    face.landmarks.forEach(pt => {\n      ctx.beginPath();\n      ctx.arc(v.x + pt.x * v.width, v.y + pt.y * v.height, 1, 0, Math.PI * 2);\n      ctx.fill();\n    });\n\n    const fontSize = Math.min(w, h) * 0.025;\n    ctx.fillStyle = '#fff';\n    ctx.font = `${fontSize}px sans-serif`;\n    ctx.textAlign = 'left';\n    const hp = face.headPose;\n    ctx.fillText(\n      face.landmarks.length + ' landmarks | Pitch: ' + hp.pitch.toFixed(1) +\n      ' Yaw: ' + hp.yaw.toFixed(1) + ' Roll: ' + hp.roll.toFixed(1),\n      w * 0.03, h - fontSize * 0.8\n    );\n  });\n}\n",
           "sceneFile": "face-mesh-demo.scene.js",
           "capabilities": {
             "video": true
@@ -3305,7 +3305,7 @@ export const docsApi = {
         {
           "type": "live-example",
           "title": "Emotion Detection",
-          "sceneCode": "const useEmotion = viji.toggle(false, { label: 'Emotion Detection', category: 'video' });\n\nfunction videoFit(viji, mode = 'cover') {\n  const vw = viji.video.frameWidth, vh = viji.video.frameHeight;\n  const w = viji.width, h = viji.height;\n  if (!vw || !vh) return { x: 0, y: 0, width: 0, height: 0 };\n  const scale = mode === 'cover' ? Math.max(w / vw, h / vh) : Math.min(w / vw, h / vh);\n  const dw = vw * scale, dh = vh * scale;\n  return { x: (w - dw) / 2, y: (h - dh) / 2, width: dw, height: dh };\n}\n\nfunction render(viji) {\n  const ctx = viji.useContext('2d');\n  const w = viji.width;\n  const h = viji.height;\n\n  ctx.fillStyle = '#111';\n  ctx.fillRect(0, 0, w, h);\n\n  if (useEmotion.value) {\n    viji.video.cv.enableEmotionDetection(true);\n  } else {\n    viji.video.cv.enableEmotionDetection(false);\n  }\n\n  if (!viji.video.isConnected || !viji.video.currentFrame) {\n    ctx.fillStyle = '#555';\n    ctx.font = `${Math.min(w, h) * 0.04}px sans-serif`;\n    ctx.textAlign = 'center';\n    ctx.fillText('Waiting for video...', w / 2, h / 2);\n    return;\n  }\n\n  const v = videoFit(viji, 'contain');\n  ctx.globalAlpha = 0.4;\n  ctx.drawImage(viji.video.currentFrame, v.x, v.y, v.width, v.height);\n  ctx.globalAlpha = 1.0;\n\n  const face = viji.video.cv.faces[0];\n  if (!face) return;\n\n  const expr = face.expressions;\n  const labels = ['neutral', 'happy', 'sad', 'angry', 'surprised', 'disgusted', 'fearful'];\n  const values = [expr.neutral, expr.happy, expr.sad, expr.angry, expr.surprised, expr.disgusted, expr.fearful];\n  const colors = ['#888', '#4CAF50', '#2196F3', '#f44336', '#FF9800', '#9C27B0', '#607D8B'];\n\n  const barH = h * 0.04;\n  const barW = w * 0.3;\n  const x = w * 0.65;\n  let y = h * 0.12;\n  const fontSize = barH * 0.7;\n\n  ctx.font = `${fontSize}px sans-serif`;\n  labels.forEach((label, i) => {\n    ctx.fillStyle = '#aaa';\n    ctx.textAlign = 'right';\n    ctx.fillText(label, x - 8, y + barH * 0.75);\n\n    ctx.fillStyle = '#222';\n    ctx.fillRect(x, y, barW, barH);\n\n    ctx.fillStyle = colors[i];\n    ctx.fillRect(x, y, barW * values[i], barH);\n\n    ctx.fillStyle = '#ddd';\n    ctx.textAlign = 'left';\n    ctx.fillText((values[i] * 100).toFixed(0) + '%', x + barW + 6, y + barH * 0.75);\n\n    y += barH * 1.8;\n  });\n}\n",
+          "sceneCode": "const useEmotion = viji.toggle(false, { label: 'Emotion Detection', category: 'video' });\n\nfunction videoFit(viji, mode = 'cover') {\n  const vw = viji.video.frameWidth, vh = viji.video.frameHeight;\n  const w = viji.width, h = viji.height;\n  if (!vw || !vh) return { x: 0, y: 0, width: 0, height: 0 };\n  const scale = mode === 'cover' ? Math.max(w / vw, h / vh) : Math.min(w / vw, h / vh);\n  const dw = vw * scale, dh = vh * scale;\n  return { x: (w - dw) / 2, y: (h - dh) / 2, width: dw, height: dh };\n}\n\nfunction cvHint(ctx, viji, label) {\n  const s = Math.min(viji.width, viji.height);\n  const t = (Math.sin(viji.time * 3) + 1) / 2;\n  const bandH = s * 0.18;\n  const bandY = (viji.height - bandH) / 2;\n  ctx.fillStyle = `rgba(255, 200, 0, ${0.85 + t * 0.15})`;\n  ctx.fillRect(0, bandY, viji.width, bandH);\n  ctx.fillStyle = '#111';\n  ctx.font = `bold ${s * 0.045}px sans-serif`;\n  ctx.textAlign = 'center';\n  ctx.textBaseline = 'middle';\n  ctx.fillText(`Enable \"${label}\" in parameters`, viji.width / 2, viji.height / 2);\n  ctx.textBaseline = 'alphabetic';\n}\n\nfunction render(viji) {\n  const ctx = viji.useContext('2d');\n  const w = viji.width;\n  const h = viji.height;\n\n  ctx.fillStyle = '#111';\n  ctx.fillRect(0, 0, w, h);\n\n  if (useEmotion.value) {\n    viji.video.cv.enableEmotionDetection(true);\n  } else {\n    viji.video.cv.enableEmotionDetection(false);\n  }\n\n  if (!viji.video.isConnected || !viji.video.currentFrame) {\n    ctx.fillStyle = '#555';\n    ctx.font = `${Math.min(w, h) * 0.04}px sans-serif`;\n    ctx.textAlign = 'center';\n    ctx.fillText('Waiting for video...', w / 2, h / 2);\n    return;\n  }\n\n  const v = videoFit(viji, 'contain');\n  ctx.globalAlpha = 0.4;\n  ctx.drawImage(viji.video.currentFrame, v.x, v.y, v.width, v.height);\n  ctx.globalAlpha = 1.0;\n\n  if (!useEmotion.value) {\n    cvHint(ctx, viji, 'Emotion Detection');\n    return;\n  }\n\n  const face = viji.video.cv.faces[0];\n  if (!face) return;\n\n  const expr = face.expressions;\n  const labels = ['neutral', 'happy', 'sad', 'angry', 'surprised', 'disgusted', 'fearful'];\n  const values = [expr.neutral, expr.happy, expr.sad, expr.angry, expr.surprised, expr.disgusted, expr.fearful];\n  const colors = ['#888', '#4CAF50', '#2196F3', '#f44336', '#FF9800', '#9C27B0', '#607D8B'];\n\n  const barH = h * 0.04;\n  const barW = w * 0.3;\n  const x = w * 0.65;\n  let y = h * 0.12;\n  const fontSize = barH * 0.7;\n\n  ctx.font = `${fontSize}px sans-serif`;\n  labels.forEach((label, i) => {\n    ctx.fillStyle = '#aaa';\n    ctx.textAlign = 'right';\n    ctx.fillText(label, x - 8, y + barH * 0.75);\n\n    ctx.fillStyle = '#222';\n    ctx.fillRect(x, y, barW, barH);\n\n    ctx.fillStyle = colors[i];\n    ctx.fillRect(x, y, barW * values[i], barH);\n\n    ctx.fillStyle = '#ddd';\n    ctx.textAlign = 'left';\n    ctx.fillText((values[i] * 100).toFixed(0) + '%', x + barW + 6, y + barH * 0.75);\n\n    y += barH * 1.8;\n  });\n}\n",
           "sceneFile": "emotion-detection-demo.scene.js",
           "capabilities": {
             "video": true
@@ -3351,7 +3351,7 @@ export const docsApi = {
         {
           "type": "live-example",
           "title": "Hand Tracking",
-          "sceneCode": "const useHands = viji.toggle(false, { label: 'Hand Tracking', category: 'video' });\n\nfunction videoFit(viji, mode = 'cover') {\n  const vw = viji.video.frameWidth, vh = viji.video.frameHeight;\n  const w = viji.width, h = viji.height;\n  if (!vw || !vh) return { x: 0, y: 0, width: 0, height: 0 };\n  const scale = mode === 'cover' ? Math.max(w / vw, h / vh) : Math.min(w / vw, h / vh);\n  const dw = vw * scale, dh = vh * scale;\n  return { x: (w - dw) / 2, y: (h - dh) / 2, width: dw, height: dh };\n}\n\nfunction render(viji) {\n  const ctx = viji.useContext('2d');\n  const w = viji.width;\n  const h = viji.height;\n\n  ctx.fillStyle = '#111';\n  ctx.fillRect(0, 0, w, h);\n\n  if (useHands.value) viji.video.cv.enableHandTracking(true);\n  else viji.video.cv.enableHandTracking(false);\n\n  if (!viji.video.isConnected || !viji.video.currentFrame) {\n    ctx.fillStyle = '#555';\n    ctx.font = `${Math.min(w, h) * 0.04}px sans-serif`;\n    ctx.textAlign = 'center';\n    ctx.fillText('Waiting for video...', w / 2, h / 2);\n    return;\n  }\n\n  const v = videoFit(viji, 'contain');\n  ctx.globalAlpha = 0.4;\n  ctx.drawImage(viji.video.currentFrame, v.x, v.y, v.width, v.height);\n  ctx.globalAlpha = 1.0;\n\n  viji.video.cv.hands.forEach(hand => {\n    const color = hand.handedness === 'left' ? '#ff9ff3' : '#54a0ff';\n\n    ctx.fillStyle = color;\n    hand.landmarks.forEach(pt => {\n      ctx.beginPath();\n      ctx.arc(v.x + pt.x * v.width, v.y + pt.y * v.height, 3, 0, Math.PI * 2);\n      ctx.fill();\n    });\n\n    ctx.beginPath();\n    ctx.arc(v.x + hand.palm.x * v.width, v.y + hand.palm.y * v.height, 8, 0, Math.PI * 2);\n    ctx.strokeStyle = color;\n    ctx.lineWidth = 2;\n    ctx.stroke();\n\n    const g = hand.gestures;\n    const names = ['fist', 'openPalm', 'peace', 'thumbsUp', 'thumbsDown', 'pointing', 'iLoveYou'];\n    const vals = [g.fist, g.openPalm, g.peace, g.thumbsUp, g.thumbsDown, g.pointing, g.iLoveYou];\n\n    const barW = w * 0.12;\n    const barH = h * 0.02;\n    let bx = v.x + hand.bounds.x * v.width;\n    let by = v.y + (hand.bounds.y + hand.bounds.height) * v.height + 8;\n    const fontSize = barH * 0.9;\n    ctx.font = `${fontSize}px sans-serif`;\n\n    names.forEach((name, i) => {\n      ctx.fillStyle = '#aaa';\n      ctx.textAlign = 'right';\n      ctx.fillText(name, bx + barW * 0.6 - 4, by + barH * 0.85);\n\n      ctx.fillStyle = '#333';\n      ctx.fillRect(bx + barW * 0.6, by, barW * 0.4, barH);\n      ctx.fillStyle = color;\n      ctx.fillRect(bx + barW * 0.6, by, barW * 0.4 * vals[i], barH);\n\n      by += barH * 1.5;\n    });\n  });\n}\n",
+          "sceneCode": "const useHands = viji.toggle(false, { label: 'Hand Tracking', category: 'video' });\n\nfunction videoFit(viji, mode = 'cover') {\n  const vw = viji.video.frameWidth, vh = viji.video.frameHeight;\n  const w = viji.width, h = viji.height;\n  if (!vw || !vh) return { x: 0, y: 0, width: 0, height: 0 };\n  const scale = mode === 'cover' ? Math.max(w / vw, h / vh) : Math.min(w / vw, h / vh);\n  const dw = vw * scale, dh = vh * scale;\n  return { x: (w - dw) / 2, y: (h - dh) / 2, width: dw, height: dh };\n}\n\nfunction cvHint(ctx, viji, label) {\n  const s = Math.min(viji.width, viji.height);\n  const t = (Math.sin(viji.time * 3) + 1) / 2;\n  const bandH = s * 0.18;\n  const bandY = (viji.height - bandH) / 2;\n  ctx.fillStyle = `rgba(255, 200, 0, ${0.85 + t * 0.15})`;\n  ctx.fillRect(0, bandY, viji.width, bandH);\n  ctx.fillStyle = '#111';\n  ctx.font = `bold ${s * 0.045}px sans-serif`;\n  ctx.textAlign = 'center';\n  ctx.textBaseline = 'middle';\n  ctx.fillText(`Enable \"${label}\" in parameters`, viji.width / 2, viji.height / 2);\n  ctx.textBaseline = 'alphabetic';\n}\n\nfunction render(viji) {\n  const ctx = viji.useContext('2d');\n  const w = viji.width;\n  const h = viji.height;\n\n  ctx.fillStyle = '#111';\n  ctx.fillRect(0, 0, w, h);\n\n  if (useHands.value) viji.video.cv.enableHandTracking(true);\n  else viji.video.cv.enableHandTracking(false);\n\n  if (!viji.video.isConnected || !viji.video.currentFrame) {\n    ctx.fillStyle = '#555';\n    ctx.font = `${Math.min(w, h) * 0.04}px sans-serif`;\n    ctx.textAlign = 'center';\n    ctx.fillText('Waiting for video...', w / 2, h / 2);\n    return;\n  }\n\n  const v = videoFit(viji, 'contain');\n  ctx.globalAlpha = 0.4;\n  ctx.drawImage(viji.video.currentFrame, v.x, v.y, v.width, v.height);\n  ctx.globalAlpha = 1.0;\n\n  if (!useHands.value) {\n    cvHint(ctx, viji, 'Hand Tracking');\n    return;\n  }\n\n  viji.video.cv.hands.forEach(hand => {\n    const color = hand.handedness === 'left' ? '#ff9ff3' : '#54a0ff';\n\n    ctx.fillStyle = color;\n    hand.landmarks.forEach(pt => {\n      ctx.beginPath();\n      ctx.arc(v.x + pt.x * v.width, v.y + pt.y * v.height, 3, 0, Math.PI * 2);\n      ctx.fill();\n    });\n\n    ctx.beginPath();\n    ctx.arc(v.x + hand.palm.x * v.width, v.y + hand.palm.y * v.height, 8, 0, Math.PI * 2);\n    ctx.strokeStyle = color;\n    ctx.lineWidth = 2;\n    ctx.stroke();\n\n    const g = hand.gestures;\n    const names = ['fist', 'openPalm', 'peace', 'thumbsUp', 'thumbsDown', 'pointing', 'iLoveYou'];\n    const vals = [g.fist, g.openPalm, g.peace, g.thumbsUp, g.thumbsDown, g.pointing, g.iLoveYou];\n\n    const barW = w * 0.12;\n    const barH = h * 0.02;\n    let bx = v.x + hand.bounds.x * v.width;\n    let by = v.y + (hand.bounds.y + hand.bounds.height) * v.height + 8;\n    const fontSize = barH * 0.9;\n    ctx.font = `${fontSize}px sans-serif`;\n\n    names.forEach((name, i) => {\n      ctx.fillStyle = '#aaa';\n      ctx.textAlign = 'right';\n      ctx.fillText(name, bx + barW * 0.6 - 4, by + barH * 0.85);\n\n      ctx.fillStyle = '#333';\n      ctx.fillRect(bx + barW * 0.6, by, barW * 0.4, barH);\n      ctx.fillStyle = color;\n      ctx.fillRect(bx + barW * 0.6, by, barW * 0.4 * vals[i], barH);\n\n      by += barH * 1.5;\n    });\n  });\n}\n",
           "sceneFile": "hand-tracking-demo.scene.js",
           "capabilities": {
             "video": true
@@ -3397,7 +3397,7 @@ export const docsApi = {
         {
           "type": "live-example",
           "title": "Pose Detection",
-          "sceneCode": "const usePose = viji.toggle(false, { label: 'Pose Detection', category: 'video' });\n\nfunction videoFit(viji, mode = 'cover') {\n  const vw = viji.video.frameWidth, vh = viji.video.frameHeight;\n  const w = viji.width, h = viji.height;\n  if (!vw || !vh) return { x: 0, y: 0, width: 0, height: 0 };\n  const scale = mode === 'cover' ? Math.max(w / vw, h / vh) : Math.min(w / vw, h / vh);\n  const dw = vw * scale, dh = vh * scale;\n  return { x: (w - dw) / 2, y: (h - dh) / 2, width: dw, height: dh };\n}\n\nfunction render(viji) {\n  const ctx = viji.useContext('2d');\n  const w = viji.width;\n  const h = viji.height;\n\n  ctx.fillStyle = '#111';\n  ctx.fillRect(0, 0, w, h);\n\n  if (usePose.value) viji.video.cv.enablePoseDetection(true);\n  else viji.video.cv.enablePoseDetection(false);\n\n  if (!viji.video.isConnected || !viji.video.currentFrame) {\n    ctx.fillStyle = '#555';\n    ctx.font = `${Math.min(w, h) * 0.04}px sans-serif`;\n    ctx.textAlign = 'center';\n    ctx.fillText('Waiting for video...', w / 2, h / 2);\n    return;\n  }\n\n  const v = videoFit(viji, 'contain');\n  ctx.globalAlpha = 0.4;\n  ctx.drawImage(viji.video.currentFrame, v.x, v.y, v.width, v.height);\n  ctx.globalAlpha = 1.0;\n\n  const pose = viji.video.cv.pose;\n  if (!pose) return;\n\n  ctx.fillStyle = '#ff6b6b';\n  pose.landmarks.forEach(pt => {\n    if (pt.visibility > 0.5) {\n      ctx.beginPath();\n      ctx.arc(v.x + pt.x * v.width, v.y + pt.y * v.height, 4, 0, Math.PI * 2);\n      ctx.fill();\n    }\n  });\n\n  ctx.strokeStyle = '#ff6b6b';\n  ctx.lineWidth = 2;\n  const drawGroup = (group) => {\n    if (group.length < 2) return;\n    ctx.beginPath();\n    ctx.moveTo(v.x + group[0].x * v.width, v.y + group[0].y * v.height);\n    for (let i = 1; i < group.length; i++) {\n      ctx.lineTo(v.x + group[i].x * v.width, v.y + group[i].y * v.height);\n    }\n    ctx.stroke();\n  };\n\n  ctx.strokeStyle = '#ff9ff3';\n  drawGroup(pose.leftArm);\n  ctx.strokeStyle = '#54a0ff';\n  drawGroup(pose.rightArm);\n  ctx.strokeStyle = '#ff9ff3';\n  drawGroup(pose.leftLeg);\n  ctx.strokeStyle = '#54a0ff';\n  drawGroup(pose.rightLeg);\n  ctx.strokeStyle = '#feca57';\n  drawGroup(pose.torso);\n\n  ctx.fillStyle = '#fff';\n  ctx.font = `${Math.min(w, h) * 0.025}px sans-serif`;\n  ctx.textAlign = 'left';\n  ctx.fillText('Confidence: ' + (pose.confidence * 100).toFixed(0) + '%', w * 0.03, h - Math.min(w, h) * 0.03);\n}\n",
+          "sceneCode": "const usePose = viji.toggle(false, { label: 'Pose Detection', category: 'video' });\n\nfunction videoFit(viji, mode = 'cover') {\n  const vw = viji.video.frameWidth, vh = viji.video.frameHeight;\n  const w = viji.width, h = viji.height;\n  if (!vw || !vh) return { x: 0, y: 0, width: 0, height: 0 };\n  const scale = mode === 'cover' ? Math.max(w / vw, h / vh) : Math.min(w / vw, h / vh);\n  const dw = vw * scale, dh = vh * scale;\n  return { x: (w - dw) / 2, y: (h - dh) / 2, width: dw, height: dh };\n}\n\nfunction cvHint(ctx, viji, label) {\n  const s = Math.min(viji.width, viji.height);\n  const t = (Math.sin(viji.time * 3) + 1) / 2;\n  const bandH = s * 0.18;\n  const bandY = (viji.height - bandH) / 2;\n  ctx.fillStyle = `rgba(255, 200, 0, ${0.85 + t * 0.15})`;\n  ctx.fillRect(0, bandY, viji.width, bandH);\n  ctx.fillStyle = '#111';\n  ctx.font = `bold ${s * 0.045}px sans-serif`;\n  ctx.textAlign = 'center';\n  ctx.textBaseline = 'middle';\n  ctx.fillText(`Enable \"${label}\" in parameters`, viji.width / 2, viji.height / 2);\n  ctx.textBaseline = 'alphabetic';\n}\n\nfunction render(viji) {\n  const ctx = viji.useContext('2d');\n  const w = viji.width;\n  const h = viji.height;\n\n  ctx.fillStyle = '#111';\n  ctx.fillRect(0, 0, w, h);\n\n  if (usePose.value) viji.video.cv.enablePoseDetection(true);\n  else viji.video.cv.enablePoseDetection(false);\n\n  if (!viji.video.isConnected || !viji.video.currentFrame) {\n    ctx.fillStyle = '#555';\n    ctx.font = `${Math.min(w, h) * 0.04}px sans-serif`;\n    ctx.textAlign = 'center';\n    ctx.fillText('Waiting for video...', w / 2, h / 2);\n    return;\n  }\n\n  const v = videoFit(viji, 'contain');\n  ctx.globalAlpha = 0.4;\n  ctx.drawImage(viji.video.currentFrame, v.x, v.y, v.width, v.height);\n  ctx.globalAlpha = 1.0;\n\n  if (!usePose.value) {\n    cvHint(ctx, viji, 'Pose Detection');\n    return;\n  }\n\n  const pose = viji.video.cv.pose;\n  if (!pose) return;\n\n  ctx.fillStyle = '#ff6b6b';\n  pose.landmarks.forEach(pt => {\n    if (pt.visibility > 0.5) {\n      ctx.beginPath();\n      ctx.arc(v.x + pt.x * v.width, v.y + pt.y * v.height, 4, 0, Math.PI * 2);\n      ctx.fill();\n    }\n  });\n\n  ctx.strokeStyle = '#ff6b6b';\n  ctx.lineWidth = 2;\n  const drawGroup = (group) => {\n    if (group.length < 2) return;\n    ctx.beginPath();\n    ctx.moveTo(v.x + group[0].x * v.width, v.y + group[0].y * v.height);\n    for (let i = 1; i < group.length; i++) {\n      ctx.lineTo(v.x + group[i].x * v.width, v.y + group[i].y * v.height);\n    }\n    ctx.stroke();\n  };\n\n  ctx.strokeStyle = '#ff9ff3';\n  drawGroup(pose.leftArm);\n  ctx.strokeStyle = '#54a0ff';\n  drawGroup(pose.rightArm);\n  ctx.strokeStyle = '#ff9ff3';\n  drawGroup(pose.leftLeg);\n  ctx.strokeStyle = '#54a0ff';\n  drawGroup(pose.rightLeg);\n  ctx.strokeStyle = '#feca57';\n  drawGroup(pose.torso);\n\n  ctx.fillStyle = '#fff';\n  ctx.font = `${Math.min(w, h) * 0.025}px sans-serif`;\n  ctx.textAlign = 'left';\n  ctx.fillText('Confidence: ' + (pose.confidence * 100).toFixed(0) + '%', w * 0.03, h - Math.min(w, h) * 0.03);\n}\n",
           "sceneFile": "pose-detection-demo.scene.js",
           "capabilities": {
             "video": true
@@ -3448,7 +3448,7 @@ export const docsApi = {
         {
           "type": "live-example",
           "title": "Body Segmentation",
-          "sceneCode": "const useSeg = viji.toggle(false, { label: 'Body Segmentation', category: 'video' });\n\nfunction videoFit(viji, mode = 'cover') {\n  const vw = viji.video.frameWidth, vh = viji.video.frameHeight;\n  const w = viji.width, h = viji.height;\n  if (!vw || !vh) return { x: 0, y: 0, width: 0, height: 0 };\n  const scale = mode === 'cover' ? Math.max(w / vw, h / vh) : Math.min(w / vw, h / vh);\n  const dw = vw * scale, dh = vh * scale;\n  return { x: (w - dw) / 2, y: (h - dh) / 2, width: dw, height: dh };\n}\n\nfunction render(viji) {\n  const ctx = viji.useContext('2d');\n  const w = viji.width;\n  const h = viji.height;\n\n  ctx.fillStyle = '#111';\n  ctx.fillRect(0, 0, w, h);\n\n  if (useSeg.value) viji.video.cv.enableBodySegmentation(true);\n  else viji.video.cv.enableBodySegmentation(false);\n\n  if (!viji.video.isConnected || !viji.video.currentFrame) {\n    ctx.fillStyle = '#555';\n    ctx.font = `${Math.min(w, h) * 0.04}px sans-serif`;\n    ctx.textAlign = 'center';\n    ctx.fillText('Waiting for video...', w / 2, h / 2);\n    return;\n  }\n\n  const v = videoFit(viji, 'contain');\n  const frameToShow = viji.video.cv.analysedFrame ?? viji.video.currentFrame;\n  ctx.drawImage(frameToShow, v.x, v.y, v.width, v.height);\n\n  const seg = viji.video.cv.segmentation;\n  if (!seg) return;\n\n  let personPixels = 0;\n  for (let i = 0; i < seg.mask.length; i++) {\n    if (seg.mask[i] > 0) personPixels++;\n  }\n  const personRatio = personPixels / seg.mask.length;\n\n  if (personRatio > 0.05) {\n    ctx.shadowBlur = 30 * personRatio;\n    ctx.shadowColor = `hsl(${170 + personRatio * 60}, 80%, 60%)`;\n    ctx.strokeStyle = `hsla(${170 + personRatio * 60}, 80%, 60%, 0.6)`;\n    ctx.lineWidth = 4;\n    ctx.strokeRect(v.x, v.y, v.width, v.height);\n    ctx.shadowBlur = 0;\n  }\n\n  const fontSize = Math.min(w, h) * 0.03;\n  ctx.fillStyle = 'rgba(0,0,0,0.5)';\n  ctx.fillRect(0, h - fontSize * 2, w, fontSize * 2);\n  ctx.fillStyle = '#fff';\n  ctx.font = `${fontSize}px sans-serif`;\n  ctx.textAlign = 'center';\n  ctx.fillText(\n    'Person: ' + (personRatio * 100).toFixed(0) + '% | Mask: ' + seg.width + 'x' + seg.height,\n    w / 2, h - fontSize * 0.5\n  );\n}\n",
+          "sceneCode": "const useSeg = viji.toggle(false, { label: 'Body Segmentation', category: 'video' });\n\nfunction videoFit(viji, mode = 'cover') {\n  const vw = viji.video.frameWidth, vh = viji.video.frameHeight;\n  const w = viji.width, h = viji.height;\n  if (!vw || !vh) return { x: 0, y: 0, width: 0, height: 0 };\n  const scale = mode === 'cover' ? Math.max(w / vw, h / vh) : Math.min(w / vw, h / vh);\n  const dw = vw * scale, dh = vh * scale;\n  return { x: (w - dw) / 2, y: (h - dh) / 2, width: dw, height: dh };\n}\n\nfunction cvHint(ctx, viji, label) {\n  const s = Math.min(viji.width, viji.height);\n  const t = (Math.sin(viji.time * 3) + 1) / 2;\n  const bandH = s * 0.18;\n  const bandY = (viji.height - bandH) / 2;\n  ctx.fillStyle = `rgba(255, 200, 0, ${0.85 + t * 0.15})`;\n  ctx.fillRect(0, bandY, viji.width, bandH);\n  ctx.fillStyle = '#111';\n  ctx.font = `bold ${s * 0.045}px sans-serif`;\n  ctx.textAlign = 'center';\n  ctx.textBaseline = 'middle';\n  ctx.fillText(`Enable \"${label}\" in parameters`, viji.width / 2, viji.height / 2);\n  ctx.textBaseline = 'alphabetic';\n}\n\nfunction render(viji) {\n  const ctx = viji.useContext('2d');\n  const w = viji.width;\n  const h = viji.height;\n\n  ctx.fillStyle = '#111';\n  ctx.fillRect(0, 0, w, h);\n\n  if (useSeg.value) viji.video.cv.enableBodySegmentation(true);\n  else viji.video.cv.enableBodySegmentation(false);\n\n  if (!viji.video.isConnected || !viji.video.currentFrame) {\n    ctx.fillStyle = '#555';\n    ctx.font = `${Math.min(w, h) * 0.04}px sans-serif`;\n    ctx.textAlign = 'center';\n    ctx.fillText('Waiting for video...', w / 2, h / 2);\n    return;\n  }\n\n  const v = videoFit(viji, 'contain');\n  const frameToShow = viji.video.cv.analysedFrame ?? viji.video.currentFrame;\n  ctx.drawImage(frameToShow, v.x, v.y, v.width, v.height);\n\n  if (!useSeg.value) {\n    cvHint(ctx, viji, 'Body Segmentation');\n    return;\n  }\n\n  const seg = viji.video.cv.segmentation;\n  if (!seg) return;\n\n  let personPixels = 0;\n  for (let i = 0; i < seg.mask.length; i++) {\n    if (seg.mask[i] > 0) personPixels++;\n  }\n  const personRatio = personPixels / seg.mask.length;\n\n  if (personRatio > 0.05) {\n    ctx.shadowBlur = 30 * personRatio;\n    ctx.shadowColor = `hsl(${170 + personRatio * 60}, 80%, 60%)`;\n    ctx.strokeStyle = `hsla(${170 + personRatio * 60}, 80%, 60%, 0.6)`;\n    ctx.lineWidth = 4;\n    ctx.strokeRect(v.x, v.y, v.width, v.height);\n    ctx.shadowBlur = 0;\n  }\n\n  const fontSize = Math.min(w, h) * 0.03;\n  ctx.fillStyle = 'rgba(0,0,0,0.5)';\n  ctx.fillRect(0, h - fontSize * 2, w, fontSize * 2);\n  ctx.fillStyle = '#fff';\n  ctx.font = `${fontSize}px sans-serif`;\n  ctx.textAlign = 'center';\n  ctx.fillText(\n    'Person: ' + (personRatio * 100).toFixed(0) + '% | Mask: ' + seg.width + 'x' + seg.height,\n    w / 2, h - fontSize * 0.5\n  );\n}\n",
           "sceneFile": "body-segmentation-demo.scene.js",
           "capabilities": {
             "video": true
@@ -5775,7 +5775,7 @@ export const docsApi = {
         {
           "type": "live-example",
           "title": "Video with Face Detection",
-          "sceneCode": "// @renderer p5\n\nconst useFace = viji.toggle(false, { label: 'Face Detection', category: 'video' });\n\nfunction videoFit(viji, mode = 'cover') {\n  const vw = viji.video.frameWidth, vh = viji.video.frameHeight;\n  const w = viji.width, h = viji.height;\n  if (!vw || !vh) return { x: 0, y: 0, width: 0, height: 0 };\n  const scale = mode === 'cover' ? Math.max(w / vw, h / vh) : Math.min(w / vw, h / vh);\n  const dw = vw * scale, dh = vh * scale;\n  return { x: (w - dw) / 2, y: (h - dh) / 2, width: dw, height: dh };\n}\n\nfunction render(viji, p5) {\n  p5.background(17);\n\n  if (!viji.video.isConnected || !viji.video.currentFrame) {\n    p5.fill(100);\n    p5.textAlign(p5.CENTER, p5.CENTER);\n    p5.textSize(Math.min(viji.width, viji.height) * 0.04);\n    p5.text('Waiting for video...', viji.width / 2, viji.height / 2);\n    return;\n  }\n\n  if (useFace.value) viji.video.cv.enableFaceDetection(true);\n  else viji.video.cv.enableFaceDetection(false);\n\n  const v = videoFit(viji, 'contain');\n  p5.tint(255, 150);\n  p5.image(viji.video.currentFrame, v.x, v.y, v.width, v.height);\n  p5.noTint();\n\n  viji.video.cv.faces.forEach(face => {\n    const bx = v.x + face.bounds.x * v.width;\n    const by = v.y + face.bounds.y * v.height;\n    const bw = face.bounds.width * v.width;\n    const bh = face.bounds.height * v.height;\n\n    p5.noFill();\n    p5.stroke(78, 205, 196);\n    p5.strokeWeight(2);\n    p5.rect(bx, by, bw, bh);\n\n    p5.noStroke();\n    p5.fill(78, 205, 196);\n    p5.textSize(Math.min(viji.width, viji.height) * 0.025);\n    p5.textAlign(p5.LEFT, p5.BOTTOM);\n    p5.text('Face #' + face.id + ' (' + (face.confidence * 100).toFixed(0) + '%)', bx, by - 4);\n  });\n}\n",
+          "sceneCode": "// @renderer p5\n\nconst useFace = viji.toggle(false, { label: 'Face Detection', category: 'video' });\n\nfunction videoFit(viji, mode = 'cover') {\n  const vw = viji.video.frameWidth, vh = viji.video.frameHeight;\n  const w = viji.width, h = viji.height;\n  if (!vw || !vh) return { x: 0, y: 0, width: 0, height: 0 };\n  const scale = mode === 'cover' ? Math.max(w / vw, h / vh) : Math.min(w / vw, h / vh);\n  const dw = vw * scale, dh = vh * scale;\n  return { x: (w - dw) / 2, y: (h - dh) / 2, width: dw, height: dh };\n}\n\nfunction cvHint(viji, p5, label) {\n  const s = Math.min(viji.width, viji.height);\n  const t = (p5.sin(viji.time * 3) + 1) / 2;\n  const bandH = s * 0.18;\n  const bandY = (viji.height - bandH) / 2;\n  p5.noStroke();\n  p5.fill(255, 200, 0, (0.85 + t * 0.15) * 255);\n  p5.rect(0, bandY, viji.width, bandH);\n  p5.fill(17);\n  p5.textAlign(p5.CENTER, p5.CENTER);\n  p5.textSize(s * 0.045);\n  p5.textStyle(p5.BOLD);\n  p5.text(`Enable \"${label}\" in parameters`, viji.width / 2, viji.height / 2);\n  p5.textStyle(p5.NORMAL);\n}\n\nfunction render(viji, p5) {\n  p5.background(17);\n\n  if (!viji.video.isConnected || !viji.video.currentFrame) {\n    p5.fill(100);\n    p5.textAlign(p5.CENTER, p5.CENTER);\n    p5.textSize(Math.min(viji.width, viji.height) * 0.04);\n    p5.text('Waiting for video...', viji.width / 2, viji.height / 2);\n    return;\n  }\n\n  if (useFace.value) viji.video.cv.enableFaceDetection(true);\n  else viji.video.cv.enableFaceDetection(false);\n\n  const v = videoFit(viji, 'contain');\n  p5.tint(255, 150);\n  p5.image(viji.video.currentFrame, v.x, v.y, v.width, v.height);\n  p5.noTint();\n\n  if (!useFace.value) {\n    cvHint(viji, p5, 'Face Detection');\n    return;\n  }\n\n  viji.video.cv.faces.forEach(face => {\n    const bx = v.x + face.bounds.x * v.width;\n    const by = v.y + face.bounds.y * v.height;\n    const bw = face.bounds.width * v.width;\n    const bh = face.bounds.height * v.height;\n\n    p5.noFill();\n    p5.stroke(78, 205, 196);\n    p5.strokeWeight(2);\n    p5.rect(bx, by, bw, bh);\n\n    p5.noStroke();\n    p5.fill(78, 205, 196);\n    p5.textSize(Math.min(viji.width, viji.height) * 0.025);\n    p5.textAlign(p5.LEFT, p5.BOTTOM);\n    p5.text('Face #' + face.id + ' (' + (face.confidence * 100).toFixed(0) + '%)', bx, by - 4);\n  });\n}\n",
           "sceneFile": "video-overview.scene.js",
           "capabilities": {
             "video": true
@@ -5933,7 +5933,7 @@ export const docsApi = {
         {
           "type": "live-example",
           "title": "Face Detection",
-          "sceneCode": "// @renderer p5\n\nconst useFace = viji.toggle(false, { label: 'Face Detection', category: 'video' });\n\nfunction videoFit(viji, mode = 'cover') {\n  const vw = viji.video.frameWidth, vh = viji.video.frameHeight;\n  const w = viji.width, h = viji.height;\n  if (!vw || !vh) return { x: 0, y: 0, width: 0, height: 0 };\n  const scale = mode === 'cover' ? Math.max(w / vw, h / vh) : Math.min(w / vw, h / vh);\n  const dw = vw * scale, dh = vh * scale;\n  return { x: (w - dw) / 2, y: (h - dh) / 2, width: dw, height: dh };\n}\n\nfunction render(viji, p5) {\n  p5.background(17);\n\n  if (useFace.value) viji.video.cv.enableFaceDetection(true);\n  else viji.video.cv.enableFaceDetection(false);\n\n  if (!viji.video.isConnected || !viji.video.currentFrame) {\n    p5.fill(100);\n    p5.textAlign(p5.CENTER, p5.CENTER);\n    p5.textSize(Math.min(viji.width, viji.height) * 0.04);\n    p5.text('Waiting for video...', viji.width / 2, viji.height / 2);\n    return;\n  }\n\n  const v = videoFit(viji, 'contain');\n  p5.image(viji.video.currentFrame, v.x, v.y, v.width, v.height);\n\n  viji.video.cv.faces.forEach(face => {\n    const bx = v.x + face.bounds.x * v.width;\n    const by = v.y + face.bounds.y * v.height;\n    const bw = face.bounds.width * v.width;\n    const bh = face.bounds.height * v.height;\n\n    p5.noFill();\n    p5.stroke(78, 205, 196);\n    p5.strokeWeight(2);\n    p5.rect(bx, by, bw, bh);\n\n    p5.noStroke();\n    p5.fill(78, 205, 196);\n    p5.circle(v.x + face.center.x * v.width, v.y + face.center.y * v.height, 8);\n\n    p5.textSize(Math.min(viji.width, viji.height) * 0.025);\n    p5.textAlign(p5.LEFT, p5.BOTTOM);\n    p5.text('Face #' + face.id + ' (' + (face.confidence * 100).toFixed(0) + '%)', bx, by - 4);\n  });\n}\n",
+          "sceneCode": "// @renderer p5\n\nconst useFace = viji.toggle(false, { label: 'Face Detection', category: 'video' });\n\nfunction videoFit(viji, mode = 'cover') {\n  const vw = viji.video.frameWidth, vh = viji.video.frameHeight;\n  const w = viji.width, h = viji.height;\n  if (!vw || !vh) return { x: 0, y: 0, width: 0, height: 0 };\n  const scale = mode === 'cover' ? Math.max(w / vw, h / vh) : Math.min(w / vw, h / vh);\n  const dw = vw * scale, dh = vh * scale;\n  return { x: (w - dw) / 2, y: (h - dh) / 2, width: dw, height: dh };\n}\n\nfunction cvHint(viji, p5, label) {\n  const s = Math.min(viji.width, viji.height);\n  const t = (p5.sin(viji.time * 3) + 1) / 2;\n  const bandH = s * 0.18;\n  const bandY = (viji.height - bandH) / 2;\n  p5.noStroke();\n  p5.fill(255, 200, 0, (0.85 + t * 0.15) * 255);\n  p5.rect(0, bandY, viji.width, bandH);\n  p5.fill(17);\n  p5.textAlign(p5.CENTER, p5.CENTER);\n  p5.textSize(s * 0.045);\n  p5.textStyle(p5.BOLD);\n  p5.text(`Enable \"${label}\" in parameters`, viji.width / 2, viji.height / 2);\n  p5.textStyle(p5.NORMAL);\n}\n\nfunction render(viji, p5) {\n  p5.background(17);\n\n  if (useFace.value) viji.video.cv.enableFaceDetection(true);\n  else viji.video.cv.enableFaceDetection(false);\n\n  if (!viji.video.isConnected || !viji.video.currentFrame) {\n    p5.fill(100);\n    p5.textAlign(p5.CENTER, p5.CENTER);\n    p5.textSize(Math.min(viji.width, viji.height) * 0.04);\n    p5.text('Waiting for video...', viji.width / 2, viji.height / 2);\n    return;\n  }\n\n  const v = videoFit(viji, 'contain');\n  p5.image(viji.video.currentFrame, v.x, v.y, v.width, v.height);\n\n  if (!useFace.value) {\n    cvHint(viji, p5, 'Face Detection');\n    return;\n  }\n\n  viji.video.cv.faces.forEach(face => {\n    const bx = v.x + face.bounds.x * v.width;\n    const by = v.y + face.bounds.y * v.height;\n    const bw = face.bounds.width * v.width;\n    const bh = face.bounds.height * v.height;\n\n    p5.noFill();\n    p5.stroke(78, 205, 196);\n    p5.strokeWeight(2);\n    p5.rect(bx, by, bw, bh);\n\n    p5.noStroke();\n    p5.fill(78, 205, 196);\n    p5.circle(v.x + face.center.x * v.width, v.y + face.center.y * v.height, 8);\n\n    p5.textSize(Math.min(viji.width, viji.height) * 0.025);\n    p5.textAlign(p5.LEFT, p5.BOTTOM);\n    p5.text('Face #' + face.id + ' (' + (face.confidence * 100).toFixed(0) + '%)', bx, by - 4);\n  });\n}\n",
           "sceneFile": "face-detection-demo.scene.js",
           "capabilities": {
             "video": true
@@ -5979,7 +5979,7 @@ export const docsApi = {
         {
           "type": "live-example",
           "title": "Face Mesh",
-          "sceneCode": "// @renderer p5\n\nconst useMesh = viji.toggle(false, { label: 'Face Mesh', category: 'video' });\n\nfunction videoFit(viji, mode = 'cover') {\n  const vw = viji.video.frameWidth, vh = viji.video.frameHeight;\n  const w = viji.width, h = viji.height;\n  if (!vw || !vh) return { x: 0, y: 0, width: 0, height: 0 };\n  const scale = mode === 'cover' ? Math.max(w / vw, h / vh) : Math.min(w / vw, h / vh);\n  const dw = vw * scale, dh = vh * scale;\n  return { x: (w - dw) / 2, y: (h - dh) / 2, width: dw, height: dh };\n}\n\nfunction render(viji, p5) {\n  p5.background(17);\n\n  if (useMesh.value) viji.video.cv.enableFaceMesh(true);\n  else viji.video.cv.enableFaceMesh(false);\n\n  if (!viji.video.isConnected || !viji.video.currentFrame) {\n    p5.fill(100);\n    p5.textAlign(p5.CENTER, p5.CENTER);\n    p5.textSize(Math.min(viji.width, viji.height) * 0.04);\n    p5.text('Waiting for video...', viji.width / 2, viji.height / 2);\n    return;\n  }\n\n  const v = videoFit(viji, 'contain');\n  p5.tint(255, 100);\n  p5.image(viji.video.currentFrame, v.x, v.y, v.width, v.height);\n  p5.noTint();\n\n  viji.video.cv.faces.forEach(face => {\n    if (face.landmarks.length === 0) return;\n\n    p5.noStroke();\n    p5.fill(69, 183, 209, 180);\n    face.landmarks.forEach(pt => {\n      p5.circle(v.x + pt.x * v.width, v.y + pt.y * v.height, 2);\n    });\n\n    const hp = face.headPose;\n    p5.fill(255);\n    p5.textSize(Math.min(viji.width, viji.height) * 0.025);\n    p5.textAlign(p5.LEFT, p5.BOTTOM);\n    p5.text(\n      face.landmarks.length + ' landmarks | Pitch: ' + hp.pitch.toFixed(1) +\n      ' Yaw: ' + hp.yaw.toFixed(1) + ' Roll: ' + hp.roll.toFixed(1),\n      viji.width * 0.03, viji.height - 10\n    );\n  });\n}\n",
+          "sceneCode": "// @renderer p5\n\nconst useMesh = viji.toggle(false, { label: 'Face Mesh', category: 'video' });\n\nfunction videoFit(viji, mode = 'cover') {\n  const vw = viji.video.frameWidth, vh = viji.video.frameHeight;\n  const w = viji.width, h = viji.height;\n  if (!vw || !vh) return { x: 0, y: 0, width: 0, height: 0 };\n  const scale = mode === 'cover' ? Math.max(w / vw, h / vh) : Math.min(w / vw, h / vh);\n  const dw = vw * scale, dh = vh * scale;\n  return { x: (w - dw) / 2, y: (h - dh) / 2, width: dw, height: dh };\n}\n\nfunction cvHint(viji, p5, label) {\n  const s = Math.min(viji.width, viji.height);\n  const t = (p5.sin(viji.time * 3) + 1) / 2;\n  const bandH = s * 0.18;\n  const bandY = (viji.height - bandH) / 2;\n  p5.noStroke();\n  p5.fill(255, 200, 0, (0.85 + t * 0.15) * 255);\n  p5.rect(0, bandY, viji.width, bandH);\n  p5.fill(17);\n  p5.textAlign(p5.CENTER, p5.CENTER);\n  p5.textSize(s * 0.045);\n  p5.textStyle(p5.BOLD);\n  p5.text(`Enable \"${label}\" in parameters`, viji.width / 2, viji.height / 2);\n  p5.textStyle(p5.NORMAL);\n}\n\nfunction render(viji, p5) {\n  p5.background(17);\n\n  if (useMesh.value) viji.video.cv.enableFaceMesh(true);\n  else viji.video.cv.enableFaceMesh(false);\n\n  if (!viji.video.isConnected || !viji.video.currentFrame) {\n    p5.fill(100);\n    p5.textAlign(p5.CENTER, p5.CENTER);\n    p5.textSize(Math.min(viji.width, viji.height) * 0.04);\n    p5.text('Waiting for video...', viji.width / 2, viji.height / 2);\n    return;\n  }\n\n  const v = videoFit(viji, 'contain');\n  p5.tint(255, 100);\n  p5.image(viji.video.currentFrame, v.x, v.y, v.width, v.height);\n  p5.noTint();\n\n  if (!useMesh.value) {\n    cvHint(viji, p5, 'Face Mesh');\n    return;\n  }\n\n  viji.video.cv.faces.forEach(face => {\n    if (face.landmarks.length === 0) return;\n\n    p5.noStroke();\n    p5.fill(69, 183, 209, 180);\n    face.landmarks.forEach(pt => {\n      p5.circle(v.x + pt.x * v.width, v.y + pt.y * v.height, 2);\n    });\n\n    const hp = face.headPose;\n    p5.fill(255);\n    p5.textSize(Math.min(viji.width, viji.height) * 0.025);\n    p5.textAlign(p5.LEFT, p5.BOTTOM);\n    p5.text(\n      face.landmarks.length + ' landmarks | Pitch: ' + hp.pitch.toFixed(1) +\n      ' Yaw: ' + hp.yaw.toFixed(1) + ' Roll: ' + hp.roll.toFixed(1),\n      viji.width * 0.03, viji.height - 10\n    );\n  });\n}\n",
           "sceneFile": "face-mesh-demo.scene.js",
           "capabilities": {
             "video": true
@@ -6030,7 +6030,7 @@ export const docsApi = {
         {
           "type": "live-example",
           "title": "Emotion Detection",
-          "sceneCode": "// @renderer p5\n\nconst useEmotion = viji.toggle(false, { label: 'Emotion Detection', category: 'video' });\n\nfunction videoFit(viji, mode = 'cover') {\n  const vw = viji.video.frameWidth, vh = viji.video.frameHeight;\n  const w = viji.width, h = viji.height;\n  if (!vw || !vh) return { x: 0, y: 0, width: 0, height: 0 };\n  const scale = mode === 'cover' ? Math.max(w / vw, h / vh) : Math.min(w / vw, h / vh);\n  const dw = vw * scale, dh = vh * scale;\n  return { x: (w - dw) / 2, y: (h - dh) / 2, width: dw, height: dh };\n}\n\nfunction render(viji, p5) {\n  p5.background(17);\n\n  if (useEmotion.value) viji.video.cv.enableEmotionDetection(true);\n  else viji.video.cv.enableEmotionDetection(false);\n\n  if (!viji.video.isConnected || !viji.video.currentFrame) {\n    p5.fill(100);\n    p5.textAlign(p5.CENTER, p5.CENTER);\n    p5.textSize(Math.min(viji.width, viji.height) * 0.04);\n    p5.text('Waiting for video...', viji.width / 2, viji.height / 2);\n    return;\n  }\n\n  const v = videoFit(viji, 'contain');\n  p5.tint(255, 100);\n  p5.image(viji.video.currentFrame, v.x, v.y, v.width, v.height);\n  p5.noTint();\n\n  const face = viji.video.cv.faces[0];\n  if (!face) return;\n\n  const expr = face.expressions;\n  const labels = ['neutral', 'happy', 'sad', 'angry', 'surprised', 'disgusted', 'fearful'];\n  const values = [expr.neutral, expr.happy, expr.sad, expr.angry, expr.surprised, expr.disgusted, expr.fearful];\n  const colors = [[136,136,136], [76,175,80], [33,150,243], [244,67,54], [255,152,0], [156,39,176], [96,125,139]];\n\n  const barH = viji.height * 0.04;\n  const barW = viji.width * 0.3;\n  const x = viji.width * 0.65;\n  let y = viji.height * 0.12;\n  const fontSize = barH * 0.7;\n\n  p5.textSize(fontSize);\n  p5.noStroke();\n\n  labels.forEach((label, i) => {\n    p5.fill(170);\n    p5.textAlign(p5.RIGHT, p5.CENTER);\n    p5.text(label, x - 8, y + barH / 2);\n\n    p5.fill(34);\n    p5.rect(x, y, barW, barH);\n    p5.fill(colors[i][0], colors[i][1], colors[i][2]);\n    p5.rect(x, y, barW * values[i], barH);\n\n    p5.fill(220);\n    p5.textAlign(p5.LEFT, p5.CENTER);\n    p5.text((values[i] * 100).toFixed(0) + '%', x + barW + 6, y + barH / 2);\n\n    y += barH * 1.8;\n  });\n}\n",
+          "sceneCode": "// @renderer p5\n\nconst useEmotion = viji.toggle(false, { label: 'Emotion Detection', category: 'video' });\n\nfunction videoFit(viji, mode = 'cover') {\n  const vw = viji.video.frameWidth, vh = viji.video.frameHeight;\n  const w = viji.width, h = viji.height;\n  if (!vw || !vh) return { x: 0, y: 0, width: 0, height: 0 };\n  const scale = mode === 'cover' ? Math.max(w / vw, h / vh) : Math.min(w / vw, h / vh);\n  const dw = vw * scale, dh = vh * scale;\n  return { x: (w - dw) / 2, y: (h - dh) / 2, width: dw, height: dh };\n}\n\nfunction cvHint(viji, p5, label) {\n  const s = Math.min(viji.width, viji.height);\n  const t = (p5.sin(viji.time * 3) + 1) / 2;\n  const bandH = s * 0.18;\n  const bandY = (viji.height - bandH) / 2;\n  p5.noStroke();\n  p5.fill(255, 200, 0, (0.85 + t * 0.15) * 255);\n  p5.rect(0, bandY, viji.width, bandH);\n  p5.fill(17);\n  p5.textAlign(p5.CENTER, p5.CENTER);\n  p5.textSize(s * 0.045);\n  p5.textStyle(p5.BOLD);\n  p5.text(`Enable \"${label}\" in parameters`, viji.width / 2, viji.height / 2);\n  p5.textStyle(p5.NORMAL);\n}\n\nfunction render(viji, p5) {\n  p5.background(17);\n\n  if (useEmotion.value) viji.video.cv.enableEmotionDetection(true);\n  else viji.video.cv.enableEmotionDetection(false);\n\n  if (!viji.video.isConnected || !viji.video.currentFrame) {\n    p5.fill(100);\n    p5.textAlign(p5.CENTER, p5.CENTER);\n    p5.textSize(Math.min(viji.width, viji.height) * 0.04);\n    p5.text('Waiting for video...', viji.width / 2, viji.height / 2);\n    return;\n  }\n\n  const v = videoFit(viji, 'contain');\n  p5.tint(255, 100);\n  p5.image(viji.video.currentFrame, v.x, v.y, v.width, v.height);\n  p5.noTint();\n\n  if (!useEmotion.value) {\n    cvHint(viji, p5, 'Emotion Detection');\n    return;\n  }\n\n  const face = viji.video.cv.faces[0];\n  if (!face) return;\n\n  const expr = face.expressions;\n  const labels = ['neutral', 'happy', 'sad', 'angry', 'surprised', 'disgusted', 'fearful'];\n  const values = [expr.neutral, expr.happy, expr.sad, expr.angry, expr.surprised, expr.disgusted, expr.fearful];\n  const colors = [[136,136,136], [76,175,80], [33,150,243], [244,67,54], [255,152,0], [156,39,176], [96,125,139]];\n\n  const barH = viji.height * 0.04;\n  const barW = viji.width * 0.3;\n  const x = viji.width * 0.65;\n  let y = viji.height * 0.12;\n  const fontSize = barH * 0.7;\n\n  p5.textSize(fontSize);\n  p5.noStroke();\n\n  labels.forEach((label, i) => {\n    p5.fill(170);\n    p5.textAlign(p5.RIGHT, p5.CENTER);\n    p5.text(label, x - 8, y + barH / 2);\n\n    p5.fill(34);\n    p5.rect(x, y, barW, barH);\n    p5.fill(colors[i][0], colors[i][1], colors[i][2]);\n    p5.rect(x, y, barW * values[i], barH);\n\n    p5.fill(220);\n    p5.textAlign(p5.LEFT, p5.CENTER);\n    p5.text((values[i] * 100).toFixed(0) + '%', x + barW + 6, y + barH / 2);\n\n    y += barH * 1.8;\n  });\n}\n",
           "sceneFile": "emotion-detection-demo.scene.js",
           "capabilities": {
             "video": true
@@ -6076,7 +6076,7 @@ export const docsApi = {
         {
           "type": "live-example",
           "title": "Hand Tracking",
-          "sceneCode": "// @renderer p5\n\nconst useHands = viji.toggle(false, { label: 'Hand Tracking', category: 'video' });\n\nfunction videoFit(viji, mode = 'cover') {\n  const vw = viji.video.frameWidth, vh = viji.video.frameHeight;\n  const w = viji.width, h = viji.height;\n  if (!vw || !vh) return { x: 0, y: 0, width: 0, height: 0 };\n  const scale = mode === 'cover' ? Math.max(w / vw, h / vh) : Math.min(w / vw, h / vh);\n  const dw = vw * scale, dh = vh * scale;\n  return { x: (w - dw) / 2, y: (h - dh) / 2, width: dw, height: dh };\n}\n\nfunction render(viji, p5) {\n  p5.background(17);\n\n  if (useHands.value) viji.video.cv.enableHandTracking(true);\n  else viji.video.cv.enableHandTracking(false);\n\n  if (!viji.video.isConnected || !viji.video.currentFrame) {\n    p5.fill(100);\n    p5.textAlign(p5.CENTER, p5.CENTER);\n    p5.textSize(Math.min(viji.width, viji.height) * 0.04);\n    p5.text('Waiting for video...', viji.width / 2, viji.height / 2);\n    return;\n  }\n\n  const v = videoFit(viji, 'contain');\n  p5.tint(255, 100);\n  p5.image(viji.video.currentFrame, v.x, v.y, v.width, v.height);\n  p5.noTint();\n\n  viji.video.cv.hands.forEach(hand => {\n    const col = hand.handedness === 'left' ? [255, 159, 243] : [84, 160, 255];\n\n    p5.noStroke();\n    p5.fill(col[0], col[1], col[2]);\n    hand.landmarks.forEach(pt => {\n      p5.circle(v.x + pt.x * v.width, v.y + pt.y * v.height, 6);\n    });\n\n    p5.noFill();\n    p5.stroke(col[0], col[1], col[2]);\n    p5.strokeWeight(2);\n    p5.circle(v.x + hand.palm.x * v.width, v.y + hand.palm.y * v.height, 16);\n\n    const g = hand.gestures;\n    const gestures = [\n      ['fist', g.fist], ['open', g.openPalm], ['peace', g.peace],\n      ['thumbsUp', g.thumbsUp], ['pointing', g.pointing]\n    ];\n    const top = gestures.reduce((a, b) => b[1] > a[1] ? b : a);\n    if (top[1] > 0.5) {\n      p5.noStroke();\n      p5.fill(255);\n      p5.textSize(Math.min(viji.width, viji.height) * 0.03);\n      p5.textAlign(p5.CENTER, p5.BOTTOM);\n      p5.text(top[0], v.x + hand.palm.x * v.width, v.y + hand.bounds.y * v.height - 6);\n    }\n  });\n}\n",
+          "sceneCode": "// @renderer p5\n\nconst useHands = viji.toggle(false, { label: 'Hand Tracking', category: 'video' });\n\nfunction videoFit(viji, mode = 'cover') {\n  const vw = viji.video.frameWidth, vh = viji.video.frameHeight;\n  const w = viji.width, h = viji.height;\n  if (!vw || !vh) return { x: 0, y: 0, width: 0, height: 0 };\n  const scale = mode === 'cover' ? Math.max(w / vw, h / vh) : Math.min(w / vw, h / vh);\n  const dw = vw * scale, dh = vh * scale;\n  return { x: (w - dw) / 2, y: (h - dh) / 2, width: dw, height: dh };\n}\n\nfunction cvHint(viji, p5, label) {\n  const s = Math.min(viji.width, viji.height);\n  const t = (p5.sin(viji.time * 3) + 1) / 2;\n  const bandH = s * 0.18;\n  const bandY = (viji.height - bandH) / 2;\n  p5.noStroke();\n  p5.fill(255, 200, 0, (0.85 + t * 0.15) * 255);\n  p5.rect(0, bandY, viji.width, bandH);\n  p5.fill(17);\n  p5.textAlign(p5.CENTER, p5.CENTER);\n  p5.textSize(s * 0.045);\n  p5.textStyle(p5.BOLD);\n  p5.text(`Enable \"${label}\" in parameters`, viji.width / 2, viji.height / 2);\n  p5.textStyle(p5.NORMAL);\n}\n\nfunction render(viji, p5) {\n  p5.background(17);\n\n  if (useHands.value) viji.video.cv.enableHandTracking(true);\n  else viji.video.cv.enableHandTracking(false);\n\n  if (!viji.video.isConnected || !viji.video.currentFrame) {\n    p5.fill(100);\n    p5.textAlign(p5.CENTER, p5.CENTER);\n    p5.textSize(Math.min(viji.width, viji.height) * 0.04);\n    p5.text('Waiting for video...', viji.width / 2, viji.height / 2);\n    return;\n  }\n\n  const v = videoFit(viji, 'contain');\n  p5.tint(255, 100);\n  p5.image(viji.video.currentFrame, v.x, v.y, v.width, v.height);\n  p5.noTint();\n\n  if (!useHands.value) {\n    cvHint(viji, p5, 'Hand Tracking');\n    return;\n  }\n\n  viji.video.cv.hands.forEach(hand => {\n    const col = hand.handedness === 'left' ? [255, 159, 243] : [84, 160, 255];\n\n    p5.noStroke();\n    p5.fill(col[0], col[1], col[2]);\n    hand.landmarks.forEach(pt => {\n      p5.circle(v.x + pt.x * v.width, v.y + pt.y * v.height, 6);\n    });\n\n    p5.noFill();\n    p5.stroke(col[0], col[1], col[2]);\n    p5.strokeWeight(2);\n    p5.circle(v.x + hand.palm.x * v.width, v.y + hand.palm.y * v.height, 16);\n\n    const g = hand.gestures;\n    const gestures = [\n      ['fist', g.fist], ['open', g.openPalm], ['peace', g.peace],\n      ['thumbsUp', g.thumbsUp], ['pointing', g.pointing]\n    ];\n    const top = gestures.reduce((a, b) => b[1] > a[1] ? b : a);\n    if (top[1] > 0.5) {\n      p5.noStroke();\n      p5.fill(255);\n      p5.textSize(Math.min(viji.width, viji.height) * 0.03);\n      p5.textAlign(p5.CENTER, p5.BOTTOM);\n      p5.text(top[0], v.x + hand.palm.x * v.width, v.y + hand.bounds.y * v.height - 6);\n    }\n  });\n}\n",
           "sceneFile": "hand-tracking-demo.scene.js",
           "capabilities": {
             "video": true
@@ -6117,7 +6117,7 @@ export const docsApi = {
         {
           "type": "live-example",
           "title": "Pose Detection",
-          "sceneCode": "// @renderer p5\n\nconst usePose = viji.toggle(false, { label: 'Pose Detection', category: 'video' });\n\nfunction videoFit(viji, mode = 'cover') {\n  const vw = viji.video.frameWidth, vh = viji.video.frameHeight;\n  const w = viji.width, h = viji.height;\n  if (!vw || !vh) return { x: 0, y: 0, width: 0, height: 0 };\n  const scale = mode === 'cover' ? Math.max(w / vw, h / vh) : Math.min(w / vw, h / vh);\n  const dw = vw * scale, dh = vh * scale;\n  return { x: (w - dw) / 2, y: (h - dh) / 2, width: dw, height: dh };\n}\n\nfunction render(viji, p5) {\n  p5.background(17);\n\n  if (usePose.value) viji.video.cv.enablePoseDetection(true);\n  else viji.video.cv.enablePoseDetection(false);\n\n  if (!viji.video.isConnected || !viji.video.currentFrame) {\n    p5.fill(100);\n    p5.textAlign(p5.CENTER, p5.CENTER);\n    p5.textSize(Math.min(viji.width, viji.height) * 0.04);\n    p5.text('Waiting for video...', viji.width / 2, viji.height / 2);\n    return;\n  }\n\n  const v = videoFit(viji, 'contain');\n  p5.tint(255, 100);\n  p5.image(viji.video.currentFrame, v.x, v.y, v.width, v.height);\n  p5.noTint();\n\n  const pose = viji.video.cv.pose;\n  if (!pose) return;\n\n  p5.noStroke();\n  p5.fill(255, 107, 107);\n  pose.landmarks.forEach(pt => {\n    if (pt.visibility > 0.5) {\n      p5.circle(v.x + pt.x * v.width, v.y + pt.y * v.height, 8);\n    }\n  });\n\n  p5.strokeWeight(2);\n  p5.noFill();\n  const drawGroup = (group, col) => {\n    if (group.length < 2) return;\n    p5.stroke(col[0], col[1], col[2]);\n    p5.beginShape();\n    group.forEach(pt => p5.vertex(v.x + pt.x * v.width, v.y + pt.y * v.height));\n    p5.endShape();\n  };\n\n  drawGroup(pose.leftArm, [255, 159, 243]);\n  drawGroup(pose.rightArm, [84, 160, 255]);\n  drawGroup(pose.leftLeg, [255, 159, 243]);\n  drawGroup(pose.rightLeg, [84, 160, 255]);\n  drawGroup(pose.torso, [254, 202, 87]);\n\n  p5.noStroke();\n  p5.fill(255);\n  p5.textSize(Math.min(viji.width, viji.height) * 0.025);\n  p5.textAlign(p5.LEFT, p5.BOTTOM);\n  p5.text('Confidence: ' + (pose.confidence * 100).toFixed(0) + '%', viji.width * 0.03, viji.height - 10);\n}\n",
+          "sceneCode": "// @renderer p5\n\nconst usePose = viji.toggle(false, { label: 'Pose Detection', category: 'video' });\n\nfunction videoFit(viji, mode = 'cover') {\n  const vw = viji.video.frameWidth, vh = viji.video.frameHeight;\n  const w = viji.width, h = viji.height;\n  if (!vw || !vh) return { x: 0, y: 0, width: 0, height: 0 };\n  const scale = mode === 'cover' ? Math.max(w / vw, h / vh) : Math.min(w / vw, h / vh);\n  const dw = vw * scale, dh = vh * scale;\n  return { x: (w - dw) / 2, y: (h - dh) / 2, width: dw, height: dh };\n}\n\nfunction cvHint(viji, p5, label) {\n  const s = Math.min(viji.width, viji.height);\n  const t = (p5.sin(viji.time * 3) + 1) / 2;\n  const bandH = s * 0.18;\n  const bandY = (viji.height - bandH) / 2;\n  p5.noStroke();\n  p5.fill(255, 200, 0, (0.85 + t * 0.15) * 255);\n  p5.rect(0, bandY, viji.width, bandH);\n  p5.fill(17);\n  p5.textAlign(p5.CENTER, p5.CENTER);\n  p5.textSize(s * 0.045);\n  p5.textStyle(p5.BOLD);\n  p5.text(`Enable \"${label}\" in parameters`, viji.width / 2, viji.height / 2);\n  p5.textStyle(p5.NORMAL);\n}\n\nfunction render(viji, p5) {\n  p5.background(17);\n\n  if (usePose.value) viji.video.cv.enablePoseDetection(true);\n  else viji.video.cv.enablePoseDetection(false);\n\n  if (!viji.video.isConnected || !viji.video.currentFrame) {\n    p5.fill(100);\n    p5.textAlign(p5.CENTER, p5.CENTER);\n    p5.textSize(Math.min(viji.width, viji.height) * 0.04);\n    p5.text('Waiting for video...', viji.width / 2, viji.height / 2);\n    return;\n  }\n\n  const v = videoFit(viji, 'contain');\n  p5.tint(255, 100);\n  p5.image(viji.video.currentFrame, v.x, v.y, v.width, v.height);\n  p5.noTint();\n\n  if (!usePose.value) {\n    cvHint(viji, p5, 'Pose Detection');\n    return;\n  }\n\n  const pose = viji.video.cv.pose;\n  if (!pose) return;\n\n  p5.noStroke();\n  p5.fill(255, 107, 107);\n  pose.landmarks.forEach(pt => {\n    if (pt.visibility > 0.5) {\n      p5.circle(v.x + pt.x * v.width, v.y + pt.y * v.height, 8);\n    }\n  });\n\n  p5.strokeWeight(2);\n  p5.noFill();\n  const drawGroup = (group, col) => {\n    if (group.length < 2) return;\n    p5.stroke(col[0], col[1], col[2]);\n    p5.beginShape();\n    group.forEach(pt => p5.vertex(v.x + pt.x * v.width, v.y + pt.y * v.height));\n    p5.endShape();\n  };\n\n  drawGroup(pose.leftArm, [255, 159, 243]);\n  drawGroup(pose.rightArm, [84, 160, 255]);\n  drawGroup(pose.leftLeg, [255, 159, 243]);\n  drawGroup(pose.rightLeg, [84, 160, 255]);\n  drawGroup(pose.torso, [254, 202, 87]);\n\n  p5.noStroke();\n  p5.fill(255);\n  p5.textSize(Math.min(viji.width, viji.height) * 0.025);\n  p5.textAlign(p5.LEFT, p5.BOTTOM);\n  p5.text('Confidence: ' + (pose.confidence * 100).toFixed(0) + '%', viji.width * 0.03, viji.height - 10);\n}\n",
           "sceneFile": "pose-detection-demo.scene.js",
           "capabilities": {
             "video": true
@@ -6163,7 +6163,7 @@ export const docsApi = {
         {
           "type": "live-example",
           "title": "Body Segmentation",
-          "sceneCode": "// @renderer p5\n\nconst useSeg = viji.toggle(false, { label: 'Body Segmentation', category: 'video' });\n\nfunction videoFit(viji, mode = 'cover') {\n  const vw = viji.video.frameWidth, vh = viji.video.frameHeight;\n  const w = viji.width, h = viji.height;\n  if (!vw || !vh) return { x: 0, y: 0, width: 0, height: 0 };\n  const scale = mode === 'cover' ? Math.max(w / vw, h / vh) : Math.min(w / vw, h / vh);\n  const dw = vw * scale, dh = vh * scale;\n  return { x: (w - dw) / 2, y: (h - dh) / 2, width: dw, height: dh };\n}\n\nfunction render(viji, p5) {\n  p5.background(17);\n\n  if (useSeg.value) viji.video.cv.enableBodySegmentation(true);\n  else viji.video.cv.enableBodySegmentation(false);\n\n  if (!viji.video.isConnected || !viji.video.currentFrame) {\n    p5.fill(100);\n    p5.textAlign(p5.CENTER, p5.CENTER);\n    p5.textSize(Math.min(viji.width, viji.height) * 0.04);\n    p5.text('Waiting for video...', viji.width / 2, viji.height / 2);\n    return;\n  }\n\n  const v = videoFit(viji, 'contain');\n  const frameToShow = viji.video.cv.analysedFrame ?? viji.video.currentFrame;\n  p5.image(frameToShow, v.x, v.y, v.width, v.height);\n\n  const seg = viji.video.cv.segmentation;\n  if (!seg) return;\n\n  let personPixels = 0;\n  for (let i = 0; i < seg.mask.length; i++) {\n    if (seg.mask[i] > 0) personPixels++;\n  }\n  const personRatio = personPixels / seg.mask.length;\n\n  if (personRatio > 0.05) {\n    p5.noFill();\n    p5.stroke(78, 205, 196, 150);\n    p5.strokeWeight(4);\n    p5.rect(v.x, v.y, v.width, v.height);\n  }\n\n  const fontSize = Math.min(viji.width, viji.height) * 0.03;\n  p5.noStroke();\n  p5.fill(0, 128);\n  p5.rect(0, viji.height - fontSize * 2, viji.width, fontSize * 2);\n  p5.fill(255);\n  p5.textSize(fontSize);\n  p5.textAlign(p5.CENTER, p5.CENTER);\n  p5.text(\n    'Person: ' + (personRatio * 100).toFixed(0) + '% | Mask: ' + seg.width + 'x' + seg.height,\n    viji.width / 2, viji.height - fontSize\n  );\n}\n",
+          "sceneCode": "// @renderer p5\n\nconst useSeg = viji.toggle(false, { label: 'Body Segmentation', category: 'video' });\n\nfunction videoFit(viji, mode = 'cover') {\n  const vw = viji.video.frameWidth, vh = viji.video.frameHeight;\n  const w = viji.width, h = viji.height;\n  if (!vw || !vh) return { x: 0, y: 0, width: 0, height: 0 };\n  const scale = mode === 'cover' ? Math.max(w / vw, h / vh) : Math.min(w / vw, h / vh);\n  const dw = vw * scale, dh = vh * scale;\n  return { x: (w - dw) / 2, y: (h - dh) / 2, width: dw, height: dh };\n}\n\nfunction cvHint(viji, p5, label) {\n  const s = Math.min(viji.width, viji.height);\n  const t = (p5.sin(viji.time * 3) + 1) / 2;\n  const bandH = s * 0.18;\n  const bandY = (viji.height - bandH) / 2;\n  p5.noStroke();\n  p5.fill(255, 200, 0, (0.85 + t * 0.15) * 255);\n  p5.rect(0, bandY, viji.width, bandH);\n  p5.fill(17);\n  p5.textAlign(p5.CENTER, p5.CENTER);\n  p5.textSize(s * 0.045);\n  p5.textStyle(p5.BOLD);\n  p5.text(`Enable \"${label}\" in parameters`, viji.width / 2, viji.height / 2);\n  p5.textStyle(p5.NORMAL);\n}\n\nfunction render(viji, p5) {\n  p5.background(17);\n\n  if (useSeg.value) viji.video.cv.enableBodySegmentation(true);\n  else viji.video.cv.enableBodySegmentation(false);\n\n  if (!viji.video.isConnected || !viji.video.currentFrame) {\n    p5.fill(100);\n    p5.textAlign(p5.CENTER, p5.CENTER);\n    p5.textSize(Math.min(viji.width, viji.height) * 0.04);\n    p5.text('Waiting for video...', viji.width / 2, viji.height / 2);\n    return;\n  }\n\n  const v = videoFit(viji, 'contain');\n  const frameToShow = viji.video.cv.analysedFrame ?? viji.video.currentFrame;\n  p5.image(frameToShow, v.x, v.y, v.width, v.height);\n\n  if (!useSeg.value) {\n    cvHint(viji, p5, 'Body Segmentation');\n    return;\n  }\n\n  const seg = viji.video.cv.segmentation;\n  if (!seg) return;\n\n  let personPixels = 0;\n  for (let i = 0; i < seg.mask.length; i++) {\n    if (seg.mask[i] > 0) personPixels++;\n  }\n  const personRatio = personPixels / seg.mask.length;\n\n  if (personRatio > 0.05) {\n    p5.noFill();\n    p5.stroke(78, 205, 196, 150);\n    p5.strokeWeight(4);\n    p5.rect(v.x, v.y, v.width, v.height);\n  }\n\n  const fontSize = Math.min(viji.width, viji.height) * 0.03;\n  p5.noStroke();\n  p5.fill(0, 128);\n  p5.rect(0, viji.height - fontSize * 2, viji.width, fontSize * 2);\n  p5.fill(255);\n  p5.textSize(fontSize);\n  p5.textAlign(p5.CENTER, p5.CENTER);\n  p5.text(\n    'Person: ' + (personRatio * 100).toFixed(0) + '% | Mask: ' + seg.width + 'x' + seg.height,\n    viji.width / 2, viji.height - fontSize\n  );\n}\n",
           "sceneFile": "body-segmentation-demo.scene.js",
           "capabilities": {
             "video": true

package/dist/{essentia-wasm.web-DE6gem4m.js → essentia-wasm.web-CPrFAj59.js}

@@ -1,4 +1,4 @@
-import { g as getDefaultExportFromCjs } from "./index-B8LJ9m47.js";
+import { g as getDefaultExportFromCjs } from "./index-Bhq4eJe_.js";
 function _mergeNamespaces(n, m) {
   for (var i = 0; i < m.length; i++) {
     const e = m[i];
@@ -5693,4 +5693,4 @@ const essentiaWasm_web$1 = /* @__PURE__ */ _mergeNamespaces({
 export {
   essentiaWasm_web$1 as e
 };
-//# sourceMappingURL=essentia-wasm.web-DE6gem4m.js.map
+//# sourceMappingURL=essentia-wasm.web-CPrFAj59.js.map