@playcanvas/web-components 0.8.2 → 0.9.0

package/dist/pwc.mjs

@@ -1,4 +1,4 @@
-import { basisInitialize, WasmModule, createGraphicsDevice, AppOptions, Keyboard, Mouse, ElementInput, AnimComponentSystem, AnimationComponentSystem, AudioListenerComponentSystem, ButtonComponentSystem, CameraComponentSystem, CollisionComponentSystem, ElementComponentSystem, GSplatComponentSystem, JointComponentSystem, LayoutChildComponentSystem, LayoutGroupComponentSystem, LightComponentSystem, ModelComponentSystem, ParticleSystemComponentSystem, RenderComponentSystem, RigidBodyComponentSystem, ScreenComponentSystem, ScriptComponentSystem, ScrollbarComponentSystem, ScrollViewComponentSystem, SoundComponentSystem, SpriteComponentSystem, ZoneComponentSystem, AnimClipHandler, AnimationHandler, AnimStateGraphHandler, AudioHandler, BinaryHandler, CssHandler, ContainerHandler, CubemapHandler, FolderHandler, FontHandler, GSplatHandler, HierarchyHandler, HtmlHandler, JsonHandler, MaterialHandler, ModelHandler, RenderHandler, ScriptHandler, SceneHandler, ShaderHandler, SpriteHandler, TemplateHandler, TextHandler, TextureAtlasHandler, TextureHandler, SoundManager, Lightmapper, BatchManager, XrManager, AppBase, FILLMODE_FILL_WINDOW, RESOLUTION_AUTO, Picker, MeshInstance, Vec3, Color, Vec4, Quat, Vec2, Entity, Asset, SPRITE_RENDERMODE_SIMPLE, SPRITE_RENDERMODE_SLICED, SPRITE_RENDERMODE_TILED, BUTTON_TRANSITION_MODE_TINT, BUTTON_TRANSITION_MODE_SPRITE_CHANGE, GAMMA_SRGB, GAMMA_NONE, XRTYPE_VR, PROJECTION_ORTHOGRAPHIC, PROJECTION_PERSPECTIVE, TONEMAP_NONE, TONEMAP_LINEAR, TONEMAP_FILMIC, TONEMAP_HEJL, TONEMAP_ACES, TONEMAP_ACES2, TONEMAP_NEUTRAL, ORIENTATION_HORIZONTAL, FITTING_NONE, FITTING_STRETCH, FITTING_SHRINK, FITTING_BOTH, ORIENTATION_VERTICAL, SHADOW_PCF3_32F, SHADOW_PCF1_16F, SHADOW_PCF1_32F, SHADOW_PCF3_16F, SHADOW_PCF5_16F, SHADOW_PCF5_32F, SHADOW_VSM_16F, SHADOW_VSM_32F, SHADOW_PCSS_32F, StandardMaterial, SCALEMODE_BLEND, SCALEMODE_NONE, SCROLL_MODE_BOUNCE, SCROLLBAR_VISIBILITY_SHOW_WHEN_REQUIRED, SCROLLBAR_VISIBILITY_SHOW_ALWAYS, SCROLL_MODE_CLAMP, SCROLL_MODE_INFINITE, EnvLighting, LAYERID_SKYBOX } from 'playcanvas';
+import { basisInitialize, WasmModule, Vec3, Color, Vec4, Quat, Vec2, createGraphicsDevice, AppOptions, Keyboard, Mouse, ElementInput, AnimComponentSystem, AnimationComponentSystem, AudioListenerComponentSystem, ButtonComponentSystem, CameraComponentSystem, CollisionComponentSystem, ElementComponentSystem, GSplatComponentSystem, JointComponentSystem, LayoutChildComponentSystem, LayoutGroupComponentSystem, LightComponentSystem, ModelComponentSystem, ParticleSystemComponentSystem, RenderComponentSystem, RigidBodyComponentSystem, ScreenComponentSystem, ScriptComponentSystem, ScrollbarComponentSystem, ScrollViewComponentSystem, SoundComponentSystem, SpriteComponentSystem, ZoneComponentSystem, AnimClipHandler, AnimationHandler, AnimStateGraphHandler, AudioHandler, BinaryHandler, CssHandler, ContainerHandler, CubemapHandler, FolderHandler, FontHandler, GSplatHandler, HierarchyHandler, HtmlHandler, JsonHandler, MaterialHandler, ModelHandler, RenderHandler, ScriptHandler, SceneHandler, ShaderHandler, SpriteHandler, TemplateHandler, TextHandler, TextureAtlasHandler, TextureHandler, SoundManager, Lightmapper, BatchManager, XrManager, AppBase, FILLMODE_FILL_WINDOW, RESOLUTION_AUTO, Picker, MeshInstance, Entity, Asset, SPRITE_RENDERMODE_SIMPLE, SPRITE_RENDERMODE_SLICED, SPRITE_RENDERMODE_TILED, BUTTON_TRANSITION_MODE_TINT, BUTTON_TRANSITION_MODE_SPRITE_CHANGE, PROJECTION_ORTHOGRAPHIC, PROJECTION_PERSPECTIVE, GAMMA_SRGB, GAMMA_NONE, XRTYPE_VR, TONEMAP_NONE, TONEMAP_LINEAR, TONEMAP_FILMIC, TONEMAP_HEJL, TONEMAP_ACES, TONEMAP_ACES2, TONEMAP_NEUTRAL, ORIENTATION_HORIZONTAL, FITTING_NONE, FITTING_STRETCH, FITTING_SHRINK, FITTING_BOTH, ORIENTATION_VERTICAL, SHADOW_PCF3_32F, SHADOW_PCF1_16F, SHADOW_PCF1_32F, SHADOW_PCF3_16F, SHADOW_PCF5_16F, SHADOW_PCF5_32F, SHADOW_VSM_16F, SHADOW_VSM_32F, SHADOW_PCSS_32F, StandardMaterial, SCALEMODE_BLEND, SCALEMODE_NONE, SCROLL_MODE_BOUNCE, SCROLLBAR_VISIBILITY_SHOW_WHEN_REQUIRED, SCROLLBAR_VISIBILITY_SHOW_ALWAYS, SCROLL_MODE_CLAMP, SCROLL_MODE_INFINITE, EnvLighting, LAYERID_SKYBOX } from 'playcanvas';
 
 /**
  * Base class for all PlayCanvas Web Components that initialize asynchronously.
@@ -20,21 +20,51 @@ class AsyncElement extends HTMLElement {
         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
@@ -70,6 +100,393 @@ class ModuleElement extends HTMLElement {
 }
 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 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 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 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 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 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 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 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.
@@ -77,6 +494,14 @@ customElements.define('pc-module', ModuleElement);
  * {@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.
      *
@@ -109,10 +534,7 @@ class AppElement extends AsyncElement {
             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);
     }
@@ -204,7 +626,7 @@ class AppElement extends AsyncElement {
         createOptions.lightmapper = Lightmapper;
         createOptions.batchManager = BatchManager;
         createOptions.xr = XrManager;
-        this.app = new AppBase(this._canvas);
+        this._app = new AppBase(this._canvas);
         this.app.init(createOptions);
         this.app.setCanvasFillMode(FILLMODE_FILL_WINDOW);
         this.app.setCanvasResolution(RESOLUTION_AUTO);
@@ -247,7 +669,7 @@ class AppElement extends AsyncElement {
         // Clean up the application
         if (this.app) {
             this.app.destroy();
-            this.app = null;
+            this._app = null;
         }
         // Remove event listeners
         window.removeEventListener('resize', this._onWindowResize);
@@ -273,6 +695,13 @@ class AppElement extends AsyncElement {
         ['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() {
@@ -289,6 +718,13 @@ class AppElement extends AsyncElement {
             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) {
@@ -473,324 +909,65 @@ class AppElement extends AsyncElement {
     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 Color().fromString(hexColor);
-    }
-    if (value.startsWith('#')) {
-        return new Color().fromString(value);
-    }
-    const components = value.split(' ').map(Number);
-    return new 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 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 Vec2(components);
-};
-/**
- * Parse a Vec3 string into a Vec3 object. String can be in the format of 'x,y,z'.
- *
- * @param value - The Vec3 string to parse.
- * @returns The parsed Vec3 object.
- */
-const parseVec3 = (value) => {
-    const components = value.split(' ').map(Number);
-    return new Vec3(components);
-};
-/**
- * Parse a Vec4 string into a Vec4 object. String can be in the format of 'x,y,z,w'.
- *
- * @param value - The Vec4 string to parse.
- * @returns The parsed Vec4 object.
- */
-const parseVec4 = (value) => {
-    const components = value.split(' ').map(Number);
-    return new Vec4(components);
-};
-/**
- * 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
@@ -830,67 +1007,41 @@ class EntityElement extends AsyncElement {
          */
         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 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 Entity(this.getAttribute('name') || this._name, app);
