@playcanvas/web-components 0.1.0

package/dist/pwc.js

@@ -0,0 +1,2513 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('playcanvas')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'playcanvas'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.pd = {}, global.pc));
+})(this, (function (exports, playcanvas) { 'use strict';
+
+    class ModuleElement extends HTMLElement {
+        constructor() {
+            super();
+            this.loadPromise = this.loadModule();
+        }
+        async loadModule() {
+            const name = this.getAttribute('name');
+            const glue = this.getAttribute('glue');
+            const wasm = this.getAttribute('wasm');
+            const fallback = this.getAttribute('fallback');
+            playcanvas.WasmModule.setConfig(name, {
+                glueUrl: glue,
+                wasmUrl: wasm,
+                fallbackUrl: fallback
+            });
+            await new Promise((resolve) => {
+                playcanvas.WasmModule.getInstance(name, () => resolve());
+            });
+        }
+        getLoadPromise() {
+            return this.loadPromise;
+        }
+    }
+    customElements.define('pc-module', ModuleElement);
+
+    /**
+     * The main application element.
+     */
+    class AppElement extends HTMLElement {
+        /**
+         * Creates a new AppElement.
+         */
+        constructor() {
+            super();
+            /**
+             * The canvas element.
+             */
+            this._canvas = null;
+            this._highResolution = false;
+            /**
+             * The PlayCanvas application instance.
+             */
+            this.app = null;
+            // Bind methods to maintain 'this' context
+            this._onWindowResize = this._onWindowResize.bind(this);
+            this.appReadyPromise = new Promise((resolve) => {
+                this.appReadyResolve = resolve;
+            });
+        }
+        async connectedCallback() {
+            // Get all pc-module elements that are direct children of the pc-app element
+            const moduleElements = this.querySelectorAll(':scope > pc-module');
+            // Wait for all modules to load
+            await Promise.all(Array.from(moduleElements).map(module => module.getLoadPromise()));
+            // Create and append the canvas to the element
+            this._canvas = document.createElement('canvas');
+            this.appendChild(this._canvas);
+            // Initialize the PlayCanvas application
+            this.app = new playcanvas.Application(this._canvas, {
+                graphicsDeviceOptions: {
+                    devicePixelRatio: this._highResolution ? window.devicePixelRatio : 1
+                },
+                keyboard: new playcanvas.Keyboard(window),
+                mouse: new playcanvas.Mouse(this._canvas)
+            });
+            this.app.setCanvasFillMode(playcanvas.FILLMODE_FILL_WINDOW);
+            this.app.setCanvasResolution(playcanvas.RESOLUTION_AUTO);
+            // 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) => {
+                assetElement.createAsset();
+                const asset = assetElement.asset;
+                if (asset) {
+                    this.app.assets.add(asset);
+                }
+            });
+            // Load assets before starting the application
+            this.app.preload(() => {
+                // Start the application
+                this.app.start();
+                // Handle window resize to keep the canvas responsive
+                window.addEventListener('resize', this._onWindowResize);
+                this.appReadyResolve(this.app);
+            });
+        }
+        disconnectedCallback() {
+            // Clean up the application
+            if (this.app) {
+                this.app.destroy();
+                this.app = null;
+            }
+            // Remove event listeners
+            window.removeEventListener('resize', this._onWindowResize);
+            // Remove the canvas
+            if (this._canvas && this.contains(this._canvas)) {
+                this.removeChild(this._canvas);
+                this._canvas = null;
+            }
+        }
+        async getApplication() {
+            await this.appReadyPromise;
+            return this.app;
+        }
+        _onWindowResize() {
+            if (this.app) {
+                this.app.resizeCanvas();
+            }
+        }
+        set highResolution(value) {
+            this._highResolution = value;
+            if (this.app) {
+                this.app.graphicsDevice.maxPixelRatio = value ? window.devicePixelRatio : 1;
+            }
+        }
+        get highResolution() {
+            return this._highResolution;
+        }
+        static get observedAttributes() {
+            return ['high-resolution'];
+        }
+        attributeChangedCallback(name, _oldValue, _newValue) {
+            switch (name) {
+                case 'high-resolution':
+                    this.highResolution = this.hasAttribute(name);
+                    break;
+            }
+        }
+    }
+    customElements.define('pc-app', AppElement);
+
+    /**
+     * Parse a color string into a Color object. String can be in the format of '#rgb', '#rgba',
+     * '#rrggbb', '#rrggbbaa', or a string of 3 or 4 comma-delimited numbers.
+     *
+     * @param value - The color string to parse.
+     * @returns The parsed Color object.
+     */
+    const parseColor = (value) => {
+        if (value.startsWith('#')) {
+            return new playcanvas.Color().fromString(value);
+        }
+        const components = value.split(',').map(Number);
+        return new playcanvas.Color(components);
+    };
+    /**
+     * Parse a Vec2 string into a Vec2 object. String can be in the format of 'x,y'.
+     *
+     * @param value - The Vec2 string to parse.
+     * @returns The parsed Vec2 object.
+     */
+    const parseVec2 = (value) => {
+        const components = value.split(',').map(Number);
+        return new playcanvas.Vec2(components);
+    };
+    /**
+     * Parse a Vec3 string into a Vec3 object. String can be in the format of 'x,y,z'.
+     *
+     * @param value - The Vec3 string to parse.
+     * @returns The parsed Vec3 object.
+     */
+    const parseVec3 = (value) => {
+        const components = value.split(',').map(Number);
+        return new playcanvas.Vec3(components);
+    };
+    /**
+     * Parse a Vec4 string into a Vec4 object. String can be in the format of 'x,y,z,w'.
+     *
+     * @param value - The Vec4 string to parse.
+     * @returns The parsed Vec4 object.
+     */
+    const parseVec4 = (value) => {
+        const components = value.split(',').map(Number);
+        return new playcanvas.Vec4(components);
+    };
+
+    /**
+     * Represents an entity in the PlayCanvas engine.
+     */
+    class EntityElement extends HTMLElement {
+        constructor() {
+            super(...arguments);
+            /**
+             * Whether the entity is enabled.
+             */
+            this._enabled = true;
+            /**
+             * The name of the entity.
+             */
+            this._name = 'Untitled';
+            /**
+             * The position of the entity.
+             */
+            this._position = new playcanvas.Vec3();
+            /**
+             * The rotation of the entity.
+             */
+            this._rotation = new playcanvas.Vec3();
+            /**
+             * The scale of the entity.
+             */
+            this._scale = new playcanvas.Vec3(1, 1, 1);
+            /**
+             * The tags of the entity.
+             */
+            this._tags = [];
+            /**
+             * The PlayCanvas entity instance.
+             */
+            this.entity = null;
+        }
+        async connectedCallback() {
+            // Get the application
+            const appElement = this.closest('pc-app');
+            if (!appElement) {
+                console.warn(`${this.tagName} must be a child of pc-app`);
+                return;
+            }
+            const app = await appElement.getApplication();
+            // Create a new entity
+            this.entity = new playcanvas.Entity(this._name, app);
+            if (this.parentElement && this.parentElement.tagName === 'pc-entity' && this.parentElement.entity) {
+                this.parentElement.entity.addChild(this.entity);
+            }
+            else {
+                app.root.addChild(this.entity);
+            }
+            // Initialize from attributes
+            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 (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());
+        }
+        disconnectedCallback() {
+            if (this.entity) {
+                this.entity.destroy();
+                this.entity = null;
+            }
+        }
+        /**
+         * Sets the enabled state of the entity.
+         * @param value - Whether the entity is enabled.
+         */
+        set enabled(value) {
+            this._enabled = value;
+            if (this.entity) {
+                this.entity.enabled = value;
+            }
+        }
+        /**
+         * Gets the enabled state of the entity.
+         * @returns Whether the entity is enabled.
+         */
+        get enabled() {
+            return this._enabled;
+        }
+        /**
+         * Sets the name of the entity.
+         * @param value - The name of the entity.
+         */
+        set name(value) {
+            this._name = value;
+            if (this.entity) {
+                this.entity.name = value;
+            }
+        }
+        /**
+         * Gets the name of the entity.
+         * @returns The name of the entity.
+         */
+        get name() {
+            return this._name;
+        }
+        /**
+         * Sets the position of the entity.
+         * @param value - The position of the entity.
+         */
+        set position(value) {
+            this._position = value;
+            if (this.entity) {
+                this.entity.setLocalPosition(this._position);
+            }
+        }
+        /**
+         * Gets the position of the entity.
+         * @returns The position of the entity.
+         */
+        get position() {
+            return this._position;
+        }
+        /**
+         * Sets the rotation of the entity.
+         * @param value - The rotation of the entity.
+         */
+        set rotation(value) {
+            this._rotation = value;
+            if (this.entity) {
+                this.entity.setLocalEulerAngles(this._rotation);
+            }
+        }
+        /**
+         * Gets the rotation of the entity.
+         * @returns The rotation of the entity.
+         */
+        get rotation() {
+            return this._rotation;
+        }
+        /**
+         * Sets the scale of the entity.
+         * @param value - The scale of the entity.
+         */
+        set scale(value) {
+            this._scale = value;
+            if (this.entity) {
+                this.entity.setLocalScale(this._scale);
+            }
+        }
+        /**
+         * Gets the scale of the entity.
+         * @returns The scale of the entity.
+         */
+        get scale() {
+            return this._scale;
+        }
+        /**
+         * Sets the tags of the entity.
+         * @param value - The tags of the entity.
+         */
+        set tags(value) {
+            this._tags = value;
+            if (this.entity) {
+                this.entity.tags.clear();
+                this.entity.tags.add(this._tags);
+            }
+        }
+        /**
+         * Gets the tags of the entity.
+         * @returns The tags of the entity.
+         */
+        get tags() {
+            return this._tags;
+        }
+        static get observedAttributes() {
+            return ['enabled', 'name', 'position', 'rotation', 'scale', 'tags'];
+        }
+        attributeChangedCallback(name, _oldValue, newValue) {
+            switch (name) {
+                case 'enabled':
+                    this.enabled = newValue !== 'false';
+                    break;
+                case 'name':
+                    this.name = newValue;
+                    break;
+                case 'position':
+                    this.position = parseVec3(newValue);
+                    break;
+                case 'rotation':
+                    this.rotation = parseVec3(newValue);
+                    break;
+                case 'scale':
+                    this.scale = parseVec3(newValue);
+                    break;
+                case 'tags':
+                    this.tags = newValue.split(',').map(tag => tag.trim());
+                    break;
+            }
+        }
+    }
+    customElements.define('pc-entity', EntityElement);
+
+    const extToType = new Map([
+        ['bin', 'binary'],
+        ['css', 'css'],
+        ['frag', 'shader'],
+        ['glb', 'container'],
+        ['glsl', 'shader'],
+        ['html', 'html'],
+        ['jpg', 'texture'],
+        ['js', 'script'],
+        ['json', 'json'],
+        ['mp3', 'audio'],
+        ['mjs', 'script'],
+        ['ply', 'gsplat'],
+        ['png', 'texture'],
+        ['txt', 'text'],
+        ['vert', 'shader'],
+        ['webp', 'texture']
+    ]);
+    /**
+     * Loads an asset into the PlayCanvas engine.
+     */
+    class AssetElement extends HTMLElement {
+        constructor() {
+            super(...arguments);
+            this._preload = false;
+            /**
+             * The asset that is loaded.
+             */
+            this.asset = null;
+        }
+        async connectedCallback() {
+        }
+        disconnectedCallback() {
+            this.destroyAsset();
+        }
+        createAsset() {
+            var _a;
+            const id = this.getAttribute('id') || '';
+            const src = this.getAttribute('src') || '';
+            let type = this.getAttribute('type');
+            // If no type is specified, try to infer it from the file extension.
+            if (!type) {
+                const ext = src.split('.').pop();
+                type = (_a = extToType.get(ext || '')) !== null && _a !== void 0 ? _a : null;
+            }
+            if (!type) {
+                console.warn(`Unsupported asset type: ${src}`);
+                return;
+            }
+            this.asset = new playcanvas.Asset(id, type, { url: src });
+            this.asset.preload = this.preload;
+        }
+        destroyAsset() {
+            if (this.asset) {
+                this.asset.unload();
+                this.asset = null;
+            }
+        }
+        /**
+         * Sets the preload flag of the asset.
+         * @param value - The preload flag.
+         */
+        set preload(value) {
+            this._preload = value;
+            if (this.asset) {
+                this.asset.preload = value;
+            }
+        }
+        /**
+         * Gets the preload flag of the asset.
+         * @returns The preload flag.
+         */
+        get preload() {
+            return this._preload;
+        }
+        static get observedAttributes() {
+            return ['preload'];
+        }
+        attributeChangedCallback(name, _oldValue, _newValue) {
+            if (name === 'preload') {
+                this.preload = this.hasAttribute('preload');
+            }
+        }
+    }
+    customElements.define('pc-asset', AssetElement);
+
+    /**
+     * Represents a component in the PlayCanvas engine.
+     *
+     * @category Components
+     */
+    class ComponentElement extends HTMLElement {
+        /**
+         * Constructor for the ComponentElement.
+         * @param componentName - The name of the component.
+         */
+        constructor(componentName) {
+            super();
+            this._enabled = true;
+            this._component = null;
+            this._componentName = componentName;
+        }
+        // Method to be overridden by subclasses to provide initial component data
+        getInitialComponentData() {
+            return {};
+        }
+        async connectedCallback() {
+            const appElement = this.closest('pc-app');
+            if (!appElement) {
+                console.error(`${this.tagName.toLowerCase()} should be a descendant of pc-app`);
+                return;
+            }
+            await appElement.getApplication();
+            this.addComponent();
+        }
+        addComponent() {
+            // Access the parent pc-entity's 'entity' property
+            const entityElement = this.closest('pc-entity');
+            if (!entityElement) {
+                console.error(`${this.tagName.toLowerCase()} should be a child of pc-entity`);
+                return;
+            }
+            if (entityElement && entityElement.entity) {
+                // Add the component to the entity
+                this._component = entityElement.entity.addComponent(this._componentName, this.getInitialComponentData());
+            }
+        }
+        disconnectedCallback() {
+            // Remove the component when the element is disconnected
+            if (this.component && this.component.entity) {
+                this._component.entity.removeComponent(this._componentName);
+                this._component = null;
+            }
+        }
+        get component() {
+            return this._component;
+        }
+        /**
+         * Sets the enabled state of the component.
+         * @param value - The enabled state of the component.
+         */
+        set enabled(value) {
+            this._enabled = value;
+            if (this.component) {
+                this.component.enabled = value;
+            }
+        }
+        /**
+         * Gets the enabled state of the component.
+         * @returns The enabled state of the component.
+         */
+        get enabled() {
+            return this._enabled;
+        }
+        static get observedAttributes() {
+            return ['enabled'];
+        }
+        attributeChangedCallback(name, _oldValue, newValue) {
+            switch (name) {
+                case 'enabled':
+                    this.enabled = newValue !== 'false';
+                    break;
+            }
+        }
+    }
+
+    /**
+     * Represents a audio listener component in the PlayCanvas engine.
+     *
+     * @category Components
+     */
+    class ListenerComponentElement extends ComponentElement {
+        constructor() {
+            super('audiolistener');
+        }
+        /**
+         * Gets the audio listener component.
+         * @returns The audio listener component.
+         */
+        get component() {
+            return super.component;
+        }
+    }
+    customElements.define('pc-listener', ListenerComponentElement);
+
+    /**
+     * Represents a camera component in the PlayCanvas engine.
+     *
+     * @category Components
+     */
+    class CameraComponentElement extends ComponentElement {
+        /**
+         * Creates a new CameraComponentElement.
+         */
+        constructor() {
+            super('camera');
+            this._clearColor = new playcanvas.Color(1, 1, 1, 1);
+            this._farClip = 1000;
+            this._fov = 45;
+            this._nearClip = 0.1;
+            this._orthographic = false;
+            this._orthoHeight = 10;
+        }
+        getInitialComponentData() {
+            return {
+                clearColor: this._clearColor,
+                farClip: this._farClip,
+                fov: this._fov,
+                nearClip: this._nearClip,
+                projection: this._orthographic ? playcanvas.PROJECTION_ORTHOGRAPHIC : playcanvas.PROJECTION_PERSPECTIVE,
+                orthoHeight: this._orthoHeight
+            };
+        }
+        /**
+         * Gets the camera component.
+         * @returns The camera component.
+         */
+        get component() {
+            return super.component;
+        }
+        /**
+         * Sets the clear color of the camera.
+         * @param value - The clear color.
+         */
+        set clearColor(value) {
+            this._clearColor = value;
+            if (this.component) {
+                this.component.clearColor = value;
+            }
+        }
+        /**
+         * Gets the clear color of the camera.
+         * @returns The clear color.
+         */
+        get clearColor() {
+            return this._clearColor;
+        }
+        /**
+         * Sets the far clip distance of the camera.
+         * @param value - The far clip distance.
+         */
+        set farClip(value) {
+            this._farClip = value;
+            if (this.component) {
+                this.component.farClip = value;
+            }
+        }
+        /**
+         * Gets the far clip distance of the camera.
+         * @returns The far clip distance.
+         */
+        get farClip() {
+            return this._farClip;
+        }
+        /**
+         * Sets the field of view of the camera.
+         * @param value - The field of view.
+         */
+        set fov(value) {
+            this._fov = value;
+            if (this.component) {
+                this.component.fov = value;
+            }
+        }
+        /**
+         * Gets the field of view of the camera.
+         * @returns The field of view.
+         */
+        get fov() {
+            return this._fov;
+        }
+        /**
+         * Sets the near clip distance of the camera.
+         * @param value - The near clip distance.
+         */
+        set nearClip(value) {
+            this._nearClip = value;
+            if (this.component) {
+                this.component.nearClip = value;
+            }
+        }
+        /**
+         * Gets the near clip distance of the camera.
+         * @returns The near clip distance.
+         */
+        get nearClip() {
+            return this._nearClip;
+        }
+        /**
+         * Sets the orthographic projection of the camera.
+         * @param value - The orthographic projection.
+         */
+        set orthographic(value) {
+            this._orthographic = value;
+            if (this.component) {
+                this.component.projection = value ? playcanvas.PROJECTION_ORTHOGRAPHIC : playcanvas.PROJECTION_PERSPECTIVE;
+            }
+        }
+        /**
+         * Gets the orthographic projection of the camera.
+         * @returns The orthographic projection.
+         */
+        get orthographic() {
+            return this._orthographic;
+        }
+        /**
+         * Sets the orthographic height of the camera.
+         * @param value - The orthographic height.
+         */
+        set orthoHeight(value) {
+            this._orthoHeight = value;
+            if (this.component) {
+                this.component.orthoHeight = value;
+            }
+        }
+        /**
+         * Gets the orthographic height of the camera.
+         * @returns The orthographic height.
+         */
+        get orthoHeight() {
+            return this._orthoHeight;
+        }
+        static get observedAttributes() {
+            return [...super.observedAttributes, 'clear-color', 'near-clip', 'far-clip', 'fov', 'orthographic', 'ortho-height'];
+        }
+        attributeChangedCallback(name, _oldValue, newValue) {
+            super.attributeChangedCallback(name, _oldValue, newValue);
+            switch (name) {
+                case 'clear-color':
+                    this.clearColor = parseColor(newValue);
+                    break;
+                case 'far-clip':
+                    this.farClip = parseFloat(newValue);
+                    break;
+                case 'fov':
+                    this.fov = parseFloat(newValue);
+                    break;
+                case 'near-clip':
+                    this.nearClip = parseFloat(newValue);
+                    break;
+                case 'orthographic':
+                    this.orthographic = this.hasAttribute('orthographic');
+                    break;
+                case 'ortho-height':
+                    this.orthoHeight = parseFloat(newValue);
+                    break;
+            }
+        }
+    }
+    customElements.define('pc-camera', CameraComponentElement);
+
+    /**
+     * Represents a collision component in the PlayCanvas engine.
+     *
+     * @category Components
+     */
+    class CollisionComponentElement extends ComponentElement {
+        /**
+         * Creates a new CollisionComponentElement.
+         */
+        constructor() {
+            super('collision');
+            this._axis = 1;
+            this._convexHull = false;
+            this._halfExtents = new playcanvas.Vec3(0.5, 0.5, 0.5);
+            this._height = 2;
+            this._radius = 0.5;
+            this._type = 'box';
+        }
+        getInitialComponentData() {
+            return {
+                axis: this._axis,
+                convexHull: this._convexHull,
+                halfExtents: this._halfExtents,
+                height: this._height,
+                radius: this._radius,
+                type: this._type
+            };
+        }
+        /**
+         * Gets the collision component.
+         * @returns The collision component.
+         */
+        get component() {
+            return super.component;
+        }
+        set axis(value) {
+            this._axis = value;
+            if (this.component) {
+                this.component.axis = value;
+            }
+        }
+        get axis() {
+            return this._axis;
+        }
+        set convexHull(value) {
+            this._convexHull = value;
+            if (this.component) {
+                this.component.convexHull = value;
+            }
+        }
+        get convexHull() {
+            return this._convexHull;
+        }
+        set halfExtents(value) {
+            this._halfExtents = value;
+            if (this.component) {
+                this.component.halfExtents = value;
+            }
+        }
+        get halfExtents() {
+            return this._halfExtents;
+        }
+        set height(value) {
+            this._height = value;
+            if (this.component) {
+                this.component.height = value;
+            }
+        }
+        get height() {
+            return this._height;
+        }
+        set radius(value) {
+            this._radius = value;
+            if (this.component) {
+                this.component.radius = value;
+            }
+        }
+        get radius() {
+            return this._radius;
+        }
+        set type(value) {
+            this._type = value;
+            if (this.component) {
+                this.component.type = value;
+            }
+        }
+        get type() {
+            return this._type;
+        }
+        static get observedAttributes() {
+            return [...super.observedAttributes, 'axis', 'convex-hull', 'half-extents', 'height', 'radius', 'type'];
+        }
+        attributeChangedCallback(name, _oldValue, newValue) {
+            super.attributeChangedCallback(name, _oldValue, newValue);
+            switch (name) {
+                case 'axis':
+                    this.axis = parseInt(newValue, 10);
+                    break;
+                case 'convex-hull':
+                    this.convexHull = this.hasAttribute('convex-hull');
+                    break;
+                case 'half-extents':
+                    this.halfExtents = parseVec3(newValue);
+                    break;
+                case 'height':
+                    this.height = parseFloat(newValue);
+                    break;
+                case 'radius':
+                    this.radius = parseFloat(newValue);
+                    break;
+                case 'type':
+                    this.type = newValue;
+                    break;
+            }
+        }
+    }
+    customElements.define('pc-collision', CollisionComponentElement);
+
+    /**
+     * Represents an element component in the PlayCanvas engine.
+     *
+     * @category Components
+     */
+    class ElementComponentElement extends ComponentElement {
+        constructor() {
+            super('element');
+            this._anchor = new playcanvas.Vec4(0.5, 0.5, 0.5, 0.5);
+            this._asset = '';
+            this._autoWidth = true;
+            this._color = new playcanvas.Color(1, 1, 1, 1);
+            this._fontSize = 32;
+            this._lineHeight = 32;
+            this._pivot = new playcanvas.Vec2(0.5, 0.5);
+            this._text = '';
+            this._type = 'group';
+            this._width = 0;
+            this._wrapLines = false;
+        }
+        async connectedCallback() {
+            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,
+                fontSize: this._fontSize,
+                lineHeight: this._lineHeight,
+                pivot: this._pivot,
+                type: this._type,
+                text: this._text,
+                width: this._width,
+                wrapLines: this._wrapLines
+            };
+        }
+        /**
+         * Gets the element component.
+         * @returns The element component.
+         */
+        get component() {
+            return super.component;
+        }
+        set anchor(value) {
+            this._anchor = value;
+            if (this.component) {
+                this.component.anchor = value;
+            }
+        }
+        get anchor() {
+            return this._anchor;
+        }
+        set asset(value) {
+            this._asset = value;
+            const asset = this.getAsset();
+            if (this.component && asset) {
+                this.component.fontAsset = asset.id;
+            }
+        }
+        get asset() {
+            return this._asset;
+        }
+        set autoWidth(value) {
+            this._autoWidth = value;
+            if (this.component) {
+                this.component.autoWidth = value;
+            }
+        }
+        get autoWidth() {
+            return this._autoWidth;
+        }
+        set color(value) {
+            this._color = value;
+            if (this.component) {
+                this.component.color = value;
+            }
+        }
+        get color() {
+            return this._color;
+        }
+        set fontSize(value) {
+            this._fontSize = value;
+            if (this.component) {
+                this.component.fontSize = value;
+            }
+        }
+        get fontSize() {
+            return this._fontSize;
+        }
+        set lineHeight(value) {
+            this._lineHeight = value;
+            if (this.component) {
+                this.component.lineHeight = value;
+            }
+        }
+        get lineHeight() {
+            return this._lineHeight;
+        }
+        set pivot(value) {
+            this._pivot = value;
+            if (this.component) {
+                this.component.pivot = value;
+            }
+        }
+        get pivot() {
+            return this._pivot;
+        }
+        set text(value) {
+            this._text = value;
+            if (this.component) {
+                this.component.text = value;
+            }
+        }
+        get text() {
+            return this._text;
+        }
+        /**
+         * Sets the type of the element component.
+         * @param value - The type.
+         */
+        set type(value) {
+            this._type = value;
+            if (this.component) {
+                this.component.type = value;
+            }
+        }
+        /**
+         * Gets the type of the element component.
+         * @returns The type.
+         */
+        get type() {
+            return this._type;
+        }
+        set width(value) {
+            this._width = value;
+            if (this.component) {
+                this.component.width = value;
+            }
+        }
+        get width() {
+            return this._width;
+        }
+        set wrapLines(value) {
+            this._wrapLines = value;
+            if (this.component) {
+                this.component.wrapLines = value;
+            }
+        }
+        get wrapLines() {
+            return this._wrapLines;
+        }
+        static get observedAttributes() {
+            return [...super.observedAttributes, 'anchor', 'asset', 'auto-width', 'color', 'font-size', 'line-height', 'pivot', 'text', 'type', 'width', 'wrap-lines'];
+        }
+        attributeChangedCallback(name, _oldValue, newValue) {
+            super.attributeChangedCallback(name, _oldValue, newValue);
+            switch (name) {
+                case 'anchor':
+                    this.anchor = parseVec4(newValue);
+                    break;
+                case 'asset':
+                    this.asset = newValue;
+                    break;
+                case 'auto-width':
+                    this.autoWidth = newValue !== 'false';
+                    break;
+                case 'color':
+                    this.color = parseColor(newValue);
+                    break;
+                case 'font-size':
+                    this.fontSize = Number(newValue);
+                    break;
+                case 'line-height':
+                    this.lineHeight = Number(newValue);
+                    break;
+                case 'pivot':
+                    this.pivot = parseVec2(newValue);
+                    break;
+                case 'text':
+                    this.text = newValue;
+                    break;
+                case 'type':
+                    this.type = newValue;
+                    break;
+                case 'width':
+                    this.width = Number(newValue);
+                    break;
+                case 'wrap-lines':
+                    this.wrapLines = this.hasAttribute(name);
+                    break;
+            }
+        }
+    }
+    customElements.define('pc-element', ElementComponentElement);
+
+    /**
+     * Represents a gsplat component in the PlayCanvas engine.
+     *
+     * @category Components
+     */
+    class GSplatComponentElement extends ComponentElement {
+        constructor() {
+            super('gsplat');
+            this._asset = '';
+        }
+        getAsset() {
+            const assetElement = document.querySelector(`pc-asset[id="${this._asset}"]`);
+            return assetElement.asset;
+        }
+        getInitialComponentData() {
+            return {
+                asset: this.getAsset()
+            };
+        }
+        /**
+         * Gets the gsplat component.
+         * @returns The gsplat component.
+         */
+        get component() {
+            return super.component;
+        }
+        set asset(value) {
+            this._asset = value;
+            const asset = this.getAsset();
+            if (this.component && asset) {
+                this.component.asset = asset;
+            }
+        }
+        get asset() {
+            return this._asset;
+        }
+        static get observedAttributes() {
+            return [...super.observedAttributes, 'asset'];
+        }
+        attributeChangedCallback(name, _oldValue, newValue) {
+            super.attributeChangedCallback(name, _oldValue, newValue);
+            switch (name) {
+                case 'asset':
+                    this.asset = newValue;
+                    break;
+            }
+        }
+    }
+    customElements.define('pc-gsplat', GSplatComponentElement);
+
+    /**
+     * Represents a light component in the PlayCanvas engine.
+     *
+     * @category Components
+     */
+    class LightComponentElement extends ComponentElement {
+        /**
+         * Creates a new LightComponentElement.
+         */
+        constructor() {
+            super('light');
+            this._castShadows = false;
+            this._color = new playcanvas.Color(1, 1, 1);
+            this._innerConeAngle = 40;
+            this._intensity = 1;
+            this._normalOffsetBias = 0.05;
+            this._outerConeAngle = 45;
+            this._range = 10;
+            this._shadowBias = 0.2;
+            this._shadowDistance = 16;
+            this._type = 'directional';
+        }
+        getInitialComponentData() {
+            return {
+                castShadows: this._castShadows,
+                color: this._color,
+                innerConeAngle: this._innerConeAngle,
+                intensity: this._intensity,
+                normalOffsetBias: this._normalOffsetBias,
+                outerConeAngle: this._outerConeAngle,
+                range: this._range,
+                shadowBias: this._shadowBias,
+                shadowDistance: this._shadowDistance,
+                type: this._type
+            };
+        }
+        /**
+         * Gets the light component.
+         * @returns The light component.
+         */
+        get component() {
+            return super.component;
+        }
+        /**
+         * Sets the cast shadows flag of the light.
+         * @param value - The cast shadows flag.
+         */
+        set castShadows(value) {
+            this._castShadows = value;
+            if (this.component) {
+                this.component.castShadows = value;
+            }
+        }
+        /**
+         * Gets the cast shadows flag of the light.
+         * @returns The cast shadows flag.
+         */
+        get castShadows() {
+            return this._castShadows;
+        }
+        /**
+         * Sets the color of the light.
+         * @param value - The color.
+         */
+        set color(value) {
+            this._color = value;
+            if (this.component) {
+                this.component.color = value;
+            }
+        }
+        /**
+         * Gets the color of the light.
+         * @returns The color.
+         */
+        get color() {
+            return this._color;
+        }
+        /**
+         * Sets the inner cone angle of the light.
+         * @param value - The inner cone angle.
+         */
+        set innerConeAngle(value) {
+            this._innerConeAngle = value;
+            if (this.component) {
+                this.component.innerConeAngle = value;
+            }
+        }
+        /**
+         * Gets the inner cone angle of the light.
+         * @returns The inner cone angle.
+         */
+        get innerConeAngle() {
+            return this._innerConeAngle;
+        }
+        /**
+         * Sets the intensity of the light.
+         * @param value - The intensity.
+         */
+        set intensity(value) {
+            this._intensity = value;
+            if (this.component) {
+                this.component.intensity = value;
+            }
+        }
+        /**
+         * Gets the intensity of the light.
+         * @returns The intensity.
+         */
+        get intensity() {
+            return this._intensity;
+        }
+        /**
+         * Sets the normal offset bias of the light.
+         * @param value - The normal offset bias.
+         */
+        set normalOffsetBias(value) {
+            this._normalOffsetBias = value;
+            if (this.component) {
+                this.component.normalOffsetBias = value;
+            }
+        }
+        /**
+         * Gets the normal offset bias of the light.
+         * @returns The normal offset bias.
+         */
+        get normalOffsetBias() {
+            return this._normalOffsetBias;
+        }
+        /**
+         * Sets the outer cone angle of the light.
+         * @param value - The outer cone angle.
+         */
+        set outerConeAngle(value) {
+            this._outerConeAngle = value;
+            if (this.component) {
+                this.component.outerConeAngle = value;
+            }
+        }
+        /**
+         * Gets the outer cone angle of the light.
+         * @returns The outer cone angle.
+         */
+        get outerConeAngle() {
+            return this._outerConeAngle;
+        }
+        /**
+         * Sets the range of the light.
+         * @param value - The range.
+         */
+        set range(value) {
+            this._range = value;
+            if (this.component) {
+                this.component.range = value;
+            }
+        }
+        /**
+         * Gets the range of the light.
+         * @returns The range.
+         */
+        get range() {
+            return this._range;
+        }
+        /**
+         * Sets the shadow bias of the light.
+         * @param value - The shadow bias.
+         */
+        set shadowBias(value) {
+            this._shadowBias = value;
+            if (this.component) {
+                this.component.shadowBias = value;
+            }
+        }
+        /**
+         * Gets the shadow bias of the light.
+         * @returns The shadow bias.
+         */
+        get shadowBias() {
+            return this._shadowBias;
+        }
+        /**
+         * Sets the shadow distance of the light.
+         * @param value - The shadow distance.
+         */
+        set shadowDistance(value) {
+            this._shadowDistance = value;
+            if (this.component) {
+                this.component.shadowDistance = value;
+            }
+        }
+        /**
+         * Gets the shadow distance of the light.
+         * @returns The shadow distance.
+         */
+        get shadowDistance() {
+            return this._shadowDistance;
+        }
+        /**
+         * Sets the type of the light.
+         * @param value - The type.
+         */
+        set type(value) {
+            if (!['directional', 'omni', 'spot'].includes(value)) {
+                console.warn(`Invalid light type '${value}', using default type '${this._type}'.`);
+                return;
+            }
+            this._type = value;
+            if (this.component) {
+                this.component.type = value;
+            }
+        }
+        /**
+         * Gets the type of the light.
+         * @returns The type.
+         */
+        get type() {
+            return this._type;
+        }
+        static get observedAttributes() {
+            return [
+                ...super.observedAttributes,
+                'color',
+                'cast-shadows',
+                'intensity',
+                'inner-cone-angle',
+                'normal-offset-bias',
+                'outer-cone-angle',
+                'range',
+                'shadow-bias',
+                'shadow-distance',
+                'type'
+            ];
+        }
+        attributeChangedCallback(name, _oldValue, newValue) {
+            super.attributeChangedCallback(name, _oldValue, newValue);
+            switch (name) {
+                case 'color':
+                    this.color = parseColor(newValue);
+                    break;
+                case 'cast-shadows':
+                    this.castShadows = this.hasAttribute('cast-shadows');
+                    break;
+                case 'inner-cone-angle':
+                    this.innerConeAngle = Number(newValue);
+                    break;
+                case 'intensity':
+                    this.intensity = Number(newValue);
+                    break;
+                case 'normal-offset-bias':
+                    this.normalOffsetBias = Number(newValue);
+                    break;
+                case 'outer-cone-angle':
+                    this.outerConeAngle = Number(newValue);
+                    break;
+                case 'range':
+                    this.range = Number(newValue);
+                    break;
+                case 'shadow-bias':
+                    this.shadowBias = Number(newValue);
+                    break;
+                case 'shadow-distance':
+                    this.shadowDistance = Number(newValue);
+                    break;
+                case 'type':
+                    this.type = newValue;
+                    break;
+            }
+        }
+    }
+    customElements.define('pc-light', LightComponentElement);
+
+    /**
+     * Represents a render component in the PlayCanvas engine.
+     *
+     * @category Components
+     */
+    class RenderComponentElement extends ComponentElement {
+        constructor() {
+            super('render');
+            this._type = 'asset';
+            this._castShadows = true;
+            this._receiveShadows = true;
+        }
+        getInitialComponentData() {
+            return {
+                type: this._type,
+                castShadows: this._castShadows,
+                receiveShadows: this._receiveShadows
+            };
+        }
+        /**
+         * Gets the render component.
+         * @returns The render component.
+         */
+        get component() {
+            return super.component;
+        }
+        /**
+         * Sets the type of the render component.
+         * @param value - The type.
+         */
+        set type(value) {
+            this._type = value;
+            if (this.component) {
+                this.component.type = value;
+            }
+        }
+        /**
+         * Gets the type of the render component.
+         * @returns The type.
+         */
+        get type() {
+            return this._type;
+        }
+        /**
+         * Sets the cast shadows flag of the render component.
+         * @param value - The cast shadows flag.
+         */
+        set castShadows(value) {
+            this._castShadows = value;
+            if (this.component) {
+                this.component.castShadows = value;
+            }
+        }
+        /**
+         * Gets the cast shadows flag of the render component.
+         * @returns The cast shadows flag.
+         */
+        get castShadows() {
+            return this._castShadows;
+        }
+        /**
+         * Sets the receive shadows flag of the render component.
+         * @param value - The receive shadows flag.
+         */
+        set receiveShadows(value) {
+            this._receiveShadows = value;
+            if (this.component) {
+                this.component.receiveShadows = value;
+            }
+        }
+        /**
+         * Gets the receive shadows flag of the render component.
+         * @returns The receive shadows flag.
+         */
+        get receiveShadows() {
+            return this._receiveShadows;
+        }
+        static get observedAttributes() {
+            return [...super.observedAttributes, 'cast-shadows', '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 'receive-shadows':
+                    this.receiveShadows = newValue !== 'false';
+                    break;
+            }
+        }
+    }
+    customElements.define('pc-render', RenderComponentElement);
+
+    /**
+     * Represents a rigidbody component in the PlayCanvas engine.
+     *
+     * @category Components
+     */
+    class RigidBodyComponentElement extends ComponentElement {
+        /**
+         * Creates a new RigidBodyComponentElement.
+         */
+        constructor() {
+            super('rigidbody');
+            /**
+             * The angular damping of the rigidbody.
+             */
+            this._angularDamping = 0;
+            /**
+             * The angular factor of the rigidbody.
+             */
+            this._angularFactor = new playcanvas.Vec3(1, 1, 1);
+            /**
+             * The friction of the rigidbody.
+             */
+            this._friction = 0.5;
+            /**
+             * The linear damping of the rigidbody.
+             */
+            this._linearDamping = 0;
+            /**
+             * The linear factor of the rigidbody.
+             */
+            this._linearFactor = new playcanvas.Vec3(1, 1, 1);
+            /**
+             * The mass of the rigidbody.
+             */
+            this._mass = 1;
+            /**
+             * The restitution of the rigidbody.
+             */
+            this._restitution = 0;
+            /**
+             * The rolling friction of the rigidbody.
+             */
+            this._rollingFriction = 0;
+            /**
+             * The type of the rigidbody.
+             */
+            this._type = 'static';
+        }
+        getInitialComponentData() {
+            return {
+                angularDamping: this._angularDamping,
+                angularFactor: this._angularFactor,
+                friction: this._friction,
+                linearDamping: this._linearDamping,
+                linearFactor: this._linearFactor,
+                mass: this._mass,
+                restitution: this._restitution,
+                rollingFriction: this._rollingFriction,
+                type: this._type
+            };
+        }
+        /**
+         * Gets the collision component.
+         * @returns The collision component.
+         */
+        get component() {
+            return super.component;
+        }
+        set angularDamping(value) {
+            this._angularDamping = value;
+            if (this.component) {
+                this.component.angularDamping = value;
+            }
+        }
+        get angularDamping() {
+            return this._angularDamping;
+        }
+        set angularFactor(value) {
+            this._angularFactor = value;
+            if (this.component) {
+                this.component.angularFactor = value;
+            }
+        }
+        get angularFactor() {
+            return this._angularFactor;
+        }
+        set friction(value) {
+            this._friction = value;
+            if (this.component) {
+                this.component.friction = value;
+            }
+        }
+        get friction() {
+            return this._friction;
+        }
+        set linearDamping(value) {
+            this._linearDamping = value;
+            if (this.component) {
+                this.component.linearDamping = value;
+            }
+        }
+        get linearDamping() {
+            return this._linearDamping;
+        }
+        set linearFactor(value) {
+            this._linearFactor = value;
+            if (this.component) {
+                this.component.linearFactor = value;
+            }
+        }
+        get linearFactor() {
+            return this._linearFactor;
+        }
+        set mass(value) {
+            this._mass = value;
+            if (this.component) {
+                this.component.mass = value;
+            }
+        }
+        get mass() {
+            return this._mass;
+        }
+        set restitution(value) {
+            this._restitution = value;
+            if (this.component) {
+                this.component.restitution = value;
+            }
+        }
+        get restitution() {
+            return this._restitution;
+        }
+        set rollingFriction(value) {
+            this._rollingFriction = value;
+            if (this.component) {
+                this.component.rollingFriction = value;
+            }
+        }
+        get rollingFriction() {
+            return this._rollingFriction;
+        }
+        set type(value) {
+            this._type = value;
+            if (this.component) {
+                this.component.type = value;
+            }
+        }
+        get type() {
+            return this._type;
+        }
+        static get observedAttributes() {
+            return [...super.observedAttributes, 'angular-damping', 'angular-factor', 'friction', 'linear-damping', 'linear-factor', 'mass', 'restitution', 'rolling-friction', 'type'];
+        }
+        attributeChangedCallback(name, _oldValue, newValue) {
+            super.attributeChangedCallback(name, _oldValue, newValue);
+            switch (name) {
+                case 'angular-damping':
+                    this.angularDamping = parseFloat(newValue);
+                    break;
+                case 'angular-factor':
+                    this.angularFactor = parseVec3(newValue);
+                    break;
+                case 'friction':
+                    this.friction = parseFloat(newValue);
+                    break;
+                case 'linear-damping':
+                    this.linearDamping = parseFloat(newValue);
+                    break;
+                case 'linear-factor':
+                    this.linearFactor = parseVec3(newValue);
+                    break;
+                case 'mass':
+                    this.mass = parseFloat(newValue);
+                    break;
+                case 'restitution':
+                    this.restitution = parseFloat(newValue);
+                    break;
+                case 'rolling-friction':
+                    this.rollingFriction = parseFloat(newValue);
+                    break;
+                case 'type':
+                    this.type = newValue;
+                    break;
+            }
+        }
+    }
+    customElements.define('pc-rigidbody', RigidBodyComponentElement);
+
+    /**
+     * Represents a script component in the PlayCanvas engine.
+     *
+     * @category Components
+     */
+    class ScriptComponentElement extends ComponentElement {
+        constructor() {
+            super('script');
+        }
+        /**
+         * 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 = '';
+            this._script = null;
+        }
+        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`);
+                return;
+            }
+            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);
+                }
+            }
+            // 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);
+        }
+        refreshAttributes() {
+            if (this._script) {
+                Object.entries(this._attributes).forEach(([name, value]) => {
+                    if (this._script && name in this._script) {
+                        this._script[name] = value;
+                    }
+                });
+            }
+        }
+        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;
+        }
+        set scriptAttributes(value) {
+            this._attributes = JSON.parse(value);
+            this.refreshAttributes();
+        }
+        get scriptAttributes() {
+            return JSON.stringify(this._attributes);
+        }
+        set enabled(value) {
+            this._enabled = value;
+            if (this._script) {
+                this._script.enabled = value;
+            }
+        }
+        /**
+         * Gets the enabled state of the script.
+         * @returns The enabled state of the script.
+         */
+        get enabled() {
+            return this._enabled;
+        }
+        /**
+         * Sets the name of the script to create.
+         * @param value - The name.
+         */
+        set name(value) {
+            this._name = value;
+        }
+        /**
+         * Gets the name of the script.
+         * @returns The name.
+         */
+        get name() {
+            return this._name;
+        }
+        static get observedAttributes() {
+            return ['attributes', 'enabled', 'name'];
+        }
+        attributeChangedCallback(name, _oldValue, newValue) {
+            switch (name) {
+                case 'attributes':
+                    this.scriptAttributes = newValue;
+                    break;
+                case 'enabled':
+                    this.enabled = newValue !== 'false';
+                    break;
+                case 'name':
+                    this.name = newValue;
+                    break;
+            }
+        }
+    }
+    customElements.define('pc-script', ScriptElement);
+
+    /**
+     * Represents a sound component in the PlayCanvas engine.
+     *
+     * @category Components
+     */
+    class SoundComponentElement extends ComponentElement {
+        constructor() {
+            super('sound');
+            this._pitch = 1;
+            this._positional = false;
+            this._volume = 1;
+        }
+        getInitialComponentData() {
+            return {
+                pitch: this._pitch,
+                positional: this._positional,
+                volume: this._volume
+            };
+        }
+        /**
+         * Gets the sound component.
+         * @returns The sound component.
+         */
+        get component() {
+            return super.component;
+        }
+        /**
+         * Sets the pitch of the sound.
+         * @param value - The pitch.
+         */
+        set pitch(value) {
+            this._pitch = value;
+            if (this.component) {
+                this.component.pitch = value;
+            }
+        }
+        /**
+         * Gets the pitch of the sound.
+         * @returns The pitch.
+         */
+        get pitch() {
+            return this._pitch;
+        }
+        /**
+         * Sets the positional flag of the sound.
+         * @param value - The positional flag.
+         */
+        set positional(value) {
+            this._positional = value;
+            if (this.component) {
+                this.component.positional = value;
+            }
+        }
+        /**
+         * Gets the positional flag of the sound.
+         * @returns The positional flag.
+         */
+        get positional() {
+            return this._positional;
+        }
+        /**
+         * Sets the volume of the sound.
+         * @param value - The volume.
+         */
+        set volume(value) {
+            this._volume = value;
+            if (this.component) {
+                this.component.volume = value;
+            }
+        }
+        /**
+         * Gets the volume of the sound.
+         * @returns The volume.
+         */
+        get volume() {
+            return this._volume;
+        }
+        static get observedAttributes() {
+            return [...super.observedAttributes, 'pitch', 'positional', 'volume'];
+        }
+        attributeChangedCallback(name, _oldValue, newValue) {
+            super.attributeChangedCallback(name, _oldValue, newValue);
+            switch (name) {
+                case 'pitch':
+                    this.pitch = parseFloat(newValue);
+                    break;
+                case 'positional':
+                    this.positional = this.hasAttribute('positional');
+                    break;
+                case 'volume':
+                    this.volume = parseFloat(newValue);
+                    break;
+            }
+        }
+    }
+    customElements.define('pc-sound', SoundComponentElement);
+
+    /**
+     * Represents a sound slot in the PlayCanvas engine.
+     */
+    class SoundSlotElement extends HTMLElement {
+        constructor() {
+            super(...arguments);
+            this._asset = '';
+            this._autoPlay = false;
+            this._duration = null;
+            this._loop = false;
+            this._name = '';
+            this._overlap = false;
+            this._pitch = 1;
+            this._startTime = 0;
+            this._volume = 1;
+            /**
+             * The sound slot.
+             */
+            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) {
+                console.error(`${this.tagName.toLowerCase()} should be a descendant of pc-app`);
+                return;
+            }
+            await appElement.getApplication();
+            const options = {
+                autoPlay: this._autoPlay,
+                loop: this._loop,
+                overlap: this._overlap,
+                pitch: this._pitch,
+                startTime: this._startTime,
+                volume: this._volume
+            };
+            if (this._duration) {
+                options.duration = this._duration;
+            }
+            this.soundSlot = this.soundElement.component.addSlot(this._name, options);
+            this.asset = this._asset;
+            this.soundSlot.play();
+        }
+        disconnectedCallback() {
+            this.soundElement.component.removeSlot(this._name);
+        }
+        get soundElement() {
+            const soundElement = this.parentElement;
+            if (!(soundElement instanceof SoundComponentElement)) {
+                console.warn('pc-sound-slot must be a direct child of a pc-sound element');
+                return null;
+            }
+            return soundElement;
+        }
+        /**
+         * Sets the asset of the sound slot.
+         * @param value - The asset.
+         */
+        set asset(value) {
+            var _a;
+            this._asset = value;
+            if (this.soundSlot) {
+                const id = (_a = this.getAsset()) === null || _a === void 0 ? void 0 : _a.id;
+                if (id) {
+                    this.soundSlot.asset = id;
+                }
+            }
+        }
+        /**
+         * Gets the asset of the sound slot.
+         * @returns The asset.
+         */
+        get asset() {
+            return this._asset;
+        }
+        /**
+         * Sets the auto play flag of the sound slot.
+         * @param value - The auto play flag.
+         */
+        set autoPlay(value) {
+            this._autoPlay = value;
+            if (this.soundSlot) {
+                this.soundSlot.autoPlay = value;
+            }
+        }
+        /**
+         * Gets the auto play flag of the sound slot.
+         * @returns The auto play flag.
+         */
+        get autoPlay() {
+            return this._autoPlay;
+        }
+        /**
+         * Sets the duration of the sound slot.
+         * @param value - The duration.
+         */
+        set duration(value) {
+            this._duration = value;
+            if (this.soundSlot) {
+                this.soundSlot.duration = value;
+            }
+        }
+        /**
+         * Gets the duration of the sound slot.
+         * @returns The duration.
+         */
+        get duration() {
+            return this._duration;
+        }
+        /**
+         * Sets the loop flag of the sound slot.
+         * @param value - The loop flag.
+         */
+        set loop(value) {
+            this._loop = value;
+            if (this.soundSlot) {
+                this.soundSlot.loop = value;
+            }
+        }
+        /**
+         * Gets the loop flag of the sound slot.
+         * @returns The loop flag.
+         */
+        get loop() {
+            return this._loop;
+        }
+        /**
+         * Sets the name of the sound slot.
+         * @param value - The name.
+         */
+        set name(value) {
+            this._name = value;
+            if (this.soundSlot) {
+                this.soundSlot.name = value;
+            }
+        }
+        /**
+         * Gets the name of the sound slot.
+         * @returns The name.
+         */
+        get name() {
+            return this._name;
+        }
+        /**
+         * Sets the overlap flag of the sound slot.
+         * @param value - The overlap flag.
+         */
+        set overlap(value) {
+            this._overlap = value;
+            if (this.soundSlot) {
+                this.soundSlot.overlap = value;
+            }
+        }
+        /**
+         * Gets the overlap flag of the sound slot.
+         * @returns The overlap flag.
+         */
+        get overlap() {
+            return this._overlap;
+        }
+        /**
+         * Sets the pitch of the sound slot.
+         * @param value - The pitch.
+         */
+        set pitch(value) {
+            this._pitch = value;
+            if (this.soundSlot) {
+                this.soundSlot.pitch = value;
+            }
+        }
+        /**
+         * Gets the pitch of the sound slot.
+         * @returns The pitch.
+         */
+        get pitch() {
+            return this._pitch;
+        }
+        /**
+         * Sets the start time of the sound slot.
+         * @param value - The start time.
+         */
+        set startTime(value) {
+            this._startTime = value;
+            if (this.soundSlot) {
+                this.soundSlot.startTime = value;
+            }
+        }
+        /**
+         * Gets the start time of the sound slot.
+         * @returns The start time.
+         */
+        get startTime() {
+            return this._startTime;
+        }
+        /**
+         * Sets the volume of the sound slot.
+         * @param value - The volume.
+         */
+        set volume(value) {
+            this._volume = value;
+            if (this.soundSlot) {
+                this.soundSlot.volume = value;
+            }
+        }
+        /**
+         * Gets the volume of the sound slot.
+         * @returns The volume.
+         */
+        get volume() {
+            return this._volume;
+        }
+        static get observedAttributes() {
+            return ['asset', 'autoPlay', 'duration', 'loop', 'name', 'overlap', 'pitch', 'startTime', 'volume'];
+        }
+        attributeChangedCallback(name, _oldValue, newValue) {
+            switch (name) {
+                case 'asset':
+                    this.asset = newValue;
+                    break;
+                case 'duration':
+                    this.duration = parseFloat(newValue);
+                    break;
+                case 'loop':
+                    this.loop = this.hasAttribute('loop');
+                    break;
+                case 'name':
+                    this.name = newValue;
+                    break;
+                case 'overlap':
+                    this.overlap = this.hasAttribute('overlap');
+                    break;
+                case 'pitch':
+                    this.pitch = parseFloat(newValue);
+                    break;
+                case 'startTime':
+                    this.startTime = parseFloat(newValue);
+                    break;
+                case 'volume':
+                    this.volume = parseFloat(newValue);
+                    break;
+            }
+        }
+    }
+    customElements.define('pc-sound-slot', SoundSlotElement);
+
+    /**
+     * Represents a model in the PlayCanvas engine.
+     */
+    class ModelElement extends HTMLElement {
+        constructor() {
+            super(...arguments);
+            this._asset = '';
+        }
+        async connectedCallback() {
+            // Get the application
+            const appElement = this.closest('pc-app');
+            if (!appElement) {
+                console.warn(`${this.tagName} must be a child of pc-app`);
+                return;
+            }
+            await appElement.getApplication();
+            const asset = this.getAttribute('asset');
+            if (asset) {
+                this.asset = asset;
+            }
+        }
+        getAsset() {
+            const assetElement = document.querySelector(`pc-asset[id="${this._asset}"]`);
+            return assetElement.asset;
+        }
+        _loadModel() {
+            const asset = this.getAsset();
+            if (!asset) {
+                return;
+            }
+            const entity = asset.resource.instantiateRenderEntity();
+            const parentEntityElement = this.closest('pc-entity');
+            if (parentEntityElement) {
+                parentEntityElement.entity.addChild(entity);
+            }
+            else {
+                const appElement = this.closest('pc-app');
+                appElement.app.root.addChild(entity);
+            }
+        }
+        /**
+         * Sets the asset ID of the model.
+         * @param value - The asset ID.
+         */
+        set asset(value) {
+            this._asset = value;
+            this._loadModel();
+        }
+        /**
+         * Gets the source URL of the model.
+         * @returns The source URL of the model.
+         */
+        get asset() {
+            return this._asset;
+        }
+        static get observedAttributes() {
+            return ['asset'];
+        }
+        attributeChangedCallback(name, _oldValue, newValue) {
+            switch (name) {
+                case 'asset':
+                    this.asset = newValue;
+                    break;
+            }
+        }
+    }
+    customElements.define('pc-model', ModelElement);
+
+    /**
+     * Represents a scene in the PlayCanvas engine.
+     */
+    class SceneElement extends HTMLElement {
+        constructor() {
+            super(...arguments);
+            /**
+             * The fog type of the scene.
+             */
+            this._fog = 'none'; // possible values: 'none', 'linear', 'exp', 'exp2'
+            /**
+             * The color of the fog.
+             */
+            this._fogColor = new playcanvas.Color(1, 1, 1);
+            /**
+             * The density of the fog.
+             */
+            this._fogDensity = 0;
+            /**
+             * The start distance of the fog.
+             */
+            this._fogStart = 0;
+            /**
+             * The end distance of the fog.
+             */
+            this._fogEnd = 1000;
+            /**
+             * The PlayCanvas scene instance.
+             */
+            this.scene = null;
+        }
+        async connectedCallback() {
+            // Get the application
+            const appElement = this.closest('pc-app');
+            if (!appElement) {
+                console.warn(`${this.tagName} must be a child of pc-app`);
+                return;
+            }
+            const app = await appElement.getApplication();
+            this.scene = app.scene;
+            this.updateSceneSettings();
+        }
+        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;
+                // ... set other properties on the scene as well
+            }
+        }
+        /**
+         * Sets the fog type of the scene.
+         * @param value - The fog type.
+         */
+        set fog(value) {
+            this._fog = value;
+            if (this.scene) {
+                this.scene.rendering.fog = value;
+            }
+        }
+        /**
+         * Gets the fog type of the scene.
+         * @returns The fog type.
+         */
+        get fog() {
+            return this._fog;
+        }
+        /**
+         * Sets the fog color of the scene.
+         * @param value - The fog color.
+         */
+        set fogColor(value) {
+            this._fogColor = value;
+            if (this.scene) {
+                this.scene.rendering.fogColor = value;
+            }
+        }
+        /**
+         * Gets the fog color of the scene.
+         * @returns The fog color.
+         */
+        get fogColor() {
+            return this._fogColor;
+        }
+        /**
+         * Sets the fog density of the scene.
+         * @param value - The fog density.
+         */
+        set fogDensity(value) {
+            this._fogDensity = value;
+            if (this.scene) {
+                this.scene.rendering.fogDensity = value;
+            }
+        }
+        /**
+         * Gets the fog density of the scene.
+         * @returns The fog density.
+         */
+        get fogDensity() {
+            return this._fogDensity;
+        }
+        /**
+         * Sets the fog start distance of the scene.
+         * @param value - The fog start distance.
+         */
+        set fogStart(value) {
+            this._fogStart = value;
+            if (this.scene) {
+                this.scene.rendering.fogStart = value;
+            }
+        }
+        /**
+         * Gets the fog start distance of the scene.
+         * @returns The fog start distance.
+         */
+        get fogStart() {
+            return this._fogStart;
+        }
+        /**
+         * Sets the fog end distance of the scene.
+         * @param value - The fog end distance.
+         */
+        set fogEnd(value) {
+            this._fogEnd = value;
+            if (this.scene) {
+                this.scene.rendering.fogEnd = value;
+            }
+        }
+        /**
+         * Gets the fog end distance of the scene.
+         * @returns The fog end distance.
+         */
+        get fogEnd() {
+            return this._fogEnd;
+        }
+        static get observedAttributes() {
+            return ['fog', 'fog-color', 'fog-density', 'fog-start', 'fog-end'];
+        }
+        attributeChangedCallback(name, _oldValue, newValue) {
+            switch (name) {
+                case 'fog':
+                    this.fog = newValue;
+                    break;
+                case 'fog-color':
+                    this.fogColor = parseColor(newValue);
+                    break;
+                case 'fog-density':
+                    this.fogDensity = parseFloat(newValue);
+                    break;
+                case 'fog-start':
+                    this.fogStart = parseFloat(newValue);
+                    break;
+                case 'fog-end':
+                    this.fogEnd = parseFloat(newValue);
+                    break;
+                // ... handle other attributes as well
+            }
+        }
+    }
+    customElements.define('pc-scene', SceneElement);
+
+    /**
+     * Represents a sky in the PlayCanvas engine.
+     */
+    class SkyElement extends HTMLElement {
+        constructor() {
+            super(...arguments);
+            this._asset = '';
+            this._intensity = 1;
+            this._rotation = [0, 0, 0];
+            this._level = 0;
+            this._solidColor = false;
+        }
+        async connectedCallback() {
+            // Get the application
+            const appElement = this.closest('pc-app');
+            if (!appElement) {
+                console.warn(`${this.tagName} must be a child of pc-app`);
+                return;
+            }
+            await appElement.getApplication();
+            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) {
+                return;
+            }
+            const app = appElement.app;
+            if (!app) {
+                return;
+            }
+            return app.scene;
+        }
+        set asset(value) {
+            this._asset = value;
+            const scene = this.getScene();
+            if (scene) {
+                const asset = this.getAsset();
+                if (asset) {
+                    if (asset.resource) {
+                        scene.envAtlas = asset.resource;
+                    }
+                    else {
+                        asset.once('load', () => {
+                            scene.envAtlas = asset.resource;
+                        });
+                    }
+                }
+            }
+        }
+        get asset() {
+            return this._asset;
+        }
+        set intensity(value) {
+            this._intensity = value;
+            const scene = this.getScene();
+            if (scene) {
+                scene.skyboxIntensity = this._intensity;
+            }
+        }
+        get intensity() {
+            return this._intensity;
+        }
+        set rotation(value) {
+            this._rotation = value;
+            const scene = this.getScene();
+            if (scene) {
+                scene.skyboxRotation = new playcanvas.Quat().setFromEulerAngles(this._rotation[0], this._rotation[1], this._rotation[2]);
+            }
+        }
+        get rotation() {
+            return this._rotation;
+        }
+        set solidColor(value) {
+            this._solidColor = value;
+            const scene = this.getScene();
+            if (scene) {
+                const layer = scene.layers.getLayerById(playcanvas.LAYERID_SKYBOX);
+                if (layer) {
+                    layer.enabled = !this._solidColor;
+                }
+            }
+        }
+        get solidColor() {
+            return this._solidColor;
+        }
+        set level(value) {
+            this._level = value;
+            const scene = this.getScene();
+            if (scene) {
+                scene.skyboxMip = this._level;
+            }
+        }
+        get level() {
+            return this._level;
+        }
+        static get observedAttributes() {
+            return ['asset', 'intensity', 'level', 'rotation', 'solid-color'];
+        }
+        attributeChangedCallback(name, _oldValue, newValue) {
+            switch (name) {
+                case 'asset':
+                    this.asset = newValue;
+                    break;
+                case 'intensity':
+                    this.intensity = parseFloat(newValue);
+                    break;
+                case 'rotation':
+                    this.rotation = newValue.split(',').map(Number);
+                    break;
+                case 'level':
+                    this.level = parseInt(newValue, 10);
+                    break;
+                case 'solid-color':
+                    this.solidColor = this.hasAttribute('solid-color');
+                    break;
+            }
+        }
+    }
+    customElements.define('pc-sky', SkyElement);
+
+    exports.AppElement = AppElement;
+    exports.AssetElement = AssetElement;
+    exports.CameraComponentElement = CameraComponentElement;
+    exports.CollisionComponentElement = CollisionComponentElement;
+    exports.ComponentElement = ComponentElement;
+    exports.ElementComponentElement = ElementComponentElement;
+    exports.EntityElement = EntityElement;
+    exports.GSplatComponentElement = GSplatComponentElement;
+    exports.LightComponentElement = LightComponentElement;
+    exports.ListenerComponentElement = ListenerComponentElement;
+    exports.ModelElement = ModelElement;
+    exports.ModuleElement = ModuleElement;
+    exports.RenderComponentElement = RenderComponentElement;
+    exports.RigidBodyComponentElement = RigidBodyComponentElement;
+    exports.SceneElement = SceneElement;
+    exports.ScriptComponentElement = ScriptComponentElement;
+    exports.ScriptElement = ScriptElement;
+    exports.SkyElement = SkyElement;
+    exports.SoundComponentElement = SoundComponentElement;
+    exports.SoundSlotElement = SoundSlotElement;
+
+}));
+//# sourceMappingURL=pwc.js.map