# Role
Act as an expert Creative Technologist specialized in three.js, WebXR, and the **XR Blocks (xrblocks)** library.

# Context
You are authoring single-file WebXR experiences. You must strictly adhere to the XR Blocks framework architecture.

# User Request
Create the app following user's request: <my_xr_experience>, following the XR Blocks golden examples.

# Engineering Guidelines (Strict)

1. **Architecture (Single File):**
   - Output a SINGLE `index.html` file.
   - Application logic must be in standard ES classes extending `xb.Script` (or `xb.MeshScript`) inside `<script type="module">`.
   - Initialize the app using `xb.add(new MyScript()); await xb.init(new xb.Options());` (or synchronous `xb.init(options)`).
   - XR Blocks manages WebXR sessions, window resizing, spatial input raycasting, desktop simulation, and the render loop.
   - Do NOT call `requestAnimationFrame` manually.
   - CSS link tag must use: `<link rel="stylesheet" href="https://xrblocks.github.io/css/xr.css" />`.

2. **Dependency Management (Critical):**
   - Use the specific versions below in `<script type="importmap">`. Do NOT hallucinate newer versions.
   - **Reference Map:**
     - "three": "https://cdn.jsdelivr.net/npm/three@0.184.0/build/three.module.js"
     - "three/": "https://cdn.jsdelivr.net/npm/three@0.184.0/"
     - "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.184.0/examples/jsm/"
     - "@pmndrs/uikit": "https://cdn.jsdelivr.net/npm/@pmndrs/uikit@1.0.64/dist/index.min.js"
     - "@pmndrs/uikit-pub-sub": "https://cdn.jsdelivr.net/npm/@pmndrs/uikit-pub-sub@1.0.64/dist/index.min.js"
     - "@pmndrs/msdfonts": "https://cdn.jsdelivr.net/npm/@pmndrs/msdfonts@1.0.64/dist/index.min.js"
     - "@preact/signals-core": "https://cdn.jsdelivr.net/npm/@preact/signals-core@1.14.0/dist/signals-core.mjs"
     - "yoga-layout/load": "https://cdn.jsdelivr.net/npm/yoga-layout@3.2.1/dist/src/load.js"
     - "lit": "https://esm.sh/lit@3.3.1"
     - "lit/": "https://esm.sh/lit@3.3.1/"
     - "xrblocks": "https://cdn.jsdelivr.net/npm/xrblocks@0.21.1/build/xrblocks.js"
     - "xrblocks/addons/": "https://cdn.jsdelivr.net/npm/xrblocks@0.21.1/build/addons/"

3. **Coding Standards:**
   - **Class Structure:** Application logic must extend `xb.Script` or `xb.MeshScript`.
   - **Lifecycle:** Use `init()` for spatial setup and `update(delta)` for frame animations. Release resources in `dispose()`.
   - **Built-in Spatial UI:**
     - UI components are exported under `xb.` (`xb.UICard`, `xb.UIOverlay`, `xb.UIPanel`, `xb.UIButton`, `xb.UIText`, `xb.UIImage`, `xb.UISlider`, `xb.UIIcon`).
     - Top-level containers: `xb.UICard` (world space container with physical dimensions in meters, e.g. `size: {width: 0.6, height: 0.4}`) or `xb.UIOverlay` (view space HUD).
     - Component layout and visual properties go inside `style`: e.g. `new xb.UIText({ text: 'Hello', style: { fontSize: 24, color: '#ffffff' } })`.
   - **Object Interaction & Manipulation:**
     - Configure interactions directly on 3D objects using `object.xb`: e.g. `object.xb = { manipulation: true, pointerEvents: 'auto', reticleMode: 'auto' }`.
     - Event targeted callbacks: `onObjectSelectStart(event)`, `onObjectSelectEnd(event)`, `onObjectTouchStart(event)`, `onObjectTouchEnd(event)`, `onObjectManipulate(event)`.
     - Access targeted object using `event.target` and physical input ray/controller via `event.source.controller`.
     - Call `event.stopPropagation()` to stop bubbling. Do NOT `return true`.
     - **Pass-through visual elements (ignored by reticles & input rays):** set `object.xb.pointerEvents = 'none'`.
     - **Static ray barriers (stops reticles physically without event callbacks):** set `object.xb.interactionEnabled = false`.
   - **Spatial Placement & Behaviors:**
     - Attach placement scripts directly as child objects: `xb.FollowHead`, `xb.FaceCamera`, `xb.FollowObject`, `xb.Orbit`, `xb.VisibilityTransition`.
     - Surface placement: `xb.world.placeOnHorizontalSurface(object)`.
   - **3D Asset Loading:** Wrap spatial 3D models with `xb.ModelViewer({ origin: 'bottom-center', manipulation: true })` and call `await viewer.load({ url: '...' })`.
   - **AI Integration:** Enable AI with `options.enableAI()`, set `options.ai.promptForApiKey = true;`, and query model via `await xb.ai.query(...)`.
   - **Simulator Options:** Do not modify default desktop simulator settings unless the the demo is mainly about hand gestures (like rock paper scissors game).

4. **Coordinates & World Placement:**
   - Units are in meters. `y` is up, `z` is forward/backward.
   - User head position defaults to `(0, 1.6, 0)`. Position primary interactive objects near `z = -1.0` to `-1.5` meters at height `y = 1.3` to `1.5` meters.

5. **Planning:**
   - Before generating code, briefly outline the `xb.Script` class structure, member variables, and the `init()` vs `update()` logic flow.

# Reference Examples
Here are some XRBlocks **templates, samples, demos, and gallery examples**...


### Template: 00_basic
File: `templates/00_basic/index.html`
```html
<!doctype html>
<html lang="en">
  <head>
    <title>Basic | XR Blocks Template</title>

    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=no"
    />
    <link type="text/css" rel="stylesheet" href="https://xrblocks.github.io/css/xr.css" />
    <script type="importmap">
      {
        "imports": {
          "three": "https://cdn.jsdelivr.net/npm/three@0.184.0/build/three.module.js",
          "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.184.0/examples/jsm/",
          "xrblocks": "https://cdn.jsdelivr.net/npm/xrblocks@0.21.1/build/xrblocks.js"
        }
      }
    </script>
  </head>

  <body>
    <script type="module">
import * as THREE from 'three';
import * as xb from 'xrblocks';


class BasicScene extends xb.Script {
  init() {
    this.add(new THREE.HemisphereLight(0xffffff, 0x666666, /*intensity=*/ 3));

    const geometry = new THREE.CylinderGeometry(
      0.2,
      0.2,
      0.4,
      /*segments=*/ 32
    );
    const material = new THREE.MeshPhongMaterial({
      color: 0xffffff,
      transparent: true,
      opacity: 0.8,
    });
    this.object = new THREE.Mesh(geometry, material);
    this.object.name = 'Color cylinder';
    this.object.position.set(0, xb.user.height - 0.5, -xb.user.objectDistance);
    this.add(this.object);
  }

  onSelectEnd() {
    this.object.material.color.set(Math.random() * 0xffffff);
  }

  onSelecting() {
    this.object.material.color.set(0x66ccff);
  }

  dispose() {
    this.object.geometry.dispose();
    this.object.material.dispose();
  }
}

document.addEventListener('DOMContentLoaded', () => {
  xb.add(new BasicScene());
  xb.init(new xb.Options());
});

</script>
  </body>
</html>

```


### Template: 01_spatial_ui
File: `templates/01_spatial_ui/index.html`
```html
<!doctype html>
<html lang="en">
  <head>
    <title>Spatial UI | XR Blocks Template</title>

    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=no"
    />
    <link type="text/css" rel="stylesheet" href="https://xrblocks.github.io/css/xr.css" />
    <script>
      window.litDisableBundleWarning = true;
    </script>
    <script type="importmap">
      {
        "imports": {
          "three": "https://cdn.jsdelivr.net/npm/three@0.184.0/build/three.module.js",
          "three/": "https://cdn.jsdelivr.net/npm/three@0.184.0/",
          "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.184.0/examples/jsm/",
          "@pmndrs/uikit": "https://cdn.jsdelivr.net/npm/@pmndrs/uikit@1.0.64/dist/index.min.js",
          "@pmndrs/uikit-pub-sub": "https://cdn.jsdelivr.net/npm/@pmndrs/uikit-pub-sub@1.0.64/dist/index.min.js",
          "@pmndrs/msdfonts": "https://cdn.jsdelivr.net/npm/@pmndrs/msdfonts@1.0.64/dist/index.min.js",
          "@preact/signals-core": "https://cdn.jsdelivr.net/npm/@preact/signals-core@1.14.0/dist/signals-core.mjs",
          "yoga-layout/load": "https://cdn.jsdelivr.net/npm/yoga-layout@3.2.1/dist/src/load.js",
          "lit": "https://esm.sh/lit@3.3.1",
          "lit/": "https://esm.sh/lit@3.3.1/",
          "xrblocks": "https://cdn.jsdelivr.net/npm/xrblocks@0.21.1/build/xrblocks.js"
        }
      }
    </script>
  </head>
  <body>
    <script type="module">
import * as xb from 'xrblocks';


class SpatialUiScene extends xb.Script {
  init() {
    const status = new xb.UIText({
      text: 'Choose an action.',
      style: {fontSize: 18, opacity: 0.75, textAlign: 'center'},
    });
    const image = new xb.UIImage({
      src: 'https://picsum.photos/id/1018/900/600',
      ariaLabel: 'Mountain lake landscape',
      style: {
        position: 'absolute',
        top: 0,
        right: 0,
        bottom: 0,
        left: 0,
        width: '100%',
        height: '100%',
        objectFit: 'cover',
        borderRadius: 16,
      },
    });
    const imageFrame = new xb.UIPanel({
      style: {
        position: 'relative',
        width: '100%',
        height: 130,
        overflow: 'hidden',
        borderRadius: 16,
        backgroundColor: '#000000',
      },
      children: [image],
    });
    const brightness = new xb.UIText({
      text: '100%',
      style: {fontSize: 18, fontWeight: 'bold'},
    });
    const slider = new xb.UISlider({
      ariaLabel: 'Image brightness',
      min: 40,
      max: 100,
      step: 10,
      value: 100,
      style: {width: '100%', height: 40},
      onInput: (value) => {
        image.style.opacity = value / 100;
        brightness.text = `${value}%`;
        status.text = `Image brightness: ${value}%.`;
      },
    });

    const card = new xb.UICard({
      size: {width: 0.62, height: 'auto'},
      manipulation: true,
      edge: true,
      style: {flexDirection: 'column', gap: 16, padding: 20},
      children: [
        new xb.UIText({
          text: 'Spatial UI',
          style: {fontSize: 34, fontWeight: 'bold', textAlign: 'center'},
        }),
        new xb.UIText({
          text: 'Use familiar flex layouts.',
          style: {fontSize: 18, lineHeight: 1.35, textAlign: 'center'},
        }),
        imageFrame,
        new xb.UIPanel({
          style: {
            width: '100%',
            flexDirection: 'row',
            justifyContent: 'space-between',
            alignItems: 'center',
          },
          children: [
            new xb.UIText({
              text: 'Image brightness',
              style: {fontSize: 18},
            }),
            brightness,
          ],
        }),
        slider,
        new xb.UIPanel({
          style: {width: '100%', flexDirection: 'row', gap: 12},
          children: [
            new xb.UIButton({
              label: 'Hello',
              icon: 'waving_hand',
              style: {flexGrow: 1},
              onClick: () => (status.text = 'Hello from your spatial UI.'),
            }),
            new xb.UIButton({
              label: 'Reset',
              icon: 'restart_alt',
              style: {flexGrow: 1},
              onClick: () => {
                slider.value = 100;
                image.style.opacity = 1;
                brightness.text = '100%';
                status.text = 'Choose an action.';
              },
            }),
          ],
        }),
        status,
      ],
    });
    card.position.set(0, 1.45, -1.1);
    this.add(card);
  }
}

xb.add(new SpatialUiScene());
xb.init(new xb.Options());

</script>
  </body>
</html>

```


### Template: 02_object_interaction
File: `templates/02_object_interaction/index.html`
```html
<!doctype html>
<html lang="en">
  <head>
    <title>Object Interaction | XR Blocks Template</title>

    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=no"
    />
    <link type="text/css" rel="stylesheet" href="https://xrblocks.github.io/css/xr.css" />
    <script>
      window.litDisableBundleWarning = true;
    </script>
    <script type="importmap">
      {
        "imports": {
          "three": "https://cdn.jsdelivr.net/npm/three@0.184.0/build/three.module.js",
          "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.184.0/examples/jsm/",
          "lit": "https://esm.sh/lit@3.3.1",
          "lit/": "https://esm.sh/lit@3.3.1/",
          "xrblocks": "https://cdn.jsdelivr.net/npm/xrblocks@0.21.1/build/xrblocks.js"
        }
      }
    </script>
  </head>
  <body>
    <script type="module">
import * as THREE from 'three';
import * as xb from 'xrblocks';


class ObjectInteraction extends xb.MeshScript {
  constructor() {
    super(
      new THREE.BoxGeometry(0.22, 0.22, 0.22),
      new THREE.MeshStandardMaterial({color: 0xfbbc04})
    );
    this.name = 'Interactive cube';
    this.position.set(0, 1.35, -0.65);
    this.xb = {manipulation: true};
  }

  init() {
    this.add(new THREE.HemisphereLight(0xffffff, 0x3c4043, 3));
  }

  onObjectSelectStart(event) {
    if (event.source.type !== 'direct-touch') {
      this.material.color.set(0x4285f4);
    }
    event.stopPropagation();
  }

  onObjectSelectEnd(event) {
    if (event.source.type !== 'direct-touch') {
      this.material.color.set(0xfbbc04);
    }
    event.stopPropagation();
  }

  onObjectTouchStart(event) {
    // Keep the default selection enabled because automatic manipulation uses
    // that capture when grab starts. Prevent it only for touch-only objects.
    this.material.color.set(0x34a853);
    event.stopPropagation();
  }

  onObjectTouchEnd(event) {
    this.material.color.set(0xfbbc04);
    event.stopPropagation();
  }

  dispose() {
    this.geometry.dispose();
    this.material.dispose();
  }
}

const options = new xb.Options();
options.enableHands();
options.hands.visualization = true;
options.simulator.defaultMode = xb.SimulatorMode.CONTROLLER;

xb.add(new ObjectInteraction());
xb.init(options);

</script>
  </body>
</html>

```


