@viji-dev/core 0.2.7 → 0.2.8

package/README.md

@@ -183,8 +183,8 @@ console.log('Current frame rate mode:', config.frameRateMode);
 
 ```typescript
 // Frame rate control
-await core.setFullFrameRate();          // Set to 60fps mode
-await core.setHalfFrameRate();          // Set to 30fps mode
+await core.setFrameRate('full');        // Set to 60fps mode
+await core.setFrameRate('half');        // Set to 30fps mode
 
 // Resolution control
 await core.setResolution(0.75);         // Set to 75% of container size
@@ -1018,6 +1018,139 @@ function render(viji) {
 }
 ```
 
+## 🎨 P5.js Support
+
+Viji Core supports **P5.js** as an optional rendering library. P5.js provides familiar creative coding APIs while maintaining all Viji features including audio reactivity, video processing, and parameter management.
+
+### Enabling P5.js Mode
+
+Add a single comment at the top of your scene code:
+
+```javascript
+// @renderer p5
+
+function setup(viji, p5) {
+  p5.colorMode(p5.HSB);
+}
+
+function render(viji, p5) {
+  p5.background(220);
+  p5.fill(255, 0, 0);
+  p5.ellipse(viji.mouse.x, viji.mouse.y, 50, 50);
+}
+```
+
+### What Works
+
+- ✅ All P5.js drawing functions (shapes, colors, transforms, typography)
+- ✅ P5.js math utilities (`noise()`, `random()`, `map()`, `lerp()`)
+- ✅ P5.js vectors (`p5.Vector` class)
+- ✅ WebGL mode (`p5.WEBGL`)
+- ✅ Full Viji integration (audio, video, parameters, interaction)
+
+### What Doesn't Work
+
+- ❌ p5.dom (use Viji parameters instead)
+- ❌ p5.sound (use `viji.audio` instead)
+- ❌ P5.js events (use `viji.mouse`/`keyboard`/`touches` instead)
+- ❌ Direct image loading (use Viji image parameters instead)
+
+### Audio Reactive P5.js Example
+
+```javascript
+// @renderer p5
+
+const audioReactive = viji.toggle(true, {
+  label: 'Audio Reactive',
+  category: 'audio'
+});
+
+const bassReactivity = viji.slider(1.0, {
+  min: 0,
+  max: 3.0,
+  label: 'Bass Reactivity',
+  category: 'audio'
+});
+
+function render(viji, p5) {
+  p5.background(0);
+  
+  if (audioReactive.value && viji.audio.isConnected) {
+    const bass = viji.audio.bands.bass;
+    const volume = viji.audio.volume.rms;
+    
+    const hue = bass * 360 * bassReactivity.value;
+    const size = 100 + volume * 200;
+    
+    p5.colorMode(p5.HSB);
+    p5.fill(hue, 80, 100);
+    p5.ellipse(p5.width / 2, p5.height / 2, size, size);
+  }
+}
+```
+
+### Image Parameters
+
+```javascript
+// @renderer p5
+
+const bgImage = viji.image(null, {
+  label: 'Background Image',
+  group: 'media',
+  accept: 'image/*'
+});
+
+function render(viji, p5) {
+  p5.background(220);
+  
+  if (bgImage.value) {
+    p5.image(bgImage.value, 0, 0, p5.width, p5.height);
+  }
+  
+  // Draw on top of image
+  p5.fill(255, 0, 0, 128);
+  p5.ellipse(viji.mouse.x, viji.mouse.y, 50, 50);
+}
+```
+
+### Getting Renderer Type
+
+```typescript
+const core = new VijiCore({
+  hostContainer: container,
+  sceneCode: sceneCode
+});
+
+await core.initialize();
+
+// Check which renderer is being used (from stats, like FPS/resolution)
+const stats = core.getStats();
+const rendererType = stats.rendererType; // 'native' | 'p5'
+```
+
+### Loading Image Parameters
+
+```typescript
+core.onParametersDefined((groups) => {
+  groups.forEach(group => {
+    Object.entries(group.parameters).forEach(([name, def]) => {
+      if (def.type === 'image') {
+        // Create file picker
+        const input = createFileInput(name, def);
+        input.addEventListener('change', async (e) => {
+          const file = e.target.files[0];
+          if (file) {
+            await core.setParameter(name, file); // Unified API handles images automatically
+          }
+        });
+      }
+    });
+  });
+});
+```
+
+**See `docs/16-p5js-integration.md` for comprehensive documentation including migration guides, troubleshooting, and advanced examples.**
+
 ## 🏗️ Architecture
 
 ### Security Model

package/dist/artist-dts.js