+        this._entity = entity;
+        entity.enabled = parseBool(this.getAttribute('enabled'), true);
+        entity.setLocalPosition(parseVec3(this.getAttribute('position'), Vec3.ZERO, 'position'));
+        entity.setLocalEulerAngles(parseVec3(this.getAttribute('rotation'), Vec3.ZERO, 'rotation'));
+        entity.setLocalScale(parseVec3(this.getAttribute('scale'), 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)
@@ -930,11 +1081,11 @@ class EntityElement extends AsyncElement {
             // 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;
         }
     }
@@ -1041,6 +1192,30 @@ class EntityElement extends AsyncElement {
     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',
@@ -1059,19 +1234,19 @@ class EntityElement extends AsyncElement {
     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, Vec3.ZERO, name);
                 break;
             case 'rotation':
-                this.rotation = parseVec3(newValue);
+                this.rotation = parseVec3(newValue, Vec3.ZERO, name);
                 break;
             case 'scale':
-                this.scale = parseVec3(newValue);
+                this.scale = parseVec3(newValue, Vec3.ONE, name);
                 break;
             case 'tags':
                 this.tags = newValue.split(',').map(tag => tag.trim());
@@ -1081,21 +1256,7 @@ class EntityElement extends AsyncElement {
             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;
         }
     }
