fix(examples): migrate all examples to TypeScript and fix formatting/linting

Summary:
Migrate remaining JavaScript examples (audio, locomotion, grab,
depth-occlusion, physics, scene-understanding) to TypeScript. Replace
absolute /ui/ config paths with relative ./ui/ for deployment-agnostic
builds. Migrate audio and locomotion from metaspatial/GLXF scene
composition to inline GLTF-based setup. Apply formatting and linting
fixes across the codebase.

Reviewed By: zjm-meta

Differential Revision: D95451493

fbshipit-source-id: f239d40f5706cc9078f3e8feabd256c343ba526c

Author: felixtrz

.claude/agents/iwsdk-code-reviewer.md

@@ -12,6 +12,7 @@ You are a senior code reviewer for the Immersive Web SDK (IWSDK), a WebXR framew
 When invoked, perform these steps:
 
 1. **Run automated checks first:**
+
    ```bash
    cd /Users/fe1ix/Projects/webxr-dev-platform/immersive-web-sdk
    pnpm run format:check 2>&1 | head -50
@@ -36,6 +37,7 @@ When invoked, perform these steps:
 Hot paths include `update()` methods, render loops, and any code called every frame.
 
 **Anti-pattern (allocation every frame):**
+
 ```typescript
 update(delta: number) {
   const tempVec = new Vector3();  // BAD: allocates every frame
@@ -45,6 +47,7 @@ update(delta: number) {
 ```
 
 **Correct pattern (scratch variables at module scope):**
+
 ```typescript
 // At module level - allocated once
 const tempVec = new Vector3();
@@ -56,6 +59,7 @@ update(delta: number) {
 ```
 
 **What to look for:**
+
 - `new Vector3()`, `new Quaternion()`, `new Matrix3()`, `new Matrix4()`, `new Euler()` inside functions
 - Array allocations like `[]` or `new Array()` in update loops
 - Object literals `{}` created every frame
@@ -67,6 +71,7 @@ update(delta: number) {
 Prefer signals and query subscriptions over checking state every frame.
 
 **Anti-pattern (polling in update loop):**
+
 ```typescript
 update() {
   this.queries.items.entities.forEach(entity => {
@@ -78,6 +83,7 @@ update() {
 ```
 
 **Correct pattern (reactive subscription):**
+
 ```typescript
 init() {
   this.queries.items.subscribe('qualify', (entity) => {
@@ -87,6 +93,7 @@ init() {
 ```
 
 **What to look for:**
+
 - Checking component presence in `update()` for one-time operations
 - Maintaining manual lists of entities instead of using queries
 - Not using `subscribe('qualify'/'disqualify')` for entity lifecycle events
@@ -95,6 +102,7 @@ init() {
 ### 3. ECS Systems: Keep Stateless Where Possible
 
 **Anti-pattern (storing entity arrays in system):**
+
 ```typescript
 class MySystem extends createSystem({...}) {
   private activeEntities: Entity[] = [];  // BAD: manual tracking
@@ -106,6 +114,7 @@ class MySystem extends createSystem({...}) {
 ```
 
 **Correct pattern (use queries):**
+
 ```typescript
 class MySystem extends createSystem({
   active: { required: [ActiveTag, Transform] }  // GOOD: query handles tracking
@@ -117,6 +126,7 @@ class MySystem extends createSystem({
 ```
 
 **Acceptable state in systems:**
+
 - Scratch variables for calculations (should be module-level or class properties)
 - WeakMaps for caching data keyed by objects
 - Configuration signals
@@ -127,6 +137,7 @@ class MySystem extends createSystem({
 All Three.js resources must be disposed to prevent memory leaks.
 
 **What to dispose:**
+
 ```typescript
 geometry.dispose();
 material.dispose();
@@ -135,6 +146,7 @@ renderTarget.dispose();
 ```
 
 **Pattern for systems:**
+
 ```typescript
 init() {
   this.cleanupFuncs.push(() => {
@@ -147,6 +159,7 @@ init() {
 ### 5. Copyright Header
 
 All source files in `packages/` must have:
+
 ```typescript
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
@@ -159,6 +172,7 @@ All source files in `packages/` must have:
 ### 6. Import Ordering
 
 ESLint enforces this order (auto-fixable with `pnpm format`):
+
 1. Node.js built-in modules
 2. External packages (three, @preact/signals-core, etc.)
 3. Internal @iwsdk packages
@@ -169,6 +183,7 @@ ESLint enforces this order (auto-fixable with `pnpm format`):
 ### 7. Control Statement Braces
 
 All control statements must have braces:
+
 ```typescript
 // BAD
 if (condition) doSomething();
@@ -182,9 +197,10 @@ if (condition) {
 ### 8. Component Definitions
 
 Components should follow this pattern:
+
 ```typescript
 export const MyComponent = createComponent(
-  'MyComponent',  // Name matches export
+  'MyComponent', // Name matches export
   {
     /** JSDoc for each property */
     propertyName: { type: Types.Float32, default: 0 },
@@ -196,6 +212,7 @@ export const MyComponent = createComponent(
 ### 9. System Definitions
 
 Systems should follow this pattern:
+
 ```typescript
 /**
  * JSDoc description with @category, @example, @see tags
@@ -226,6 +243,7 @@ export class MySystem extends createSystem(
 ### 10. TypeScript Strict Mode
 
 The project uses strict TypeScript. Watch for:
+
 - Implicit `any` types
 - Unchecked null/undefined access
 - Unused variables (prefix with `_` if intentionally unused)
@@ -239,19 +257,24 @@ The project uses strict TypeScript. Watch for:
 ## Code Review: [files reviewed]
 
 ### Lint & Format Results
+
 [Output from format:check and lint commands]
 
 ### Critical Issues
+
 - **[filename:line]** Issue description
   - Current: `code snippet`
   - Suggested: `fixed code snippet`
 
 ### Warnings
+
 - **[filename:line]** Issue description
 
 ### Suggestions
+
 - **[filename:line]** Improvement suggestion
 
 ### Summary
+
 [Brief summary of overall code quality and key recommendations]
 ```

.claude/agents/iwsdk-project-code-reviewer.md

@@ -42,20 +42,21 @@ Check `World.create()` for feature misconfiguration:
 // ❌ CRITICAL BUG - Locomotion without collision geometry
 World.create(container, {
   features: {
-    locomotion: true,  // Player will fall through the world!
-  }
+    locomotion: true, // Player will fall through the world!
+  },
 });
 
 // ✅ CORRECT - Locomotion with proper environment
 World.create(container, {
   features: {
     locomotion: true,
-    physics: true,  // Or scene has LocomotionEnvironment
-  }
+    physics: true, // Or scene has LocomotionEnvironment
+  },
 });
 ```
 
 **What to check:**
+
 - If `locomotion: true`, verify scene has `LocomotionEnvironment` component OR physics collision
 - If `physics: true`, verify entities have `PhysicsBody` + `PhysicsShape` components
 - If `grabbing: true`, verify entities have Grabbable components
@@ -114,6 +115,7 @@ update() {
 ```
 
 **What to look for in update():**
+
 - `new Vector3()`, `new Quaternion()`, `new Matrix4()`, `new Euler()`
 - Array literals `[]` or object literals `{}`
 - `.clone()` calls
@@ -191,14 +193,14 @@ Use proper types, avoid `Types.Object`.
 ```typescript
 // ❌ BAD - Using Object type
 const MyComponent = createComponent('MyComponent', {
-  data: { type: Types.Object, default: {} }  // Not optimized
+  data: { type: Types.Object, default: {} }, // Not optimized
 });
 
 // ✅ GOOD - Use specific types
 const MyComponent = createComponent('MyComponent', {
   speed: { type: Types.Float32, default: 1.0 },
   position: { type: Types.Vec3, default: [0, 0, 0] },
-  color: { type: Types.Color, default: [1, 1, 1, 1] }  // RGBA
+  color: { type: Types.Color, default: [1, 1, 1, 1] }, // RGBA
 });
 ```
 
@@ -209,7 +211,7 @@ These are separate components with different purposes.
 ```typescript
 // PhysicsBody = motion properties
 entity.addComponent(PhysicsBody, {
-  state: PhysicsState.Dynamic,  // or Static, Kinematic
+  state: PhysicsState.Dynamic, // or Static, Kinematic
   linearDamping: 0.5,
   gravityFactor: 1.0,
 });
@@ -218,7 +220,7 @@ entity.addComponent(PhysicsBody, {
 entity.addComponent(PhysicsShape, {
   shape: PhysicsShapeType.Box,
   density: 1.0,
-  restitution: 0.5,  // Bounciness
+  restitution: 0.5, // Bounciness
   friction: 0.3,
 });
 ```
@@ -241,10 +243,10 @@ Check PlaybackMode usage.
 
 ```typescript
 // Available PlaybackMode values:
-PlaybackMode.Restart      // Stop current, restart
-PlaybackMode.Overlap      // Play new instance
-PlaybackMode.Ignore       // Ignore if playing
-PlaybackMode.FadeRestart  // Fade out, start new
+PlaybackMode.Restart; // Stop current, restart
+PlaybackMode.Overlap; // Play new instance
+PlaybackMode.Ignore; // Ignore if playing
+PlaybackMode.FadeRestart; // Fade out, start new
 ```
 
 ### 11. Three.js Import Check (CRITICAL)
@@ -261,6 +263,7 @@ import { Vector3, Mesh, MeshStandardMaterial } from '@iwsdk/core';
 ```
 
 **Exception:** GLTF loader types can come from three/addons:
+
 ```typescript
 import type { GLTF } from 'three/addons/loaders/GLTFLoader.js';
 ```
@@ -420,27 +423,33 @@ Only report issues you're confident about:
 ## IWSDK Project Code Review
 
 ### Project Overview
+
 - Entry point: [file]
 - Systems: [list]
 - Components: [list]
 - Features enabled: [list from World.create]
 
 ### Critical Issues
+
 - **[filename:line]** Issue description
   - Problem: `current code`
   - Fix: `suggested fix`
 
 ### Warnings
+
 - **[filename:line]** Issue description
 
 ### Suggestions
+
 - **[filename:line]** Improvement suggestion
 
 ### Feature Configuration Analysis
+
 - locomotion: [enabled/disabled] - [assessment]
 - physics: [enabled/disabled] - [assessment]
 - grabbing: [enabled/disabled] - [assessment]
 
 ### Summary
+
 [Brief summary of overall code quality and key recommendations]
 ```

.claude/settings.json

@@ -47,9 +47,7 @@
     ]
   },
   "enableAllProjectMcpServers": true,
-  "enabledMcpjsonServers": [
-    "iwsdk-dev-mcp"
-  ],
+  "enabledMcpjsonServers": ["iwsdk-dev-mcp"],
   "hooks": {
     "Stop": [
       {

.claude/skills/click-target/SKILL.md

@@ -15,43 +15,58 @@ Find a target object in the scene and click it using a controller, then verify t
 ## Workflow
 
 ### 1. Get Scene Hierarchy
+
 Use `mcp__iwsdk-dev-mcp__scene_get_hierarchy` to find the target object's UUID.
+
 - Look for objects with entityIndex (these are ECS entities)
 - PanelUI elements typically have nested children for their content
 
 ### 2. Get Target Transform
+
 Use `mcp__iwsdk-dev-mcp__scene_get_object_transform` with the target UUID.
+
 - Use `positionRelativeToXROrigin` for all positioning operations
 - Note the position for the next steps
 
 ### 3. Position Headset to Look at Target
+
 Use `mcp__iwsdk-dev-mcp__xr_look_at` with device `headset` and the target position.
+
 - This orients the headset to face the target
 
 ### 4. Screenshot to Verify Target Visible
+
 Use `mcp__iwsdk-dev-mcp__browser_screenshot` to verify:
+
 - Target is visible in the view
 - Target is not occluded by other objects
 - If not visible, use `mcp__iwsdk-dev-mcp__xr_look_at` with `moveToDistance` to get closer
 
 ### 5. Position Controller
+
 Use `mcp__iwsdk-dev-mcp__xr_get_transform` to check controller position.
+
 - If controller is visible in screenshot and not occluding target, proceed
 - If controller is far away or not visible:
   1. Get headset position with `mcp__iwsdk-dev-mcp__xr_get_transform`
   2. Set controller to headset position with `mcp__iwsdk-dev-mcp__xr_set_transform`
   3. Micro-adjust: offset x by +0.25 (right) or -0.25 (left), y by -0.1, z by -0.3
 
 ### 6. Point Controller at Target
+
 Use `mcp__iwsdk-dev-mcp__xr_look_at` with the controller device and target position.
+
 - For UI elements on panels, you may need to target a specific child element
 - If the target is a button on a panel, the button may be offset from the panel center
 
 ### 7. Click
+
 Use `mcp__iwsdk-dev-mcp__xr_select` with the controller device.
 
 ### 8. Verify Click
+
 Use `mcp__iwsdk-dev-mcp__browser_get_console_logs` with a pattern to check for expected log messages.
+
 - If no logs match, the click may have missed - adjust target position and retry
 - Common adjustments: change x or z by 0.05-0.1 to hit child elements
 
@@ -66,6 +81,7 @@ Use `mcp__iwsdk-dev-mcp__browser_get_console_logs` with a pattern to check for e
 ## Example
 
 To click the RESTART button on the pong scoreboard:
+
 1. Find scoreboard entity (entityIndex 6 in the pong game)
 2. Scoreboard is at (0, -0.798, -1.25)
 3. Button is at approximately (0.05, -0.798, -1.109) - offset toward player