@@ -1 +1 @@
-export const artistDts = "declare namespace VijiCore {\n  declare interface AnalysisConfiguration {\r\n      fftSize?: number;\r\n      smoothing?: number;\r\n      frequencyBands?: FrequencyBand[];\r\n      beatDetection?: boolean;\r\n      onsetDetection?: boolean;\r\n  }\r\n\n  declare interface AudioAPI {\r\n      isConnected: boolean;\r\n      volume: {\r\n          rms: number;\r\n          peak: number;\r\n      };\r\n      beat?: {\r\n          isKick: boolean;\r\n          confidence: number;\r\n      };\r\n      bands: Record<string, number>;\r\n      getFrequencyData: () => Uint8Array;\r\n  }\r\n\n  declare interface CaptureFrameOptions {\r\n      /** MIME type for output, e.g., 'image/png', 'image/jpeg', 'image/webp' */\r\n      type?: string;\r\n      /**\r\n       * Target resolution.\r\n       * - number: scale factor relative to current canvas size (e.g., 0.5 = 50%)\r\n       * - { width, height }: exact output size; if aspect ratio differs from canvas,\r\n       *   the source is center-cropped to match the target aspect ratio before scaling\r\n       */\r\n      resolution?: number | {\r\n          width: number;\r\n          height: number;\r\n      };\r\n  }\r\n\n  declare interface ColorConfig {\r\n      label: string;\r\n      description?: string;\r\n      group?: string;\r\n      category?: ParameterCategory;\r\n  }\r\n\n  declare interface ColorParameter {\r\n      value: string;\r\n      label: string;\r\n      description?: string;\r\n      group: string;\r\n      category: ParameterCategory;\r\n  }\r\n\n  declare interface FaceData {\r\n      bounds: {\r\n          x: number;\r\n          y: number;\r\n          width: number;\r\n          height: number;\r\n      };\r\n      confidence: number;\r\n      landmarks: {\r\n          x: number;\r\n          y: number;\r\n      }[];\r\n      expressions: Record<string, number>;\r\n  }\r\n\n  declare type FrameRateMode = 'full' | 'half';\r\n\n  declare interface FrequencyBand {\r\n      name: string;\r\n      min: number;\r\n      max: number;\r\n  }\r\n\n  declare interface HandData {\r\n      palm: {\r\n          x: number;\r\n          y: number;\r\n      };\r\n      fingers: {\r\n          x: number;\r\n          y: number;\r\n      }[];\r\n      gestures: Record<string, boolean>;\r\n  }\r\n\n  declare interface KeyboardAPI {\r\n      isPressed(key: string): boolean;\r\n      wasPressed(key: string): boolean;\r\n      wasReleased(key: string): boolean;\r\n      activeKeys: Set<string>;\r\n      pressedThisFrame: Set<string>;\r\n      releasedThisFrame: Set<string>;\r\n      lastKeyPressed: string;\r\n      lastKeyReleased: string;\r\n      shift: boolean;\r\n      ctrl: boolean;\r\n      alt: boolean;\r\n      meta: boolean;\r\n  }\r\n\n  declare interface MouseAPI {\r\n      x: number;\r\n      y: number;\r\n      isInCanvas: boolean;\r\n      isPressed: boolean;\r\n      leftButton: boolean;\r\n      rightButton: boolean;\r\n      middleButton: boolean;\r\n      velocity: {\r\n          x: number;\r\n          y: number;\r\n      };\r\n      deltaX: number;\r\n      deltaY: number;\r\n      wheelDelta: number;\r\n      wheelX: number;\r\n      wheelY: number;\r\n      wasPressed: boolean;\r\n      wasReleased: boolean;\r\n      wasMoved: boolean;\r\n  }\r\n\n  declare interface NumberConfig {\r\n      min?: number;\r\n      max?: number;\r\n      step?: number;\r\n      label: string;\r\n      description?: string;\r\n      group?: string;\r\n      category?: ParameterCategory;\r\n  }\r\n\n  declare interface NumberParameter {\r\n      value: number;\r\n      min: number;\r\n      max: number;\r\n      step: number;\r\n      label: string;\r\n      description?: string;\r\n      group: string;\r\n      category: ParameterCategory;\r\n  }\r\n\n  declare type ParameterCategory = 'audio' | 'video' | 'interaction' | 'general';\r\n\n  declare type Resolution = {\r\n      width: number;\r\n      height: number;\r\n  };\r\n\n  declare interface SelectConfig {\r\n      options: string[] | number[];\r\n      label: string;\r\n      description?: string;\r\n      group?: string;\r\n      category?: ParameterCategory;\r\n  }\r\n\n  declare interface SelectParameter {\r\n      value: string | number;\r\n      options: string[] | number[];\r\n      label: string;\r\n      description?: string;\r\n      group: string;\r\n      category: ParameterCategory;\r\n  }\r\n\n  declare interface SliderConfig {\r\n      min?: number;\r\n      max?: number;\r\n      step?: number;\r\n      label: string;\r\n      description?: string;\r\n      group?: string;\r\n      category?: ParameterCategory;\r\n  }\r\n\n  declare interface SliderParameter {\r\n      value: number;\r\n      min: number;\r\n      max: number;\r\n      step: number;\r\n      label: string;\r\n      description?: string;\r\n      group: string;\r\n      category: ParameterCategory;\r\n  }\r\n\n  declare interface TextConfig {\r\n      label: string;\r\n      description?: string;\r\n      group?: string;\r\n      category?: ParameterCategory;\r\n      maxLength?: number;\r\n  }\r\n\n  declare interface TextParameter {\r\n      value: string;\r\n      maxLength?: number;\r\n      label: string;\r\n      description?: string;\r\n      group: string;\r\n      category: ParameterCategory;\r\n  }\r\n\n  declare interface ToggleConfig {\r\n      label: string;\r\n      description?: string;\r\n      group?: string;\r\n      category?: ParameterCategory;\r\n  }\r\n\n  declare interface ToggleParameter {\r\n      value: boolean;\r\n      label: string;\r\n      description?: string;\r\n      group: string;\r\n      category: ParameterCategory;\r\n  }\r\n\n  declare interface TouchAPI {\r\n      points: TouchPoint[];\r\n      count: number;\r\n      started: TouchPoint[];\r\n      moved: TouchPoint[];\r\n      ended: TouchPoint[];\r\n      primary: TouchPoint | null;\r\n      gestures: TouchGestureAPI;\r\n  }\r\n\n  declare interface TouchGestureAPI {\r\n      isPinching: boolean;\r\n      isRotating: boolean;\r\n      isPanning: boolean;\r\n      isTapping: boolean;\r\n      pinchScale: number;\r\n      pinchDelta: number;\r\n      rotationAngle: number;\r\n      rotationDelta: number;\r\n      panDelta: {\r\n          x: number;\r\n          y: number;\r\n      };\r\n      tapCount: number;\r\n      lastTapTime: number;\r\n      tapPosition: {\r\n          x: number;\r\n          y: number;\r\n      } | null;\r\n  }\r\n\n  declare interface TouchPoint {\r\n      id: number;\r\n      x: number;\r\n      y: number;\r\n      pressure: number;\r\n      radius: number;\r\n      radiusX: number;\r\n      radiusY: number;\r\n      rotationAngle: number;\r\n      force: number;\r\n      deltaX: number;\r\n      deltaY: number;\r\n      velocity: {\r\n          x: number;\r\n          y: number;\r\n      };\r\n      isNew: boolean;\r\n      isActive: boolean;\r\n      isEnding: boolean;\r\n  }\r\n\n  declare const VERSION = \"0.2.4\";\r\n\n  declare interface VideoAPI {\r\n      isConnected: boolean;\r\n      currentFrame: OffscreenCanvas | null;\r\n      frameWidth: number;\r\n      frameHeight: number;\r\n      frameRate: number;\r\n      getFrameData: () => ImageData | null;\r\n      faces: FaceData[];\r\n      hands: HandData[];\r\n  }\r\n\n  declare interface VijiAPI {\r\n      canvas: OffscreenCanvas;\r\n      ctx?: OffscreenCanvasRenderingContext2D;\r\n      gl?: WebGL2RenderingContext;\r\n      width: number;\r\n      height: number;\r\n      pixelRatio: number;\r\n      time: number;\r\n      deltaTime: number;\r\n      frameCount: number;\r\n      fps: number;\r\n      audio: AudioAPI;\r\n      video: VideoAPI;\r\n      mouse: MouseAPI;\r\n      keyboard: KeyboardAPI;\r\n      touches: TouchAPI;\r\n      slider: (defaultValue: number, config: SliderConfig) => SliderParameter;\r\n      color: (defaultValue: string, config: ColorConfig) => ColorParameter;\r\n      toggle: (defaultValue: boolean, config: ToggleConfig) => ToggleParameter;\r\n      select: (defaultValue: string | number, config: SelectConfig) => SelectParameter;\r\n      text: (defaultValue: string, config: TextConfig) => TextParameter;\r\n      number: (defaultValue: number, config: NumberConfig) => NumberParameter;\r\n      useContext(type: '2d'): OffscreenCanvasRenderingContext2D;\n      useContext(type: 'webgl'): WebGLRenderingContext | WebGL2RenderingContext;\r\n  }\r\n}\n\ndeclare const viji: VijiCore.VijiAPI;\ndeclare function render(viji: VijiCore.VijiAPI): void;\n";
+export const artistDts = "declare namespace VijiCore {\n  declare interface AnalysisConfiguration {\r\n      fftSize?: number;\r\n      smoothing?: number;\r\n      frequencyBands?: FrequencyBand[];\r\n      beatDetection?: boolean;\r\n      onsetDetection?: boolean;\r\n  }\r\n\n  declare interface AudioAPI {\r\n      isConnected: boolean;\r\n      volume: {\r\n          rms: number;\r\n          peak: number;\r\n      };\r\n      beat?: {\r\n          isKick: boolean;\r\n          confidence: number;\r\n      };\r\n      bands: Record<string, number>;\r\n      getFrequencyData: () => Uint8Array;\r\n  }\r\n\n  declare interface CaptureFrameOptions {\r\n      /** MIME type for output, e.g., 'image/png', 'image/jpeg', 'image/webp' */\r\n      type?: string;\r\n      /**\r\n       * Target resolution.\r\n       * - number: scale factor relative to current canvas size (e.g., 0.5 = 50%)\r\n       * - { width, height }: exact output size; if aspect ratio differs from canvas,\r\n       *   the source is center-cropped to match the target aspect ratio before scaling\r\n       */\r\n      resolution?: number | {\r\n          width: number;\r\n          height: number;\r\n      };\r\n  }\r\n\n  declare interface ColorConfig {\r\n      label: string;\r\n      description?: string;\r\n      group?: string;\r\n      category?: ParameterCategory;\r\n  }\r\n\n  declare interface ColorParameter {\r\n      value: string;\r\n      label: string;\r\n      description?: string;\r\n      group: string;\r\n      category: ParameterCategory;\r\n  }\r\n\n  declare type CVFeature = 'faceDetection' | 'faceMesh' | 'handTracking' | 'poseDetection' | 'bodySegmentation';\r\n\n  declare type CVFrameRateMode = 'full' | 'half' | 'quarter' | 'eighth';\r\n\n  declare interface FaceData {\r\n      id: number;\r\n      bounds: {\r\n          x: number;\r\n          y: number;\r\n          width: number;\r\n          height: number;\r\n      };\r\n      confidence: number;\r\n      landmarks?: {\r\n          x: number;\r\n          y: number;\r\n          z?: number;\r\n      }[];\r\n      expressions: {\r\n          neutral: number;\r\n          happy: number;\r\n          sad: number;\r\n          angry: number;\r\n          surprised: number;\r\n          disgusted: number;\r\n          fearful: number;\r\n      };\r\n      headPose: {\r\n          pitch: number;\r\n          yaw: number;\r\n          roll: number;\r\n      };\r\n  }\r\n\n  declare type FrameRateMode = 'full' | 'half';\r\n\n  declare interface FrequencyBand {\r\n      name: string;\r\n      min: number;\r\n      max: number;\r\n  }\r\n\n  declare interface HandData {\r\n      id: number;\r\n      handedness: 'left' | 'right';\r\n      confidence: number;\r\n      bounds: {\r\n          x: number;\r\n          y: number;\r\n          width: number;\r\n          height: number;\r\n      };\r\n      landmarks: {\r\n          x: number;\r\n          y: number;\r\n          z: number;\r\n      }[];\r\n      palm: {\r\n          x: number;\r\n          y: number;\r\n          z: number;\r\n      };\r\n      fingers: {\r\n          thumb: {\r\n              tip: {\r\n                  x: number;\r\n                  y: number;\r\n                  z: number;\r\n              };\r\n              extended: boolean;\r\n          };\r\n          index: {\r\n              tip: {\r\n                  x: number;\r\n                  y: number;\r\n                  z: number;\r\n              };\r\n              extended: boolean;\r\n          };\r\n          middle: {\r\n              tip: {\r\n                  x: number;\r\n                  y: number;\r\n                  z: number;\r\n              };\r\n              extended: boolean;\r\n          };\r\n          ring: {\r\n              tip: {\r\n                  x: number;\r\n                  y: number;\r\n                  z: number;\r\n              };\r\n              extended: boolean;\r\n          };\r\n          pinky: {\r\n              tip: {\r\n                  x: number;\r\n                  y: number;\r\n                  z: number;\r\n              };\r\n              extended: boolean;\r\n          };\r\n      };\r\n      gestures: {\r\n          fist: number;\r\n          openPalm: number;\r\n          peace: number;\r\n          thumbsUp: number;\r\n          pointing: number;\r\n      };\r\n  }\r\n\n  declare interface ImageConfig {\r\n      label: string;\r\n      description?: string;\r\n      group?: string;\r\n      category?: ParameterCategory;\r\n  }\r\n\n  declare interface ImageParameter {\r\n      value: ImageBitmap | OffscreenCanvas | null;\r\n      label: string;\r\n      description?: string;\r\n      group: string;\r\n      category: ParameterCategory;\r\n  }\r\n\n  declare interface KeyboardAPI {\r\n      isPressed(key: string): boolean;\r\n      wasPressed(key: string): boolean;\r\n      wasReleased(key: string): boolean;\r\n      activeKeys: Set<string>;\r\n      pressedThisFrame: Set<string>;\r\n      releasedThisFrame: Set<string>;\r\n      lastKeyPressed: string;\r\n      lastKeyReleased: string;\r\n      shift: boolean;\r\n      ctrl: boolean;\r\n      alt: boolean;\r\n      meta: boolean;\r\n  }\r\n\n  declare interface MouseAPI {\r\n      x: number;\r\n      y: number;\r\n      isInCanvas: boolean;\r\n      isPressed: boolean;\r\n      leftButton: boolean;\r\n      rightButton: boolean;\r\n      middleButton: boolean;\r\n      velocity: {\r\n          x: number;\r\n          y: number;\r\n      };\r\n      deltaX: number;\r\n      deltaY: number;\r\n      wheelDelta: number;\r\n      wheelX: number;\r\n      wheelY: number;\r\n      wasPressed: boolean;\r\n      wasReleased: boolean;\r\n      wasMoved: boolean;\r\n  }\r\n\n  declare interface NumberConfig {\r\n      min?: number;\r\n      max?: number;\r\n      step?: number;\r\n      label: string;\r\n      description?: string;\r\n      group?: string;\r\n      category?: ParameterCategory;\r\n  }\r\n\n  declare interface NumberParameter {\r\n      value: number;\r\n      min: number;\r\n      max: number;\r\n      step: number;\r\n      label: string;\r\n      description?: string;\r\n      group: string;\r\n      category: ParameterCategory;\r\n  }\r\n\n  declare type ParameterCategory = 'audio' | 'video' | 'interaction' | 'general';\r\n\n  declare interface PoseData {\r\n      confidence: number;\r\n      landmarks: {\r\n          x: number;\r\n          y: number;\r\n          z: number;\r\n          visibility: number;\r\n      }[];\r\n      face: {\r\n          x: number;\r\n          y: number;\r\n      }[];\r\n      torso: {\r\n          x: number;\r\n          y: number;\r\n      }[];\r\n      leftArm: {\r\n          x: number;\r\n          y: number;\r\n      }[];\r\n      rightArm: {\r\n          x: number;\r\n          y: number;\r\n      }[];\r\n      leftLeg: {\r\n          x: number;\r\n          y: number;\r\n      }[];\r\n      rightLeg: {\r\n          x: number;\r\n          y: number;\r\n      }[];\r\n  }\r\n\n  declare type Resolution = {\r\n      width: number;\r\n      height: number;\r\n  };\r\n\n  declare interface SegmentationData {\r\n      mask: Uint8Array;\r\n      width: number;\r\n      height: number;\r\n  }\r\n\n  declare interface SelectConfig {\r\n      options: string[] | number[];\r\n      label: string;\r\n      description?: string;\r\n      group?: string;\r\n      category?: ParameterCategory;\r\n  }\r\n\n  declare interface SelectParameter {\r\n      value: string | number;\r\n      options: string[] | number[];\r\n      label: string;\r\n      description?: string;\r\n      group: string;\r\n      category: ParameterCategory;\r\n  }\r\n\n  declare interface SliderConfig {\r\n      min?: number;\r\n      max?: number;\r\n      step?: number;\r\n      label: string;\r\n      description?: string;\r\n      group?: string;\r\n      category?: ParameterCategory;\r\n  }\r\n\n  declare interface SliderParameter {\r\n      value: number;\r\n      min: number;\r\n      max: number;\r\n      step: number;\r\n      label: string;\r\n      description?: string;\r\n      group: string;\r\n      category: ParameterCategory;\r\n  }\r\n\n  declare interface TextConfig {\r\n      label: string;\r\n      description?: string;\r\n      group?: string;\r\n      category?: ParameterCategory;\r\n      maxLength?: number;\r\n  }\r\n\n  declare interface TextParameter {\r\n      value: string;\r\n      maxLength?: number;\r\n      label: string;\r\n      description?: string;\r\n      group: string;\r\n      category: ParameterCategory;\r\n  }\r\n\n  declare interface ToggleConfig {\r\n      label: string;\r\n      description?: string;\r\n      group?: string;\r\n      category?: ParameterCategory;\r\n  }\r\n\n  declare interface ToggleParameter {\r\n      value: boolean;\r\n      label: string;\r\n      description?: string;\r\n      group: string;\r\n      category: ParameterCategory;\r\n  }\r\n\n  declare interface TouchAPI {\r\n      points: TouchPoint[];\r\n      count: number;\r\n      started: TouchPoint[];\r\n      moved: TouchPoint[];\r\n      ended: TouchPoint[];\r\n      primary: TouchPoint | null;\r\n      gestures: TouchGestureAPI;\r\n  }\r\n\n  declare interface TouchGestureAPI {\r\n      isPinching: boolean;\r\n      isRotating: boolean;\r\n      isPanning: boolean;\r\n      isTapping: boolean;\r\n      pinchScale: number;\r\n      pinchDelta: number;\r\n      rotationAngle: number;\r\n      rotationDelta: number;\r\n      panDelta: {\r\n          x: number;\r\n          y: number;\r\n      };\r\n      tapCount: number;\r\n      lastTapTime: number;\r\n      tapPosition: {\r\n          x: number;\r\n          y: number;\r\n      } | null;\r\n  }\r\n\n  declare interface TouchPoint {\r\n      id: number;\r\n      x: number;\r\n      y: number;\r\n      pressure: number;\r\n      radius: number;\r\n      radiusX: number;\r\n      radiusY: number;\r\n      rotationAngle: number;\r\n      force: number;\r\n      deltaX: number;\r\n      deltaY: number;\r\n      velocity: {\r\n          x: number;\r\n          y: number;\r\n      };\r\n      isNew: boolean;\r\n      isActive: boolean;\r\n      isEnding: boolean;\r\n  }\r\n\n  declare const VERSION = \"0.2.7\";\r\n\n  declare interface VideoAPI {\r\n      isConnected: boolean;\r\n      currentFrame: OffscreenCanvas | null;\r\n      frameWidth: number;\r\n      frameHeight: number;\r\n      frameRate: number;\r\n      getFrameData: () => ImageData | null;\r\n      faces: FaceData[];\r\n      hands: HandData[];\r\n      pose: PoseData | null;\r\n      segmentation: SegmentationData | null;\r\n      cv: {\r\n          enableFaceDetection(enabled: boolean): Promise<void>;\r\n          enableFaceMesh(enabled: boolean): Promise<void>;\r\n          enableHandTracking(enabled: boolean): Promise<void>;\r\n          enablePoseDetection(enabled: boolean): Promise<void>;\r\n          enableBodySegmentation(enabled: boolean): Promise<void>;\r\n          getActiveFeatures(): CVFeature[];\r\n          isProcessing(): boolean;\r\n      };\r\n  }\r\n\n  declare interface VijiAPI {\r\n      canvas: OffscreenCanvas;\r\n      ctx?: OffscreenCanvasRenderingContext2D;\r\n      gl?: WebGL2RenderingContext;\r\n      width: number;\r\n      height: number;\r\n      pixelRatio: number;\r\n      time: number;\r\n      deltaTime: number;\r\n      frameCount: number;\r\n      fps: number;\r\n      audio: AudioAPI;\r\n      video: VideoAPI;\r\n      mouse: MouseAPI;\r\n      keyboard: KeyboardAPI;\r\n      touches: TouchAPI;\r\n      slider: (defaultValue: number, config: SliderConfig) => SliderParameter;\r\n      color: (defaultValue: string, config: ColorConfig) => ColorParameter;\r\n      toggle: (defaultValue: boolean, config: ToggleConfig) => ToggleParameter;\r\n      select: (defaultValue: string | number, config: SelectConfig) => SelectParameter;\r\n      text: (defaultValue: string, config: TextConfig) => TextParameter;\r\n      number: (defaultValue: number, config: NumberConfig) => NumberParameter;\r\n      image: (defaultValue: null, config: ImageConfig) => ImageParameter;\r\n      useContext(type: '2d'): OffscreenCanvasRenderingContext2D;\n      useContext(type: 'webgl'): WebGLRenderingContext | WebGL2RenderingContext;\r\n  }\r\n}\n\ndeclare const viji: VijiCore.VijiAPI;\ndeclare function render(viji: VijiCore.VijiAPI): void;\n";