@@ -1120,7 +1281,7 @@ class EntityElement extends AsyncElement {
     }
     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);
@@ -1352,16 +1513,57 @@ const processBufferView = (gltfBuffer, buffers, continuation) => {
  * {@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();
     }
@@ -1440,11 +1642,11 @@ class AssetElement extends HTMLElement {
             }
             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, 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 : SPRITE_RENDERMODE_SIMPLE;
@@ -1454,7 +1656,10 @@ class AssetElement extends HTMLElement {
         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;
         }
@@ -1483,9 +1688,9 @@ class AssetElement extends HTMLElement {
     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);
         }
     }
 }
@@ -1507,6 +1712,7 @@ class ComponentElement extends AsyncElement {
         super();
         this._enabled = true;
         this._component = null;
+        this._appElement = null;
         this._componentName = componentName;
     }
     // Method to be overridden by subclasses to provide initial component data
@@ -1515,28 +1721,43 @@ class ComponentElement extends AsyncElement {
     }
     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;
     }
@@ -1563,7 +1784,7 @@ class ComponentElement extends AsyncElement {
     attributeChangedCallback(name, _oldValue, newValue) {
         switch (name) {
             case 'enabled':
-                this.enabled = newValue !== 'false';
+                this.enabled = parseBool(newValue, true);
                 break;
         }
     }
@@ -1611,7 +1832,7 @@ class ButtonComponentElement extends ComponentElement {
         this._active = true;
         this._image = '';
         this._hitPadding = new Vec4(0, 0, 0, 0);
-        this._transitionMode = BUTTON_TRANSITION_MODE_TINT;
+        this._transitionMode = 'tint';
         this._hoverTint = new Color(1, 1, 1, 1);
         this._pressedTint = new Color(1, 1, 1, 1);
         this._inactiveTint = new Color(1, 1, 1, 1);
@@ -1628,7 +1849,7 @@ class ButtonComponentElement extends ComponentElement {
         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,
@@ -1718,13 +1939,15 @@ class ButtonComponentElement extends ComponentElement {
         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 : BUTTON_TRANSITION_MODE_TINT;
         }
     }
     /**
@@ -1936,46 +2159,46 @@ class ButtonComponentElement extends ComponentElement {
         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, Vec4.ZERO, name);
                 break;
             case 'transition-mode':
-                this.transitionMode = parseEnum(newValue, transitionModes, BUTTON_TRANSITION_MODE_TINT);
+                this.transitionMode = parseEnum(newValue, transitionModes, 'tint', name);
                 break;
             case 'hover-tint':
-                this.hoverTint = parseColor(newValue);
+                this.hoverTint = parseColor(newValue, Color.WHITE, name);
                 break;
             case 'pressed-tint':
-                this.pressedTint = parseColor(newValue);
+                this.pressedTint = parseColor(newValue, Color.WHITE, name);
                 break;
             case 'inactive-tint':
-                this.inactiveTint = parseColor(newValue);
+                this.inactiveTint = parseColor(newValue, 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;
         }
     }
@@ -2036,7 +2259,7 @@ class CameraComponentElement extends ComponentElement {
             gammaCorrection: this._gamma === 'srgb' ? GAMMA_SRGB : GAMMA_NONE,
             horizontalFov: this._horizontalFov,
             nearClip: this._nearClip,
-            orthographic: this._orthographic,
+            projection: this._orthographic ? PROJECTION_ORTHOGRAPHIC : PROJECTION_PERSPECTIVE,
             orthoHeight: this._orthoHeight,
             priority: this._priority,
             rect: this._rect,
@@ -2414,58 +2637,58 @@ class CameraComponentElement extends ComponentElement {
         super.attributeChangedCallback(name, _oldValue, newValue);
         switch (name) {
             case 'clear-color':
-                this.clearColor = parseColor(newValue);
+                this.clearColor = parseColor(newValue, new 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 !== 'false';
+                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 Vec4(0, 0, 1, 1), name);
                 break;
             case 'scissor-rect':
-                this.scissorRect = parseVec4(newValue);
+                this.scissorRect = parseVec4(newValue, new Vec4(0, 0, 1, 1), name);
                 break;
             case 'tonemap':
-                this.tonemap = newValue;
+                this.tonemap = parseEnum(newValue, tonemaps, 'none', name);
                 break;
         }
     }
@@ -2591,28 +2814,28 @@ class CollisionComponentElement extends ComponentElement {
         super.attributeChangedCallback(name, _oldValue, newValue);
         switch (name) {
             case 'angular-offset':
-                this.angularOffset = parseQuat(newValue);
+                this.angularOffset = parseQuat(newValue, 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 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, 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;
         }
     }
@@ -2632,13 +2855,13 @@ class ElementComponentElement extends ComponentElement {
     constructor() {
         super('element');
         this._anchor = new Vec4(0.5, 0.5, 0.5, 0.5);
-        this._asset = '';
         this._autoWidth = true;
         this._autoHeight = true;
         this._autoFitWidth = false;
         this._autoFitHeight = false;
         this._color = new Color(1, 1, 1, 1);
         this._enableMarkup = false;
+        this._fontAsset = '';
         this._fontSize = 32;
         this._maxFontSize = 32;
         this._minFontSize = 8;
@@ -2701,7 +2924,7 @@ class ElementComponentElement extends ComponentElement {
         };
         // 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;
         }
@@ -2747,24 +2970,6 @@ class ElementComponentElement extends ComponentElement {
     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).
@@ -2835,6 +3040,24 @@ class ElementComponentElement extends ComponentElement {
     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.
@@ -3184,13 +3407,13 @@ class ElementComponentElement extends ComponentElement {
         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',
@@ -3215,64 +3438,64 @@ class ElementComponentElement extends ComponentElement {
         super.attributeChangedCallback(name, _oldValue, newValue);
         switch (name) {
             case 'anchor':
-                this.anchor = parseVec4(newValue);
-                break;
-            case 'asset':
-                this.asset = newValue;
+                this.anchor = parseVec4(newValue, new 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, 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 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;
@@ -3281,16 +3504,16 @@ class ElementComponentElement extends ComponentElement {
                 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;
         }
     }
@@ -3472,25 +3695,25 @@ class LayoutChildComponentElement extends ComponentElement {
         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;
         }
     }
@@ -3519,26 +3742,26 @@ class LayoutGroupComponentElement extends ComponentElement {
     /** @ignore */
     constructor() {
         super('layoutgroup');
-        this._orientation = ORIENTATION_HORIZONTAL;
+        this._orientation = 'horizontal';
         this._reverseX = false;
         this._reverseY = false;
         this._alignment = new Vec2(0, 1);
         this._padding = new Vec4(0, 0, 0, 0);
         this._spacing = new Vec2(0, 0);
-        this._widthFitting = FITTING_NONE;
-        this._heightFitting = 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
         };
     }
@@ -3550,13 +3773,15 @@ class LayoutGroupComponentElement extends ComponentElement {
         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 : ORIENTATION_HORIZONTAL;
         }
     }
     /**
@@ -3652,14 +3877,15 @@ class LayoutGroupComponentElement extends ComponentElement {
         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 : FITTING_NONE;
         }
     }
     /**
@@ -3670,14 +3896,15 @@ class LayoutGroupComponentElement extends ComponentElement {
         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 : FITTING_NONE;
         }
     }
     /**
@@ -3722,31 +3949,31 @@ class LayoutGroupComponentElement extends ComponentElement {
         super.attributeChangedCallback(name, _oldValue, newValue);
         switch (name) {
             case 'orientation':
-                this.orientation = parseEnum(newValue, orientations$1, 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 Vec2(0, 1), name);
                 break;
             case 'padding':
-                this.padding = parseVec4(newValue);
+                this.padding = parseVec4(newValue, Vec4.ZERO, name);
                 break;
             case 'spacing':
-                this.spacing = parseVec2(newValue);
+                this.spacing = parseVec2(newValue, Vec2.ZERO, name);
                 break;
             case 'width-fitting':
-                this.widthFitting = parseEnum(newValue, fittings, FITTING_NONE);
+                this.widthFitting = parseEnum(newValue, fittings, 'none', name);
                 break;
             case 'height-fitting':
-                this.heightFitting = parseEnum(newValue, fittings, FITTING_NONE);
+                this.heightFitting = parseEnum(newValue, fittings, 'none', name);
                 break;
             case 'wrap':
-                this.wrap = newValue !== 'false';
+                this.wrap = parseBool(newValue, false);
                 break;
         }
     }
@@ -4042,14 +4269,11 @@ class LightComponentElement extends ComponentElement {
         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;
@@ -4192,61 +4416,61 @@ class LightComponentElement extends ComponentElement {
         super.attributeChangedCallback(name, _oldValue, newValue);
         switch (name) {
             case 'color':
-                this.color = parseColor(newValue);
+                this.color = parseColor(newValue, 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;
         }
     }
@@ -4390,6 +4614,10 @@ customElements.define('pc-particles', ParticleSystemComponentElement);
  * {@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() {
@@ -4401,6 +4629,26 @@ class MaterialElement extends HTMLElement {
         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 StandardMaterial();
         this.material.glossInvert = false;
@@ -4483,7 +4731,7 @@ class MaterialElement extends HTMLElement {
     attributeChangedCallback(name, _oldValue, newValue) {
         switch (name) {
             case 'diffuse':
-                this.diffuse = parseColor(newValue);
+                this.diffuse = parseColor(newValue, Color.WHITE, name);
                 break;
             case 'diffuse-map':
                 this.diffuseMap = newValue;
@@ -4508,6 +4756,10 @@ customElements.define('pc-material', MaterialElement);
  * 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 {
@@ -4517,7 +4769,7 @@ class RenderComponentElement extends ComponentElement {
         this._castShadows = true;
         this._material = '';
         this._receiveShadows = true;
-        this._type = 'asset';
+        this._type = 'box';
     }
     getInitialComponentData() {
         return {
@@ -4609,16 +4861,16 @@ class RenderComponentElement extends ComponentElement {
         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;
         }
     }
@@ -4782,31 +5034,31 @@ class RigidBodyComponentElement extends ComponentElement {
         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, 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, 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;
         }
     }
@@ -4918,22 +5170,22 @@ class ScreenComponentElement extends ComponentElement {
         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 Vec2(640, 320), name);
                 break;
             case 'resolution':
-                this.resolution = parseVec2(newValue);
+                this.resolution = parseVec2(newValue, new 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;
         }
     }
@@ -4956,14 +5208,14 @@ class ScrollbarComponentElement extends ComponentElement {
     /** @ignore */
     constructor() {
         super('scrollbar');
-        this._orientation = 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
         };
