@playcanvas/web-components 0.1.0

package/dist/pwc.mjs

@@ -0,0 +1,2488 @@
+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';
+
+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');
+        WasmModule.setConfig(name, {
+            glueUrl: glue,
+            wasmUrl: wasm,
+            fallbackUrl: fallback
+        });
+        await new Promise((resolve) => {
+            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 Application(this._canvas, {
+            graphicsDeviceOptions: {
+                devicePixelRatio: this._highResolution ? window.devicePixelRatio : 1
+            },
+            keyboard: new Keyboard(window),
+            mouse: new Mouse(this._canvas)
+        });
+        this.app.setCanvasFillMode(FILLMODE_FILL_WINDOW);
+        this.app.setCanvasResolution(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 Color().fromString(value);
+    }
+    const components = value.split(',').map(Number);
+    return new 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 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 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 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 Vec3();
+        /**
+         * The rotation of the entity.
+         */
+        this._rotation = new Vec3();
+        /**
+         * The scale of the entity.
+         */
+        this._scale = new 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 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 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 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 ? PROJECTION_ORTHOGRAPHIC : 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 ? PROJECTION_ORTHOGRAPHIC : 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 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 Vec4(0.5, 0.5, 0.5, 0.5);
+        this._asset = '';
+        this._autoWidth = true;
+        this._color = new Color(1, 1, 1, 1);
+        this._fontSize = 32;
+        this._lineHeight = 32;
+        this._pivot = new 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 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 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 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 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 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(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);
+
+export { AppElement, AssetElement, CameraComponentElement, CollisionComponentElement, ComponentElement, ElementComponentElement, EntityElement, GSplatComponentElement, LightComponentElement, ListenerComponentElement, ModelElement, ModuleElement, RenderComponentElement, RigidBodyComponentElement, SceneElement, ScriptComponentElement, ScriptElement, SkyElement, SoundComponentElement, SoundSlotElement };
+//# sourceMappingURL=pwc.mjs.map