@playcanvas/web-components 0.1.1 → 0.1.3

package/dist/pwc.mjs

@@ -1,4 +1,4 @@
-import { WasmModule, Application, Keyboard, Mouse, FILLMODE_FILL_WINDOW, RESOLUTION_AUTO, Color, Vec2, Vec3, Vec4, Entity, Asset, PROJECTION_ORTHOGRAPHIC, PROJECTION_PERSPECTIVE, Quat, LAYERID_SKYBOX } from 'playcanvas';
+import { WasmModule, Application, Keyboard, Mouse, FILLMODE_FILL_WINDOW, RESOLUTION_AUTO, Color, Vec2, Vec3, Vec4, Entity, Asset, PROJECTION_ORTHOGRAPHIC, PROJECTION_PERSPECTIVE, StandardMaterial, SCALEMODE_BLEND, SCALEMODE_NONE, Quat, LAYERID_SKYBOX } from 'playcanvas';
 
 class ModuleElement extends HTMLElement {
     constructor() {
@@ -76,6 +76,11 @@ class AppElement extends HTMLElement {
                 this.app.assets.add(asset);
             }
         });
+        // Get all pc-material elements that are direct children of the pc-app element
+        const materialElements = this.querySelectorAll(':scope > pc-material');
+        Array.from(materialElements).forEach((materialElement) => {
+            materialElement.createMaterial();
+        });
         // Load assets before starting the application
         this.app.preload(() => {
             // Start the application
@@ -220,7 +225,7 @@ class EntityElement extends HTMLElement {
         const app = await appElement.getApplication();
         // Create a new entity
         this.entity = new Entity(this._name, app);
-        if (this.parentElement && this.parentElement.tagName === 'pc-entity' && this.parentElement.entity) {
+        if (this.parentElement && this.parentElement.tagName.toLowerCase() === 'pc-entity' && this.parentElement.entity) {
             this.parentElement.entity.addChild(this.entity);
         }
         else {
@@ -455,6 +460,10 @@ class AssetElement extends HTMLElement {
     get preload() {
         return this._preload;
     }
+    static get(id) {
+        const assetElement = document.querySelector(`pc-asset[id="${id}"]`);
+        return assetElement === null || assetElement === void 0 ? void 0 : assetElement.asset;
+    }
     static get observedAttributes() {
         return ['preload'];
     }
@@ -576,21 +585,39 @@ class CameraComponentElement extends ComponentElement {
      */
     constructor() {
         super('camera');
-        this._clearColor = new Color(1, 1, 1, 1);
+        this._clearColor = new Color(0.75, 0.75, 0.75, 1);
+        this._clearColorBuffer = true;
+        this._clearDepthBuffer = true;
+        this._clearStencilBuffer = false;
+        this._cullFaces = true;
         this._farClip = 1000;
+        this._flipFaces = false;
         this._fov = 45;
+        this._frustumCulling = true;
         this._nearClip = 0.1;
         this._orthographic = false;
         this._orthoHeight = 10;
+        this._priority = 0;
+        this._rect = new Vec4(0, 0, 1, 1);
+        this._scissorRect = new Vec4(0, 0, 1, 1);
     }
     getInitialComponentData() {
         return {
             clearColor: this._clearColor,
+            clearColorBuffer: this._clearColorBuffer,
+            clearDepthBuffer: this._clearDepthBuffer,
+            clearStencilBuffer: this._clearStencilBuffer,
+            cullFaces: this._cullFaces,
             farClip: this._farClip,
+            flipFaces: this._flipFaces,
             fov: this._fov,
+            frustumCulling: this._frustumCulling,
             nearClip: this._nearClip,
-            projection: this._orthographic ? PROJECTION_ORTHOGRAPHIC : PROJECTION_PERSPECTIVE,
-            orthoHeight: this._orthoHeight
+            orthographic: this._orthographic,
+            orthoHeight: this._orthoHeight,
+            priority: this._priority,
+            rect: this._rect,
+            scissorRect: this._scissorRect
         };
     }
     /**
@@ -617,6 +644,74 @@ class CameraComponentElement extends ComponentElement {
     get clearColor() {
         return this._clearColor;
     }
+    /**
+     * Sets the clear color buffer of the camera.
+     * @param value - The clear color buffer.
+     */
+    set clearColorBuffer(value) {
+        this._clearColorBuffer = value;
+        if (this.component) {
+            this.component.clearColorBuffer = value;
+        }
+    }
+    /**
+     * Gets the clear color buffer of the camera.
+     * @returns The clear color buffer.
+     */
+    get clearColorBuffer() {
+        return this._clearColorBuffer;
+    }
+    /**
+     * Sets the clear depth buffer of the camera.
+     * @param value - The clear depth buffer.
+     */
+    set clearDepthBuffer(value) {
+        this._clearDepthBuffer = value;
+        if (this.component) {
+            this.component.clearDepthBuffer = value;
+        }
+    }
+    /**
+     * Gets the clear depth buffer of the camera.
+     * @returns The clear depth buffer.
+     */
+    get clearDepthBuffer() {
+        return this._clearDepthBuffer;
+    }
+    /**
+     * Sets the clear stencil buffer of the camera.
+     * @param value - The clear stencil buffer.
+     */
+    set clearStencilBuffer(value) {
+        this._clearStencilBuffer = value;
+        if (this.component) {
+            this.component.clearStencilBuffer = value;
+        }
+    }
+    /**
+     * Gets the clear stencil buffer of the camera.
+     * @returns The clear stencil buffer.
+     */
+    get clearStencilBuffer() {
+        return this._clearStencilBuffer;
+    }
+    /**
+     * Sets the cull faces of the camera.
+     * @param value - The cull faces.
+     */
+    set cullFaces(value) {
+        this._cullFaces = value;
+        if (this.component) {
+            this.component.cullFaces = value;
+        }
+    }
+    /**
+     * Gets the cull faces of the camera.
+     * @returns The cull faces.
+     */
+    get cullFaces() {
+        return this._cullFaces;
+    }
     /**
      * Sets the far clip distance of the camera.
      * @param value - The far clip distance.
@@ -634,6 +729,23 @@ class CameraComponentElement extends ComponentElement {
     get farClip() {
         return this._farClip;
     }
+    /**
+     * Sets the flip faces of the camera.
+     * @param value - The flip faces.
+     */
+    set flipFaces(value) {
+        this._flipFaces = value;
+        if (this.component) {
+            this.component.flipFaces = value;
+        }
+    }
+    /**
+     * Gets the flip faces of the camera.
+     * @returns The flip faces.
+     */
+    get flipFaces() {
+        return this._flipFaces;
+    }
     /**
      * Sets the field of view of the camera.
      * @param value - The field of view.
@@ -651,6 +763,23 @@ class CameraComponentElement extends ComponentElement {
     get fov() {
         return this._fov;
     }
+    /**
+     * Sets the frustum culling of the camera.
+     * @param value - The frustum culling.
+     */
+    set frustumCulling(value) {
+        this._frustumCulling = value;
+        if (this.component) {
+            this.component.frustumCulling = value;
+        }
+    }
+    /**
+     * Gets the frustum culling of the camera.
+     * @returns The frustum culling.
+     */
+    get frustumCulling() {
+        return this._frustumCulling;
+    }
     /**
      * Sets the near clip distance of the camera.
      * @param value - The near clip distance.
@@ -702,8 +831,76 @@ class CameraComponentElement extends ComponentElement {
     get orthoHeight() {
         return this._orthoHeight;
     }
+    /**
+     * Sets the priority of the camera.
+     * @param value - The priority.
+     */
+    set priority(value) {
+        this._priority = value;
+        if (this.component) {
+            this.component.priority = value;
+        }
+    }
+    /**
+     * Gets the priority of the camera.
+     * @returns The priority.
+     */
+    get priority() {
+        return this._priority;
+    }
+    /**
+     * Sets the rect of the camera.
+     * @param value - The rect.
+     */
+    set rect(value) {
+        this._rect = value;
+        if (this.component) {
+            this.component.rect = value;
+        }
+    }
+    /**
+     * Gets the rect of the camera.
+     * @returns The rect.
+     */
+    get rect() {
+        return this._rect;
+    }
+    /**
+     * Sets the scissor rect of the camera.
+     * @param value - The scissor rect.
+     */
+    set scissorRect(value) {
+        this._scissorRect = value;
+        if (this.component) {
+            this.component.scissorRect = value;
+        }
+    }
+    /**
+     * Gets the scissor rect of the camera.
+     * @returns The scissor rect.
+     */
+    get scissorRect() {
+        return this._scissorRect;
+    }
     static get observedAttributes() {
-        return [...super.observedAttributes, 'clear-color', 'near-clip', 'far-clip', 'fov', 'orthographic', 'ortho-height'];
+        return [
+            ...super.observedAttributes,
+            'clear-color',
+            'clear-color-buffer',
+            'clear-depth-buffer',
+            'clear-stencil-buffer',
+            'cull-faces',
+            'far-clip',
+            'flip-faces',
+            'fov',
+            'frustum-culling',
+            'near-clip',
+            'orthographic',
+            'ortho-height',
+            'priority',
+            'rect',
+            'scissor-rect'
+        ];
     }
     attributeChangedCallback(name, _oldValue, newValue) {
         super.attributeChangedCallback(name, _oldValue, newValue);
@@ -711,12 +908,30 @@ class CameraComponentElement extends ComponentElement {
             case 'clear-color':
                 this.clearColor = parseColor(newValue);
                 break;
+            case 'clear-color-buffer':
+                this.clearColorBuffer = newValue !== 'false';
+                break;
+            case 'clear-depth-buffer':
+                this.clearDepthBuffer = newValue !== 'false';
+                break;
+            case 'clear-stencil-buffer':
+                this.clearStencilBuffer = newValue !== 'false';
+                break;
+            case 'cull-faces':
+                this.cullFaces = newValue !== 'false';
+                break;
             case 'far-clip':
                 this.farClip = parseFloat(newValue);
                 break;
+            case 'flip-faces':
+                this.flipFaces = newValue !== 'true';
+                break;
             case 'fov':
                 this.fov = parseFloat(newValue);
                 break;
+            case 'frustum-culling':
+                this.frustumCulling = newValue !== 'false';
+                break;
             case 'near-clip':
                 this.nearClip = parseFloat(newValue);
                 break;
@@ -726,6 +941,15 @@ class CameraComponentElement extends ComponentElement {
             case 'ortho-height':
                 this.orthoHeight = parseFloat(newValue);
                 break;
+            case 'priority':
+                this.priority = parseFloat(newValue);
+                break;
+            case 'rect':
+                this.rect = parseVec4(newValue);
+                break;
+            case 'scissor-rect':
+                this.scissorRect = parseVec4(newValue);
+                break;
         }
     }
 }
@@ -873,16 +1097,12 @@ class ElementComponentElement extends ComponentElement {
         await super.connectedCallback();
         this.component._text._material.useFog = true;
     }
-    getAsset() {
-        const assetElement = document.querySelector(`pc-asset[id="${this._asset}"]`);
-        return assetElement.asset;
-    }
     getInitialComponentData() {
         return {
             anchor: this._anchor,
             autoWidth: this._autoWidth,
             color: this._color,
-            fontAsset: this.getAsset().id,
+            fontAsset: AssetElement.get(this._asset).id,
             fontSize: this._fontSize,
             lineHeight: this._lineHeight,
             pivot: this._pivot,
@@ -910,7 +1130,7 @@ class ElementComponentElement extends ComponentElement {
     }
     set asset(value) {
         this._asset = value;
-        const asset = this.getAsset();
+        const asset = AssetElement.get(value);
         if (this.component && asset) {
             this.component.fontAsset = asset.id;
         }
@@ -1061,13 +1281,9 @@ class GSplatComponentElement extends ComponentElement {
         super('gsplat');
         this._asset = '';
     }
-    getAsset() {
-        const assetElement = document.querySelector(`pc-asset[id="${this._asset}"]`);
-        return assetElement.asset;
-    }
     getInitialComponentData() {
         return {
-            asset: this.getAsset()
+            asset: AssetElement.get(this._asset)
         };
     }
     /**
@@ -1079,7 +1295,7 @@ class GSplatComponentElement extends ComponentElement {
     }
     set asset(value) {
         this._asset = value;
-        const asset = this.getAsset();
+        const asset = AssetElement.get(value);
         if (this.component && asset) {
             this.component.asset = asset;
         }
@@ -1371,6 +1587,120 @@ class LightComponentElement extends ComponentElement {
 }
 customElements.define('pc-light', LightComponentElement);
 
+/**
+ * Represents a material in the PlayCanvas engine.
+ */
+class MaterialElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this._diffuse = new Color(1, 1, 1);
+        this._diffuseMap = '';
+        this._metalnessMap = '';
+        this._normalMap = '';
+        this._roughnessMap = '';
+        this.material = null;
+    }
+    createMaterial() {
+        this.material = new StandardMaterial();
+        this.material.glossInvert = true;
+        this.material.useMetalness = true;
+        this.material.diffuse = this._diffuse;
+        this.diffuseMap = this._diffuseMap;
+        this.metalnessMap = this._metalnessMap;
+        this.normalMap = this._normalMap;
+        this.roughnessMap = this._roughnessMap;
+        this.material.update();
+    }
+    disconnectedCallback() {
+        if (this.material) {
+            this.material.destroy();
+            this.material = null;
+        }
+    }
+    setMap(map, property) {
+        if (this.material) {
+            const asset = AssetElement.get(map);
+            if (asset) {
+                if (asset.loaded) {
+                    this.material[property] = asset.resource;
+                    this.material[property].anisotropy = 4;
+                }
+                else {
+                    asset.once('load', () => {
+                        this.material[property] = asset.resource;
+                        this.material[property].anisotropy = 4;
+                        this.material.update();
+                    });
+                }
+            }
+        }
+    }
+    set diffuse(value) {
+        this._diffuse = value;
+        if (this.material) {
+            this.material.diffuse = value;
+        }
+    }
+    get diffuse() {
+        return this._diffuse;
+    }
+    set diffuseMap(value) {
+        this._diffuseMap = value;
+        this.setMap(value, 'diffuseMap');
+    }
+    get diffuseMap() {
+        return this._diffuseMap;
+    }
+    set metalnessMap(value) {
+        this._metalnessMap = value;
+        this.setMap(value, 'metalnessMap');
+    }
+    get metalnessMap() {
+        return this._metalnessMap;
+    }
+    set normalMap(value) {
+        this._normalMap = value;
+        this.setMap(value, 'normalMap');
+    }
+    get normalMap() {
+        return this._normalMap;
+    }
+    set roughnessMap(value) {
+        this._roughnessMap = value;
+        this.setMap(value, 'glossMap');
+    }
+    get roughnessMap() {
+        return this._roughnessMap;
+    }
+    static get(id) {
+        const materialElement = document.querySelector(`pc-material[id="${id}"]`);
+        return materialElement === null || materialElement === void 0 ? void 0 : materialElement.material;
+    }
+    static get observedAttributes() {
+        return ['diffuse', 'diffuse-map', 'metalness-map', 'normal-map', 'roughness-map'];
+    }
+    attributeChangedCallback(name, _oldValue, newValue) {
+        switch (name) {
+            case 'diffuse':
+                this.diffuse = parseColor(newValue);
+                break;
+            case 'diffuse-map':
+                this.diffuseMap = newValue;
+                break;
+            case 'metalness-map':
+                this.metalnessMap = newValue;
+                break;
+            case 'normal-map':
+                this.normalMap = newValue;
+                break;
+            case 'roughness-map':
+                this.roughnessMap = newValue;
+                break;
+        }
+    }
+}
+customElements.define('pc-material', MaterialElement);
+
 /**
  * Represents a render component in the PlayCanvas engine.
  *
@@ -1379,9 +1709,14 @@ customElements.define('pc-light', LightComponentElement);
 class RenderComponentElement extends ComponentElement {
     constructor() {
         super('render');
-        this._type = 'asset';
         this._castShadows = true;
+        this._material = '';
         this._receiveShadows = true;
+        this._type = 'asset';
+    }
+    async connectedCallback() {
+        await super.connectedCallback();
+        this.material = this._material;
     }
     getInitialComponentData() {
         return {
@@ -1431,6 +1766,23 @@ class RenderComponentElement extends ComponentElement {
     get castShadows() {
         return this._castShadows;
     }
+    /**
+     * Sets the material of the render component.
+     * @param value - The id of the material asset to use.
+     */
+    set material(value) {
+        this._material = value;
+        if (this.component) {
+            this.component.material = MaterialElement.get(value);
+        }
+    }
+    /**
+     * Gets the id of the material asset used by the render component.
+     * @returns The id of the material asset.
+     */
+    get material() {
+        return this._material;
+    }
     /**
      * Sets the receive shadows flag of the render component.
      * @param value - The receive shadows flag.
@@ -1449,20 +1801,23 @@ class RenderComponentElement extends ComponentElement {
         return this._receiveShadows;
     }
     static get observedAttributes() {
-        return [...super.observedAttributes, 'cast-shadows', 'receive-shadows', 'type'];
+        return [...super.observedAttributes, 'cast-shadows', 'material', 'receive-shadows', 'type'];
     }
     attributeChangedCallback(name, _oldValue, newValue) {
         super.attributeChangedCallback(name, _oldValue, newValue);
         switch (name) {
-            case 'type':
-                this.type = newValue;
-                break;
             case 'cast-shadows':
                 this.castShadows = newValue !== 'false';
                 break;
+            case 'material':
+                this.material = newValue;
+                break;
             case 'receive-shadows':
                 this.receiveShadows = newValue !== 'false';
                 break;
+            case 'type':
+                this.type = newValue;
+                break;
         }
     }
 }
@@ -1656,91 +2011,275 @@ class RigidBodyComponentElement extends ComponentElement {
 customElements.define('pc-rigidbody', RigidBodyComponentElement);
 
 /**
- * Represents a script component in the PlayCanvas engine.
+ * Represents a screen component in the PlayCanvas engine.
  *
  * @category Components
  */
-class ScriptComponentElement extends ComponentElement {
+class ScreenComponentElement extends ComponentElement {
     constructor() {
-        super('script');
+        super('screen');
+        this._screenSpace = false;
+        this._resolution = new Vec2(640, 320);
+        this._referenceResolution = new Vec2(640, 320);
+        this._priority = 0;
+        this._blend = false;
+        this._scaleBlend = 0.5;
+    }
+    getInitialComponentData() {
+        return {
+            priority: this._priority,
+            referenceResolution: this._referenceResolution,
+            resolution: this._resolution,
+            scaleBlend: this._scaleBlend,
+            scaleMode: this._blend ? SCALEMODE_BLEND : SCALEMODE_NONE,
+            screenSpace: this._screenSpace
+        };
     }
     /**
-     * Gets the script component.
-     * @returns The script component.
+     * Gets the screen component.
+     * @returns The screen component.
      */
     get component() {
         return super.component;
     }
+    set priority(value) {
+        this._priority = value;
+        if (this.component) {
+            this.component.priority = this._priority;
+        }
+    }
+    get priority() {
+        return this._priority;
+    }
+    set referenceResolution(value) {
+        this._referenceResolution = value;
+        if (this.component) {
+            this.component.referenceResolution = this._referenceResolution;
+        }
+    }
+    get referenceResolution() {
+        return this._referenceResolution;
+    }
+    set resolution(value) {
+        this._resolution = value;
+        if (this.component) {
+            this.component.resolution = this._resolution;
+        }
+    }
+    get resolution() {
+        return this._resolution;
+    }
+    set scaleBlend(value) {
+        this._scaleBlend = value;
+        if (this.component) {
+            this.component.scaleBlend = this._scaleBlend;
+        }
+    }
+    get scaleBlend() {
+        return this._scaleBlend;
+    }
+    set blend(value) {
+        this._blend = value;
+        if (this.component) {
+            this.component.scaleMode = this._blend ? SCALEMODE_BLEND : SCALEMODE_NONE;
+        }
+    }
+    get blend() {
+        return this._blend;
+    }
+    set screenSpace(value) {
+        this._screenSpace = value;
+        if (this.component) {
+            this.component.screenSpace = this._screenSpace;
+        }
+    }
+    get screenSpace() {
+        return this._screenSpace;
+    }
+    static get observedAttributes() {
+        return [
+            ...super.observedAttributes,
+            'blend',
+            'screen-space',
+            'resolution',
+            'reference-resolution',
+            'priority',
+            'scale-blend'
+        ];
+    }
+    attributeChangedCallback(name, _oldValue, newValue) {
+        super.attributeChangedCallback(name, _oldValue, newValue);
+        switch (name) {
+            case 'priority':
+                this.priority = parseInt(newValue);
+                break;
+            case 'reference-resolution':
+                this.referenceResolution = parseVec2(newValue);
+                break;
+            case 'resolution':
+                this.resolution = parseVec2(newValue);
+                break;
+            case 'scale-blend':
+                this.scaleBlend = parseFloat(newValue);
+                break;
+            case 'blend':
+                this.blend = this.hasAttribute('blend');
+                break;
+            case 'screen-space':
+                this.screenSpace = this.hasAttribute('screen-space');
+                break;
+        }
+    }
 }
-customElements.define('pc-scripts', ScriptComponentElement);
+customElements.define('pc-screen', ScreenComponentElement);
 
 /**
- * Represents a script in the PlayCanvas engine.
+ * Represents a script component in the PlayCanvas engine.
+ *
+ * @category Components
  */
-class ScriptElement extends HTMLElement {
+class ScriptComponentElement extends ComponentElement {
     constructor() {
-        super(...arguments);
-        this._attributes = {};
-        this._enabled = true;
-        this._name = '';
-        this._script = null;
+        super('script');
+        // Create mutation observer to watch for child script elements
+        this.observer = new MutationObserver(this.handleMutations.bind(this));
+        this.observer.observe(this, {
+            childList: true
+        });
+        // Listen for script attribute and enable changes
+        this.addEventListener('scriptattributeschange', this.handleScriptAttributesChange.bind(this));
+        this.addEventListener('scriptenablechange', this.handleScriptEnableChange.bind(this));
     }
     async connectedCallback() {
-        var _a, _b, _c;
-        const appElement = this.closest('pc-app');
-        if (!appElement) {
-            console.error(`${this.tagName.toLowerCase()} should be a descendant of pc-app`);
+        await super.connectedCallback();
+        // Handle initial script elements
+        this.querySelectorAll(':scope > pc-script').forEach((scriptElement) => {
+            const scriptName = scriptElement.getAttribute('name');
+            const attributes = scriptElement.getAttribute('attributes');
+            if (scriptName) {
+                this.createScript(scriptName, attributes);
+            }
+        });
+    }
+    applyAttributes(script, attributes) {
+        try {
+            // Parse the attributes string into an object and set them on the script
+            const attributesObject = attributes ? JSON.parse(attributes) : {};
+            Object.assign(script, attributesObject);
+        }
+        catch (error) {
+            console.error(`Error parsing attributes JSON string ${attributes}:`, error);
+        }
+    }
+    handleScriptAttributesChange(event) {
+        const scriptElement = event.target;
+        const scriptName = scriptElement.getAttribute('name');
+        if (!scriptName || !this.component)
             return;
+        const script = this.component.get(scriptName);
+        if (script) {
+            this.applyAttributes(script, event.detail.attributes);
         }
-        await appElement.getApplication();
-        const scriptAttributes = this.getAttribute('attributes');
-        if (scriptAttributes) {
-            try {
-                this._attributes = JSON.parse(scriptAttributes);
-            }
-            catch (e) {
-                console.error('Failed to parse script attributes:', e);
-            }
+    }
+    handleScriptEnableChange(event) {
+        const scriptElement = event.target;
+        const scriptName = scriptElement.getAttribute('name');
+        if (!scriptName || !this.component)
+            return;
+        const script = this.component.get(scriptName);
+        if (script) {
+            script.enabled = event.detail.enabled;
         }
-        // When the script is created, initialize it with the necessary attributes
-        (_a = this.scriptsElement) === null || _a === void 0 ? void 0 : _a.component.on(`create:${this._name}`, (scriptInstance) => {
-            Object.assign(scriptInstance, this._attributes);
-        });
-        this._script = (_c = (_b = this.scriptsElement) === null || _b === void 0 ? void 0 : _b.component.create(this._name, { preloading: false })) !== null && _c !== void 0 ? _c : null;
     }
-    disconnectedCallback() {
-        var _a;
-        (_a = this.scriptsElement) === null || _a === void 0 ? void 0 : _a.component.destroy(this._name);
+    createScript(name, attributes) {
+        if (!this.component)
+            return null;
+        this.component.on(`create:${name}`, (script) => {
+            this.applyAttributes(script, attributes);
+        });
+        return this.component.create(name);
     }
-    refreshAttributes() {
-        if (this._script) {
-            Object.entries(this._attributes).forEach(([name, value]) => {
-                if (this._script && name in this._script) {
-                    this._script[name] = value;
+    destroyScript(name) {
+        if (!this.component)
+            return;
+        this.component.destroy(name);
+    }
+    handleMutations(mutations) {
+        for (const mutation of mutations) {
+            // Handle added nodes
+            mutation.addedNodes.forEach((node) => {
+                if (node instanceof HTMLElement && node.tagName.toLowerCase() === 'pc-script') {
+                    const scriptName = node.getAttribute('name');
+                    const attributes = node.getAttribute('attributes');
+                    if (scriptName) {
+                        this.createScript(scriptName, attributes);
+                    }
+                }
+            });
+            // Handle removed nodes
+            mutation.removedNodes.forEach((node) => {
+                if (node instanceof HTMLElement && node.tagName.toLowerCase() === 'pc-script') {
+                    const scriptName = node.getAttribute('name');
+                    if (scriptName) {
+                        this.destroyScript(scriptName);
+                    }
                 }
             });
         }
     }
-    get scriptsElement() {
-        const scriptsElement = this.parentElement;
-        if (!(scriptsElement instanceof ScriptComponentElement)) {
-            console.warn('pc-script must be a direct child of a pc-scripts element');
-            return null;
-        }
-        return scriptsElement;
+    disconnectedCallback() {
+        var _a;
+        this.observer.disconnect();
+        (_a = super.disconnectedCallback) === null || _a === void 0 ? void 0 : _a.call(this);
     }
+    /**
+     * Gets the script component.
+     * @returns The script component.
+     */
+    get component() {
+        return super.component;
+    }
+}
+customElements.define('pc-scripts', ScriptComponentElement);
+
+/**
+ * Represents a script in the PlayCanvas engine.
+ */
+class ScriptElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this._attributes = '{}';
+        this._enabled = true;
+        this._name = '';
+    }
+    /**
+     * Sets the attributes of the script.
+     * @param value - The attributes of the script.
+     */
     set scriptAttributes(value) {
-        this._attributes = JSON.parse(value);
-        this.refreshAttributes();
+        this._attributes = value;
+        this.dispatchEvent(new CustomEvent('scriptattributeschange', {
+            detail: { attributes: value },
+            bubbles: true
+        }));
     }
+    /**
+     * Gets the attributes of the script.
+     * @returns The attributes of the script.
+     */
     get scriptAttributes() {
-        return JSON.stringify(this._attributes);
+        return this._attributes;
     }
+    /**
+     * Sets the enabled state of the script.
+     * @param value - The enabled state of the script.
+     */
     set enabled(value) {
         this._enabled = value;
-        if (this._script) {
-            this._script.enabled = value;
-        }
+        this.dispatchEvent(new CustomEvent('scriptenablechange', {
+            detail: { enabled: value },
+            bubbles: true
+        }));
     }
     /**
      * Gets the enabled state of the script.
@@ -1877,7 +2416,7 @@ class SoundComponentElement extends ComponentElement {
         }
     }
 }
-customElements.define('pc-sound', SoundComponentElement);
+customElements.define('pc-sounds', SoundComponentElement);
 
 /**
  * Represents a sound slot in the PlayCanvas engine.
@@ -1899,10 +2438,6 @@ class SoundSlotElement extends HTMLElement {
          */
         this.soundSlot = null;
     }
-    getAsset() {
-        const assetElement = document.querySelector(`pc-asset[id="${this._asset}"]`);
-        return assetElement.asset;
-    }
     async connectedCallback() {
         const appElement = this.closest('pc-app');
         if (!appElement) {
@@ -1944,7 +2479,7 @@ class SoundSlotElement extends HTMLElement {
         var _a;
         this._asset = value;
         if (this.soundSlot) {
-            const id = (_a = this.getAsset()) === null || _a === void 0 ? void 0 : _a.id;
+            const id = (_a = AssetElement.get(value)) === null || _a === void 0 ? void 0 : _a.id;
             if (id) {
                 this.soundSlot.asset = id;
             }
@@ -2125,7 +2660,7 @@ class SoundSlotElement extends HTMLElement {
         }
     }
 }
-customElements.define('pc-sound-slot', SoundSlotElement);
+customElements.define('pc-sound', SoundSlotElement);
 
 /**
  * Represents a model in the PlayCanvas engine.
@@ -2148,12 +2683,8 @@ class ModelElement extends HTMLElement {
             this.asset = asset;
         }
     }
-    getAsset() {
-        const assetElement = document.querySelector(`pc-asset[id="${this._asset}"]`);
-        return assetElement.asset;
-    }
     _loadModel() {
-        const asset = this.getAsset();
+        const asset = AssetElement.get(this._asset);
         if (!asset) {
             return;
         }
@@ -2381,10 +2912,6 @@ class SkyElement extends HTMLElement {
         this.asset = this.getAttribute('asset') || '';
         this.solidColor = this.hasAttribute('solid-color');
     }
-    getAsset() {
-        const assetElement = document.querySelector(`pc-asset[id="${this._asset}"]`);
-        return assetElement.asset;
-    }
     getScene() {
         const appElement = this.closest('pc-app');
         if (!appElement) {
@@ -2400,7 +2927,7 @@ class SkyElement extends HTMLElement {
         this._asset = value;
         const scene = this.getScene();
         if (scene) {
-            const asset = this.getAsset();
+            const asset = AssetElement.get(value);
             if (asset) {
                 if (asset.resource) {
                     scene.envAtlas = asset.resource;
@@ -2484,5 +3011,5 @@ class SkyElement extends HTMLElement {
 }
 customElements.define('pc-sky', SkyElement);
 
-export { AppElement, AssetElement, CameraComponentElement, CollisionComponentElement, ComponentElement, ElementComponentElement, EntityElement, GSplatComponentElement, LightComponentElement, ListenerComponentElement, ModelElement, ModuleElement, RenderComponentElement, RigidBodyComponentElement, SceneElement, ScriptComponentElement, ScriptElement, SkyElement, SoundComponentElement, SoundSlotElement };
+export { AppElement, AssetElement, CameraComponentElement, CollisionComponentElement, ComponentElement, ElementComponentElement, EntityElement, GSplatComponentElement, LightComponentElement, ListenerComponentElement, MaterialElement, ModelElement, ModuleElement, RenderComponentElement, RigidBodyComponentElement, SceneElement, ScreenComponentElement, ScriptComponentElement, ScriptElement, SkyElement, SoundComponentElement, SoundSlotElement };
 //# sourceMappingURL=pwc.mjs.map