@playcanvas/web-components 0.1.8 → 0.1.10

package/dist/pwc.cjs

@@ -3,9 +3,10 @@
 var playcanvas = require('playcanvas');
 
 /**
- * Base class for all PlayCanvas web components that initialize asynchronously.
+ * Base class for all PlayCanvas Web Components that initialize asynchronously.
  */
 class AsyncElement extends HTMLElement {
+    /** @ignore */
     constructor() {
         super();
         this._readyPromise = new Promise((resolve) => {
@@ -37,7 +38,13 @@ class AsyncElement extends HTMLElement {
     }
 }
 
+/**
+ * The ModuleElement interface provides properties and methods for manipulating
+ * `<pc-module>` elements. The ModuleElement interface also inherits the properties and
+ * methods of the {@link HTMLElement} interface.
+ */
 class ModuleElement extends HTMLElement {
+    /** @ignore */
     constructor() {
         super();
         this.loadPromise = this.loadModule();
@@ -76,7 +83,9 @@ customElements.define('pc-module', ModuleElement);
  */
 class AppElement extends AsyncElement {
     /**
-     * Creates a new AppElement.
+     * Creates a new AppElement instance.
+     *
+     * @ignore
      */
     constructor() {
         super();
@@ -89,6 +98,21 @@ class AppElement extends AsyncElement {
         this._depth = true;
         this._stencil = true;
         this._highResolution = false;
+        this._hierarchyReady = false;
+        this._picker = null;
+        this._hasPointerListeners = {
+            pointerenter: false,
+            pointerleave: false,
+            pointerdown: false,
+            pointerup: false,
+            pointermove: false
+        };
+        this._hoveredEntity = null;
+        this._pointerHandlers = {
+            pointermove: null,
+            pointerdown: null,
+            pointerup: null
+        };
         /**
          * The PlayCanvas application instance.
          */
@@ -118,6 +142,7 @@ class AppElement extends AsyncElement {
         this.app.graphicsDevice.maxPixelRatio = this._highResolution ? window.devicePixelRatio : 1;
         this.app.setCanvasFillMode(playcanvas.FILLMODE_FILL_WINDOW);
         this.app.setCanvasResolution(playcanvas.RESOLUTION_AUTO);
+        this._pickerCreate();
         // Get all pc-asset elements that are direct children of the pc-app element
         const assetElements = this.querySelectorAll(':scope > pc-asset');
         Array.from(assetElements).forEach((assetElement) => {
@@ -132,6 +157,16 @@ class AppElement extends AsyncElement {
         Array.from(materialElements).forEach((materialElement) => {
             materialElement.createMaterial();
         });
+        // Create all entities
+        const entityElements = this.querySelectorAll('pc-entity');
+        Array.from(entityElements).forEach((entityElement) => {
+            entityElement.createEntity(this.app);
+        });
+        // Build hierarchy
+        entityElements.forEach((entityElement) => {
+            entityElement.buildHierarchy(this.app);
+        });
+        this._hierarchyReady = true;
         // Load assets before starting the application
         this.app.preload(() => {
             // Start the application
@@ -142,6 +177,7 @@ class AppElement extends AsyncElement {
         });
     }
     disconnectedCallback() {
+        this._pickerDestroy();
         // Clean up the application
         if (this.app) {
             this.app.destroy();
@@ -160,6 +196,139 @@ class AppElement extends AsyncElement {
             this.app.resizeCanvas();
         }
     }
+    _pickerCreate() {
+        const { width, height } = this.app.graphicsDevice;
+        this._picker = new playcanvas.Picker(this.app, width, height);
+        // Create bound handlers but don't attach them yet
+        this._pointerHandlers.pointermove = this._onPointerMove.bind(this);
+        this._pointerHandlers.pointerdown = this._onPointerDown.bind(this);
+        this._pointerHandlers.pointerup = this._onPointerUp.bind(this);
+        // Listen for pointer listeners being added/removed
+        ['pointermove', 'pointerdown', 'pointerup', 'pointerenter', 'pointerleave'].forEach((type) => {
+            this.addEventListener(`${type}:connect`, () => this._onPointerListenerAdded(type));
+            this.addEventListener(`${type}:disconnect`, () => this._onPointerListenerRemoved(type));
+        });
+    }
+    _pickerDestroy() {
+        if (this._canvas) {
+            Object.entries(this._pointerHandlers).forEach(([type, handler]) => {
+                if (handler) {
+                    this._canvas.removeEventListener(type, handler);
+                }
+            });
+        }
+        this._picker = null;
+        this._pointerHandlers = {
+            pointermove: null,
+            pointerdown: null,
+            pointerup: null
+        };
+    }
+    _onPointerMove(event) {
+        if (!this._picker || !this.app)
+            return;
+        const camera = this.app.root.findComponent('camera');
+        if (!camera)
+            return;
+        const canvasRect = this._canvas.getBoundingClientRect();
+        const x = event.clientX - canvasRect.left;
+        const y = event.clientY - canvasRect.top;
+        this._picker.prepare(camera, this.app.scene);
+        const selection = this._picker.getSelection(x, y);
+        // Get the currently hovered entity by walking up the hierarchy
+        let newHoverEntity = null;
+        if (selection.length > 0) {
+            let node = selection[0].node;
+            while (node && !newHoverEntity) {
+                const entityElement = this.querySelector(`pc-entity[name="${node.name}"]`);
+                if (entityElement) {
+                    newHoverEntity = entityElement;
+                }
+                node = node.parent;
+            }
+        }
+        // Handle enter/leave events
+        if (this._hoveredEntity !== newHoverEntity) {
+            if (this._hoveredEntity && this._hoveredEntity.hasListeners('pointerleave')) {
+                this._hoveredEntity.dispatchEvent(new PointerEvent('pointerleave', event));
+            }
+            if (newHoverEntity && newHoverEntity.hasListeners('pointerenter')) {
+                newHoverEntity.dispatchEvent(new PointerEvent('pointerenter', event));
+            }
+        }
+        // Update hover state
+        this._hoveredEntity = newHoverEntity;
+        // Handle pointermove event
+        if (newHoverEntity && newHoverEntity.hasListeners('pointermove')) {
+            newHoverEntity.dispatchEvent(new PointerEvent('pointermove', event));
+        }
+    }
+    _onPointerDown(event) {
+        if (!this._picker || !this.app)
+            return;
+        const camera = this.app.root.findComponent('camera');
+        if (!camera)
+            return;
+        const canvasRect = this._canvas.getBoundingClientRect();
+        const x = event.clientX - canvasRect.left;
+        const y = event.clientY - canvasRect.top;
+        this._picker.prepare(camera, this.app.scene);
+        const selection = this._picker.getSelection(x, y);
+        if (selection.length > 0) {
+            let node = selection[0].node;
+            while (node) {
+                const entityElement = this.querySelector(`pc-entity[name="${node.name}"]`);
+                if (entityElement && entityElement.hasListeners('pointerdown')) {
+                    entityElement.dispatchEvent(new PointerEvent('pointerdown', event));
+                    break;
+                }
+                node = node.parent;
+            }
+        }
+    }
+    _onPointerUp(event) {
+        if (!this._picker || !this.app)
+            return;
+        const camera = this.app.root.findComponent('camera');
+        if (!camera)
+            return;
+        const canvasRect = this._canvas.getBoundingClientRect();
+        const x = event.clientX - canvasRect.left;
+        const y = event.clientY - canvasRect.top;
+        this._picker.prepare(camera, this.app.scene);
+        const selection = this._picker.getSelection(x, y);
+        if (selection.length > 0) {
+            const entityElement = this.querySelector(`pc-entity[name="${selection[0].node.name}"]`);
+            if (entityElement && entityElement.hasListeners('pointerup')) {
+                entityElement.dispatchEvent(new PointerEvent('pointerup', event));
+            }
+        }
+    }
+    _onPointerListenerAdded(type) {
+        if (!this._hasPointerListeners[type] && this._canvas) {
+            this._hasPointerListeners[type] = true;
+            // For enter/leave events, we need the move handler
+            const handler = (type === 'pointerenter' || type === 'pointerleave') ?
+                this._pointerHandlers.pointermove :
+                this._pointerHandlers[type];
+            if (handler) {
+                this._canvas.addEventListener(type === 'pointerenter' || type === 'pointerleave' ? 'pointermove' : type, handler);
+            }
+        }
+    }
+    _onPointerListenerRemoved(type) {
+        const hasListeners = Array.from(this.querySelectorAll('pc-entity'))
+            .some(entity => entity.hasListeners(type));
+        if (!hasListeners && this._canvas) {
+            this._hasPointerListeners[type] = false;
+            const handler = (type === 'pointerenter' || type === 'pointerleave') ?
+                this._pointerHandlers.pointermove :
+                this._pointerHandlers[type];
+            if (handler) {
+                this._canvas.removeEventListener(type === 'pointerenter' || type === 'pointerleave' ? 'pointermove' : type, handler);
+            }
+        }
+    }
     /**
      * Sets the alpha flag.
      * @param value - The alpha flag.
@@ -202,6 +371,14 @@ class AppElement extends AsyncElement {
     get depth() {
         return this._depth;
     }
+    /**
+     * Gets the hierarchy ready flag.
+     * @returns The hierarchy ready flag.
+     * @ignore
+     */
+    get hierarchyReady() {
+        return this._hierarchyReady;
+    }
     /**
      * Sets the high resolution flag. When true, the application will render at the device's
      * physical resolution. When false, the application will render at CSS resolution.
@@ -473,7 +650,9 @@ const parseVec4 = (value) => {
 };
 
 /**
- * Represents an entity in the PlayCanvas engine.
+ * The EntityElement interface provides properties and methods for manipulating
+ * `<pc-entity>` elements. The EntityElement interface also inherits the properties and
+ * methods of the {@link HTMLElement} interface.
  */
 class EntityElement extends AsyncElement {
     constructor() {
@@ -502,49 +681,93 @@ class EntityElement extends AsyncElement {
          * The tags of the entity.
          */
         this._tags = [];
+        /**
+         * The pointer event listeners for the entity.
+         */
+        this._listeners = {};
         /**
          * The PlayCanvas entity instance.
          */
         this.entity = null;
     }
-    async connectedCallback() {
-        const closestApp = this.closestApp;
-        if (!closestApp)
-            return;
-        // Wait for the app to complete initialization
-        await closestApp.ready();
-        const app = closestApp.app;
+    createEntity(app) {
         // Create a new entity
-        this.entity = new playcanvas.Entity(this._name, app);
-        // Initialize from attributes
-        const enabledAttr = this.getAttribute('enabled');
-        const nameAttr = this.getAttribute('name');
-        const positionAttr = this.getAttribute('position');
-        const rotationAttr = this.getAttribute('rotation');
-        const scaleAttr = this.getAttribute('scale');
-        const tagsAttr = this.getAttribute('tags');
-        if (enabledAttr)
-            this.enabled = enabledAttr !== 'false';
-        if (nameAttr)
-            this.name = nameAttr;
-        if (positionAttr)
-            this.position = parseVec3(positionAttr);
-        if (rotationAttr)
-            this.rotation = parseVec3(rotationAttr);
-        if (scaleAttr)
-            this.scale = parseVec3(scaleAttr);
-        if (tagsAttr)
-            this.tags = tagsAttr.split(',').map(tag => tag.trim());
+        this.entity = new playcanvas.Entity(this.getAttribute('name') || this._name, app);
+        const enabled = this.getAttribute('enabled');
+        if (enabled) {
+            this.entity.enabled = enabled !== 'false';
+        }
+        const position = this.getAttribute('position');
+        if (position) {
+            this.entity.setLocalPosition(parseVec3(position));
+        }
+        const rotation = this.getAttribute('rotation');
+        if (rotation) {
+            this.entity.setLocalEulerAngles(parseVec3(rotation));
+        }
+        const scale = this.getAttribute('scale');
+        if (scale) {
+            this.entity.setLocalScale(parseVec3(scale));
+        }
+        const tags = this.getAttribute('tags');
+        if (tags) {
+            this.entity.tags.add(tags.split(',').map(tag => tag.trim()));
+        }
+        // Handle pointer events
+        const pointerEvents = [
+            'onpointerenter',
+            'onpointerleave',
+            'onpointerdown',
+            'onpointerup',
+            'onpointermove'
+        ];
+        pointerEvents.forEach((eventName) => {
+            const handler = this.getAttribute(eventName);
+            if (handler) {
+                const eventType = eventName.substring(2); // remove 'on' prefix
+                const eventHandler = (event) => {
+                    try {
+                        /* eslint-disable-next-line no-new-func */
+                        new Function('event', handler).call(this, event);
+                    }
+                    catch (e) {
+                        console.error('Error in event handler:', e);
+                    }
+                };
+                this.addEventListener(eventType, eventHandler);
+            }
+        });
+    }
+    buildHierarchy(app) {
+        if (!this.entity)
+            return;
         const closestEntity = this.closestEntity;
-        if (closestEntity) {
-            closestEntity.ready().then(() => {
-                closestEntity.entity.addChild(this.entity);
-                this._onReady();
-            });
+        if (closestEntity === null || closestEntity === void 0 ? void 0 : closestEntity.entity) {
+            closestEntity.entity.addChild(this.entity);
         }
         else {
             app.root.addChild(this.entity);
-            this._onReady();
+        }
+        this._onReady();
+    }
+    connectedCallback() {
+        // Wait for app to be ready
+        const closestApp = this.closestApp;
+        if (!closestApp)
+            return;
+        // If app is already running, create entity immediately
+        if (closestApp.hierarchyReady) {
+            const app = closestApp.app;
+            this.createEntity(app);
+            this.buildHierarchy(app);
+            // Handle any child entities that might exist
+            const childEntities = this.querySelectorAll('pc-entity');
+            childEntities.forEach((child) => {
+                child.createEntity(app);
+            });
+            childEntities.forEach((child) => {
+                child.buildHierarchy(app);
+            });
         }
     }
     disconnectedCallback() {
@@ -554,6 +777,7 @@ class EntityElement extends AsyncElement {
             children.forEach((child) => {
                 child.entity = null;
             });
+            // Destroy the entity
             this.entity.destroy();
             this.entity = null;
         }
@@ -662,7 +886,19 @@ class EntityElement extends AsyncElement {
         return this._tags;
     }
     static get observedAttributes() {
-        return ['enabled', 'name', 'position', 'rotation', 'scale', 'tags'];
+        return [
+            'enabled',
+            'name',
+            'position',
+            'rotation',
+            'scale',
+            'tags',
+            'onpointerenter',
+            'onpointerleave',
+            'onpointerdown',
+            'onpointerup',
+            'onpointermove'
+        ];
     }
     attributeChangedCallback(name, _oldValue, newValue) {
         switch (name) {
@@ -684,7 +920,51 @@ class EntityElement extends AsyncElement {
             case 'tags':
                 this.tags = newValue.split(',').map(tag => tag.trim());
                 break;
+            case 'onpointerenter':
+            case 'onpointerleave':
+            case 'onpointerdown':
+            case 'onpointerup':
+            case 'onpointermove':
+                if (newValue) {
+                    const eventName = name.substring(2);
+                    // Use Function.prototype.bind to avoid new Function
+                    const handler = (event) => {
+                        try {
+                            const handlerStr = this.getAttribute(eventName) || '';
+                            /* eslint-disable-next-line no-new-func */
+                            new Function('event', handlerStr).call(this, event);
+                        }
+                        catch (e) {
+                            console.error('Error in event handler:', e);
+                        }
+                    };
+                    this.addEventListener(eventName, handler);
+                }
+                break;
+        }
+    }
+    addEventListener(type, listener, options) {
+        if (!this._listeners[type]) {
+            this._listeners[type] = [];
         }
+        this._listeners[type].push(listener);
+        super.addEventListener(type, listener, options);
+        if (type.startsWith('pointer')) {
+            this.dispatchEvent(new CustomEvent(`${type}:connect`, { bubbles: true }));
+        }
+    }
+    removeEventListener(type, listener, options) {
+        if (this._listeners[type]) {
+            this._listeners[type] = this._listeners[type].filter(l => l !== listener);
+        }
+        super.removeEventListener(type, listener, options);
+        if (type.startsWith('pointer')) {
+            this.dispatchEvent(new CustomEvent(`${type}:disconnect`, { bubbles: true }));
+        }
+    }
+    hasListeners(type) {
+        var _a;
+        return Boolean((_a = this._listeners[type]) === null || _a === void 0 ? void 0 : _a.length);
     }
 }
 customElements.define('pc-entity', EntityElement);
@@ -709,7 +989,9 @@ const extToType = new Map([
     ['webp', 'texture']
 ]);
 /**
- * Loads an asset into the PlayCanvas engine.
+ * The AssetElement interface provides properties and methods for manipulating
+ * `<pc-asset>` elements. The AssetElement interface also inherits the properties and
+ * methods of the {@link HTMLElement} interface.
  */
 class AssetElement extends HTMLElement {
     constructor() {
@@ -785,8 +1067,10 @@ customElements.define('pc-asset', AssetElement);
  */
 class ComponentElement extends AsyncElement {
     /**
-     * Constructor for the ComponentElement.
+     * Creates a new ComponentElement instance.
+     *
      * @param componentName - The name of the component.
+     * @ignore
      */
     constructor(componentName) {
         super();
@@ -855,11 +1139,14 @@ class ComponentElement extends AsyncElement {
 }
 
 /**
- * Represents a audio listener component in the PlayCanvas engine.
+ * The ListenerComponentElement interface provides properties and methods for manipulating
+ * `<pc-listener>` elements. The ListenerComponentElement interface also inherits the properties
+ * and methods of the {@link HTMLElement} interface.
  *
  * @category Components
  */
 class ListenerComponentElement extends ComponentElement {
+    /** @ignore */
     constructor() {
         super('audiolistener');
     }
@@ -873,15 +1160,24 @@ class ListenerComponentElement extends ComponentElement {
 }
 customElements.define('pc-listener', ListenerComponentElement);
 
+const tonemaps = new Map([
+    ['none', playcanvas.TONEMAP_NONE],
+    ['linear', playcanvas.TONEMAP_LINEAR],
+    ['filmic', playcanvas.TONEMAP_FILMIC],
+    ['hejl', playcanvas.TONEMAP_HEJL],
+    ['aces', playcanvas.TONEMAP_ACES],
+    ['aces2', playcanvas.TONEMAP_ACES2],
+    ['neutral', playcanvas.TONEMAP_NEUTRAL]
+]);
 /**
- * Represents a camera component in the PlayCanvas engine.
+ * The CameraComponentElement interface provides properties and methods for manipulating
+ * `<pc-camera>` elements. The CameraComponentElement interface also inherits the properties and
+ * methods of the {@link HTMLElement} interface.
  *
  * @category Components
  */
 class CameraComponentElement extends ComponentElement {
-    /**
-     * Creates a new CameraComponentElement.
-     */
+    /** @ignore */
     constructor() {
         super('camera');
         this._clearColor = new playcanvas.Color(0.75, 0.75, 0.75, 1);
@@ -893,12 +1189,14 @@ class CameraComponentElement extends ComponentElement {
         this._flipFaces = false;
         this._fov = 45;
         this._frustumCulling = true;
+        this._gamma = 'srgb';
         this._nearClip = 0.1;
         this._orthographic = false;
         this._orthoHeight = 10;
         this._priority = 0;
         this._rect = new playcanvas.Vec4(0, 0, 1, 1);
         this._scissorRect = new playcanvas.Vec4(0, 0, 1, 1);
+        this._tonemap = 'none';
     }
     getInitialComponentData() {
         return {
@@ -911,12 +1209,14 @@ class CameraComponentElement extends ComponentElement {
             flipFaces: this._flipFaces,
             fov: this._fov,
             frustumCulling: this._frustumCulling,
+            gammaCorrection: this._gamma === 'srgb' ? playcanvas.GAMMA_SRGB : playcanvas.GAMMA_NONE,
             nearClip: this._nearClip,
             orthographic: this._orthographic,
             orthoHeight: this._orthoHeight,
             priority: this._priority,
             rect: this._rect,
-            scissorRect: this._scissorRect
+            scissorRect: this._scissorRect,
+            toneMapping: tonemaps.get(this._tonemap)
         };
     }
     get xrAvailable() {
@@ -1099,6 +1399,23 @@ class CameraComponentElement extends ComponentElement {
     get frustumCulling() {
         return this._frustumCulling;
     }
+    /**
+     * Sets the gamma correction of the camera.
+     * @param value - The gamma correction.
+     */
+    set gamma(value) {
+        this._gamma = value;
+        if (this.component) {
+            this.component.gammaCorrection = value === 'srgb' ? playcanvas.GAMMA_SRGB : playcanvas.GAMMA_NONE;
+        }
+    }
+    /**
+     * Gets the gamma correction of the camera.
+     * @returns The gamma correction.
+     */
+    get gamma() {
+        return this._gamma;
+    }
     /**
      * Sets the near clip distance of the camera.
      * @param value - The near clip distance.
@@ -1201,6 +1518,24 @@ class CameraComponentElement extends ComponentElement {
     get scissorRect() {
         return this._scissorRect;
     }
+    /**
+     * Sets the tone mapping of the camera.
+     * @param value - The tone mapping.
+     */
+    set tonemap(value) {
+        var _a;
+        this._tonemap = value;
+        if (this.component) {
+            this.component.toneMapping = (_a = tonemaps.get(value)) !== null && _a !== void 0 ? _a : playcanvas.TONEMAP_NONE;
+        }
+    }
+    /**
+     * Gets the tone mapping of the camera.
+     * @returns The tone mapping.
+     */
+    get tonemap() {
+        return this._tonemap;
+    }
     static get observedAttributes() {
         return [
             ...super.observedAttributes,
@@ -1213,12 +1548,14 @@ class CameraComponentElement extends ComponentElement {
             'flip-faces',
             'fov',
             'frustum-culling',
+            'gamma',
             'near-clip',
             'orthographic',
             'ortho-height',
             'priority',
             'rect',
-            'scissor-rect'
+            'scissor-rect',
+            'tonemap'
         ];
     }
     attributeChangedCallback(name, _oldValue, newValue) {
@@ -1251,6 +1588,9 @@ class CameraComponentElement extends ComponentElement {
             case 'frustum-culling':
                 this.frustumCulling = newValue !== 'false';
                 break;
+            case 'gamma':
+                this.gamma = newValue;
+                break;
             case 'near-clip':
                 this.nearClip = parseFloat(newValue);
                 break;
@@ -1269,20 +1609,23 @@ class CameraComponentElement extends ComponentElement {
             case 'scissor-rect':
                 this.scissorRect = parseVec4(newValue);
                 break;
+            case 'tonemap':
+                this.tonemap = newValue;
+                break;
         }
     }
 }
 customElements.define('pc-camera', CameraComponentElement);
 
 /**
- * Represents a collision component in the PlayCanvas engine.
+ * The CollisionComponentElement interface provides properties and methods for manipulating
+ * `<pc-collision>` elements. The CollisionComponentElement interface also inherits the properties
+ * and methods of the {@link HTMLElement} interface.
  *
  * @category Components
  */
 class CollisionComponentElement extends ComponentElement {
-    /**
-     * Creates a new CollisionComponentElement.
-     */
+    /** @ignore */
     constructor() {
         super('collision');
         this._angularOffset = new playcanvas.Quat();
@@ -1421,11 +1764,14 @@ class CollisionComponentElement extends ComponentElement {
 customElements.define('pc-collision', CollisionComponentElement);
 
 /**
- * Represents an element component in the PlayCanvas engine.
+ * The ElementComponentElement interface provides properties and methods for manipulating
+ * `<pc-element>` elements. The ElementComponentElement interface also inherits the properties and
+ * methods of the {@link HTMLElement} interface.
  *
  * @category Components
  */
 class ElementComponentElement extends ComponentElement {
+    /** @ignore */
     constructor() {
         super('element');
         this._anchor = new playcanvas.Vec4(0.5, 0.5, 0.5, 0.5);
@@ -1631,11 +1977,14 @@ class ElementComponentElement extends ComponentElement {
 customElements.define('pc-element', ElementComponentElement);
 
 /**
- * Represents a gsplat component in the PlayCanvas engine.
+ * The GSplatComponentElement interface provides properties and methods for manipulating
+ * `<pc-splat>` elements. The GSplatComponentElement interface also inherits the properties and
+ * methods of the {@link HTMLElement} interface.
  *
  * @category Components
  */
 class GSplatComponentElement extends ComponentElement {
+    /** @ignore */
     constructor() {
         super('gsplat');
         this._asset = '';
@@ -1676,15 +2025,26 @@ class GSplatComponentElement extends ComponentElement {
 }
 customElements.define('pc-splat', GSplatComponentElement);
 
+const shadowTypes = new Map([
+    ['pcf1-16f', playcanvas.SHADOW_PCF1_16F],
+    ['pcf1-32f', playcanvas.SHADOW_PCF1_32F],
+    ['pcf3-16f', playcanvas.SHADOW_PCF3_16F],
+    ['pcf3-32f', playcanvas.SHADOW_PCF3_32F],
+    ['pcf5-16f', playcanvas.SHADOW_PCF5_16F],
+    ['pcf5-32f', playcanvas.SHADOW_PCF5_32F],
+    ['vsm-16f', playcanvas.SHADOW_VSM_16F],
+    ['vsm-32f', playcanvas.SHADOW_VSM_32F],
+    ['pcss-32f', playcanvas.SHADOW_PCSS_32F]
+]);
 /**
- * Represents a light component in the PlayCanvas engine.
+ * The LightComponentElement interface provides properties and methods for manipulating
+ * `<pc-light>` elements. The LightComponentElement interface also inherits the properties and
+ * methods of the {@link HTMLElement} interface.
  *
  * @category Components
  */
 class LightComponentElement extends ComponentElement {
-    /**
-     * Creates a new LightComponentElement.
-     */
+    /** @ignore */
     constructor() {
         super('light');
         this._castShadows = false;
@@ -1696,8 +2056,11 @@ class LightComponentElement extends ComponentElement {
         this._range = 10;
         this._shadowBias = 0.2;
         this._shadowDistance = 16;
+        this._shadowIntensity = 1;
         this._shadowResolution = 1024;
+        this._shadowType = 'pcf3-32f';
         this._type = 'directional';
+        this._vsmBias = 0.01;
     }
     getInitialComponentData() {
         return {
@@ -1710,8 +2073,11 @@ class LightComponentElement extends ComponentElement {
             range: this._range,
             shadowBias: this._shadowBias,
             shadowDistance: this._shadowDistance,
+            shadowIntensity: this._shadowIntensity,
             shadowResolution: this._shadowResolution,
-            type: this._type
+            shadowType: shadowTypes.get(this._shadowType),
+            type: this._type,
+            vsmBias: this._vsmBias
         };
     }
     /**
@@ -1874,6 +2240,23 @@ class LightComponentElement extends ComponentElement {
     get shadowDistance() {
         return this._shadowDistance;
     }
+    /**
+     * Sets the shadow intensity of the light.
+     * @param value - The shadow intensity.
+     */
+    set shadowIntensity(value) {
+        this._shadowIntensity = value;
+        if (this.component) {
+            this.component.shadowIntensity = value;
+        }
+    }
+    /**
+     * Gets the shadow intensity of the light.
+     * @returns The shadow intensity.
+     */
+    get shadowIntensity() {
+        return this._shadowIntensity;
+    }
     /**
      * Sets the shadow resolution of the light.
      * @param value - The shadow resolution.
@@ -1891,6 +2274,34 @@ class LightComponentElement extends ComponentElement {
     get shadowResolution() {
         return this._shadowResolution;
     }
+    /**
+     * Sets the shadow type of the light.
+     * @param value - The shadow type. Can be:
+     *
+     * - `pcf1-16f` - 1-tap percentage-closer filtered shadow map with 16-bit depth.
+     * - `pcf1-32f` - 1-tap percentage-closer filtered shadow map with 32-bit depth.
+     * - `pcf3-16f` - 3-tap percentage-closer filtered shadow map with 16-bit depth.
+     * - `pcf3-32f` - 3-tap percentage-closer filtered shadow map with 32-bit depth.
+     * - `pcf5-16f` - 5-tap percentage-closer filtered shadow map with 16-bit depth.
+     * - `pcf5-32f` - 5-tap percentage-closer filtered shadow map with 32-bit depth.
+     * - `vsm-16f` - Variance shadow map with 16-bit depth.
+     * - `vsm-32f` - Variance shadow map with 32-bit depth.
+     * - `pcss-32f` - Percentage-closer soft shadow with 32-bit depth.
+     */
+    set shadowType(value) {
+        var _a;
+        this._shadowType = value;
+        if (this.component) {
+            this.component.shadowType = (_a = shadowTypes.get(value)) !== null && _a !== void 0 ? _a : playcanvas.SHADOW_PCF3_32F;
+        }
+    }
+    /**
+     * Gets the shadow type of the light.
+     * @returns The shadow type.
+     */
+    get shadowType() {
+        return this._shadowType;
+    }
     /**
      * Sets the type of the light.
      * @param value - The type.
@@ -1912,6 +2323,23 @@ class LightComponentElement extends ComponentElement {
     get type() {
         return this._type;
     }
+    /**
+     * Sets the VSM bias of the light.
+     * @param value - The VSM bias.
+     */
+    set vsmBias(value) {
+        this._vsmBias = value;
+        if (this.component) {
+            this.component.vsmBias = value;
+        }
+    }
+    /**
+     * Gets the VSM bias of the light.
+     * @returns The VSM bias.
+     */
+    get vsmBias() {
+        return this._vsmBias;
+    }
     static get observedAttributes() {
         return [
             ...super.observedAttributes,
@@ -1924,8 +2352,11 @@ class LightComponentElement extends ComponentElement {
             'range',
             'shadow-bias',
             'shadow-distance',
+            'shadow-intensity',
             'shadow-resolution',
-            'type'
+            'shadow-type',
+            'type',
+            'vsm-bias'
         ];
     }
     attributeChangedCallback(name, _oldValue, newValue) {
@@ -1961,16 +2392,27 @@ class LightComponentElement extends ComponentElement {
             case 'shadow-resolution':
                 this.shadowResolution = Number(newValue);
                 break;
+            case 'shadow-intensity':
+                this.shadowIntensity = Number(newValue);
+                break;
+            case 'shadow-type':
+                this.shadowType = newValue;
+                break;
             case 'type':
                 this.type = newValue;
                 break;
+            case 'vsm-bias':
+                this.vsmBias = Number(newValue);
+                break;
         }
     }
 }
 customElements.define('pc-light', LightComponentElement);
 
 /**
- * Represents a material in the PlayCanvas engine.
+ * The MaterialElement interface provides properties and methods for manipulating
+ * `<pc-material>` elements. The MaterialElement interface also inherits the properties and
+ * methods of the {@link HTMLElement} interface.
  */
 class MaterialElement extends HTMLElement {
     constructor() {
@@ -1984,8 +2426,8 @@ class MaterialElement extends HTMLElement {
     }
     createMaterial() {
         this.material = new playcanvas.StandardMaterial();
-        this.material.glossInvert = true;
-        this.material.useMetalness = true;
+        this.material.glossInvert = false;
+        this.material.useMetalness = false;
         this.material.diffuse = this._diffuse;
         this.diffuseMap = this._diffuseMap;
         this.metalnessMap = this._metalnessMap;
@@ -2084,11 +2526,14 @@ class MaterialElement extends HTMLElement {
 customElements.define('pc-material', MaterialElement);
 
 /**
- * Represents a render component in the PlayCanvas engine.
+ * The RenderComponentElement interface provides properties and methods for manipulating
+ * `<pc-render>` elements. The RenderComponentElement interface also inherits the properties and
+ * methods of the {@link HTMLElement} interface.
  *
  * @category Components
  */
 class RenderComponentElement extends ComponentElement {
+    /** @ignore */
     constructor() {
         super('render');
         this._castShadows = true;
@@ -2203,14 +2648,14 @@ class RenderComponentElement extends ComponentElement {
 customElements.define('pc-render', RenderComponentElement);
 
 /**
- * Represents a rigidbody component in the PlayCanvas engine.
+ * The RigidBodyComponentElement interface provides properties and methods for manipulating
+ * `<pc-rigidbody>` elements. The RigidBodyComponentElement interface also inherits the properties
+ * and methods of the {@link HTMLElement} interface.
  *
  * @category Components
  */
 class RigidBodyComponentElement extends ComponentElement {
-    /**
-     * Creates a new RigidBodyComponentElement.
-     */
+    /** @ignore */
     constructor() {
         super('rigidbody');
         /**
@@ -2390,11 +2835,14 @@ class RigidBodyComponentElement extends ComponentElement {
 customElements.define('pc-rigidbody', RigidBodyComponentElement);
 
 /**
- * Represents a screen component in the PlayCanvas engine.
+ * The ScreenComponentElement interface provides properties and methods for manipulating
+ * `<pc-screen>` elements. The ScreenComponentElement interface also inherits the properties and
+ * methods of the {@link HTMLElement} interface.
  *
  * @category Components
  */
 class ScreenComponentElement extends ComponentElement {
+    /** @ignore */
     constructor() {
         super('screen');
         this._screenSpace = false;
@@ -2512,15 +2960,15 @@ class ScreenComponentElement extends ComponentElement {
 }
 customElements.define('pc-screen', ScreenComponentElement);
 
-const tmpV2 = new playcanvas.Vec2();
-const tmpV3 = new playcanvas.Vec3();
-const tmpV4 = new playcanvas.Vec4();
 /**
- * Represents a script component in the PlayCanvas engine.
+ * The ScriptComponentElement interface provides properties and methods for manipulating
+ * `<pc-scripts>` elements. The ScriptComponentElement interface also inherits the properties and
+ * methods of the {@link HTMLElement} interface.
  *
  * @category Components
  */
 class ScriptComponentElement extends ComponentElement {
+    /** @ignore */
     constructor() {
         super('script');
         // Create mutation observer to watch for child script elements
@@ -2555,22 +3003,34 @@ class ScriptComponentElement extends ComponentElement {
                         return;
                     }
                 }
-                // Handle vectors
-                if (Array.isArray(value)) {
-                    if (target[key] instanceof playcanvas.Vec2) {
-                        target[key] = tmpV2.set(value[0], value[1]);
+                // Handle arrays
+                if (value && typeof value === 'object' && Array.isArray(value)) {
+                    // If it's an array of objects, recursively apply to each object
+                    if (value.length > 0 && typeof value[0] === 'object') {
+                        target[key] = value.map((item) => {
+                            const obj = {};
+                            for (const itemKey in item) {
+                                applyValue(obj, itemKey, item[itemKey]);
+                            }
+                            return obj;
+                        });
+                        return;
+                    }
+                    // Handle vectors
+                    if (value.length === 2 && typeof value[0] === 'number') {
+                        target[key] = new playcanvas.Vec2(value[0], value[1]);
                         return;
                     }
-                    if (target[key] instanceof playcanvas.Vec3) {
-                        target[key] = tmpV3.set(value[0], value[1], value[2]);
+                    if (value.length === 3 && typeof value[0] === 'number') {
+                        target[key] = new playcanvas.Vec3(value[0], value[1], value[2]);
                         return;
                     }
-                    if (target[key] instanceof playcanvas.Vec4) {
-                        target[key] = tmpV4.set(value[0], value[1], value[2], value[3]);
+                    if (value.length === 4 && typeof value[0] === 'number') {
+                        target[key] = new playcanvas.Vec4(value[0], value[1], value[2], value[3]);
                         return;
                     }
                 }
-                // Handle nested objects
+                // Handle nested objects (non-array)
                 if (value && typeof value === 'object' && !Array.isArray(value)) {
                     if (!target[key] || typeof target[key] !== 'object') {
                         target[key] = {};
@@ -2663,7 +3123,9 @@ class ScriptComponentElement extends ComponentElement {
 customElements.define('pc-scripts', ScriptComponentElement);
 
 /**
- * Represents a script in the PlayCanvas engine.
+ * The ScriptElement interface provides properties and methods for manipulating
+ * `<pc-script>` elements. The ScriptElement interface also inherits the properties and
+ * methods of the {@link HTMLElement} interface.
  */
 class ScriptElement extends HTMLElement {
     constructor() {
@@ -2742,11 +3204,14 @@ class ScriptElement extends HTMLElement {
 customElements.define('pc-script', ScriptElement);
 
 /**
- * Represents a sound component in the PlayCanvas engine.
+ * The SoundComponentElement interface provides properties and methods for manipulating
+ * `<pc-sounds>` elements. The SoundComponentElement interface also inherits the properties and
+ * methods of the {@link HTMLElement} interface.
  *
  * @category Components
  */
 class SoundComponentElement extends ComponentElement {
+    /** @ignore */
     constructor() {
         super('sound');
         this._distanceModel = 'linear';
@@ -2936,7 +3401,9 @@ class SoundComponentElement extends ComponentElement {
 customElements.define('pc-sounds', SoundComponentElement);
 
 /**
- * Represents a sound slot in the PlayCanvas engine.
+ * The SoundSlotElement interface provides properties and methods for manipulating
+ * `<pc-sound>` elements. The SoundSlotElement interface also inherits the properties and
+ * methods of the {@link AsyncElement} interface.
  */
 class SoundSlotElement extends AsyncElement {
     constructor() {
@@ -3177,7 +3644,9 @@ class SoundSlotElement extends AsyncElement {
 customElements.define('pc-sound', SoundSlotElement);
 
 /**
- * Represents a model in the PlayCanvas engine.
+ * The ModelElement interface provides properties and methods for manipulating
+ * `<pc-model>` elements. The ModelElement interface also inherits the properties and
+ * methods of the {@link HTMLElement} interface.
  */
 class ModelElement extends AsyncElement {
     constructor() {
@@ -3270,7 +3739,9 @@ class ModelElement extends AsyncElement {
 customElements.define('pc-model', ModelElement);
 
 /**
- * Represents a scene in the PlayCanvas engine.
+ * The SceneElement interface provides properties and methods for manipulating
+ * `<pc-scene>` elements. The SceneElement interface also inherits the properties and
+ * methods of the {@link HTMLElement} interface.
  */
 class SceneElement extends AsyncElement {
     constructor() {
@@ -3309,11 +3780,11 @@ class SceneElement extends AsyncElement {
     }
     updateSceneSettings() {
         if (this.scene) {
-            this.scene.rendering.fog = this._fog;
-            this.scene.rendering.fogColor = this._fogColor;
-            this.scene.rendering.fogDensity = this._fogDensity;
-            this.scene.rendering.fogStart = this._fogStart;
-            this.scene.rendering.fogEnd = this._fogEnd;
+            this.scene.fog.type = this._fog;
+            this.scene.fog.color = this._fogColor;
+            this.scene.fog.density = this._fogDensity;
+            this.scene.fog.start = this._fogStart;
+            this.scene.fog.end = this._fogEnd;
             // ... set other properties on the scene as well
         }
     }
@@ -3324,7 +3795,7 @@ class SceneElement extends AsyncElement {
     set fog(value) {
         this._fog = value;
         if (this.scene) {
-            this.scene.rendering.fog = value;
+            this.scene.fog.type = value;
         }
     }
     /**
@@ -3341,7 +3812,7 @@ class SceneElement extends AsyncElement {
     set fogColor(value) {
         this._fogColor = value;
         if (this.scene) {
-            this.scene.rendering.fogColor = value;
+            this.scene.fog.color = value;
         }
     }
     /**
@@ -3358,7 +3829,7 @@ class SceneElement extends AsyncElement {
     set fogDensity(value) {
         this._fogDensity = value;
         if (this.scene) {
-            this.scene.rendering.fogDensity = value;
+            this.scene.fog.density = value;
         }
     }
     /**
@@ -3375,7 +3846,7 @@ class SceneElement extends AsyncElement {
     set fogStart(value) {
         this._fogStart = value;
         if (this.scene) {
-            this.scene.rendering.fogStart = value;
+            this.scene.fog.start = value;
         }
     }
     /**
@@ -3392,7 +3863,7 @@ class SceneElement extends AsyncElement {
     set fogEnd(value) {
         this._fogEnd = value;
         if (this.scene) {
-            this.scene.rendering.fogEnd = value;
+            this.scene.fog.end = value;
         }
     }
     /**
@@ -3429,7 +3900,9 @@ class SceneElement extends AsyncElement {
 customElements.define('pc-scene', SceneElement);
 
 /**
- * Represents a sky in the PlayCanvas engine.
+ * The SkyElement interface provides properties and methods for manipulating
+ * `<pc-sky>` elements. The SkyElement interface also inherits the properties and
+ * methods of the {@link HTMLElement} interface.
  */
 class SkyElement extends AsyncElement {
     constructor() {