### Template: 03_spatial_placement
File: `templates/03_spatial_placement/index.html`
```html
<!doctype html>
<html lang="en">
  <head>
    <title>Spatial Placement | XR Blocks Template</title>

    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=no"
    />
    <link type="text/css" rel="stylesheet" href="https://xrblocks.github.io/css/xr.css" />
    <script>
      window.litDisableBundleWarning = true;
    </script>
    <script type="importmap">
      {
        "imports": {
          "three": "https://cdn.jsdelivr.net/npm/three@0.184.0/build/three.module.js",
          "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.184.0/examples/jsm/",
          "xrblocks": "https://cdn.jsdelivr.net/npm/xrblocks@0.21.1/build/xrblocks.js"
        }
      }
    </script>
  </head>
  <body>
    <script type="module">
import * as THREE from 'three';
import * as xb from 'xrblocks';


const BASE_HEIGHT = 0.018;
const CONE_HEIGHT = 0.08;
const BALL_RADIUS = 0.025;

class SpatialPlacement extends xb.Script {
  static dependencies = {
    depth: xb.Depth,
    user: xb.User,
  };

  init({depth, user}) {
    this.depth = depth;
    this.user = user;
    this.add(new THREE.HemisphereLight(0xffffff, 0x3c4043, 3));
    this.baseGeometry = new THREE.CylinderGeometry(
      0.045,
      0.045,
      BASE_HEIGHT,
      24,
      1,
      true
    );
    this.coneGeometry = new THREE.ConeGeometry(0.035, CONE_HEIGHT, 24);
    this.ballGeometry = new THREE.SphereGeometry(BALL_RADIUS, 24, 16);
    this.placedMaterial = new THREE.MeshStandardMaterial({
      color: 0x4285f4,
      roughness: 0.35,
      side: THREE.DoubleSide,
    });
    this.previewMaterial = this.placedMaterial.clone();
    this.previewMaterial.transparent = true;
    this.previewMaterial.opacity = 0.35;

    this.previewMarker = this.createMarker(this.previewMaterial, 'Depth hit');
    this.placedMarker = this.createMarker(
      this.placedMaterial,
      'Placed depth hit'
    );
    this.add(this.previewMarker, this.placedMarker);
  }

  createMarker(material, name) {
    const marker = new THREE.Group();
    marker.name = name;
    marker.visible = false;
    marker.xb = {pointerEvents: 'none'};

    const base = new THREE.Mesh(this.baseGeometry, material);
    base.position.y = BASE_HEIGHT / 2;

    const cone = new THREE.Mesh(this.coneGeometry, material);
    cone.rotation.x = Math.PI;
    cone.position.y = BASE_HEIGHT + CONE_HEIGHT / 2;

    const ball = new THREE.Mesh(this.ballGeometry, material);
    ball.position.y = BASE_HEIGHT + CONE_HEIGHT + BALL_RADIUS;

    marker.add(base, cone, ball);
    return marker;
  }

  update() {
    const hit = this.depth.depthMesh
      ? this.user.getIntersectionAt(this.depth.depthMesh)
      : null;
    this.previewMarker.visible = Boolean(hit);
    if (hit) this.placeMarker(this.previewMarker, hit);
  }

  onSelectStart(event) {
    const intersection = event.intersection;
    if (event.surface !== this.depth.depthMesh || !intersection) {
      return;
    }

    this.placeMarker(this.placedMarker, intersection);
    this.placedMarker.visible = true;
  }

  placeMarker(marker, intersection) {
    const normal = intersection.normal ?? intersection.face?.normal;
    if (!normal) {
      marker.position.copy(intersection.point);
      return;
    }

    xb.placeObjectAtIntersectionFacingTarget(
      marker,
      {...intersection, normal},
      xb.core.camera
    );
  }

  dispose() {
    this.baseGeometry.dispose();
    this.coneGeometry.dispose();
    this.ballGeometry.dispose();
    this.previewMaterial.dispose();
    this.placedMaterial.dispose();
  }
}

const options = new xb.Options();
options.enableDepth();
options.reticles.projectOnDepthMesh = true;

xb.add(new SpatialPlacement());
xb.init(options);

</script>
  </body>
</html>

```


### Template: 04_stereo
File: `templates/04_stereo/index.html`
```html
<!doctype html>
<html lang="en">
  <head>
    <title>Stereo | XR Blocks Template</title>

    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=no"
    />
    <link type="text/css" rel="stylesheet" href="https://xrblocks.github.io/css/xr.css" />
    <script type="importmap">
      {
        "imports": {
          "three": "https://cdn.jsdelivr.net/npm/three@0.184.0/build/three.module.js",
          "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.184.0/examples/jsm/",
          "xrblocks": "https://cdn.jsdelivr.net/npm/xrblocks@0.21.1/build/xrblocks.js"
        }
      }
    </script>
  </head>

  <body>
    <script type="module">
import * as THREE from 'three';
import * as xb from 'xrblocks';


const stereoTextureFile = 'SV_20241216_144600.webp';

class StereoImage extends xb.Script {
  async init() {
    await this.addStereoQuad();
  }

  async addStereoQuad() {
    const stereoObject = new THREE.Group();
    const [leftTexture, rightTexture] =
      await xb.loadStereoImageAsTextures(stereoTextureFile);
    const geometry = new THREE.PlaneGeometry(1, 1);
    const leftMesh = new THREE.Mesh(
      geometry,
      new THREE.MeshBasicMaterial({
        map: leftTexture,
        side: THREE.DoubleSide,
      })
    );

    xb.showOnlyInLeftEye(leftMesh);
    stereoObject.add(leftMesh);
    const rightMesh = new THREE.Mesh(
      geometry,
      new THREE.MeshBasicMaterial({
        map: rightTexture,
        side: THREE.DoubleSide,
      })
    );

    xb.showOnlyInRightEye(rightMesh);
    stereoObject.add(rightMesh);
    stereoObject.position.set(0.0, 1.5, -1.5);
    stereoObject.name = 'Stereo image';
    this.add(stereoObject);
  }
}

document.addEventListener('DOMContentLoaded', () => {
  const options = new xb.Options();
  options.simulator.stereo.enabled = true;
  xb.add(new StereoImage());
  xb.init(options);
});

</script>
  </body>
</html>

```


### Template: 05_camera_view
File: `templates/05_camera_view/index.html`
```html
<!doctype html>
<html lang="en">
  <head>
    <title>Camera View | XR Blocks Template</title>

    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=no"
    />
    <link type="text/css" rel="stylesheet" href="https://xrblocks.github.io/css/xr.css" />
    <script>
      window.litDisableBundleWarning = true;
    </script>
    <script type="importmap">
      {
        "imports": {
          "three": "https://cdn.jsdelivr.net/npm/three@0.184.0/build/three.module.js",
          "three/": "https://cdn.jsdelivr.net/npm/three@0.184.0/",
          "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.184.0/examples/jsm/",
          "@pmndrs/uikit": "https://cdn.jsdelivr.net/npm/@pmndrs/uikit@1.0.64/dist/index.min.js",
          "@pmndrs/uikit-pub-sub": "https://cdn.jsdelivr.net/npm/@pmndrs/uikit-pub-sub@1.0.64/dist/index.min.js",
          "@pmndrs/msdfonts": "https://cdn.jsdelivr.net/npm/@pmndrs/msdfonts@1.0.64/dist/index.min.js",
          "@preact/signals-core": "https://cdn.jsdelivr.net/npm/@preact/signals-core@1.14.0/dist/signals-core.mjs",
          "yoga-layout/load": "https://cdn.jsdelivr.net/npm/yoga-layout@3.2.1/dist/src/load.js",
          "lit": "https://esm.sh/lit@3.3.1",
          "lit/": "https://esm.sh/lit@3.3.1/",
          "xrblocks": "https://cdn.jsdelivr.net/npm/xrblocks@0.21.1/build/xrblocks.js"
        }
      }
    </script>
  </head>
  <body>
    <script type="module">
import * as xb from 'xrblocks';


const EMPTY_IMAGE =
  'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==';

class CameraView extends xb.Script {
  init() {
    this.preview = new xb.UIImage({
      src: EMPTY_IMAGE,
      ariaLabel: 'Live device camera preview',
      pointerEvents: 'none',
      style: {
        position: 'absolute',
        top: 0,
        right: 0,
        bottom: 0,
        left: 0,
        width: '100%',
        height: '100%',
        objectFit: 'cover',
        backgroundColor: '#111111',
        borderRadius: 16,
      },
    });
    this.cameraLabel = new xb.UIText({
      text: 'Camera',
      style: {fontSize: 18, textAlign: 'center'},
    });
    this.previousButton = new xb.UIButton({
      icon: 'skip_previous',
      ariaLabel: 'Previous camera',
      style: {flexGrow: 1},
      onClick: () => void this.cycleCamera(-1),
    });
    this.nextButton = new xb.UIButton({
      icon: 'skip_next',
      ariaLabel: 'Next camera',
      style: {flexGrow: 1},
      onClick: () => void this.cycleCamera(1),
    });
    const controls = new xb.UIPanel({
      style: {
        width: '100%',
        flexDirection: 'column',
        gap: 8,
        padding: 10,
        borderRadius: 12,
        backgroundColor: '#111111aa',
        zIndex: 1,
      },
      children: [
        this.cameraLabel,
        new xb.UIPanel({
          style: {width: '100%', flexDirection: 'row', gap: 8},
          children: [this.previousButton, this.nextButton],
        }),
      ],
    });
    const card = new xb.UICard({
      size: {width: 0.5, height: 0.6},
      manipulation: true,
      style: {
        justifyContent: 'flex-end',
        padding: 16,
        overflow: 'hidden',
        borderRadius: 16,
      },
      children: [this.preview, controls],
    });
    card.position.set(0, 1.45, -1.2);
    this.add(card);

    this.camera = xb.core.deviceCamera;
    this.onStateChange = (event) => this.updateState(event);
    this.camera.addEventListener('statechange', this.onStateChange);
    this.cameraLabel.text = this.camera.getCurrentDevice()?.label || 'Camera';
    if (this.camera.state === 'streaming')
      this.preview.src = this.camera.texture;
  }

  updateState(event) {
    const stateLabels = {
      initializing: 'Initializing camera…',
      no_devices_found: 'Camera unavailable',
      error: 'Camera failed to start',
    };
    this.cameraLabel.text =
      event.device?.label || stateLabels[event.state] || 'Camera';
    if (event.state === 'streaming') this.preview.src = this.camera.texture;
  }

  async cycleCamera(offset) {
    const devices = this.camera.getAvailableDevices();
    if (devices.length <= 1) return;

    const nextIndex =
      (this.camera.getCurrentDeviceIndex() + offset + devices.length) %
      devices.length;
    await this.camera.setDeviceId(devices[nextIndex].deviceId);
  }

  dispose() {
    this.camera?.removeEventListener('statechange', this.onStateChange);
  }
}

const options = new xb.Options();
options.enableCamera();

xb.add(new CameraView());
xb.init(options);

</script>
  </body>
</html>

```


### Template: 06_ai_query
File: `templates/06_ai_query/index.html`
```html
<!doctype html>
<html lang="en">
  <head>

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>AI Query | XR Blocks Template</title>
    <link type="text/css" rel="stylesheet" href="https://xrblocks.github.io/css/xr.css" />
    <script type="importmap">
      {
        "imports": {
          "three": "https://cdn.jsdelivr.net/npm/three@0.184.0/build/three.module.js",
          "three/": "https://cdn.jsdelivr.net/npm/three@0.184.0/",
          "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.184.0/examples/jsm/",
          "xrblocks": "https://cdn.jsdelivr.net/npm/xrblocks@0.21.1/build/xrblocks.js",
          "@pmndrs/uikit": "https://cdn.jsdelivr.net/npm/@pmndrs/uikit@1.0.64/dist/index.min.js",
          "@pmndrs/uikit-pub-sub": "https://cdn.jsdelivr.net/npm/@pmndrs/uikit-pub-sub@1.0.64/dist/index.min.js",
          "@pmndrs/msdfonts": "https://cdn.jsdelivr.net/npm/@pmndrs/msdfonts@1.0.64/dist/index.min.js",
          "@preact/signals-core": "https://cdn.jsdelivr.net/npm/@preact/signals-core@1.14.0/dist/signals-core.mjs",
          "yoga-layout/load": "https://cdn.jsdelivr.net/npm/yoga-layout@3.2.1/dist/src/load.js",
          "@google/genai": "https://cdn.jsdelivr.net/npm/@google/genai/+esm"
        }
      }
    </script>
  </head>
  <body>
    <script type="module">
import * as xb from 'xrblocks';


class AiQueryScene extends xb.Script {
  init() {
    this.response = new xb.UIText({
      text: 'Choose a prompt to send to Gemini.',
      style: {
        flexGrow: 1,
        padding: 16,
        backgroundColor: '#111722',
        borderRadius: 14,
        fontSize: 16,
        lineHeight: 1.35,
        whiteSpace: 'pre-line',
        overflow: 'hidden',
      },
    });
    this.textButton = new xb.UIButton({
      label: 'Ask about WebXR',
      icon: 'chat',
      style: {flexGrow: 1},
      onClick: () =>
        this.ask(
          {prompt: 'What is WebXR? Reply in three short sentences.'},
          'Asking Gemini about WebXR…'
        ),
    });
    this.imageButton = new xb.UIButton({
      label: 'Describe sample',
      icon: 'image',
      style: {flexGrow: 1},
      onClick: () =>
        this.ask(
          {
            type: 'multiPart',
            parts: [
              {
                inlineData: {
                  data: 'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==',
                  mimeType: 'image/png',
                },
              },
              {text: 'Briefly describe this sample image.'},
            ],
          },
          'Sending a sample image to Gemini…'
        ),
    });

    const card = new xb.UICard({
      size: {width: 0.68, height: 0.48},
      manipulation: true,
      edge: true,
      style: {flexDirection: 'column', gap: 16, padding: 20},
      children: [
        new xb.UIText({
          text: 'AI Query',
          style: {fontSize: 32, fontWeight: 'bold', textAlign: 'center'},
        }),
        new xb.UIText({
          text: 'Send text or image input to Gemini.',
          style: {fontSize: 17, opacity: 0.72, textAlign: 'center'},
        }),
        this.response,
        new xb.UIPanel({
          style: {width: '100%', flexDirection: 'row', gap: 12},
          children: [this.textButton, this.imageButton],
        }),
      ],
    });
    card.position.set(0, 1.4, -1.1);
    this.add(card);
  }

  async ask(input, pendingText) {
    if (this.textButton.disabled || this.imageButton.disabled) return;
    this.setBusy(true);
    this.response.text = pendingText;
    try {
      const result = await xb.ai.query(input);
      const text = typeof result === 'string' ? result : result?.text;
      this.response.text = text || 'Gemini returned no text.';
    } catch (error) {
      this.response.text =
        error instanceof Error ? error.message : String(error);
    } finally {
      this.setBusy(false);
    }
  }

  setBusy(busy) {
    this.textButton.disabled = busy;
    this.imageButton.disabled = busy;
  }
}

const options = new xb.Options();
options.enableAI();
options.ai.promptForApiKey = true;

xb.add(new AiQueryScene());
await xb.init(options);

</script>
  </body>
</html>

```