@@ -4981,13 +5233,15 @@ class ScrollbarComponentElement extends ComponentElement {
         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 : ORIENTATION_HORIZONTAL;
         }
     }
     /**
@@ -5063,13 +5317,13 @@ class ScrollbarComponentElement extends ComponentElement {
         super.attributeChangedCallback(name, _oldValue, newValue);
         switch (name) {
             case 'orientation':
-                this.orientation = parseEnum(newValue, orientations, 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;
@@ -5102,13 +5356,13 @@ class ScrollViewComponentElement extends ComponentElement {
         super('scrollview');
         this._horizontal = true;
         this._vertical = true;
-        this._scrollMode = SCROLL_MODE_BOUNCE;
+        this._scrollMode = 'bounce';
         this._bounceAmount = 0.1;
         this._friction = 0.05;
         this._useMouseWheel = true;
         this._mouseWheelSensitivity = new Vec2(1, 1);
-        this._horizontalScrollbarVisibility = SCROLLBAR_VISIBILITY_SHOW_WHEN_REQUIRED;
-        this._verticalScrollbarVisibility = SCROLLBAR_VISIBILITY_SHOW_WHEN_REQUIRED;
+        this._horizontalScrollbarVisibility = 'when-required';
+        this._verticalScrollbarVisibility = 'when-required';
         this._viewport = '';
         this._content = '';
         this._horizontalScrollbar = '';
@@ -5118,13 +5372,13 @@ class ScrollViewComponentElement extends ComponentElement {
         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) {
@@ -5187,13 +5441,14 @@ class ScrollViewComponentElement extends ComponentElement {
     }
     /**
      * 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 : SCROLL_MODE_BOUNCE;
         }
     }
     /**
@@ -5274,13 +5529,15 @@ class ScrollViewComponentElement extends ComponentElement {
         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 : SCROLLBAR_VISIBILITY_SHOW_WHEN_REQUIRED;
         }
     }
     /**
@@ -5291,13 +5548,15 @@ class ScrollViewComponentElement extends ComponentElement {
         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 : SCROLLBAR_VISIBILITY_SHOW_WHEN_REQUIRED;
         }
     }
     /**
@@ -5405,31 +5664,31 @@ class ScrollViewComponentElement extends ComponentElement {
         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, 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, Vec2.ONE, name);
                 break;
             case 'horizontal-scrollbar-visibility':
-                this.horizontalScrollbarVisibility = parseEnum(newValue, visibilities, SCROLLBAR_VISIBILITY_SHOW_WHEN_REQUIRED);
+                this.horizontalScrollbarVisibility = parseEnum(newValue, visibilities, 'when-required', name);
                 break;
             case 'vertical-scrollbar-visibility':
-                this.verticalScrollbarVisibility = parseEnum(newValue, visibilities, SCROLLBAR_VISIBILITY_SHOW_WHEN_REQUIRED);
+                this.verticalScrollbarVisibility = parseEnum(newValue, visibilities, 'when-required', name);
                 break;
             case 'viewport':
                 this.viewport = newValue;
@@ -5437,17 +5696,347 @@ class ScrollViewComponentElement extends ComponentElement {
             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 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, Vec2)],
+    ['vec3', vectorConversion(3, Vec3)],
+    ['vec4', vectorConversion(4, 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.
@@ -5462,83 +6051,46 @@ class ScriptComponentElement extends ComponentElement {
         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 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 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 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 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 = {};
@@ -5550,87 +6102,301 @@ class ScriptComponentElement extends ComponentElement {
         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 Vec2 || value instanceof Vec3 || value instanceof Vec4 || value instanceof Color || value instanceof 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 Vec2 && value.length === 2)
+                return new Vec2(value);
+            if (current instanceof Vec3 && value.length === 3)
+                return new Vec3(value);
+            if (current instanceof Vec4 && value.length === 4)
+                return new Vec4(value);
+            if (current instanceof Color && (value.length === 3 || value.length === 4))
+                return new Color(value);
+            if (current instanceof Quat && value.length === 3)
+                return new 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 Vec2) {
+                script[key] = parseVec2(value, current, attributeName);
+            }
+            else if (current instanceof Vec3) {
+                script[key] = parseVec3(value, current, attributeName);
+            }
+            else if (current instanceof Vec4) {
+                script[key] = parseVec4(value, current, attributeName);
+            }
+            else if (current instanceof Color) {
+                script[key] = parseColor(value, current, attributeName);
+            }
+            else if (current instanceof 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)
@@ -5639,23 +6405,40 @@ class ScriptComponentElement extends ComponentElement {
     }
     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);
                 }
             });
         }
@@ -5675,87 +6458,6 @@ class ScriptComponentElement extends ComponentElement {
 }
 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.
@@ -5929,25 +6631,25 @@ class SoundComponentElement extends ComponentElement {
         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;
         }
     }
@@ -5998,12 +6700,15 @@ class SoundSlotElement extends AsyncElement {
         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;
@@ -6047,12 +6752,12 @@ class SoundSlotElement extends AsyncElement {
         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;
         }
     }
@@ -6174,28 +6879,28 @@ class SoundSlotElement extends AsyncElement {
                 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;
         }
     }
@@ -6371,19 +7076,19 @@ class GSplatComponentElement extends ComponentElement {
                 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;
         }
     }
@@ -6498,7 +7203,7 @@ class SceneElement extends AsyncElement {
         /**
          * The fog type of the scene.
          */
