@playcanvas/web-components 0.15.0 → 0.17.0

package/dist/pwc.js

@@ -31,13 +31,13 @@
             return this.parentElement?.closest('pc-app') ?? null;
         }
         /**
-         * The nearest ancestor element that fronts an entity — `<pc-entity>` or `<pc-node>` — or
-         * `null` if this element has no such ancestor. The search starts at the parent, so an element
-         * never resolves to itself.
+         * The nearest ancestor element that fronts an entity — `<pc-entity>`, `<pc-model>` or
+         * `<pc-node>` — or `null` if this element has no such ancestor. The search starts at the
+         * parent, so an element never resolves to itself.
          * @returns The closest entity-fronting element, or `null`.
          */
         get closestEntity() {
-            return this.parentElement?.closest('pc-entity, pc-node') ?? null;
+            return this.parentElement?.closest('pc-entity, pc-model, pc-node') ?? null;
         }
         /**
          * Called when the element is fully initialized and ready. Subclasses should call this when
@@ -111,9 +111,9 @@
     }
 
     /**
-     * The ModuleElement interface provides properties and methods for manipulating
-     * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-module/ | `<pc-module>`}
-     * elements. The ModuleElement interface also inherits the properties and methods of the
+     * The WasmElement interface provides properties and methods for manipulating
+     * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-wasm/ | `<pc-wasm>`}
+     * elements. The WasmElement interface also inherits the properties and methods of the
      * {@link AsyncElement} interface.
      *
      * The attributes are read once, when the module starts loading - on the element's first
@@ -122,7 +122,7 @@
      * modules configure engine-global state that never unloads, so readiness is not re-armed by
      * removing the element, and a re-inserted element does not load again.
      *
-     * A `<pc-module>` without a `name` warns and never becomes ready; a containing `<pc-app>` still
+     * A `<pc-wasm>` without a `name` warns and never becomes ready; a containing `<pc-app>` still
      * boots.
      *
      * @attribute {string} name - The name of the WebAssembly module to configure, e.g. `Basis` or
@@ -132,7 +132,7 @@
      * @attribute {string} fallback - The URL of the module's asm.js fallback script, used when
      * WebAssembly is unavailable.
      */