### Template: 07_ai_live_assistant
File: `templates/07_ai_live_assistant/index.html`
```html
<!doctype html>
<html lang="en">
  <head>

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>AI Live Assistant | XR Blocks Template</title>
    <link type="text/css" rel="stylesheet" href="https://xrblocks.github.io/css/xr.css" />
    <script type="importmap">
      {
        "imports": {
          "three": "https://cdn.jsdelivr.net/npm/three@0.184.0/build/three.module.js",
          "three/": "https://cdn.jsdelivr.net/npm/three@0.184.0/",
          "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.184.0/examples/jsm/",
          "xrblocks": "https://cdn.jsdelivr.net/npm/xrblocks@0.21.1/build/xrblocks.js",
          "@pmndrs/uikit": "https://cdn.jsdelivr.net/npm/@pmndrs/uikit@1.0.64/dist/index.min.js",
          "@pmndrs/uikit-pub-sub": "https://cdn.jsdelivr.net/npm/@pmndrs/uikit-pub-sub@1.0.64/dist/index.min.js",
          "@pmndrs/msdfonts": "https://cdn.jsdelivr.net/npm/@pmndrs/msdfonts@1.0.64/dist/index.min.js",
          "@preact/signals-core": "https://cdn.jsdelivr.net/npm/@preact/signals-core@1.14.0/dist/signals-core.mjs",
          "yoga-layout/load": "https://cdn.jsdelivr.net/npm/yoga-layout@3.2.1/dist/src/load.js",
          "@google/genai": "https://cdn.jsdelivr.net/npm/@google/genai/+esm"
        }
      }
    </script>
  </head>
  <body>
    <script type="module">
import * as xb from 'xrblocks';

// --- Inlined from ./LiveAssistant.js ---
class LiveAssistant {
  constructor(onStatus, onTranscript, onStopped) {
    this.onStatus = onStatus;
    this.onTranscript = onTranscript;
    this.onStopped = onStopped;
    this.inputText = '';
    this.outputText = '';
    this.history = [];
    this.running = false;
    this.stopping = false;
    this.cameraUnavailable = false;
    this.cameraTimer = undefined;
  }

  async start() {
    if (this.running) return;
    this.stopping = false;
    this.onStatus('Connecting microphone, camera, and Gemini…');
    try {
      xb.ai.setLiveCallbacks({
        onopen: () => this.onStatus('Connected. Speak naturally.'),
        onmessage: (message) => this.handleMessage(message),
        onerror: (event) => this.handleError(event),
        onclose: () => this.handleClose(),
      });
      await xb.core.sound.enableAudio();
      await xb.ai.startLiveSession();
      this.running = true;
      this.startCameraFrames();
    } catch (error) {
      this.cleanup();
      throw error;
    }
  }

  async stop() {
    if (!this.running) return;
    this.stopping = true;
    await xb.ai.stopLiveSession();
    this.cleanup();
    this.onStatus('Stopped.');
    this.onStopped();
  }

  startCameraFrames() {
    this.cameraTimer = setInterval(() => void this.sendCameraFrame(), 1000);
  }

  async sendCameraFrame() {
    try {
      const image = await xb.core.deviceCamera?.getSnapshot({
        outputFormat: 'base64',
        mimeType: 'image/jpeg',
        quality: 0.8,
        width: 768,
        height: 432,
      });
      if (!image) return this.reportCameraUnavailable();
      const match = image.match(/^data:([^;,]+)[^,]*,(.*)$/s);
      if (!match) return this.reportCameraUnavailable();
      this.cameraUnavailable = false;
      xb.ai.sendRealtimeInput({video: {mimeType: match[1], data: match[2]}});
    } catch {
      this.reportCameraUnavailable();
    }
  }

  reportCameraUnavailable() {
    if (this.cameraUnavailable) return;
    this.cameraUnavailable = true;
    this.onStatus('Camera frame unavailable; continuing with audio.');
  }

  handleMessage(message) {
    if (message.data) void xb.core.sound.playAIAudio(message.data);
    const content = message.serverContent;
    if (!content) return;
    if (content.inputTranscription?.text) {
      this.inputText += content.inputTranscription.text;
      this.renderTranscript();
    }
    if (content.outputTranscription?.text) {
      this.outputText += content.outputTranscription.text;
      this.renderTranscript();
    }
    if (content.interrupted) {
      xb.core.sound.stopAIAudio();
      this.onStatus('Assistant interrupted.');
    }
    if (content.turnComplete) this.finishTurn();
  }

  finishTurn() {
    if (this.inputText) this.history.push(`You: ${this.inputText}`);
    if (this.outputText) this.history.push(`Assistant: ${this.outputText}`);
    this.inputText = '';
    this.outputText = '';
    this.renderTranscript();
  }

  renderTranscript() {
    const lines = [...this.history];
    if (this.inputText) lines.push(`You: ${this.inputText}`);
    if (this.outputText) lines.push(`Assistant: ${this.outputText}`);
    this.onTranscript(lines.join('\n\n'));
  }

  handleError(event) {
    this.onStatus(event.message || 'Gemini Live failed.');
  }

  handleClose() {
    this.cleanup();
    if (this.stopping) return;
    this.onStatus('Disconnected.');
    this.onStopped();
  }

  cleanup() {
    if (this.cameraTimer) clearInterval(this.cameraTimer);
    this.cameraTimer = undefined;
    this.running = false;
    xb.core.sound.disableAudio();
    xb.core.sound.stopAIAudio();
  }
}



class LiveAssistantScene extends xb.Script {
  init() {
    this.status = new xb.UIText({
      text: 'Ready. Start when you want to talk.',
      style: {fontSize: 16, opacity: 0.72, textAlign: 'center'},
    });
    this.transcript = new xb.UIText({
      text: 'Your conversation will appear here.',
      style: {
        flexGrow: 1,
        padding: 16,
        backgroundColor: '#111722',
        borderRadius: 14,
        fontSize: 16,
        lineHeight: 1.35,
        whiteSpace: 'pre-line',
        overflow: 'hidden',
      },
    });
    this.toggleButton = new xb.UIButton({
      label: 'Start',
      icon: 'mic',
      style: {width: '100%'},
      onClick: () => void this.toggleSession(),
    });
    this.assistant = new LiveAssistant(
      (message) => (this.status.text = message),
      (text) =>
        (this.transcript.text = text || 'Your conversation will appear here.'),
      () => this.setRunning(false)
    );

    const card = new xb.UICard({
      size: {width: 0.68, height: 0.5},
      manipulation: true,
      edge: true,
      style: {flexDirection: 'column', gap: 16, padding: 20},
      children: [
        new xb.UIText({
          text: 'AI Live Assistant',
          style: {fontSize: 32, fontWeight: 'bold', textAlign: 'center'},
        }),
        this.status,
        this.transcript,
        this.toggleButton,
      ],
    });
    card.position.set(0, 1.4, -1.1);
    this.add(card);
  }

  async toggleSession() {
    if (this.toggleButton.disabled) return;
    this.toggleButton.disabled = true;
    try {
      if (this.assistant.running) await this.assistant.stop();
      else await this.assistant.start();
    } catch (error) {
      this.status.text = error instanceof Error ? error.message : String(error);
    } finally {
      this.setRunning(this.assistant.running);
      this.toggleButton.disabled = false;
    }
  }

  setRunning(running) {
    this.toggleButton.label = running ? 'Stop' : 'Start';
    this.toggleButton.icon = running ? 'stop' : 'mic';
  }
}

const options = new xb.Options();
options.enableAI();
options.enableCamera('environment');
options.ai.promptForApiKey = true;

xb.add(new LiveAssistantScene());
await xb.init(options);

</script>
  </body>
</html>

```


### Template: 09_xr_modes
File: `templates/09_xr_modes/index.html`
```html
<!doctype html>
<html lang="en">
  <head>
    <title>XR Modes | XR Blocks Template</title>

    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=no"
    />
    <link type="text/css" rel="stylesheet" href="https://xrblocks.github.io/css/xr.css" />
    <script type="importmap">
      {
        "imports": {
          "three": "https://cdn.jsdelivr.net/npm/three@0.184.0/build/three.module.js",
          "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.184.0/examples/jsm/",
          "xrblocks": "https://cdn.jsdelivr.net/npm/xrblocks@0.21.1/build/xrblocks.js"
        }
      }
    </script>
  </head>
  <body>
    <script type="module">
import * as THREE from 'three';
import * as xb from 'xrblocks';


/**
 * Demonstrates how to use the XRTransition component to smoothly switch
 * between AR and VR backgrounds.
 */
class MainScript extends xb.Script {
  init() {
    this.add(new THREE.HemisphereLight(0xffffff, 0x666666, /*intensity=*/ 3));

    const geometry = new THREE.CylinderGeometry(
      0.2,
      0.2,
      0.4,
      /*segments=*/ 32
    );
    const material = new THREE.MeshPhongMaterial({
      color: 0xffffff,
      transparent: true,
      opacity: 0.8,
    });
    this.cylinder = new THREE.Mesh(geometry, material);
    this.cylinder.position.set(
      0,
      xb.core.user.height - 0.5,
      -xb.core.user.objectDistance
    );
    this.add(this.cylinder);
  }

  /**
   * On pinch, toggle between AR and VR modes and update cylinder color.
   */
  onSelectEnd() {
    if (!xb.core.transition) {
      console.warn('XRTransition not enabled.');
      return;
    }
    this.cylinder.material.color.set(Math.random() * 0xffffff);

    // Toggle between AR and VR based on the current mode.
    if (xb.core.transition.currentMode === 'AR') {
      xb.core.transition.toVR({color: Math.random() * 0xffffff});
    } else {
      xb.core.transition.toAR();
    }
  }
}

document.addEventListener('DOMContentLoaded', function () {
  const options = new xb.Options().enableXRTransitions();
  xb.add(new MainScript());
  xb.init(options);
});

</script>
  </body>
</html>

```


### Template: 12_hand_gestures
File: `templates/12_hand_gestures/index.html`
```html
<!doctype html>
<html lang="en">
  <head>
    <title>Hand Gestures | XR Blocks Template</title>

    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=no"
    />
    <link type="text/css" rel="stylesheet" href="https://xrblocks.github.io/css/xr.css" />
    <script>
      window.litDisableBundleWarning = true;
    </script>
    <script type="importmap">
      {
        "imports": {
          "three": "https://cdn.jsdelivr.net/npm/three@0.184.0/build/three.module.js",
          "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.184.0/examples/jsm/",
          "lit": "https://esm.sh/lit@3.3.1",
          "lit/": "https://esm.sh/lit@3.3.1/",
          "xrblocks": "https://cdn.jsdelivr.net/npm/xrblocks@0.21.1/build/xrblocks.js"
        }
      }
    </script>
  </head>
  <body>
    <script type="module">
import * as xb from 'xrblocks';
import * as THREE from 'three';

// --- Inlined from ./GestureInspector.js ---
class GestureInspector extends xb.Script {
  init() {
    this.add(new THREE.HemisphereLight(0xffffff, 0x1b243d, 2));
    this.feedback = new THREE.Mesh(
      new THREE.IcosahedronGeometry(0.16, 2),
      new THREE.MeshStandardMaterial({color: 0x7a8cff})
    );
    this.feedback.position.set(0, 1.4, -1.15);
    this.add(this.feedback);

    this.gestures = xb.core.gestureRecognition;
    this.onStart = (event) => this.showGesture(event.detail);
    this.onEnd = () => this.clearGesture();
    this.gestures.addEventListener('gesturestart', this.onStart);
    this.gestures.addEventListener('gestureend', this.onEnd);
  }

  showGesture(gesture) {
    console.log(gesture.name, gesture.hand, gesture.confidence);
    this.feedback.material.color.set(
      gesture.hand === 'left' ? 0xffa24a : 0x50cf8a
    );
  }

  clearGesture() {
    this.feedback.material.color.set(0x7a8cff);
    this.feedback.scale.setScalar(1);
  }

  dispose() {
    this.gestures.removeEventListener('gesturestart', this.onStart);
    this.gestures.removeEventListener('gestureend', this.onEnd);
    this.feedback.geometry.dispose();
    this.feedback.material.dispose();
  }
}



const options = new xb.Options();
options.enableGestures();
options.enableReticles();
options.gestures.setGestureEnabled('point', true);
options.gestures.setGestureEnabled('spread', true);
options.hands.visualization = true;
options.hands.visualizeJoints = true;
options.hands.visualizeMeshes = true;
options.simulator.defaultMode = xb.SimulatorMode.POSE;
options.xrButton.showEnterSimulatorButton = true;

document.addEventListener('DOMContentLoaded', async () => {
  xb.add(new GestureInspector());
  await xb.init(options);
});

</script>
  </body>
</html>

```


