@playcanvas/web-components 0.10.1 → 0.11.1

package/README.md

@@ -30,7 +30,7 @@ PlayCanvas Web Components are a set of custom HTML elements for building 3D inte
 
 ## Examples
 
-[![image](https://github.com/user-attachments/assets/25ac8dd3-abc9-4d65-8950-3d72ed1f7152)](https://playcanvas.github.io/web-components/examples)
+<img width="3840" height="2160" alt="image" src="https://github.com/user-attachments/assets/e113cd2a-300d-4713-a1f4-ada647a8f04c" />
 
 See PlayCanvas Web Components in action here: https://playcanvas.github.io/web-components/examples
 

package/dist/app.d.ts

@@ -1,5 +1,7 @@
+import type { Entity } from 'playcanvas';
 import { AppBase } from 'playcanvas';
 import { AsyncElement } from './async-element';
+import type { EntityElement } from './entity';
 /**
  * The AppElement interface provides properties and methods for manipulating
  * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-app/ | `<pc-app>`} elements.
@@ -19,12 +21,30 @@ declare class AppElement extends AsyncElement {
     private _alpha;
     private _backend;
     private _antialias;
-    private _depth;
-    private _stencil;
-    private _highResolution;
+    private _depthBuffer;
+    private _stencilBuffer;
+    private _maxPixelRatio;
     private _loadingBar;
+    /**
+     * Set once the graphics options above have been handed to `createGraphicsDevice`, after which
+     * writing any of them changes nothing. Guards the warning in {@link _warnIfBooted}, and is
+     * cleared on disconnect so a re-connected element boots from its current attributes.
+     */
+    private _optionsLocked;
     private _bar;
-    private _hierarchyReady;
+    /**
+     * Incremented on every connect and disconnect. Boot captures the value on entry and abandons
+     * itself wherever it resumes from an await if the value has moved on — so a boot whose
+     * element was removed cannot complete against a torn-down element, and a boot whose element
+     * was removed and re-inserted (which starts a boot of its own) cannot race the newer one.
+     */
+    private _bootGeneration;
+    /**
+     * The elements backing this application's entities, keyed by the entity itself. Registered
+     * by EntityElement at creation and removed when an entity is destroyed, this joins engine
+     * scene nodes back to their owning elements by identity - never by name.
+     */
+    private _entityElements;
     private _picker;
     private _hasPointerListeners;
     private _hoveredEntity;
@@ -55,9 +75,37 @@ declare class AppElement extends AsyncElement {
     constructor();
     connectedCallback(): Promise<void>;
     disconnectedCallback(): void;
-    _onWindowResize(): void;
-    _pickerCreate(): void;
-    _pickerDestroy(): void;
+    private _onWindowResize;
+    private _pickerCreate;
+    private _pickerDestroy;
+    /**
+     * Returns the `<pc-entity>` element whose backing entity is `entity`, or `null` if the
+     * entity was not created by an element of this application - for example, a 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 backing the entity, or `null`.
+     */
+    elementFromEntity(entity: Entity): EntityElement | null;
+    /**
+     * Resolves the element that owns a picked node: the nearest node up the parent chain -
+     * starting with the node itself - that was created by a `<pc-entity>` of this application.
+     * A hit inside a model's instantiated hierarchy therefore resolves to the element hosting
+     * the model.
+     *
+     * @param node - The picked node, or `null`.
+     * @returns The owning element, or `null`.
+     */
+    private _elementFromNode;
+    /**
+     * Like {@link _elementFromNode}, but skips elements without a listener for `type`, so a hit
+     * on an unlistened child still reaches a listening ancestor.
+     *
+     * @param node - The picked node, or `null`.
+     * @param type - The pointer event type a listener is required for.
+     * @returns The nearest listening element, or `null`.
+     */
+    private _elementWithListener;
     private _getPickerCoordinates;
     /**
      * Picks the scene under the pointer and returns the graph node that was hit, or `null`.
@@ -71,34 +119,43 @@ declare class AppElement extends AsyncElement {
      * @returns The graph node under the pointer, or `null` if nothing was hit.
      */
     private _pickNode;
-    _onPointerMove(event: PointerEvent): Promise<void>;
-    _onPointerDown(event: PointerEvent): Promise<void>;
-    _onPointerUp(event: PointerEvent): Promise<void>;
-    _onPointerListenerAdded(type: string): void;
-    _onPointerListenerRemoved(type: string): void;
+    private _onPointerMove;
+    private _onPointerDown;
+    private _onPointerUp;
+    private _onPointerListenerAdded;
+    private _onPointerListenerRemoved;
+    /**
+     * Warns that a graphics option was written too late to have any effect. These options are read
+     * once, when the element connects and creates its graphics device, so a later write updates
+     * only the element's own property - silently, without this.
+     *
+     * @param name - The name of the option, as its attribute.
+     */
+    private _warnIfBooted;
     /**
-     * Sets the alpha flag.
+     * Sets whether the frame buffer has an alpha channel, which is what lets the page show through
+     * wherever the scene has not drawn. Read only when the application boots.
      * @param value - The alpha flag.
      */
     set alpha(value: boolean);
     /**
-     * Gets the alpha flag.
+     * Gets whether the frame buffer has an alpha channel.
      * @returns The alpha flag.
      */
     get alpha(): boolean;
     /**
-     * Sets the antialias flag.
+     * Sets whether the frame buffer is anti-aliased. Read only when the application boots.
      * @param value - The antialias flag.
      */
     set antialias(value: boolean);
     /**
-     * Gets the antialias flag.
+     * Gets whether the frame buffer is anti-aliased.
      * @returns The antialias flag.
      */
     get antialias(): boolean;
     /**
      * Sets the graphics backend. Defaults to 'webgpu', which falls back to 'webgl2' if WebGPU
-     * is not supported by the browser.
+     * is not supported by the browser. Read only when the application boots.
      * @param value - The graphics backend ('webgpu', 'webgl2', or 'null').
      */
     set backend(value: 'webgpu' | 'webgl2' | 'null');
@@ -108,32 +165,16 @@ declare class AppElement extends AsyncElement {
      */
     get backend(): "webgpu" | "webgl2" | "null";
     /**
-     * Sets the depth flag.
-     * @param value - The depth flag.
-     */
-    set depth(value: boolean);
-    /**
-     * Gets the depth flag.
-     * @returns The depth flag.
-     */
-    get depth(): boolean;
-    /**
-     * Gets the hierarchy ready flag.
-     * @returns The hierarchy ready flag.
-     * @ignore
-     */
-    get hierarchyReady(): boolean;
-    /**
-     * Sets the high resolution flag. When true, the application will render at the device's
-     * physical resolution. When false, the application will render at CSS resolution.
-     * @param value - The high resolution flag.
+     * Sets whether the frame buffer has a depth buffer, which the renderer needs to resolve which
+     * surface is nearest the camera. Read only when the application boots.
+     * @param value - The depth buffer flag.
      */
-    set highResolution(value: boolean);
+    set depthBuffer(value: boolean);
     /**
-     * Gets the high resolution flag.
-     * @returns The high resolution flag.
+     * Gets whether the frame buffer has a depth buffer.
+     * @returns The depth buffer flag.
      */
-    get highResolution(): boolean;
+    get depthBuffer(): boolean;
     /**
      * Sets whether the application shows its built-in loading bar while it boots and preloads its
      * assets. Enabled by default; setting `false` removes the bar immediately, while setting
@@ -150,21 +191,31 @@ declare class AppElement extends AsyncElement {
      */
     get loadingBar(): boolean;
     /**
-     * Sets the stencil flag.
-     * @param value - The stencil flag.
+     * Sets the cap on the pixel ratio the application renders at. The canvas is sized by the
+     * smaller of this value and the display's own device pixel ratio, so the default of `Infinity`
+     * renders at full physical resolution, `1` renders at CSS resolution, and an intermediate
+     * value such as `2` keeps a dense display sharp without paying for every one of its pixels.
+     * Must be greater than 0. Unlike the other graphics options, this applies immediately.
+     * @param value - The maximum pixel ratio.
+     */
+    set maxPixelRatio(value: number);
+    /**
+     * Gets the cap on the pixel ratio the application renders at.
+     * @returns The maximum pixel ratio.
      */
-    set stencil(value: boolean);
+    get maxPixelRatio(): number;
     /**
-     * Gets the stencil flag.
-     * @returns The stencil flag.
+     * Sets whether the frame buffer has a stencil buffer, which stencil-based effects and UI
+     * masking need. Read only when the application boots.
+     * @param value - The stencil buffer flag.
      */
-    get stencil(): boolean;
+    set stencilBuffer(value: boolean);
+    /**
+     * Gets whether the frame buffer has a stencil buffer.
+     * @returns The stencil buffer flag.
+     */
+    get stencilBuffer(): boolean;
     static get observedAttributes(): string[];
     attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null): void;
 }
-declare global {
-    interface HTMLElementTagNameMap {
-        'pc-app': AppElement;
-    }
-}
 export { AppElement };

package/dist/asset.d.ts

@@ -46,7 +46,6 @@ declare class AssetElement extends AsyncElement {
     disconnectedCallback(): void;
     private _onAssetLoad;
     private _onAssetError;
-    createAsset(): void;
     /**
      * Builds the `data` object for the asset from an optional inline `data` attribute (JSON) and,
      * for sprites, from the convenience attributes (`atlas`, `frame-keys`, `pixels-per-unit`,
@@ -55,7 +54,7 @@ declare class AssetElement extends AsyncElement {
      * @returns The asset data, or `undefined`.
      */
     private _buildData;
-    destroyAsset(): void;
+    private _destroyAsset;
     /**
      * Sets whether the asset should be loaded lazily.
      * @param value - The lazy loading flag.
@@ -66,13 +65,15 @@ declare class AssetElement extends AsyncElement {
      * @returns The lazy loading flag.
      */
     get lazy(): boolean;
+    /**
+     * Returns the {@link Asset} created by the `<pc-asset>` element with the given `id`, or
+     * `undefined` if there is no such element or its asset has not been created yet.
+     *
+     * @param id - The `id` of the `<pc-asset>` element.
+     * @returns The asset, or `undefined`.
+     */
     static get(id: string): Asset | null | undefined;
     static get observedAttributes(): string[];
     attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null): void;
 }
-declare global {
-    interface HTMLElementTagNameMap {
-        'pc-asset': AssetElement;
-    }
-}
 export { AssetElement };

package/dist/async-element.d.ts

@@ -1,14 +1,16 @@
-import { AppElement } from './app';
-import { EntityElement } from './entity';
+import type { AppElement } from './app';
+import type { EntityElement } from './entity';
 /**
  * Base class for all PlayCanvas Web Components that initialize asynchronously.
  *
- * @fires {CustomEvent} ready - Fired once the element is fully initialized. Bubbles and is
- * composed.
+ * @fires {CustomEvent} ready - Fired when the element is fully initialized — once per readiness
+ * cycle, so an element that is torn down and re-initialized (for example by removing and
+ * re-inserting it) fires it again. Bubbles and is composed.
  */
 declare class AsyncElement extends HTMLElement {
     private _readyPromise;
     private _readyResolve;
+    private _readyResolved;
     /** @ignore */
     constructor();
     /**
@@ -26,12 +28,26 @@ declare class AsyncElement extends HTMLElement {
     /**
      * Called when the element is fully initialized and ready. Subclasses should call this when
      * they're ready. Resolves the ready promise and dispatches a bubbling, composed `ready`
-     * event.
+     * event. Signals at most once per readiness cycle: a repeat call before {@link _resetReady}
+     * has re-armed the promise does nothing.
      */
     protected _onReady(): void;
+    /**
+     * Returns the ready promise to its pending state. Subclasses should call this when the
+     * resource their readiness announced is torn down (typically from `disconnectedCallback`),
+     * so that a later re-initialization can signal readiness again. Does nothing while the
+     * promise is still pending — an in-flight waiter carries over to the next readiness cycle
+     * rather than being stranded on a promise nothing will ever resolve.
+     */
+    protected _resetReady(): void;
     /**
      * Returns a promise that resolves with this element when it's ready. This is the low-level
      * primitive underlying {@link whenReady}, which is the recommended way to wait for elements.
+     *
+     * Readiness tracks the element's current lifecycle: once a ready element is torn down (for
+     * example by removing it from the document), this returns a fresh promise that resolves when
+     * the element is next ready. A promise obtained earlier stays resolved — call this again
+     * after re-inserting an element rather than reusing a promise from before its removal.
      * @returns A promise that resolves with this element when it's ready.
      */
     ready(): Promise<this>;

package/dist/components/button-component.d.ts

@@ -1,4 +1,5 @@
-import { ButtonComponent, Color, Vec4 } from 'playcanvas';
+import type { ButtonComponent } from 'playcanvas';
+import { Color, Vec4 } from 'playcanvas';
 import { ComponentElement } from './component';
 /**
  * The ButtonComponentElement interface provides properties and methods for manipulating
@@ -25,7 +26,7 @@ declare class ButtonComponentElement extends ComponentElement {
     private _inactiveSpriteFrame;
     /** @ignore */
     constructor();
-    getInitialComponentData(): Record<string, any>;
+    protected getInitialComponentData(): Record<string, any>;
     /**
      * Gets the underlying PlayCanvas button component.
      * @returns The button component.
@@ -182,9 +183,4 @@ declare class ButtonComponentElement extends ComponentElement {
     static get observedAttributes(): string[];
     attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null): void;
 }
-declare global {
-    interface HTMLElementTagNameMap {
-        'pc-button': ButtonComponentElement;
-    }
-}
 export { ButtonComponentElement };

package/dist/components/camera-component.d.ts

@@ -1,4 +1,5 @@
-import { CameraComponent, Color, Vec4 } from 'playcanvas';
+import type { CameraComponent } from 'playcanvas';
+import { Color, Vec4 } from 'playcanvas';
 import { ComponentElement } from './component';
 /**
  * The CameraComponentElement interface provides properties and methods for manipulating
@@ -21,7 +22,7 @@ declare class CameraComponentElement extends ComponentElement {
     private _gamma;
     private _horizontalFov;
     private _nearClip;
-    private _orthographic;
+    private _projection;
     private _orthoHeight;
     private _priority;
     private _rect;
@@ -29,7 +30,7 @@ declare class CameraComponentElement extends ComponentElement {
     private _tonemap;
     /** @ignore */
     constructor();
-    getInitialComponentData(): {
+    protected getInitialComponentData(): {
         clearColor: Color;
         clearColorBuffer: boolean;
         clearDepthBuffer: boolean;
@@ -42,12 +43,12 @@ declare class CameraComponentElement extends ComponentElement {
         gammaCorrection: 0 | 1;
         horizontalFov: boolean;
         nearClip: number;
-        projection: 0 | 1;
+        projection: number;
         orthoHeight: number;
         priority: number;
         rect: Vec4;
         scissorRect: Vec4;
-        toneMapping: number | undefined;
+        toneMapping: number;
     };
     get xrAvailable(): boolean | null;
     /**
@@ -186,16 +187,6 @@ declare class CameraComponentElement extends ComponentElement {
      * @returns The near clip distance.
      */
     get nearClip(): number;
-    /**
-     * Sets the orthographic projection of the camera.
-     * @param value - The orthographic projection.
-     */
-    set orthographic(value: boolean);
-    /**
-     * Gets the orthographic projection of the camera.
-     * @returns The orthographic projection.
-     */
-    get orthographic(): boolean;
     /**
      * Sets the orthographic height of the camera.
      * @param value - The orthographic height.
@@ -216,6 +207,16 @@ declare class CameraComponentElement extends ComponentElement {
      * @returns The priority.
      */
     get priority(): number;
+    /**
+     * Sets the projection of the camera. Use `orthoHeight` to size an orthographic projection.
+     * @param value - The projection ('perspective' or 'orthographic').
+     */
+    set projection(value: 'perspective' | 'orthographic');
+    /**
+     * Gets the projection of the camera.
+     * @returns The projection.
+     */
+    get projection(): "perspective" | "orthographic";
     /**
      * Sets the rect of the camera.
      * @param value - The rect.
@@ -249,9 +250,4 @@ declare class CameraComponentElement extends ComponentElement {
     static get observedAttributes(): string[];
     attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null): void;
 }
-declare global {
-    interface HTMLElementTagNameMap {
-        'pc-camera': CameraComponentElement;
-    }
-}
 export { CameraComponentElement };

package/dist/components/collision-component.d.ts

@@ -1,4 +1,5 @@
-import { CollisionComponent, Quat, Vec3 } from 'playcanvas';
+import type { CollisionComponent } from 'playcanvas';
+import { Quat, Vec3 } from 'playcanvas';
 import { ComponentElement } from './component';
 /**
  * The CollisionComponentElement interface provides properties and methods for manipulating
@@ -19,7 +20,7 @@ declare class CollisionComponentElement extends ComponentElement {
     private _type;
     /** @ignore */
     constructor();
-    getInitialComponentData(): {
+    protected getInitialComponentData(): {
         axis: number;
         angularOffset: Quat;
         convexHull: boolean;
@@ -53,9 +54,4 @@ declare class CollisionComponentElement extends ComponentElement {
     static get observedAttributes(): string[];
     attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null): void;
 }
-declare global {
-    interface HTMLElementTagNameMap {
-        'pc-collision': CollisionComponentElement;
-    }
-}
 export { CollisionComponentElement };

package/dist/components/component.d.ts

@@ -1,4 +1,4 @@
-import { Component } from 'playcanvas';
+import type { Component } from 'playcanvas';
 import { AsyncElement } from '../async-element';
 /**
  * Represents a component in the PlayCanvas engine.
@@ -10,6 +10,14 @@ declare class ComponentElement extends AsyncElement {
     private _enabled;
     private _component;
     private _appElement;
+    /**
+     * 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.
+     */
+    private _connectionGeneration;
     /**
      * Creates a new ComponentElement instance.
      *
@@ -17,9 +25,19 @@ declare class ComponentElement extends AsyncElement {
      * @ignore
      */
     constructor(componentName: string);
-    getInitialComponentData(): {};
-    addComponent(): Promise<void>;
-    initComponent(): void;
+    /**
+     * 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.
+     */
+    protected getInitialComponentData(): {};
+    private _addComponent;
+    /**
+     * Configures the newly added component. Overridden by subclasses whose setup goes beyond
+     * the initial data — child-element handling, asset resolution and the like.
+     */
+    protected initComponent(): void;
     connectedCallback(): Promise<void>;
     disconnectedCallback(): void;
     /**

package/dist/components/element-component.d.ts

@@ -1,4 +1,5 @@
-import { Color, ElementComponent, Vec2, Vec4 } from 'playcanvas';
+import type { ElementComponent } from 'playcanvas';
+import { Color, Vec2, Vec4 } from 'playcanvas';
 import { ComponentElement } from './component';
 /**
  * The ElementComponentElement interface provides properties and methods for manipulating
@@ -37,8 +38,8 @@ declare class ElementComponentElement extends ComponentElement {
     private _wrapLines;
     /** @ignore */
     constructor();
-    initComponent(): void;
-    getInitialComponentData(): Record<string, any>;
+    protected initComponent(): void;
+    protected getInitialComponentData(): Record<string, any>;
     /**
      * Gets the underlying PlayCanvas element component.
      * @returns The element component.
@@ -312,9 +313,4 @@ declare class ElementComponentElement extends ComponentElement {
     static get observedAttributes(): string[];
     attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null): void;
 }
-declare global {
-    interface HTMLElementTagNameMap {
-        'pc-element': ElementComponentElement;
-    }
-}
 export { ElementComponentElement };

package/dist/components/gsplat-component.d.ts

@@ -1,4 +1,4 @@
-import { GSplatComponent } from 'playcanvas';
+import type { GSplatComponent } from 'playcanvas';
 import { ComponentElement } from './component';
 /**
  * The GSplatComponentElement interface provides properties and methods for manipulating
@@ -17,7 +17,7 @@ declare class GSplatComponentElement extends ComponentElement {
     private _lodRangeMax;
     /** @ignore */
     constructor();
-    getInitialComponentData(): {
+    protected getInitialComponentData(): {
         asset: import("playcanvas").Asset | null | undefined;
         castShadows: boolean;
         lodBaseDistance: number;
@@ -105,9 +105,4 @@ declare class GSplatComponentElement extends ComponentElement {
     static get observedAttributes(): string[];
     attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null): void;
 }
-declare global {
-    interface HTMLElementTagNameMap {
-        'pc-gsplat': GSplatComponentElement;
-    }
-}
 export { GSplatComponentElement };

package/dist/components/layoutchild-component.d.ts

@@ -1,4 +1,4 @@
-import { LayoutChildComponent } from 'playcanvas';
+import type { LayoutChildComponent } from 'playcanvas';
 import { ComponentElement } from './component';
 /**
  * The LayoutChildComponentElement interface provides properties and methods for manipulating
@@ -18,7 +18,7 @@ declare class LayoutChildComponentElement extends ComponentElement {
     private _excludeFromLayout;
     /** @ignore */
     constructor();
-    getInitialComponentData(): {
+    protected getInitialComponentData(): {
         minWidth: number;
         minHeight: number;
         maxWidth: number | null;
@@ -107,9 +107,4 @@ declare class LayoutChildComponentElement extends ComponentElement {
     static get observedAttributes(): string[];
     attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null): void;
 }
-declare global {
-    interface HTMLElementTagNameMap {
-        'pc-layoutchild': LayoutChildComponentElement;
-    }
-}
 export { LayoutChildComponentElement };

package/dist/components/layoutgroup-component.d.ts

@@ -1,4 +1,5 @@
-import { LayoutGroupComponent, Vec2, Vec4 } from 'playcanvas';
+import type { LayoutGroupComponent } from 'playcanvas';
+import { Vec2, Vec4 } from 'playcanvas';
 import { ComponentElement } from './component';
 /**
  * The LayoutGroupComponentElement interface provides properties and methods for manipulating
@@ -20,7 +21,7 @@ declare class LayoutGroupComponentElement extends ComponentElement {
     private _wrap;
     /** @ignore */
     constructor();
-    getInitialComponentData(): {
+    protected getInitialComponentData(): {
         orientation: number | undefined;
         reverseX: boolean;
         reverseY: boolean;
@@ -132,9 +133,4 @@ declare class LayoutGroupComponentElement extends ComponentElement {
     static get observedAttributes(): string[];
     attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null): void;
 }
-declare global {
-    interface HTMLElementTagNameMap {
-        'pc-layoutgroup': LayoutGroupComponentElement;
-    }
-}
 export { LayoutGroupComponentElement };

package/dist/components/light-component.d.ts

@@ -1,4 +1,5 @@
-import { Color, LightComponent } from 'playcanvas';
+import type { LightComponent } from 'playcanvas';
+import { Color } from 'playcanvas';
 import { ComponentElement } from './component';
 /**
  * The LightComponentElement interface provides properties and methods for manipulating
@@ -30,7 +31,7 @@ declare class LightComponentElement extends ComponentElement {
     private _shadowBlockerSamples;
     /** @ignore */
     constructor();
-    getInitialComponentData(): {
+    protected getInitialComponentData(): {
         castShadows: boolean;
         color: Color;
         innerConeAngle: number;
@@ -260,9 +261,4 @@ declare class LightComponentElement extends ComponentElement {
     static get observedAttributes(): string[];
     attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null): void;
 }
-declare global {
-    interface HTMLElementTagNameMap {
-        'pc-light': LightComponentElement;
-    }
-}
 export { LightComponentElement };

package/dist/components/listener-component.d.ts

@@ -1,4 +1,4 @@
-import { AudioListenerComponent } from 'playcanvas';
+import type { AudioListenerComponent } from 'playcanvas';
 import { ComponentElement } from './component';
 /**
  * The ListenerComponentElement interface provides properties and methods for manipulating
@@ -17,9 +17,4 @@ declare class ListenerComponentElement extends ComponentElement {
      */
     get component(): AudioListenerComponent;
 }
-declare global {
-    interface HTMLElementTagNameMap {
-        'pc-listener': ListenerComponentElement;
-    }
-}
 export { ListenerComponentElement };

package/dist/components/particlesystem-component.d.ts

@@ -1,4 +1,4 @@
-import { ParticleSystemComponent } from 'playcanvas';
+import type { ParticleSystemComponent } from 'playcanvas';
 import { ComponentElement } from './component';
 /**
  * The ParticleSystemComponentElement interface provides properties and methods for manipulating
@@ -12,7 +12,7 @@ declare class ParticleSystemComponentElement extends ComponentElement {
     private _asset;
     /** @ignore */
     constructor();
-    getInitialComponentData(): object;
+    protected getInitialComponentData(): object;
     /**
      * Gets the underlying PlayCanvas particle system component.
      * @returns The particle system component.
@@ -49,9 +49,4 @@ declare class ParticleSystemComponentElement extends ComponentElement {
     static get observedAttributes(): string[];
     attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null): void;
 }
-declare global {
-    interface HTMLElementTagNameMap {
-        'pc-particles': ParticleSystemComponentElement;
-    }
-}
 export { ParticleSystemComponentElement };