-        this._fog = 'none'; // possible values: 'none', 'linear', 'exp', 'exp2'
+        this._fog = 'none';
         /**
          * The color of the fog.
          */
@@ -6519,15 +7224,20 @@ class SceneElement extends AsyncElement {
          * The gravity of the scene.
          */
         this._gravity = new 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();
     }
@@ -6543,7 +7253,8 @@ class SceneElement extends AsyncElement {
         }
     }
     /**
-     * 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) {
@@ -6651,22 +7362,22 @@ class SceneElement extends AsyncElement {
     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, 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 Vec3(0, -9.81, 0), name);
                 break;
             // ... handle other attributes as well
         }
@@ -6691,6 +7402,7 @@ class SkyElement extends AsyncElement {
         this._scale = new Vec3(100, 100, 100);
         this._type = 'infinite';
         this._scene = null;
+        this._appElement = null;
     }
     connectedCallback() {
         this._loadSkybox();
@@ -6698,6 +7410,7 @@ class SkyElement extends AsyncElement {
     }
     disconnectedCallback() {
         this._unloadSkybox();
+        this._appElement = null;
     }
     _generateSkybox(asset) {
         if (!this._scene)
@@ -6725,9 +7438,10 @@ class SkyElement extends AsyncElement {
         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;
@@ -6744,16 +7458,22 @@ class SkyElement extends AsyncElement {
         }
     }
     _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.
@@ -6901,30 +7621,30 @@ class SkyElement extends AsyncElement {
                 this.asset = newValue;
                 break;
             case 'center':
-                this.center = parseVec3(newValue);
+                this.center = parseVec3(newValue, new 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, Vec3.ZERO, name);
                 break;
             case 'scale':
-                this.scale = parseVec3(newValue);
+                this.scale = parseVec3(newValue, new Vec3(100, 100, 100), name);
                 break;
             case 'type':
-                this.type = newValue;
+                this.type = parseEnum(newValue, ['box', 'dome', 'infinite', 'none'], 'infinite', name);
                 break;
         }
     }
 }
 customElements.define('pc-sky', SkyElement);
 
-export { AppElement, AssetElement, AsyncElement, ButtonComponentElement, CameraComponentElement, CollisionComponentElement, ComponentElement, ElementComponentElement, EntityElement, GSplatComponentElement, LayoutChildComponentElement, LayoutGroupComponentElement, LightComponentElement, ListenerComponentElement, MaterialElement, ModelElement, ModuleElement, ParticleSystemComponentElement, RenderComponentElement, RigidBodyComponentElement, SceneElement, ScreenComponentElement, ScriptComponentElement, ScriptElement, ScrollViewComponentElement, ScrollbarComponentElement, SkyElement, SoundComponentElement, SoundSlotElement };
+export { AppElement, AssetElement, AsyncElement, ButtonComponentElement, CameraComponentElement, CollisionComponentElement, ComponentElement, ElementComponentElement, EntityElement, GSplatComponentElement, LayoutChildComponentElement, LayoutGroupComponentElement, LightComponentElement, ListenerComponentElement, MaterialElement, ModelElement, ModuleElement, ParticleSystemComponentElement, RenderComponentElement, RigidBodyComponentElement, SceneElement, ScreenComponentElement, ScriptComponentElement, ScriptElement, ScrollViewComponentElement, ScrollbarComponentElement, SkyElement, SoundComponentElement, SoundSlotElement, whenReady };
 //# sourceMappingURL=pwc.mjs.map