### Sample: advanced/ballpit
File: `samples/advanced/ballpit/index.html`
```html
<!doctype html>
<html lang="en">
  <head>
    <title>Ballpit | XR Blocks</title>

    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=no"
    />
    <link type="text/css" rel="stylesheet" href="https://xrblocks.github.io/css/xr.css" />
    <script>
      window.litDisableBundleWarning = true;
    </script>
    <script type="importmap">
      {
        "imports": {
          "@dimforge/rapier3d-simd-compat": "https://cdn.jsdelivr.net/npm/@dimforge/rapier3d-simd-compat@0.19.2/rapier.mjs",
          "three": "https://cdn.jsdelivr.net/npm/three@0.184.0/build/three.module.js",
          "three/": "https://cdn.jsdelivr.net/npm/three@0.184.0/",
          "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.184.0/examples/jsm/",
          "lit": "https://esm.sh/lit@3.3.1",
          "lit/": "https://esm.sh/lit@3.3.1/",
          "@pmndrs/uikit": "https://cdn.jsdelivr.net/npm/@pmndrs/uikit@1.0.64/dist/index.min.js",
          "@pmndrs/uikit-pub-sub": "https://cdn.jsdelivr.net/npm/@pmndrs/uikit-pub-sub@1.0.64/dist/index.min.js",
          "@pmndrs/msdfonts": "https://cdn.jsdelivr.net/npm/@pmndrs/msdfonts@1.0.64/dist/index.min.js",
          "@preact/signals-core": "https://cdn.jsdelivr.net/npm/@preact/signals-core@1.14.0/dist/signals-core.mjs",
          "yoga-layout/load": "https://cdn.jsdelivr.net/npm/yoga-layout@3.2.1/dist/src/load.js",
          "xrblocks": "https://cdn.jsdelivr.net/npm/xrblocks@0.21.1/build/xrblocks.js",
          "xrblocks/addons/": "https://cdn.jsdelivr.net/npm/xrblocks@0.21.1/build/addons/"
        }
      }
    </script>
  </head>

  <body>
    <div
      class="background-image"
      style="background-image: url('textures/background.webp')"
    ></div>
    <script type="module">
import RAPIER from '@dimforge/rapier3d-simd-compat';
import * as xb from 'xrblocks';
import * as THREE from 'three';
import {palette} from 'xrblocks/addons/utils/Palette.js';

// --- Inlined from ./BallPit.js ---
// --- Inlined from ./BallShooter.js ---
class BallShooter extends xb.Script {
  constructor({
    numBalls = 100,
    radius = 0.08,
    palette = null,
    liveDuration = 3000,
    deflateDuration = 200,
    distanceThreshold = 0.25,
    distanceFadeout = 0.25,
  }) {
    super();
    this.liveDuration = liveDuration;
    this.deflateDuration = deflateDuration;
    this.distanceThreshold = distanceThreshold;
    this.distanceFadeout = distanceFadeout;
    const geometry = new THREE.IcosahedronGeometry(radius, 3);
    this.spheres = [];
    for (let i = 0; i < numBalls; ++i) {
      const material = new THREE.MeshLambertMaterial({transparent: true});
      const sphere = new THREE.Mesh(geometry, material);
      sphere.castShadow = true;
      sphere.receiveShadow = true;
      this.spheres.push(sphere);
    }

    for (let i = 0; i < this.spheres.length; i++) {
      const x = Math.random() * 2 - 2;
      const y = Math.random() * 2;
      const z = Math.random() * 2 - 2;

      this.spheres[i].position.set(x, y, z);
      if (palette != null) {
        this.spheres[i].material.color.copy(palette.getRandomLiteGColor());
      }
    }

    const now = performance.now();
    this.spawnTimes = [];
    for (let i = 0; i < numBalls; ++i) {
      this.spawnTimes[i] = now;
    }

    this.nextBall = 0;
    this.rigidBodies = [];
    this.colliders = [];
    this.colliderHandleToIndex = new Map();
    this.viewSpacePosition = new THREE.Vector3();
    this.clipSpacePosition = new THREE.Vector3();
    this.projectedPosition = new THREE.Vector3();
    this.clipFromWorld = new THREE.Matrix4();
  }

  initPhysics(physics) {
    this.setupPhysics({
      RAPIER: physics.RAPIER,
      blendedWorld: physics.blendedWorld,
      colliderActiveEvents: physics.RAPIER.ActiveEvents.CONTACT_FORCE_EVENTS,
    });
  }

  setupPhysics({
    RAPIER,
    blendedWorld,
    colliderActiveEvents = 0,
    continuousCollisionDetection = false,
  }) {
    this.RAPIER = RAPIER;
    this.blendedWorld = blendedWorld;
    this.colliderActiveEvents = colliderActiveEvents;
    this.continuousCollisionDetection = continuousCollisionDetection;
  }

  /**
   * Spawns a ball at the given location with the given velocity.
   * @param {THREE.Vector3} position Position to place the ball.
   * @param {THREE.Vector3} velocity Velocity of the ball.
   * @param {number} now Time when the ball is spawned.
   */
  spawnBallAt(
    position,
    velocity = new THREE.Vector3(),
    now = performance.now()
  ) {
    const ball = this.spheres[this.nextBall];
    ball.position.copy(position);
    ball.scale.setScalar(1.0);
    ball.opacity = 1.0;
    this._createRigidBody(
      this.nextBall,
      position,
      velocity,
      ball.geometry.parameters.radius
    );
    this.spawnTimes[this.nextBall] = now;
    this.nextBall = (this.nextBall + 1) % this.spheres.length;
    this.add(ball);
  }

  _createRigidBody(index, position, velocity, radius) {
    // Delete existing body if one already exists for this index
    if (this.rigidBodies[index] != null) {
      const existingBody = this.rigidBodies[index];
      this.blendedWorld.removeRigidBody(existingBody);
    }

    // Create new body
    const desc = this.RAPIER.RigidBodyDesc.dynamic()
      .setTranslation(position.x, position.y, position.z)
      .setLinvel(velocity.x, velocity.y, velocity.z)
      .setCcdEnabled(this.continuousCollisionDetection);
    const body = this.blendedWorld.createRigidBody(desc);
    const shape = this.RAPIER.ColliderDesc.ball(radius).setActiveEvents(
      this.colliderActiveEvents
    );
    const collider = this.blendedWorld.createCollider(shape, body);
    this.colliderHandleToIndex.set(collider.handle, index);
    this.rigidBodies[index] = body;
    this.colliders[index] = collider;
  }

  physicsStep(now = performance.now()) {
    for (let i = 0; i < this.spheres.length; i++) {
      const sphere = this.spheres[i];
      const body = this.rigidBodies[i];
      let spawnTime = this.spawnTimes[i];

      if (this.isBallActive(i) && body != null) {
        let ballVisibility = 1.0;
        const position = sphere.position.copy(body.translation());
        // If the ball falls behind the depth then adjust the spawnTime to begin
        // expiring the ball.

        // Use depth matrices if depth is enabled, otherwise fall back to camera matrices
        const viewMatrix = xb.depth?.enabled
          ? xb.depth.depthViewMatrices[0]
          : xb.core.camera.matrixWorldInverse;
        const projectionMatrix = xb.depth?.enabled
          ? xb.depth.depthProjectionMatrices[0]
          : xb.core.camera.projectionMatrix;

        const viewSpacePosition = this.viewSpacePosition
          .copy(position)
          .applyMatrix4(viewMatrix);
        const clipSpacePosition = this.clipSpacePosition
          .copy(viewSpacePosition)
          .applyMatrix4(projectionMatrix);
        const ballIsInView =
          -1.0 <= clipSpacePosition.x &&
          clipSpacePosition.x <= 1.0 &&
          -1.0 <= clipSpacePosition.y &&
          clipSpacePosition.y <= 1.0;
        if (ballIsInView && xb.depth.enabled) {
          const projectedPosition =
            xb.depth.getProjectedDepthViewPositionFromWorldPosition(
              position,
              this.projectedPosition
            );
          const distanceBehindDepth = Math.max(
            projectedPosition.z - viewSpacePosition.z,
            0.0
          );
          if (distanceBehindDepth > this.distanceThreshold) {
            const deflateAmount = Math.max(
              (distanceBehindDepth - this.distanceThreshold) /
                this.distanceFadeout,
              1.0
            );
            spawnTime = Math.min(
              spawnTime,
              now - this.liveDuration - this.deflateDuration * deflateAmount
            );
          }
        }

        // Compute the visibility if the ball has lived too long.
        if (now - spawnTime > this.liveDuration) {
          const timeSinceDeflateStarted = now - spawnTime - this.liveDuration;
          const deflateAmount = Math.min(
            1,
            timeSinceDeflateStarted / this.deflateDuration
          );
          ballVisibility = 1.0 - deflateAmount;
        }

        sphere.material.opacity = ballVisibility;

        if (ballVisibility < 0.001) {
          this.removeBall(i);
        } else {
          sphere.position.copy(body.translation());
          sphere.quaternion.copy(body.rotation());
        }
      }
    }
  }

  getIndexForColliderHandle(handle) {
    return this.colliderHandleToIndex.get(handle);
  }

  removeBall(index) {
    const ball = this.spheres[index];
    ball.material.opacity = 0.0;
    ball.scale.setScalar(0);
    const body = this.rigidBodies[index];
    if (body != null) {
      this.blendedWorld.removeRigidBody(body);
      this.rigidBodies[index] = null;
      this.colliders[index] = null;
    }
    this.remove(ball);
  }

  isBallActive(index) {
    return this.spheres[index].parent == this;
  }
}



const kTimeLiveMs = xb.getUrlParamInt('timeLiveMs', 3000);
const kDefalteMs = xb.getUrlParamInt('defalteMs', 200);
const kLightX = xb.getUrlParamFloat('lightX', 0);
const kLightY = xb.getUrlParamFloat('lightY', 500);
const kLightZ = xb.getUrlParamFloat('lightZ', -10);
const kRadius = xb.getUrlParamFloat('radius', 0.08);
const kBallsPerSecond = xb.getUrlParamFloat('ballsPerSecond', 30);
const kVelocityScale = xb.getUrlParamInt('velocityScale', 1.0);
const kNumSpheres = 100;
class BallPit extends xb.Script {
  constructor() {
    super();
    this.ballShooter = new BallShooter({
      numBalls: kNumSpheres,
      radius: kRadius,
      palette: palette,
      liveDuration: kTimeLiveMs,
      deflateDuration: kDefalteMs,
    });
    this.add(this.ballShooter);
    this.addLights();

    this.lastBallCreatedTimeForController = new Map();
    this.pointer = new THREE.Vector2();
    this.velocity = new THREE.Vector3();
  }

  update() {
    super.update();
    for (const controller of xb.core.input.controllers) {
      this.controllerUpdate(controller);
    }
  }

  // Adds hemisphere light for ambient lighting and directional light.
  addLights() {
    this.add(new THREE.HemisphereLight(0xbbbbbb, 0x888888, 3));
    const light = new THREE.DirectionalLight(0xffffff, 2);
    light.position.set(kLightX, kLightY, kLightZ);
    light.castShadow = true;
    light.shadow.mapSize.width = 2048; // Default is usually 1024
    light.shadow.mapSize.height = 2048; // Default is usually 1024
    this.add(light);
  }

  // Calculates pointer position in normalized device coordinates.
  updatePointerPosition(event) {
    // (-1 to +1) for both components
    this.pointer.x = (event.clientX / window.innerWidth) * 2 - 1;
    this.pointer.y = -(event.clientY / window.innerHeight) * 2 + 1;
    // scale pointer.x from [-1, 0] to [-1, 1]
    this.pointer.x = 1 + 2 * this.pointer.x;
  }

  onPointerDown(event) {
    this.updatePointerPosition(event);
    const cameras = xb.core.renderer.xr.getCamera().cameras;
    if (cameras.length == 0) return;
    const camera = cameras[0];
    // Spawn a ball slightly in front of the camera.
    const position = new THREE.Vector3(0.0, 0.0, -0.2)
      .applyQuaternion(camera.quaternion)
      .add(camera.position);
    const matrix = new THREE.Matrix4();
    matrix.setPosition(position.x, position.y, position.z);
    // Convert pointer position to angle based on the camera.
    const vector = new THREE.Vector4(this.pointer.x, this.pointer.y, 1.0, 1);
    const inverseProjectionMatrix = camera.projectionMatrix.clone().invert();
    vector.applyMatrix4(inverseProjectionMatrix);
    vector.multiplyScalar(1 / vector.w);
    this.velocity.copy(vector);
    this.velocity.normalize().multiplyScalar(4.0);
    this.velocity.applyQuaternion(camera.quaternion);
    this.ballShooter.spawnBallAt(position, this.velocity);
  }

  controllerUpdate(controller) {
    const now = performance.now();
    if (!this.lastBallCreatedTimeForController.has(controller)) {
      this.lastBallCreatedTimeForController.set(controller, -99);
    }
    if (
      controller.userData.selected &&
      now - this.lastBallCreatedTimeForController.get(controller) >=
        1000 / kBallsPerSecond
    ) {
      // Place this 8 cm in front of the hands.
      const newPosition = new THREE.Vector3(0.0, 0.0, -0.08)
        .applyQuaternion(controller.quaternion)
        .add(controller.position);

      this.velocity.set(0, 0, -5.0 * kVelocityScale);
      this.velocity.applyQuaternion(controller.quaternion);

      this.ballShooter.spawnBallAt(newPosition, this.velocity);

      this.lastBallCreatedTimeForController.set(controller, now);
    }
  }
}



const depthMeshColliderUpdateFps = xb.getUrlParamFloat(
  'depthMeshColliderUpdateFps',
  5
);

const useSceneMesh = xb.getUrlParamBool('scenemesh', false);
const sceneMeshDebug = xb.getUrlParamBool('scenemeshdebug', false);

const options = new xb.Options();
if (useSceneMesh) {
  options.world.enableMeshDetection();
  options.world.meshes.showDebugVisualizations = sceneMeshDebug;
} else {
  options.depth = new xb.DepthOptions(xb.xrDepthMeshPhysicsOptions);
  options.depth.depthMesh.colliderUpdateFps = depthMeshColliderUpdateFps;
  options.depth.matchDepthView = false;
}
options.reticles.enabled = false;
options.interaction.raycastMode = 'select';
options.physics.RAPIER = RAPIER;
options.setAppTitle('Ballpit');
options.setAppDescription('Fill your room with bouncing physics balls.');

// Initializes the scene, camera, xrRenderer, controls, and XR button.
async function start() {
  xb.add(new BallPit());
  await xb.init(options);
}

document.addEventListener('DOMContentLoaded', function () {
  start();
});

</script>
  </body>
</html>

```


### Sample: advanced/paint
File: `samples/advanced/paint/index.html`
```html
<!doctype html>
<html lang="en">
  <head>
    <title>Paint | XR Blocks</title>

    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=no"
    />
    <link type="text/css" rel="stylesheet" href="https://xrblocks.github.io/css/xr.css" />
    <script>
      window.litDisableBundleWarning = true;
    </script>
    <script type="importmap">
      {
        "imports": {
          "three": "https://cdn.jsdelivr.net/npm/three@0.184.0/build/three.module.js",
          "three/": "https://cdn.jsdelivr.net/npm/three@0.184.0/",
          "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.184.0/examples/jsm/",
          "lit": "https://esm.sh/lit@3.3.1",
          "lit/": "https://esm.sh/lit@3.3.1/",
          "@pmndrs/uikit": "https://cdn.jsdelivr.net/npm/@pmndrs/uikit@1.0.64/dist/index.min.js",
          "@pmndrs/uikit-pub-sub": "https://cdn.jsdelivr.net/npm/@pmndrs/uikit-pub-sub@1.0.64/dist/index.min.js",
          "@pmndrs/msdfonts": "https://cdn.jsdelivr.net/npm/@pmndrs/msdfonts@1.0.64/dist/index.min.js",
          "@preact/signals-core": "https://cdn.jsdelivr.net/npm/@preact/signals-core@1.14.0/dist/signals-core.mjs",
          "yoga-layout/load": "https://cdn.jsdelivr.net/npm/yoga-layout@3.2.1/dist/src/load.js",
          "xrblocks": "https://cdn.jsdelivr.net/npm/xrblocks@0.21.1/build/xrblocks.js",
          "xrblocks/addons/": "https://cdn.jsdelivr.net/npm/xrblocks@0.21.1/build/addons/"
        }
      }
    </script>
  </head>

  <body>
    <script type="module">
import * as THREE from 'three';
import {TubePainter} from 'three/addons/misc/TubePainter.js';
import * as xb from 'xrblocks';


/**
 * A remixed version of three.js's examples/webxr_xr_paint.html in XR Blocks.
 * PaintDemo is an example script for using pinch to paint in Android XR and
 * using clicks to draw in desktop simulated environments.
 */
class PaintDemo extends xb.Script {
  init() {
    this.add(new THREE.HemisphereLight(0xffffff, 0x666666, /*intensity=*/ 3));

    // Painting setup.
    this.painters = [];
    this.user = xb.core.user;

    for (let i = 0; i < this.user.controllers.length; ++i) {
      const painter = new TubePainter();
      this.painters.push(painter);
      this.add(painter.mesh);
    }

    // Adds pivotal points to indicate user's intents.
    this.user.enablePivots();
  }

  /**
   * Moves the painter to the pivot position when select starts.
   * @param {xb.SelectEvent} event
   */
  onSelectStart(event) {
    const id = event.source.controller.userData.id;
    const painter = this.painters[id];
    const cursor = this.user.getPivotPosition(id);
    painter.moveTo(cursor);
  }

  /**
   * Updates the painter's line to the current pivot position during selection.
   * @param {xb.SelectEvent} event
   */
  onSelecting(event) {
    const id = event.source.controller.userData.id;
    const painter = this.painters[id];
    const cursor = this.user.getPivotPosition(id);
    painter.lineTo(cursor);
    painter.update();
  }

  /**
   * Stores the initial position and scale of the controller when squeeze
   * starts.
   * @param {xb.SelectEvent} event
   */
  onSqueezeStart(event) {
    const controller = event.source.controller;
    const id = controller.userData.id;
    const data = this.user.data[id].squeeze;

    data.positionOnStart = controller.position.y;
    data.scaleOnStart = controller.position.y;
  }

  /**
   * Updates the scale of the controller's pivot based on the squeeze amount.
   * @param {xb.SelectEvent} event
   */
  onSqueezing(event) {
    const controller = event.source.controller;
    const id = controller.userData.id;
    const pivot = this.user.getPivot(id);
    const data = this.user.data[id].squeeze;

    const delta = (controller.position.y - data.positionOnStart) * 5;
    const scale = Math.max(0.1, data.scaleOnStart + delta);
    pivot.scale.setScalar(scale);
  }
}

/**
 * Entry point for the application.
 */
function start() {
  const options = new xb.Options();
  options.setAppTitle('XR Paint');
  options.setAppDescription(
    'Draw in space with a pinch, click, or controller.'
  );
  xb.add(new PaintDemo());
  xb.init(options);
}

document.addEventListener('DOMContentLoaded', start);

</script>
  </body>
</html>

```


