@playcanvas/web-components 0.8.1 → 0.9.0

package/dist/pwc.js

@@ -24,21 +24,51 @@
             return (_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.closest('pc-entity');
         }
         /**
-         * Called when the element is fully initialized and ready.
-         * Subclasses should call this when they're ready.
+         * Called when the element is fully initialized and ready. Subclasses should call this when
+         * they're ready. Resolves the ready promise and dispatches a bubbling, composed `ready`
+         * event.
          */
         _onReady() {
             this._readyResolve();
-            this.dispatchEvent(new CustomEvent('ready'));
+            this.dispatchEvent(new CustomEvent('ready', { bubbles: true, composed: true }));
         }
         /**
-         * Returns a promise that resolves with this element when it's ready.
+         * Returns a promise that resolves with this element when it's ready. This is the low-level
+         * primitive underlying {@link whenReady}, which is the recommended way to wait for elements.
          * @returns A promise that resolves with this element when it's ready.
          */
         ready() {
             return this._readyPromise.then(() => this);
         }
     }
+    async function whenReady(target) {
+        let element;
+        if (typeof target === 'string') {
+            if (document.readyState === 'loading') {
+                await new Promise((resolve) => {
+                    document.addEventListener('DOMContentLoaded', resolve, { once: true });
+                });
+            }
+            try {
+                element = document.querySelector(target);
+            }
+            catch (_a) {
+                throw new Error(`whenReady: '${target}' is not a valid CSS selector`);
+            }
+            if (!element) {
+                throw new Error(`whenReady: no element found matching '${target}'`);
+            }
+        }
+        else {
+            element = target;
+        }
+        if (!(element instanceof AsyncElement)) {
+            const description = element instanceof Element ? `<${element.tagName.toLowerCase()}>` : String(target);
+            throw new Error(`whenReady: ${description} does not initialize asynchronously`);
+        }
+        await element.ready();
+        return element;
+    }
 
     /**
      * The ModuleElement interface provides properties and methods for manipulating
@@ -74,6 +104,393 @@
     }
     customElements.define('pc-module', ModuleElement);
 
+    const CSS_COLORS = {
+        aliceblue: '#f0f8ff',
+        antiquewhite: '#faebd7',
+        aqua: '#00ffff',
+        aquamarine: '#7fffd4',
+        azure: '#f0ffff',
+        beige: '#f5f5dc',
+        bisque: '#ffe4c4',
+        black: '#000000',
+        blanchedalmond: '#ffebcd',
+        blue: '#0000ff',
+        blueviolet: '#8a2be2',
+        brown: '#a52a2a',
+        burlywood: '#deb887',
+        cadetblue: '#5f9ea0',
+        chartreuse: '#7fff00',
+        chocolate: '#d2691e',
+        coral: '#ff7f50',
+        cornflowerblue: '#6495ed',
+        cornsilk: '#fff8dc',
+        crimson: '#dc143c',
+        cyan: '#00ffff',
+        darkblue: '#00008b',
+        darkcyan: '#008b8b',
+        darkgoldenrod: '#b8860b',
+        darkgray: '#a9a9a9',
+        darkgreen: '#006400',
+        darkgrey: '#a9a9a9',
+        darkkhaki: '#bdb76b',
+        darkmagenta: '#8b008b',
+        darkolivegreen: '#556b2f',
+        darkorange: '#ff8c00',
+        darkorchid: '#9932cc',
+        darkred: '#8b0000',
+        darksalmon: '#e9967a',
+        darkseagreen: '#8fbc8f',
+        darkslateblue: '#483d8b',
+        darkslategray: '#2f4f4f',
+        darkslategrey: '#2f4f4f',
+        darkturquoise: '#00ced1',
+        darkviolet: '#9400d3',
+        deeppink: '#ff1493',
+        deepskyblue: '#00bfff',
+        dimgray: '#696969',
+        dimgrey: '#696969',
+        dodgerblue: '#1e90ff',
+        firebrick: '#b22222',
+        floralwhite: '#fffaf0',
+        forestgreen: '#228b22',
+        fuchsia: '#ff00ff',
+        gainsboro: '#dcdcdc',
+        ghostwhite: '#f8f8ff',
+        gold: '#ffd700',
+        goldenrod: '#daa520',
+        gray: '#808080',
+        green: '#008000',
+        greenyellow: '#adff2f',
+        grey: '#808080',
+        honeydew: '#f0fff0',
+        hotpink: '#ff69b4',
+        indianred: '#cd5c5c',
+        indigo: '#4b0082',
+        ivory: '#fffff0',
+        khaki: '#f0e68c',
+        lavender: '#e6e6fa',
+        lavenderblush: '#fff0f5',
+        lawngreen: '#7cfc00',
+        lemonchiffon: '#fffacd',
+        lightblue: '#add8e6',
+        lightcoral: '#f08080',
+        lightcyan: '#e0ffff',
+        lightgoldenrodyellow: '#fafad2',
+        lightgray: '#d3d3d3',
+        lightgreen: '#90ee90',
+        lightgrey: '#d3d3d3',
+        lightpink: '#ffb6c1',
+        lightsalmon: '#ffa07a',
+        lightseagreen: '#20b2aa',
+        lightskyblue: '#87cefa',
+        lightslategray: '#778899',
+        lightslategrey: '#778899',
+        lightsteelblue: '#b0c4de',
+        lightyellow: '#ffffe0',
+        lime: '#00ff00',
+        limegreen: '#32cd32',
+        linen: '#faf0e6',
+        magenta: '#ff00ff',
+        maroon: '#800000',
+        mediumaquamarine: '#66cdaa',
+        mediumblue: '#0000cd',
+        mediumorchid: '#ba55d3',
+        mediumpurple: '#9370db',
+        mediumseagreen: '#3cb371',
+        mediumslateblue: '#7b68ee',
+        mediumspringgreen: '#00fa9a',
+        mediumturquoise: '#48d1cc',
+        mediumvioletred: '#c71585',
+        midnightblue: '#191970',
+        mintcream: '#f5fffa',
+        mistyrose: '#ffe4e1',
+        moccasin: '#ffe4b5',
+        navajowhite: '#ffdead',
+        navy: '#000080',
+        oldlace: '#fdf5e6',
+        olive: '#808000',
+        olivedrab: '#6b8e23',
+        orange: '#ffa500',
+        orangered: '#ff4500',
+        orchid: '#da70d6',
+        palegoldenrod: '#eee8aa',
+        palegreen: '#98fb98',
+        paleturquoise: '#afeeee',
+        palevioletred: '#db7093',
+        papayawhip: '#ffefd5',
+        peachpuff: '#ffdab9',
+        peru: '#cd853f',
+        pink: '#ffc0cb',
+        plum: '#dda0dd',
+        powderblue: '#b0e0e6',
+        purple: '#800080',
+        rebeccapurple: '#663399',
+        red: '#ff0000',
+        rosybrown: '#bc8f8f',
+        royalblue: '#4169e1',
+        saddlebrown: '#8b4513',
+        salmon: '#fa8072',
+        sandybrown: '#f4a460',
+        seagreen: '#2e8b57',
+        seashell: '#fff5ee',
+        sienna: '#a0522d',
+        silver: '#c0c0c0',
+        skyblue: '#87ceeb',
+        slateblue: '#6a5acd',
+        slategray: '#708090',
+        slategrey: '#708090',
+        snow: '#fffafa',
+        springgreen: '#00ff7f',
+        steelblue: '#4682b4',
+        tan: '#d2b48c',
+        teal: '#008080',
+        thistle: '#d8bfd8',
+        tomato: '#ff6347',
+        turquoise: '#40e0d0',
+        violet: '#ee82ee',
+        wheat: '#f5deb3',
+        white: '#ffffff',
+        whitesmoke: '#f5f5f5',
+        yellow: '#ffff00',
+        yellowgreen: '#9acd32'
+    };
+
+    /**
+     * Parse a boolean attribute value. The same rules apply to every boolean attribute:
+     *
+     * - Attribute absent (or removed): the supplied default is used.
+     * - Attribute set to the string 'false': `false`.
+     * - Attribute present with any other value, including the empty string of a bare boolean
+     *   attribute (e.g. `<pc-light cast-shadows>`): `true`.
+     *
+     * @param value - The attribute value to parse (`null` when the attribute is absent).
+     * @param defaultValue - The value to use when the attribute is absent or removed.
+     * @returns The parsed boolean.
+     */
+    const parseBool = (value, defaultValue) => {
+        return value === null ? defaultValue : value !== 'false';
+    };
+    /**
+     * Splits an attribute value into exactly `count` numeric components. Returns `null` when the
+     * value does not consist of exactly `count` whitespace-separated finite numbers.
+     *
+     * @param value - The value to split.
+     * @param count - The required number of components.
+     * @returns The parsed components, or `null`.
+     * @ignore
+     */
+    const parseComponents = (value, count) => {
+        const components = value.trim().split(/\s+/).map(Number);
+        if (components.length !== count || components.some(component => !Number.isFinite(component))) {
+            return null;
+        }
+        return components;
+    };
+    /**
+     * Clones a math-type default so parsed results never alias the caller's default instance. This
+     * is what makes it safe to pass the engine's shared frozen constants (e.g. `Vec3.ZERO`,
+     * `Color.WHITE`) as defaults.
+     *
+     * @param value - The default value to clone (`null` is passed through).
+     * @returns The cloned value.
+     */
+    const cloneDefault = (value) => {
+        return (value === null ? null : value.clone());
+    };
+    /**
+     * Parse a color attribute value. The expected format is a CSS color name (e.g. 'rebeccapurple'),
+     * a hex color (e.g. '#ff0000' or '#f00'), or 3 or 4 space-separated numbers in the range 0 to 1
+     * (e.g. '1 0.5 0.5' or '1 0.5 0.5 0.5'). Returns `defaultValue` (cloned, when it is a color)
+     * when the attribute is absent (`null`), or when the value is malformed — the latter also logs
+     * a warning.
+     *
+     * @param value - The attribute value to parse (`null` when the attribute is absent).
+     * @param defaultValue - The value to use when the attribute is absent or invalid.
+     * @param attribute - The attribute name, used in the warning message.
+     * @returns The parsed Color object.
+     */
+    const parseColor = (value, defaultValue, attribute) => {
+        var _a;
+        if (value === null) {
+            return cloneDefault(defaultValue);
+        }
+        // A CSS color name (e.g. 'rebeccapurple')
+        const hexColor = CSS_COLORS[value.toLowerCase()];
+        if (hexColor) {
+            return new playcanvas.Color().fromString(hexColor);
+        }
+        // A hex color (e.g. '#ff0000'), expanding short forms (e.g. '#f00') for Color.fromString
+        if (/^#(?:[0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(value)) {
+            let hex = value.slice(1);
+            if (hex.length === 3 || hex.length === 4) {
+                hex = hex.split('').map(char => char + char).join('');
+            }
+            return new playcanvas.Color().fromString(`#${hex}`);
+        }
+        // 3 or 4 space-separated components (e.g. '1 0.5 0.5')
+        const components = (_a = parseComponents(value, 4)) !== null && _a !== void 0 ? _a : parseComponents(value, 3);
+        if (components) {
+            return new playcanvas.Color(components);
+        }
+        console.warn(`Invalid value '${value}' for attribute '${attribute}'. Expected a CSS color name, a hex color or 3 or 4 space-separated numbers. Using '${defaultValue}'.`);
+        return cloneDefault(defaultValue);
+    };
+    /**
+     * Parse an Euler-angles attribute value into a quaternion. The expected format is 3
+     * space-separated angles in degrees (e.g. '0 90 0'). Returns `defaultValue` (cloned, when it is
+     * a quaternion) when the attribute is absent (`null`), or when the value is malformed — the
+     * latter also logs a warning.
+     *
+     * @param value - The attribute value to parse (`null` when the attribute is absent).
+     * @param defaultValue - The value to use when the attribute is absent or invalid.
+     * @param attribute - The attribute name, used in the warning message.
+     * @returns The parsed Quat object.
+     */
+    const parseQuat = (value, defaultValue, attribute) => {
+        if (value === null) {
+            return cloneDefault(defaultValue);
+        }
+        const components = parseComponents(value, 3);
+        if (!components) {
+            console.warn(`Invalid value '${value}' for attribute '${attribute}'. Expected 3 space-separated numbers. Using '${defaultValue}'.`);
+            return cloneDefault(defaultValue);
+        }
+        return new playcanvas.Quat().setFromEulerAngles(components[0], components[1], components[2]);
+    };
+    /**
+     * Parse a Vec2 attribute value. The expected format is 2 space-separated numbers (e.g. '1 2').
+     * Returns `defaultValue` (cloned, when it is a vector) when the attribute is absent (`null`),
+     * or when the value is malformed — the latter also logs a warning.
+     *
+     * @param value - The attribute value to parse (`null` when the attribute is absent).
+     * @param defaultValue - The value to use when the attribute is absent or invalid.
+     * @param attribute - The attribute name, used in the warning message.
+     * @returns The parsed Vec2 object.
+     */
+    const parseVec2 = (value, defaultValue, attribute) => {
+        if (value === null) {
+            return cloneDefault(defaultValue);
+        }
+        const components = parseComponents(value, 2);
+        if (!components) {
+            console.warn(`Invalid value '${value}' for attribute '${attribute}'. Expected 2 space-separated numbers. Using '${defaultValue}'.`);
+            return cloneDefault(defaultValue);
+        }
+        return new playcanvas.Vec2(components);
+    };
+    /**
+     * Parse a Vec3 attribute value. The expected format is 3 space-separated numbers (e.g. '1 2 3').
+     * Returns `defaultValue` (cloned, when it is a vector) when the attribute is absent (`null`),
+     * or when the value is malformed — the latter also logs a warning.
+     *
+     * @param value - The attribute value to parse (`null` when the attribute is absent).
+     * @param defaultValue - The value to use when the attribute is absent or invalid.
+     * @param attribute - The attribute name, used in the warning message.
+     * @returns The parsed Vec3 object.
+     */
+    const parseVec3 = (value, defaultValue, attribute) => {
+        if (value === null) {
+            return cloneDefault(defaultValue);
+        }
+        const components = parseComponents(value, 3);
+        if (!components) {
+            console.warn(`Invalid value '${value}' for attribute '${attribute}'. Expected 3 space-separated numbers. Using '${defaultValue}'.`);
+            return cloneDefault(defaultValue);
+        }
+        return new playcanvas.Vec3(components);
+    };
+    /**
+     * Parse a Vec4 attribute value. The expected format is 4 space-separated numbers
+     * (e.g. '1 2 3 4'). Returns `defaultValue` (cloned, when it is a vector) when the attribute is
+     * absent (`null`), or when the value is malformed — the latter also logs a warning.
+     *
+     * @param value - The attribute value to parse (`null` when the attribute is absent).
+     * @param defaultValue - The value to use when the attribute is absent or invalid.
+     * @param attribute - The attribute name, used in the warning message.
+     * @returns The parsed Vec4 object.
+     */
+    const parseVec4 = (value, defaultValue, attribute) => {
+        if (value === null) {
+            return cloneDefault(defaultValue);
+        }
+        const components = parseComponents(value, 4);
+        if (!components) {
+            console.warn(`Invalid value '${value}' for attribute '${attribute}'. Expected 4 space-separated numbers. Using '${defaultValue}'.`);
+            return cloneDefault(defaultValue);
+        }
+        return new playcanvas.Vec4(components);
+    };
+    /**
+     * Resolves an enum attribute value against its set of valid names. Returns the value when it is
+     * one of the valid names. Returns `defaultValue` when the attribute is absent (`null`), or when
+     * the value is invalid — the latter also logs a warning listing the valid names.
+     *
+     * @param value - The attribute value to parse (`null` when the attribute is absent).
+     * @param valid - The valid names: an array, or a map whose keys are the valid names.
+     * @param defaultValue - The value to use when the attribute is absent or invalid.
+     * @param attribute - The attribute name, used in the warning message.
+     * @returns The resolved enum name.
+     */
+    const parseEnum = (value, valid, defaultValue, attribute) => {
+        if (value === null) {
+            return defaultValue;
+        }
+        const names = Array.isArray(valid) ? valid : [...valid.keys()];
+        if (names.includes(value)) {
+            return value;
+        }
+        console.warn(`Invalid value '${value}' for attribute '${attribute}'. Valid values: ${names.join(', ')}. Using '${defaultValue}'.`);
+        return defaultValue;
+    };
+    /**
+     * Parses a number attribute value. Returns the parsed number when the value is a finite number.
+     * Returns `defaultValue` when the attribute is absent (`null`), or when the value is not a
+     * finite number — the latter also logs a warning.
+     *
+     * @param value - The attribute value to parse (`null` when the attribute is absent).
+     * @param defaultValue - The value to use when the attribute is absent or invalid.
+     * @param attribute - The attribute name, used in the warning message.
+     * @returns The parsed number.
+     */
+    const parseNumber = (value, defaultValue, attribute) => {
+        if (value === null) {
+            return defaultValue;
+        }
+        const number = value.trim() === '' ? NaN : Number(value);
+        if (!Number.isFinite(number)) {
+            console.warn(`Invalid value '${value}' for attribute '${attribute}'. Expected a finite number. Using '${defaultValue}'.`);
+            return defaultValue;
+        }
+        return number;
+    };
+    /**
+     * Resolves a reference string to the {@link Entity} backing a `<pc-entity>` element. The reference
+     * can be a CSS selector (e.g. `#my-id`, `pc-entity[name="Foo"]`), a bare element id, or a bare
+     * entity name. Returns `null` if no matching element (or backing entity) is found.
+     *
+     * @param ref - The reference string to resolve.
+     * @returns The resolved entity, or `null`.
+     */
+    const getEntity = (ref) => {
+        var _a, _b;
+        if (!ref) {
+            return null;
+        }
+        let element = null;
+        // Try the reference as a CSS selector. An invalid selector (e.g. a bare name containing
+        // spaces) throws, in which case we fall back to id/name lookups below.
+        try {
+            element = document.querySelector(ref);
+        }
+        catch (_c) {
+            element = null;
+        }
+        if (!element) {
+            element = (_a = document.getElementById(ref)) !== null && _a !== void 0 ? _a : document.querySelector(`pc-entity[name="${ref}"]`);
+        }
+        return (_b = element === null || element === void 0 ? void 0 : element.entity) !== null && _b !== void 0 ? _b : null;
+    };
+
     /**
      * The AppElement interface provides properties and methods for manipulating
      * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-app/ | `<pc-app>`} elements.
@@ -81,6 +498,14 @@
      * {@link HTMLElement} interface.
      */
     class AppElement extends AsyncElement {
+        /**
+         * The PlayCanvas application instance. Available once the element is ready — await
+         * {@link whenReady} or the element's `ready()` promise before accessing it.
+         * @returns The application instance.
+         */
+        get app() {
+            return this._app;
+        }
         /**
          * Creates a new AppElement instance.
          *
@@ -113,10 +538,7 @@
                 pointerdown: null,
                 pointerup: null
             };
-            /**
-             * The PlayCanvas application instance.
-             */
-            this.app = null;
+            this._app = null;
             // Bind methods to maintain 'this' context
             this._onWindowResize = this._onWindowResize.bind(this);
         }