package/dist/artist-global.d.ts

@@ -51,7 +51,12 @@ declare namespace VijiCore {
       category: ParameterCategory;
   }
 
+  declare type CVFeature = 'faceDetection' | 'faceMesh' | 'handTracking' | 'poseDetection' | 'bodySegmentation';
+
+  declare type CVFrameRateMode = 'full' | 'half' | 'quarter' | 'eighth';
+
   declare interface FaceData {
+      id: number;
       bounds: {
           x: number;
           y: number;
@@ -59,11 +64,25 @@ declare namespace VijiCore {
           height: number;
       };
       confidence: number;
-      landmarks: {
+      landmarks?: {
           x: number;
           y: number;
+          z?: number;
       }[];
-      expressions: Record<string, number>;
+      expressions: {
+          neutral: number;
+          happy: number;
+          sad: number;
+          angry: number;
+          surprised: number;
+          disgusted: number;
+          fearful: number;
+      };
+      headPose: {
+          pitch: number;
+          yaw: number;
+          roll: number;
+      };
   }
 
   declare type FrameRateMode = 'full' | 'half';
@@ -75,15 +94,89 @@ declare namespace VijiCore {
   }
 
   declare interface HandData {
-      palm: {
+      id: number;
+      handedness: 'left' | 'right';
+      confidence: number;
+      bounds: {
           x: number;
           y: number;
+          width: number;
+          height: number;
       };
-      fingers: {
+      landmarks: {
           x: number;
           y: number;
+          z: number;
       }[];
-      gestures: Record<string, boolean>;
+      palm: {
+          x: number;
+          y: number;
+          z: number;
+      };
+      fingers: {
+          thumb: {
+              tip: {
+                  x: number;
+                  y: number;
+                  z: number;
+              };
+              extended: boolean;
+          };
+          index: {
+              tip: {
+                  x: number;
+                  y: number;
+                  z: number;
+              };
+              extended: boolean;
+          };
+          middle: {
+              tip: {
+                  x: number;
+                  y: number;
+                  z: number;
+              };
+              extended: boolean;
+          };
+          ring: {
+              tip: {
+                  x: number;
+                  y: number;
+                  z: number;
+              };
+              extended: boolean;
+          };
+          pinky: {
+              tip: {
+                  x: number;
+                  y: number;
+                  z: number;
+              };
+              extended: boolean;
+          };
+      };
+      gestures: {
+          fist: number;
+          openPalm: number;
+          peace: number;
+          thumbsUp: number;
+          pointing: number;
+      };
+  }
+
+  declare interface ImageConfig {
+      label: string;
+      description?: string;
+      group?: string;
+      category?: ParameterCategory;
+  }
+
+  declare interface ImageParameter {
+      value: ImageBitmap | OffscreenCanvas | null;
+      label: string;
+      description?: string;
+      group: string;
+      category: ParameterCategory;
   }
 
   declare interface KeyboardAPI {
@@ -146,11 +239,51 @@ declare namespace VijiCore {
 
   declare type ParameterCategory = 'audio' | 'video' | 'interaction' | 'general';
 
+  declare interface PoseData {
+      confidence: number;
+      landmarks: {
+          x: number;
+          y: number;
+          z: number;
+          visibility: number;
+      }[];
+      face: {
+          x: number;
+          y: number;
+      }[];
+      torso: {
+          x: number;
+          y: number;
+      }[];
+      leftArm: {
+          x: number;
+          y: number;
+      }[];
+      rightArm: {
+          x: number;
+          y: number;
+      }[];
+      leftLeg: {
+          x: number;
+          y: number;
+      }[];
+      rightLeg: {
+          x: number;
+          y: number;
+      }[];
+  }
+
   declare type Resolution = {
       width: number;
       height: number;
   };
 
+  declare interface SegmentationData {
+      mask: Uint8Array;
+      width: number;
+      height: number;
+  }
+
   declare interface SelectConfig {
       options: string[] | number[];
       label: string;
@@ -273,7 +406,7 @@ declare namespace VijiCore {
       isEnding: boolean;
   }
 
-  declare const VERSION = "0.2.4";
+  declare const VERSION = "0.2.7";
 
   declare interface VideoAPI {
       isConnected: boolean;
@@ -284,6 +417,17 @@ declare namespace VijiCore {
       getFrameData: () => ImageData | null;
       faces: FaceData[];
       hands: HandData[];
+      pose: PoseData | null;
+      segmentation: SegmentationData | null;
+      cv: {
+          enableFaceDetection(enabled: boolean): Promise<void>;
+          enableFaceMesh(enabled: boolean): Promise<void>;
+          enableHandTracking(enabled: boolean): Promise<void>;
+          enablePoseDetection(enabled: boolean): Promise<void>;
+          enableBodySegmentation(enabled: boolean): Promise<void>;
+          getActiveFeatures(): CVFeature[];
+          isProcessing(): boolean;
+      };
   }
 
   declare interface VijiAPI {
@@ -308,6 +452,7 @@ declare namespace VijiCore {
       select: (defaultValue: string | number, config: SelectConfig) => SelectParameter;
       text: (defaultValue: string, config: TextConfig) => TextParameter;
       number: (defaultValue: number, config: NumberConfig) => NumberParameter;
+      image: (defaultValue: null, config: ImageConfig) => ImageParameter;
       useContext(type: '2d'): OffscreenCanvasRenderingContext2D;
       useContext(type: 'webgl'): WebGLRenderingContext | WebGL2RenderingContext;
   }

package/dist/artist-js-ambient.d.ts

@@ -69,6 +69,15 @@
  * @property {ParameterCategory} [category] - category property
  */
 
+/**
+ * Configuration for image parameters
+ * @typedef {Object} ImageConfig
+ * @property {string} label - label property
+ * @property {string} [description] - description property
+ * @property {string} [group] - group property
+ * @property {ParameterCategory} [category] - category property
+ */
+
 /**
  * Parameter object for slider parameters
  * @typedef {Object} SliderParameter
@@ -137,6 +146,16 @@
  * @property {ParameterCategory} category - category property
  */
 
+/**
+ * Parameter object for image parameters
+ * @typedef {Object} ImageParameter
+ * @property {ImageBitmap | OffscreenCanvas |null} value - value property
+ * @property {string} label - label property
+ * @property {string} [description] - description property
+ * @property {string} group - group property
+ * @property {ParameterCategory} category - category property
+ */
+
 /**
  * Audio analysis API - provides real-time audio data and frequency analysis
  * @typedef {Object} AudioAPI
@@ -157,6 +176,9 @@
  * @property {() => ImageData |null} getFrameData - getFrameData property
  * @property {FaceData[]} faces - faces property
  * @property {HandData[]} hands - hands property
+ * @property {PoseData |null} pose - pose property
+ * @property {SegmentationData |null} segmentation - segmentation property
+ * @property {{} cv - cv property
  */
 
 /**
@@ -224,6 +246,50 @@
  * @property {(defaultValue: string | number, config: SelectConfig) => SelectParameter} select - select property
  * @property {(defaultValue: string, config: TextConfig) => TextParameter} text - text property
  * @property {(defaultValue: number, config: NumberConfig) => NumberParameter} number - number property
+ * @property {(defaultValue: null, config: ImageConfig) => ImageParameter} image - image property
+ */
+
+/**
+ * FaceData interface
+ * @typedef {Object} FaceData
+ * @property {number} id - id property
+ * @property {{} bounds - bounds property
+ * @property {number} x - x property
+ * @property {number} y - y property
+ * @property {number} width - width property
+ * @property {number} height - height property
+ */
+
+/**
+ * HandData interface
+ * @typedef {Object} HandData
+ * @property {number} id - id property
+ * @property {'left' | 'right'} handedness - handedness property
+ * @property {number} confidence - confidence property
+ * @property {{} bounds - bounds property
+ * @property {number} x - x property
+ * @property {number} y - y property
+ * @property {number} width - width property
+ * @property {number} height - height property
+ */
+
+/**
+ * PoseData interface
+ * @typedef {Object} PoseData
+ * @property {number} confidence - confidence property
+ * @property {{} landmarks - landmarks property
+ * @property {number} x - x property
+ * @property {number} y - y property
+ * @property {number} z - z property
+ * @property {number} visibility - visibility property
+ */
+
+/**
+ * SegmentationData interface
+ * @typedef {Object} SegmentationData
+ * @property {Uint8Array} mask - mask property
+ * @property {number} width - width property
+ * @property {number} height - height property
  */
 
 /**

package/dist/artist-jsdoc.d.ts

@@ -65,6 +65,15 @@
  * @property {ParameterCategory} [category] - category property
  */
 
+/**
+ * Configuration for image parameters
+ * @typedef {Object} ImageConfig
+ * @property {string} label - label property
+ * @property {string} [description] - description property
+ * @property {string} [group] - group property
+ * @property {ParameterCategory} [category] - category property
+ */
+
 /**
  * Parameter object for slider parameters
  * @typedef {Object} SliderParameter
@@ -133,6 +142,16 @@
  * @property {ParameterCategory} category - category property
  */
 
+/**
+ * Parameter object for image parameters
+ * @typedef {Object} ImageParameter
+ * @property {ImageBitmap | OffscreenCanvas |null} value - value property
+ * @property {string} label - label property
+ * @property {string} [description] - description property
+ * @property {string} group - group property
+ * @property {ParameterCategory} category - category property
+ */
+
 /**
  * Audio analysis API - provides real-time audio data and frequency analysis
  * @typedef {Object} AudioAPI
@@ -153,6 +172,9 @@
  * @property {() => ImageData |null} getFrameData - getFrameData property
  * @property {FaceData[]} faces - faces property
  * @property {HandData[]} hands - hands property
+ * @property {PoseData |null} pose - pose property
+ * @property {SegmentationData |null} segmentation - segmentation property
+ * @property {{} cv - cv property
  */
 
 /**
@@ -220,6 +242,50 @@
  * @property {(defaultValue: string | number, config: SelectConfig) => SelectParameter} select - select property
  * @property {(defaultValue: string, config: TextConfig) => TextParameter} text - text property
  * @property {(defaultValue: number, config: NumberConfig) => NumberParameter} number - number property
+ * @property {(defaultValue: null, config: ImageConfig) => ImageParameter} image - image property
+ */
+
+/**
+ * FaceData interface
+ * @typedef {Object} FaceData
+ * @property {number} id - id property
+ * @property {{} bounds - bounds property
+ * @property {number} x - x property
+ * @property {number} y - y property
+ * @property {number} width - width property
+ * @property {number} height - height property
+ */
+
+/**
+ * HandData interface
+ * @typedef {Object} HandData
+ * @property {number} id - id property
+ * @property {'left' | 'right'} handedness - handedness property
+ * @property {number} confidence - confidence property
+ * @property {{} bounds - bounds property
+ * @property {number} x - x property
+ * @property {number} y - y property
+ * @property {number} width - width property
+ * @property {number} height - height property
+ */
+
+/**
+ * PoseData interface
+ * @typedef {Object} PoseData
+ * @property {number} confidence - confidence property
+ * @property {{} landmarks - landmarks property
+ * @property {number} x - x property
+ * @property {number} y - y property
+ * @property {number} z - z property
+ * @property {number} visibility - visibility property
+ */
+
+/**
+ * SegmentationData interface
+ * @typedef {Object} SegmentationData
+ * @property {Uint8Array} mask - mask property
+ * @property {number} width - width property
+ * @property {number} height - height property
  */
 
 /**