### Sample: spatial_ui/modelviewer
File: `samples/spatial_ui/modelviewer/index.html`
```html
<!doctype html>
<html lang="en">
  <head>
    <title>Model Viewer | XR Blocks</title>

    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=no"
    />

    <link type="text/css" rel="stylesheet" href="https://xrblocks.github.io/css/xr.css" />
    <script>
      window.litDisableBundleWarning = true;
    </script>
    <script type="importmap">
      {
        "imports": {
          "three": "https://cdn.jsdelivr.net/npm/three@0.184.0/build/three.module.js",
          "three/": "https://cdn.jsdelivr.net/npm/three@0.184.0/",
          "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.184.0/examples/jsm/",
          "@pmndrs/uikit": "https://cdn.jsdelivr.net/npm/@pmndrs/uikit@1.0.64/dist/index.min.js",
          "@pmndrs/uikit-pub-sub": "https://cdn.jsdelivr.net/npm/@pmndrs/uikit-pub-sub@1.0.64/dist/index.min.js",
          "@pmndrs/msdfonts": "https://cdn.jsdelivr.net/npm/@pmndrs/msdfonts@1.0.64/dist/index.min.js",
          "@preact/signals-core": "https://cdn.jsdelivr.net/npm/@preact/signals-core@1.14.0/dist/signals-core.mjs",
          "yoga-layout/load": "https://cdn.jsdelivr.net/npm/yoga-layout@3.2.1/dist/src/load.js",
          "lit": "https://esm.sh/lit@3.3.1",
          "lit/": "https://esm.sh/lit@3.3.1/",
          "xrblocks": "https://cdn.jsdelivr.net/npm/xrblocks@0.21.1/build/xrblocks.js",
          "xrblocks/addons/": "https://cdn.jsdelivr.net/npm/xrblocks@0.21.1/build/addons/",
          "@sparkjsdev/spark": "https://sparkjs.dev/releases/spark/2.1.0/spark.module.js"
        }
      }
    </script>
  </head>

  <body>
    <div class="background-image" style="background-color: #000000"></div>
    <script type="module">
import * as xb from 'xrblocks';
import * as THREE from 'three';

// --- Inlined from ./ModelViewerScene.js ---

const kLightX = xb.getUrlParamFloat('lightX', 0);
const kLightY = xb.getUrlParamFloat('lightY', 500);
const kLightZ = xb.getUrlParamFloat('lightZ', -10);

const ASSETS_BASE_URL = 'https://cdn.jsdelivr.net/gh/xrblocks/assets@main/';
const PROPRIETARY_ASSETS_BASE_URL =
  'https://cdn.jsdelivr.net/gh/xrblocks/proprietary-assets@main/';
class ModelViewerScene extends xb.Script {
  loadedObjects = [];
  placedObjects = new Set();
  sessionStarted = false;
  torusMesh = null;
  globe = null;

  async init() {
    xb.core.input.addReticles();
    this.addLights();
    this.createModelFromObject();
    return Promise.all([
      this.createModelFromGLTF(),
      this.createModelFromAnimatedGLTF(),
      this.createModelFromSplat(),
      this.createModelInPanel(),
    ]);
  }

  addLights() {
    this.add(new THREE.HemisphereLight(0xbbbbbb, 0x888888, 3));
    const light = new THREE.DirectionalLight(0xffffff, 2);
    light.position.set(kLightX, kLightY, kLightZ);
    this.add(light);
  }

  update() {
    if (this.torusMesh) {
      this.torusMesh.rotation.x += 0.015;
      this.torusMesh.rotation.y += 0.015;
    }
    if (this.globe) this.globe.rotation.y += 0.005;
  }

  onSimulatorStarted() {
    this.onXRSessionStarted();
  }

  onXRSessionStarted() {
    this.sessionStarted = true;
    this.placeLoadedObjects();
  }

  placeLoadedObjects() {
    for (const model of this.loadedObjects) {
      this.placeObject(model);
    }
  }

  placeObject(model) {
    if (!this.sessionStarted || this.placedObjects.has(model)) return;
    this.placedObjects.add(model);
    return xb.world.placeOnHorizontalSurface(
      model,
      /*timeout*/ {
        seconds: 30,
      }
    );
  }

  createModelFromObject() {
    const model = new xb.ModelViewer();
    const torusMesh = new THREE.Mesh(
      new THREE.TorusKnotGeometry(0.1, 0.03, 100, 16),
      new THREE.MeshPhongMaterial({
        color: 0x34a853,
        shininess: 30,
        specular: 0x888888,
      })
    );
    this.torusMesh = torusMesh;
    model.setContent(torusMesh);
    model.position.set(-0.6, 0.5, -1.5);
    this.add(model);
    this.loadedObjects.push(model);
    this.placeObject(model);
  }

  async createModelFromGLTF() {
    const model = new xb.ModelViewer();
    this.add(model);
    await model.load({
      url: 'chess/chess_compressed.glb',
      path: PROPRIETARY_ASSETS_BASE_URL,
      scale: 0.009,
    });
    model.position.set(-0.2, 0.5, -1.5);
    this.loadedObjects.push(model);
    this.placeObject(model);
  }

  async createModelFromAnimatedGLTF() {
    const model = new xb.ModelViewer();
    this.add(model);
    await model.load({
      url: 'models/Cat/cat.gltf',
      path: ASSETS_BASE_URL,
    });
    model.position.set(0.9, 0.68, -0.95);
  }

  async createModelFromSplat() {
    const model = new xb.ModelViewer({castShadow: false, receiveShadow: false});
    this.add(model);
    await model.load({
      url: PROPRIETARY_ASSETS_BASE_URL + 'lego/lego.spz',
      scale: 0.6,
      rotation: {x: 0, y: Math.PI, z: 0},
    });
    model.position.set(0.6, 0.5, -1.5);
    this.loadedObjects.push(model);
    this.placeObject(model);
  }

  async createModelInPanel() {
    const modelGroup = new THREE.Group();
    modelGroup.position.set(0, 1.5, -2.0);
    this.add(modelGroup);

    const model = new xb.ModelViewer({
      manipulation: false,
      origin: 'center',
    });
    modelGroup.add(model);
    await model.load({
      url: 'earth/Earth_1_12756.glb',
      path: PROPRIETARY_ASSETS_BASE_URL,
      scale: 0.002,
      rotation: {x: 0, y: Math.PI, z: 0},
    });
    // Position and scale the model to fill a 1x1x1 space uniformly, centered on the panel.
    const size = new THREE.Box3()
      .setFromObject(model)
      .getSize(new THREE.Vector3());
    const maxDim = Math.max(size.x, size.y, size.z);
    if (maxDim > 0) {
      model.scale.setScalar(1 / maxDim);
      model.position.set(0, -(size.y / 2) / maxDim, 0);
    }
    model.manipulation = {
      actions: {rotate: {axis: 'y'}},
      handle: {action: 'rotate'},
    };
    this.globe = model;
  }
}



document.addEventListener('DOMContentLoaded', async () => {
  const modelViewerScene = new ModelViewerScene();
  xb.add(modelViewerScene);
  const options = new xb.Options();
  options.simulator.instructions.customInstructions = [
    {
      header: 'Model Viewer',
      videoSrc:
        xb.XR_BLOCKS_ASSETS_PATH +
        'samples/modelviewer/model_viewer_simulator_usage.webm',
      description:
        'Click or pinch the object to rotate. Drag the platform to move.',
    },
  ];
  options.setAppTitle('Model Viewer');
  options.world.enablePlaneDetection();
  await xb.init(options);
});

</script>
  </body>
</html>

```


### Sample: spatial_ui/ui
File: `samples/spatial_ui/ui/index.html`
```html
<!doctype html>
<html lang="en">
  <head>
    <title>Spatial UI | XR Blocks</title>

    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=no"
    />
    <link type="text/css" rel="stylesheet" href="https://xrblocks.github.io/css/xr.css" />
    <script>
      window.litDisableBundleWarning = true;
    </script>
    <script type="importmap">
      {
        "imports": {
          "three": "https://cdn.jsdelivr.net/npm/three@0.184.0/build/three.module.js",
          "three/": "https://cdn.jsdelivr.net/npm/three@0.184.0/",
          "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.184.0/examples/jsm/",
          "lit": "https://esm.sh/lit@3.3.1",
          "lit/": "https://esm.sh/lit@3.3.1/",
          "@pmndrs/uikit": "https://cdn.jsdelivr.net/npm/@pmndrs/uikit@1.0.64/dist/index.min.js",
          "@pmndrs/uikit-pub-sub": "https://cdn.jsdelivr.net/npm/@pmndrs/uikit-pub-sub@1.0.64/dist/index.min.js",
          "@pmndrs/msdfonts": "https://cdn.jsdelivr.net/npm/@pmndrs/msdfonts@1.0.64/dist/index.min.js",
          "@preact/signals-core": "https://cdn.jsdelivr.net/npm/@preact/signals-core@1.14.0/dist/signals-core.mjs",
          "yoga-layout/load": "https://cdn.jsdelivr.net/npm/yoga-layout@3.2.1/dist/src/load.js",
          "xrblocks": "https://cdn.jsdelivr.net/npm/xrblocks@0.21.1/build/xrblocks.js"
        }
      }
    </script>
  </head>

  <body>
    <script type="module">
      import * as THREE from 'three';
      import * as xb from 'xrblocks';

      const CARD_SIZE = {width: 0.56, height: 'auto'};

      function createHeader(icon, title, subtitle) {
        return new xb.UIPanel({
          style: {
            width: '100%',
            flexDirection: 'row',
            alignItems: 'center',
            gap: 14,
          },
          children: [
            new xb.UIIcon({
              icon,
              style: {width: 44, height: 44, color: '#ffffff'},
            }),
            new xb.UIPanel({
              style: {
                flexGrow: 1,
                flexDirection: 'column',
                alignItems: 'flex-start',
                gap: 4,
              },
              children: [
                new xb.UIText({
                  text: title,
                  style: {fontSize: 28, fontWeight: 'bold'},
                }),
                new xb.UIText({
                  text: subtitle,
                  style: {fontSize: 15, opacity: 0.72},
                }),
              ],
            }),
          ],
        });
      }

      function createFeature(icon, title, description) {
        return new xb.UIPanel({
          style: {
            width: '100%',
            flexDirection: 'row',
            alignItems: 'center',
            gap: 14,
            padding: 12,
            backgroundColor: 'rgba(255, 255, 255, 0.07)',
            borderRadius: 18,
          },
          children: [
            new xb.UIIcon({
              icon,
              style: {width: 34, height: 34, color: '#ffffff'},
            }),
            new xb.UIPanel({
              style: {
                flexGrow: 1,
                flexDirection: 'column',
                alignItems: 'flex-start',
                gap: 4,
              },
              children: [
                new xb.UIText({
                  text: title,
                  style: {fontSize: 18, fontWeight: 'bold'},
                }),
                new xb.UIText({
                  text: description,
                  style: {fontSize: 14, opacity: 0.72},
                }),
              ],
            }),
          ],
        });
      }

      class MainScript extends xb.Script {
        init() {
          const light = new THREE.HemisphereLight(0xffffff, 0x666666, 2.6);
          this.add(light);

          const lightPreview = new THREE.Mesh(
            new THREE.SphereGeometry(0.12, 32, 16),
            new THREE.MeshStandardMaterial({color: 0x55ccff})
          );
          lightPreview.position.set(0, 0.75, -1.1);
          this.add(lightPreview);

          const activity = new xb.UIText({
            text: 'Choose an action.',
            style: {
              width: '100%',
              fontSize: 16,
              textAlign: 'center',
              opacity: 0.72,
            },
          });

          const exploreCard = new xb.UICard({
            size: CARD_SIZE,
            manipulation: true,
            edge: {scale: true},
            style: {justifyContent: 'flex-start', gap: 18},
            children: [
              createHeader('explore', 'Explore', 'Images, layout, and actions'),
              new xb.UIImage({
                src: 'https://picsum.photos/id/1018/900/600',
                ariaLabel: 'Mountain lake landscape',
                style: {
                  width: '92%',
                  height: 230,
                  alignSelf: 'center',
                  objectFit: 'cover',
                  borderRadius: 22,
                },
              }),
              new xb.UIText({
                text: 'Build spatial interfaces from familiar flex layouts.',
                style: {fontSize: 18, lineHeight: 1.35},
              }),
              new xb.UIText({
                text: 'Emojis 🚀✨',
                style: {fontSize: 18, lineHeight: 1.35},
              }),
              new xb.UIText({
                text: '你好！',
                style: {fontSize: 18, lineHeight: 1.35},
              }),
              new xb.UIPanel({
                style: {width: '100%', flexDirection: 'row', gap: 12},
                children: [
                  new xb.UIButton({
                    label: 'Favorite',
                    icon: 'favorite',
                    style: {flexGrow: 1},
                    onClick: () => (activity.text = 'Saved to favorites.'),
                  }),
                  new xb.UIButton({
                    label: 'Share',
                    icon: 'share',
                    style: {flexGrow: 1},
                    onClick: () => (activity.text = 'Share action selected.'),
                  }),
                ],
              }),
              activity,
            ],
          });

          const lightValue = new xb.UIText({
            text: '65%',
            style: {fontSize: 22, fontWeight: 'bold'},
          });
          const lightSlider = new xb.UISlider({
            ariaLabel: 'Scene light level',
            min: 0,
            max: 100,
            step: 5,
            value: 65,
            style: {width: '100%', height: 48},
            onInput: (value) => {
              lightValue.text = `${value}%`;
              light.intensity = value * 0.04;
            },
          });

          let colorful = false;
          let themeButton;
          themeButton = new xb.UIButton({
            label: 'Try colorful',
            icon: 'palette',
            onClick: () => {
              colorful = !colorful;
              xb.ui.theme = colorful ? 'colorful' : 'grayGlass';
              themeButton.label = colorful ? 'Use glass' : 'Try colorful';
            },
          });

          const tuneCard = new xb.UICard({
            size: CARD_SIZE,
            manipulation: true,
            edge: {scale: true},
            style: {justifyContent: 'flex-start', gap: 18},
            children: [
              createHeader('tune', 'Tune', 'Live controls and theme state'),
              new xb.UIPanel({
                style: {
                  width: '100%',
                  flexDirection: 'row',
                  justifyContent: 'space-between',
                  alignItems: 'center',
                  marginTop: 8,
                },
                children: [
                  new xb.UIText({
                    text: 'Scene light',
                    style: {fontSize: 20, fontWeight: 'bold'},
                  }),
                  lightValue,
                ],
              }),
              lightSlider,
              new xb.UIText({
                text: 'Drag the slider to update the scene immediately.',
                style: {fontSize: 16, lineHeight: 1.4, opacity: 0.72},
              }),
              themeButton,
              new xb.UIButton({
                label: 'Unavailable action',
                icon: 'block',
                disabled: true,
              }),
            ],
          });

          let cards;
          const resetDemo = () => {
            colorful = false;
            xb.ui.theme = 'grayGlass';
            themeButton.label = 'Try colorful';
            activity.text = 'Choose an action.';
            lightSlider.value = 65;
            lightValue.text = '65%';
            light.intensity = 2.6;
            cards.forEach((card) => {
              const initial = card.userData.initialTransform;
              card.position.copy(initial.position);
              card.quaternion.copy(initial.quaternion);
              card.scale.copy(initial.scale);
            });
          };

          const featuresCard = new xb.UICard({
            size: CARD_SIZE,
            manipulation: true,
            edge: {scale: true},
            style: {justifyContent: 'flex-start', gap: 18},
            children: [
              createHeader('view_in_ar', 'Spatial', 'Interaction built in'),
              createFeature(
                'open_with',
                'Move',
                'Drag any card through space.'
              ),
              createFeature(
                'aspect_ratio',
                'Resize',
                'Grab a card edge to scale.'
              ),
              createFeature(
                'widgets',
                'Compose',
                'Nest controls with flex layout.'
              ),
              new xb.UIText({
                text: 'Point, pinch, click, or use a controller.',
                style: {fontSize: 16, textAlign: 'center', opacity: 0.72},
              }),
              new xb.UIButton({
                label: 'Reset demo',
                icon: 'restart_alt',
                onClick: resetDemo,
              }),
            ],
          });

          cards = [exploreCard, tuneCard, featuresCard];
          const positions = [-0.64, 0, 0.64];
          const rotations = [0.18, 0, -0.18];
          cards.forEach((card, index) => {
            card.name = ['Explore card', 'Tune card', 'Features card'][index];
            card.position.set(positions[index], 1.48, -1.2);
            card.rotation.y = rotations[index];
            card.userData.initialTransform = {
              position: card.position.clone(),
              quaternion: card.quaternion.clone(),
              scale: card.scale.clone(),
            };
            this.add(card);
          });
        }
      }

      document.addEventListener('DOMContentLoaded', () => {
        const options = new xb.Options();
        options.setAppTitle('Spatial UI');
        xb.add(new MainScript());
        xb.init(options);
      });
    </script>
  </body>
</html>

```


