@playcanvas/web-components 0.15.0 → 0.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@playcanvas/web-components",
-  "version": "0.15.0",
+  "version": "0.17.0",
   "author": "PlayCanvas <support@playcanvas.com>",
   "homepage": "https://playcanvas.com",
   "description": "Web Components for the PlayCanvas Engine",
@@ -91,25 +91,25 @@
     "@rollup/plugin-terser": "1.0.0",
     "@rollup/plugin-typescript": "12.3.0",
     "@tweenjs/tween.js": "25.0.0",
-    "@vitest/coverage-v8": "4.1.10",
-    "concurrently": "10.0.4",
+    "@vitest/coverage-v8": "4.1.11",
+    "concurrently": "10.0.5",
     "custom-element-jet-brains-integration": "1.7.0",
     "custom-element-vs-code-integration": "1.5.0",
     "earcut": "3.2.3",
     "eslint": "9.39.5",
     "globals": "17.11.0",
     "jsdom": "30.0.1",
-    "mediabunny": "1.53.1",
+    "mediabunny": "1.55.2",
     "opentype.js": "2.0.0",
     "playcanvas": "2.21.4",
     "prettier": "3.9.6",
-    "publint": "0.3.23",
-    "rollup": "4.62.4",
+    "publint": "0.3.24",
+    "rollup": "4.62.5",
     "serve": "14.2.6",
     "tslib": "2.8.1",
     "typedoc": "0.28.20",
     "typedoc-plugin-mdn-links": "5.1.1",
     "typescript": "6.0.3",
-    "vitest": "4.1.10"
+    "vitest": "4.1.11"
   }
 }

package/src/app.ts