@@ -208,7 +630,7 @@
             createOptions.lightmapper = playcanvas.Lightmapper;
             createOptions.batchManager = playcanvas.BatchManager;
             createOptions.xr = playcanvas.XrManager;
-            this.app = new playcanvas.AppBase(this._canvas);
+            this._app = new playcanvas.AppBase(this._canvas);
             this.app.init(createOptions);
             this.app.setCanvasFillMode(playcanvas.FILLMODE_FILL_WINDOW);
             this.app.setCanvasResolution(playcanvas.RESOLUTION_AUTO);
@@ -251,7 +673,7 @@
             // Clean up the application
             if (this.app) {
                 this.app.destroy();
-                this.app = null;
+                this._app = null;
             }
             // Remove event listeners
             window.removeEventListener('resize', this._onWindowResize);
@@ -277,6 +699,13 @@
             ['pointermove', 'pointerdown', 'pointerup', 'pointerenter', 'pointerleave'].forEach((type) => {
                 this.addEventListener(`${type}:connect`, () => this._onPointerListenerAdded(type));
                 this.addEventListener(`${type}:disconnect`, () => this._onPointerListenerRemoved(type));
+                // Attach canvas handlers for listeners registered before this point (e.g. handlers
+                // created from onpointer* attributes when their elements were first upgraded)
+                const anyListeners = Array.from(this.querySelectorAll('pc-entity'))
+                    .some(entity => entity.hasListeners(type));
+                if (anyListeners) {
+                    this._onPointerListenerAdded(type);
+                }
             });
         }
         _pickerDestroy() {
@@ -293,6 +722,13 @@
                 pointerdown: null,
                 pointerup: null
             };