### Sample: xr_ai/gemini_icebreakers
File: `samples/xr_ai/gemini_icebreakers/index.html`
```html
<!doctype html>
<html lang="en">
  <head>
    <title>Gemini Icebreakers | XR Blocks</title>

    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=no"
    />
    <link type="text/css" rel="stylesheet" href="https://xrblocks.github.io/css/xr.css" />
    <script>
      window.litDisableBundleWarning = true;
    </script>
    <script type="importmap">
      {
        "imports": {
          "three": "https://cdn.jsdelivr.net/npm/three@0.184.0/build/three.module.js",
          "three/": "https://cdn.jsdelivr.net/npm/three@0.184.0/",
          "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.184.0/examples/jsm/",
          "lit": "https://esm.sh/lit@3.3.1",
          "lit/": "https://esm.sh/lit@3.3.1/",
          "@pmndrs/uikit": "https://cdn.jsdelivr.net/npm/@pmndrs/uikit@1.0.64/dist/index.min.js",
          "@pmndrs/uikit-pub-sub": "https://cdn.jsdelivr.net/npm/@pmndrs/uikit-pub-sub@1.0.64/dist/index.min.js",
          "@pmndrs/msdfonts": "https://cdn.jsdelivr.net/npm/@pmndrs/msdfonts@1.0.64/dist/index.min.js",
          "@preact/signals-core": "https://cdn.jsdelivr.net/npm/@preact/signals-core@1.14.0/dist/signals-core.mjs",
          "yoga-layout/load": "https://cdn.jsdelivr.net/npm/yoga-layout@3.2.1/dist/src/load.js",
          "xrblocks": "https://cdn.jsdelivr.net/npm/xrblocks@0.21.1/build/xrblocks.js",
          "xrblocks/addons/": "https://cdn.jsdelivr.net/npm/xrblocks@0.21.1/build/addons/",
          "@google/genai": "https://cdn.jsdelivr.net/npm/@google/genai/+esm"
        }
      }
    </script>
  </head>

  <body>
    <div
      id="background-image"
      class="background-image"
      style="background-image: url('textures/background.webp')"
    ></div>
    <script type="module">
import * as xb from 'xrblocks';
import * as THREE from 'three';

// --- Inlined from ./GeminiIcebreakers.js ---
// --- Inlined from ./EarthAnimation.js ---
/**
 * Animates the earth model.
 */
class EarthAnimation {
  model = null;
  speed = 0.2;

  setModel(model) {
    this.model = model;
  }

  update(deltaTime) {
    if (this.model) this.model.rotation.y += this.speed * deltaTime;
  }
}


// --- Inlined from ./TranscriptionManager.js ---
class TranscriptionManager {
  constructor(responseDisplay) {
    this.responseDisplay = responseDisplay;
    this.currentInputText = '';
    this.currentOutputText = '';
    this.conversationHistory = [];
  }

  handleInputTranscription(text) {
    if (!text) return;
    this.currentInputText += text;
    this.updateLiveDisplay();
  }

  handleOutputTranscription(text) {
    if (!text) return;
    this.currentOutputText += text;
    this.updateLiveDisplay();
  }

  finalizeTurn() {
    if (this.currentInputText.trim()) {
      this.conversationHistory.push({
        speaker: 'You',
        text: this.currentInputText.trim(),
      });
    }
    if (this.currentOutputText.trim()) {
      this.conversationHistory.push({
        speaker: 'AI',
        text: this.currentOutputText.trim(),
      });
    }
    this.currentInputText = '';
    this.currentOutputText = '';
    this.updateFinalDisplay();
  }

  updateLiveDisplay() {
    let displayText = '';
    for (const entry of this.conversationHistory.slice(-2)) {
      displayText += `${entry.speaker}: ${entry.text}\n\n`;
    }
    if (this.currentInputText.trim()) {
      displayText += `You: ${this.currentInputText}`;
    }
    if (this.currentOutputText.trim()) {
      if (this.currentInputText.trim()) displayText += '\n\n';
      displayText += `AI: ${this.currentOutputText}`;
    }
    this.render(displayText);
  }

  updateFinalDisplay() {
    let displayText = '';
    for (const entry of this.conversationHistory) {
      displayText += `${entry.speaker}: ${entry.text}\n\n`;
    }
    this.render(displayText);
  }

  clear() {
    this.currentInputText = '';
    this.currentOutputText = '';
    this.conversationHistory = [];
  }

  render(text) {
    if (this.responseDisplay) this.responseDisplay.text = text.trim();
  }
}



const ASSETS_BASE_URL = 'https://cdn.jsdelivr.net/gh/xrblocks/assets@main/';
const PROPRIETARY_ASSETS_BASE_URL =
  'https://cdn.jsdelivr.net/gh/xrblocks/proprietary-assets@main/';

const PANEL_WIDTH = 889;
const PANEL_HEIGHT = 625;
const PANEL_PIXEL_SIZE = 0.0026 / 3;
const CONTROLS_HEIGHT = 192;
const PROMPT_GRADIENT = [
  {position: 0, color: '#207cff'},
  {position: 0.25, color: '#098efb'},
  {position: 0.75, color: '#ad87eb'},
  {position: 1, color: '#ee4d5e'},
];

const JOURNEYS = [
  {
    title: 'Mona Lisa',
    source: {
      url: 'mona_lisa_picture_frame_compressed.glb',
      path: PROPRIETARY_ASSETS_BASE_URL + 'monalisa/',
      scale: 1.25,
    },
    prompt: '“What is she smiling about?”',
  },
  {
    title: 'Chess',
    source: {
      url: 'chess_compressed.glb',
      path: PROPRIETARY_ASSETS_BASE_URL + 'chess/',
      scale: 0.009,
      rotation: {x: THREE.MathUtils.degToRad(80), y: 0, z: 0},
    },
    prompt: '“What is a good strategy for this game?”',
  },
  {
    title: 'Kitchen Challenge',
    source: {
      url: 'vegetable_on_board_compressed.glb',
      path: PROPRIETARY_ASSETS_BASE_URL + 'vegetable_on_board/',
      scale: 0.28,
      rotation: {x: THREE.MathUtils.degToRad(75), y: 0, z: 0},
    },
    prompt:
      '“What is the most unexpected dish you could make with these ingredients?”',
  },
  {
    title: 'Dinosaur',
    source: {
      url: 'Parasaurolophus.glb',
      path: ASSETS_BASE_URL + 'models/',
      scale: 0.094,
    },
    prompt: '“If this dinosaur could talk, what would it say?”',
  },
  {
    title: 'Planet Earth',
    source: {
      url: 'Earth_1_12756.glb',
      path: PROPRIETARY_ASSETS_BASE_URL + 'earth/',
      scale: 0.00031,
    },
    animation: new EarthAnimation(),
    prompt: '“How big would I need to be to hold this in my hands?”',
  },
];

class GradientPrompt extends xb.UIImage {
  constructor() {
    const canvas = document.createElement('canvas');
    canvas.width = 1600;
    canvas.height = 260;
    const texture = new THREE.CanvasTexture(canvas);
    texture.colorSpace = THREE.SRGBColorSpace;
    texture.minFilter = THREE.LinearFilter;
    texture.magFilter = THREE.LinearFilter;
    super({
      src: texture,
      ariaLabel: 'Icebreaker prompt',
      pointerEvents: 'none',
      style: {
        position: 'absolute',
        top: 15,
        left: 95,
        width: 699,
        height: 124,
        objectFit: 'fill',
      },
    });
    this.canvas = canvas;
    this.context = canvas.getContext('2d');
    this.texture = texture;
    this._text = '';
  }

  get text() {
    return this._text;
  }

  set text(value) {
    this._text = value;
    this.draw();
  }

  draw() {
    const {canvas, context, texture} = this;
    if (!context) return;
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.font = '400 72px Roboto, Arial, sans-serif';
    context.textAlign = 'center';
    context.textBaseline = 'middle';

    const gradient = context.createLinearGradient(180, 0, 1420, 0);
    for (const stop of PROMPT_GRADIENT) {
      gradient.addColorStop(stop.position, stop.color);
    }
    context.fillStyle = gradient;

    const lines = wrapCanvasText(context, this._text, 1420);
    const lineHeight = 82;
    const firstLineY =
      canvas.height / 2 - ((lines.length - 1) * lineHeight) / 2;
    lines.forEach((line, index) => {
      context.fillText(line, canvas.width / 2, firstLineY + index * lineHeight);
    });
    texture.needsUpdate = true;
  }

  disposeTexture() {
    this.texture.dispose();
  }
}

function wrapCanvasText(context, text, maxWidth) {
  const words = text.split(/\s+/u);
  const lines = [];
  let line = '';
  for (const word of words) {
    const candidate = line ? `${line} ${word}` : word;
    if (line && context.measureText(candidate).width > maxWidth) {
      lines.push(line);
      line = word;
    } else {
      line = candidate;
    }
  }
  if (line) lines.push(line);
  return lines.length > 0 ? lines : [''];
}
class GeminiIcebreakers extends xb.Script {
  constructor() {
    super();
    this.journeyIndex = 0;
    this.isAIRunning = false;
    this.screenshotInterval = null;
    this.activeAnimation = null;
    this.transcriptionManager = null;
    this.micBobTime = 0;
    this.buildScene();
  }

  buildScene() {
    this.modelViewer = new xb.ModelViewer({
      origin: 'center',
      manipulation: {
        actions: {
          rotate: {axis: 'y'},
          scale: {minScale: 0.6, maxScale: 1.8},
        },
        handle: {action: xb.ManipulationAction.Rotate},
      },
    });
    this.modelViewer.position.set(0.05, 1.68, -1.0);
    this.add(this.modelViewer);

    this.promptText = new GradientPrompt();
    this.transcriptText = new xb.UIText({
      text: '',
      visible: false,
      pointerEvents: 'none',
      style: {
        position: 'absolute',
        top: 24,
        left: 110,
        width: 669,
        height: 132,
        fontSize: 24,
        lineHeight: 1.2,
        textAlign: 'left',
        verticalAlign: 'bottom',
        whiteSpace: 'pre-line',
        overflow: 'hidden',
      },
    });

    this.backButton = this.createIconButton(
      'arrow_back',
      'Previous icebreaker',
      () => void this.showJourney(this.journeyIndex - 1),
      {left: 36, top: 70, size: 54, iconSize: 36}
    );
    this.micButton = this.createIconButton(
      'mic',
      'Start Gemini Live',
      () => void this.toggleGeminiLive(),
      {right: 98, bottom: CONTROLS_HEIGHT + 47, size: 74, iconSize: 34}
    );
    this.forwardButton = this.createIconButton(
      'arrow_forward',
      'Next icebreaker',
      () => void this.showJourney(this.journeyIndex + 1),
      {right: 36, top: 70, size: 54, iconSize: 36}
    );

    this.pageDots = JOURNEYS.map(
      (_, index) =>
        new xb.UIPanel({
          pointerEvents: 'none',
          style: {
            width: 8,
            height: 8,
            borderRadius: 4,
            backgroundColor: index === 0 ? '#ffffff' : 'transparent',
            borderColor: '#ffffff',
            borderWidth: 1.5,
          },
        })
    );
    const pageIndicator = new xb.UIPanel({
      pointerEvents: 'none',
      style: {
        position: 'absolute',
        bottom: 27,
        left: 0,
        right: 0,
        height: 14,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        gap: 6,
      },
      children: this.pageDots,
    });

    const controls = new xb.UIPanel({
      style: {
        position: 'absolute',
        bottom: 0,
        left: 0,
        width: PANEL_WIDTH,
        height: CONTROLS_HEIGHT,
        backgroundColor: 'rgba(0, 0, 0, 0.85)',
        borderRadius: 12,
      },
      children: [
        this.promptText,
        this.transcriptText,
        this.backButton,
        this.forwardButton,
        pageIndicator,
      ],
    });
    this.closeButton = this.createIconButton(
      'close',
      'Close icebreakers',
      () => {
        this.card.visible = false;
      },
      {
        left: -9,
        bottom: CONTROLS_HEIGHT + 6,
        size: 52,
        iconSize: 32,
      }
    );
    controls.add(this.closeButton, this.micButton);
    this.card = new xb.UICard({
      size: {
        width: PANEL_WIDTH * PANEL_PIXEL_SIZE,
        height: PANEL_HEIGHT * PANEL_PIXEL_SIZE,
      },
      pixelSize: PANEL_PIXEL_SIZE,
      appearance: 'none',
      style: {backgroundColor: 'transparent'},
      children: [controls],
    });
    this.card.position.set(0.05, 1.54, -1.0);
    this.add(this.card);
  }

  createIconButton(icon, ariaLabel, onClick, layout) {
    return new xb.UIButton({
      ariaLabel,
      onClick,
      children: [
        new xb.UIIcon({
          icon,
          filled: icon === 'mic',
          pointerEvents: 'none',
          style: {
            width: layout.iconSize,
            height: layout.iconSize,
            color: '#ffffff',
          },
        }),
      ],
      style: {
        position: 'absolute',
        width: layout.size,
        height: layout.size,
        ...(layout.top === undefined ? {} : {top: layout.top}),
        ...(layout.right === undefined ? {} : {right: layout.right}),
        ...(layout.bottom === undefined ? {} : {bottom: layout.bottom}),
        ...(layout.left === undefined ? {} : {left: layout.left}),
        ...(icon === 'mic' ? {transform: {translateY: 0}} : {}),
        justifyContent: 'center',
        alignItems: 'center',
        padding: 0,
        paddingTop: 0,
        paddingRight: 0,
        paddingBottom: 0,
        paddingLeft: 0,
        backgroundColor: 'transparent',
        borderColor: 'transparent',
        borderWidth: 0,
        borderRadius: layout.size / 2,
        ':hover': {backgroundColor: 'rgba(255, 255, 255, 0.12)'},
        ':active': {backgroundColor: 'rgba(255, 255, 255, 0.22)'},
        ':disabled': {backgroundColor: 'transparent', color: '#ffffff'},
      },
    });
  }

  async init() {
    this.ai = xb.core.ai;
    this.sound = xb.core.sound;
    this.screenshotSynthesizer = xb.core.screenshotSynthesizer;

    this.add(new THREE.HemisphereLight(0x888877, 0x777788, 3));
    const light = new THREE.DirectionalLight(0xffffff, 5);
    light.position.set(-0.5, 4, 1);
    this.add(light);

    this.micButton.visible = Boolean(this.ai?.isAvailable());
    await this.showJourney(0);
  }

  async showJourney(index) {
    if (this.isAIRunning || this.backButton.disabled) return;

    const nextIndex = (index + JOURNEYS.length) % JOURNEYS.length;
    const journey = JOURNEYS[nextIndex];
    this.backButton.disabled = true;
    this.forwardButton.disabled = true;
    this.activeAnimation?.setModel(null);
    this.activeAnimation = null;
    this.modelViewer.rotation.set(0, 0, 0);

    try {
      await this.modelViewer.load(journey.source);
      this.journeyIndex = nextIndex;
      this.promptText.text = journey.prompt;
      this.updatePageIndicator();
      this.activeAnimation = journey.animation ?? null;
      this.activeAnimation?.setModel(this.modelViewer);
    } catch (error) {
      console.error('Could not load icebreaker model:', error);
      this.promptText.text = 'Could not load this model';
    } finally {
      this.backButton.disabled = false;
      this.forwardButton.disabled = false;
    }
  }

  update() {
    const deltaTime = xb.getDeltaTime();
    this.activeAnimation?.update(deltaTime);

    if (this.isAIRunning) {
      this.micBobTime += deltaTime;
      this.micButton.style.transform.translateY =
        Math.sin(this.micBobTime * 2) * 6;
    } else if (this.micButton.style.transform.translateY !== 0) {
      this.micBobTime = 0;
      this.micButton.style.transform.translateY = 0;
    }
  }

  async toggleGeminiLive() {
    if (!this.ai?.isAvailable() || this.micButton.disabled) return;
    this.micButton.disabled = true;
    try {
      if (this.isAIRunning) await this.stopGeminiLive();
      else await this.startGeminiLive();
    } finally {
      this.micButton.disabled = !this.ai?.isAvailable();
    }
  }

  async startGeminiLive() {
    if (this.isAIRunning) return;
    this.setTranscriptMode(true);
    this.transcriptText.text = 'Listening...';
    this.transcriptionManager = new TranscriptionManager(this.transcriptText);

    try {
      await this.sound.enableAudio();
      await this.startLiveAI();
      this.isAIRunning = true;
      this.backButton.disabled = true;
      this.forwardButton.disabled = true;
      this.micButton.ariaLabel = 'Stop Gemini Live';
      this.startScreenshotCapture();
    } catch (error) {
      console.error('Failed to start AI session:', error);
      this.restorePrompt();
      await this.ai?.stopLiveSession?.();
    }
  }

  async stopGeminiLive() {
    if (!this.isAIRunning) return;
    this.isAIRunning = false;
    this.stopScreenshotCapture();
    await this.ai?.stopLiveSession?.();
    this.sound.stopAIAudio?.();
    this.transcriptionManager?.clear();
    this.transcriptionManager = null;
    this.backButton.disabled = false;
    this.forwardButton.disabled = false;
    this.micButton.ariaLabel = 'Start Gemini Live';
    this.restorePrompt();
  }

  async startLiveAI() {
    return new Promise((resolve, reject) => {
      void this.ai.setLiveCallbacks({
        onopen: resolve,
        onmessage: (message) => this.handleAIMessage(message),
        onerror: reject,
        onclose: () => {
          if (this.isAIRunning) void this.stopGeminiLive();
        },
      });
      this.ai.startLiveSession().catch(reject);
    });
  }

  handleAIMessage(message) {
    if (message.data) void this.sound.playAIAudio(message.data);

    const content = message.serverContent;
    if (!content) return;
    if (content.inputTranscription?.text) {
      this.transcriptionManager?.handleInputTranscription(
        content.inputTranscription.text
      );
    }
    if (content.outputTranscription?.text) {
      this.transcriptionManager?.handleOutputTranscription(
        content.outputTranscription.text
      );
    }
    if (content.turnComplete) this.transcriptionManager?.finalizeTurn();
  }

  startScreenshotCapture() {
    this.stopScreenshotCapture();
    this.screenshotInterval = window.setInterval(async () => {
      try {
        const image = await this.screenshotSynthesizer.getScreenshot();
        if (!image) return;
        const data = image.startsWith('data:') ? image.split(',')[1] : image;
        this.ai.sendRealtimeInput({
          video: {data, mimeType: 'image/png'},
        });
      } catch (error) {
        console.warn('Could not send the XR view to Gemini:', error);
        await this.stopGeminiLive();
      }
    }, 1000);
  }

  stopScreenshotCapture() {
    window.clearInterval(this.screenshotInterval);
    this.screenshotInterval = null;
  }

  restorePrompt() {
    this.setTranscriptMode(false);
    this.promptText.text = JOURNEYS[this.journeyIndex].prompt;
  }

  setTranscriptMode(active) {
    this.promptText.visible = !active;
    this.transcriptText.visible = active;
  }

  updatePageIndicator() {
    for (let index = 0; index < this.pageDots.length; index++) {
      this.pageDots[index].style.backgroundColor =
        index === this.journeyIndex ? '#ffffff' : 'transparent';
    }
  }

  dispose() {
    this.stopScreenshotCapture();
    this.activeAnimation?.setModel(null);
    this.promptText.disposeTexture();
    if (this.isAIRunning) void this.ai?.stopLiveSession?.();
  }
}



const options = new xb.Options();
options.enableAI();
options.ai.promptForApiKey = true;
options.enableCamera();
options.permissions.microphone = true;
options.controllers.visualizeRays = false;
options.setAppTitle('Gemini Icebreakers');
options.setAppDescription('Explore 3D conversation starters with Gemini Live.');

async function start() {
  xb.add(new GeminiIcebreakers());
  await xb.init(options);
}

document.addEventListener('DOMContentLoaded', () => void start());

</script>
  </body>
</html>

```