-    class ModuleElement extends AsyncElement {
+    class WasmElement extends AsyncElement {
         _loadPromise = null;
         connectedCallback() {
             this._getLoadPromise();
@@ -140,7 +140,7 @@
         async _loadModule() {
             const name = this.getAttribute('name');
             if (!name) {
-                console.warn("pc-module requires a 'name' attribute - no module was configured");
+                console.warn("pc-wasm requires a 'name' attribute - no module was configured");
                 return;
             }
             const config = {
@@ -175,7 +175,7 @@
             return this._loadPromise;
         }
     }
-    customElements.define('pc-module', ModuleElement);
+    customElements.define('pc-wasm', WasmElement);
 
     /** Covers the 0.2s opacity transition; jsdom never fires transitionend, so removal is timed. */
     const REMOVAL_DELAY_MS = 250;
@@ -732,6 +732,12 @@
 
     /** The pointer event types the application synthesizes on `<pc-entity>` elements via picking. */
     const pointerEventTypes = ['pointermove', 'pointerdown', 'pointerup', 'pointerenter', 'pointerleave'];
+    /**
+     * The event types whose listeners make an element a hover target. Hover resolution walks past
+     * elements listening for none of them, so a silent element never swallows an ancestor's
+     * enter/leave pair.
+     */
+    const hoverEventTypes = ['pointerenter', 'pointerleave', 'pointermove'];
     /**
      * Gives `pc-app` the sizing contract of a replaced element (`<video>`, `<img>`): a block-level
      * box that the page's CSS sizes, defaulting to the canvas's own 300x150 intrinsic size, with the
@@ -806,9 +812,9 @@
         _bootGeneration = 0;
         /**
          * The elements backing this application's entities, keyed by the entity itself. Registered
-         * by EntityElement at creation (and NodeElement at binding) and removed when an entity is
-         * destroyed or unbound, this joins engine scene nodes back to their owning elements by
-         * identity - never by name.
+         * by entity-owning elements at creation (pc-entity, and pc-model for its host) and by
+         * NodeElement at binding, and removed when an entity is destroyed or unbound, this joins
+         * engine scene nodes back to their owning elements by identity - never by name.
          */
         _entityElements = new Map();
         _picker = null;
@@ -887,7 +893,7 @@
             // there, leaving the element permanently unready: no canvas, no entities, no application.
             //
             // Upgrading is the fix here rather than skipping whatever has not upgraded, because a
-            // <pc-module> is the one child that nothing else ever builds on its own behalf - skipping
+            // <pc-wasm> is the one child that nothing else ever builds on its own behalf - skipping
             // it would drop the wasm module the app asked for, silently and only for cloned apps.
             // Upgrading runs each descendant's connectedCallback synchronously, a few lines earlier
             // than the parser's path runs them but into the same state they see there: no application
@@ -896,10 +902,10 @@
             // as any other disconnect is. An already-upgraded subtree - every other insertion path -
             // is left completely untouched.
             customElements.upgrade(this);
-            // Get all pc-module elements that are direct children of the pc-app element
-            const moduleElements = this.querySelectorAll(':scope > pc-module');
+            // Get all pc-wasm elements that are direct children of the pc-app element
+            const wasmElements = this.querySelectorAll(':scope > pc-wasm');
             // Wait for all modules to load
-            await Promise.all(Array.from(moduleElements).map((module) => module._getLoadPromise()));
+            await Promise.all(Array.from(wasmElements).map((element) => element._getLoadPromise()));
             // The element may have been removed while the modules loaded. Nothing beyond the loading
             // bar exists yet, and disconnectedCallback has already destroyed that.
             if (generation !== this._bootGeneration) {
@@ -1069,14 +1075,15 @@
             Array.from(materialElements).forEach((materialElement) => {
                 materialElement._createMaterial();
             });
-            // Create all entities
-            const entityElements = this.querySelectorAll('pc-entity');
-            Array.from(entityElements).forEach((entityElement) => {
-                entityElement._createEntity(app);
+            // Create all entities. pc-model joins the sweep because it owns a host entity of its
+            // own; its instantiated content arrives later, beneath that host.
+            const ownerElements = this.querySelectorAll('pc-entity, pc-model');
+            Array.from(ownerElements).forEach((ownerElement) => {
+                ownerElement._createEntity(app);
             });
             // Build hierarchy
-            entityElements.forEach((entityElement) => {
-                entityElement._buildHierarchy(app);
+            ownerElements.forEach((ownerElement) => {
+                ownerElement._buildHierarchy(app);
             });
             // Building the hierarchy dispatched each entity's ready event synchronously, and a
             // listener may have removed the element. The sweep itself degrades safely - destroying
@@ -1187,7 +1194,7 @@
             // created from onpointer* attributes when their elements were first upgraded, or
             // listeners carried over from before a re-boot)
             pointerEventTypes.forEach((type) => {
-                const anyListeners = Array.from(this.querySelectorAll('pc-entity, pc-node')).some((entity) => entity._hasListeners(type));
+                const anyListeners = Array.from(this.querySelectorAll('pc-entity, pc-model, pc-node')).some((entity) => entity._hasListeners(type));
                 if (anyListeners) {
                     this._onPointerListenerAdded(type);
                 }
@@ -1237,10 +1244,10 @@
             this._entityElements.delete(entity);
         }
         /**
-         * Returns the `<pc-entity>` or `<pc-node>` element whose backing entity is `entity`, or
-         * `null` if the entity is not fronted by an element of this application - for example, an
-         * unbound node inside a model's instantiated hierarchy, or an entity created through the
-         * engine API.
+         * Returns the `<pc-entity>`, `<pc-model>` or `<pc-node>` element whose backing entity is
+         * `entity`, or `null` if the entity is not fronted by an element of this application - for
+         * example, an unbound node inside a model's instantiated hierarchy, or an entity created
+         * through the engine API.
          *
          * @param entity - The entity to look up.
          * @returns The element fronting the entity, or `null`.
@@ -1249,18 +1256,19 @@
             return this._entityElements.get(entity) ?? null;
         }
         /**
-         * Resolves the element that owns a picked node: the nearest node up the parent chain -
-         * starting with the node itself - that is fronted by a `<pc-entity>` or `<pc-node>` of this
-         * application. A hit inside a model's instantiated hierarchy therefore resolves to the
-         * nearest bound `<pc-node>`, or failing that the element hosting the model.
+         * Resolves the element that owns hover for a picked node: the nearest node up the parent
+         * chain - starting with the node itself - whose element listens for any of the hover event
+         * types. Skipping silent elements matches {@link _elementWithListener}, so a registered
+         * element with no hover listeners (a `<pc-model>` host, a plain child entity) is transparent
+         * to hover rather than swallowing a listening ancestor's enter/leave pair.
          *
          * @param node - The picked node, or `null`.
-         * @returns The owning element, or `null`.
+         * @returns The hover-owning element, or `null`.
          */
-        _elementFromNode(node) {
+        _hoverTarget(node) {
             while (node !== null) {
                 const element = this._entityElements.get(node);
-                if (element) {
+                if (element && hoverEventTypes.some((type) => element._hasListeners(type))) {
                     return element;
                 }
                 node = node.parent;
@@ -1396,9 +1404,10 @@
             const node = await this._pickNode(event);
             if (token !== this._pickToken || !this._picker)
                 return;
-            // The hovered element is the nearest one up the node's parent chain, listening or not -
-            // dispatch is gated per event type below
-            const newHoverEntity = this._elementFromNode(node);
+            // The hovered element is the nearest one up the node's parent chain with a hover
+            // listener - the nearest-listener rule down/up use. Dispatch is still gated per event
+            // type below: having any hover listener selects the target, each event needs its own.
+            const newHoverEntity = this._hoverTarget(node);
             // Handle enter/leave events
             if (this._hoveredEntity !== newHoverEntity) {
                 if (this._hoveredEntity && this._hoveredEntity._hasListeners('pointerleave')) {
@@ -1450,7 +1459,7 @@
             }
         }
         _onPointerListenerRemoved(type) {
-            const hasListeners = Array.from(this.querySelectorAll('pc-entity, pc-node')).some((entity) => entity._hasListeners(type));
+            const hasListeners = Array.from(this.querySelectorAll('pc-entity, pc-model, pc-node')).some((entity) => entity._hasListeners(type));
             if (!hasListeners && this._canvas) {
                 this._hasPointerListeners[type] = false;
                 const handler = type === 'pointerenter' || type === 'pointerleave'
@@ -1641,11 +1650,12 @@
         'onpointermove'
     ];
     /**
-     * The base class for elements that front an engine {@link Entity}: `<pc-entity>`, which creates
-     * one, and `<pc-node>`, which binds to one inside a model's instantiated hierarchy. It carries
-     * what both need — the `entity` contract, registration with the owning application (which joins
-     * picked scene nodes back to elements by identity, never by name), and the pointer listener
-     * bookkeeping that lets the application lazily attach its canvas handlers.
+     * The base class for elements that front an engine {@link Entity}: `<pc-entity>` and
+     * `<pc-model>`, which create one, and `<pc-node>`, which binds to one inside a model's
+     * instantiated hierarchy. It carries what all of them need — the `entity` contract, registration
+     * with the owning application (which joins picked scene nodes back to elements by identity,
+     * never by name), and the pointer listener bookkeeping that lets the application lazily attach
+     * its canvas handlers.
      */
     class EntityBaseElement extends AsyncElement {
         _entity = null;
@@ -1748,17 +1758,17 @@
     }
 
     /**
-     * Creates and parents the entities of every descendant `<pc-entity>` of `root`, in two passes so
-     * that no parent's existence depends on document order. Called wherever a subtree could not build
-     * itself: an element inserted into an application that is already running, and a `<pc-node>` whose
-     * children waited for it to bind.
+     * Creates and parents the entities of every descendant entity-owning element of `root`, in two
+     * passes so that no parent's existence depends on document order. Called wherever a subtree could
+     * not build itself: an element inserted into an application that is already running, and a
+     * `<pc-node>` whose children waited for it to bind.
      *
      * Descendants that are not yet custom elements are skipped, because there is nothing useful to do
      * for them and reaching for `_createEntity` would throw. A subtree cloned from a `<template>`
      * arrives entirely unupgraded — template content lives in an inert document, where custom element
      * definitions are never looked up — and appending the clone upgrades its elements in tree order,
      * an element before its descendants. So a sweep from an element's own `connectedCallback` sees
-     * plain `HTMLElement`s below it. Each becomes an `EntityElement` moments later and its own
+     * plain `HTMLElement`s below it. Each becomes an entity-owning element moments later and its own
      * `connectedCallback` creates and parents it, by which time the ancestor it parents under has its
      * entity — the same guarantee tree order gives this sweep.
      *
@@ -1767,35 +1777,18 @@
      * @internal
      */
     const buildDescendantEntities = (root, app) => {
-        const children = Array.from(root.querySelectorAll('pc-entity')).filter((child) => child instanceof EntityElement);
+        const children = Array.from(root.querySelectorAll('pc-entity, pc-model')).filter((child) => child instanceof EntityOwnerElement);
         children.forEach((child) => child._createEntity(app));
         children.forEach((child) => child._buildHierarchy(app));
     };
     /**
-     * The EntityElement interface provides properties and methods for manipulating
-     * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-entity/ | `<pc-entity>`} elements.
-     * The EntityElement interface also inherits the properties and methods of the
-     * {@link HTMLElement} interface.
-     *
-     * The pointer events below are dispatched by the containing `<pc-app>` element when the pointer
-     * intersects this entity's geometry. They are only generated while the entity has a listener for
-     * them, registered either with {@link addEventListener} or with the matching inline `onpointer*`
-     * attribute.
-     *
-     * @attribute {string} onpointerenter - Script to run when the pointer moves onto the entity.
-     * @attribute {string} onpointerleave - Script to run when the pointer moves off the entity.
-     * @attribute {string} onpointermove - Script to run when the pointer moves over the entity.
-     * @attribute {string} onpointerdown - Script to run when a pointer button is pressed over the
-     * entity.
-     * @attribute {string} onpointerup - Script to run when a pointer button is released over the
-     * entity.
-     * @fires {PointerEvent} pointerenter - Fired when the pointer moves onto the entity.
-     * @fires {PointerEvent} pointerleave - Fired when the pointer moves off the entity.
-     * @fires {PointerEvent} pointermove - Fired when the pointer moves over the entity.
-     * @fires {PointerEvent} pointerdown - Fired when a pointer button is pressed over the entity.
-     * @fires {PointerEvent} pointerup - Fired when a pointer button is released over the entity.
+     * The base class for elements that create and own their backing entity: `<pc-entity>` and
+     * `<pc-model>`, whose host entity carries the same authored properties. It carries the cached
+     * property state, entity creation and parenting, and the reset that follows the entity's
+     * destruction. `<pc-node>` sits outside this class: it borrows an entity a model instantiated,
+     * and its properties are nullable overrides rather than owned values.
      */
-    class EntityElement extends EntityBaseElement {
+    class EntityOwnerElement extends EntityBaseElement {
         /**
          * Whether the entity is enabled.
          */
@@ -1821,7 +1814,8 @@
          */
         _tags = [];
         /**
-         * Whether the hierarchy has been built for this entity.
+         * Whether the hierarchy has been built for this entity — set once {@link _buildHierarchy} has
+         * parented it. Read by subclasses that gate work on the entity being in the scene graph.
          */
         _built = false;
         /**
@@ -1874,10 +1868,10 @@
             this._resetReady();
         }
         /**
-         * Parents the backing entity: under the entity of the nearest ancestor `<pc-entity>` or
-         * `<pc-node>` when there is one, and under the application root otherwise. Called by the
-         * containing `<pc-app>` element once a sweep has created every entity, so a parent's
-         * existence never depends on document order.
+         * Parents the backing entity: under the entity of the nearest ancestor `<pc-entity>`,
+         * `<pc-model>` or `<pc-node>` when there is one, and under the application root otherwise.
+         * Called by the containing `<pc-app>` element once a sweep has created every entity, so a
+         * parent's existence never depends on document order.
          *
          * @param app - The application whose root adopts parentless entities.
          * @internal
@@ -1892,6 +1886,13 @@
             if (closestEntity && !closestEntity.entity) {
                 return;
             }
+            // An owner that exists but is not yet parented is itself deferred behind an unresolved
+            // node further up. Building beneath it would announce readiness for an entity that is
+            // not in the scene graph; stay unbuilt with it - the node's bind sweeps the whole
+            // subtree, ancestors before descendants.
+            if (closestEntity instanceof EntityOwnerElement && !closestEntity._built) {
+                return;
+            }
             this._built = true;
             if (closestEntity?.entity) {
                 closestEntity.entity.addChild(this.entity);
@@ -1899,35 +1900,16 @@
             else {
                 app.root.addChild(this.entity);
             }
-            this._onReady();
-        }
-        connectedCallback() {
-            // Wait for app to be ready
-            const closestApp = this.closestApp;
-            if (!closestApp) {
-                // An entity outside an application is inert and never becomes ready, so awaiting it
-                // hangs. Warn rather than fail silently, naming the parent it requires, as every other
-                // misplaced element does.
-                const name = this.getAttribute('name');
-                const label = name ? ` '${name}'` : '';
-                console.warn(`pc-entity${label} must be a descendant of pc-app - entity not created`);
-                return;
-            }
-            // If app is already running, create entity immediately
-            if (closestApp._hierarchyReady) {
-                const app = closestApp.app;
-                this._createEntity(app);
-                this._buildHierarchy(app);
-                // Handle any child entities that might exist
-                buildDescendantEntities(this, app);
-            }
+            this._onBuilt();
         }
-        disconnectedCallback() {
-            // Destroying the entity destroys its whole subtree, and the engine fires 'destroy' for
-            // every entity in it - so _onEntityDestroy resets this element AND every descendant
-            // element before the descendants' own disconnectedCallbacks run. Their entities are null
-            // by then, making this call a no-op for them.
-            this._entity?.destroy();
+        /**
+         * Called by {@link _buildHierarchy} once the backing entity has been parented — exactly once
+         * per build cycle. The default announces readiness, which is what a parented `<pc-entity>`
+         * means; `<pc-model>` overrides it to start loading content instead, because its readiness
+         * tracks the content settling rather than the host entering the scene graph.
+         */
+        _onBuilt() {
+            this._onReady();
         }
         /**
          * Sets the enabled state of the entity.
@@ -2032,6 +2014,70 @@
         get tags() {
             return this._tags;
         }
+    }
+
+    /**
+     * The EntityElement interface provides properties and methods for manipulating
+     * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-entity/ | `<pc-entity>`} elements.
+     * The EntityElement interface also inherits the properties and methods of the
+     * {@link HTMLElement} interface.
+     *
+     * The pointer events below are dispatched by the containing `<pc-app>` element when the pointer
+     * intersects this entity's geometry. They are only generated while the entity has a listener for
+     * them, registered either with {@link addEventListener} or with the matching inline `onpointer*`
+     * attribute.
+     *
+     * @attribute {boolean} enabled - The enabled state of the entity.
+     * @attribute {string} name - The name of the entity.
+     * @attribute {string} position - The position of the entity.
+     * @attribute {string} rotation - The rotation of the entity.
+     * @attribute {string} scale - The scale of the entity.
+     * @attribute {string} tags - The tags of the entity.
+     * @attribute {string} onpointerenter - Script to run when the pointer moves onto the entity.
+     * @attribute {string} onpointerleave - Script to run when the pointer moves off the entity.
+     * @attribute {string} onpointermove - Script to run when the pointer moves over the entity.
+     * @attribute {string} onpointerdown - Script to run when a pointer button is pressed over the
+     * entity.
+     * @attribute {string} onpointerup - Script to run when a pointer button is released over the
+     * entity.
+     * @fires {PointerEvent} pointerenter - Fired when the pointer moves onto the entity.
+     * @fires {PointerEvent} pointerleave - Fired when the pointer moves off the entity.
+     * @fires {PointerEvent} pointermove - Fired when the pointer moves over the entity.
+     * @fires {PointerEvent} pointerdown - Fired when a pointer button is pressed over the entity.
+     * @fires {PointerEvent} pointerup - Fired when a pointer button is released over the entity.
+     */
+    class EntityElement extends EntityOwnerElement {
+        connectedCallback() {
+            // Wait for app to be ready
+            const closestApp = this.closestApp;
+            if (!closestApp) {
+                // An entity outside an application is inert and never becomes ready, so awaiting it
+                // hangs. Warn rather than fail silently, naming the parent it requires, as every other
+                // misplaced element does.
+                const name = this.getAttribute('name');
+                const label = name ? ` '${name}'` : '';
+                console.warn(`pc-entity${label} must be a descendant of pc-app - entity not created`);
+                return;
+            }
+            // If app is already running, create entity immediately
+            if (closestApp._hierarchyReady) {
+                const app = closestApp.app;
+                this._createEntity(app);
+                this._buildHierarchy(app);
+                // Handle any child entities that might exist. A build that deferred (an unresolved
+                // pc-node above) defers the whole subtree with it - the node's bind sweeps it.
+                if (this._built) {
+                    buildDescendantEntities(this, app);
+                }
+            }
+        }
+        disconnectedCallback() {
+            // Destroying the entity destroys its whole subtree, and the engine fires 'destroy' for
+            // every entity in it - so _onEntityDestroy resets this element AND every descendant
+            // element before the descendants' own disconnectedCallbacks run. Their entities are null
+            // by then, making this call a no-op for them.
+            this._entity?.destroy();
+        }
         static get observedAttributes() {
             return ['enabled', 'name', 'position', 'rotation', 'scale', 'tags', ...POINTER_ATTRIBUTES];
         }
@@ -2929,223 +2975,1546 @@
     };
 
     /**
-     * Represents a component in the PlayCanvas engine.
+     * Formats one line of the printable hierarchy: the node's name, an `[index]` marker when the
+     * name is shared by several nodes in the model, the attached component types, and the material
+     * names of a render component.
      *
-     * @category Components
+     * @param node - The node to format.
+     * @param counts - The number of nodes bearing each name.
+     * @returns The formatted line.
      */
-    class ComponentElement extends AsyncElement {
-        _componentName;
-        _enabled = true;
-        _component = null;
-        _appElement = null;
+    const formatNode = (node, counts) => {
+        const index = (counts.get(node.name) ?? 0) > 1 ? ` [${node.index}]` : '';
+        const components = node.components.length > 0 ? ` (${node.components.join(', ')})` : '';
+        // Braces rather than brackets: `[N]` already means a match index on this line
+        const materials = node.materials.length > 0 ? ` {${node.materials.map((slot) => slot.name ?? 'null').join(', ')}}` : '';
+        return `${node.name}${index}${components}${materials}`;
+    };
+    /**
+     * Formats the printable form of a hierarchy subtree.
+     *
+     * @param root - The subtree root.
+     * @param counts - The number of nodes bearing each name.
+     * @returns The tree, one line per node.
+     */
+    const formatHierarchy = (root, counts) => {
+        const lines = [formatNode(root, counts)];
+        const walk = (node, prefix) => {
+            node.children.forEach((child, i) => {
+                const last = i === node.children.length - 1;
+                lines.push(`${prefix}${last ? '└─ ' : '├─ '}${formatNode(child, counts)}`);
+                walk(child, `${prefix}${last ? '   ' : '│  '}`);
+            });
+        };
+        walk(root, '');
+        return lines.join('\n');
+    };
+    /**
+     * The ModelElement interface provides properties and methods for manipulating
+     * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-model/ | `<pc-model>`} elements.
+     * The ModelElement interface also inherits the properties and methods of the
+     * {@link HTMLElement} interface.
+     *
+     * The element creates and fronts a stable host entity: `entity` is that host, created when the
+     * application builds its hierarchy and kept across `asset` changes, so the element's transform
+     * and tags are instance placement that composes with whatever transform the asset authored on
+     * its root. The instantiated content is parented beneath the host and exposed as
+     * {@link contentEntity}.
+     *
+     * The element becomes ready once its current asset selection has settled: the container asset
+     * has loaded and its content root has been parented beneath the host, the load has failed
+     * (`contentEntity` stays `null` — listen for `error`, or check `contentEntity`, to tell the
+     * outcomes apart), or no asset is assigned at all. Changing `asset` re-arms readiness and
+     * instantiates anew, so a `ready()` obtained after the change resolves against the new content.
+     * A `pc-model` outside a `pc-app`, or referencing an unknown asset id, warns and never becomes
+     * ready.
+     *
+     * The pointer events below are dispatched by the containing `<pc-app>` element when the pointer
+     * intersects the model's geometry, exactly as for `<pc-entity>` — a hit on a content node that no
+     * `pc-node` fronts resolves to this element.
+     *
+     * @attribute {boolean} enabled - The enabled state of the model.
+     * @attribute {string} name - The name of the model.
+     * @attribute {string} position - The position of the model.
+     * @attribute {string} rotation - The rotation of the model.
+     * @attribute {string} scale - The scale of the model.
+     * @attribute {string} tags - The tags of the model.
+     * @attribute {string} onpointerenter - Script to run when the pointer moves onto the model.
+     * @attribute {string} onpointerleave - Script to run when the pointer moves off the model.
+     * @attribute {string} onpointermove - Script to run when the pointer moves over the model.
+     * @attribute {string} onpointerdown - Script to run when a pointer button is pressed over the
+     * model.
+     * @attribute {string} onpointerup - Script to run when a pointer button is released over the
+     * model.
+     * @fires {PointerEvent} pointerenter - Fired when the pointer moves onto the model.
+     * @fires {PointerEvent} pointerleave - Fired when the pointer moves off the model.
+     * @fires {PointerEvent} pointermove - Fired when the pointer moves over the model.
+     * @fires {PointerEvent} pointerdown - Fired when a pointer button is pressed over the model.
+     * @fires {PointerEvent} pointerup - Fired when a pointer button is released over the model.
+     * @fires {Event} load - Fired each time a container asset finishes instantiating, including
+     * re-instantiation after `asset` changes. Does not bubble — listen on this element, or use a
+     * capture-phase listener on an ancestor.
+     * @fires {ErrorEvent} error - Fired when the container asset fails to load, with the engine's
+     * error in `message`. Does not bubble. The element still becomes ready — readiness means the load
+     * settled, not that it succeeded.
+     */
+    class ModelElement extends EntityOwnerElement {
+        _asset = '';
+        _contentEntity = null;
+        /**
+         * Incremented on every new load, on disconnect, and when the host entity dies, and captured
+         * by a load when it starts. A load that resumes from an await or a load callback abandons
+         * itself if the value has moved on, so a superseded load can neither instantiate a second
+         * content root nor parent one under a host a newer cycle has already replaced.
+         */
+        _loadGeneration = 0;
+        /**
+         * The pending asset subscriptions of the current load, if it is waiting for its asset. Held
+         * so that whatever supersedes the load can detach the handlers from the asset, rather than
+         * leave them registered until the asset settles (or forever, if it never does).
+         */
+        _loadHandle = null;
+        _errorHandle = null;
+        /**
+         * The root entity of the instantiated model content, parented beneath the host entity.
+         * `null` until the container asset has loaded and been instantiated, after a failed load,
+         * and again once the element has been removed from the document.
+         * @returns The content root entity, or `null`.
+         */
+        get contentEntity() {
+            return this._contentEntity;
+        }
+        /**
+         * Returns a snapshot of the instantiated node tree, or `null` while there is none (the
+         * container asset has not loaded, or the element has left the document). One call grounds a
+         * session — a browser console, a test, an agent — in the vocabulary `pc-node` binding
+         * resolves against: the instantiated names ({@link HierarchyNode.name}), paths, match
+         * indices, attached component types and the material assignments of render components
+         * ({@link HierarchyNode.materials}). `String(...)` of the result, or of any node in it,
+         * is the printable form.
+         *
+         * The snapshot is plain data, computed afresh each call: it does not follow later changes
+         * to the hierarchy, and mutating it changes nothing. It covers the instantiated content
+         * only — the host entity the element fronts is not part of the asset's node tree.
+         *
+         * @returns The root of the instantiated node tree, or `null`.
+         */
+        hierarchy() {
+            const root = this._contentEntity;
+            if (!root) {
+                return null;
+            }
+            // Ordinals are assigned in the traversal resolution searches — pre-order depth-first
+            // from the model root, the root itself included — so each node's index is exactly what
+            // a pc-node's index attribute selects. Once the walk completes, the map holds the total
+            // count per name, which is what the printable form reads to annotate only shared names.
+            const ordinals = new Map();
+            const describe = (entity, pathBelowRoot) => {
+                const index = ordinals.get(entity.name) ?? 0;
+                ordinals.set(entity.name, index + 1);
+                const node = {
+                    name: entity.name,
+                    // The root has no path below itself; its own name stands in, as it does for
+                    // the path a pc-node bound to the root reports.
+                    path: pathBelowRoot || entity.name,
+                    index,
+                    // A plain GraphNode grafted into the hierarchy has no component storage
+                    components: Object.keys(entity.c ?? {}).sort(),
+                    materials: (entity.render?.meshInstances ?? []).map((meshInstance, slot) => ({
+                        index: slot,
+                        name: meshInstance.material?.name ?? null
+                    })),
+                    children: entity.children.map((child) => describe(child, pathBelowRoot ? `${pathBelowRoot}/${child.name}` : child.name))
+                };
+                // Non-enumerable, keeping the snapshot plain data under JSON.stringify, spreads and
+                // key enumeration. Deferred to call time, by which the ordinal map holds its totals.
+                Object.defineProperty(node, 'toString', {
+                    enumerable: false,
+                    value: () => formatHierarchy(node, ordinals)
+                });
+                return node;
+            };
+            return describe(root, '');
+        }
+        connectedCallback() {
+            // A model outside an application is inert and never becomes ready, so awaiting it hangs.
+            // Warn rather than fail silently, naming the parent it requires, as every other misplaced
+            // element does.
+            const closestApp = this.closestApp;
+            if (!closestApp) {
+                const label = this._asset ? ` '${this._asset}'` : '';
+                console.warn(`pc-model${label} must be a descendant of pc-app - model not created`);
+                return;
+            }
+            // If the app is already running, create the host immediately; during a boot, the app's
+            // own sweep does it. Either way, _onBuilt starts the content load once the host is
+            // parented.
+            if (closestApp._hierarchyReady) {
+                const app = closestApp.app;
+                this._createEntity(app);
+                this._buildHierarchy(app);
+                // A build that deferred (an unresolved pc-node above) defers the whole subtree with
+                // it - the node's bind sweeps it.
+                if (this._built) {
+                    buildDescendantEntities(this, app);
+                }
+            }
+        }
+        disconnectedCallback() {
+            // Destroying the host destroys the instantiated content with it, and the destroy hook
+            // resets the element. The generation guard comes first so a load suspended on an await
+            // cannot resume against the torn-down element.
+            this._loadGeneration++;
+            this._detachLoadHandlers();
+            this._entity?.destroy();
+        }
+        /**
+         * Starts (or restarts) the content load once the host has been parented. Readiness is not
+         * announced here — it tracks the content settling, not the host entering the scene graph.
+         */
+        _onBuilt() {
+            this._loadContent();
+        }
+        /**
+         * Extends the owner reset for the content: the engine's destroy cascade has already taken
+         * the content root down with the host subtree, so only the reference and the in-flight load
+         * are dropped here. The next build re-creates the host and re-instantiates the content.
+         *
+         * @param entity - The host entity that was destroyed.
+         */
+        _onEntityDestroy(entity) {
+            this._loadGeneration++;
+            this._detachLoadHandlers();
+            this._contentEntity = null;
+            super._onEntityDestroy(entity);
+        }
+        _detachLoadHandlers() {
+            this._loadHandle?.off();
+            this._loadHandle = null;
+            this._errorHandle?.off();
+            this._errorHandle = null;
+        }
+        /**
+         * Resolves readiness and dispatches the `load` event. Called once the instantiated content
+         * has been parented beneath the host — the host itself is already in the scene graph by
+         * then, so a ready model's content always has world transforms.
+         */
+        _announceLoad() {
+            this._onReady();
+            this.dispatchEvent(new Event('load'));
+        }
+        _instantiate(container) {
+            const content = container.instantiateRenderEntity();
+            this._contentEntity = content;
+            this._entity.addChild(content);
+            this._announceLoad();
+        }
+        _destroyContent() {
+            this._contentEntity?.destroy();
+            this._contentEntity = null;
+        }
+        async _loadContent() {
+            // The old content goes down synchronously, so a reader that checks after an asset change
+            // never sees the outgoing hierarchy. The host survives - components and child entities
+            // attached to it carry over to the new content.
+            this._destroyContent();
+            // Supersede any load already in flight - only the newest load may instantiate
+            const generation = ++this._loadGeneration;
+            this._detachLoadHandlers();
+            // Re-arm readiness so a waiter obtained after an asset change resolves against the new
+            // content. A no-op on first connection, where readiness is still pending.
+            this._resetReady();
+            const appElement = this.closestApp;
+            if (!appElement) {
+                // Outside pc-app; connectedCallback already warned. Reached through the asset setter.
+                return;
+            }
+            await appElement.ready();
+            // The element may have been removed, or another load started, while we waited
+            if (generation !== this._loadGeneration) {
+                return;
+            }
+            // The host may not be parented yet - a model under a pc-node that has not bound, reached
+            // through the asset setter. Nothing settles here: _onBuilt re-runs this load once the
+            // host builds.
+            if (!this._entity || !this._built) {
+                return;
+            }
+            if (this._asset === '') {
+                // No asset assigned is a settled selection: the element is a usable host (components
+                // attach, waiters resolve) with no content. Assigning an asset later re-arms.
+                this._onReady();
+                return;
+            }
+            const asset = useAsset(this._asset);
+            if (!asset) {
+                // A non-empty id that resolves to nothing is a dead end - say so rather than staying
+                // silently pending.
+                console.warn(`pc-model could not find asset '${this._asset}' - model not created`);
+                return;
+            }
+            if (asset.loaded) {
+                this._instantiate(asset.resource);
+            }
+            else {
+                // The generation is re-checked even though a superseded handler is detached: the
+                // detach relies on how the engine's event emitter treats removal, while the check
+                // holds on its own. Whichever of load/error fires first detaches the other.
+                this._loadHandle = asset.once('load', () => {
+                    this._detachLoadHandlers();
+                    if (generation !== this._loadGeneration) {
+                        return;
+                    }
+                    this._instantiate(asset.resource);
+                });
+                this._errorHandle = asset.once('error', (err) => {
+                    this._detachLoadHandlers();
+                    if (generation !== this._loadGeneration) {
+                        return;
+                    }
+                    // A failed load settles readiness with a null contentEntity, mirroring pc-asset:
+                    // readiness means the load settled, not that it succeeded.
+                    this.dispatchEvent(new ErrorEvent('error', {
+                        message: err instanceof Error ? err.message : String(err)
+                    }));
+                    this._onReady();
+                });
+            }
+        }
+        /**
+         * Sets the id of the `pc-asset` to use for the model.
+         * @param value - The asset ID.
+         */
+        set asset(value) {
+            this._asset = value;
+            if (this.isConnected) {
+                this._loadContent();
+            }
+        }
+        /**
+         * Gets the id of the `pc-asset` to use for the model.
+         * @returns The asset ID.
+         */
+        get asset() {
+            return this._asset;
+        }
+        static get observedAttributes() {
+            return ['asset', 'enabled', 'name', 'position', 'rotation', 'scale', 'tags', ...POINTER_ATTRIBUTES];
+        }
+        attributeChangedCallback(name, _oldValue, newValue) {
+            switch (name) {
+                case 'asset':
+                    this.asset = newValue ?? '';
+                    break;
+                case 'enabled':
+                    this.enabled = parseBool(newValue, true);
+                    break;
+                case 'name':
+                    this.name = newValue ?? 'Untitled';
+                    break;
+                case 'position':
+                    this.position = parseVec3(newValue, playcanvas.Vec3.ZERO, name);
+                    break;
+                case 'rotation':
+                    this.rotation = parseVec3(newValue, playcanvas.Vec3.ZERO, name);
+                    break;
+                case 'scale':
+                    this.scale = parseVec3(newValue, playcanvas.Vec3.ONE, name);
+                    break;
+                case 'tags':
+                    this.tags = parseTags(newValue);
+                    break;
+                case 'onpointerenter':
+                case 'onpointerleave':
+                case 'onpointerdown':
+                case 'onpointerup':
+                case 'onpointermove':
+                    this._updateInlineHandler(name, newValue);
+                    break;
+            }
+        }
+    }
+    customElements.define('pc-model', ModelElement);
+
+    /**
+     * Represents a component in the PlayCanvas engine.
+     *
+     * @category Components
+     */
+    class ComponentElement extends AsyncElement {
+        _componentName;
+        _enabled = true;
+        _component = null;
+        _appElement = null;
+        /**
+         * The element hosting this component, held so the host's readiness cycles can be observed
+         * even after `closestEntity` would no longer resolve (during teardown).
+         */
+        _hostElement = null;
+        /**
+         * The listener re-applying this component when the host's readiness cycles. Held for
+         * removal on disconnect.
+         */
+        _hostReadyListener = null;
+        /**
+         * Incremented on every connect and disconnect. connectedCallback captures the value on entry
+         * and abandons itself wherever it resumes from an await if the value has moved on — so a
+         * callback whose element was removed cannot act on a torn-down tree, and one whose element
+         * was removed and re-inserted (which runs a callback of its own) cannot add the component a
+         * second time.
+         */
+        _connectionGeneration = 0;
+        /**
+         * Creates a new ComponentElement instance.
+         *
+         * @param componentName - The name of the component.
+         * @ignore
+         */
+        constructor(componentName) {
+            super();
+            this._componentName = componentName;
+        }
+        /**
+         * Returns the data the component is created with. Overridden by subclasses to supply the
+         * initial values of their cached properties.
+         *
+         * @returns The initial component data.
+         */
+        getInitialComponentData() {
+            return {};
+        }
+        /**
+         * Creates the component on the host's current entity, removing it first from a previous
+         * entity that is still alive (a retargeted `<pc-node>` moves its decorations with it). When
+         * the entity already has a component of this type — a glTF node arriving with its authored
+         * `render` component, say — warns and leaves `component` null. The element-level warning is
+         * load-bearing: the engine's own duplicate-addComponent warning is Debug-stripped from
+         * production builds, which would otherwise leave a silent null.
+         */
+        _applyComponent() {
+            const entity = this._hostElement?.entity ?? null;
+            if (this._component && this._component.entity === entity) {
+                return;
+            }
+            // A retarget leaves the previous component on a still-live entity - remove it so the
+            // decoration follows the element, or vanishes with a dissolved binding. A destroyed
+            // entity took its components with it.
+            const previous = this._component;
+            if (previous?.entity && previous.entity.c[this._componentName] === previous) {
+                previous.entity.removeComponent(this._componentName);
+            }
+            this._component = null;
+            if (!entity) {
+                return;
+            }
+            if (entity.c[this._componentName]) {
+                const label = this.id ? ` '${this.id}'` : '';
+                console.warn(`${this.tagName.toLowerCase()}${label} - '${entity.name}' already has a '${this._componentName}' component - component not added`);
+                return;
+            }
+            this._component = entity.addComponent(this._componentName, this.getInitialComponentData());
+        }
+        async _addComponent() {
+            const generation = this._connectionGeneration;
+            const entityElement = this.closestEntity;
+            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, pc-model or pc-node - component not added`);
+                return;
+            }
+            await entityElement.ready();
+            // The element may have been removed, or removed and re-inserted, while the entity became
+            // ready — the component belongs to the connection that owns the current generation.
+            if (generation !== this._connectionGeneration) {
+                return;
+            }
+            this._hostElement = entityElement;
+            this._applyComponent();
+            // Re-apply when the host's readiness cycles without this element disconnecting: a
+            // `<pc-node>` rebinding after its model reloads or retargets, or a re-created entity.
+            // The 'ready' event bubbles, so events from descendants pass through this host - only
+            // the host's own cycles count. Readiness is cycled here too, so decorations one level
+            // down re-apply the same way.
+            this._hostReadyListener = (event) => {
+                if (event.target !== this._hostElement) {
+                    return;
+                }
+                if (generation !== this._connectionGeneration) {
+                    return;
+                }
+                this._hostCycled();
+            };
+            entityElement.addEventListener('ready', this._hostReadyListener);
+        }
+        /**
+         * Re-evaluates this component against the host's current entity: applied to a new entity,
+         * moved from a still-live old one, or removed when the host no longer fronts an entity at
+         * all. Readiness follows - it cycles with a re-application and stays unresolved while the
+         * host is unbound. Called by the host-ready listener, and directly by a `<pc-node>`
+         * dissolving its binding: the one transition that fires no ready event to ride.
+         *
+         * @internal
+         */
+        _hostCycled() {
+            this._resetReady();
+            this._applyComponent();
+            if (this._hostElement?.entity) {
+                this.initComponent();
+                this._onReady();
+            }
+        }
+        /**
+         * Configures the newly added component. Overridden by subclasses whose setup goes beyond
+         * the initial data — child-element handling, asset resolution and the like.
+         */
+        initComponent() {
+            // optional hook
+        }
+        async connectedCallback() {
+            const generation = ++this._connectionGeneration;
+            this._appElement = this.closestApp ?? null;
+            await this._appElement?.ready();
+            // The element may have been removed, or removed and re-inserted, while the application
+            // became ready. A re-insertion runs a connectedCallback of its own, so a stale resume
+            // must not add the component alongside it.
+            if (generation !== this._connectionGeneration) {
+                return;
+            }
+            await this._addComponent();
+            if (generation !== this._connectionGeneration) {
+                return;
+            }
+            this.initComponent();
+            this._onReady();
+        }
+        disconnectedCallback() {
+            // Invalidate any connectedCallback still suspended on an await
+            this._connectionGeneration++;
+            if (this._hostElement && this._hostReadyListener) {
+                this._hostElement.removeEventListener('ready', this._hostReadyListener);
+            }
+            this._hostElement = null;
+            this._hostReadyListener = null;
+            // 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 (this._appElement?.app && this._component?.entity) {
+                this._component.entity.removeComponent(this._componentName);
+            }
+            this._component = null;
+            this._appElement = null;
+            this._resetReady();
+        }
+        /**
+         * The PlayCanvas component instance. `null` until the element is ready, and also for an
+         * element that is not a descendant of an entity-fronting element (`<pc-entity>`,
+         * `<pc-model>` or `<pc-node>`) — await {@link whenReady} or the element's `ready()` promise
+         * before accessing it.
+         * @returns The component instance, or `null`.
+         */
+        get component() {
+            return this._component;
+        }
+        /**
+         * Sets the enabled state of the component.
+         * @param value - The enabled state of the component.
+         */
+        set enabled(value) {
+            this._enabled = value;
+            if (this.component) {
+                this.component.enabled = value;
+            }
+        }
+        /**
+         * Gets the enabled state of the component.
+         * @returns The enabled state of the component.
+         */
+        get enabled() {
+            return this._enabled;
+        }
+        static get observedAttributes() {
+            return ['enabled'];
+        }
+        attributeChangedCallback(name, _oldValue, newValue) {
+            switch (name) {
+                case 'enabled':
+                    this.enabled = parseBool(newValue, true);
+                    break;
+            }
+        }
+    }
+
+    /**
+     * The AnimComponentElement interface provides properties and methods for manipulating
+     * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-anim/ | `<pc-anim>`} elements.
+     * The AnimComponentElement interface also inherits the properties and methods of the
+     * {@link HTMLElement} interface.
+     *
+     * The element drives animation clips over the host entity's hierarchy. Clips come from
+     * `<pc-anim-clip>` children — or, when the element is a direct child of a `<pc-model>` and
+     * declares no clips, every animation of that model's container asset is assigned, named by track
+     * name, in container order. The first clip plays automatically (opt out with `activate="false"`);
+     * switch clips declaratively through the `clip` attribute, or imperatively through {@link play}
+     * and {@link transition}. Tracks bind to scene nodes by name, so any hierarchy whose node names
+     * match a clip's curves can be animated — a model's skeleton is simply the common case.
+     *
+     * The engine reports no clip completion: a non-looping clip holds its last pose silently. Poll
+     * the underlying {@link AnimComponent} (via {@link component}) for playback state beyond what
+     * this element exposes.
+     *
+     * Engine component: {@link AnimComponent} (`anim`).
+     *
+     * @category Components
+     */
+    class AnimComponentElement extends ComponentElement {
+        /**
+         * Whether playback starts automatically once a clip is assigned.
+         */
+        _activate = true;
+        /**
+         * The clip elements whose states are currently assigned, by clip name. The single writer of
+         * a state: a later clip child re-using an adopted name is rejected as a duplicate.
+         */
+        _assignedClips = new Map();
+        /**
+         * Whether the current clip set was auto-assigned from the enclosing model rather than
+         * declared by clip children.
+         */
+        _autoAssigned = false;
+        /**
+         * The name of the active clip.
+         */
+        _clip = '';
+        /**
+         * The binding root this element last assigned through {@link _applyRootBone}, distinguishing
+         * its own writes from a `rootBone` assigned through the engine API — which is left alone.
+         */
+        _managedRootBone = null;
+        /**
+         * The element the model-readiness listener is attached to, held so disconnection can detach
+         * it after `closestEntity` no longer resolves.
+         */
+        _modelListenerTarget = null;
+        /**
+         * Incremented whenever the clip source changes, and captured by an auto-assign pass on
+         * entry — a pass resuming from an await abandons itself if the value has moved on, so a
+         * superseded pass cannot assign clips alongside declared children or a newer pass.
+         */
+        _sourceGeneration = 0;
+        /**
+         * The playback speed multiplier applied across all clips.
+         */
+        _speed = 1;
+        /**
+         * The cross-fade duration of declarative clip switches, in seconds.
+         */
+        _transitionTime = 0;
+        /**
+         * The unknown clip name already warned about, so a repeated selection of the same missing
+         * name complains once.
+         */
+        _warnedClip = null;
+        /**
+         * Rebinds when a model that is not this component's host announces readiness — a sibling or
+         * deeper model whose content changed under the assigned clips. The engine resolves each
+         * curve once, at the first tick after assignment, and never retries — and its mesh-instance
+         * broadcast fires before an instantiated hierarchy is parented, so a model that loads after
+         * the clips were assigned would otherwise stay silently unbound. The host model's own cycles
+         * are excluded: those re-enter through {@link initComponent}, which refreshes the whole clip
+         * set against the new container.
+         */
+        _onModelReady = (event) => {
+            if (!(event.target instanceof ModelElement) || !this.component) {
+                return;
+            }
+            // The host model's own readiness cycle already re-initialized this component through
+            // ComponentElement's host-ready listener, which is attached first and so has run by now.
+            // Acting here too would resolve every track twice and capture the playhead-restore
+            // snapshot mid-rebuild.
+            if (event.target === this._modelListenerTarget) {
+                return;
+            }
+            // A model cycle can replace the skeleton source's host entity (a rebuild under a
+            // retargeting pc-node), so the binding root is re-asserted before the rebind.
+            this._applyRootBone();
+            this.component.rebind();
+        };
+        /**
+         * The model whose host entity scopes this component's curve binding: the parent `pc-model`,
+         * or the sole `pc-model` among the parent's direct children (the arrangement where clips
+         * live in a library asset beside the skeleton). `null` when there is no such model, or more
+         * than one — an ambiguous skeleton is left to the engine's name-based resolution.
+         */
+        _skeletonSource() {
+            const parent = this.parentElement;
+            if (parent instanceof ModelElement) {
+                return parent;
+            }
+            const models = parent ? parent.querySelectorAll(':scope > pc-model') : null;
+            return models?.length === 1 && models[0] instanceof ModelElement ? models[0] : null;
+        }
+        /**
+         * Keeps the component's binding root pointing at the skeleton source's host entity. The host
+         * wraps the instantiated content, so left at its default — the component's own entity — the
+         * engine binder mis-resolves curves that target the asset's root node: its fallback treats
+         * the graph as the asset root once the root is no longer a direct child.
+         *
+         * Authoritative in both directions for values this element assigned: a source appearing pins
+         * its host, and a source dissolving (the model gone, or a second model making the skeleton
+         * ambiguous) clears the pin rather than leaving it on a stale host. A root assigned through
+         * the engine API is never overwritten — the user's choice outranks the managed default.
+         * Writes are skipped while unchanged, because the engine setter itself triggers a rebind.
+         */
+        _applyRootBone() {
+            const component = this.component;
+            // A non-null root this element did not assign came through the engine API. A fresh
+            // component starts at null, which is always reclaimable.
+            if (component.rootBone !== null && component.rootBone !== this._managedRootBone) {
+                return;
+            }
+            const host = this._skeletonSource()?.entity ?? null;
+            if (component.rootBone !== host) {
+                // The engine setter accepts null - restoring the component's own entity as the
+                // binding graph - but its declared type does not
+                component.rootBone = host;
+            }
+            this._managedRootBone = host;
+        }
+        /** @ignore */
+        constructor() {
+            super('anim');
+        }
+        getInitialComponentData() {
+            // The engine assigns creation data in key order and `activate` gates playback, so it
+            // must precede any future key that builds layers (e.g. a state graph)
+            return {
+                activate: this._activate,
+                speed: this._speed
+            };
+        }
+        initComponent() {
+            if (!this.component) {
+                return;
+            }
+            // A host readiness cycle can re-run this. An identical re-add is deduped by the DOM;
+            // the explicit swap handles the listener target changing across connections.
+            const host = this.closestEntity;
+            if (host && host !== this._modelListenerTarget) {
+                this._modelListenerTarget?.removeEventListener('ready', this._onModelReady);
+                host.addEventListener('ready', this._onModelReady);
+                this._modelListenerTarget = host;
+            }
+            this._applyRootBone();
+            if (this.component.baseLayer) {
+                // The component survived the host's readiness cycle (a pc-model reloading content on
+                // its stable host entity). A loaded graph cannot be reassigned in place, so drop it
+                // and reassign from the current source, restoring the active clip and playhead.
+                this._refreshClips();
+            }
+            else {
+                this._applyClips();
+            }
+        }
+        disconnectedCallback() {
+            this._modelListenerTarget?.removeEventListener('ready', this._onModelReady);
+            this._modelListenerTarget = null;
+            // Invalidate any auto-assign still awaiting its model, and drop the adoption
+            // bookkeeping so a reconnection starts clean
+            this._sourceGeneration++;
+            this._assignedClips.clear();
+            this._autoAssigned = false;
+            this._managedRootBone = null;
+            super.disconnectedCallback();
+        }
+        /**
+         * The clip children in DOM order. Read afresh each pass — the DOM is the single source of
+         * truth for the declared clip set.
+         */
+        _clipElements() {
+            return Array.from(this.querySelectorAll(':scope > pc-anim-clip'));
+        }
+        /**
+         * Assigns a clip's state. Until the clip's real track resolves, the engine's own placeholder
+         * track stands in — it keeps the layer playable, so `activate` can start playback and the
+         * declared `clip` selection can apply before any asset has loaded.
+         */
+        _assignClip(clip) {
+            this.component.assignAnimation(clip.name, clip._track ?? playcanvas.AnimTrack.EMPTY, undefined, clip.speed, clip.loop);
+        }
+        /**
+         * Validates a clip child and, when valid, assigns its state and starts its track resolution.
+         *
+         * @param clip - The clip element.
+         * @returns Whether the clip was adopted.
+         */
+        _adoptClip(clip) {
+            const name = clip.name;
+            if (!name) {
+                clip._markInvalid('pc-anim-clip must have a name - clip not assigned');
+                return false;
+            }
+            if (name.indexOf('.') !== -1) {
+                clip._markInvalid(`pc-anim-clip '${name}' - '.' in a clip name is reserved for blend tree paths - clip not assigned`);
+                return false;
+            }
+            if (this._assignedClips.has(name)) {
+                clip._markInvalid(`pc-anim-clip '${name}' - an earlier clip already uses this name - clip not assigned`);
+                return false;
+            }
+            this._assignedClips.set(name, clip);
+            this._assignClip(clip);
+            clip._resolveTrack(this);
+            return true;
+        }
+        /**
+         * Assigns the current clip set: the declared clip children when there are any, otherwise the
+         * enclosing model's clips. Runs against a fresh component after a host cycle, so the
+         * adoption bookkeeping rebuilds from scratch.
+         */
+        _applyClips(restore) {
+            if (!this.component) {
+                return;
+            }
+            this._sourceGeneration++;
+            this._assignedClips.clear();
+            this._autoAssigned = false;
+            const clips = this._clipElements();
+            if (clips.length === 0) {
+                this._kickAutoAssign(restore);
+                return;
+            }
+            for (const clip of clips) {
+                this._adoptClip(clip);
+            }
+            this._applySelection(restore);
+        }
+        /**
+         * Assigns every clip of the enclosing model's container, named by track name, in container
+         * order. Names the engine cannot host — dotted (reserved for blend tree paths) or already
+         * taken — are skipped with a warning naming each.
+         */
+        async _kickAutoAssign(restore) {
+            const generation = this._sourceGeneration;
+            const model = this.parentElement;
+            if (!(model instanceof ModelElement)) {
+                // Not inside a model: an empty component, driven through the JS API
+                return;
+            }
+            await model.ready();
+            // The source may have changed while the model loaded - a declared clip child appearing
+            // flips the element over to declared mode, and wins
+            const component = this.component;
+            if (generation !== this._sourceGeneration || !component || this._clipElements().length > 0) {
+                return;
+            }
+            const container = AssetElement.get(model.asset)?.resource;
+            if (!container) {
+                // The load failed; the model already reported it
+                return;
+            }
+            const label = this.id ? ` '${this.id}'` : '';
+            if (container.animations.length === 0) {
+                console.warn(`pc-anim${label} - model '${model.asset}' has no animations`);
+                return;
+            }
+            const seen = new Set();
+            for (const animationAsset of container.animations) {
+                const track = animationAsset.resource;
+                if (!(track instanceof playcanvas.AnimTrack)) {
+                    continue;
+                }
+                if (track.name.indexOf('.') !== -1) {
+                    console.warn(`pc-anim${label} - track '${track.name}' - '.' in a clip name is reserved for blend tree paths - track skipped`);
+                    continue;
+                }
+                if (seen.has(track.name)) {
+                    console.warn(`pc-anim${label} - duplicate track name '${track.name}' - track skipped`);
+                    continue;
+                }
+                seen.add(track.name);
+                component.assignAnimation(track.name, track);
+            }
+            this._autoAssigned = seen.size > 0;
+            this._applySelection(restore);
+        }
+        /**
+         * Applies the active-clip selection: the declared `clip` when it names an assigned state,
+         * else a captured pre-rebuild state when it survived, else the engine's default (the first
+         * assigned clip). A restore also reinstates the playhead and both playing flags exactly as
+         * captured — the reassignment that preceded it set both to the `activate` outcome, which is
+         * not necessarily the state the rebuild interrupted.
+         */
+        _applySelection(restore) {
+            const component = this.component;
+            const layer = component ? component.baseLayer : null;
+            if (!component || !layer) {
+                return;
+            }
+            if (this._clip && !layer.states.includes(this._clip)) {
+                this._warnUnknownClip(this._clip);
+            }
+            let target = null;
+            if (this._clip && layer.states.includes(this._clip)) {
+                target = this._clip;
+            }
+            else if (restore && layer.states.includes(restore.state)) {
+                target = restore.state;
+            }
+            if (target && layer.activeState !== target) {
+                layer.play(target);
+            }
+            if (restore) {
+                if (target === restore.state) {
+                    layer.activeStateCurrentTime = restore.time;
+                }
+                layer.playing = restore.layerPlaying;
+                component.playing = restore.playing;
+            }
+        }
+        _warnUnknownClip(name) {
+            if (this._warnedClip === name) {
+                return;
+            }
+            this._warnedClip = name;
+            const label = this.id ? ` '${this.id}'` : '';
+            console.warn(`pc-anim${label} has no clip named '${name}' - selection unchanged`);
+        }
+        /**
+         * Rebuilds the clip set from the DOM, restoring the active clip and playhead when they
+         * survive the rebuild. The engine cannot remove a state from a loaded graph (unassigning
+         * only empties the state's tracks), so removals, renames and source changes drop the whole
+         * graph and reassign.
+         *
+         * @internal
+         */
+        _refreshClips() {
+            const component = this.component;
+            if (!component) {
+                return;
+            }
+            // A clip-set change is also a chance for the skeleton source to have changed shape (a
+            // clip child appearing or leaving can accompany a model coming or going) - re-derive the
+            // binding root before the reassignment binds against it.
+            this._applyRootBone();
+            const layer = component.baseLayer;
+            const restore = layer ? {
+                state: layer.activeState,
+                time: layer.activeStateCurrentTime,
+                playing: component.playing,
+                layerPlaying: layer.playing
+            } : undefined;
+            component.removeStateGraph();
+            this._applyClips(restore);
+        }
+        /**
+         * Adopts a clip child announced by its connectedCallback. The initComponent sweep adopts
+         * children already present, so this is a no-op for those; it serves clips appended later,
+         * and flips an auto-assigned element over to its declared children — declared clips win.
+         *
+         * @param clip - The clip element.
+         * @internal
+         */
+        _registerClip(clip) {
+            if (!this.component) {
+                return;
+            }
+            if (this._autoAssigned) {
+                this._refreshClips();
+                return;
+            }
+            if (this._assignedClips.get(clip.name) === clip) {
+                return;
+            }
+            // A clip child appearing supersedes an auto-assign still awaiting its model
+            this._sourceGeneration++;
+            if (this._adoptClip(clip)) {
+                this._applySelection();
+            }
+        }
+        /**
+         * Releases a disconnected clip child. Rebuilds the set — a state cannot be removed from a
+         * live graph — and the removal of the last child inside a `<pc-model>` flips the element
+         * back to auto-assigning the model's clips.
+         *
+         * @param clip - The clip element.
+         * @internal
+         */
+        _unregisterClip(clip) {
+            if (!this.component) {
+                // The whole subtree is coming down (parents disconnect first) - nothing to rebuild
+                return;
+            }
+            if (this._assignedClips.get(clip.name) !== clip) {
+                // The clip never held a state (invalid or duplicate name)
+                return;
+            }
+            this._refreshClips();
+        }
+        /**
+         * Swaps a clip's resolved track in for the placeholder (or for its previous track after an
+         * asset change). A swap of the active clip restarts it: the engine preserves the playhead
+         * through a track replacement, which would land mid-way into unrelated animation.
+         *
+         * @param clip - The clip element.
+         * @returns Whether the clip still owns its state — the resolution may have been superseded
+         * by a rebuild that dropped it.
+         * @internal
+         */
+        _onClipResolved(clip) {
+            const component = this.component;
+            if (!component || this._assignedClips.get(clip.name) !== clip) {
+                return false;
+            }
+            this._assignClip(clip);
+            const layer = component.baseLayer;
+            if (layer && layer.activeState === clip.name) {
+                layer.play(clip.name);
+            }
+            return true;
+        }
+        /**
+         * Applies a clip's changed speed or loop. The engine bakes both into the playback state it
+         * creates on state entry, so a live change re-enters the state and restores the playhead.
+         *
+         * @param clip - The clip element.
+         * @internal
+         */
+        _onClipParamsChanged(clip) {
+            const component = this.component;
+            if (!component || this._assignedClips.get(clip.name) !== clip) {
+                return;
+            }
+            this._assignClip(clip);
+            const layer = component.baseLayer;
+            if (layer && layer.activeState === clip.name) {
+                const time = layer.activeStateCurrentTime;
+                layer.play(clip.name);
+                layer.activeStateCurrentTime = time;
+            }
+        }
+        /**
+         * Resumes playback, optionally switching to a named clip first (a hard cut). A name that
+         * matches no clip leaves the selection unchanged.
+         *
+         * @param name - The name of the clip to play. Resumes the current clip when omitted.
+         */
+        play(name) {
+            const component = this.component;
+            const layer = component ? component.baseLayer : null;
+            if (!component || !layer) {
+                return;
+            }
+            // layer.play sets the layer controller's playing flag; the component's is the system
+            // gate. Setting both is what makes this a resume regardless of how playback stopped.
+            if (name !== undefined) {
+                if (!layer.states.includes(name)) {
+                    return;
+                }
+                layer.play(name);
+            }
+            else {
+                layer.play();
+            }
+            component.playing = true;
+        }
+        /**
+         * Pauses playback, preserving the playhead — {@link play} resumes from where it stopped.
+         */
+        pause() {
+            if (!this.component) {
+                return;
+            }
+            // Only the component flag - the single gate the system tick reads - is cleared. The
+            // layer controller's flag is left as-is so a pause is exactly reversible, whether
+            // resumed through play() (which sets both) or through the component API directly.
+            this.component.playing = false;
+        }
+        /**
+         * Cross-fades to a named clip and ensures playback is running. A name that matches no clip
+         * leaves the selection unchanged.
+         *
+         * @param name - The name of the clip to fade to.
+         * @param time - The fade duration in seconds. Defaults to the `transition-time` attribute.
+         */
+        transition(name, time) {
+            const component = this.component;
+            const layer = component ? component.baseLayer : null;
+            if (!component || !layer || !layer.states.includes(name)) {
+                return;
+            }
+            layer.transition(name, Math.max(0, time ?? this._transitionTime));
+            layer.playing = true;
+            component.playing = true;
+        }
+        /**
+         * Gets the underlying PlayCanvas anim component.
+         * @returns The anim component.
+         */
+        get component() {
+            return super.component;
+        }
+        /**
+         * Gets the names of the assigned clips.
+         * @returns The clip names, in assignment order.
+         */
+        get clips() {
+            const layer = this.component ? this.component.baseLayer : null;
+            return layer ? layer.states.filter(state => !playcanvas.ANIM_CONTROL_STATES.includes(state)) : [];
+        }
+        /**
+         * Sets whether playback starts automatically once a clip is assigned. Defaults to `true`.
+         * Applies when clips are assigned — it does not stop a clip that is already playing.
+         * @param value - Whether playback starts automatically.
+         */
+        set activate(value) {
+            this._activate = value;
+            if (this.component) {
+                this.component.activate = value;
+            }
+        }
+        /**
+         * Gets whether playback starts automatically once a clip is assigned.
+         * @returns Whether playback starts automatically.
+         */
+        get activate() {
+            return this._activate;
+        }
+        /**
+         * Sets the name of the active clip. Changing it switches playback, cross-fading over
+         * `transition-time` seconds (a hard cut at 0). An empty value leaves the current clip
+         * playing; a name that matches no clip warns and leaves the selection unchanged.
+         * @param value - The name of the active clip.
+         */
+        set clip(value) {
+            this._clip = value;
+            const component = this.component;
+            const layer = component ? component.baseLayer : null;
+            if (!component || !layer || !value) {
+                return;
+            }
+            if (!layer.states.includes(value)) {
+                this._warnUnknownClip(value);
+                return;
+            }
+            if (layer.activeState === value) {
+                return;
+            }
+            if (this._transitionTime > 0) {
+                this.transition(value);
+            }
+            else {
+                this.play(value);
+            }
+        }
+        /**
+         * Gets the name of the active clip.
+         * @returns The name of the active clip.
+         */
+        get clip() {
+            return this._clip;
+        }
+        /**
+         * Sets the playback speed multiplier applied across all clips, where 0 freezes playback.
+         * Defaults to 1.
+         * @param value - The playback speed multiplier.
+         */
+        set speed(value) {
+            this._speed = value;
+            if (this.component) {
+                this.component.speed = value;
+            }
+        }
+        /**
+         * Gets the playback speed multiplier applied across all clips.
+         * @returns The playback speed multiplier.
+         */
+        get speed() {
+            return this._speed;
+        }
+        /**
+         * Sets the cross-fade duration of clip switches made through the `clip` attribute, in
+         * seconds. Defaults to 0 (a hard cut).
+         * @param value - The cross-fade duration in seconds.
+         */
+        set transitionTime(value) {
+            this._transitionTime = value;
+        }
+        /**
+         * Gets the cross-fade duration of clip switches made through the `clip` attribute.
+         * @returns The cross-fade duration in seconds.
+         */
+        get transitionTime() {
+            return this._transitionTime;
+        }
+        static get observedAttributes() {
+            return [...super.observedAttributes, 'activate', 'clip', 'speed', 'transition-time'];
+        }
+        attributeChangedCallback(name, _oldValue, newValue) {
+            super.attributeChangedCallback(name, _oldValue, newValue);
+            switch (name) {
+                case 'activate':
+                    this.activate = parseBool(newValue, true);
+                    break;
+                case 'clip':
+                    this.clip = newValue ?? '';
+                    break;
+                case 'speed':
+                    this.speed = parseNumber(newValue, 1, name);
+                    break;
+                case 'transition-time':
+                    this.transitionTime = parseNumber(newValue, 0, name);
+                    break;
+            }
+        }
+    }
+    customElements.define('pc-anim', AnimComponentElement);
+
+    /**
+     * The AnimClipElement interface provides properties and methods for manipulating
+     * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-anim-clip/ | `<pc-anim-clip>`}
+     * elements. The AnimClipElement interface also inherits the properties and methods of the
+     * {@link HTMLElement} interface.
+     *
+     * A clip declares one named animation on its parent `<pc-anim>`. `name` is both the clip's name
+     * and the track looked up in the clip's source: an explicit `asset` (a `container`, an
+     * `animation` `.glb`, or an `animclip` JSON), or, without one, the container of the `<pc-model>`
+     * enclosing the parent `<pc-anim>`. A source holding a single track supplies it whatever it is
+     * named; in a multi-track source the track named `name` is chosen, falling back to the first
+     * with a warning. The element becomes ready once its resolved track is assigned.
+     *
+     * @category Components
+     */
+    class AnimClipElement extends AsyncElement {
         /**
-         * The element hosting this component, held so the host's readiness cycles can be observed
-         * even after `closestEntity` would no longer resolve (during teardown).
+         * The `<pc-anim>` this clip was adopted by, captured when the parent adopts the clip and on
+         * connection.
+         *
+         * `disconnectedCallback` cannot rediscover it: by the time the element is disconnected its
+         * `parentElement` is already `null`, so a lookup would both fail to find the component and
+         * emit a misleading "must be a direct child" warning for what is an ordinary removal.
          */
-        _hostElement = null;
+        _animElement = null;
+        _asset = '';
         /**
-         * The listener re-applying this component when the host's readiness cycles. Held for
-         * removal on disconnect.
+         * Incremented on every connect and disconnect, and captured by connectedCallback on entry —
+         * a resume from an await abandons itself if the value has moved on, so a stale callback can
+         * neither act on a torn-down tree nor register its clip alongside a re-inserted element's
+         * own callback.
          */
-        _hostReadyListener = null;
+        _connectionGeneration = 0;
+        _errorHandle = null;
         /**
-         * Incremented on every connect and disconnect. connectedCallback captures the value on entry
-         * and abandons itself wherever it resumes from an await if the value has moved on — so a
-         * callback whose element was removed cannot act on a torn-down tree, and one whose element
-         * was removed and re-inserted (which runs a callback of its own) cannot add the component a
-         * second time.
+         * Incremented on every track resolution and on disconnect, and captured by a resolution when
+         * it starts. A resolution that resumes from an await or an asset callback abandons itself if
+         * the value has moved on, so a superseded resolution cannot hand a stale track to the parent.
          */
-        _connectionGeneration = 0;
+        _loadGeneration = 0;
         /**
-         * Creates a new ComponentElement instance.
+         * The pending asset subscriptions of the current resolution, if it is waiting for its asset.
+         * Held so that whatever supersedes the resolution can detach the handlers from the asset,
+         * rather than leave them registered until the asset settles (or forever, if it never does).
+         */
+        _loadHandle = null;
+        _loop = true;
+        _name = '';
+        _speed = 1;
+        /**
+         * The source complaint already made — the asset id it was made for, or `''` for the
+         * no-asset-no-model case — so re-resolutions (host cycles, model reloads) do not repeat it.
+         */
+        _warnedSource = null;
+        /**
+         * Whether the owning `<pc-anim>` already rejected this clip's name — its sweeps re-run on
+         * host cycles and must not repeat the complaint.
+         */
+        _warnedInvalid = false;
+        /**
+         * The clip's resolved track. `null` until resolution completes, during which the owning
+         * `<pc-anim>` assigns the engine's placeholder track in its stead.
          *
-         * @param componentName - The name of the component.
-         * @ignore
+         * @internal
          */
-        constructor(componentName) {
-            super();
-            this._componentName = componentName;
+        _track = null;
+        async connectedCallback() {
+            const generation = ++this._connectionGeneration;
+            const animElement = this.animElement;
+            await animElement?.ready();
+            // The element may have been removed (perhaps re-inserted, which runs a callback of its
+            // own), or its parent torn down, while we were waiting. A <pc-app> disconnects before
+            // its children, so by the time we resume the component can already be gone - see the
+            // matching guard in disconnectedCallback below.
+            const component = animElement ? animElement.component : null;
+            if (generation !== this._connectionGeneration || !animElement || !component) {
+                return;
+            }
+            this._animElement = animElement;
+            animElement._registerClip(this);
+        }
+        disconnectedCallback() {
+            // Invalidate any connectedCallback or track resolution still suspended on an await
+            this._connectionGeneration++;
+            this._loadGeneration++;
+            this._detachLoadHandlers();
+            // Uses the cached parent rather than a fresh lookup, since parentElement is already null
+            // by now. The component itself is null if the whole <pc-app> is being torn down —
+            // parents disconnect first and have already removed the component.
+            this._animElement?._unregisterClip(this);
+            this._animElement = null;
+            this._track = null;
+            this._resetReady();
+        }
+        get animElement() {
+            const animElement = this.parentElement;
+            if (!(animElement instanceof AnimComponentElement)) {
+                const label = this._name ? ` '${this._name}'` : '';
+                console.warn(`pc-anim-clip${label} must be a direct child of a pc-anim element`);
+                return null;
+            }
+            return animElement;
+        }
+        _detachLoadHandlers() {
+            this._loadHandle?.off();
+            this._loadHandle = null;
+            this._errorHandle?.off();
+            this._errorHandle = null;
         }
         /**
-         * Returns the data the component is created with. Overridden by subclasses to supply the
-         * initial values of their cached properties.
+         * Reports a name-validation failure from the owning `<pc-anim>`, once per name value.
          *
-         * @returns The initial component data.
+         * @param message - The complaint.
+         * @internal
          */
-        getInitialComponentData() {
-            return {};
+        _markInvalid(message) {
+            if (this._warnedInvalid) {
+                return;
+            }
+            this._warnedInvalid = true;
+            console.warn(message);
         }
         /**
-         * Creates the component on the host's current entity, removing it first from a previous
-         * entity that is still alive (a retargeted `<pc-node>` moves its decorations with it). When
-         * the entity already has a component of this type — a glTF node arriving with its authored
-         * `render` component, say — warns and leaves `component` null. The element-level warning is
-         * load-bearing: the engine's own duplicate-addComponent warning is Debug-stripped from
-         * production builds, which would otherwise leave a silent null.
+         * Resolves the clip's track from its source and hands it to the owning `<pc-anim>`. Called
+         * by the parent whenever the clip is (re)adopted, and again when the source changes; a newer
+         * resolution supersedes one still in flight. The element becomes ready once the resolved
+         * track is assigned.
+         *
+         * @param animElement - The owning `<pc-anim>`.
+         * @internal
          */
-        _applyComponent() {
-            const entity = this._hostElement?.entity ?? null;
-            if (this._component && this._component.entity === entity) {
+        async _resolveTrack(animElement) {
+            this._animElement = animElement;
+            const generation = ++this._loadGeneration;
+            this._detachLoadHandlers();
+            if (this._asset) {
+                const asset = useAsset(this._asset);
+                if (!asset) {
+                    this._warnSource(`pc-anim-clip '${this._name}' could not find asset '${this._asset}' - clip not assigned`);
+                    return;
+                }
+                if (asset.loaded) {
+                    this._extractTrack(asset, `asset '${this._asset}'`);
+                    return;
+                }
+                // Whichever of load/error fires first detaches the other. The generation is
+                // re-checked even though a superseded handler is detached: the detach relies on how
+                // the engine's event emitter treats removal, while the check holds on its own.
+                this._loadHandle = asset.once('load', () => {
+                    this._detachLoadHandlers();
+                    if (generation !== this._loadGeneration) {
+                        return;
+                    }
+                    this._extractTrack(asset, `asset '${this._asset}'`);
+                });
+                this._errorHandle = asset.once('error', () => {
+                    this._detachLoadHandlers();
+                    if (generation !== this._loadGeneration) {
+                        return;
+                    }
+                    this._warnSource(`pc-anim-clip '${this._name}' - asset '${this._asset}' failed to load - clip not assigned`);
+                });
                 return;
             }
-            // A retarget leaves the previous component on a still-live entity - remove it so the
-            // decoration follows the element, or vanishes with a dissolved binding. A destroyed
-            // entity took its components with it.
-            const previous = this._component;
-            if (previous?.entity && previous.entity.c[this._componentName] === previous) {
-                previous.entity.removeComponent(this._componentName);
+            const model = animElement.parentElement;
+            if (!(model instanceof ModelElement)) {
+                this._warnSource(`pc-anim-clip '${this._name}' has no asset and no enclosing pc-model - clip not assigned`);
+                return;
             }
-            this._component = null;
-            if (!entity) {
+            await model.ready();
+            if (generation !== this._loadGeneration) {
                 return;
             }
-            if (entity.c[this._componentName]) {
-                const label = this.id ? ` '${this.id}'` : '';
-                console.warn(`${this.tagName.toLowerCase()}${label} - '${entity.name}' already has a '${this._componentName}' component - component not added`);
+            const asset = AssetElement.get(model.asset);
+            if (!asset?.resource) {
+                // The model's load failed; it already reported the error
                 return;
             }
-            this._component = entity.addComponent(this._componentName, this.getInitialComponentData());
+            this._extractTrack(asset, `model '${model.asset}'`);
         }
-        async _addComponent() {
-            const generation = this._connectionGeneration;
-            const entityElement = this.closestEntity;
-            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`);
+        /**
+         * Complains about the clip's source, once per source value — resolutions re-run on host
+         * cycles and model reloads, and must not repeat the complaint.
+         */
+        _warnSource(message) {
+            if (this._warnedSource === this._asset) {
                 return;
             }
-            await entityElement.ready();
-            // The element may have been removed, or removed and re-inserted, while the entity became
-            // ready — the component belongs to the connection that owns the current generation.
-            if (generation !== this._connectionGeneration) {
+            this._warnedSource = this._asset;
+            console.warn(message);
+        }
+        /**
+         * Picks the clip's track out of a loaded source asset: the track named `name`, or a lone
+         * track whatever it is named, or the first of several with a warning.
+         *
+         * @param asset - The loaded source asset.
+         * @param source - How warnings name the source.
+         */
+        _extractTrack(asset, source) {
+            const label = `pc-anim-clip '${this._name}'`;
+            // Widened: the engine registers an 'animclip' handler but omits the type from the
+            // Asset.type union
+            const type = asset.type;
+            let candidates;
+            switch (type) {
+                case 'container':
+                    candidates = asset.resource.animations.map((animationAsset) => animationAsset.resource);
+                    break;
+                case 'animation':
+                    candidates = asset.resources;
+                    break;
+                case 'animclip':
+                    candidates = [asset.resource];
+                    break;
+                default:
+                    this._warnSource(`${label} - ${source} has type '${asset.type}', expected 'container', 'animation' or 'animclip' - clip not assigned`);
+                    return;
+            }
+            // A JSON 'animation' asset parses to the engine's legacy Animation class, which the anim
+            // system rejects - only real AnimTracks qualify
+            const tracks = candidates.filter((candidate) => candidate instanceof playcanvas.AnimTrack);
+            if (tracks.length === 0) {
+                this._warnSource(`${label} - ${source} contains no usable animation track - clip not assigned`);
                 return;
             }
-            this._hostElement = entityElement;
-            this._applyComponent();
-            // Re-apply when the host's readiness cycles without this element disconnecting: a
-            // `<pc-node>` rebinding after its model reloads or retargets, or a re-created entity.
-            // The 'ready' event bubbles, so events from descendants pass through this host - only
-            // the host's own cycles count. Readiness is cycled here too, so decorations one level
-            // down re-apply the same way.
-            this._hostReadyListener = (event) => {
-                if (event.target !== this._hostElement) {
-                    return;
-                }
-                if (generation !== this._connectionGeneration) {
-                    return;
+            let track = tracks.find((candidate) => candidate.name === this._name);
+            if (!track) {
+                track = tracks[0];
+                if (tracks.length > 1) {
+                    console.warn(`${label} - no track named '${this._name}' in ${source} - using '${track.name}' (available: ${tracks.map((candidate) => candidate.name).join(', ')})`);
                 }
-                this._hostCycled();
-            };
-            entityElement.addEventListener('ready', this._hostReadyListener);
+            }
+            this._track = track;
+            if (this._animElement?._onClipResolved(this)) {
+                this._onReady();
+            }
         }
         /**
-         * Re-evaluates this component against the host's current entity: applied to a new entity,
-         * moved from a still-live old one, or removed when the host no longer fronts an entity at
-         * all. Readiness follows - it cycles with a re-application and stays unresolved while the
-         * host is unbound. Called by the host-ready listener, and directly by a `<pc-node>`
-         * dissolving its binding: the one transition that fires no ready event to ride.
-         *
-         * @internal
+         * Sets the id of the `pc-asset` supplying the clip's track: a `container`, an `animation`
+         * `.glb`, or an `animclip` JSON. When empty, the track comes from the container of the
+         * `<pc-model>` enclosing the parent `<pc-anim>`.
+         * @param value - The asset id.
          */
-        _hostCycled() {
-            this._resetReady();
-            this._applyComponent();
-            if (this._hostElement?.entity) {
-                this.initComponent();
-                this._onReady();
+        set asset(value) {
+            this._asset = value;
+            this._warnedSource = null;
+            if (this._animElement) {
+                this._resetReady();
+                this._track = null;
+                this._resolveTrack(this._animElement);
             }
         }
         /**
-         * Configures the newly added component. Overridden by subclasses whose setup goes beyond
-         * the initial data — child-element handling, asset resolution and the like.
+         * Gets the id of the `pc-asset` supplying the clip's track.
+         * @returns The asset id.
          */
-        initComponent() {
-            // optional hook
+        get asset() {
+            return this._asset;
         }
-        async connectedCallback() {
-            const generation = ++this._connectionGeneration;
-            this._appElement = this.closestApp ?? null;
-            await this._appElement?.ready();
-            // The element may have been removed, or removed and re-inserted, while the application
-            // became ready. A re-insertion runs a connectedCallback of its own, so a stale resume
-            // must not add the component alongside it.
-            if (generation !== this._connectionGeneration) {
-                return;
-            }
-            await this._addComponent();
-            if (generation !== this._connectionGeneration) {
-                return;
-            }
-            this.initComponent();
-            this._onReady();
+        /**
+         * Sets whether the clip loops. A non-looping clip holds its last pose when it ends — the
+         * engine reports no completion. Defaults to `true`.
+         * @param value - Whether the clip loops.
+         */
+        set loop(value) {
+            this._loop = value;
+            this._animElement?._onClipParamsChanged(this);
         }
-        disconnectedCallback() {
-            // Invalidate any connectedCallback still suspended on an await
-            this._connectionGeneration++;
-            if (this._hostElement && this._hostReadyListener) {
-                this._hostElement.removeEventListener('ready', this._hostReadyListener);
-            }
-            this._hostElement = null;
-            this._hostReadyListener = null;
-            // 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 (this._appElement?.app && this._component?.entity) {
-                this._component.entity.removeComponent(this._componentName);
+        /**
+         * Gets whether the clip loops.
+         * @returns Whether the clip loops.
+         */
+        get loop() {
+            return this._loop;
+        }
+        /**
+         * Sets the name of the clip: the name it is played by, and the track looked up in the
+         * clip's source. Names must be unique within a `<pc-anim>` and must not contain `.`.
+         * @param value - The clip name.
+         */
+        set name(value) {
+            this._name = value;
+            this._warnedInvalid = false;
+            if (this._animElement) {
+                this._resetReady();
+                this._animElement._refreshClips();
             }
-            this._component = null;
-            this._appElement = null;
-            this._resetReady();
         }
         /**
-         * The PlayCanvas component instance. `null` until the element is ready, and also for an
-         * element that is not a descendant of a `<pc-entity>` — await {@link whenReady} or the
-         * element's `ready()` promise before accessing it.
-         * @returns The component instance, or `null`.
+         * Gets the name of the clip.
+         * @returns The clip name.
          */
-        get component() {
-            return this._component;
+        get name() {
+            return this._name;
         }
         /**
-         * Sets the enabled state of the component.
-         * @param value - The enabled state of the component.
+         * Sets the playback speed of the clip, where negative values play it backwards. Applies
+         * immediately, preserving the playhead. Defaults to 1.
+         * @param value - The playback speed.
          */
-        set enabled(value) {
-            this._enabled = value;
-            if (this.component) {
-                this.component.enabled = value;
-            }
+        set speed(value) {
+            this._speed = value;
+            this._animElement?._onClipParamsChanged(this);
         }
         /**
-         * Gets the enabled state of the component.
-         * @returns The enabled state of the component.
+         * Gets the playback speed of the clip.
+         * @returns The playback speed.
          */
-        get enabled() {
-            return this._enabled;
+        get speed() {
+            return this._speed;
         }
         static get observedAttributes() {
-            return ['enabled'];
+            return ['asset', 'loop', 'name', 'speed'];
         }
         attributeChangedCallback(name, _oldValue, newValue) {
             switch (name) {
-                case 'enabled':
-                    this.enabled = parseBool(newValue, true);
+                case 'asset':
+                    this.asset = newValue ?? '';
+                    break;
+                case 'loop':
+                    this.loop = parseBool(newValue, true);
+                    break;
+                case 'name':
+                    this.name = newValue ?? '';
+                    break;
+                case 'speed':
+                    this.speed = parseNumber(newValue, 1, name);
                     break;
             }
         }
     }
+    customElements.define('pc-anim-clip', AnimClipElement);
 
     /**
-     * The ListenerComponentElement interface provides properties and methods for manipulating
-     * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-listener/ | `<pc-listener>`} elements.
-     * The ListenerComponentElement interface also inherits the properties and methods of the
+     * The AudioListenerComponentElement interface provides properties and methods for manipulating
+     * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-audio-listener/ | `<pc-audio-listener>`} elements.
+     * The AudioListenerComponentElement interface also inherits the properties and methods of the
      * {@link HTMLElement} interface.
      *
+     * Engine component: {@link AudioListenerComponent} (`audiolistener`).
+     *
      * @category Components
      */
-    class ListenerComponentElement extends ComponentElement {
+    class AudioListenerComponentElement extends ComponentElement {
         /** @ignore */
         constructor() {
             super('audiolistener');
@@ -3158,7 +4527,7 @@
             return super.component;
         }
     }
-    customElements.define('pc-listener', ListenerComponentElement);
+    customElements.define('pc-audio-listener', AudioListenerComponentElement);
 
     const transitionModes = new Map([
         ['tint', playcanvas.BUTTON_TRANSITION_MODE_TINT],
@@ -3170,6 +4539,8 @@
      * The ButtonComponentElement interface also inherits the properties and methods of the
      * {@link HTMLElement} interface.
      *
+     * Engine component: {@link ButtonComponent} (`button`).
+     *
      * @category Components
      */
     class ButtonComponentElement extends ComponentElement {
@@ -3250,7 +4621,9 @@
         }
         /**
          * Sets the reference (CSS selector, element id or entity name) to the `<pc-entity>` whose image
-         * element is used for visual transitions. Defaults to the button's own entity.
+         * element is used for visual transitions. Defaults to the button's own entity — inside a
+         * `<pc-model>`, that is the model's host entity, so supply an explicit reference to target a
+         * UI entity instead.
          * @param value - The image entity reference.
          */
         set image(value) {
@@ -3569,6 +4942,8 @@
      * The CameraComponentElement interface also inherits the properties and methods of the
      * {@link HTMLElement} interface.
      *
+     * Engine component: {@link CameraComponent} (`camera`).
+     *
      * @category Components
      */
     class CameraComponentElement extends ComponentElement {
@@ -4054,6 +5429,8 @@
      * retargets or rebinds picks up the new node's geometry. An entity with no asset-backed render
      * component warns, and the collider has no shape.
      *
+     * Engine component: {@link CollisionComponent} (`collision`).
+     *
      * @category Components
      */
     class CollisionComponentElement extends ComponentElement {
@@ -4090,7 +5467,9 @@
          * no attribute to supply it - so the host's visible geometry, the meaning a mesh collider
          * on a glTF node carries, fills the gap. Runs on every application (so a rebound `pc-node`
          * recomputes it) and on a runtime switch to `type="mesh"`; an explicitly assigned
-         * `renderAsset` is never overwritten.
+         * `renderAsset` is never overwritten. A `pc-model` host entity never carries a render
+         * component (the instantiated content beneath it does), so a mesh collider that should take
+         * an asset's geometry belongs on a bound `pc-node`.
          */
         _applyMeshGeometryDefault() {
             const component = this.component;
@@ -4235,6 +5614,13 @@
      * The ElementComponentElement interface also inherits the properties and methods of the
      * {@link HTMLElement} interface.
      *
+     * Despite the name, this is not a base class or a generic wrapper: it is the engine's 2D UI
+     * component, which gives its host entity a rectangle in a `<pc-screen>` hierarchy that draws
+     * either an image, a line of text or nothing (`type="image"`, `"text"` or `"group"`). The tag
+     * spells the engine component it adds, as every component element does.
+     *
+     * Engine component: {@link ElementComponent} (`element`).
+     *
      * @category Components
      */
     class ElementComponentElement extends ComponentElement {
@@ -4923,6 +6309,8 @@
      * constraint breaks. A broken joint no longer constrains its bodies; calling `refreshFrames()` on
      * the underlying component re-attaches it. Bubbles and is composed.
      *
+     * Engine component: {@link JointComponent} (`joint`).
+     *
      * @category Components
      */
     class JointComponentElement extends ComponentElement {
@@ -5781,10 +7169,12 @@
 
     /**
      * The LayoutChildComponentElement interface provides properties and methods for manipulating
-     * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-layoutchild/ | `<pc-layoutchild>`} elements.
+     * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-layout-child/ | `<pc-layout-child>`} elements.
      * The LayoutChildComponentElement interface also inherits the properties and methods of the
      * {@link HTMLElement} interface.
      *
+     * Engine component: {@link LayoutChildComponent} (`layoutchild`).
+     *
      * @category Components
      */
     class LayoutChildComponentElement extends ComponentElement {
@@ -5977,7 +7367,7 @@
             }
         }
     }
-    customElements.define('pc-layoutchild', LayoutChildComponentElement);
+    customElements.define('pc-layout-child', LayoutChildComponentElement);
 
     const orientations$1 = new Map([
         ['horizontal', playcanvas.ORIENTATION_HORIZONTAL],
@@ -5991,10 +7381,12 @@
     ]);
     /**
      * The LayoutGroupComponentElement interface provides properties and methods for manipulating
-     * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-layoutgroup/ | `<pc-layoutgroup>`} elements.
+     * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-layout-group/ | `<pc-layout-group>`} elements.
      * The LayoutGroupComponentElement interface also inherits the properties and methods of the
      * {@link HTMLElement} interface.
      *
+     * Engine component: {@link LayoutGroupComponent} (`layoutgroup`).
+     *
      * @category Components
      */
     class LayoutGroupComponentElement extends ComponentElement {
@@ -6234,7 +7626,7 @@
             }
         }
     }
-    customElements.define('pc-layoutgroup', LayoutGroupComponentElement);
+    customElements.define('pc-layout-group', LayoutGroupComponentElement);
 
     const shadowTypes = new Map([
         ['pcf1-16f', playcanvas.SHADOW_PCF1_16F],
@@ -6253,6 +7645,8 @@
      * The LightComponentElement interface also inherits the properties and methods of the
      * {@link HTMLElement} interface.
      *
+     * Engine component: {@link LightComponent} (`light`).
+     *
      * @category Components
      */
     class LightComponentElement extends ComponentElement {
@@ -6734,10 +8128,12 @@
 
     /**
      * The ParticleSystemComponentElement interface provides properties and methods for manipulating
-     * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-particles/ | `<pc-particles>`} elements.
+     * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-particle-system/ | `<pc-particle-system>`} elements.
      * The ParticleSystemComponentElement interface also inherits the properties and methods of the
      * {@link HTMLElement} interface.
      *
+     * Engine component: {@link ParticleSystemComponent} (`particlesystem`).
+     *
      * @category Components
      */
     class ParticleSystemComponentElement extends ComponentElement {
@@ -6856,7 +8252,7 @@
             }
         }
     }
-    customElements.define('pc-particles', ParticleSystemComponentElement);
+    customElements.define('pc-particle-system', ParticleSystemComponentElement);
 
     const blendTypes = new Map([
         ['none', playcanvas.BLEND_NONE],
@@ -9088,6 +10484,8 @@
      * 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.
      *
+     * Engine component: {@link RenderComponent} (`render`).
+     *
      * @category Components
      */
     class RenderComponentElement extends ComponentElement {
@@ -9212,10 +10610,12 @@
 
     /**
      * The RigidBodyComponentElement interface provides properties and methods for manipulating
-     * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-rigidbody/ | `<pc-rigidbody>`} elements.
+     * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-rigid-body/ | `<pc-rigid-body>`} elements.
      * The RigidBodyComponentElement interface also inherits the properties and methods of the
      * {@link HTMLElement} interface.
      *
+     * Engine component: {@link RigidBodyComponent} (`rigidbody`).
+     *
      * @category Components
      */
     class RigidBodyComponentElement extends ComponentElement {
@@ -9407,7 +10807,7 @@
             }
         }
     }
-    customElements.define('pc-rigidbody', RigidBodyComponentElement);
+    customElements.define('pc-rigid-body', RigidBodyComponentElement);
 
     // The engine's SCALEMODE_* constants are the strings 'none' and 'blend', so this map happens to be
     // an identity. It is still the right shape: it supplies parseEnum's valid-name list, it is what the
@@ -9423,6 +10823,8 @@
      * The ScreenComponentElement interface also inherits the properties and methods of the
      * {@link HTMLElement} interface.
      *
+     * Engine component: {@link ScreenComponent} (`screen`).
+     *
      * @category Components
      */
     class ScreenComponentElement extends ComponentElement {
@@ -9575,6 +10977,8 @@
      * The ScrollbarComponentElement interface also inherits the properties and methods of the
      * {@link HTMLElement} interface.
      *
+     * Engine component: {@link ScrollbarComponent} (`scrollbar`).
+     *
      * @category Components
      */
     class ScrollbarComponentElement extends ComponentElement {
@@ -9710,10 +11114,12 @@
     ]);
     /**
      * The ScrollViewComponentElement interface provides properties and methods for manipulating
-     * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-scrollview/ | `<pc-scrollview>`} elements.
+     * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-scroll-view/ | `<pc-scroll-view>`} elements.
      * The ScrollViewComponentElement interface also inherits the properties and methods of the
      * {@link HTMLElement} interface.
      *
+     * Engine component: {@link ScrollViewComponent} (`scrollview`).
+     *
      * @category Components
      */
     class ScrollViewComponentElement extends ComponentElement {
@@ -10072,11 +11478,11 @@
             }
         }
     }
-    customElements.define('pc-scrollview', ScrollViewComponentElement);
+    customElements.define('pc-scroll-view', ScrollViewComponentElement);
 
     /**
-     * The ScriptElement interface provides properties and methods for manipulating
-     * `<pc-script>` elements. The ScriptElement interface also inherits the properties and
+     * The ScriptInstanceElement interface provides properties and methods for manipulating
+     * `<pc-script-instance>` elements. The ScriptInstanceElement interface also inherits the properties and
      * methods of the {@link AsyncElement} interface.
      *
      * Script attributes can be supplied through two channels:
@@ -10098,7 +11504,7 @@
      * 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.
+     * `<pc-script>` element.
      *
      * @fires {CustomEvent} scriptattributeschange - Fired when the script's attributes change. The
      * `detail` carries the new `attributes` object. Bubbles.
@@ -10107,11 +11513,11 @@
      * @fires {CustomEvent} scriptnamechange - Fired when the script is renamed on a live element. The
      * `detail` carries `oldName` and `newName`. Bubbles.
      */
-    class ScriptElement extends AsyncElement {
+    class ScriptInstanceElement extends AsyncElement {
         _attributes = {};
         _enabled = true;
         /**
-         * The Script instance created for this element by its parent `<pc-scripts>` element.
+         * The Script instance created for this element by its parent `<pc-script>` element.
          * @internal
          */
         _script = null;
@@ -10157,11 +11563,11 @@
         }
         /**
          * 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
+         * (it is what the parent `<pc-script>` 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');
+         * const script = document.createElement('pc-script-instance');
          * script.name = 'rotate';
          * scriptsElement.appendChild(script);
          * await script.ready();
@@ -10188,10 +11594,10 @@
             return this._script;
         }
         connectedCallback() {
-            // Script instances are created by the parent pc-scripts element, so an element placed
+            // Script instances are created by the parent pc-script element, so an element placed
             // anywhere else is inert and never becomes ready - warn rather than hang silently
-            if (this.parentElement?.tagName !== 'PC-SCRIPTS') {
-                console.warn(`pc-script '${this.getAttribute('name')}' must be a direct child of pc-scripts - script not created`);
+            if (this.parentElement?.tagName !== 'PC-SCRIPT') {
+                console.warn(`pc-script-instance '${this.getAttribute('name')}' must be a direct child of pc-script - script not created`);
             }
         }
         disconnectedCallback() {
@@ -10202,7 +11608,7 @@
             this._resetReady();
         }
         /**
-         * Called by the parent `<pc-scripts>` element when the script instance has been created.
+         * Called by the parent `<pc-script>` element when the script instance has been created.
          * Creation can happen more than once per connection (a runtime `name` change recreates the
          * instance), but `_onReady` signals readiness at most once per cycle.
          * @internal
@@ -10224,7 +11630,7 @@
                         this.scriptAttributes = JSON.parse(newValue);
                     }
                     catch (error) {
-                        console.warn(`Invalid 'attributes' JSON on pc-script '${this.getAttribute('name')}': ${error.message}`);
+                        console.warn(`Invalid 'attributes' JSON on pc-script-instance '${this.getAttribute('name')}': ${error.message}`);
                     }
                     break;
                 case 'enabled':
@@ -10244,14 +11650,14 @@
             }
         }
     }
-    customElements.define('pc-script', ScriptElement);
+    customElements.define('pc-script-instance', ScriptInstanceElement);
 
     /**
-     * Attributes on `pc-script` that never map to script attributes: the element's own API (derived
+     * Attributes on `pc-script-instance` 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,
+        ...ScriptInstanceElement.observedAttributes,
         'accesskey',
         'autocapitalize',
         'autofocus',
@@ -10282,7 +11688,7 @@
         'translate'
     ]);
     /**
-     * Checks whether a `pc-script` attribute name is reserved (and so never maps to a script
+     * Checks whether a `pc-script-instance` 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
@@ -10438,10 +11844,12 @@
     };
     /**
      * The ScriptComponentElement interface provides properties and methods for manipulating
-     * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-scripts/ | `<pc-scripts>`} elements.
+     * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-script/ | `<pc-script>`} elements.
      * The ScriptComponentElement interface also inherits the properties and methods of the
      * {@link HTMLElement} interface.
      *
+     * Engine component: {@link ScriptComponent} (`script`).
+     *
      * @category Components
      */
     class ScriptComponentElement extends ComponentElement {
@@ -10458,14 +11866,23 @@
         }
         connectedCallback() {
             // (Re-)observe on every connection - disconnectedCallback disconnects the observer.
-            // Attribute changes on child pc-script elements are watched here too: per-property
+            // Attribute changes on child pc-script-instance 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) => {
+            this.querySelectorAll(':scope > pc-script-instance').forEach((scriptElement) => {
+                // A host readiness cycle re-runs this against a component that can have survived it
+                // (a pc-model reloading content on its stable host entity). The engine rejects a
+                // duplicate create - returning null, silently in production builds - which would
+                // skip attribute application entirely. A surviving instance is re-asserted instead,
+                // so both cycle outcomes leave the component reflecting the element's declared state.
+                const script = this.scriptFor(scriptElement);
+                if (script) {
+                    this.applyDeclaredState(script, scriptElement);
+                    return;
+                }
                 this.createScript(scriptElement);
             });
         }
@@ -10599,9 +12016,9 @@
             this.mergeDeep(script, converted);
         }
         /**
-         * Returns the camelCase keys of the per-property attributes present on a `pc-script`
+         * Returns the camelCase keys of the per-property attributes present on a `pc-script-instance`
          * element.
-         * @param scriptElement - The `pc-script` element.
+         * @param scriptElement - The `pc-script-instance` element.
          * @returns The camelCase keys.
          */
         inlineKeys(scriptElement) {
@@ -10614,10 +12031,10 @@
             return keys;
         }
         /**
-         * Resolves the script instance owned by a `pc-script` element. Returns `null` when the
+         * Resolves the script instance owned by a `pc-script-instance` 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.
+         * @param scriptElement - The `pc-script-instance` element.
          * @returns The owned script, or `null`.
          */
         scriptFor(scriptElement) {
@@ -10646,7 +12063,7 @@
             }
         }
         /**
-         * Handles a runtime `name` change on a child `pc-script`, swapping the engine script instance
+         * Handles a runtime `name` change on a child `pc-script-instance`, 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.
@@ -10657,8 +12074,8 @@
          */
         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
+            // Only direct children are managed, matching initComponent's ':scope > pc-script-instance'
+            // contract - the event bubbles, so a deeper pc-script-instance must not be created here
             if (scriptElement.parentElement !== this)
                 return;
             // Before the component exists there is nothing to swap: initComponent creates from
@@ -10675,11 +12092,11 @@
             this.createScript(scriptElement);
         }
         /**
-         * Creates the script instance for a `pc-script` element. The instance is created disabled,
+         * Creates the script instance for a `pc-script-instance` 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.
+         * @param scriptElement - The `pc-script-instance` element to create the script instance for.
          * @returns The created script, or `null`.
          */
         createScript(scriptElement) {
@@ -10690,21 +12107,30 @@
             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.applyDeclaredState(script, scriptElement);
+            scriptElement._onScriptCreated();
+            return script;
+        }
+        /**
+         * Applies a `pc-script-instance` element's declared state to a script instance: the `attributes` JSON
+         * first with per-property-shadowed keys stripped, then the per-property attributes — each
+         * property is written exactly once and individual attributes win — and finally the declared
+         * enabled state, so `initialize()` runs with every attribute in place.
+         * @param script - The script instance.
+         * @param scriptElement - The `pc-script-instance` element holding the declared state.
+         */
+        applyDeclaredState(script, scriptElement) {
             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
+         * Applies the per-property attributes present on a `pc-script-instance` 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.
+         * @param scriptElement - The `pc-script-instance` element holding the attributes.
          */
         applyInlineAttributes(script, scriptElement) {
             const scriptName = scriptElement.getAttribute('name') ?? '';
@@ -10715,10 +12141,10 @@
             }
         }
         /**
-         * Applies a single per-property attribute change to the script of a `pc-script` element.
+         * Applies a single per-property attribute change to the script of a `pc-script-instance` 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 scriptElement - The `pc-script-instance` element whose attribute changed.
          * @param attributeName - The name of the changed attribute.
          */
         applyScriptProperty(scriptElement, attributeName) {
@@ -10754,7 +12180,7 @@
             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.`);
+                    console.warn(`Ignoring attribute '${attributeName}' on pc-script-instance '${scriptName}' - '${key}' is part of the Script API.`);
                     return;
                 }
                 if (typeof current === 'string') {
@@ -10810,10 +12236,10 @@
         }
         handleMutations(mutations) {
             for (const mutation of mutations) {
-                // Handle per-property attribute changes on child pc-script elements
+                // Handle per-property attribute changes on child pc-script-instance elements
                 if (mutation.type === 'attributes') {
                     const target = mutation.target;
-                    if (target instanceof ScriptElement &&
+                    if (target instanceof ScriptInstanceElement &&
                         target.parentElement === this &&
                         mutation.attributeName &&
                         !isReservedAttribute(mutation.attributeName)) {
@@ -10823,16 +12249,16 @@
                 }
                 // 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)
+                // (matching initComponent's ':scope > pc-script-instance' contract)
                 if (mutation.target !== this) {
                     continue;
                 }
-                // Handle removed nodes first, so that replacing a pc-script with a same-named one
+                // Handle removed nodes first, so that replacing a pc-script-instance 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 ScriptElement) {
+                    if (node instanceof ScriptInstanceElement) {
                         const scriptName = node.getAttribute('name');
                         if (scriptName &&
                             node._script &&
@@ -10845,7 +12271,7 @@
                 });
                 // Handle added nodes
                 mutation.addedNodes.forEach((node) => {
-                    if (node instanceof ScriptElement) {
+                    if (node instanceof ScriptInstanceElement) {
                         this.createScript(node);
                     }
                 });
@@ -10863,14 +12289,16 @@
             return super.component;
         }
     }
-    customElements.define('pc-scripts', ScriptComponentElement);
+    customElements.define('pc-script', ScriptComponentElement);
 
     /**
      * The SoundComponentElement interface provides properties and methods for manipulating
-     * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-sounds/ | `<pc-sounds>`} elements.
+     * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-sound/ | `<pc-sound>`} elements.
      * The SoundComponentElement interface also inherits the properties and methods of the
      * {@link HTMLElement} interface.
      *
+     * Engine component: {@link SoundComponent} (`sound`).
+     *
      * @category Components
      */
     class SoundComponentElement extends ComponentElement {
@@ -11061,11 +12489,11 @@
             }
         }
     }
-    customElements.define('pc-sounds', SoundComponentElement);
+    customElements.define('pc-sound', SoundComponentElement);
 
     /**
      * The SoundSlotElement interface provides properties and methods for manipulating
-     * `<pc-sound>` elements. The SoundSlotElement interface also inherits the properties and
+     * `<pc-sound-slot>` elements. The SoundSlotElement interface also inherits the properties and
      * methods of the {@link AsyncElement} interface.
      */
     class SoundSlotElement extends AsyncElement {
@@ -11079,7 +12507,7 @@
         _startTime = 0;
         _volume = 1;
         /**
-         * The `<pc-sounds>` this slot was added to, captured at connect time.
+         * The `<pc-sound>` this slot was added to, captured at connect time.
          *
          * `disconnectedCallback` cannot rediscover it: by the time the element is disconnected its
          * `parentElement` is already `null`, so a lookup would both fail to find the component and
@@ -11142,7 +12570,7 @@
         get soundElement() {
             const soundElement = this.parentElement;
             if (!(soundElement instanceof SoundComponentElement)) {
-                console.warn('pc-sound must be a direct child of a pc-sounds element');
+                console.warn('pc-sound-slot must be a direct child of a pc-sound element');
                 return null;
             }
             return soundElement;
@@ -11338,7 +12766,7 @@
             }
         }
     }
-    customElements.define('pc-sound', SoundSlotElement);
+    customElements.define('pc-sound-slot', SoundSlotElement);
 
     /**
      * The GSplatComponentElement interface provides properties and methods for manipulating
@@ -11346,6 +12774,8 @@
      * The GSplatComponentElement interface also inherits the properties and methods of the
      * {@link HTMLElement} interface.
      *
+     * Engine component: {@link GSplatComponent} (`gsplat`).
+     *
      * @category Components
      */
     class GSplatComponentElement extends ComponentElement {
@@ -11528,296 +12958,6 @@
     }
     customElements.define('pc-gsplat', GSplatComponentElement);
 
-    /**
-     * Formats one line of the printable hierarchy: the node's name, an `[index]` marker when the
-     * name is shared by several nodes in the model, the attached component types, and the material
-     * names of a render component.
-     *
-     * @param node - The node to format.
-     * @param counts - The number of nodes bearing each name.
-     * @returns The formatted line.
-     */
-    const formatNode = (node, counts) => {
-        const index = (counts.get(node.name) ?? 0) > 1 ? ` [${node.index}]` : '';
-        const components = node.components.length > 0 ? ` (${node.components.join(', ')})` : '';
-        // Braces rather than brackets: `[N]` already means a match index on this line
-        const materials = node.materials.length > 0 ? ` {${node.materials.map((slot) => slot.name ?? 'null').join(', ')}}` : '';
-        return `${node.name}${index}${components}${materials}`;
-    };
-    /**
-     * Formats the printable form of a hierarchy subtree.
-     *
-     * @param root - The subtree root.
-     * @param counts - The number of nodes bearing each name.
-     * @returns The tree, one line per node.
-     */
-    const formatHierarchy = (root, counts) => {
-        const lines = [formatNode(root, counts)];
-        const walk = (node, prefix) => {
-            node.children.forEach((child, i) => {
-                const last = i === node.children.length - 1;
-                lines.push(`${prefix}${last ? '└─ ' : '├─ '}${formatNode(child, counts)}`);
-                walk(child, `${prefix}${last ? '   ' : '│  '}`);
-            });
-        };
-        walk(root, '');
-        return lines.join('\n');
-    };
-    /**
-     * The ModelElement interface provides properties and methods for manipulating
-     * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-model/ | `<pc-model>`} elements.
-     * The ModelElement interface also inherits the properties and methods of the
-     * {@link HTMLElement} interface.
-     *
-     * The element becomes ready once its container asset has loaded and the instantiated hierarchy has
-     * been added to the scene — `entity` is non-null by then. A failed load also settles readiness,
-     * with `entity` remaining `null`: readiness means the load settled, not that it succeeded — listen
-     * for `error`, or check `entity`, to tell the outcomes apart. Changing `asset` re-arms readiness
-     * and instantiates anew, so a `ready()` obtained after the change resolves against the new
-     * hierarchy. A `pc-model` outside a `pc-app`, or referencing an unknown asset id, warns and never
-     * becomes ready.
-     *
-     * @fires {Event} load - Fired each time a container asset finishes instantiating, including
-     * re-instantiation after `asset` changes. Does not bubble — listen on this element, or use a
-     * capture-phase listener on an ancestor.
-     * @fires {ErrorEvent} error - Fired when the container asset fails to load, with the engine's
-     * error in `message`. Does not bubble. The element still becomes ready — readiness means the load
-     * settled, not that it succeeded.
-     */
-    class ModelElement extends AsyncElement {
-        _asset = '';
-        _entity = null;
-        /**
-         * Incremented on every new load and on disconnect, and captured by a load when it starts. A
-         * load that resumes from an await or a load callback abandons itself if the value has moved
-         * on, so a superseded load can neither instantiate a second entity nor parent one that has
-         * since been destroyed.
-         */
-        _loadGeneration = 0;
-        /**
-         * The pending asset subscriptions of the current load, if it is waiting for its asset. Held
-         * so that whatever supersedes the load can detach the handlers from the asset, rather than
-         * leave them registered until the asset settles (or forever, if it never does).
-         */
-        _loadHandle = null;
-        _errorHandle = null;
-        /**
-         * The root entity of the instantiated model. `null` until the container asset has loaded
-         * and been instantiated, and again once the element has been removed from the document.
-         * @returns The model's root entity, or `null`.
-         */
-        get entity() {
-            return this._entity;
-        }
-        /**
-         * Returns a snapshot of the instantiated node tree, or `null` while there is none (the
-         * container asset has not loaded, or the element has left the document). One call grounds a
-         * session — a browser console, a test, an agent — in the vocabulary `pc-node` binding
-         * resolves against: the instantiated names ({@link HierarchyNode.name}), paths, match
-         * indices, attached component types and the material assignments of render components
-         * ({@link HierarchyNode.materials}). `String(...)` of the result, or of any node in it,
-         * is the printable form.
-         *
-         * The snapshot is plain data, computed afresh each call: it does not follow later changes
-         * to the hierarchy, and mutating it changes nothing.
-         *
-         * @returns The root of the instantiated node tree, or `null`.
-         */
-        hierarchy() {
-            const root = this._entity;
-            if (!root) {
-                return null;
-            }
-            // Ordinals are assigned in the traversal resolution searches — pre-order depth-first
-            // from the model root, the root itself included — so each node's index is exactly what
-            // a pc-node's index attribute selects. Once the walk completes, the map holds the total
-            // count per name, which is what the printable form reads to annotate only shared names.
-            const ordinals = new Map();
-            const describe = (entity, pathBelowRoot) => {
-                const index = ordinals.get(entity.name) ?? 0;
-                ordinals.set(entity.name, index + 1);
-                const node = {
-                    name: entity.name,
-                    // The root has no path below itself; its own name stands in, as it does for
-                    // the path a pc-node bound to the root reports.
-                    path: pathBelowRoot || entity.name,
-                    index,
-                    // A plain GraphNode grafted into the hierarchy has no component storage
-                    components: Object.keys(entity.c ?? {}).sort(),
-                    materials: (entity.render?.meshInstances ?? []).map((meshInstance, slot) => ({
-                        index: slot,
-                        name: meshInstance.material?.name ?? null
-                    })),
-                    children: entity.children.map((child) => describe(child, pathBelowRoot ? `${pathBelowRoot}/${child.name}` : child.name))
-                };
-                // Non-enumerable, keeping the snapshot plain data under JSON.stringify, spreads and
-                // key enumeration. Deferred to call time, by which the ordinal map holds its totals.
-                Object.defineProperty(node, 'toString', {
-                    enumerable: false,
-                    value: () => formatHierarchy(node, ordinals)
-                });
-                return node;
-            };
-            return describe(root, '');
-        }
-        connectedCallback() {
-            // A model outside an application is inert and never becomes ready, so awaiting it hangs.
-            // Warn rather than fail silently, naming the parent it requires, as every other misplaced
-            // element does.
-            if (!this.closestApp) {
-                const label = this._asset ? ` '${this._asset}'` : '';
-                console.warn(`pc-model${label} must be a descendant of pc-app - model not created`);
-                return;
-            }
-            this._loadModel();
-        }
-        disconnectedCallback() {
-            this._loadGeneration++;
-            this._detachLoadHandlers();
-            this._unloadModel();
-            this._resetReady();
-        }
-        _detachLoadHandlers() {
-            this._loadHandle?.off();
-            this._loadHandle = null;
-            this._errorHandle?.off();
-            this._errorHandle = null;
-        }
-        /**
-         * Resolves readiness and dispatches the `load` event. Called once the instantiated hierarchy
-         * has been parented — readiness means "in the scene graph", matching `pc-entity`, so a ready
-         * model's entity always has world transforms.
-         */
-        _announceLoad() {
-            this._onReady();
-            this.dispatchEvent(new Event('load'));
-        }
-        _instantiate(container) {
-            const generation = this._loadGeneration;
-            const entity = container.instantiateRenderEntity();
-            this._entity = entity;
-            // @ts-ignore
-            if (container.animations.length > 0) {
-                entity.addComponent('anim');
-                // @ts-ignore
-                entity.anim.assignAnimation('animation', container.animations[0].resource);
-            }
-            // The parent's readiness re-arms when it is torn down, so these can resume in a later
-            // connection cycle. The entity is captured above and the generation re-checked, so a
-            // stale resume cannot parent an entity a newer cycle has already destroyed.
-            const parentEntityElement = this.closestEntity;
-            if (parentEntityElement) {
-                parentEntityElement.ready().then(() => {
-                    if (generation !== this._loadGeneration) {
-                        return;
-                    }
-                    parentEntityElement.entity.addChild(entity);
-                    this._announceLoad();
-                });
-            }
-            else {
-                const appElement = this.closestApp;
-                if (appElement) {
-                    appElement.ready().then(() => {
-                        if (generation !== this._loadGeneration) {
-                            return;
-                        }
-                        appElement.app.root.addChild(entity);
-                        this._announceLoad();
-                    });
-                }
-            }
-        }
-        async _loadModel() {
-            this._unloadModel();
-            // Supersede any load already in flight - only the newest load may instantiate
-            const generation = ++this._loadGeneration;
-            this._detachLoadHandlers();
-            // Re-arm readiness so a waiter obtained after an asset change resolves against the new
-            // hierarchy. A no-op on first connection, where readiness is still pending.
-            this._resetReady();
-            const appElement = this.closestApp;
-            if (!appElement) {
-                // Outside pc-app; connectedCallback already warned. Reached through the asset setter.
-                return;
-            }
-            await appElement.ready();
-            // The element may have been removed, or another load started, while we waited
-            if (generation !== this._loadGeneration) {
-                return;
-            }
-            const asset = useAsset(this._asset);
-            if (!asset) {
-                // An empty id is a legitimate transient (the asset may be assigned later); a
-                // non-empty one that resolves to nothing is a dead end - say so rather than staying
-                // silently pending.
-                if (this._asset) {
-                    console.warn(`pc-model could not find asset '${this._asset}' - model not created`);
-                }
-                return;
-            }
-            if (asset.loaded) {
-                this._instantiate(asset.resource);
-            }
-            else {
-                // The generation is re-checked even though a superseded handler is detached: the
-                // detach relies on how the engine's event emitter treats removal, while the check
-                // holds on its own. Whichever of load/error fires first detaches the other.
-                this._loadHandle = asset.once('load', () => {
-                    this._detachLoadHandlers();
-                    if (generation !== this._loadGeneration) {
-                        return;
-                    }
-                    this._instantiate(asset.resource);
-                });
-                this._errorHandle = asset.once('error', (err) => {
-                    this._detachLoadHandlers();
-                    if (generation !== this._loadGeneration) {
-                        return;
-                    }
-                    // A failed load settles readiness with a null entity, mirroring pc-asset:
-                    // readiness means the load settled, not that it succeeded.
-                    this.dispatchEvent(new ErrorEvent('error', {
-                        message: err instanceof Error ? err.message : String(err)
-                    }));
-                    this._onReady();
-                });
-            }
-        }
-        _unloadModel() {
-            this._entity?.destroy();
-            this._entity = null;
-        }
-        /**
-         * Sets the id of the `pc-asset` to use for the model.
-         * @param value - The asset ID.
-         */
-        set asset(value) {
-            this._asset = value;
-            if (this.isConnected) {
-                this._loadModel();
-            }
-        }
-        /**
-         * Gets the id of the `pc-asset` to use for the model.
-         * @returns The asset ID.
-         */
-        get asset() {
-            return this._asset;
-        }
-        static get observedAttributes() {
-            return ['asset'];
-        }
-        attributeChangedCallback(name, _oldValue, newValue) {
-            switch (name) {
-                case 'asset':
-                    this.asset = newValue ?? '';
-                    break;
-            }
-        }
-    }
-    customElements.define('pc-model', ModelElement);
-
     /**
      * Parses one mapping into its valid rules, warning for each entry that is not one: an unknown
      * or missing selector prefix, an empty `name:` value, an `index:` value that is not a
@@ -12057,7 +13197,10 @@
          * is retained untouched — a redundant edit must not flicker overrides through a revert.
          */
         _rebind() {
-            const hostEntity = this._host?.entity ?? null;
+            // A model fronts a host entity of its own; the names this element resolves are the
+            // asset's, so the search starts at the instantiated content root, not the wrapper.
+            const host = this._host;
+            const hostEntity = (host instanceof ModelElement ? host.contentEntity : host?.entity) ?? null;
             if (!hostEntity || !this._name) {
                 // Host not instantiated (or nothing to look up yet): return to pending. An assigned
                 // name arriving later, or the host's next cycle, resolves it.
@@ -12154,8 +13297,9 @@
             }
             this._revertOverrides();
             // Attachment points anchor to the bound node, so they cannot outlive the binding. Each
-            // destroyed entity resets its element, which the next _buildChildren re-creates.
-            this.querySelectorAll('pc-entity').forEach((child) => {
+            // destroyed entity resets its element, which the next _buildChildren re-creates - a
+            // model host among them re-instantiates its content when it rebuilds.
+            this.querySelectorAll('pc-entity, pc-model').forEach((child) => {
                 if (child.closestEntity === this) {
                     child.entity?.destroy();
                 }
@@ -13181,9 +14325,12 @@
     }
     customElements.define('pc-sky', SkyElement);
 
+    exports.AnimClipElement = AnimClipElement;
+    exports.AnimComponentElement = AnimComponentElement;
     exports.AppElement = AppElement;
     exports.AssetElement = AssetElement;
     exports.AsyncElement = AsyncElement;
+    exports.AudioListenerComponentElement = AudioListenerComponentElement;
     exports.ButtonComponentElement = ButtonComponentElement;
     exports.CameraComponentElement = CameraComponentElement;
     exports.CollisionComponentElement = CollisionComponentElement;
@@ -13191,15 +14338,14 @@
     exports.ElementComponentElement = ElementComponentElement;
     exports.EntityBaseElement = EntityBaseElement;
     exports.EntityElement = EntityElement;
+    exports.EntityOwnerElement = EntityOwnerElement;
     exports.GSplatComponentElement = GSplatComponentElement;
     exports.JointComponentElement = JointComponentElement;
     exports.LayoutChildComponentElement = LayoutChildComponentElement;
     exports.LayoutGroupComponentElement = LayoutGroupComponentElement;
     exports.LightComponentElement = LightComponentElement;
-    exports.ListenerComponentElement = ListenerComponentElement;
     exports.MaterialElement = MaterialElement;
     exports.ModelElement = ModelElement;
-    exports.ModuleElement = ModuleElement;
     exports.NodeElement = NodeElement;
     exports.ParticleSystemComponentElement = ParticleSystemComponentElement;
     exports.RenderComponentElement = RenderComponentElement;
@@ -13207,12 +14353,13 @@
     exports.SceneElement = SceneElement;
     exports.ScreenComponentElement = ScreenComponentElement;
     exports.ScriptComponentElement = ScriptComponentElement;
-    exports.ScriptElement = ScriptElement;
+    exports.ScriptInstanceElement = ScriptInstanceElement;
     exports.ScrollViewComponentElement = ScrollViewComponentElement;
     exports.ScrollbarComponentElement = ScrollbarComponentElement;
     exports.SkyElement = SkyElement;
     exports.SoundComponentElement = SoundComponentElement;
     exports.SoundSlotElement = SoundSlotElement;
+    exports.WasmElement = WasmElement;
     exports.whenReady = whenReady;
 
 }));