From 2090d313af93594ba1f3b7986060344395db898b Mon Sep 17 00:00:00 2001
From: Mark Lundin <mlundin@snapchat.com>
Date: Wed, 4 Dec 2024 14:50:07 +0000
Subject: [PATCH 01/12] Updated Picker to handle offset canvas and canvas size
 changes

---
 packages/lib/src/utils/picker.tsx | 47 ++++++++++++++++++++++++-------
 1 file changed, 37 insertions(+), 10 deletions(-)

diff --git a/packages/lib/src/utils/picker.tsx b/packages/lib/src/utils/picker.tsx
index 214d27f..18f79fb 100644
--- a/packages/lib/src/utils/picker.tsx
+++ b/packages/lib/src/utils/picker.tsx
@@ -1,5 +1,5 @@
 import { AppBase, CameraComponent, Entity, GraphNode, Picker } from "playcanvas"
-import { useCallback, useLayoutEffect, useMemo, useRef } from "react"
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef } from "react"
 import { SyntheticMouseEvent, SyntheticPointerEvent } from "./synthetic-event";
 
 // Utility to propagate events up the entity hierarchy
@@ -36,7 +36,7 @@ const getNearestCommonAncestor = (a: GraphNode | null, b: GraphNode | null): Gra
 };
 
 