### Sample: xr_interaction/hand_gestures
File: `samples/xr_interaction/hand_gestures/index.html`
```html
<!doctype html>
<html lang="en">
  <head>
    <title>Custom Hand Gestures | XR Blocks</title>

    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=no"
    />

    <link type="text/css" rel="stylesheet" href="https://xrblocks.github.io/css/xr.css" />
    <script>
      window.litDisableBundleWarning = true;
    </script>
    <script type="importmap">
      {
        "imports": {
          "three": "https://cdn.jsdelivr.net/npm/three@0.184.0/build/three.module.js",
          "three/": "https://cdn.jsdelivr.net/npm/three@0.184.0/",
          "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.184.0/examples/jsm/",
          "@pmndrs/uikit": "https://cdn.jsdelivr.net/npm/@pmndrs/uikit@1.0.64/dist/index.min.js",
          "@pmndrs/uikit-pub-sub": "https://cdn.jsdelivr.net/npm/@pmndrs/uikit-pub-sub@1.0.64/dist/index.min.js",
          "@pmndrs/msdfonts": "https://cdn.jsdelivr.net/npm/@pmndrs/msdfonts@1.0.64/dist/index.min.js",
          "@preact/signals-core": "https://cdn.jsdelivr.net/npm/@preact/signals-core@1.14.0/dist/signals-core.mjs",
          "yoga-layout/load": "https://cdn.jsdelivr.net/npm/yoga-layout@3.2.1/dist/src/load.js",
          "@tensorflow/tfjs-core": "https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-core/+esm",
          "@tensorflow/tfjs": "https://cdn.jsdelivr.net/npm/@tensorflow/tfjs/+esm",
          "@tensorflow/tfjs-backend-webgpu": "https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-backend-webgpu/+esm",
          "@litertjs/core": "https://unpkg.com/@litertjs/core@0.2.1",
          "@litertjs/tfjs-interop": "https://unpkg.com/@litertjs/tfjs-interop@1.0.1",
          "@litertjs/wasm-utils": "https://unpkg.com/@litertjs/wasm-utils@0.2.1",
          "lit": "https://esm.sh/lit@3.3.1",
          "lit/": "https://esm.sh/lit@3.3.1/",
          "xrblocks": "https://cdn.jsdelivr.net/npm/xrblocks@0.21.1/build/xrblocks.js",
          "xrblocks/addons/": "https://cdn.jsdelivr.net/npm/xrblocks@0.21.1/build/addons/"
        }
      }
    </script>
  </head>

  <body>
    <script type="module">
import * as xb from 'xrblocks';
import {loadLiteRt, setWebGpuDevice} from '@litertjs/core';
import {runWithTfjsTensors} from '@litertjs/tfjs-interop';
import * as tf from '@tensorflow/tfjs';
import * as THREE from 'three';

// --- Inlined from ./HandGestureDemo.js ---
// Imports LiteRt: https://ai.google.dev/edge/litert/web/get_started
// TensorFlow.js + WebGPU backend
import '@tensorflow/tfjs-backend-webgpu';

const GESTURE_LABELS = [
  'OTHER',
  'FIST',
  'THUMB UP',
  'THUMB DOWN',
  'POINT',
  'VICTORY',
  'ROCK',
  'SHAKA',
  'GESTURE_LABEL_MAX_ENUM',
];

const GESTURE_NAMES = [
  'other',
  'fist',
  'thumbs-up',
  'thumbs-down',
  'point',
  'victory',
  'rock',
  'shaka',
  'unknown',
];

const GESTURE_IMAGES = [
  'images/empty.png',
  'images/fist.png',
  'images/thumb.png',
  'images/thumb_down.png',
  'images/point.png',
  'images/victory.png',
  'images/rock.png',
  'images/shaka.png',
  'images/error.png',
];

const UNKNOWN_GESTURE = 8;
class CustomGestureRecognizer {
  constructor() {
    this.modelPath =
      'https://cdn.jsdelivr.net/gh/xrblocks/assets@main/tflite_models/gestures/xr_emoji.tflite';
    this.modelState = 'None';
    this.model = null;
    this.loadingPromise = null;
  }

  async init() {
    this.loadingPromise ??= this.setBackendAndLoadModel();
  }

  getGestureConfigurations() {
    return {
      fist: {enabled: true},
      'thumbs-up': {enabled: true},
      'thumbs-down': {enabled: true},
      point: {enabled: true},
      victory: {enabled: true},
      rock: {enabled: true},
      shaka: {enabled: true},
    };
  }

  async setBackendAndLoadModel() {
    this.modelState = 'Loading';
    try {
      await tf.setBackend('webgpu');
      await tf.ready();

      const wasmPath = 'https://unpkg.com/@litertjs/core@0.2.1/wasm/';
      const liteRt = await loadLiteRt(wasmPath);
      const backend = tf.backend();
      setWebGpuDevice(backend.device);

      await this.loadModel(liteRt);

      if (!this.model) {
        this.modelState = 'Error';
        return;
      }
      console.log('Model Details: ', this.model.getInputDetails());
      this.modelState = 'Ready';
    } catch (error) {
      this.modelState = 'Error';
      console.error('Failed to load model or backend:', error);
    }
  }

  async loadModel(liteRt) {
    try {
      this.model = await liteRt.loadAndCompile(this.modelPath, {
        accelerator: 'webgpu',
      });
    } catch (error) {
      this.model = null;
      console.error('Error loading model:', error);
    }
  }

  async detectGesture(context) {
    if (!this.model || !context) {
      return UNKNOWN_GESTURE;
    }

    let tensor;
    let tensorReshaped;
    let result;
    try {
      const relativeBoneAngles = xb.getRelativeBoneAngles(context);
      tensor = tf.tensor1d(relativeBoneAngles);
      tensorReshaped = tensor.reshape([1, relativeBoneAngles.length, 1]);
      result = runWithTfjsTensors(this.model, tensorReshaped);

      const scores = result[0].dataSync();
      if (scores.length == 7) {
        let maxScore = scores[0];
        let idx = 0;
        for (let t = 0; t < 7; ++t) {
          if (scores[t] > maxScore) {
            idx = t;
            maxScore = scores[t];
          }
        }
        return idx;
      }
    } catch (error) {
      console.error('Error:', error);
    } finally {
      tensor?.dispose();
      tensorReshaped?.dispose();
      result?.forEach((output) => output.dispose());
    }
    return UNKNOWN_GESTURE;
  }

  async recognize(context) {
    const scores = {};
    for (const name of Object.keys(this.getGestureConfigurations())) {
      scores[name] = {confidence: 0};
    }

    if (!this.model) return scores;

    let result = await this.detectGesture(context);
    result = this.shiftIndexIfNeeded(context, result);

    const gestureName = GESTURE_NAMES[result];
    if (gestureName && scores[gestureName]) {
      scores[gestureName] = {confidence: 1};
    }
    return scores;
  }

  shiftIndexIfNeeded(context, result) {
    result += result > 2 ? 1 : 0;
    if (result === 2) {
      const thumbDirection = xb.getThumbVerticalDirection(context);
      if (Math.abs(thumbDirection) < 0.25) {
        result = 0;
      } else if (thumbDirection < 0) {
        result += 1;
      }
    }
    return result;
  }
}

/**
 * A demo scene that uses a custom ML model to detect and display static hand
 * gestures for both hands in real-time.
 */
class HandGestureDemo extends xb.Script {
  constructor(gestureRecognizer) {
    super();
    this.gestureRecognizer = gestureRecognizer;
    this.modelState = gestureRecognizer.modelState;

    const leftHand = this.createHandPanel('Left');
    this.leftHandImage = leftHand.image;
    this.leftHandLabel = leftHand.label;
    const rightHand = this.createHandPanel('Right');
    this.rightHandImage = rightHand.image;
    this.rightHandLabel = rightHand.label;

    const handRow = new xb.UIPanel({
      style: {
        width: '100%',
        flexDirection: 'row',
        gap: 20,
        alignItems: 'stretch',
      },
      children: [rightHand.panel, leftHand.panel],
    });

    const examples = new xb.UIPanel({
      style: {
        width: '100%',
        flexDirection: 'row',
        justifyContent: 'center',
        gap: 12,
      },
      children: GESTURE_IMAGES.slice(1, 8).map(
        (src, index) =>
          new xb.UIImage({
            src,
            ariaLabel: GESTURE_LABELS[index + 1],
            style: {
              width: 74,
              height: 74,
              objectFit: 'contain',
            },
          })
      ),
    });

    this.modelStatus = new xb.UIText({
      text: 'Loading gesture model...',
      style: {fontSize: 18, textAlign: 'center'},
    });

    this.card = new xb.UICard({
      size: {width: 1.0, height: 'auto'},
      manipulation: true,
      edge: {scale: true},
      children: [
        new xb.UIText({
          text: 'HAND GESTURES',
          style: {
            fontSize: 22,
            fontWeight: 'bold',
            textAlign: 'center',
          },
        }),
        handRow,
        new xb.UIText({
          text: 'Try one of these gestures with either hand',
          style: {fontSize: 22, textAlign: 'center'},
        }),
        examples,
        this.modelStatus,
      ],
    });
    this.card.name = 'Hand gesture recognition card';
    this.add(this.card);

    this.activeGestures = {
      left: new Map(),
      right: new Map(),
    };
  }

  createHandPanel(hand) {
    const image = new xb.UIImage({
      src: GESTURE_IMAGES[0],
      ariaLabel: `${hand} hand gesture`,
      style: {width: 130, height: 130, objectFit: 'contain'},
    });
    const label = new xb.UIText({
      text: 'NONE',
      style: {
        fontSize: 28,
        fontWeight: 'bold',
        textAlign: 'center',
      },
    });
    const panel = new xb.UIPanel({
      style: {
        flexGrow: 1,
        padding: 18,
        gap: 8,
        alignItems: 'center',
      },
      children: [
        new xb.UIText({
          text: hand.toUpperCase(),
          style: {fontSize: 28, fontWeight: 'bold', textAlign: 'center'},
        }),
        image,
        label,
      ],
    });
    return {panel, image, label};
  }

  init() {
    // Adds light.
    this.add(new THREE.HemisphereLight(0x888877, 0x777788, 3));
    const light = new THREE.DirectionalLight(0xffffff, 1.5);
    light.position.set(0, 4, 0);
    this.add(light);
    this.card.position.set(0, xb.user.height + 0.05, -1.35);

    const gestures = xb.core.gestureRecognition;
    if (!gestures) return;

    this.onGestureUpdate = (event) => {
      const {hand, name, confidence = 0} = event.detail;
      this.activeGestures[hand].set(name, confidence);
      this.refreshHand(hand);
    };
    this.onGestureEnd = (event) => {
      const {hand, name} = event.detail;
      this.activeGestures[hand].delete(name);
      this.refreshHand(hand);
    };

    gestures.addEventListener('gesturestart', this.onGestureUpdate);
    gestures.addEventListener('gestureupdate', this.onGestureUpdate);
    gestures.addEventListener('gestureend', this.onGestureEnd);
  }

  refreshHand(hand) {
    const active = this.activeGestures[hand];
    let bestName = 'other';
    let bestConfidence = 0;
    for (const [name, confidence] of active.entries()) {
      if (confidence >= bestConfidence) {
        bestName = name;
        bestConfidence = confidence;
      }
    }
    const index = GESTURE_NAMES.indexOf(bestName);
    const image = GESTURE_IMAGES[index >= 0 ? index : 0];
    const label = GESTURE_LABELS[index >= 0 ? index : 0];

    if (hand === 'left') {
      this.leftHandImage.src = image;
      this.leftHandLabel.text = label;
    } else {
      this.rightHandImage.src = image;
      this.rightHandLabel.text = label;
    }
  }

  update() {
    if (this.modelState === this.gestureRecognizer.modelState) return;
    this.modelState = this.gestureRecognizer.modelState;
    if (this.modelState === 'Ready') {
      this.modelStatus.text = 'Model ready - Move your hands into view';
      this.modelStatus.style.color = '#5eead4';
    } else if (this.modelState === 'Error') {
      this.modelStatus.text = 'The gesture model could not load';
      this.modelStatus.style.color = '#fb7185';
    }
  }

  dispose() {
    const gestures = xb.core.gestureRecognition;
    if (!gestures) return;
    if (this.onGestureUpdate) {
      gestures.removeEventListener('gesturestart', this.onGestureUpdate);
      gestures.removeEventListener('gestureupdate', this.onGestureUpdate);
    }
    if (this.onGestureEnd) {
      gestures.removeEventListener('gestureend', this.onGestureEnd);
    }
  }
}



const options = new xb.Options();
const gestureRecognizer = new CustomGestureRecognizer();
options.enableGestures();
options.enableReticles();
options.gestures.setGestureRecognizer(gestureRecognizer);
options.simulator.defaultMode = xb.SimulatorMode.POSE;

async function start() {
  options.setAppTitle('Hand Gestures');
  options.setAppDescription(
    'Recognize custom static hand gestures with a LiteRT model.'
  );
  xb.add(new HandGestureDemo(gestureRecognizer));
  await xb.init(options);
}

document.addEventListener('DOMContentLoaded', start);

</script>
  </body>
</html>

```