+            this._hasPointerListeners = {
+                pointerenter: false,
+                pointerleave: false,
+                pointerdown: false,
+                pointerup: false,
+                pointermove: false
+            };
         }
         // New helper to convert CSS coordinates to canvas (picker) coordinates
         _getPickerCoordinates(event) {
@@ -477,324 +913,65 @@
         get hierarchyReady() {
             return this._hierarchyReady;
         }
-        /**
-         * Sets the high resolution flag. When true, the application will render at the device's
-         * physical resolution. When false, the application will render at CSS resolution.
-         * @param value - The high resolution flag.
-         */
-        set highResolution(value) {
-            this._highResolution = value;
-            if (this.app) {
-                this.app.graphicsDevice.maxPixelRatio = value ? window.devicePixelRatio : 1;
-            }
-        }
-        /**
-         * Gets the high resolution flag.
-         * @returns The high resolution flag.
-         */
-        get highResolution() {
-            return this._highResolution;
-        }
-        /**
-         * Sets the stencil flag.
-         * @param value - The stencil flag.
-         */
-        set stencil(value) {
-            this._stencil = value;
-        }
-        /**
-         * Gets the stencil flag.
-         * @returns The stencil flag.
-         */
-        get stencil() {
-            return this._stencil;
-        }
-        static get observedAttributes() {
-            return ['alpha', 'antialias', 'backend', 'depth', 'stencil', 'high-resolution'];
-        }
-        attributeChangedCallback(name, _oldValue, newValue) {
-            switch (name) {
-                case 'alpha':
-                    this.alpha = newValue !== 'false';
-                    break;
-                case 'antialias':
-                    this.antialias = newValue !== 'false';
-                    break;
-                case 'backend':
-                    if (newValue === 'webgpu' || newValue === 'webgl2' || newValue === 'null') {
-                        this.backend = newValue;
-                    }
-                    break;
-                case 'depth':
-                    this.depth = newValue !== 'false';
-                    break;
-                case 'high-resolution':
-                    this.highResolution = newValue !== 'false';
-                    break;
-                case 'stencil':
-                    this.stencil = newValue !== 'false';
-                    break;
-            }
-        }
-    }
-    customElements.define('pc-app', AppElement);
-
-    const CSS_COLORS = {
-        aliceblue: '#f0f8ff',
-        antiquewhite: '#faebd7',
-        aqua: '#00ffff',
-        aquamarine: '#7fffd4',
-        azure: '#f0ffff',
-        beige: '#f5f5dc',
-        bisque: '#ffe4c4',
-        black: '#000000',
-        blanchedalmond: '#ffebcd',
-        blue: '#0000ff',
-        blueviolet: '#8a2be2',
-        brown: '#a52a2a',
-        burlywood: '#deb887',
-        cadetblue: '#5f9ea0',
-        chartreuse: '#7fff00',
-        chocolate: '#d2691e',
-        coral: '#ff7f50',
-        cornflowerblue: '#6495ed',
-        cornsilk: '#fff8dc',
-        crimson: '#dc143c',
-        cyan: '#00ffff',
-        darkblue: '#00008b',
-        darkcyan: '#008b8b',
-        darkgoldenrod: '#b8860b',
-        darkgray: '#a9a9a9',
-        darkgreen: '#006400',
-        darkgrey: '#a9a9a9',
-        darkkhaki: '#bdb76b',
-        darkmagenta: '#8b008b',
-        darkolivegreen: '#556b2f',
-        darkorange: '#ff8c00',
-        darkorchid: '#9932cc',
-        darkred: '#8b0000',
-        darksalmon: '#e9967a',
-        darkseagreen: '#8fbc8f',
-        darkslateblue: '#483d8b',
-        darkslategray: '#2f4f4f',
-        darkslategrey: '#2f4f4f',
-        darkturquoise: '#00ced1',
-        darkviolet: '#9400d3',
-        deeppink: '#ff1493',
-        deepskyblue: '#00bfff',
-        dimgray: '#696969',
-        dimgrey: '#696969',
-        dodgerblue: '#1e90ff',
-        firebrick: '#b22222',
-        floralwhite: '#fffaf0',
-        forestgreen: '#228b22',
-        fuchsia: '#ff00ff',
-        gainsboro: '#dcdcdc',
-        ghostwhite: '#f8f8ff',
-        gold: '#ffd700',
-        goldenrod: '#daa520',
-        gray: '#808080',
-        green: '#008000',
-        greenyellow: '#adff2f',
-        grey: '#808080',
-        honeydew: '#f0fff0',
-        hotpink: '#ff69b4',
-        indianred: '#cd5c5c',
-        indigo: '#4b0082',
-        ivory: '#fffff0',
-        khaki: '#f0e68c',
-        lavender: '#e6e6fa',
-        lavenderblush: '#fff0f5',
-        lawngreen: '#7cfc00',
-        lemonchiffon: '#fffacd',
-        lightblue: '#add8e6',
-        lightcoral: '#f08080',
-        lightcyan: '#e0ffff',
-        lightgoldenrodyellow: '#fafad2',
-        lightgray: '#d3d3d3',
-        lightgreen: '#90ee90',
-        lightgrey: '#d3d3d3',
-        lightpink: '#ffb6c1',
-        lightsalmon: '#ffa07a',
-        lightseagreen: '#20b2aa',
-        lightskyblue: '#87cefa',
-        lightslategray: '#778899',
-        lightslategrey: '#778899',
-        lightsteelblue: '#b0c4de',
-        lightyellow: '#ffffe0',
-        lime: '#00ff00',
-        limegreen: '#32cd32',
-        linen: '#faf0e6',
-        magenta: '#ff00ff',
-        maroon: '#800000',
-        mediumaquamarine: '#66cdaa',
-        mediumblue: '#0000cd',
-        mediumorchid: '#ba55d3',
-        mediumpurple: '#9370db',
-        mediumseagreen: '#3cb371',
-        mediumslateblue: '#7b68ee',
-        mediumspringgreen: '#00fa9a',
-        mediumturquoise: '#48d1cc',
-        mediumvioletred: '#c71585',
-        midnightblue: '#191970',
-        mintcream: '#f5fffa',
-        mistyrose: '#ffe4e1',
-        moccasin: '#ffe4b5',
-        navajowhite: '#ffdead',
-        navy: '#000080',
-        oldlace: '#fdf5e6',
-        olive: '#808000',
-        olivedrab: '#6b8e23',
-        orange: '#ffa500',
-        orangered: '#ff4500',
-        orchid: '#da70d6',
-        palegoldenrod: '#eee8aa',
-        palegreen: '#98fb98',
-        paleturquoise: '#afeeee',
-        palevioletred: '#db7093',
-        papayawhip: '#ffefd5',
-        peachpuff: '#ffdab9',
-        peru: '#cd853f',
-        pink: '#ffc0cb',
-        plum: '#dda0dd',
-        powderblue: '#b0e0e6',
-        purple: '#800080',
-        rebeccapurple: '#663399',
-        red: '#ff0000',
-        rosybrown: '#bc8f8f',
-        royalblue: '#4169e1',
-        saddlebrown: '#8b4513',
-        salmon: '#fa8072',
-        sandybrown: '#f4a460',
-        seagreen: '#2e8b57',
-        seashell: '#fff5ee',
-        sienna: '#a0522d',
-        silver: '#c0c0c0',
-        skyblue: '#87ceeb',
-        slateblue: '#6a5acd',
-        slategray: '#708090',
-        slategrey: '#708090',
-        snow: '#fffafa',
-        springgreen: '#00ff7f',
-        steelblue: '#4682b4',
-        tan: '#d2b48c',
-        teal: '#008080',
-        thistle: '#d8bfd8',
-        tomato: '#ff6347',
-        turquoise: '#40e0d0',
-        violet: '#ee82ee',
-        wheat: '#f5deb3',
-        white: '#ffffff',
-        whitesmoke: '#f5f5f5',
-        yellow: '#ffff00',
-        yellowgreen: '#9acd32'
-    };
-
-    /**
-     * 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) => {
-        // Check if it's a CSS color name first
-        const hexColor = CSS_COLORS[value.toLowerCase()];
-        if (hexColor) {
-            return new playcanvas.Color().fromString(hexColor);
-        }
-        if (value.startsWith('#')) {
-            return new playcanvas.Color().fromString(value);
-        }
-        const components = value.split(' ').map(Number);
-        return new playcanvas.Color(components);
-    };
-    /**
-     * Parse an Euler angles string into a Quat object. String can be in the format of 'x,y,z'.
-     *
-     * @param value - The Euler angles string to parse.
-     * @returns The parsed Quat object.
-     */
-    const parseQuat = (value) => {
-        const [x, y, z] = value.split(' ').map(Number);
-        const q = new playcanvas.Quat();
-        q.setFromEulerAngles(x, y, z);
-        return q;
-    };
-    /**
-     * 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);
-    };
-    /**
-     * Resolves an enum value supplied as either a named string (looked up in `map`) or a numeric
-     * string. Falls back to `defaultValue` when the value is neither a known name nor a finite number.
-     *
-     * @param value - The attribute value to parse.
-     * @param map - A map of named values to their numeric enum equivalents.
-     * @param defaultValue - The value to return when parsing fails.
-     * @returns The resolved numeric enum value.
-     */
-    const parseEnum = (value, map, defaultValue) => {
-        const named = map.get(value);
-        if (named !== undefined) {
-            return named;
-        }
-        const numeric = Number(value);
-        return Number.isFinite(numeric) ? numeric : defaultValue;
-    };
-    /**
-     * Resolves a reference string to the {@link Entity} backing a `<pc-entity>` element. The reference
-     * can be a CSS selector (e.g. `#my-id`, `pc-entity[name="Foo"]`), a bare element id, or a bare
-     * entity name. Returns `null` if no matching element (or backing entity) is found.
-     *
-     * @param ref - The reference string to resolve.
-     * @returns The resolved entity, or `null`.
-     */
-    const getEntity = (ref) => {
-        var _a, _b;
-        if (!ref) {
-            return null;
+        /**
+         * Sets the high resolution flag. When true, the application will render at the device's
+         * physical resolution. When false, the application will render at CSS resolution.
+         * @param value - The high resolution flag.
+         */
+        set highResolution(value) {
+            this._highResolution = value;
+            if (this.app) {
+                this.app.graphicsDevice.maxPixelRatio = value ? window.devicePixelRatio : 1;
+            }
         }
-        let element = null;
-        // Try the reference as a CSS selector. An invalid selector (e.g. a bare name containing
-        // spaces) throws, in which case we fall back to id/name lookups below.
-        try {
-            element = document.querySelector(ref);
+        /**
+         * Gets the high resolution flag.
+         * @returns The high resolution flag.
+         */
+        get highResolution() {
+            return this._highResolution;
         }
-        catch (_c) {
-            element = null;
+        /**
+         * Sets the stencil flag.
+         * @param value - The stencil flag.
+         */
+        set stencil(value) {
+            this._stencil = value;
         }
-        if (!element) {
-            element = (_a = document.getElementById(ref)) !== null && _a !== void 0 ? _a : document.querySelector(`pc-entity[name="${ref}"]`);
+        /**
+         * Gets the stencil flag.
+         * @returns The stencil flag.
+         */
+        get stencil() {
+            return this._stencil;
         }
-        return (_b = element === null || element === void 0 ? void 0 : element.entity) !== null && _b !== void 0 ? _b : null;
-    };
+        static get observedAttributes() {
+            return ['alpha', 'antialias', 'backend', 'depth', 'stencil', 'high-resolution'];
+        }
+        attributeChangedCallback(name, _oldValue, newValue) {
+            switch (name) {
+                case 'alpha':
+                    this.alpha = parseBool(newValue, true);
+                    break;
+                case 'antialias':
+                    this.antialias = parseBool(newValue, true);
+                    break;
+                case 'backend':
+                    this.backend = parseEnum(newValue, ['webgpu', 'webgl2', 'null'], 'webgl2', name);
+                    break;
+                case 'depth':
+                    this.depth = parseBool(newValue, true);
+                    break;
+                case 'high-resolution':
+                    this.highResolution = parseBool(newValue, true);
+                    break;
+                case 'stencil':
+                    this.stencil = parseBool(newValue, true);
+                    break;
+            }
+        }
+    }
+    customElements.define('pc-app', AppElement);
 
     /**
      * The EntityElement interface provides properties and methods for manipulating
@@ -834,67 +1011,41 @@
              */
             this._listeners = {};
             /**
-             * Whether the hierarchy has been built for this entity.
+             * The event types for which an inline `onpointer*` attribute is currently present.
              */
-            this._built = false;
+            this._inlineHandlerTypes = new Set();
             /**
-             * The PlayCanvas entity instance.
+             * Whether the hierarchy has been built for this entity.
              */
-            this.entity = null;
+            this._built = false;
+            this._entity = null;
+        }
+        /**
+         * The PlayCanvas entity instance. Available once the element is ready — await
+         * {@link whenReady} or the element's `ready()` promise before accessing it.
+         * @returns The entity instance.
+         */
+        get entity() {
+            return this._entity;
         }
         createEntity(app) {
             // Guard against double creation. When a subtree is inserted at runtime (e.g. cloning a
             // `<template>`), an ancestor's connectedCallback eagerly creates descendant entities; the
             // descendants' own connectedCallbacks would otherwise create them a second time.
-            if (this.entity) {
+            if (this._entity) {
                 return;
             }
             // Create a new entity
-            this.entity = new playcanvas.Entity(this.getAttribute('name') || this._name, app);
-            const enabled = this.getAttribute('enabled');
-            if (enabled) {
-                this.entity.enabled = enabled !== 'false';
-            }
-            const position = this.getAttribute('position');
-            if (position) {
-                this.entity.setLocalPosition(parseVec3(position));
-            }
-            const rotation = this.getAttribute('rotation');
-            if (rotation) {
-                this.entity.setLocalEulerAngles(parseVec3(rotation));
-            }
-            const scale = this.getAttribute('scale');
-            if (scale) {
-                this.entity.setLocalScale(parseVec3(scale));
-            }
+            const entity = new playcanvas.Entity(this.getAttribute('name') || this._name, app);
+            this._entity = entity;
+            entity.enabled = parseBool(this.getAttribute('enabled'), true);
+            entity.setLocalPosition(parseVec3(this.getAttribute('position'), playcanvas.Vec3.ZERO, 'position'));
+            entity.setLocalEulerAngles(parseVec3(this.getAttribute('rotation'), playcanvas.Vec3.ZERO, 'rotation'));
+            entity.setLocalScale(parseVec3(this.getAttribute('scale'), playcanvas.Vec3.ONE, 'scale'));
             const tags = this.getAttribute('tags');
             if (tags) {
-                this.entity.tags.add(tags.split(',').map(tag => tag.trim()));
+                entity.tags.add(tags.split(',').map(tag => tag.trim()));
             }
-            // Handle pointer events
-            const pointerEvents = [
-                'onpointerenter',
-                'onpointerleave',
-                'onpointerdown',
-                'onpointerup',
-                'onpointermove'
-            ];
-            pointerEvents.forEach((eventName) => {
-                const handler = this.getAttribute(eventName);
-                if (handler) {
-                    const eventType = eventName.substring(2); // remove 'on' prefix
-                    const eventHandler = (event) => {
-                        try {
-                            /* eslint-disable-next-line no-new-func */
-                            new Function('event', handler).call(this, event);
-                        }
-                        catch (e) {
-                            console.error('Error in event handler:', e);
-                        }
-                    };
-                    this.addEventListener(eventType, eventHandler);
-                }
-            });
         }
         buildHierarchy(app) {
             if (!this.entity || this._built)
@@ -934,11 +1085,11 @@
                 // Notify all children that their entities are about to become invalid
                 const children = this.querySelectorAll('pc-entity');
                 children.forEach((child) => {
-                    child.entity = null;
+                    child._entity = null;
                 });
                 // Destroy the entity
                 this.entity.destroy();
-                this.entity = null;
+                this._entity = null;
                 this._built = false;
             }
         }
@@ -1045,6 +1196,30 @@
         get tags() {
             return this._tags;
         }
+        /**
+         * Tracks whether an inline `onpointer*` attribute is present. The browser itself compiles and
+         * runs these attributes — they are standard `GlobalEventHandlers`, so setting one replaces
+         * the previous handler and removing it removes the handler, exactly like `onclick` on any
+         * HTML element. But because they bypass {@link addEventListener}, the connect/disconnect
+         * bookkeeping that lets the application lazily attach its canvas pointer handlers must be
+         * kept in sync here.
+         *
+         * @param name - The attribute name (e.g. 'onpointerdown').
+         * @param value - The attribute value, or `null` when the attribute has been removed.
+         */
+        _updateInlineHandler(name, value) {
+            const type = name.substring(2);
+            const had = this._inlineHandlerTypes.has(type);
+            const has = value !== null;
+            if (has && !had) {
+                this._inlineHandlerTypes.add(type);
+                this.dispatchEvent(new CustomEvent(`${type}:connect`, { bubbles: true }));
+            }
+            else if (!has && had) {
+                this._inlineHandlerTypes.delete(type);
+                this.dispatchEvent(new CustomEvent(`${type}:disconnect`, { bubbles: true }));
+            }
+        }
         static get observedAttributes() {
             return [
                 'enabled',
@@ -1063,19 +1238,19 @@
         attributeChangedCallback(name, _oldValue, newValue) {
             switch (name) {
                 case 'enabled':
-                    this.enabled = newValue !== 'false';
+                    this.enabled = parseBool(newValue, true);
                     break;
                 case 'name':
                     this.name = newValue;
                     break;
                 case 'position':
-                    this.position = parseVec3(newValue);
+                    this.position = parseVec3(newValue, playcanvas.Vec3.ZERO, name);
                     break;
                 case 'rotation':
-                    this.rotation = parseVec3(newValue);
+                    this.rotation = parseVec3(newValue, playcanvas.Vec3.ZERO, name);
                     break;
                 case 'scale':
-                    this.scale = parseVec3(newValue);
+                    this.scale = parseVec3(newValue, playcanvas.Vec3.ONE, name);
                     break;
                 case 'tags':
                     this.tags = newValue.split(',').map(tag => tag.trim());
@@ -1085,21 +1260,7 @@
                 case 'onpointerdown':
                 case 'onpointerup':
                 case 'onpointermove':
-                    if (newValue) {
-                        const eventName = name.substring(2);
-                        // Use Function.prototype.bind to avoid new Function
-                        const handler = (event) => {
-                            try {
-                                const handlerStr = this.getAttribute(eventName) || '';
-                                /* eslint-disable-next-line no-new-func */
-                                new Function('event', handlerStr).call(this, event);
-                            }
-                            catch (e) {
-                                console.error('Error in event handler:', e);
-                            }
-                        };
-                        this.addEventListener(eventName, handler);
-                    }
+                    this._updateInlineHandler(name, newValue);
                     break;
             }
         }
@@ -1124,7 +1285,7 @@
         }
         hasListeners(type) {
             var _a;
-            return Boolean((_a = this._listeners[type]) === null || _a === void 0 ? void 0 : _a.length);
+            return Boolean((_a = this._listeners[type]) === null || _a === void 0 ? void 0 : _a.length) || this._inlineHandlerTypes.has(type);
         }
     }
     customElements.define('pc-entity', EntityElement);
@@ -1356,16 +1517,57 @@
      * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-asset/ | `<pc-asset>`} elements.
      * The AssetElement interface also inherits the properties and methods of the
      * {@link HTMLElement} interface.
+     *
+     * The element becomes ready once the containing application has started and the asset is in the
+     * state declared by the markup: loaded for preloaded assets (even if loading failed — check the
+     * asset's `resource`), or registered and awaiting a load for `lazy` assets. Elements inserted
+     * while the application is running are created and registered on insertion, and begin loading
+     * immediately unless `lazy`. A `pc-asset` must be a direct child of `pc-app` — elements placed
+     * elsewhere, or with an unsupported asset type, never become ready.
      */
-    class AssetElement extends HTMLElement {
+    class AssetElement extends AsyncElement {
         constructor() {
             super(...arguments);
             this._lazy = false;
             /**
-             * The asset that is loaded.
+             * The asset that is loaded. Available once the element is ready — await
+             * {@link whenReady} or the element's `ready()` promise before accessing it.
              */
             this.asset = null;
         }
+        async connectedCallback() {
+            var _a;
+            const appElement = this.closestApp;
+            if (!appElement)
+                return;
+            // Assets must be direct children of pc-app (matches the boot query ':scope > pc-asset')
+            if (this.parentElement !== appElement) {
+                console.warn(`pc-asset '${(_a = this.getAttribute('id')) !== null && _a !== void 0 ? _a : this.getAttribute('src')}' must be a direct child of pc-app - asset not created`);
+                return;
+            }
+            await appElement.ready();
+            // The element may have been removed or re-parented while waiting for the app
+            if (!this.isConnected || this.parentElement !== appElement)
+                return;
+            // Assets present at startup are created by AppElement's boot; this branch handles
+            // elements inserted (or re-inserted) after the app is already running
+            if (!this.asset) {
+                const app = appElement.app;
+                if (!app)
+                    return; // pc-app is re-connecting; its own boot will create this asset
+                this.createAsset();
+                if (this.asset) {
+                    app.assets.add(this.asset); // add() auto-loads when preload is true
+                    if (!this.lazy) {
+                        app.assets.load(this.asset);
+                    }
+                }
+            }
+            // Never ready if createAsset failed (unsupported asset type)
+            if (this.asset) {
+                this._onReady();
+            }
+        }
         disconnectedCallback() {
             this.destroyAsset();
         }
@@ -1444,11 +1646,11 @@
                 }
                 const pixelsPerUnit = this.getAttribute('pixels-per-unit');
                 if (pixelsPerUnit !== null) {
-                    data.pixelsPerUnit = Number(pixelsPerUnit);
+                    data.pixelsPerUnit = parseNumber(pixelsPerUnit, 1, 'pixels-per-unit');
                 }
                 const renderMode = this.getAttribute('render-mode');
                 if (renderMode !== null) {
-                    data.renderMode = parseEnum(renderMode, renderModes, playcanvas.SPRITE_RENDERMODE_SIMPLE);
+                    data.renderMode = renderModes.get(parseEnum(renderMode, renderModes, 'simple', 'render-mode'));
                 }
                 // Apply engine defaults for any values not supplied.
                 data.renderMode = (_b = data.renderMode) !== null && _b !== void 0 ? _b : playcanvas.SPRITE_RENDERMODE_SIMPLE;
@@ -1458,7 +1660,10 @@
             return data;
         }
         destroyAsset() {
+            var _a;
             if (this.asset) {
+                // Deregister first so unload() can still notify the registry
+                (_a = this.asset.registry) === null || _a === void 0 ? void 0 : _a.remove(this.asset);
                 this.asset.unload();
                 this.asset = null;
             }
@@ -1487,9 +1692,9 @@
         static get observedAttributes() {
             return ['lazy'];
         }
-        attributeChangedCallback(name, _oldValue, _newValue) {
+        attributeChangedCallback(name, _oldValue, newValue) {
             if (name === 'lazy') {
-                this.lazy = this.hasAttribute('lazy');
+                this.lazy = parseBool(newValue, false);
             }
         }
     }
@@ -1511,6 +1716,7 @@
             super();
             this._enabled = true;
             this._component = null;
+            this._appElement = null;
             this._componentName = componentName;
         }
         // Method to be overridden by subclasses to provide initial component data
@@ -1519,28 +1725,43 @@
         }
         async addComponent() {
             const entityElement = this.closestEntity;
-            if (entityElement) {
-                await entityElement.ready();
-                // Add the component to the entity
-                const data = this.getInitialComponentData();
-                this._component = entityElement.entity.addComponent(this._componentName, data);
+            if (!entityElement) {
+                // A component can only exist on an entity, so an element placed outside one is inert.
+                // It still becomes ready (with a null `component`), so warn rather than fail silently
+                const label = this.id ? ` '${this.id}'` : '';
+                console.warn(`${this.tagName.toLowerCase()}${label} must be a descendant of pc-entity - component not added`);
+                return;
             }
+            await entityElement.ready();
+            // Add the component to the entity
+            const data = this.getInitialComponentData();
+            this._component = entityElement.entity.addComponent(this._componentName, data);
         }
         initComponent() { }
         async connectedCallback() {
-            var _a;
-            await ((_a = this.closestApp) === null || _a === void 0 ? void 0 : _a.ready());
+            var _a, _b;
+            this._appElement = (_a = this.closestApp) !== null && _a !== void 0 ? _a : null;
+            await ((_b = this._appElement) === null || _b === void 0 ? void 0 : _b.ready());
             await this.addComponent();
             this.initComponent();
             this._onReady();
         }
         disconnectedCallback() {
-            // Remove the component when the element is disconnected
-            if (this.component && this.component.entity) {
+            var _a, _b;
+            // Remove the component when the element is disconnected. Skip this when the owning
+            // application has already been destroyed — removing a <pc-app> disconnects it before
+            // its children, taking the component systems with it.
+            if (((_a = this._appElement) === null || _a === void 0 ? void 0 : _a.app) && ((_b = this._component) === null || _b === void 0 ? void 0 : _b.entity)) {
                 this._component.entity.removeComponent(this._componentName);
-                this._component = null;
             }
+            this._component = null;
+            this._appElement = null;
         }
+        /**
+         * The PlayCanvas component instance. Available once the element is ready — await
+         * {@link whenReady} or the element's `ready()` promise before accessing it.
+         * @returns The component instance.
+         */
         get component() {
             return this._component;
         }
@@ -1567,7 +1788,7 @@
         attributeChangedCallback(name, _oldValue, newValue) {
             switch (name) {
                 case 'enabled':
-                    this.enabled = newValue !== 'false';
+                    this.enabled = parseBool(newValue, true);
                     break;
             }
         }
@@ -1615,7 +1836,7 @@
             this._active = true;
             this._image = '';
             this._hitPadding = new playcanvas.Vec4(0, 0, 0, 0);
-            this._transitionMode = playcanvas.BUTTON_TRANSITION_MODE_TINT;
+            this._transitionMode = 'tint';
             this._hoverTint = new playcanvas.Color(1, 1, 1, 1);
             this._pressedTint = new playcanvas.Color(1, 1, 1, 1);
             this._inactiveTint = new playcanvas.Color(1, 1, 1, 1);
@@ -1632,7 +1853,7 @@
             const data = {
                 active: this._active,
                 hitPadding: this._hitPadding,
-                transitionMode: this._transitionMode,
+                transitionMode: transitionModes.get(this._transitionMode),
                 hoverTint: this._hoverTint,
                 pressedTint: this._pressedTint,
                 inactiveTint: this._inactiveTint,
@@ -1722,13 +1943,15 @@
             return this._hitPadding;
         }
         /**
-         * Sets how the button reacts to being hovered/pressed. Can be `tint` (0) or `sprite` (1).
+         * Sets how the button reacts to being hovered/pressed. Can be `tint` or `sprite`. Defaults to
+         * `tint`.
          * @param value - The transition mode.
          */
         set transitionMode(value) {
+            var _a;
             this._transitionMode = value;
             if (this.component) {
-                this.component.transitionMode = value;
+                this.component.transitionMode = (_a = transitionModes.get(value)) !== null && _a !== void 0 ? _a : playcanvas.BUTTON_TRANSITION_MODE_TINT;
             }
         }
         /**
@@ -1940,46 +2163,46 @@
             super.attributeChangedCallback(name, _oldValue, newValue);
             switch (name) {
                 case 'active':
-                    this.active = newValue !== 'false';
+                    this.active = parseBool(newValue, true);
                     break;
                 case 'image':
                     this.image = newValue;
                     break;
                 case 'hit-padding':
-                    this.hitPadding = parseVec4(newValue);
+                    this.hitPadding = parseVec4(newValue, playcanvas.Vec4.ZERO, name);
                     break;
                 case 'transition-mode':
-                    this.transitionMode = parseEnum(newValue, transitionModes, playcanvas.BUTTON_TRANSITION_MODE_TINT);
+                    this.transitionMode = parseEnum(newValue, transitionModes, 'tint', name);
                     break;
                 case 'hover-tint':
-                    this.hoverTint = parseColor(newValue);
+                    this.hoverTint = parseColor(newValue, playcanvas.Color.WHITE, name);
                     break;
                 case 'pressed-tint':
-                    this.pressedTint = parseColor(newValue);
+                    this.pressedTint = parseColor(newValue, playcanvas.Color.WHITE, name);
                     break;
                 case 'inactive-tint':
-                    this.inactiveTint = parseColor(newValue);
+                    this.inactiveTint = parseColor(newValue, playcanvas.Color.WHITE, name);
                     break;
                 case 'fade-duration':
-                    this.fadeDuration = Number(newValue);
+                    this.fadeDuration = parseNumber(newValue, 0, name);
                     break;
                 case 'hover-sprite-asset':
                     this.hoverSpriteAsset = newValue;
                     break;
                 case 'hover-sprite-frame':
-                    this.hoverSpriteFrame = Number(newValue);
+                    this.hoverSpriteFrame = parseNumber(newValue, 0, name);
                     break;
                 case 'pressed-sprite-asset':
                     this.pressedSpriteAsset = newValue;
                     break;
                 case 'pressed-sprite-frame':
-                    this.pressedSpriteFrame = Number(newValue);
+                    this.pressedSpriteFrame = parseNumber(newValue, 0, name);
                     break;
                 case 'inactive-sprite-asset':
                     this.inactiveSpriteAsset = newValue;
                     break;
                 case 'inactive-sprite-frame':
-                    this.inactiveSpriteFrame = Number(newValue);
+                    this.inactiveSpriteFrame = parseNumber(newValue, 0, name);
                     break;
             }
         }
@@ -2040,7 +2263,7 @@
                 gammaCorrection: this._gamma === 'srgb' ? playcanvas.GAMMA_SRGB : playcanvas.GAMMA_NONE,
                 horizontalFov: this._horizontalFov,
                 nearClip: this._nearClip,
-                orthographic: this._orthographic,
+                projection: this._orthographic ? playcanvas.PROJECTION_ORTHOGRAPHIC : playcanvas.PROJECTION_PERSPECTIVE,
                 orthoHeight: this._orthoHeight,
                 priority: this._priority,
                 rect: this._rect,
@@ -2418,58 +2641,58 @@
             super.attributeChangedCallback(name, _oldValue, newValue);
             switch (name) {
                 case 'clear-color':
-                    this.clearColor = parseColor(newValue);
+                    this.clearColor = parseColor(newValue, new playcanvas.Color(0.75, 0.75, 0.75, 1), name);
                     break;
                 case 'clear-color-buffer':
-                    this.clearColorBuffer = newValue !== 'false';
+                    this.clearColorBuffer = parseBool(newValue, true);
                     break;
                 case 'clear-depth-buffer':
-                    this.clearDepthBuffer = newValue !== 'false';
+                    this.clearDepthBuffer = parseBool(newValue, true);
                     break;
                 case 'clear-stencil-buffer':
-                    this.clearStencilBuffer = newValue !== 'false';
+                    this.clearStencilBuffer = parseBool(newValue, false);
                     break;
                 case 'cull-faces':
-                    this.cullFaces = newValue !== 'false';
+                    this.cullFaces = parseBool(newValue, true);
                     break;
                 case 'far-clip':
-                    this.farClip = parseFloat(newValue);
+                    this.farClip = parseNumber(newValue, 1000, name);
                     break;
                 case 'flip-faces':
-                    this.flipFaces = newValue !== 'true';
+                    this.flipFaces = parseBool(newValue, false);
                     break;
                 case 'fov':
-                    this.fov = parseFloat(newValue);
+                    this.fov = parseNumber(newValue, 45, name);
                     break;
                 case 'frustum-culling':
-                    this.frustumCulling = newValue !== 'false';
+                    this.frustumCulling = parseBool(newValue, true);
                     break;
                 case 'gamma':
-                    this.gamma = newValue;
+                    this.gamma = parseEnum(newValue, ['linear', 'srgb'], 'srgb', name);
                     break;
                 case 'horizontal-fov':
-                    this.horizontalFov = this.hasAttribute('horizontal-fov');
+                    this.horizontalFov = parseBool(newValue, false);
                     break;
                 case 'near-clip':
-                    this.nearClip = parseFloat(newValue);
+                    this.nearClip = parseNumber(newValue, 0.1, name);
                     break;
                 case 'orthographic':
-                    this.orthographic = this.hasAttribute('orthographic');
+                    this.orthographic = parseBool(newValue, false);
                     break;
                 case 'ortho-height':
-                    this.orthoHeight = parseFloat(newValue);
+                    this.orthoHeight = parseNumber(newValue, 10, name);
                     break;
                 case 'priority':
-                    this.priority = parseFloat(newValue);
+                    this.priority = parseNumber(newValue, 0, name);
                     break;
                 case 'rect':
-                    this.rect = parseVec4(newValue);
+                    this.rect = parseVec4(newValue, new playcanvas.Vec4(0, 0, 1, 1), name);
                     break;
                 case 'scissor-rect':
-                    this.scissorRect = parseVec4(newValue);
+                    this.scissorRect = parseVec4(newValue, new playcanvas.Vec4(0, 0, 1, 1), name);
                     break;
                 case 'tonemap':
-                    this.tonemap = newValue;
+                    this.tonemap = parseEnum(newValue, tonemaps, 'none', name);
                     break;
             }
         }
@@ -2595,28 +2818,28 @@
             super.attributeChangedCallback(name, _oldValue, newValue);
             switch (name) {
                 case 'angular-offset':
-                    this.angularOffset = parseQuat(newValue);
+                    this.angularOffset = parseQuat(newValue, playcanvas.Quat.IDENTITY, name);
                     break;
                 case 'axis':
-                    this.axis = parseInt(newValue, 10);
+                    this.axis = parseNumber(newValue, 1, name);
                     break;
                 case 'convex-hull':
-                    this.convexHull = this.hasAttribute('convex-hull');
+                    this.convexHull = parseBool(newValue, false);
                     break;
                 case 'half-extents':
-                    this.halfExtents = parseVec3(newValue);
+                    this.halfExtents = parseVec3(newValue, new playcanvas.Vec3(0.5, 0.5, 0.5), name);
                     break;
                 case 'height':
-                    this.height = parseFloat(newValue);
+                    this.height = parseNumber(newValue, 2, name);
                     break;
                 case 'linear-offset':
-                    this.linearOffset = parseVec3(newValue);
+                    this.linearOffset = parseVec3(newValue, playcanvas.Vec3.ZERO, name);
                     break;
                 case 'radius':
-                    this.radius = parseFloat(newValue);
+                    this.radius = parseNumber(newValue, 0.5, name);
                     break;
                 case 'type':
-                    this.type = newValue;
+                    this.type = parseEnum(newValue, ['box', 'capsule', 'compound', 'cone', 'cylinder', 'mesh', 'sphere'], 'box', name);
                     break;
             }
         }
@@ -2636,13 +2859,13 @@
         constructor() {
             super('element');
             this._anchor = new playcanvas.Vec4(0.5, 0.5, 0.5, 0.5);
-            this._asset = '';
             this._autoWidth = true;
             this._autoHeight = true;
             this._autoFitWidth = false;
             this._autoFitHeight = false;
             this._color = new playcanvas.Color(1, 1, 1, 1);
             this._enableMarkup = false;
+            this._fontAsset = '';
             this._fontSize = 32;
             this._maxFontSize = 32;
             this._minFontSize = 8;
@@ -2705,7 +2928,7 @@
             };
             // Asset references are resolved from `<pc-asset>` element ids to engine asset ids. They are
             // only included when they resolve, so image/group elements (with no font) don't error.
-            const fontAsset = AssetElement.get(this._asset);
+            const fontAsset = AssetElement.get(this._fontAsset);
             if (fontAsset) {
                 data.fontAsset = fontAsset.id;
             }
@@ -2751,24 +2974,6 @@
         get anchor() {
             return this._anchor;
         }
-        /**
-         * Sets the id of the `pc-asset` to use for the font (text elements).
-         * @param value - The asset ID.
-         */
-        set asset(value) {
-            this._asset = value;
-            const asset = AssetElement.get(value);
-            if (this.component && asset) {
-                this.component.fontAsset = asset.id;
-            }
-        }
-        /**
-         * Gets the id of the `pc-asset` to use for the font.
-         * @returns The asset ID.
-         */
-        get asset() {
-            return this._asset;
-        }
         /**
          * Sets whether the element component should automatically adjust its width to the text content
          * (text elements only).
@@ -2839,6 +3044,24 @@
         get enableMarkup() {
             return this._enableMarkup;
         }
+        /**
+         * Sets the id of the `pc-asset` to use for the font (text elements).
+         * @param value - The font asset ID.
+         */
+        set fontAsset(value) {
+            this._fontAsset = value;
+            const asset = AssetElement.get(value);
+            if (this.component && asset) {
+                this.component.fontAsset = asset.id;
+            }
+        }
+        /**
+         * Gets the id of the `pc-asset` to use for the font.
+         * @returns The font asset ID.
+         */
+        get fontAsset() {
+            return this._fontAsset;
+        }
         /**
          * Sets the font size of the element component.
          * @param value - The font size.
@@ -3188,13 +3411,13 @@
             return [
                 ...super.observedAttributes,
                 'anchor',
-                'asset',
                 'auto-width',
                 'auto-height',
                 'auto-fit-width',
                 'auto-fit-height',
                 'color',
                 'enable-markup',
+                'font-asset',
                 'font-size',
                 'max-font-size',
                 'min-font-size',
@@ -3219,64 +3442,64 @@
             super.attributeChangedCallback(name, _oldValue, newValue);
             switch (name) {
                 case 'anchor':
-                    this.anchor = parseVec4(newValue);
-                    break;
-                case 'asset':
-                    this.asset = newValue;
+                    this.anchor = parseVec4(newValue, new playcanvas.Vec4(0.5, 0.5, 0.5, 0.5), name);
                     break;
                 case 'auto-width':
-                    this.autoWidth = newValue !== 'false';
+                    this.autoWidth = parseBool(newValue, true);
                     break;
                 case 'auto-height':
-                    this.autoHeight = newValue !== 'false';
+                    this.autoHeight = parseBool(newValue, true);
                     break;
                 case 'auto-fit-width':
-                    this.autoFitWidth = newValue !== 'false';
+                    this.autoFitWidth = parseBool(newValue, false);
                     break;
                 case 'auto-fit-height':
-                    this.autoFitHeight = newValue !== 'false';
+                    this.autoFitHeight = parseBool(newValue, false);
                     break;
                 case 'color':
-                    this.color = parseColor(newValue);
+                    this.color = parseColor(newValue, playcanvas.Color.WHITE, name);
                     break;
                 case 'enable-markup':
-                    this.enableMarkup = this.hasAttribute(name);
+                    this.enableMarkup = parseBool(newValue, false);
+                    break;
+                case 'font-asset':
+                    this.fontAsset = newValue;
                     break;
                 case 'font-size':
-                    this.fontSize = Number(newValue);
+                    this.fontSize = parseNumber(newValue, 32, name);
                     break;
                 case 'max-font-size':
-                    this.maxFontSize = Number(newValue);
+                    this.maxFontSize = parseNumber(newValue, 32, name);
                     break;
                 case 'min-font-size':
-                    this.minFontSize = Number(newValue);
+                    this.minFontSize = parseNumber(newValue, 8, name);
                     break;
                 case 'height':
-                    this.height = Number(newValue);
+                    this.height = parseNumber(newValue, 0, name);
                     break;
                 case 'line-height':
-                    this.lineHeight = Number(newValue);
+                    this.lineHeight = parseNumber(newValue, 32, name);
                     break;
                 case 'margin':
-                    this.margin = parseVec4(newValue);
+                    this.margin = parseVec4(newValue, null, name);
                     break;
                 case 'mask':
-                    this.mask = this.hasAttribute(name);
+                    this.mask = parseBool(newValue, false);
                     break;
                 case 'opacity':
-                    this.opacity = Number(newValue);
+                    this.opacity = parseNumber(newValue, 1, name);
                     break;
                 case 'pivot':
-                    this.pivot = parseVec2(newValue);
+                    this.pivot = parseVec2(newValue, new playcanvas.Vec2(0.5, 0.5), name);
                     break;
                 case 'pixels-per-unit':
-                    this.pixelsPerUnit = Number(newValue);
+                    this.pixelsPerUnit = parseNumber(newValue, null, name);
                     break;
                 case 'sprite-asset':
                     this.spriteAsset = newValue;
                     break;
                 case 'sprite-frame':
-                    this.spriteFrame = Number(newValue);
+                    this.spriteFrame = parseNumber(newValue, 0, name);
                     break;
                 case 'text':
                     this.text = newValue;
@@ -3285,16 +3508,16 @@
                     this.textureAsset = newValue;
                     break;
                 case 'type':
-                    this.type = newValue;
+                    this.type = parseEnum(newValue, ['group', 'image', 'text'], 'group', name);
                     break;
                 case 'use-input':
-                    this.useInput = this.hasAttribute(name);
+                    this.useInput = parseBool(newValue, false);
                     break;
                 case 'width':
-                    this.width = Number(newValue);
+                    this.width = parseNumber(newValue, 0, name);
                     break;
                 case 'wrap-lines':
-                    this.wrapLines = this.hasAttribute(name);
+                    this.wrapLines = parseBool(newValue, false);
                     break;
             }
         }
@@ -3476,25 +3699,25 @@
             super.attributeChangedCallback(name, _oldValue, newValue);
             switch (name) {
                 case 'min-width':
-                    this.minWidth = Number(newValue);
+                    this.minWidth = parseNumber(newValue, 0, name);
                     break;
                 case 'min-height':
-                    this.minHeight = Number(newValue);
+                    this.minHeight = parseNumber(newValue, 0, name);
                     break;
                 case 'max-width':
-                    this.maxWidth = newValue === '' ? null : Number(newValue);
+                    this.maxWidth = parseNumber(newValue, null, name);
                     break;
                 case 'max-height':
-                    this.maxHeight = newValue === '' ? null : Number(newValue);
+                    this.maxHeight = parseNumber(newValue, null, name);
                     break;
                 case 'fit-width-proportion':
-                    this.fitWidthProportion = Number(newValue);
+                    this.fitWidthProportion = parseNumber(newValue, 0, name);
                     break;
                 case 'fit-height-proportion':
-                    this.fitHeightProportion = Number(newValue);
+                    this.fitHeightProportion = parseNumber(newValue, 0, name);
                     break;
                 case 'exclude-from-layout':
-                    this.excludeFromLayout = newValue !== 'false';
+                    this.excludeFromLayout = parseBool(newValue, false);
                     break;
             }
         }
@@ -3523,26 +3746,26 @@
         /** @ignore */
         constructor() {
             super('layoutgroup');
-            this._orientation = playcanvas.ORIENTATION_HORIZONTAL;
+            this._orientation = 'horizontal';
             this._reverseX = false;
             this._reverseY = false;
             this._alignment = new playcanvas.Vec2(0, 1);
             this._padding = new playcanvas.Vec4(0, 0, 0, 0);
             this._spacing = new playcanvas.Vec2(0, 0);
-            this._widthFitting = playcanvas.FITTING_NONE;
-            this._heightFitting = playcanvas.FITTING_NONE;
+            this._widthFitting = 'none';
+            this._heightFitting = 'none';
             this._wrap = false;
         }
         getInitialComponentData() {
             return {
-                orientation: this._orientation,
+                orientation: orientations$1.get(this._orientation),
                 reverseX: this._reverseX,
                 reverseY: this._reverseY,
                 alignment: this._alignment,
                 padding: this._padding,
                 spacing: this._spacing,
-                widthFitting: this._widthFitting,
-                heightFitting: this._heightFitting,
+                widthFitting: fittings.get(this._widthFitting),
+                heightFitting: fittings.get(this._heightFitting),
                 wrap: this._wrap
             };
         }
@@ -3554,13 +3777,15 @@
             return super.component;
         }
         /**
-         * Sets the orientation of the layout group. Can be `horizontal` (0) or `vertical` (1).
+         * Sets the orientation of the layout group. Can be `horizontal` or `vertical`. Defaults to
+         * `horizontal`.
          * @param value - The orientation.
          */
         set orientation(value) {
+            var _a;
             this._orientation = value;
             if (this.component) {
-                this.component.orientation = value;
+                this.component.orientation = (_a = orientations$1.get(value)) !== null && _a !== void 0 ? _a : playcanvas.ORIENTATION_HORIZONTAL;
             }
         }
         /**
@@ -3656,14 +3881,15 @@
             return this._spacing;
         }
         /**
-         * Sets the fitting mode along the horizontal axis. Can be `none` (0), `stretch` (1), `shrink`
-         * (2) or `both` (3).
+         * Sets the fitting mode along the horizontal axis. Can be `none`, `stretch`, `shrink` or
+         * `both`. Defaults to `none`.
          * @param value - The width fitting mode.
          */
         set widthFitting(value) {
+            var _a;
             this._widthFitting = value;
             if (this.component) {
-                this.component.widthFitting = value;
+                this.component.widthFitting = (_a = fittings.get(value)) !== null && _a !== void 0 ? _a : playcanvas.FITTING_NONE;
             }
         }
         /**
@@ -3674,14 +3900,15 @@
             return this._widthFitting;
         }
         /**
-         * Sets the fitting mode along the vertical axis. Can be `none` (0), `stretch` (1), `shrink` (2)
-         * or `both` (3).
+         * Sets the fitting mode along the vertical axis. Can be `none`, `stretch`, `shrink` or
+         * `both`. Defaults to `none`.
          * @param value - The height fitting mode.
          */
         set heightFitting(value) {
+            var _a;
             this._heightFitting = value;
             if (this.component) {
-                this.component.heightFitting = value;
+                this.component.heightFitting = (_a = fittings.get(value)) !== null && _a !== void 0 ? _a : playcanvas.FITTING_NONE;
             }
         }
         /**
@@ -3726,31 +3953,31 @@
             super.attributeChangedCallback(name, _oldValue, newValue);
             switch (name) {
                 case 'orientation':
-                    this.orientation = parseEnum(newValue, orientations$1, playcanvas.ORIENTATION_HORIZONTAL);
+                    this.orientation = parseEnum(newValue, orientations$1, 'horizontal', name);
                     break;
                 case 'reverse-x':
-                    this.reverseX = newValue !== 'false';
+                    this.reverseX = parseBool(newValue, false);
                     break;
                 case 'reverse-y':
-                    this.reverseY = newValue !== 'false';
+                    this.reverseY = parseBool(newValue, false);
                     break;
                 case 'alignment':
-                    this.alignment = parseVec2(newValue);
+                    this.alignment = parseVec2(newValue, new playcanvas.Vec2(0, 1), name);
                     break;
                 case 'padding':
-                    this.padding = parseVec4(newValue);
+                    this.padding = parseVec4(newValue, playcanvas.Vec4.ZERO, name);
                     break;
                 case 'spacing':
-                    this.spacing = parseVec2(newValue);
+                    this.spacing = parseVec2(newValue, playcanvas.Vec2.ZERO, name);
                     break;
                 case 'width-fitting':
-                    this.widthFitting = parseEnum(newValue, fittings, playcanvas.FITTING_NONE);
+                    this.widthFitting = parseEnum(newValue, fittings, 'none', name);
                     break;
                 case 'height-fitting':
-                    this.heightFitting = parseEnum(newValue, fittings, playcanvas.FITTING_NONE);
+                    this.heightFitting = parseEnum(newValue, fittings, 'none', name);
                     break;
                 case 'wrap':
-                    this.wrap = newValue !== 'false';
+                    this.wrap = parseBool(newValue, false);
                     break;
             }
         }
@@ -4046,14 +4273,11 @@
             return this._shadowType;
         }
         /**
-         * Sets the type of the light.
+         * Sets the type of the light. Can be `directional`, `omni` or `spot`. Defaults to
+         * `directional`.
          * @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;
@@ -4196,61 +4420,61 @@
             super.attributeChangedCallback(name, _oldValue, newValue);
             switch (name) {
                 case 'color':
-                    this.color = parseColor(newValue);
+                    this.color = parseColor(newValue, playcanvas.Color.WHITE, name);
                     break;
                 case 'cast-shadows':
-                    this.castShadows = this.hasAttribute('cast-shadows');
+                    this.castShadows = parseBool(newValue, false);
                     break;
                 case 'inner-cone-angle':
-                    this.innerConeAngle = Number(newValue);
+                    this.innerConeAngle = parseNumber(newValue, 40, name);
                     break;
                 case 'intensity':
-                    this.intensity = Number(newValue);
+                    this.intensity = parseNumber(newValue, 1, name);
                     break;
                 case 'normal-offset-bias':
-                    this.normalOffsetBias = Number(newValue);
+                    this.normalOffsetBias = parseNumber(newValue, 0.05, name);
                     break;
                 case 'outer-cone-angle':
-                    this.outerConeAngle = Number(newValue);
+                    this.outerConeAngle = parseNumber(newValue, 45, name);
                     break;
                 case 'penumbra-falloff':
-                    this.penumbraFalloff = Number(newValue);
+                    this.penumbraFalloff = parseNumber(newValue, 1, name);
                     break;
                 case 'penumbra-size':
-                    this.penumbraSize = Number(newValue);
+                    this.penumbraSize = parseNumber(newValue, 1, name);
                     break;
                 case 'range':
-                    this.range = Number(newValue);
+                    this.range = parseNumber(newValue, 10, name);
                     break;
                 case 'shadow-bias':
-                    this.shadowBias = Number(newValue);
+                    this.shadowBias = parseNumber(newValue, 0.2, name);
                     break;
                 case 'shadow-distance':
-                    this.shadowDistance = Number(newValue);
+                    this.shadowDistance = parseNumber(newValue, 16, name);
                     break;
                 case 'shadow-blocker-samples':
-                    this.shadowBlockerSamples = Number(newValue);
+                    this.shadowBlockerSamples = parseNumber(newValue, 16, name);
                     break;
                 case 'shadow-resolution':
-                    this.shadowResolution = Number(newValue);
+                    this.shadowResolution = parseNumber(newValue, 1024, name);
                     break;
                 case 'shadow-intensity':
-                    this.shadowIntensity = Number(newValue);
+                    this.shadowIntensity = parseNumber(newValue, 1, name);
                     break;
                 case 'shadow-samples':
-                    this.shadowSamples = Number(newValue);
+                    this.shadowSamples = parseNumber(newValue, 16, name);
                     break;
                 case 'shadow-type':
-                    this.shadowType = newValue;
+                    this.shadowType = parseEnum(newValue, shadowTypes, 'pcf3-32f', name);
                     break;
                 case 'type':
-                    this.type = newValue;
+                    this.type = parseEnum(newValue, ['directional', 'omni', 'spot'], 'directional', name);
                     break;
                 case 'vsm-bias':
-                    this.vsmBias = Number(newValue);
+                    this.vsmBias = parseNumber(newValue, 0.01, name);
                     break;
                 case 'vsm-blur-size':
-                    this.vsmBlurSize = Number(newValue);
+                    this.vsmBlurSize = parseNumber(newValue, 11, name);
                     break;
             }
         }
@@ -4394,6 +4618,10 @@
      * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-material/ | `<pc-material>`} elements.
      * The MaterialElement interface also inherits the properties and methods of the
      * {@link HTMLElement} interface.
+     *
+     * A `pc-material` must be a direct child of `pc-app` — elements placed elsewhere log a warning
+     * and never create a material. Elements inserted while the application is already running are
+     * created on insertion.
      */
     class MaterialElement extends HTMLElement {
         constructor() {
@@ -4405,6 +4633,26 @@
             this._roughnessMap = '';
             this.material = null;
         }
+        async connectedCallback() {
+            var _a, _b;
+            const appElement = (_b = (_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.closest('pc-app')) !== null && _b !== void 0 ? _b : null;
+            // Materials must be direct children of pc-app (matches the boot query ':scope > pc-material')
+            if (!appElement || this.parentElement !== appElement) {
+                console.warn(`pc-material '${this.id}' must be a direct child of pc-app - material not created`);
+                return;
+            }
+            await appElement.ready();
+            // The element may have been removed or re-parented while waiting for the app
+            if (!this.isConnected || this.parentElement !== appElement)
+                return;
+            // Materials present at startup are created by AppElement's boot; this branch handles
+            // elements inserted (or re-inserted) after the app is already running
+            if (!this.material) {
+                if (!appElement.app)
+                    return; // pc-app is re-connecting; its own boot will create this
+                this.createMaterial();
+            }
+        }
         createMaterial() {
             this.material = new playcanvas.StandardMaterial();
             this.material.glossInvert = false;
@@ -4487,7 +4735,7 @@
         attributeChangedCallback(name, _oldValue, newValue) {
             switch (name) {
                 case 'diffuse':
-                    this.diffuse = parseColor(newValue);
+                    this.diffuse = parseColor(newValue, playcanvas.Color.WHITE, name);
                     break;
                 case 'diffuse-map':
                     this.diffuseMap = newValue;
@@ -4512,6 +4760,10 @@
      * The RenderComponentElement interface also inherits the properties and methods of the
      * {@link HTMLElement} interface.
      *
+     * This element renders one of the engine's built-in primitives, selected with `type` (defaulting
+     * to `box`). It does not cover the engine's `asset` render type, since there is no way to supply
+     * a render asset here — use `pc-model` for glTF content instead.
+     *
      * @category Components
      */
     class RenderComponentElement extends ComponentElement {
@@ -4521,7 +4773,7 @@
             this._castShadows = true;
             this._material = '';
             this._receiveShadows = true;
-            this._type = 'asset';
+            this._type = 'box';
         }
         getInitialComponentData() {
             return {
@@ -4613,16 +4865,16 @@
             super.attributeChangedCallback(name, _oldValue, newValue);
             switch (name) {
                 case 'cast-shadows':
-                    this.castShadows = newValue !== 'false';
+                    this.castShadows = parseBool(newValue, true);
                     break;
                 case 'material':
                     this.material = newValue;
                     break;
                 case 'receive-shadows':
-                    this.receiveShadows = newValue !== 'false';
+                    this.receiveShadows = parseBool(newValue, true);
                     break;
                 case 'type':
-                    this.type = newValue;
+                    this.type = parseEnum(newValue, ['box', 'capsule', 'cone', 'cylinder', 'plane', 'sphere'], 'box', name);
                     break;
             }
         }
@@ -4786,31 +5038,31 @@
             super.attributeChangedCallback(name, _oldValue, newValue);
             switch (name) {
                 case 'angular-damping':
-                    this.angularDamping = parseFloat(newValue);
+                    this.angularDamping = parseNumber(newValue, 0, name);
                     break;
                 case 'angular-factor':
-                    this.angularFactor = parseVec3(newValue);
+                    this.angularFactor = parseVec3(newValue, playcanvas.Vec3.ONE, name);
                     break;
                 case 'friction':
-                    this.friction = parseFloat(newValue);
+                    this.friction = parseNumber(newValue, 0.5, name);
                     break;
                 case 'linear-damping':
-                    this.linearDamping = parseFloat(newValue);
+                    this.linearDamping = parseNumber(newValue, 0, name);
                     break;
                 case 'linear-factor':
-                    this.linearFactor = parseVec3(newValue);
+                    this.linearFactor = parseVec3(newValue, playcanvas.Vec3.ONE, name);
                     break;
                 case 'mass':
-                    this.mass = parseFloat(newValue);
+                    this.mass = parseNumber(newValue, 1, name);
                     break;
                 case 'restitution':
-                    this.restitution = parseFloat(newValue);
+                    this.restitution = parseNumber(newValue, 0, name);
                     break;
                 case 'rolling-friction':
-                    this.rollingFriction = parseFloat(newValue);
+                    this.rollingFriction = parseNumber(newValue, 0, name);
                     break;
                 case 'type':
-                    this.type = newValue;
+                    this.type = parseEnum(newValue, ['static', 'dynamic', 'kinematic'], 'static', name);
                     break;
             }
         }
@@ -4922,22 +5174,22 @@
             super.attributeChangedCallback(name, _oldValue, newValue);
             switch (name) {
                 case 'priority':
-                    this.priority = parseInt(newValue, 10);
+                    this.priority = parseNumber(newValue, 0, name);
                     break;
                 case 'reference-resolution':
-                    this.referenceResolution = parseVec2(newValue);
+                    this.referenceResolution = parseVec2(newValue, new playcanvas.Vec2(640, 320), name);
                     break;
                 case 'resolution':
-                    this.resolution = parseVec2(newValue);
+                    this.resolution = parseVec2(newValue, new playcanvas.Vec2(640, 320), name);
                     break;
                 case 'scale-blend':
-                    this.scaleBlend = parseFloat(newValue);
+                    this.scaleBlend = parseNumber(newValue, 0.5, name);
                     break;
                 case 'blend':
-                    this.blend = this.hasAttribute('blend');
+                    this.blend = parseBool(newValue, false);
                     break;
                 case 'screen-space':
-                    this.screenSpace = this.hasAttribute('screen-space');
+                    this.screenSpace = parseBool(newValue, false);
                     break;
             }
         }
@@ -4960,14 +5212,14 @@
         /** @ignore */
         constructor() {
             super('scrollbar');
-            this._orientation = playcanvas.ORIENTATION_HORIZONTAL;
+            this._orientation = 'horizontal';
             this._value = 0;
             this._handleSize = 0.5;
             this._handle = '';
         }
         getInitialComponentData() {
             const data = {
-                orientation: this._orientation,
+                orientation: orientations.get(this._orientation),
                 value: this._value,
                 handleSize: this._handleSize
             };
@@ -4985,13 +5237,15 @@
             return super.component;
         }
         /**
-         * Sets the orientation of the scrollbar. Can be `horizontal` (0) or `vertical` (1).
+         * Sets the orientation of the scrollbar. Can be `horizontal` or `vertical`. Defaults to
+         * `horizontal`.
          * @param value - The orientation.
          */
         set orientation(value) {
+            var _a;
             this._orientation = value;
             if (this.component) {
-                this.component.orientation = value;
+                this.component.orientation = (_a = orientations.get(value)) !== null && _a !== void 0 ? _a : playcanvas.ORIENTATION_HORIZONTAL;
             }
         }
         /**
@@ -5067,13 +5321,13 @@
             super.attributeChangedCallback(name, _oldValue, newValue);
             switch (name) {
                 case 'orientation':
-                    this.orientation = parseEnum(newValue, orientations, playcanvas.ORIENTATION_HORIZONTAL);
+                    this.orientation = parseEnum(newValue, orientations, 'horizontal', name);
                     break;
                 case 'value':
-                    this.value = Number(newValue);
+                    this.value = parseNumber(newValue, 0, name);
                     break;
                 case 'handle-size':
-                    this.handleSize = Number(newValue);
+                    this.handleSize = parseNumber(newValue, 0.5, name);
                     break;
                 case 'handle':
                     this.handle = newValue;
@@ -5106,13 +5360,13 @@
             super('scrollview');
             this._horizontal = true;
             this._vertical = true;
-            this._scrollMode = playcanvas.SCROLL_MODE_BOUNCE;
+            this._scrollMode = 'bounce';
             this._bounceAmount = 0.1;
             this._friction = 0.05;
             this._useMouseWheel = true;
             this._mouseWheelSensitivity = new playcanvas.Vec2(1, 1);
-            this._horizontalScrollbarVisibility = playcanvas.SCROLLBAR_VISIBILITY_SHOW_WHEN_REQUIRED;
-            this._verticalScrollbarVisibility = playcanvas.SCROLLBAR_VISIBILITY_SHOW_WHEN_REQUIRED;
+            this._horizontalScrollbarVisibility = 'when-required';
+            this._verticalScrollbarVisibility = 'when-required';
             this._viewport = '';
             this._content = '';
             this._horizontalScrollbar = '';
@@ -5122,13 +5376,13 @@
             const data = {
                 horizontal: this._horizontal,
                 vertical: this._vertical,
-                scrollMode: this._scrollMode,
+                scrollMode: scrollModes.get(this._scrollMode),
                 bounceAmount: this._bounceAmount,
                 friction: this._friction,
                 useMouseWheel: this._useMouseWheel,
                 mouseWheelSensitivity: this._mouseWheelSensitivity,
-                horizontalScrollbarVisibility: this._horizontalScrollbarVisibility,
-                verticalScrollbarVisibility: this._verticalScrollbarVisibility
+                horizontalScrollbarVisibility: visibilities.get(this._horizontalScrollbarVisibility),
+                verticalScrollbarVisibility: visibilities.get(this._verticalScrollbarVisibility)
             };
             const viewport = getEntity(this._viewport);
             if (viewport) {
@@ -5191,13 +5445,14 @@
         }
         /**
          * Sets how the scroll view should behave when the content is scrolled beyond its bounds. Can be
-         * `clamp` (0), `bounce` (1) or `infinite` (2).
+         * `clamp`, `bounce` or `infinite`. Defaults to `bounce`.
          * @param value - The scroll mode.
          */
         set scrollMode(value) {
+            var _a;
             this._scrollMode = value;
             if (this.component) {
-                this.component.scrollMode = value;
+                this.component.scrollMode = (_a = scrollModes.get(value)) !== null && _a !== void 0 ? _a : playcanvas.SCROLL_MODE_BOUNCE;
             }
         }
         /**
@@ -5278,13 +5533,15 @@
             return this._mouseWheelSensitivity;
         }
         /**
-         * Sets the visibility of the horizontal scrollbar. Can be `always` (0) or `when-required` (1).
+         * Sets the visibility of the horizontal scrollbar. Can be `always` or `when-required`.
+         * Defaults to `when-required`.
          * @param value - The horizontal scrollbar visibility.
          */
         set horizontalScrollbarVisibility(value) {
+            var _a;
             this._horizontalScrollbarVisibility = value;
             if (this.component) {
-                this.component.horizontalScrollbarVisibility = value;
+                this.component.horizontalScrollbarVisibility = (_a = visibilities.get(value)) !== null && _a !== void 0 ? _a : playcanvas.SCROLLBAR_VISIBILITY_SHOW_WHEN_REQUIRED;
             }
         }
         /**
@@ -5295,13 +5552,15 @@
             return this._horizontalScrollbarVisibility;
         }
         /**
-         * Sets the visibility of the vertical scrollbar. Can be `always` (0) or `when-required` (1).
+         * Sets the visibility of the vertical scrollbar. Can be `always` or `when-required`.
+         * Defaults to `when-required`.
          * @param value - The vertical scrollbar visibility.
          */
         set verticalScrollbarVisibility(value) {
+            var _a;
             this._verticalScrollbarVisibility = value;
             if (this.component) {
-                this.component.verticalScrollbarVisibility = value;
+                this.component.verticalScrollbarVisibility = (_a = visibilities.get(value)) !== null && _a !== void 0 ? _a : playcanvas.SCROLLBAR_VISIBILITY_SHOW_WHEN_REQUIRED;
             }
         }
         /**
@@ -5409,31 +5668,31 @@
             super.attributeChangedCallback(name, _oldValue, newValue);
             switch (name) {
                 case 'horizontal':
-                    this.horizontal = newValue !== 'false';
+                    this.horizontal = parseBool(newValue, true);
                     break;
                 case 'vertical':
-                    this.vertical = newValue !== 'false';
+                    this.vertical = parseBool(newValue, true);
                     break;
                 case 'scroll-mode':
-                    this.scrollMode = parseEnum(newValue, scrollModes, playcanvas.SCROLL_MODE_BOUNCE);
+                    this.scrollMode = parseEnum(newValue, scrollModes, 'bounce', name);
                     break;
                 case 'bounce-amount':
-                    this.bounceAmount = Number(newValue);
+                    this.bounceAmount = parseNumber(newValue, 0.1, name);
                     break;
                 case 'friction':
-                    this.friction = Number(newValue);
+                    this.friction = parseNumber(newValue, 0.05, name);
                     break;
                 case 'use-mouse-wheel':
-                    this.useMouseWheel = newValue !== 'false';
+                    this.useMouseWheel = parseBool(newValue, true);
                     break;
                 case 'mouse-wheel-sensitivity':
-                    this.mouseWheelSensitivity = parseVec2(newValue);
+                    this.mouseWheelSensitivity = parseVec2(newValue, playcanvas.Vec2.ONE, name);
                     break;
                 case 'horizontal-scrollbar-visibility':
-                    this.horizontalScrollbarVisibility = parseEnum(newValue, visibilities, playcanvas.SCROLLBAR_VISIBILITY_SHOW_WHEN_REQUIRED);
+                    this.horizontalScrollbarVisibility = parseEnum(newValue, visibilities, 'when-required', name);
                     break;
                 case 'vertical-scrollbar-visibility':
-                    this.verticalScrollbarVisibility = parseEnum(newValue, visibilities, playcanvas.SCROLLBAR_VISIBILITY_SHOW_WHEN_REQUIRED);
+                    this.verticalScrollbarVisibility = parseEnum(newValue, visibilities, 'when-required', name);
                     break;
                 case 'viewport':
                     this.viewport = newValue;
@@ -5441,17 +5700,347 @@
                 case 'content':
                     this.content = newValue;
                     break;
-                case 'horizontal-scrollbar':
-                    this.horizontalScrollbar = newValue;
+                case 'horizontal-scrollbar':
+                    this.horizontalScrollbar = newValue;
+                    break;
+                case 'vertical-scrollbar':
+                    this.verticalScrollbar = newValue;
+                    break;
+            }
+        }
+    }
+    customElements.define('pc-scrollview', ScrollViewComponentElement);
+
+    /**
+     * The ScriptElement interface provides properties and methods for manipulating
+     * `<pc-script>` elements. The ScriptElement interface also inherits the properties and
+     * methods of the {@link AsyncElement} interface.
+     *
+     * Script attributes can be supplied through two channels:
+     *
+     * - **Per-property attributes**: any non-reserved attribute on the element maps to the script
+     *   attribute of the same name (kebab-case to camelCase, e.g. `focus-point` → `focusPoint`).
+     *   Values are parsed according to the type of the attribute's current value — initially the
+     *   script's declared default (numbers, booleans, strings, Vec2/3/4, Color, Quat as Euler
+     *   angles) — and the `asset:`/`entity:`/`vec2:`/`vec3:`/`vec4:`/`color:` prefixes may be used
+     *   to be explicit.
+     * - **The `attributes` JSON attribute**: an object supporting nested structures and attribute
+     *   names that collide with reserved HTML attribute names (e.g. `title`).
+     *
+     * When both specify the same attribute, the per-property attribute wins — at creation and
+     * whenever either channel changes at runtime. The element's own `name` and `enabled`
+     * attributes configure the element itself and are not script attributes.
+     *
+     * Changing `name` on a live element destroys the old-name script instance and creates the
+     * new-name one, re-applying both attribute channels to it.
+     *
+     * The element becomes ready once its script instance has been created by the parent
+     * `<pc-scripts>` element.
+     */
+    class ScriptElement extends AsyncElement {
+        constructor() {
+            super(...arguments);
+            this._attributes = {};
+            this._enabled = true;
+            /**
+             * Whether readiness has been signalled. Creation can happen more than once over an
+             * element's life (a runtime `name` change recreates the instance), but `ready` is a
+             * one-shot signal, so only the first successful creation fires it.
+             */
+            this._readySignalled = false;
+            /**
+             * The Script instance created for this element by its parent `<pc-scripts>` element.
+             * @ignore
+             */
+            this._script = null;
+        }
+        /**
+         * Sets the attributes of the script as an object. Values are converted with the same rules
+         * as the `attributes` attribute: `asset:`/`entity:` references and `vec2:`/`vec3:`/`vec4:`/
+         * `color:` prefixed strings are resolved, and a plain numeric array is converted to the
+         * type of the attribute it targets when that attribute currently holds a Vec2, Vec3, Vec4
+         * or Color.
+         * @param value - The attributes of the script.
+         */
+        set scriptAttributes(value) {
+            this._attributes = value !== null && value !== void 0 ? value : {};
+            this.dispatchEvent(new CustomEvent('scriptattributeschange', {
+                detail: { attributes: this._attributes },
+                bubbles: true
+            }));
+        }
+        /**
+         * Gets the attributes of the script.
+         * @returns The attributes of the script.
+         */
+        get scriptAttributes() {
+            return this._attributes;
+        }
+        /**
+         * Sets the enabled state of the script.
+         * @param value - The enabled state of the script.
+         */
+        set enabled(value) {
+            this._enabled = value;
+            this.dispatchEvent(new CustomEvent('scriptenablechange', {
+                detail: { enabled: value },
+                bubbles: true
+            }));
+        }
+        /**
+         * 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. The `name` attribute is the single source of truth
+         * (it is what the parent `<pc-scripts>` element reads when creating the instance), so the
+         * property writes through to it — assigning before insertion works as expected:
+         *
+         * ```js
+         * const script = document.createElement('pc-script');
+         * script.name = 'rotate';
+         * scriptsElement.appendChild(script);
+         * await script.ready();
+         * ```
+         * @param value - The name.
+         */
+        set name(value) {
+            this.setAttribute('name', value);
+        }
+        /**
+         * Gets the name of the script.
+         * @returns The name.
+         */
+        get name() {
+            var _a;
+            return (_a = this.getAttribute('name')) !== null && _a !== void 0 ? _a : '';
+        }
+        /**
+         * Gets the {@link Script} instance created for this element. Returns `null` until the
+         * instance exists — await {@link whenReady} or the element's `ready()` promise before
+         * accessing it.
+         * @returns The script instance, or `null`.
+         */
+        get script() {
+            return this._script;
+        }
+        connectedCallback() {
+            var _a;
+            // Script instances are created by the parent pc-scripts element, so an element placed
+            // anywhere else is inert and never becomes ready - warn rather than hang silently
+            if (((_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.tagName) !== 'PC-SCRIPTS') {
+                console.warn(`pc-script '${this.getAttribute('name')}' must be a direct child of pc-scripts - script not created`);
+            }
+        }
+        /**
+         * Called by the parent `<pc-scripts>` element when the script instance has been created.
+         * @ignore
+         */
+        _onScriptCreated() {
+            if (this._readySignalled)
+                return;
+            this._readySignalled = true;
+            this._onReady();
+        }
+        static get observedAttributes() {
+            return ['attributes', 'enabled', 'name'];
+        }
+        attributeChangedCallback(name, oldValue, newValue) {
+            switch (name) {
+                case 'attributes':
+                    if (newValue === null) {
+                        this.scriptAttributes = {};
+                        break;
+                    }
+                    try {
+                        this.scriptAttributes = JSON.parse(newValue);
+                    }
+                    catch (error) {
+                        console.warn(`Invalid 'attributes' JSON on pc-script '${this.getAttribute('name')}': ${error.message}`);
+                    }
+                    break;
+                case 'enabled':
+                    this.enabled = parseBool(newValue, true);
                     break;
-                case 'vertical-scrollbar':
-                    this.verticalScrollbar = newValue;
+                case 'name':
+                    // The first set is handled by the parent's creation paths (the boot query and
+                    // the added-node mutation), so only a genuine rename is signalled here. Note
+                    // that setAttribute fires this callback even when the value is unchanged.
+                    if (oldValue !== null && oldValue !== newValue) {
+                        this.dispatchEvent(new CustomEvent('scriptnamechange', {
+                            detail: { oldName: oldValue, newName: newValue },
+                            bubbles: true
+                        }));
+                    }
                     break;
             }
         }
     }
-    customElements.define('pc-scrollview', ScrollViewComponentElement);
+    customElements.define('pc-script', ScriptElement);
 
+    /**
+     * Attributes on `pc-script` that never map to script attributes: the element's own API (derived
+     * from its observed attributes) plus reserved and global HTML attribute names.
+     */
+    const RESERVED_ATTRIBUTES = new Set([
+        ...ScriptElement.observedAttributes,
+        'accesskey', 'autocapitalize', 'autofocus', 'class', 'contenteditable', 'dir', 'draggable',
+        'exportparts', 'hidden', 'id', 'inert', 'is', 'itemid', 'itemprop', 'itemref', 'itemscope',
+        'itemtype', 'lang', 'nonce', 'part', 'popover', 'role', 'slot', 'spellcheck', 'style',
+        'tabindex', 'title', 'translate'
+    ]);
+    /**
+     * Checks whether a `pc-script` attribute name is reserved (and so never maps to a script
+     * attribute). Reserved names are the element's own API, global HTML attribute names, `data-*`
+     * and `aria-*` attributes, names starting with `_` (framework-stamped attributes), and real
+     * inline event handler names (`onclick` etc. — detected via the platform, so script attributes
+     * that merely start with 'on', like `once`, still map).
+     * @param name - The attribute name.
+     * @returns Whether the attribute name is reserved.
+     */
+    const isReservedAttribute = (name) => {
+        return RESERVED_ATTRIBUTES.has(name) ||
+            name.startsWith('data-') ||
+            name.startsWith('aria-') ||
+            name.startsWith('_') ||
+            (name.startsWith('on') && name in HTMLElement.prototype);
+    };
+    /**
+     * Script API members that per-property attributes must never overwrite: the engine bindings and
+     * the (optional, so possibly undefined) lifecycle methods.
+     */
+    const SCRIPT_API_MEMBERS = new Set([
+        'app', 'entity', 'destroy', 'initialize', 'postInitialize', 'postUpdate', 'swap', 'update'
+    ]);
+    /**
+     * Converts a kebab-case attribute name to the camelCase script attribute name.
+     * @param name - The attribute name.
+     * @returns The camelCase name.
+     */
+    const kebabToCamel = (name) => {
+        return name.replace(/-([a-z])/g, (_, char) => char.toUpperCase());
+    };
+    /**
+     * Converts a camelCase script attribute name to its kebab-case attribute spelling.
+     * @param name - The camelCase name.
+     * @returns The kebab-case name.
+     */
+    const camelToKebab = (name) => {
+        return name.replace(/[A-Z]/g, char => `-${char.toLowerCase()}`);
+    };
+    /**
+     * Resolves an `asset:` prefix to the Asset created by the `pc-asset` element with that id.
+     * @param rest - The asset id.
+     * @param raw - The raw value, returned unchanged when the id does not resolve.
+     * @returns The asset, or `raw`.
+     */
+    const assetConversion = (rest, raw) => {
+        const asset = AssetElement.get(rest);
+        if (asset) {
+            return asset;
+        }
+        console.warn(`Unable to resolve '${raw}' in script attributes - no pc-asset found with id '${rest}'.`);
+        return raw;
+    };
+    /**
+     * Resolves an `entity:` prefix to the Entity backing a `pc-entity` element. The reference can be a
+     * CSS selector, an element id or an entity name.
+     * @param rest - The entity reference.
+     * @param raw - The raw value, returned unchanged when the reference does not resolve.
+     * @returns The entity, or `raw`.
+     */
+    const entityConversion = (rest, raw) => {
+        const entity = getEntity(rest);
+        if (entity) {
+            return entity;
+        }
+        console.warn(`Unable to resolve '${raw}' in script attributes - no pc-entity found matching '${rest}'.`);
+        return raw;
+    };
+    /**
+     * Builds the conversion for a `vec2:`/`vec3:`/`vec4:` prefix.
+     * @param length - The number of components the prefix carries.
+     * @param Ctor - The vector type to construct.
+     * @returns The conversion.
+     */
+    const vectorConversion = (length, Ctor) => {
+        return (rest, raw) => {
+            const components = parseComponents(rest, length);
+            if (components) {
+                return new Ctor(components);
+            }
+            console.warn(`Invalid script attribute value '${raw}'. Expected ${length} space-separated numbers after 'vec${length}:'.`);
+            return raw;
+        };
+    };
+    /**
+     * Converts a `color:` prefix to a Color, accepting 3 or 4 components.
+     * @param rest - The space-separated components.
+     * @param raw - The raw value, returned unchanged when the components do not parse.
+     * @returns The color, or `raw`.
+     */
+    const colorConversion = (rest, raw) => {
+        var _a;
+        const components = (_a = parseComponents(rest, 4)) !== null && _a !== void 0 ? _a : parseComponents(rest, 3);
+        if (components) {
+            return new playcanvas.Color(components);
+        }
+        console.warn(`Invalid script attribute value '${raw}'. Expected 3 or 4 space-separated numbers after 'color:'.`);
+        return raw;
+    };
+    /**
+     * The conversion prefixes recognised in script attribute values, mapped to the conversion each
+     * performs. These keys are the single source of truth for the prefix vocabulary: they drive both
+     * the conversion in `convertAttributes` and the has-a-prefix test in `setScriptProperty`, so a
+     * prefix added here is automatically known to both.
+     */
+    const CONVERSIONS = new Map([
+        ['asset', assetConversion],
+        ['entity', entityConversion],
+        ['vec2', vectorConversion(2, playcanvas.Vec2)],
+        ['vec3', vectorConversion(3, playcanvas.Vec3)],
+        ['vec4', vectorConversion(4, playcanvas.Vec4)],
+        ['color', colorConversion]
+    ]);
+    /**
+     * Matches a value against the conversion prefixes. A prefix is the text before the first colon,
+     * so a value whose remainder itself contains colons (`asset:a:b`) still resolves, and a value
+     * with an unrecognised prefix (`https://...`) or no colon does not match.
+     * @param value - The value to inspect.
+     * @returns The matching converter and the text after the prefix, or `null` if the value carries
+     * no recognised prefix.
+     */
+    const matchConversion = (value) => {
+        const index = value.indexOf(':');
+        if (index <= 0) {
+            return null;
+        }
+        const convert = CONVERSIONS.get(value.slice(0, index));
+        return convert ? { convert, rest: value.slice(index + 1) } : null;
+    };
+    /**
+     * Finds a script property whose name matches `key` case-insensitively (but not exactly). Used
+     * to suggest the kebab-case spelling when a camelCase attribute has been lowercased by the HTML
+     * parser (e.g. `focusPoint` arriving as 'focuspoint').
+     * @param script - The script instance to search.
+     * @param key - The lowercased key that failed to match.
+     * @returns The matching property name, or `null`.
+     */
+    const findCaseMatch = (script, key) => {
+        const names = new Set(Object.keys(script));
+        for (const name of Object.getOwnPropertyNames(Object.getPrototypeOf(script))) {
+            names.add(name);
+        }
+        for (const name of names) {
+            if (name !== key && name.toLowerCase() === key.toLowerCase()) {
+                return name;
+            }
+        }
+        return null;
+    };
     /**
      * The ScriptComponentElement interface provides properties and methods for manipulating
      * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-scripts/ | `<pc-scripts>`} elements.
@@ -5466,83 +6055,46 @@
             super('script');
             // Create mutation observer to watch for child script elements
             this.observer = new MutationObserver(this.handleMutations.bind(this));
-            this.observer.observe(this, {
-                childList: true
-            });
-            // Listen for script attribute and enable changes
+            // Listen for script attribute, enable and name changes
             this.addEventListener('scriptattributeschange', this.handleScriptAttributesChange.bind(this));
             this.addEventListener('scriptenablechange', this.handleScriptEnableChange.bind(this));
+            this.addEventListener('scriptnamechange', this.handleScriptNameChange.bind(this));
+        }
+        connectedCallback() {
+            // (Re-)observe on every connection - disconnectedCallback disconnects the observer.
+            // Attribute changes on child pc-script elements are watched here too: per-property
+            // script attributes are not statically known, so they cannot use observedAttributes.
+            this.observer.observe(this, { childList: true, subtree: true, attributes: true });
+            return super.connectedCallback();
         }
         initComponent() {
             // Handle initial script elements
             this.querySelectorAll(':scope > pc-script').forEach((scriptElement) => {
-                const scriptName = scriptElement.getAttribute('name');
-                const attributes = scriptElement.getAttribute('attributes');
-                if (scriptName) {
-                    this.createScript(scriptName, attributes);
-                }
+                this.createScript(scriptElement);
             });
         }
         /**
          * Recursively converts raw attribute data into proper PlayCanvas types. Supported conversions:
-         * - "asset:assetId" → resolves to an Asset instance
-         * - "entity:entityId" → resolves to an Entity instance
-         * - "vec2:1,2" → new Vec2(1,2)
-         * - "vec3:1,2,3" → new Vec3(1,2,3)
-         * - "vec4:1,2,3,4" → new Vec4(1,2,3,4)
-         * - "color:1,0.5,0.5,1" → new Color(1,0.5,0.5,1)
+         * - "asset:id" → the Asset created by the `pc-asset` element with that id
+         * - "entity:ref" → the Entity backing a `pc-entity` element. The reference can be a CSS
+         *   selector, an element id or an entity name.
+         * - "vec2:1 2" → new Vec2(1, 2)
+         * - "vec3:1 2 3" → new Vec3(1, 2, 3)
+         * - "vec4:1 2 3 4" → new Vec4(1, 2, 3, 4)
+         * - "color:1 0.5 0.5 1" → new Color(1, 0.5, 0.5, 1)
+         *
+         * A prefixed string that fails to resolve or parse logs a warning and is left as the raw
+         * string.
          * @param item - The item to convert.
          * @returns The converted item.
          */
         convertAttributes(item) {
             if (typeof item === 'string') {
-                if (item.startsWith('asset:')) {
-                    const assetId = item.slice(6);
-                    const assetElement = document.querySelector(`pc-asset#${assetId}`);
-                    if (assetElement) {
-                        return assetElement.asset;
-                    }
-                }
-                if (item.startsWith('entity:')) {
-                    const entityId = item.slice(7);
-                    const entityElement = document.querySelector(`pc-entity[name="${entityId}"]`);
-                    if (entityElement) {
-                        return entityElement.entity;
-                    }
-                }
-                if (item.startsWith('vec2:')) {
-                    const parts = item.slice(5).split(',').map(Number);
-                    if (parts.length === 2 && parts.every(v => !isNaN(v))) {
-                        return new playcanvas.Vec2(parts[0], parts[1]);
-                    }
-                }
-                if (item.startsWith('vec3:')) {
-                    const parts = item.slice(5).split(',').map(Number);
-                    if (parts.length === 3 && parts.every(v => !isNaN(v))) {
-                        return new playcanvas.Vec3(parts[0], parts[1], parts[2]);
-                    }
-                }
-                if (item.startsWith('vec4:')) {
-                    const parts = item.slice(5).split(',').map(Number);
-                    if (parts.length === 4 && parts.every(v => !isNaN(v))) {
-                        return new playcanvas.Vec4(parts[0], parts[1], parts[2], parts[3]);
-                    }
-                }
-                if (item.startsWith('color:')) {
-                    const parts = item.slice(6).split(',').map(Number);
-                    if (parts.length === 4 && parts.every(v => !isNaN(v))) {
-                        return new playcanvas.Color(parts[0], parts[1], parts[2], parts[3]);
-                    }
-                }
-                return item;
+                const match = matchConversion(item);
+                return match ? match.convert(match.rest, item) : item;
             }
             if (Array.isArray(item)) {
-                // If it's an array of objects, convert each element individually.
-                if (item.length > 0 && typeof item[0] === 'object') {
-                    return item.map((el) => this.convertAttributes(el));
-                }
-                // Otherwise, leave the numeric array unchanged but process each element.
-                return item.map((el) => this.convertAttributes(el));
+                return item.map((element) => this.convertAttributes(element));
             }
             if (item && typeof item === 'object') {
                 const result = {};
@@ -5554,87 +6106,301 @@
             return item;
         }
         /**
-         * Preprocess the attributes object by converting its values.
-         * @param attrs - The attributes object to preprocess.
-         * @returns The preprocessed attributes object.
-         */
-        preprocessAttributes(attrs) {
-            return this.convertAttributes(attrs);
-        }
-        /**
-         * Recursively merge properties from source into target.
+         * Recursively merge properties from source into target. When the target value is a Vec2,
+         * Vec3, Vec4 or Color and the source value is a plain numeric array, the array is converted
+         * to the target's type — so script attributes with math-typed defaults can be written as
+         * plain JSON arrays (e.g. `"focusPoint": [0, 1.75, 0]`).
          * @param target - The target object to merge into.
          * @param source - The source object to merge from.
          * @returns The merged object.
          */
         mergeDeep(target, source) {
             for (const key in source) {
-                if (source[key] &&
-                    typeof source[key] === 'object' &&
-                    !Array.isArray(source[key])) {
-                    if (!target[key] || typeof target[key] !== 'object') {
+                const value = source[key];
+                const current = target[key];
+                if (this.isMathType(current) && Array.isArray(value)) {
+                    const converted = this.arrayToMathType(current, value, key);
+                    if (converted) {
+                        target[key] = converted;
+                    }
+                    continue;
+                }
+                // Only recurse into plain objects. Class instances (Vec3, Color, Asset, Entity...)
+                // are leaf values assigned whole, so accessor-typed script attributes receive them
+                // through their setters instead of having a getter's returned copy mutated.
+                if (value && typeof value === 'object' && !Array.isArray(value) && Object.getPrototypeOf(value) === Object.prototype) {
+                    if (!current || typeof current !== 'object') {
                         target[key] = {};
                     }
-                    this.mergeDeep(target[key], source[key]);
+                    this.mergeDeep(target[key], value);
                 }
                 else {
-                    target[key] = source[key];
+                    target[key] = value;
                 }
             }
             return target;
         }
         /**
-         * Update script attributes by merging preprocessed values into the script.
+         * Checks whether a value is one of the math types that plain numeric arrays convert to.
+         * @param value - The value to check.
+         * @returns Whether the value is a math type.
+         */
+        isMathType(value) {
+            return value instanceof playcanvas.Vec2 || value instanceof playcanvas.Vec3 || value instanceof playcanvas.Vec4 || value instanceof playcanvas.Color || value instanceof playcanvas.Quat;
+        }
+        /**
+         * Converts a plain numeric array to the math type of `current`. A 3-element array targeting
+         * a Quat is interpreted as Euler angles in degrees, mirroring the `parseQuat` attribute
+         * grammar. Returns `null` (and logs a warning) when the array's length or contents don't
+         * match the type.
+         * @param current - The current (typed) value of the property.
+         * @param value - The incoming array.
+         * @param key - The property name, used in the warning message.
+         * @returns The converted value, or `null`.
+         */
+        arrayToMathType(current, value, key) {
+            if (value.every(component => typeof component === 'number' && Number.isFinite(component))) {
+                if (current instanceof playcanvas.Vec2 && value.length === 2)
+                    return new playcanvas.Vec2(value);
+                if (current instanceof playcanvas.Vec3 && value.length === 3)
+                    return new playcanvas.Vec3(value);
+                if (current instanceof playcanvas.Vec4 && value.length === 4)
+                    return new playcanvas.Vec4(value);
+                if (current instanceof playcanvas.Color && (value.length === 3 || value.length === 4))
+                    return new playcanvas.Color(value);
+                if (current instanceof playcanvas.Quat && value.length === 3)
+                    return new playcanvas.Quat().setFromEulerAngles(value[0], value[1], value[2]);
+            }
+            console.warn(`Cannot convert script attribute '${key}' array [${value}] to ${current.constructor.name}. Keeping the current value.`);
+            return null;
+        }
+        /**
+         * Update script attributes by merging converted values into the script. `enabled` is always
+         * excluded (it is configured through the element's `enabled` attribute, not the JSON blob),
+         * as are any keys in `exclude` — used to keep per-property attributes authoritative over
+         * the blob without writing a property twice.
          * @param script - The script to update.
          * @param attributes - The attributes to merge into the script.
-         */
-        applyAttributes(script, attributes) {
-            try {
-                const attributesObject = attributes ? JSON.parse(attributes) : {};
-                const converted = this.convertAttributes(attributesObject);
-                this.mergeDeep(script, converted);
+         * @param exclude - Keys to strip from the merge.
+         */
+        applyAttributes(script, attributes, exclude) {
+            const converted = this.convertAttributes(attributes);
+            if (converted && typeof converted === 'object') {
+                delete converted.enabled;
+                if (exclude) {
+                    for (const key of exclude) {
+                        delete converted[key];
+                    }
+                }
             }
-            catch (error) {
-                console.error(`Error parsing attributes JSON string ${attributes}:`, error);
+            this.mergeDeep(script, converted);
+        }
+        /**
+         * Returns the camelCase keys of the per-property attributes present on a `pc-script`
+         * element.
+         * @param scriptElement - The `pc-script` element.
+         * @returns The camelCase keys.
+         */
+        inlineKeys(scriptElement) {
+            const keys = new Set();
+            for (const attr of Array.from(scriptElement.attributes)) {
+                if (!isReservedAttribute(attr.name)) {
+                    keys.add(kebabToCamel(attr.name));
+                }
             }
+            return keys;
+        }
+        /**
+         * Resolves the script instance owned by a `pc-script` element. Returns `null` when the
+         * element has no created script, or when its name resolves to a script created by a
+         * different element (e.g. a duplicate-named sibling).
+         * @param scriptElement - The `pc-script` element.
+         * @returns The owned script, or `null`.
+         */
+        scriptFor(scriptElement) {
+            const name = scriptElement.getAttribute('name');
+            if (!name || !this.component)
+                return null;
+            const script = this.component.get(name);
+            return script && script === scriptElement._script ? script : null;
         }
         handleScriptAttributesChange(event) {
             const scriptElement = event.target;
-            const scriptName = scriptElement.getAttribute('name');
-            if (!scriptName || !this.component)
-                return;
-            const script = this.component.get(scriptName);
+            const script = this.scriptFor(scriptElement);
             if (script) {
-                this.applyAttributes(script, event.detail.attributes);
+                // Per-property attributes stay authoritative: keys they pin are excluded here
+                this.applyAttributes(script, event.detail.attributes, this.inlineKeys(scriptElement));
             }
         }
         handleScriptEnableChange(event) {
             const scriptElement = event.target;
-            const scriptName = scriptElement.getAttribute('name');
-            if (!scriptName || !this.component)
-                return;
-            const script = this.component.get(scriptName);
+            // Apply any queued per-property changes first, so that initialize() (fired by the
+            // engine on first effective enable) sees every attribute value set this tick
+            this.handleMutations(this.observer.takeRecords());
+            const script = this.scriptFor(scriptElement);
             if (script) {
                 script.enabled = event.detail.enabled;
             }
         }
-        createScript(name, attributes) {
+        /**
+         * Handles a runtime `name` change on a child `pc-script`, swapping the engine script instance
+         * to match. Without this the element would keep pointing at the old-name instance: the old
+         * script would go on running while every subsequent update (attribute changes, enable
+         * changes, destruction on removal) resolved the new name and silently no-opped.
+         *
+         * The new instance is built by the normal creation path, so both attribute channels are
+         * re-applied to it and the declared enabled state is restored.
+         * @param event - The name change event.
+         */
+        handleScriptNameChange(event) {
+            const scriptElement = event.target;
+            // Only direct children are managed, matching initComponent's ':scope > pc-script'
+            // contract - the event bubbles, so a deeper pc-script must not be created here
+            if (scriptElement.parentElement !== this)
+                return;
+            // Before the component exists there is nothing to swap: initComponent creates from
+            // whatever the name is by then
             if (!this.component)
+                return;
+            // Only tear down the old-name script if this element actually owns it - a duplicate-named
+            // element whose own create() failed must not take down the live script on rename
+            const { oldName } = event.detail;
+            if (oldName && scriptElement._script && this.component.get(oldName) === scriptElement._script) {
+                this.destroyScript(oldName);
+            }
+            scriptElement._script = null;
+            this.createScript(scriptElement);
+        }
+        /**
+         * Creates the script instance for a `pc-script` element. The instance is created disabled,
+         * the element's converted attributes are merged over the instance's defaults (which is what
+         * allows plain numeric arrays to be typed against those defaults), and only then is the
+         * declared enabled state applied — so `initialize()` runs with every attribute in place.
+         * @param scriptElement - The `pc-script` element to create the script instance for.
+         * @returns The created script, or `null`.
+         */
+        createScript(scriptElement) {
+            const name = scriptElement.getAttribute('name');
+            if (!name || !this.component)
                 return null;
-            let attributesObject = {};
-            if (attributes) {
-                try {
-                    attributesObject = JSON.parse(attributes);
-                    // Preprocess attributes: convert arrays or strings into vectors, colors, asset references, etc.
-                    attributesObject = this.preprocessAttributes(attributesObject);
+            const script = this.component.create(name, { enabled: false });
+            if (!script)
+                return null;
+            scriptElement._script = script;
+            // The JSON blob first with per-property-shadowed keys stripped, then the per-property
+            // attributes: each property is written exactly once and individual attributes win
+            this.applyAttributes(script, scriptElement.scriptAttributes, this.inlineKeys(scriptElement));
+            this.applyInlineAttributes(script, scriptElement);
+            script.enabled = scriptElement.enabled;
+            scriptElement._onScriptCreated();
+            return script;
+        }
+        /**
+         * Applies the per-property attributes present on a `pc-script` element — any attribute that
+         * is not part of the element's own API or a reserved HTML attribute name. These are applied
+         * after the `attributes` JSON, so an individual attribute always takes precedence over the
+         * blob.
+         * @param script - The script to apply the attributes to.
+         * @param scriptElement - The `pc-script` element holding the attributes.
+         */
+        applyInlineAttributes(script, scriptElement) {
+            var _a;
+            const scriptName = (_a = scriptElement.getAttribute('name')) !== null && _a !== void 0 ? _a : '';
+            for (const attr of Array.from(scriptElement.attributes)) {
+                if (!isReservedAttribute(attr.name)) {
+                    this.setScriptProperty(script, scriptName, attr.name, attr.value);
                 }
-                catch (error) {
-                    console.error(`Error parsing attributes JSON string ${attributes}:`, error);
+            }
+        }
+        /**
+         * Applies a single per-property attribute change to the script of a `pc-script` element.
+         * When the attribute has been removed, the value from the `attributes` JSON (if any) takes
+         * effect again.
+         * @param scriptElement - The `pc-script` element whose attribute changed.
+         * @param attributeName - The name of the changed attribute.
+         */
+        applyScriptProperty(scriptElement, attributeName) {
+            var _a;
+            const script = this.scriptFor(scriptElement);
+            if (!script)
+                return;
+            const value = scriptElement.getAttribute(attributeName);
+            if (value === null) {
+                const key = kebabToCamel(attributeName);
+                const fallback = scriptElement.scriptAttributes[key];
+                if (fallback !== undefined) {
+                    this.applyAttributes(script, { [key]: fallback });
                 }
+                return;
+            }
+            this.setScriptProperty(script, (_a = scriptElement.getAttribute('name')) !== null && _a !== void 0 ? _a : '', attributeName, value);
+        }
+        /**
+         * Applies one attribute string to a script property. A string-typed attribute takes the
+         * value verbatim (so literals like 'color:red' are never hijacked by prefix conversion).
+         * Otherwise, explicit prefixes (`asset:`, `entity:`, `vec2:`, `vec3:`, `vec4:`, `color:`)
+         * carry their own type, and unprefixed values are parsed according to the type of the
+         * attribute's current value. The Script API itself (methods, `entity`, `app`) is never
+         * overwritten, invalid values keep the current value, and exceptions thrown by user
+         * getters/setters are contained so one bad attribute cannot abort the rest of a batch.
+         * @param script - The script to apply the value to.
+         * @param scriptName - The script name, used in warning messages.
+         * @param attributeName - The (kebab-case) element attribute name.
+         * @param value - The attribute value.
+         */
+        setScriptProperty(script, scriptName, attributeName, value) {
+            const key = kebabToCamel(attributeName);
+            try {
+                const current = script[key];
+                if (typeof current === 'function' || SCRIPT_API_MEMBERS.has(key)) {
+                    console.warn(`Ignoring attribute '${attributeName}' on pc-script '${scriptName}' - '${key}' is part of the Script API.`);
+                    return;
+                }
+                if (typeof current === 'string') {
+                    script[key] = value;
+                }
+                else if (matchConversion(value)) {
+                    const converted = this.convertAttributes(value);
+                    // A prefix that failed to resolve or parse comes back as the raw string
+                    // (convertAttributes already warned) - never clobber a typed value with it
+                    if (converted !== value || current === undefined || current === null) {
+                        script[key] = converted;
+                    }
+                }
+                else if (typeof current === 'number') {
+                    script[key] = parseNumber(value, current, attributeName);
+                }
+                else if (typeof current === 'boolean') {
+                    script[key] = parseBool(value, current);
+                }
+                else if (current instanceof playcanvas.Vec2) {
+                    script[key] = parseVec2(value, current, attributeName);
+                }
+                else if (current instanceof playcanvas.Vec3) {
+                    script[key] = parseVec3(value, current, attributeName);
+                }
+                else if (current instanceof playcanvas.Vec4) {
+                    script[key] = parseVec4(value, current, attributeName);
+                }
+                else if (current instanceof playcanvas.Color) {
+                    script[key] = parseColor(value, current, attributeName);
+                }
+                else if (current instanceof playcanvas.Quat) {
+                    script[key] = parseQuat(value, current, attributeName);
+                }
+                else {
+                    const match = findCaseMatch(script, key);
+                    if (match) {
+                        console.warn(`Script '${scriptName}' has no attribute '${key}' - did you mean '${camelToKebab(match)}'? Attribute names are kebab-case.`);
+                        return;
+                    }
+                    console.warn(`Script '${scriptName}' has no typed attribute '${key}' - assigning the raw string from '${attributeName}'.`);
+                    script[key] = value;
+                }
+            }
+            catch (error) {
+                console.warn(`Error applying attribute '${attributeName}' to script '${scriptName}': ${error.message}`);
             }
-            return this.component.create(name, {
-                properties: attributesObject
-            });
         }
         destroyScript(name) {
             if (!this.component)
@@ -5643,23 +6409,40 @@
         }
         handleMutations(mutations) {
             for (const mutation of mutations) {
-                // Handle added nodes
-                mutation.addedNodes.forEach((node) => {
-                    if (node instanceof HTMLElement && node.tagName.toLowerCase() === 'pc-script') {
-                        const scriptName = node.getAttribute('name');
-                        const attributes = node.getAttribute('attributes');
-                        if (scriptName) {
-                            this.createScript(scriptName, attributes);
-                        }
+                // Handle per-property attribute changes on child pc-script elements
+                if (mutation.type === 'attributes') {
+                    const target = mutation.target;
+                    if (target instanceof ScriptElement &&
+                        target.parentElement === this &&
+                        mutation.attributeName &&
+                        !isReservedAttribute(mutation.attributeName)) {
+                        this.applyScriptProperty(target, mutation.attributeName);
                     }
-                });
-                // Handle removed nodes
+                    continue;
+                }
+                // Only direct children are managed - the observer watches the subtree for attribute
+                // changes, but deeper childList records must not create or destroy scripts
+                // (matching initComponent's ':scope > pc-script' contract)
+                if (mutation.target !== this) {
+                    continue;
+                }
+                // Handle removed nodes first, so that replacing a pc-script with a same-named one
+                // destroys the old script before the replacement is created. Only destroy a script
+                // this element actually owns - a duplicate-named element whose own create() failed
+                // must not take down the live script on removal.
                 mutation.removedNodes.forEach((node) => {
-                    if (node instanceof HTMLElement && node.tagName.toLowerCase() === 'pc-script') {
+                    if (node instanceof ScriptElement) {
                         const scriptName = node.getAttribute('name');
-                        if (scriptName) {
+                        if (scriptName && node._script && this.component && this.component.get(scriptName) === node._script) {
                             this.destroyScript(scriptName);
                         }
+                        node._script = null;
+                    }
+                });
+                // Handle added nodes
+                mutation.addedNodes.forEach((node) => {
+                    if (node instanceof ScriptElement) {
+                        this.createScript(node);
                     }
                 });
             }
@@ -5679,87 +6462,6 @@
     }
     customElements.define('pc-scripts', ScriptComponentElement);
 
-    /**
-     * The ScriptElement interface provides properties and methods for manipulating
-     * `<pc-script>` elements. The ScriptElement interface also inherits the properties and
-     * methods of the {@link HTMLElement} interface.
-     */
-    class ScriptElement extends HTMLElement {
-        constructor() {
-            super(...arguments);
-            this._attributes = '{}';
-            this._enabled = true;
-            this._name = '';
-        }
-        /**
-         * Sets the attributes of the script.
-         * @param value - The attributes of the script.
-         */
-        set scriptAttributes(value) {
-            this._attributes = value;
-            this.dispatchEvent(new CustomEvent('scriptattributeschange', {
-                detail: { attributes: value },
-                bubbles: true
-            }));
-        }
-        /**
-         * Gets the attributes of the script.
-         * @returns The attributes of the script.
-         */
-        get scriptAttributes() {
-            return this._attributes;
-        }
-        /**
-         * Sets the enabled state of the script.
-         * @param value - The enabled state of the script.
-         */
-        set enabled(value) {
-            this._enabled = value;
-            this.dispatchEvent(new CustomEvent('scriptenablechange', {
-                detail: { enabled: value },
-                bubbles: true
-            }));
-        }
-        /**
-         * 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);
-
     /**
      * The SoundComponentElement interface provides properties and methods for manipulating
      * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-sounds/ | `<pc-sounds>`} elements.
@@ -5933,25 +6635,25 @@
             super.attributeChangedCallback(name, _oldValue, newValue);
             switch (name) {
                 case 'distance-model':
-                    this.distanceModel = newValue;
+                    this.distanceModel = parseEnum(newValue, ['exponential', 'inverse', 'linear'], 'linear', name);
                     break;
                 case 'max-distance':
-                    this.maxDistance = parseFloat(newValue);
+                    this.maxDistance = parseNumber(newValue, 10000, name);
                     break;
                 case 'pitch':
-                    this.pitch = parseFloat(newValue);
+                    this.pitch = parseNumber(newValue, 1, name);
                     break;
                 case 'positional':
-                    this.positional = this.hasAttribute('positional');
+                    this.positional = parseBool(newValue, false);
                     break;
                 case 'ref-distance':
-                    this.refDistance = parseFloat(newValue);
+                    this.refDistance = parseNumber(newValue, 1, name);
                     break;
                 case 'roll-off-factor':
-                    this.rollOffFactor = parseFloat(newValue);
+                    this.rollOffFactor = parseNumber(newValue, 1, name);
                     break;
                 case 'volume':
-                    this.volume = parseFloat(newValue);
+                    this.volume = parseNumber(newValue, 1, name);
                     break;
             }
         }
@@ -6002,12 +6704,15 @@
             this._onReady();
         }
         disconnectedCallback() {
-            this.soundElement.component.removeSlot(this._name);
+            var _a, _b;
+            // The component is null if the parent <pc-sound> (or the whole <pc-app>) is being
+            // torn down — parents disconnect first and have already removed the component.
+            (_b = (_a = this.soundElement) === null || _a === void 0 ? void 0 : _a.component) === null || _b === void 0 ? void 0 : _b.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');
+                console.warn('pc-sound must be a direct child of a pc-sounds element');
                 return null;
             }
             return soundElement;
@@ -6051,12 +6756,12 @@
             return this._autoPlay;
         }
         /**
-         * Sets the duration of the sound slot.
+         * Sets the duration of the sound slot, in seconds (or `null` to play the whole clip).
          * @param value - The duration.
          */
         set duration(value) {
             this._duration = value;
-            if (this.soundSlot) {
+            if (this.soundSlot && value !== null) {
                 this.soundSlot.duration = value;
             }
         }
@@ -6178,28 +6883,28 @@
                     this.asset = newValue;
                     break;
                 case 'auto-play':
-                    this.autoPlay = this.hasAttribute('auto-play');
+                    this.autoPlay = parseBool(newValue, false);
                     break;
                 case 'duration':
-                    this.duration = parseFloat(newValue);
+                    this.duration = parseNumber(newValue, null, name);
                     break;
                 case 'loop':
-                    this.loop = this.hasAttribute('loop');
+                    this.loop = parseBool(newValue, false);
                     break;
                 case 'name':
                     this.name = newValue;
                     break;
                 case 'overlap':
-                    this.overlap = this.hasAttribute('overlap');
+                    this.overlap = parseBool(newValue, false);
                     break;
                 case 'pitch':
-                    this.pitch = parseFloat(newValue);
+                    this.pitch = parseNumber(newValue, 1, name);
                     break;
                 case 'start-time':
-                    this.startTime = parseFloat(newValue);
+                    this.startTime = parseNumber(newValue, 0, name);
                     break;
                 case 'volume':
-                    this.volume = parseFloat(newValue);
+                    this.volume = parseNumber(newValue, 1, name);
                     break;
             }
         }
@@ -6375,19 +7080,19 @@
                     this.asset = newValue;
                     break;
                 case 'cast-shadows':
-                    this.castShadows = this.hasAttribute('cast-shadows');
+                    this.castShadows = parseBool(newValue, false);
                     break;
                 case 'lod-base-distance':
-                    this.lodBaseDistance = Number(newValue);
+                    this.lodBaseDistance = parseNumber(newValue, 5, name);
                     break;
                 case 'lod-multiplier':
-                    this.lodMultiplier = Number(newValue);
+                    this.lodMultiplier = parseNumber(newValue, 3, name);
                     break;
                 case 'lod-range-min':
-                    this.lodRangeMin = Number(newValue);
+                    this.lodRangeMin = parseNumber(newValue, 0, name);
                     break;
                 case 'lod-range-max':
-                    this.lodRangeMax = Number(newValue);
+                    this.lodRangeMax = parseNumber(newValue, 99, name);
                     break;
             }
         }
@@ -6502,7 +7207,7 @@
             /**
              * The fog type of the scene.
              */
-            this._fog = 'none'; // possible values: 'none', 'linear', 'exp', 'exp2'
+            this._fog = 'none';
             /**
              * The color of the fog.
              */
@@ -6523,15 +7228,20 @@
              * The gravity of the scene.
              */
             this._gravity = new playcanvas.Vec3(0, -9.81, 0);
-            /**
-             * The PlayCanvas scene instance.
-             */
-            this.scene = null;
+            this._scene = null;
+        }
+        /**
+         * The PlayCanvas scene instance. Available once the element is ready — await
+         * {@link whenReady} or the element's `ready()` promise before accessing it.
+         * @returns The scene instance.
+         */
+        get scene() {
+            return this._scene;
         }
         async connectedCallback() {
             var _a;
             await ((_a = this.closestApp) === null || _a === void 0 ? void 0 : _a.ready());
-            this.scene = this.closestApp.app.scene;
+            this._scene = this.closestApp.app.scene;
             this.updateSceneSettings();
             this._onReady();
         }
@@ -6547,7 +7257,8 @@
             }
         }
         /**
-         * Sets the fog type of the scene.
+         * Sets the fog type of the scene. Can be `none`, `linear`, `exp` or `exp2`. Defaults to
+         * `none`.
          * @param value - The fog type.
          */
         set fog(value) {
@@ -6655,22 +7366,22 @@
         attributeChangedCallback(name, _oldValue, newValue) {
             switch (name) {
                 case 'fog':
-                    this.fog = newValue;
+                    this.fog = parseEnum(newValue, ['none', 'linear', 'exp', 'exp2'], 'none', name);
                     break;
                 case 'fog-color':
-                    this.fogColor = parseColor(newValue);
+                    this.fogColor = parseColor(newValue, playcanvas.Color.WHITE, name);
                     break;
                 case 'fog-density':
-                    this.fogDensity = parseFloat(newValue);
+                    this.fogDensity = parseNumber(newValue, 0, name);
                     break;
                 case 'fog-start':
-                    this.fogStart = parseFloat(newValue);
+                    this.fogStart = parseNumber(newValue, 0, name);
                     break;
                 case 'fog-end':
-                    this.fogEnd = parseFloat(newValue);
+                    this.fogEnd = parseNumber(newValue, 1000, name);
                     break;
                 case 'gravity':
-                    this.gravity = parseVec3(newValue);
+                    this.gravity = parseVec3(newValue, new playcanvas.Vec3(0, -9.81, 0), name);
                     break;
                 // ... handle other attributes as well
             }
@@ -6695,6 +7406,7 @@
             this._scale = new playcanvas.Vec3(100, 100, 100);
             this._type = 'infinite';
             this._scene = null;
+            this._appElement = null;
         }
         connectedCallback() {
             this._loadSkybox();
@@ -6702,6 +7414,7 @@
         }
         disconnectedCallback() {
             this._unloadSkybox();
+            this._appElement = null;
         }
         _generateSkybox(asset) {
             if (!this._scene)
@@ -6729,9 +7442,10 @@
             var _a;
             const appElement = await ((_a = this.closestApp) === null || _a === void 0 ? void 0 : _a.ready());
             const app = appElement === null || appElement === void 0 ? void 0 : appElement.app;
-            if (!app) {
+            if (!appElement || !app) {
                 return;
             }
+            this._appElement = appElement;
             const asset = AssetElement.get(this._asset);
             if (!asset) {
                 return;
@@ -6748,16 +7462,22 @@
             }
         }
         _unloadSkybox() {
-            var _a, _b;
-            if (!this._scene)
+            var _a, _b, _c;
+            const scene = this._scene;
+            if (!scene)
+                return;
+            this._scene = null;
+            // If the owning application has already been destroyed (removing a <pc-app>
+            // disconnects it before its children), the scene, graphics device and skybox
+            // textures have all been destroyed along with it — nothing left to clean up.
+            if (!((_a = this._appElement) === null || _a === void 0 ? void 0 : _a.app))
                 return;
-            (_a = this._scene.skybox) === null || _a === void 0 ? void 0 : _a.destroy();
+            (_b = scene.skybox) === null || _b === void 0 ? void 0 : _b.destroy();
             // @ts-ignore
-            this._scene.skybox = null;
-            (_b = this._scene.envAtlas) === null || _b === void 0 ? void 0 : _b.destroy();
+            scene.skybox = null;
+            (_c = scene.envAtlas) === null || _c === void 0 ? void 0 : _c.destroy();
             // @ts-ignore
-            this._scene.envAtlas = null;
-            this._scene = null;
+            scene.envAtlas = null;
         }
         /**
          * Sets the id of the `pc-asset` to use for the skybox.
@@ -6905,25 +7625,25 @@
                     this.asset = newValue;
                     break;
                 case 'center':
-                    this.center = parseVec3(newValue);
+                    this.center = parseVec3(newValue, new playcanvas.Vec3(0, 0.01, 0), name);
                     break;
                 case 'intensity':
-                    this.intensity = parseFloat(newValue);
+                    this.intensity = parseNumber(newValue, 1, name);
                     break;
                 case 'level':
-                    this.level = parseInt(newValue, 10);
+                    this.level = parseNumber(newValue, 0, name);
                     break;
                 case 'lighting':
-                    this.lighting = this.hasAttribute(name);
+                    this.lighting = parseBool(newValue, false);
                     break;
                 case 'rotation':
-                    this.rotation = parseVec3(newValue);
+                    this.rotation = parseVec3(newValue, playcanvas.Vec3.ZERO, name);
                     break;
                 case 'scale':
-                    this.scale = parseVec3(newValue);
+                    this.scale = parseVec3(newValue, new playcanvas.Vec3(100, 100, 100), name);
                     break;
                 case 'type':
-                    this.type = newValue;
+                    this.type = parseEnum(newValue, ['box', 'dome', 'infinite', 'none'], 'infinite', name);
                     break;
             }
         }
@@ -6959,6 +7679,7 @@
     exports.SkyElement = SkyElement;
     exports.SoundComponentElement = SoundComponentElement;
     exports.SoundSlotElement = SoundSlotElement;
+    exports.whenReady = whenReady;
 
 }));
 //# sourceMappingURL=pwc.js.map