@@ -66,16 +66,23 @@ import {
 
 import type { AssetElement } from './asset';
 import { AsyncElement } from './async-element';
-import type { EntityElement } from './entity';
 import type { EntityBaseElement } from './entity-base';
+import type { EntityOwnerElement } from './entity-owner';
 import { LoadingBar } from './loading-bar';
 import type { MaterialElement } from './material';
-import type { ModuleElement } from './module';
 import { parseBool, parseEnum, parseNumber } from './parse';
+import type { WasmElement } from './wasm';
 
 /** The pointer event types the application synthesizes on `<pc-entity>` elements via picking. */
 const pointerEventTypes = ['pointermove', 'pointerdown', 'pointerup', 'pointerenter', 'pointerleave'] as const;
 
+/**
+ * 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'] as const;
+
 /**
  * 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
@@ -163,9 +170,9 @@ class AppElement extends AsyncElement {
 
     /**
      * 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.
      */
     private _entityElements = new Map<GraphNode, EntityBaseElement>();
 
@@ -260,7 +267,7 @@ class AppElement extends AsyncElement {
         // 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
@@ -270,11 +277,11 @@ class AppElement extends AsyncElement {
         // 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<ModuleElement>(':scope > pc-module');
+        // Get all pc-wasm elements that are direct children of the pc-app element
+        const wasmElements = this.querySelectorAll<WasmElement>(':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.
@@ -462,15 +469,16 @@ class AppElement extends AsyncElement {
             materialElement._createMaterial();
         });
 
-        // Create all entities
-        const entityElements = this.querySelectorAll<EntityElement>('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<EntityOwnerElement>('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
@@ -602,9 +610,9 @@ class AppElement extends AsyncElement {
         // 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<EntityBaseElement>('pc-entity, pc-node')).some(
-                (entity) => entity._hasListeners(type)
-            );
+            const anyListeners = Array.from(
+                this.querySelectorAll<EntityBaseElement>('pc-entity, pc-model, pc-node')
+            ).some((entity) => entity._hasListeners(type));
             if (anyListeners) {
                 this._onPointerListenerAdded(type);
             }
@@ -659,10 +667,10 @@ class AppElement extends AsyncElement {
     }
 
     /**
-     * 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`.
@@ -672,18 +680,19 @@ class AppElement extends AsyncElement {
     }
 
     /**
-     * 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`.
      */
-    private _elementFromNode(node: GraphNode | null): EntityBaseElement | null {
+    private _hoverTarget(node: GraphNode | null): EntityBaseElement | null {
         while (node !== null) {
             const element = this._entityElements.get(node);
-            if (element) {
+            if (element && hoverEventTypes.some((type) => element._hasListeners(type))) {
                 return element;
             }
             node = node.parent;
@@ -831,9 +840,10 @@ class AppElement extends AsyncElement {
         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) {
@@ -898,9 +908,9 @@ class AppElement extends AsyncElement {
     }
 
     private _onPointerListenerRemoved(type: string) {
-        const hasListeners = Array.from(this.querySelectorAll<EntityBaseElement>('pc-entity, pc-node')).some((entity) =>
-            entity._hasListeners(type)
-        );
+        const hasListeners = Array.from(
+            this.querySelectorAll<EntityBaseElement>('pc-entity, pc-model, pc-node')
+        ).some((entity) => entity._hasListeners(type));
 
         if (!hasListeners && this._canvas) {
             this._hasPointerListeners[type] = false;

package/src/async-element.ts

@@ -33,13 +33,13 @@ class AsyncElement extends HTMLElement {
     }
 
     /**
-     * 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(): EntityBaseElement | null {
-        return (this.parentElement?.closest('pc-entity, pc-node') as EntityBaseElement | null) ?? null;
+        return (this.parentElement?.closest('pc-entity, pc-model, pc-node') as EntityBaseElement | null) ?? null;
     }
 
     /**
@@ -95,11 +95,11 @@ type AsyncElementTagName = {
 
 /**
  * Waits for the first element matching the given tag name to be fully initialized. Note that the
- * promise never settles if the element cannot finish initializing (for example, a `<pc-script>`
- * that is not a direct child of `<pc-scripts>`, or a `<pc-app>` that could not create a graphics
- * device — listen for its `error` event instead). A component element outside a `<pc-entity>` is
- * the exception: it still becomes ready, but its `component` is `null`. Either way, a misplaced
- * element logs a warning naming the parent it requires.
+ * promise never settles if the element cannot finish initializing (for example, a `<pc-script-instance>`
+ * that is not a direct child of `<pc-script>`, or a `<pc-app>` that could not create a graphics
+ * device — listen for its `error` event instead). A component element outside an entity-fronting
+ * element is the exception: it still becomes ready, but its `component` is `null`. Either way, a
+ * misplaced element logs a warning naming the parent it requires.
  * @param target - The tag name of the element to wait for (e.g. `'pc-app'`).
  * @returns A promise that resolves with the element once it's ready.
  * @example
@@ -120,11 +120,11 @@ function whenReady<K extends AsyncElementTagName>(target: K): Promise<HTMLElemen
 function whenReady<T extends AsyncElement>(target: T): Promise<T>;
 /**
  * Waits for the first element matching the given CSS selector to be fully initialized. Note that
- * the promise never settles if the element cannot finish initializing (for example, a `<pc-script>`
- * that is not a direct child of `<pc-scripts>`, or a `<pc-app>` that could not create a graphics
- * device — listen for its `error` event instead). A component element outside a `<pc-entity>` is
- * the exception: it still becomes ready, but its `component` is `null`. Either way, a misplaced
- * element logs a warning naming the parent it requires.
+ * the promise never settles if the element cannot finish initializing (for example, a `<pc-script-instance>`
+ * that is not a direct child of `<pc-script>`, or a `<pc-app>` that could not create a graphics
+ * device — listen for its `error` event instead). A component element outside an entity-fronting
+ * element is the exception: it still becomes ready, but its `component` is `null`. Either way, a
+ * misplaced element logs a warning naming the parent it requires.
  * @param target - A CSS selector matching the element to wait for (e.g. `'#my-app'`).
  * @returns A promise that resolves with the element once it's ready.
  * @example

package/src/components/anim-clip.ts

@@ -0,0 +1,395 @@
+import type { Asset, EventHandle } from 'playcanvas';
+import { AnimTrack } from 'playcanvas';
+
+import { AssetElement, useAsset } from '../asset';
+import { AsyncElement } from '../async-element';
+import { ModelElement } from '../model';
+import { parseBool, parseNumber } from '../parse';
+
+import type { ContainerWithAnimations } from './anim-component';
+import { AnimComponentElement } from './anim-component';
+
+/**
+ * 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 `<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.
+     */
+    private _animElement: AnimComponentElement | null = null;
+
+    private _asset = '';
+
+    /**
+     * 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.
+     */
+    private _connectionGeneration = 0;
+
+    private _errorHandle: EventHandle | null = null;
+
+    /**
+     * 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.
+     */
+    private _loadGeneration = 0;
+
+    /**
+     * 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).
+     */
+    private _loadHandle: EventHandle | null = null;
+
+    private _loop = true;
+
+    private _name = '';
+
+    private _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.
+     */
+    private _warnedSource: string | null = 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.
+     */
+    private _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.
+     *
+     * @internal
+     */
+    _track: AnimTrack | null = 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();
+    }
+
+    protected get animElement(): AnimComponentElement | null {
+        const animElement = this.parentElement as AnimComponentElement;
+
+        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;
+    }
+
+    private _detachLoadHandlers() {
+        this._loadHandle?.off();
+        this._loadHandle = null;
+        this._errorHandle?.off();
+        this._errorHandle = null;
+    }
+
+    /**
+     * Reports a name-validation failure from the owning `<pc-anim>`, once per name value.
+     *
+     * @param message - The complaint.
+     * @internal
+     */
+    _markInvalid(message: string) {
+        if (this._warnedInvalid) {
+            return;
+        }
+        this._warnedInvalid = true;
+        console.warn(message);
+    }
+
+    /**
+     * 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
+     */
+    async _resolveTrack(animElement: AnimComponentElement) {
+        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;
+        }
+
+        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;
+        }
+
+        await model.ready();
+        if (generation !== this._loadGeneration) {
+            return;
+        }
+
+        const asset = AssetElement.get(model.asset);
+        if (!asset?.resource) {
+            // The model's load failed; it already reported the error
+            return;
+        }
+        this._extractTrack(asset, `model '${model.asset}'`);
+    }
+
+    /**
+     * 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.
+     */
+    private _warnSource(message: string) {
+        if (this._warnedSource === this._asset) {
+            return;
+        }
+        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.
+     */
+    private _extractTrack(asset: Asset, source: string) {
+        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: string = asset.type;
+
+        let candidates: unknown[];
+        switch (type) {
+            case 'container':
+                candidates = (asset.resource as ContainerWithAnimations).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 is AnimTrack => candidate instanceof AnimTrack);
+        if (tracks.length === 0) {
+            this._warnSource(`${label} - ${source} contains no usable animation track - clip not assigned`);
+            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._track = track;
+        if (this._animElement?._onClipResolved(this)) {
+            this._onReady();
+        }
+    }
+
+    /**
+     * 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.
+     */
+    set asset(value: string) {
+        this._asset = value;
+        this._warnedSource = null;
+        if (this._animElement) {
+            this._resetReady();
+            this._track = null;
+            this._resolveTrack(this._animElement);
+        }
+    }
+
+    /**
+     * Gets the id of the `pc-asset` supplying the clip's track.
+     * @returns The asset id.
+     */
+    get asset() {
+        return this._asset;
+    }
+
+    /**
+     * 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: boolean) {
+        this._loop = value;
+        this._animElement?._onClipParamsChanged(this);
+    }
+
+    /**
+     * 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: string) {
+        this._name = value;
+        this._warnedInvalid = false;
+        if (this._animElement) {
+            this._resetReady();
+            this._animElement._refreshClips();
+        }
+    }
+
+    /**
+     * Gets the name of the clip.
+     * @returns The clip name.
+     */
+    get name() {
+        return this._name;
+    }
+
+    /**
+     * 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 speed(value: number) {
+        this._speed = value;
+        this._animElement?._onClipParamsChanged(this);
+    }
+
+    /**
+     * Gets the playback speed of the clip.
+     * @returns The playback speed.
+     */
+    get speed() {
+        return this._speed;
+    }
+
+    static get observedAttributes() {
+        return ['asset', 'loop', 'name', 'speed'];
+    }
+
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null) {
+        switch (name) {
+            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);
+
+export { AnimClipElement };