### Sample: xr_realism/depthmesh
File: `samples/xr_realism/depthmesh/index.html`
```html
<!doctype html>
<html lang="en">
  <head>
    <title>Depth Mesh | XR Blocks</title>

    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=no"
    />

    <link type="text/css" rel="stylesheet" href="https://xrblocks.github.io/css/xr.css" />
    <script type="importmap">
      {
        "imports": {
          "three": "https://cdn.jsdelivr.net/npm/three@0.184.0/build/three.module.js",
          "three/": "https://cdn.jsdelivr.net/npm/three@0.184.0/",
          "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.184.0/examples/jsm/",
          "lit": "https://esm.sh/lit@3.3.1",
          "lit/": "https://esm.sh/lit@3.3.1/",
          "@pmndrs/uikit": "https://cdn.jsdelivr.net/npm/@pmndrs/uikit@1.0.64/dist/index.min.js",
          "@pmndrs/uikit-pub-sub": "https://cdn.jsdelivr.net/npm/@pmndrs/uikit-pub-sub@1.0.64/dist/index.min.js",
          "@pmndrs/msdfonts": "https://cdn.jsdelivr.net/npm/@pmndrs/msdfonts@1.0.64/dist/index.min.js",
          "@preact/signals-core": "https://cdn.jsdelivr.net/npm/@preact/signals-core@1.14.0/dist/signals-core.mjs",
          "yoga-layout/load": "https://cdn.jsdelivr.net/npm/yoga-layout@3.2.1/dist/src/load.js",
          "xrblocks": "https://cdn.jsdelivr.net/npm/xrblocks@0.21.1/build/xrblocks.js",
          "xrblocks/addons/": "https://cdn.jsdelivr.net/npm/xrblocks@0.21.1/build/addons/"
        }
      }
    </script>
  </head>

  <body>
    <script type="module">
import * as THREE from 'three';
import * as xb from 'xrblocks';


class DepthMeshVisualizer extends xb.Script {
  constructor() {
    super();
    const light = new THREE.HemisphereLight(0xffffff, 0xbbbbff, 3);
    light.position.set(0.5, 1, 0.25);
    this.add(light);
  }

  init() {
    xb.core.depth.depthMesh.material.uniforms.uOpacity.value = 1;
    this.add(
      createDepthOpacityControl((opacity) => {
        xb.core.depth.depthMesh.material.uniforms.uOpacity.value = opacity;
      })
    );
  }
}

function createDepthOpacityControl(onInput) {
  const valueText = new xb.UIText({
    text: '100%',
    style: {
      fontSize: 24,
      fontWeight: 'bold',
      textAlign: 'right',
    },
  });
  const header = new xb.UIPanel({
    style: {
      width: '100%',
      flexDirection: 'row',
      justifyContent: 'space-between',
      alignItems: 'center',
    },
    children: [
      new xb.UIText({
        text: 'DEPTH OPACITY',
        style: {fontSize: 24, fontWeight: 'bold'},
      }),
      valueText,
    ],
  });
  const slider = new xb.UISlider({
    ariaLabel: 'Depth opacity',
    min: 0,
    max: 1,
    step: 0.01,
    value: 1,
    style: {width: '100%', height: 42, borderRadius: 14},
    onInput: (opacity) => {
      valueText.text = `${Math.round(opacity * 100)}%`;
      onInput(opacity);
    },
  });
  const overlay = new xb.UIOverlay({
    style: {
      width: 620,
      position: 'absolute',
      left: '50%',
      bottom: 32,
      transform: {translateX: '-50%'},
      flexDirection: 'column',
      gap: 8,
    },
    children: [header, slider],
  });
  overlay.name = 'Depth opacity control';
  return overlay;
}

document.addEventListener('DOMContentLoaded', function () {
  const options = new xb.Options();
  options.setAppTitle('Depth Mesh');
  options.depth = new xb.DepthOptions(xb.xrDepthMeshVisualizationOptions);
  options.depth.depthTypeRequest = [xb.getUrlParameter('depthType') ?? 'raw'];
  xb.add(new DepthMeshVisualizer());
  xb.init(options);
});

</script>
  </body>
</html>

```


### Sample: xr_realism/occlusion
File: `samples/xr_realism/occlusion/index.html`
```html
<!doctype html>
<html lang="en">
  <head>
    <title>Occlusion | XR Blocks</title>

    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=no"
    />

    <link type="text/css" rel="stylesheet" href="https://xrblocks.github.io/css/xr.css" />
    <script>
      window.litDisableBundleWarning = true;
    </script>
    <script type="importmap">
      {
        "imports": {
          "three": "https://cdn.jsdelivr.net/npm/three@0.184.0/build/three.module.js",
          "three/": "https://cdn.jsdelivr.net/npm/three@0.184.0/",
          "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.184.0/examples/jsm/",
          "lit": "https://esm.sh/lit@3.3.1",
          "lit/": "https://esm.sh/lit@3.3.1/",
          "@pmndrs/uikit": "https://cdn.jsdelivr.net/npm/@pmndrs/uikit@1.0.64/dist/index.min.js",
          "@pmndrs/uikit-pub-sub": "https://cdn.jsdelivr.net/npm/@pmndrs/uikit-pub-sub@1.0.64/dist/index.min.js",
          "@pmndrs/msdfonts": "https://cdn.jsdelivr.net/npm/@pmndrs/msdfonts@1.0.64/dist/index.min.js",
          "@preact/signals-core": "https://cdn.jsdelivr.net/npm/@preact/signals-core@1.14.0/dist/signals-core.mjs",
          "yoga-layout/load": "https://cdn.jsdelivr.net/npm/yoga-layout@3.2.1/dist/src/load.js",
          "xrblocks": "https://cdn.jsdelivr.net/npm/xrblocks@0.21.1/build/xrblocks.js",
          "xrblocks/addons/": "https://cdn.jsdelivr.net/npm/xrblocks@0.21.1/build/addons/"
        }
      }
    </script>
  </head>

  <body>
    <div
      class="background-image"
      style="background-image: url('textures/background.webp')"
    ></div>
    <script type="module">
import * as xb from 'xrblocks';
import * as THREE from 'three';

// --- Inlined from ./OcclusionScene.js ---

const CAT_SOURCE = {
  url: 'models/Cat/cat.gltf',
  path: xb.XR_BLOCKS_ASSETS_PATH,
};
class OcclusionScene extends xb.Script {
  static dependencies = {
    camera: THREE.Camera,
    depth: xb.Depth,
  };

  constructor() {
    super();
    this.camera = null;
    this.depth = null;

    this.cat = new xb.ModelViewer({
      occlusion: true,
      manipulation: true,
      castShadow: true,
      receiveShadow: true,
    });
    this.cat.name = 'Occlusion cat';
    this.cat.visible = false;
    this.add(this.cat);

    this.instructionText = new xb.UIText({
      text: 'Click or pinch the environment to place the cat.',
      pointerEvents: 'none',
      style: {
        fontSize: 24,
        textAlign: 'center',
      },
    });
    this.add(this.createInstructions());
  }

  async init({camera, depth}) {
    this.camera = camera;
    this.depth = depth;
    this.addLights();
    await this.cat.load(CAT_SOURCE);
  }

  onSelectStart(event) {
    if (event.surface !== this.depth.depthMesh || !event.intersection) return;

    this.cat.position.copy(event.intersection.point);
    this.cat.lookAt(
      this.camera.position.x,
      this.cat.position.y,
      this.camera.position.z
    );
    this.cat.visible = true;
    this.instructionText.text =
      'Move around and hide the cat behind furniture to see occlusion.';
  }

  addLights() {
    this.add(new THREE.HemisphereLight(0xbbbbbb, 0x888888, 3));
    const light = new THREE.DirectionalLight(0xffffff, 2);
    light.position.set(0, 500, -10);
    light.castShadow = true;
    light.shadow.mapSize.set(2048, 2048);
    this.add(light);
  }

  createInstructions() {
    const overlay = new xb.UIOverlay({
      pointerEvents: 'none',
      style: {
        width: 680,
        position: 'absolute',
        left: '50%',
        bottom: 32,
        transform: {translateX: '-50%'},
      },
      children: [
        new xb.UIText({
          text: 'OCCLUSION',
          pointerEvents: 'none',
          style: {
            fontSize: 24,
            fontWeight: 'bold',
            textAlign: 'center',
          },
        }),
        this.instructionText,
      ],
    });
    overlay.name = 'Occlusion instructions';
    return overlay;
  }
}



const options = new xb.Options();
options.reticles.enabled = true;
options.reticles.projectOnDepthMesh = true;
options.depth = new xb.DepthOptions(xb.xrDepthMeshOptions);
options.depth.depthMesh.updateFullResolutionGeometry = true;
options.depth.depthMesh.renderShadow = true;
options.depth.depthTexture.enabled = true;
options.depth.occlusion.enabled = true;
options.setAppTitle('Occlusion');

async function start() {
  const occlusion = new OcclusionScene();
  xb.add(occlusion);
  await xb.init(options);
}

document.addEventListener('DOMContentLoaded', function () {
  start();
});

</script>
  </body>
</html>

```


### Sample: xr_realism/reticle
File: `samples/xr_realism/reticle/index.html`
```html
<!doctype html>
<html lang="en">
  <head>
    <title>Reticle | XR Blocks</title>

    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=no"
    />

    <link type="text/css" rel="stylesheet" href="https://xrblocks.github.io/css/xr.css" />
    <script type="importmap">
      {
        "imports": {
          "three": "https://cdn.jsdelivr.net/npm/three@0.184.0/build/three.module.js",
          "three/": "https://cdn.jsdelivr.net/npm/three@0.184.0/",
          "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.184.0/examples/jsm/",
          "lit": "https://esm.sh/lit@3.3.1",
          "lit/": "https://esm.sh/lit@3.3.1/",
          "@pmndrs/uikit": "https://cdn.jsdelivr.net/npm/@pmndrs/uikit@1.0.64/dist/index.min.js",
          "@pmndrs/uikit-pub-sub": "https://cdn.jsdelivr.net/npm/@pmndrs/uikit-pub-sub@1.0.64/dist/index.min.js",
          "@pmndrs/msdfonts": "https://cdn.jsdelivr.net/npm/@pmndrs/msdfonts@1.0.64/dist/index.min.js",
          "@preact/signals-core": "https://cdn.jsdelivr.net/npm/@preact/signals-core@1.14.0/dist/signals-core.mjs",
          "yoga-layout/load": "https://cdn.jsdelivr.net/npm/yoga-layout@3.2.1/dist/src/load.js",
          "xrblocks": "https://cdn.jsdelivr.net/npm/xrblocks@0.21.1/build/xrblocks.js",
          "xrblocks/addons/": "https://cdn.jsdelivr.net/npm/xrblocks@0.21.1/build/addons/"
        }
      }
    </script>
  </head>

  <body>
    <script type="module">
import * as xb from 'xrblocks';


class ReticleVisualizer extends xb.Script {
  static dependencies = {
    depth: xb.Depth,
  };

  constructor() {
    super();
    this.activeMeasurements = new Map();
    this.depth = null;
  }

  init({depth}) {
    this.depth = depth;
    this.add(this.createInstructions());
  }

  onSelectStart(event) {
    const controller = event.source.controller;
    if (event.surface !== this.depth.depthMesh || !event.intersection) return;

    const measurement = this.createMeasurement();
    this.add(measurement.card);
    this.activeMeasurements.set(controller, measurement);
    this.updateMeasurement(event.intersection, measurement);
  }

  onSelecting(event) {
    const measurement = this.activeMeasurements.get(event.source.controller);
    if (
      !measurement ||
      event.surface !== this.depth.depthMesh ||
      !event.intersection
    ) {
      return;
    }
    this.updateMeasurement(event.intersection, measurement);
  }

  onSelectEnd(event) {
    this.activeMeasurements.delete(event.source.controller);
  }

  createMeasurement() {
    const text = new xb.UIText({
      text: '',
      pointerEvents: 'none',
      style: {
        fontSize: 30,
        lineHeight: 1.25,
        textAlign: 'center',
      },
    });
    const card = new xb.UICard({
      size: {width: 0.48, height: 0.16},
      pointerEvents: 'none',
      children: [text],
    });
    card.add(new xb.FaceCamera({mode: 'spherical', smoothing: 1}));
    card.name = 'Depth measurement';
    return {card, text};
  }

  updateMeasurement(intersection, measurement) {
    measurement.card.position.copy(intersection.point);
    measurement.card.position.y += 0.1;
    measurement.text.text =
      `Distance: ${intersection.distance.toFixed(2)} m\n` +
      `Height: ${intersection.point.y.toFixed(2)} m`;
  }

  createInstructions() {
    const overlay = new xb.UIOverlay({
      pointerEvents: 'none',
      style: {
        width: 680,
        position: 'absolute',
        left: '50%',
        bottom: 32,
        transform: {translateX: '-50%'},
      },
      children: [
        new xb.UIText({
          text: 'DEPTH RETICLE',
          pointerEvents: 'none',
          style: {
            fontSize: 24,
            fontWeight: 'bold',
            textAlign: 'center',
          },
        }),
        new xb.UIText({
          text: 'Point at a detected surface. Hold trigger, pinch, or click to place a live measurement. Release to leave it in place.',
          pointerEvents: 'none',
          style: {
            fontSize: 20,
            lineHeight: 1.4,
            textAlign: 'center',
          },
        }),
      ],
    });
    overlay.name = 'Reticle instructions';
    return overlay;
  }
}

document.addEventListener('DOMContentLoaded', function () {
  const options = new xb.Options();
  options.setAppTitle('XR Reticle');
  options.depth = new xb.DepthOptions(xb.xrDepthMeshOptions);
  options.reticles.enabled = true;
  options.reticles.projectOnDepthMesh = true;
  xb.add(new ReticleVisualizer());
  xb.init(options);
});

</script>
  </body>
</html>

```

--------------------------------------------------------------------------------
🔴 FINAL CHECK: IMPORT MAP AND xb.Script
Before finishing the response, DOUBLE CHECK the `<script type="importmap">`.
You **MUST** include ALL the imports defined in Engineering Guidelines #2.
Ensure `three`, `three/addons/`, `@pmndrs/uikit`, `@preact/signals-core`, `lit`, and `xrblocks` are present and point to the exact URLs specified above.
Ensure spatial UI controls (`UICard`, `UIButton`, `UIText`, etc.) are imported directly from `'xrblocks'`.
Do NOT import legacy `uiblocks` or call `options.enableUI()`.
--------------------------------------------------------------------------------
After writing code, RECHECK THE TOP 10 RULES and REVISE code.
Do NOT hallucinate obsolete xrblocks APIs or missing model files.
Use built-in spatial UI (`xb.UICard`, `xb.UIButton`, `xb.UIText`, `xb.UISlider`) for spatial interfaces.
In the end, remind users that "The XR app is best viewed in an Android XR device like Galaxy XR. On desktop, we provide you a simulated environment for previewing the app."