-const getEntityAtPointerEvent = async (app : AppBase, picker: Picker, e : MouseEvent) : Promise<Entity | null> => {
+const getEntityAtPointerEvent = async (app : AppBase, picker: Picker, rect: DOMRect, e : MouseEvent) : Promise<Entity | null> => {
     // Find the highest priority camera
     const [activeCamera] : CameraComponent[] = (app.root.findComponents('camera') as CameraComponent[])
         .filter((camera: CameraComponent) => !camera.renderTarget)
@@ -44,10 +44,23 @@ const getEntityAtPointerEvent = async (app : AppBase, picker: Picker, e : MouseE
 
     if (!activeCamera) return null;
 
-    // prepare the picker and perform picking
-    picker.prepare(activeCamera, app.scene);
-    const devicePixelRatio = window?.devicePixelRatio ?? 1;
-    const [meshInstance] = await picker.getSelectionAsync(e.clientX * devicePixelRatio , e.clientY * devicePixelRatio);
+     // Get canvas bounds
+     const canvas = app.graphicsDevice.canvas;
+     
+     // Calculate position relative to canvas
+     const x = e.clientX - rect.left;
+     const y = e.clientY - rect.top;
+     
+     // Account for canvas scaling
+     const scaleX = canvas.width / rect.width;
+     const scaleY = canvas.height / rect.height;
+ 
+     // prepare the picker and perform picking
+     picker.prepare(activeCamera, app.scene);
+     const [meshInstance] = await picker.getSelectionAsync(
+         x * scaleX,
+         y * scaleY
+     );
 
     if (!meshInstance) return null
 
@@ -57,6 +70,18 @@ const getEntityAtPointerEvent = async (app : AppBase, picker: Picker, e : MouseE
 export const usePicker = (app: AppBase | null, el: HTMLElement | null) => {
     const activeEntity = useRef<Entity | null>(null);
     const pointerDetails = useRef<PointerEvent | null>(null);
+    const canvasRectRef = useRef<DOMRect | null>(app ? app.graphicsDevice.canvas.getBoundingClientRect() : null);
+
+    // Watch for the canvas to resize. Neccesary for correct picking
+    useEffect(() => {
+        const resizeObserver = new ResizeObserver(() => {
+            canvasRectRef.current = app ? app.graphicsDevice.canvas.getBoundingClientRect() : null;
+        });
+
+        if(app) resizeObserver.observe(app.graphicsDevice.canvas);
+        return () => resizeObserver.disconnect();
+
+    }, [app]);
 
     // Construct a Global Picker
     const picker: Picker | null = useMemo((): Picker | null => {
@@ -74,8 +99,10 @@ export const usePicker = (app: AppBase | null, el: HTMLElement | null) => {
         const e : PointerEvent | null = pointerDetails.current;
         if (!picker || !app || !e) return null;
 
-        const entity = await getEntityAtPointerEvent(app, picker, e);
-        if (!entity) return null;
+        if (!canvasRectRef.current) return null;
+
+        const entity = await getEntityAtPointerEvent(app, picker, canvasRectRef.current, e);
+        // if (!entity) return null;
 
         const prevEntity = activeEntity.current;
 
@@ -105,9 +132,9 @@ export const usePicker = (app: AppBase | null, el: HTMLElement | null) => {
 
     // Construct a generic handler for pointer events
     const onInteractionEvent = useCallback(async (e: MouseEvent)  => {
-        if (!picker || !app) return;
+        if (!picker || !app || !canvasRectRef.current) return;
 
-        const entity = await getEntityAtPointerEvent(app, picker, e);
+        const entity = await getEntityAtPointerEvent(app, picker, canvasRectRef.current, e);
 
         if (!entity) return
 

From 119673c0b88d87e6046eabc76bac74065069a105 Mon Sep 17 00:00:00 2001
From: Mark Lundin <mlundin@snapchat.com>
Date: Wed, 4 Dec 2024 14:50:37 +0000
Subject: [PATCH 02/12] Added OrbitCamera `__name`

---
 packages/lib/src/scripts/orbit-controls/orbit-camera.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/lib/src/scripts/orbit-controls/orbit-camera.js b/packages/lib/src/scripts/orbit-controls/orbit-camera.js
index 5e6eca0..2ff3951 100644
--- a/packages/lib/src/scripts/orbit-controls/orbit-camera.js
+++ b/packages/lib/src/scripts/orbit-controls/orbit-camera.js
@@ -5,7 +5,7 @@ import {
 } from 'playcanvas';
 
 export class OrbitCamera extends Script {
-    static name = 'OrbitCamera';
+    static __name = 'orbitCamera';
 
     /**
      * @attribute
@@ -443,13 +443,13 @@ export class OrbitCamera extends Script {
 
 
 export class OrbitCameraInputMouse extends Script {
-    static name = 'OrbitCameraInputMouse';
+    static __name = 'orbitCameraInputMouse';
 
     /**
      * How fast the camera moves around the orbit. Higher is faster
      *
      * @attribute
-     * @type {number}
+     * @type {number.0}
      */
     orbitSensitivity = 0.3;
 
@@ -574,7 +574,7 @@ export class OrbitCameraInputMouse extends Script {
 }
 
 export class OrbitCameraInputTouch extends Script {
-    static name = 'OrbitCameraInputTouch';
+    static __name = 'orbitCameraInputTouch';
 
     /**
      * How fast the camera moves around the orbit. Higher is faster

From 3b4dc5cd8b7966616f6627ceeed8d1ed83ac570f Mon Sep 17 00:00:00 2001
From: Mark Lundin <mlundin@snapchat.com>
Date: Wed, 4 Dec 2024 14:51:04 +0000
Subject: [PATCH 03/12] scripts use `__name`

---
 packages/lib/src/hooks/use-script.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/lib/src/hooks/use-script.tsx b/packages/lib/src/hooks/use-script.tsx
index 1f03358..beb73e7 100644
--- a/packages/lib/src/hooks/use-script.tsx
+++ b/packages/lib/src/hooks/use-script.tsx
@@ -2,6 +2,7 @@ import { useEffect, useRef } from 'react';
 import { useParent } from './use-parent';
 import { useApp } from './use-app';
 import { Application, Entity, Script, ScriptComponent } from 'playcanvas';
+import { ScriptConstructor } from '../components/Script';
 
 const toLowerCamelCase = (str: string) : string => str[0].toLowerCase() + str.substring(1);
 
@@ -9,10 +10,10 @@ interface Props {
   [key: string]: unknown;
 }
 
-export const useScript = (ScriptConstructor: typeof Script, props: Props) : void  => {
+export const useScript = (scriptConstructor: ScriptConstructor, props: Props) : void  => {
   const parent: Entity = useParent();
   const app: Application = useApp();
-  const scriptName: string = toLowerCamelCase(ScriptConstructor.name);
+  const scriptName: string = toLowerCamelCase(scriptConstructor.__name);
   const scriptRef = useRef<Script | null>(null);
   const scriptComponentRef = useRef<ScriptComponent | null>(null);
 
@@ -29,7 +30,7 @@ export const useScript = (ScriptConstructor: typeof Script, props: Props) : void
     if (!scriptRef.current) {
       // Create the script instance with the provided attributes
       const scriptComponent : ScriptComponent = parent.script as ScriptComponent;
-      const scriptInstance = scriptComponent.create(ScriptConstructor, {
+      const scriptInstance = scriptComponent.create(scriptConstructor as unknown as typeof Script, {
         properties: { ...props },
         preloading: false,
       });
@@ -53,7 +54,7 @@ export const useScript = (ScriptConstructor: typeof Script, props: Props) : void
         script.fire('destroy');
       }
     };
-  }, [app, parent, ScriptConstructor]);
+  }, [app, parent, scriptConstructor]);
 
   // Update script props when they change
   useEffect(() => {

From 5389e14a1abef5e7ce84e18d54a7f2b9691c2757 Mon Sep 17 00:00:00 2001
From: Mark Lundin <mlundin@snapchat.com>
Date: Wed, 4 Dec 2024 14:51:28 +0000
Subject: [PATCH 04/12] Added CSS colours to Standard Material hook

---
 packages/lib/src/hooks/use-material.tsx | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/lib/src/hooks/use-material.tsx b/packages/lib/src/hooks/use-material.tsx
index 3bd2b1d..6a78e3d 100644
--- a/packages/lib/src/hooks/use-material.tsx
+++ b/packages/lib/src/hooks/use-material.tsx
@@ -1,6 +1,7 @@
 import { useLayoutEffect, useMemo } from 'react';
 import { StandardMaterial } from 'playcanvas';
 import { useApp } from './use-app';
+import { useColors } from '../utils/color';
 
 type WritableKeys<T> = {
   [K in keyof T]: T[K] extends { readonly [key: string]: unknown } ? never : K;
@@ -11,6 +12,15 @@ type MaterialProps = Pick<StandardMaterial, WritableKeys<StandardMaterial>>;
 export const useMaterial = (props: MaterialProps): StandardMaterial => {
   const app = useApp();
 
+  const propsWithColors = useColors(props, [
+    'ambient', 
+    'attenuation', 
+    'diffuse', 
+    'emissive', 
+    'sheen', 
+    'specular'
+  ]);
+
   // Create the material instance only once when 'app' changes
   const material : StandardMaterial = useMemo(() => new StandardMaterial(), [app]);
 
@@ -20,7 +30,7 @@ export const useMaterial = (props: MaterialProps): StandardMaterial => {
 
       // Filter the props to only include those in the standard material
       const filteredProps = Object.fromEntries(
-        Object.entries(props).filter(([key]) => key in material)
+        Object.entries(propsWithColors).filter(([key]) => key in material)
       );
 
       Object.assign(material, filteredProps)

From c8f518b97ef0e15e1c31f1eb5c7ac8d8fada9f25 Mon Sep 17 00:00:00 2001
From: Mark Lundin <mlundin@snapchat.com>
Date: Wed, 4 Dec 2024 14:51:54 +0000
Subject: [PATCH 05/12] updated shadow catcher

---
 .../lib/src/scripts/shadow-catcher/index.js   | 173 ++++++------------
 1 file changed, 58 insertions(+), 115 deletions(-)

diff --git a/packages/lib/src/scripts/shadow-catcher/index.js b/packages/lib/src/scripts/shadow-catcher/index.js
index 315e3e8..fe0b8d9 100644
--- a/packages/lib/src/scripts/shadow-catcher/index.js
+++ b/packages/lib/src/scripts/shadow-catcher/index.js
@@ -1,38 +1,52 @@
-import {
-    BLEND_NORMAL,
-    SHADOW_VSM16 as SHADOW_TYPE,
-    SHADOWUPDATE_REALTIME as SHADOWUPDATE,
-    Entity,
-    Layer,
-    StandardMaterial,
-    BoundingBox,
-    Script,
-    Vec3,
-    CHUNKAPI_2_1
-} from 'playcanvas';
+import { Script, Entity, Layer, StandardMaterial, BLEND_NORMAL, CHUNKAPI_1_65, SHADOW_VSM16, SHADOWUPDATE_REALTIME, CHUNKAPI_2_1 } from 'playcanvas';
 
 const endPS = `
     litArgs_opacity = mix(light0_shadowIntensity, 0.0, shadow0);
-    gl_FragColor.rgb = vec3(0.0, 0.0, 0.0);
+    gl_FragColor.rgb = vec3(0.0);
 `;
 
-const tmpMin = new Vec3();
-const tmpMax = new Vec3();
+export class ShadowCatcher extends Script {
+    /**
+     * The shadow distance of the shadow catcher light.
+     * @type {number}
+     */
+    shadowDistance = 16;
 
-class ShadowCatcher extends Script {
-    layer;
+    /**
+     * The VSM blur size of the shadow catcher light.
+     * @type {number}
+     */
+    vsmBlurSize = 32;
 
-    material;
+    /**
+     * The width of the shadow catcher.
+     * @type {number}
+     */
+    width = 1;
 
-    plane;
+    /**
+     * The depth of the shadow catcher.
+     * @type {number}
+     */
+    depth = 1;
 
-    light;
+    /** @type {Layer|null} */
+    layer = null;
 
-    sceneBounds = new BoundingBox();
+    /** @type {StandardMaterial|null} */
+    material = null;
+
+    /** @type {Entity|null} */
+    plane = null;
+
+    /** @type {Entity|null} */
+    light = null;
 
     initialize() {
-        // create and add the shadow layers
-        this.layer = new Layer({ name: 'Shadow Layer' });
+        // create and add the shadow layer
+        this.layer = new Layer({
+            name: 'Shadow Layer'
+        });
 
         const layers = this.app.scene.layers;
         const worldLayer = layers.getLayerByName('World');
@@ -61,6 +75,7 @@ class ShadowCatcher extends Script {
             castShadows: false,
             material: this.material
         });
+        this.plane.setLocalScale(this.width, 1, this.depth);
 
         // create shadow catcher light
         this.light = new Entity('ShadowLight');
@@ -68,18 +83,28 @@ class ShadowCatcher extends Script {
             type: 'directional',
             castShadows: true,
             normalOffsetBias: 0,
-            shadowBias: 0.0,
+            shadowBias: 0,
+            shadowDistance: this.shadowDistance,
             shadowResolution: 1024,
-            shadowType: SHADOW_TYPE,
-            shadowUpdateMode: SHADOWUPDATE,
-            vsmBlurSize: 32,
-            enabled: true,
-            shadowIntensity: 1,
-            intensity: 0.5
+            shadowType: SHADOW_VSM16,
+            shadowUpdateMode: SHADOWUPDATE_REALTIME,
+            vsmBlurSize: 16,
+            shadowIntensity: 0.75,
+            intensity: 1
+        });
+
+        this.app.root.addChild(this.plane);
+        this.app.root.addChild(this.light);
+
+        // add the shadow layer to the camera
+        const cameras = this.app.root.findComponents('camera');
+        cameras.forEach((camera) => {
+            camera.layers = camera.layers.concat([this.layer.id]);
         });
 
-        this.entity.addChild(this.plane);
-        this.entity.addChild(this.light);
+        this.entity.findComponents('render').forEach((component) => {
+            this.layer.shadowCasters = this.layer.shadowCasters.concat(component.meshInstances);
+        });
 
         this.on('destroy', () => {
             this.plane.remove();
@@ -94,87 +119,5 @@ class ShadowCatcher extends Script {
 
             camera.layers = camera.layers.filter(layer => layer !== this.layer.id);
         });
-
-        this.on('enable', () => {
-            this.layer.enabled = true;
-            this.light.enabled = true;
-        });
-
-        this.on('disable', () => {
-            this.layer.enabled = false;
-            this.light.enabled = false;
-        });
-
-    }
-
-    update() {
-
-        const camera = this.app.root.findOne(node => node?.camera?.enabled)?.camera;
-
-        if (!camera) return;
-
-        const renderComponents = this.entity.findComponents('render');
-
-        // Set the shadowCasters on the layer
-        const meshInstances = renderComponents.reduce((arr, component) => ([...arr, ...component.meshInstances]), []);
-        meshInstances.forEach(mi => mi.castShadow = true);
-        this.layer.addShadowCasters(meshInstances);
-
-        this.sceneBounds.center.set(0, 0, 0);
-        this.sceneBounds.halfExtents.set(0.5, 0.5, 0.5);
-
-        // Iterate over the components and calculate a scene boundary for all entities
-        const sceneBounds = renderComponents.reduce((bounds, component) => {
-            const entity = component.entity;
-            const position = entity.getPosition();
-            tmpMin.copy(bounds.getMin()).min(position);
-            tmpMax.copy(bounds.getMax()).max(position);
-            bounds.setMinMax(tmpMin, tmpMax);
-            return bounds;
-        }, this.sceneBounds);
-
-        const bound = sceneBounds;
-        const center = bound.center;
-        const len = Math.sqrt(bound.halfExtents.x * bound.halfExtents.x + bound.halfExtents.z * bound.halfExtents.z);
-
-        this.plane.setLocalScale(len * 10, 1, len * 10);
-        this.plane.setPosition(center.x, 0, center.z);
-
-        if (!camera.layers.includes(this.layer.id)) {
-            camera.layers = [...camera.layers, this.layer.id];
-        }
-
-        this.light.light.shadowDistance = camera.farClip;
-    }
-
-
-    set intensity(value) {
-        if (this.light?.light) {
-            this.light.light.shadowIntensity = value;
-        }
-    }
-
-    get intensity() {
-        return this.light?.light?.shadowIntensity;
     }
-
-    set blur(value) {
-        if (this.light?.light) {
-            this.light.light.vsmBlurSize = value;
-        }
-    }
-
-    get blur() {
-        return this.light?.light?.vsmBlurSize;
-    }
-
-    set rotation(euler) {
-        this.light.setEulerAngles(euler);
-    }
-
-    get rotation() {
-        return this.light.getEulerAngles();
-    }
-}
-
-export { ShadowCatcher };
+}
\ No newline at end of file

From 304c96433e62c2d62685652be924a2d984b7aeaf Mon Sep 17 00:00:00 2001
From: Mark Lundin <mlundin@snapchat.com>
Date: Wed, 4 Dec 2024 14:53:00 +0000
Subject: [PATCH 06/12] Added "use client" directive

---
 packages/lib/src/components/Align.tsx    | 2 ++
 packages/lib/src/components/Camera.tsx   | 4 +++-
 packages/lib/src/components/EnvAtlas.tsx | 2 ++
 packages/lib/src/components/GSplat.tsx   | 2 ++
 packages/lib/src/hooks/index.ts          | 2 ++
 packages/lib/src/index.ts                | 2 ++
 packages/lib/src/scripts/index.ts        | 2 ++
 7 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/packages/lib/src/components/Align.tsx b/packages/lib/src/components/Align.tsx
index 1bbb006..2c2a36d 100644
--- a/packages/lib/src/components/Align.tsx
+++ b/packages/lib/src/components/Align.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import { BoundingBox, Entity as PcEntity, RenderComponent, Vec3, Application, Mat4 } from "playcanvas";
 import { Children, useLayoutEffect, useRef, useState } from "react";
 import { Entity } from "../Entity";
diff --git a/packages/lib/src/components/Camera.tsx b/packages/lib/src/components/Camera.tsx
index 097e6a0..7f6659d 100644
--- a/packages/lib/src/components/Camera.tsx
+++ b/packages/lib/src/components/Camera.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import { FC } from "react";
 import { useComponent } from "../hooks";
 import { Color } from "playcanvas";
@@ -5,7 +7,7 @@ import { useColors } from "../utils/color";
 
 interface CameraProps {
     [key: string]: unknown;
-    clearColor: Color | string
+    clearColor?: Color | string
 }
 
 /**
diff --git a/packages/lib/src/components/EnvAtlas.tsx b/packages/lib/src/components/EnvAtlas.tsx
index 817c3fc..14e2ee4 100644
--- a/packages/lib/src/components/EnvAtlas.tsx
+++ b/packages/lib/src/components/EnvAtlas.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import { FC, useLayoutEffect } from "react";
 import { useApp } from "../hooks";
 import { Application, Asset } from "playcanvas";
diff --git a/packages/lib/src/components/GSplat.tsx b/packages/lib/src/components/GSplat.tsx
index 59c83fc..7ea8888 100644
--- a/packages/lib/src/components/GSplat.tsx
+++ b/packages/lib/src/components/GSplat.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import { FC, useLayoutEffect, useRef } from "react";
 import { useParent } from "../hooks";
 import { Asset, Entity } from "playcanvas";
diff --git a/packages/lib/src/hooks/index.ts b/packages/lib/src/hooks/index.ts
index 9833c07..924b24e 100644
--- a/packages/lib/src/hooks/index.ts
+++ b/packages/lib/src/hooks/index.ts
@@ -1,3 +1,5 @@
+"use client"
+
 export { useComponent } from './use-component';
 export { useScript } from './use-script';
 export { useApp, AppContext } from './use-app';
diff --git a/packages/lib/src/index.ts b/packages/lib/src/index.ts
index 77697fc..ad9da49 100644
--- a/packages/lib/src/index.ts
+++ b/packages/lib/src/index.ts
@@ -1,3 +1,5 @@
+"use client";
+
 export { Application, ApplicationWithoutCanvas } from './Application';
 export { Container } from './Container';
 export { Entity } from './Entity';
\ No newline at end of file
diff --git a/packages/lib/src/scripts/index.ts b/packages/lib/src/scripts/index.ts
index 6b8b9b4..6e8336e 100644
--- a/packages/lib/src/scripts/index.ts
+++ b/packages/lib/src/scripts/index.ts
@@ -1,3 +1,5 @@
+"use client";
+
 export { Grid } from './infinite-grid/infinite-grid';
 export { OrbitControls } from './orbit-controls';
 export { CameraFrame } from './post';

From 4ddd29440379a31ef59eab78a3fb3d1c61189f67 Mon Sep 17 00:00:00 2001
From: Mark Lundin <mlundin@snapchat.com>
Date: Wed, 4 Dec 2024 14:54:05 +0000
Subject: [PATCH 07/12] Type fixes and wrapped `Render` component

---
 packages/lib/src/Container.tsx           | 18 ++++++++++++----
 packages/lib/src/Entity.tsx              | 14 +++++++------
 packages/lib/src/components/Light.tsx    |  7 +++++--
 packages/lib/src/components/Render.tsx   | 26 ++++++++++++++++++++++--
 packages/lib/src/hooks/use-component.tsx |  1 +
 5 files changed, 52 insertions(+), 14 deletions(-)

diff --git a/packages/lib/src/Container.tsx b/packages/lib/src/Container.tsx
index d7b1392..51a0d67 100644
--- a/packages/lib/src/Container.tsx
+++ b/packages/lib/src/Container.tsx
@@ -5,10 +5,18 @@ import { Entity } from ".";
 
 interface ContainerProps {
     asset: Asset;
+    children?: React.ReactNode;
     [key: string]: unknown;
 }
 
-export const Container: FC<ContainerProps> = ({ asset, ...props }) => {
+/**
+ * Renders a PlayCanvas asset as a React component.
+ * @param {Asset} asset - The PlayCanvas asset to render.
+ * @param {React.ReactNode} children - The children to render inside the container.
+ * @param {Object} [props] - Additional properties to pass to the container.
+ * @returns {React.ReactNode} - The rendered container.
+ */
+export const Container: FC<ContainerProps> = ({ asset, children, ...props }) => {
 
     const entityRef = useRef<PcEntity | null>(null);
     const assetEntityRef = useRef<PcEntity | null>(null);
@@ -32,8 +40,10 @@ export const Container: FC<ContainerProps> = ({ asset, ...props }) => {
             assetEntityRef.current = null;
 
         };
-    }, [app, parent, asset, asset.resource]);
+    }, [app, parent, asset, asset?.resource]);
 
 
-    return <Entity ref={entityRef} {...props}/>;
-};
\ No newline at end of file
+    return <Entity ref={entityRef} {...props}>
+        { children }
+    </Entity>;
+};
diff --git a/packages/lib/src/Entity.tsx b/packages/lib/src/Entity.tsx
index 128113b..7c21fd7 100644
--- a/packages/lib/src/Entity.tsx
+++ b/packages/lib/src/Entity.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import { Entity as PcEntity } from 'playcanvas';
 import { ReactNode, forwardRef, useImperativeHandle, useLayoutEffect, useMemo } from 'react';
 import { useParent, ParentContext, useApp } from './hooks';
@@ -8,9 +10,9 @@ type MouseEventCallback = (event: SyntheticMouseEvent) => void;
 
 interface EntityProps {
   name?: string;
-  position?: [number, number, number];
-  scale?: [number, number, number];
-  rotation?: [number, number, number];
+  position?: number[];
+  scale?: number[];
+  rotation?: number[];
   onPointerUp?: PointerEventCallback;
   onPointerDown?: PointerEventCallback;
   onPointerOver?: PointerEventCallback;
@@ -75,9 +77,9 @@ export const Entity = forwardRef<PcEntity, EntityProps> (function Entity(
 
   useLayoutEffect(() => {
     entity.name = name;
-    entity.setLocalPosition(...position);
-    entity.setLocalScale(...scale);
-    entity.setLocalEulerAngles(...rotation);
+    entity.setLocalPosition(...position as [number, number, number]);
+    entity.setLocalScale(...scale as [number, number, number]);
+    entity.setLocalEulerAngles(...rotation as [number, number, number]);
   }, [entity, name, position, scale, rotation]);
 
   return (<>
diff --git a/packages/lib/src/components/Light.tsx b/packages/lib/src/components/Light.tsx
index 932d1e0..27de009 100644
--- a/packages/lib/src/components/Light.tsx
+++ b/packages/lib/src/components/Light.tsx
@@ -1,13 +1,16 @@
 import { FC } from "react";
 import { useComponent } from "../hooks";
+import { useColors } from "../utils/color";
 
 type LightProps = {
-    type: string;
+    type: "directional" | "omni" | "spot";
 }
 
 export const Light: FC<LightProps> = (props) => {
 
-    useComponent("light", props);
+    const colorProps = useColors(props, ['color'])
+
+    useComponent("light", { ...props, ...colorProps });
     return null
     
 }
\ No newline at end of file
diff --git a/packages/lib/src/components/Render.tsx b/packages/lib/src/components/Render.tsx
index 20ffeaf..94b2491 100644
--- a/packages/lib/src/components/Render.tsx
+++ b/packages/lib/src/components/Render.tsx
@@ -1,14 +1,36 @@
+"use client"
+
 import { FC } from "react";
 import { useComponent } from "../hooks";
+import { Container } from "../Container";
+import { Asset } from "playcanvas";
 
 interface RenderProps {
     type: string;
+    asset?: Asset;
+    children?: React.ReactNode;
     [key: string]: unknown;
 }
 
-export const Render: FC<RenderProps> = (props) => {
-
+const RenderComponent: FC<RenderProps> = (props) => {
     useComponent("render", props);
     return null;
+}
+
+/**
+ *  Create a render component on an entity. If the asset is a container, 
+ * it will be rendered as a container. Otherwise, it will be rendered as a 
+ * render component.
+ */
+export const Render: FC<RenderProps> = (props) => {
+
+    // Render a container if the asset is a container
+    if (props.asset?.type === 'container') {
+        return <Container asset={props.asset as Asset} >
+            { props.children }
+        </Container>
+    }
 
+    // Otherwise, render the component
+    return <RenderComponent {...props} />;
 }
\ No newline at end of file
diff --git a/packages/lib/src/hooks/use-component.tsx b/packages/lib/src/hooks/use-component.tsx
index 5cc2292..9fd161f 100644
--- a/packages/lib/src/hooks/use-component.tsx
+++ b/packages/lib/src/hooks/use-component.tsx
@@ -35,6 +35,7 @@ export const useComponent = (ctype: string, props: ComponentProps): void => {
     };
   }, [app, parent, ctype]);
 
+  // Update component props
   useLayoutEffect(() => {
 
     const comp: Component | null | undefined = componentRef.current

From 590a25ffac2c8d2202867b2aa082ba57ed7c012d Mon Sep 17 00:00:00 2001
From: Mark Lundin <mlundin@snapchat.com>
Date: Wed, 4 Dec 2024 14:54:30 +0000
Subject: [PATCH 08/12] Added Physics

---
 packages/lib/src/Application.tsx          | 14 +++++++++++++-
 packages/lib/src/components/Collision.tsx | 15 +++++++++++++++
 packages/lib/src/components/RigidBody.tsx | 23 +++++++++++++++++++++++
 packages/lib/src/components/index.ts      |  7 ++++++-
 4 files changed, 57 insertions(+), 2 deletions(-)
 create mode 100644 packages/lib/src/components/Collision.tsx
 create mode 100644 packages/lib/src/components/RigidBody.tsx

diff --git a/packages/lib/src/Application.tsx b/packages/lib/src/Application.tsx
index 4e27823..98c11bf 100644
--- a/packages/lib/src/Application.tsx
+++ b/packages/lib/src/Application.tsx
@@ -1,4 +1,5 @@
 import React, { FC, PropsWithChildren, useLayoutEffect, useRef, useState } from 'react';
+import * as Ammo from 'sync-ammo';
 import {
   FILLMODE_NONE,
   FILLMODE_FILL_WINDOW,
@@ -49,6 +50,8 @@ interface ApplicationProps extends PropsWithChildren<unknown> {
   maxDeltaTime?: number
   /** Scales the global time delta. */
   timeScale?: number,
+  /** Whether to use the PlayCanvas Physics system. */
+  usePhysics?: boolean,
   /** Graphics Settings */
   graphicsDeviceOptions?: GraphicsOptions
 }
@@ -95,6 +98,7 @@ export const ApplicationWithoutCanvas: FC<ApplicationWithoutCanvasProps> = ({
   resolutionMode = RESOLUTION_AUTO,
   maxDeltaTime = 0.1,
   timeScale = 1,
+  usePhysics = false,
   ...otherProps
 }) => {
 
@@ -115,12 +119,15 @@ export const ApplicationWithoutCanvas: FC<ApplicationWithoutCanvasProps> = ({
   const [app, setApp] = useState<PlayCanvasApplication | null>(null);
   const appRef = useRef<PlayCanvasApplication | null>(null);
 
-  
   usePicker(appRef.current, canvasRef.current);
 
   useLayoutEffect(() => {
     const canvas = canvasRef.current;
     if (canvas && !appRef.current) {
+
+      // @ts-expect-error The PC Physics system expects a global Ammo instance
+      if (usePhysics) globalThis.Ammo = Ammo.default
+
       const localApp = new PlayCanvasApplication(canvas, {
         mouse: new Mouse(canvas),
         touch: new TouchDevice(canvas),
@@ -137,8 +144,13 @@ export const ApplicationWithoutCanvas: FC<ApplicationWithoutCanvasProps> = ({
 
     return () => {
       if (!appRef.current) return;
+      
       appRef.current.destroy();
       appRef.current = null;
+
+      // @ts-expect-error Clean up the global Ammo instance
+      if (usePhysics && globalThis.Ammo) delete globalThis.Ammo;
+
       setApp(null);
     };
   }, [canvasRef, fillMode, resolutionMode, ...Object.values(graphicsDeviceOptions)]);
diff --git a/packages/lib/src/components/Collision.tsx b/packages/lib/src/components/Collision.tsx
new file mode 100644
index 0000000..7e61f21
--- /dev/null
+++ b/packages/lib/src/components/Collision.tsx
@@ -0,0 +1,15 @@
+"use client"
+
+import { FC } from "react";
+import { useComponent } from "../hooks";
+
+type CollisionProps = {
+    [key: string]: unknown;
+}
+
+export const Collision: FC<CollisionProps> = (props) => {
+
+    useComponent("collision", props);
+    return null
+    
+}
\ No newline at end of file
diff --git a/packages/lib/src/components/RigidBody.tsx b/packages/lib/src/components/RigidBody.tsx
new file mode 100644
index 0000000..2c5dadf
--- /dev/null
+++ b/packages/lib/src/components/RigidBody.tsx
@@ -0,0 +1,23 @@
+import { FC } from "react";
+import { useComponent, useParent } from "../hooks";
+
+type RigidBodyProps = {
+    [key: string]: unknown;
+}
+
+export const RigidBody: FC<RigidBodyProps> = (props) => {
+
+    const entity = useParent();
+
+    // @ts-ignore Ammo is defined in the global scope in the browser
+    if(!globalThis.Ammo && process.env.NODE_ENV !== 'production' ) {
+        throw new Error('The `<RigidBody>` component requires `usePhysics` to be set on the Application. `<Application usePhysics/>` ')
+    }
+
+    // If no type is defined, infer if possible from a render component
+    const type = entity.render && props.type === undefined ? entity.render.type : props.type;
+
+    useComponent("rigidbody", { ...props, type } );
+    return null
+    
+}
\ No newline at end of file
diff --git a/packages/lib/src/components/index.ts b/packages/lib/src/components/index.ts
index a820e15..e55ed53 100644
--- a/packages/lib/src/components/index.ts
+++ b/packages/lib/src/components/index.ts
@@ -1,3 +1,5 @@
+"use client"
+
 export { EnvAtlas } from './EnvAtlas'
 export { Camera } from './Camera'
 export { GSplat } from './GSplat'
@@ -5,4 +7,7 @@ export { Light } from './Light'
 export { Render } from './Render'
 export { Script } from './Script'
 export { Sprite } from './Sprite'
-export { Align } from './Align'
\ No newline at end of file
+export { Align } from './Align'
+export { Anim } from './Anim'
+export { RigidBody } from './RigidBody'
+export { Collision } from './Collision'
\ No newline at end of file

From fecdf301d8c30adb35f3a2ea60796bb181a1a9f0 Mon Sep 17 00:00:00 2001
From: Mark Lundin <mlundin@snapchat.com>
Date: Wed, 4 Dec 2024 14:54:51 +0000
Subject: [PATCH 09/12] Added Anim Component

---
 packages/lib/src/components/Anim.tsx | 45 ++++++++++++++++++++++++++++
 1 file changed, 45 insertions(+)
 create mode 100644 packages/lib/src/components/Anim.tsx

diff --git a/packages/lib/src/components/Anim.tsx b/packages/lib/src/components/Anim.tsx
new file mode 100644
index 0000000..e1ed32f
--- /dev/null
+++ b/packages/lib/src/components/Anim.tsx
@@ -0,0 +1,45 @@
+"use client"
+
+import { FC, useLayoutEffect } from "react";
+import { useComponent, useParent } from "../hooks";
+import { AnimComponent, Asset, Entity } from "playcanvas";
+
+interface AnimProps {
+    [key: string]: unknown;
+    asset : Asset
+}
+
+/**
+ * The Camera component is used to define the position and properties of a camera entity. 
+ */
+export const Anim: FC<AnimProps> = ({ asset, ...props }) => {
+
+    // Create the anim component
+    useComponent("anim", props);
+
+    // Get the associated Entity
+    const entity : Entity = useParent();
+
+    // Assign Asset animations to Anim component
+    useLayoutEffect(() => {
+
+        const anim : AnimComponent | undefined = entity.anim
+
+        if( asset?.resource ) console.log('anim', asset.resource);
+
+        // Early out if component instantiation fails, or the asset contains no animations
+        if(!anim || !asset?.resource?.animations || asset.resource.animations.length === 0) return;
+
+        console.log('animations', asset.resource.animations);
+        
+        // Filter out non animations, and assign animations to component
+        asset.resource.animations
+            .filter((animation: Asset) => animation.type ==='animation')
+            .forEach((animation: Asset) => {
+                anim.assignAnimation('animation', animation.resource)
+            });
+
+    }, [asset?.id, entity.getGuid()])
+
+    return null;
+}
\ No newline at end of file

From 43523bd287edc38fc220bce808b1a1fee9d4efc0 Mon Sep 17 00:00:00 2001
From: Mark Lundin <mlundin@snapchat.com>
Date: Wed, 4 Dec 2024 14:55:16 +0000
Subject: [PATCH 10/12] Updated Script.tsx types

---
 packages/lib/src/components/Script.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/lib/src/components/Script.tsx b/packages/lib/src/components/Script.tsx
index 71a5d82..7da3eb3 100644
--- a/packages/lib/src/components/Script.tsx
+++ b/packages/lib/src/components/Script.tsx
@@ -1,10 +1,14 @@
-import { Script as PcScript } from "playcanvas";
+// import { Script as PcScript } from "playcanvas";
 import { useScript } from "../hooks"
 import { FC, memo, useMemo } from "react";
 import { shallowEquals } from "../utils/shallow-equals";
 
+export interface ScriptConstructor {
+    __name: string;
+}
+
 interface ScriptProps {
-    script: typeof PcScript;
+    script: ScriptConstructor
     [key: string]: unknown;
 }
 

From 9338816f9bcd3df7556d50dc36c8f31d59399f9f Mon Sep 17 00:00:00 2001
From: Mark Lundin <mlundin@snapchat.com>
Date: Wed, 4 Dec 2024 14:56:56 +0000
Subject: [PATCH 11/12] deps + tsconfig update

---
 packages/lib/package.json  | 5 ++++-
 packages/lib/tsconfig.json | 5 ++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/lib/package.json b/packages/lib/package.json
index fc173fb..cfc1042 100644
--- a/packages/lib/package.json
+++ b/packages/lib/package.json
@@ -1,7 +1,7 @@
 {
     "name": "@playcanvas/react",
     "description": "A React renderer for PlayCanvas – build interactive 3D applications using React's declarative paradigm.",
-    "version": "0.1.20",
+    "version": "0.1.22",
     "type": "module",
     "sideEffects": false,
     "main": "dist/index.js",
@@ -85,5 +85,8 @@
     },
     "devDependencies": {
         "typescript": "^5.6.3"
+    },
+    "dependencies": {
+        "sync-ammo": "^0.1.2"
     }
 }
diff --git a/packages/lib/tsconfig.json b/packages/lib/tsconfig.json
index 78c23ae..462854b 100644
--- a/packages/lib/tsconfig.json
+++ b/packages/lib/tsconfig.json
@@ -1,6 +1,8 @@
 {
     "extends": "../../tsconfig.json",
     "compilerOptions": {
+        "allowSyntheticDefaultImports": true,
+        "esModuleInterop": true,
         "allowJs": true,
         "declaration": true,
         "declarationDir": "./dist",
@@ -12,7 +14,8 @@
         "noImplicitReturns": true,
         "noFallthroughCasesInSwitch": true,
         "outDir": "./dist",
-        "rootDir": "./src"
+        "rootDir": "./src",
+        "resolveJsonModule": true
     },
     "include": ["src"]
   }
\ No newline at end of file

From 0b06b781529c1bd75763f9abbf6c6f1534ad8a02 Mon Sep 17 00:00:00 2001
From: Mark Lundin <mlundin@snapchat.com>
Date: Wed, 4 Dec 2024 14:57:12 +0000
Subject: [PATCH 12/12] gitignore

---
 .gitignore | 41 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 41 insertions(+)

diff --git a/.gitignore b/.gitignore
index 3ac4070..b2c42a8 100644
--- a/.gitignore
+++ b/.gitignore
@@ -11,6 +11,7 @@ node_modules
 dist
 dist-ssr
 *.local
+*.pem
 
 # Editor directories and files
 .vscode/*
@@ -27,3 +28,43 @@ dist-ssr
 *.ply
 
 *storybook.log
+
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/**/.next/
+/**/out/
+
+# production
+/**/build
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+.olddocs
+.examples
\ No newline at end of file