@playcanvas/web-components 0.11.1 → 0.13.0

package/dist/pwc.mjs

@@ -1,4 +1,4 @@
-import { basisInitialize, WasmModule, Vec3, Color, Vec4, Quat, Vec2, createGraphicsDevice, AppOptions, Keyboard, Mouse, ElementInput, AnimComponentSystem, AnimationComponentSystem, AudioListenerComponentSystem, ButtonComponentSystem, CameraComponentSystem, CollisionComponentSystem, ElementComponentSystem, GSplatComponentSystem, JointComponentSystem, LayoutChildComponentSystem, LayoutGroupComponentSystem, LightComponentSystem, ModelComponentSystem, ParticleSystemComponentSystem, RenderComponentSystem, RigidBodyComponentSystem, ScreenComponentSystem, ScriptComponentSystem, ScrollbarComponentSystem, ScrollViewComponentSystem, SoundComponentSystem, SpriteComponentSystem, ZoneComponentSystem, AnimClipHandler, AnimationHandler, AnimStateGraphHandler, AudioHandler, BinaryHandler, CssHandler, ContainerHandler, CubemapHandler, FolderHandler, FontHandler, GSplatHandler, HierarchyHandler, HtmlHandler, JsonHandler, MaterialHandler, ModelHandler, RenderHandler, ScriptHandler, SceneHandler, ShaderHandler, SpriteHandler, TemplateHandler, TextHandler, TextureAtlasHandler, TextureHandler, SoundManager, Lightmapper, BatchManager, XrManager, AppBase, FILLMODE_FILL_WINDOW, RESOLUTION_AUTO, Picker, MeshInstance, Entity, Asset, SPRITE_RENDERMODE_SIMPLE, SPRITE_RENDERMODE_SLICED, SPRITE_RENDERMODE_TILED, BUTTON_TRANSITION_MODE_TINT, BUTTON_TRANSITION_MODE_SPRITE_CHANGE, TONEMAP_NONE, PROJECTION_PERSPECTIVE, GAMMA_SRGB, GAMMA_NONE, XRTYPE_VR, TONEMAP_LINEAR, TONEMAP_FILMIC, TONEMAP_HEJL, TONEMAP_ACES, TONEMAP_ACES2, TONEMAP_NEUTRAL, PROJECTION_ORTHOGRAPHIC, ORIENTATION_HORIZONTAL, FITTING_NONE, FITTING_STRETCH, FITTING_SHRINK, FITTING_BOTH, ORIENTATION_VERTICAL, SHADOW_PCF3_32F, SHADOW_PCF1_16F, SHADOW_PCF1_32F, SHADOW_PCF3_16F, SHADOW_PCF5_16F, SHADOW_PCF5_32F, SHADOW_VSM_16F, SHADOW_VSM_32F, SHADOW_PCSS_32F, StandardMaterial, BLEND_NONE, CULLFACE_BACK, FRESNEL_SCHLICK, SPECOCC_AO, BLEND_NORMAL, BLEND_ADDITIVE, BLEND_ADDITIVEALPHA, BLEND_PREMULTIPLIED, BLEND_MULTIPLICATIVE, BLEND_MULTIPLICATIVE2X, BLEND_SCREEN, BLEND_MIN, BLEND_MAX, BLEND_SUBTRACTIVE, CULLFACE_NONE, CULLFACE_FRONT, CULLFACE_FRONTANDBACK, FRESNEL_NONE, SPECOCC_NONE, SPECOCC_GLOSSDEPENDENT, SCALEMODE_NONE, SCALEMODE_BLEND, SCROLL_MODE_BOUNCE, SCROLLBAR_VISIBILITY_SHOW_WHEN_REQUIRED, SCROLLBAR_VISIBILITY_SHOW_ALWAYS, SCROLL_MODE_CLAMP, SCROLL_MODE_INFINITE, EnvLighting, LAYERID_SKYBOX } from 'playcanvas';
+import { basisInitialize, WasmModule, Vec3, Color, Vec4, Quat, Vec2, createGraphicsDevice, AppOptions, Keyboard, Mouse, ElementInput, AnimComponentSystem, AnimationComponentSystem, AudioListenerComponentSystem, ButtonComponentSystem, CameraComponentSystem, CollisionComponentSystem, ElementComponentSystem, GSplatComponentSystem, JointComponentSystem, LayoutChildComponentSystem, LayoutGroupComponentSystem, LightComponentSystem, ModelComponentSystem, ParticleSystemComponentSystem, RenderComponentSystem, RigidBodyComponentSystem, ScreenComponentSystem, ScriptComponentSystem, ScrollbarComponentSystem, ScrollViewComponentSystem, SoundComponentSystem, SpriteComponentSystem, ZoneComponentSystem, AnimClipHandler, AnimationHandler, AnimStateGraphHandler, AudioHandler, BinaryHandler, CssHandler, ContainerHandler, CubemapHandler, FolderHandler, FontHandler, GSplatHandler, HierarchyHandler, HtmlHandler, JsonHandler, MaterialHandler, ModelHandler, RenderHandler, ScriptHandler, SceneHandler, ShaderHandler, SpriteHandler, TemplateHandler, TextHandler, TextureAtlasHandler, TextureHandler, SoundManager, Lightmapper, BatchManager, XrManager, AppBase, FILLMODE_NONE, RESOLUTION_AUTO, Picker, MeshInstance, Entity, Asset, SPRITE_RENDERMODE_SIMPLE, FILTER_LINEAR_MIPMAP_LINEAR, FILTER_LINEAR, ADDRESS_REPEAT, SPRITE_RENDERMODE_SLICED, SPRITE_RENDERMODE_TILED, ADDRESS_CLAMP_TO_EDGE, ADDRESS_MIRRORED_REPEAT, FILTER_NEAREST, FILTER_NEAREST_MIPMAP_NEAREST, FILTER_LINEAR_MIPMAP_NEAREST, FILTER_NEAREST_MIPMAP_LINEAR, BUTTON_TRANSITION_MODE_TINT, BUTTON_TRANSITION_MODE_SPRITE_CHANGE, TONEMAP_NONE, PROJECTION_PERSPECTIVE, GAMMA_SRGB, GAMMA_NONE, XRTYPE_VR, TONEMAP_LINEAR, TONEMAP_FILMIC, TONEMAP_HEJL, TONEMAP_ACES, TONEMAP_ACES2, TONEMAP_NEUTRAL, PROJECTION_ORTHOGRAPHIC, ORIENTATION_HORIZONTAL, FITTING_NONE, FITTING_STRETCH, FITTING_SHRINK, FITTING_BOTH, ORIENTATION_VERTICAL, SHADOW_PCF3_32F, SHADOW_PCF1_16F, SHADOW_PCF1_32F, SHADOW_PCF3_16F, SHADOW_PCF5_16F, SHADOW_PCF5_32F, SHADOW_VSM_16F, SHADOW_VSM_32F, SHADOW_PCSS_32F, StandardMaterial, BLEND_NONE, CULLFACE_BACK, FRESNEL_SCHLICK, SPECOCC_AO, BLEND_NORMAL, BLEND_ADDITIVE, BLEND_ADDITIVEALPHA, BLEND_PREMULTIPLIED, BLEND_MULTIPLICATIVE, BLEND_MULTIPLICATIVE2X, BLEND_SCREEN, BLEND_MIN, BLEND_MAX, BLEND_SUBTRACTIVE, CULLFACE_NONE, CULLFACE_FRONT, CULLFACE_FRONTANDBACK, FRESNEL_NONE, SPECOCC_NONE, SPECOCC_GLOSSDEPENDENT, SCALEMODE_NONE, SCALEMODE_BLEND, SCROLL_MODE_BOUNCE, SCROLLBAR_VISIBILITY_SHOW_WHEN_REQUIRED, SCROLLBAR_VISIBILITY_SHOW_ALWAYS, SCROLL_MODE_CLAMP, SCROLL_MODE_INFINITE, EnvLighting, LAYERID_SKYBOX } from 'playcanvas';
 
 /**
  * Base class for all PlayCanvas Web Components that initialize asynchronously.
@@ -27,12 +27,13 @@ class AsyncElement extends HTMLElement {
         return this.parentElement?.closest('pc-app') ?? null;
     }
     /**
-     * The nearest ancestor `<pc-entity>` element, or `null` if this element has no `<pc-entity>`
-     * ancestor. The search starts at the parent, so an element never resolves to itself.
-     * @returns The closest entity element, or `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.
+     * @returns The closest entity-fronting element, or `null`.
      */
     get closestEntity() {
-        return this.parentElement?.closest('pc-entity') ?? null;
+        return this.parentElement?.closest('pc-entity, pc-node') ?? null;
     }
     /**
      * Called when the element is fully initialized and ready. Subclasses should call this when
@@ -107,12 +108,18 @@ async function whenReady(target) {
 
 /**
  * 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
- * {@link HTMLElement} interface.
+ * {@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
+ * {@link AsyncElement} interface.
  *
- * Note that these attributes are read once when the element is created, so changing them later
- * has no effect.
+ * The attributes are read once, when the module starts loading - on the element's first
+ * connection, or earlier if a containing `<pc-app>` boots first and collects it - so changing
+ * them later has no effect. The element becomes ready once the module has loaded. WebAssembly
+ * 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
+ * boots.
  *
  * @attribute {string} name - The name of the WebAssembly module to configure, e.g. `Basis` or
  * `Ammo`.
@@ -121,19 +128,22 @@ async function whenReady(target) {
  * @attribute {string} fallback - The URL of the module's asm.js fallback script, used when
  * WebAssembly is unavailable.
  */
-class ModuleElement extends HTMLElement {
-    loadPromise;
-    /** @ignore */
-    constructor() {
-        super();
-        this.loadPromise = this.loadModule();
+class ModuleElement extends AsyncElement {
+    _loadPromise = null;
+    connectedCallback() {
+        this._getLoadPromise();
     }
-    async loadModule() {
+    async _loadModule() {
         const name = this.getAttribute('name');
-        const glueUrl = this.getAttribute('glue');
-        const wasmUrl = this.getAttribute('wasm');
-        const fallbackUrl = this.getAttribute('fallback');
-        const config = { glueUrl, wasmUrl, fallbackUrl };
+        if (!name) {
+            console.warn("pc-module requires a 'name' attribute - no module was configured");
+            return;
+        }
+        const config = {
+            glueUrl: this.getAttribute('glue') ?? undefined,
+            wasmUrl: this.getAttribute('wasm') ?? undefined,
+            fallbackUrl: this.getAttribute('fallback') ?? undefined
+        };
         if (name === 'Basis') {
             basisInitialize(config);
         }
@@ -143,16 +153,22 @@ class ModuleElement extends HTMLElement {
                 WasmModule.getInstance(name, () => resolve());
             });
         }
+        this._onReady();
     }
     /**
-     * Returns the promise that settles when the module has loaded. Awaited by the containing
-     * `<pc-app>` element before it creates its graphics device.
+     * Returns the promise that settles when the module has loaded, starting the load if it has
+     * not already started - a containing `<pc-app>` boots in document order, so it may collect
+     * this element before the element's own connectedCallback has run. A missing `name` resolves
+     * the promise without configuring anything, so a misconfigured module never blocks the app.
      *
      * @returns The load promise.
      * @internal
      */
     _getLoadPromise() {
-        return this.loadPromise;
+        if (!this._loadPromise) {
+            this._loadPromise = this._loadModule();
+        }
+        return this._loadPromise;
     }
 }
 customElements.define('pc-module', ModuleElement);
@@ -182,9 +198,9 @@ class LoadingBar {
         this._track.setAttribute('aria-label', 'Loading');
         this._track.setAttribute('aria-valuemin', '0');
         this._track.setAttribute('aria-valuemax', '100');
-        // Fixed positioning matches the canvas, which always fills the window (FILLMODE_FILL_WINDOW)
+        // Anchored to the pc-app element, which the library's base styles make a positioned box
         this._track.style.cssText = [
-            'position: fixed',
+            'position: absolute',
             'top: 0',
             'left: 0',
             'width: 100%',
@@ -696,16 +712,44 @@ const getEntity = (ref) => {
 
 /** The pointer event types the application synthesizes on `<pc-entity>` elements via picking. */
 const pointerEventTypes = ['pointermove', 'pointerdown', 'pointerup', 'pointerenter', 'pointerleave'];
+/**
+ * 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
+ * canvas and loading bar anchored to it. `:where()` keeps every declaration at zero specificity,
+ * so any page rule - however plain - overrides these defaults.
+ */
+const ensureBaseStyles = () => {
+    const id = 'pc-app-styles';
+    if (document.getElementById(id)) {
+        return;
+    }
+    const style = document.createElement('style');
+    style.id = id;
+    style.textContent = ':where(pc-app) { display: block; position: relative; width: 300px; height: 150px; }';
+    document.head.appendChild(style);
+};
 /**
  * The AppElement interface provides properties and methods for manipulating
  * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-app/ | `<pc-app>`} elements.
  * The AppElement interface also inherits the properties and methods of the
  * {@link HTMLElement} interface.
  *
+ * The element is sized like a replaced element such as `<video>`: a block-level box that the
+ * page's CSS controls, 300x150 by default. The application's canvas always fills the element,
+ * and the drawing buffer resolution follows the element's size (capped by `max-pixel-ratio`),
+ * tracked live via a ResizeObserver — so the element can be embedded at any size, resized by
+ * its container, or made fullscreen with ordinary CSS such as `width: 100vw; height: 100dvh`.
+ *
  * @fires {ProgressEvent} progress - Fired while the application preloads its assets. `loaded` and
  * `total` are asset counts, not bytes, and an asset that fails to load still counts as loaded.
  * Fired at least once per boot, and the final event always has `loaded` equal to `total`. Does
  * not bubble.
+ *
+ * @fires {ErrorEvent} error - Fired when the application cannot boot because no graphics device
+ * could be created (for example, a browser with WebGL disabled). `message` names the requested
+ * backends and `error` holds the underlying failure. The element never becomes ready
+ * and `app` stays `null` — listen for this event to show a fallback UI. Removing the element and
+ * re-inserting it retries the boot with its current attributes. Does not bubble.
  */
 class AppElement extends AsyncElement {
     /**
@@ -742,8 +786,9 @@ class AppElement extends AsyncElement {
     _bootGeneration = 0;
     /**
      * 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.
+     * 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.
      */
     _entityElements = new Map();
     _picker = null;
@@ -764,6 +809,12 @@ class AppElement extends AsyncElement {
     };
     _app = null;
     _loadProgress = 0;
+    /**
+     * Tracks the element's box so the drawing buffer and picker follow it. Created per boot once
+     * the application exists, and disconnected on teardown. `null` where ResizeObserver is
+     * unavailable (jsdom), where the boot-time resolution set is the only sizing that happens.
+     */
+    _resizeObserver = null;
     /**
      * The PlayCanvas application instance. `null` until the element is ready, and again once it
      * has been removed from the document — await {@link whenReady} or the element's `ready()`
@@ -790,8 +841,6 @@ class AppElement extends AsyncElement {
      */
     constructor() {
         super();
-        // Bind methods to maintain 'this' context
-        this._onWindowResize = this._onWindowResize.bind(this);
         // Track pointer listeners being added to and removed from descendant entities.
         // Registered once here rather than on every boot - the handlers no-op while there is no
         // canvas, and a re-booted element must not stack a second set.
@@ -802,6 +851,9 @@ class AppElement extends AsyncElement {
     }
     async connectedCallback() {
         const generation = ++this._bootGeneration;
+        // Installed before the loading bar is created: the bar anchors to this element, which
+        // these styles make a positioned block box
+        ensureBaseStyles();
         // Created before the first await, so the bar is visible while modules and the graphics
         // device are created, and exists before any disconnect could need to clean it up
         if (this._loadingBar && !this._bar) {
@@ -816,8 +868,11 @@ class AppElement extends AsyncElement {
         if (generation !== this._bootGeneration) {
             return;
         }
-        // Create and append the canvas to the element
+        // Create and append the canvas, filling the element's content box - the page sizes the
+        // element, and everything else follows. touch-action: none keeps touch drags driving the
+        // engine's input handlers instead of scrolling the page.
         this._canvas = document.createElement('canvas');
+        this._canvas.style.cssText = 'display: block; width: 100%; height: 100%; touch-action: none;';
         this.appendChild(this._canvas);
         // Configure device types based on backend selection
         const backendToDeviceTypes = {
@@ -827,14 +882,44 @@ class AppElement extends AsyncElement {
         };
         const deviceTypes = backendToDeviceTypes[this._backend] || [];
         this._optionsLocked = true;
-        const device = await createGraphicsDevice(this._canvas, {
-            // @ts-ignore - alpha needs to be documented
-            alpha: this._alpha,
-            antialias: this._antialias,
-            depth: this._depthBuffer,
-            deviceTypes: deviceTypes,
-            stencil: this._stencilBuffer
-        });
+        // createGraphicsDevice appends its final null-device fallback to the array in place, so
+        // the requested list is captured now for the failure message.
+        const requested = deviceTypes.join(', ');
+        let device;
+        try {
+            device = await createGraphicsDevice(this._canvas, {
+                // @ts-ignore - alpha needs to be documented
+                alpha: this._alpha,
+                antialias: this._antialias,
+                depth: this._depthBuffer,
+                deviceTypes: deviceTypes,
+                stencil: this._stencilBuffer
+            });
+        }
+        catch (error) {
+            // The element may have been removed while device creation was failing. The teardown
+            // has already cleaned up, and the failure belongs to a boot that no longer owns the
+            // element.
+            if (generation !== this._bootGeneration) {
+                return;
+            }
+            // Return the element to its pre-boot state - no dead canvas, no loading bar stuck at
+            // zero - before announcing the failure. Readiness deliberately stays pending: nothing
+            // it would announce (the app, the entity hierarchy) exists, so a device-less element
+            // joins the documented never-ready cases and the failure surfaces through the error
+            // event instead.
+            if (this._canvas && this.contains(this._canvas)) {
+                this.removeChild(this._canvas);
+            }
+            this._canvas = null;
+            this._bar?.destroy();
+            this._bar = null;
+            const reason = error instanceof Error ? error.message : String(error);
+            const message = `pc-app failed to create a graphics device (${requested}) - ${reason}`;
+            console.error(message, error);
+            this.dispatchEvent(new ErrorEvent('error', { message, error }));
+            return;
+        }
         // The element may have been removed while the device was created. disconnectedCallback
         // has already cleaned up the canvas; the device was created inside the await, so it is
         // this boot's to release.
@@ -913,9 +998,19 @@ class AppElement extends AsyncElement {
         const app = new AppBase(this._canvas);
         this._app = app;
         app.init(createOptions);
-        app.setCanvasFillMode(FILLMODE_FILL_WINDOW);
+        // FILLMODE_NONE leaves the canvas's CSS sizing alone (the engine's other fill modes
+        // stamp window-derived pixel sizes onto it); RESOLUTION_AUTO sizes the drawing buffer
+        // from the canvas's client size
+        app.setCanvasFillMode(FILLMODE_NONE);
         app.setCanvasResolution(RESOLUTION_AUTO);
         this._pickerCreate();
+        // Track the element's box rather than the window: containers resize without any window
+        // event (splitter drags, flex reflow, animations). Guarded because jsdom has no
+        // ResizeObserver - there, the resolution set above is the only sizing that happens.
+        if (typeof ResizeObserver !== 'undefined') {
+            this._resizeObserver = new ResizeObserver(() => this._syncCanvasSize());
+            this._resizeObserver.observe(this);
+        }
         // Get all pc-asset elements that are direct children of the pc-app element
         const assetElements = this.querySelectorAll(':scope > pc-asset');
         for (const assetElement of Array.from(assetElements)) {
@@ -991,8 +1086,6 @@ class AppElement extends AsyncElement {
             // Dismiss the bar only once a frame has actually rendered; ready fires before the
             // first rAF tick
             app.once('frameend', () => this._bar?.complete());
-            // Handle window resize to keep the canvas responsive
-            window.addEventListener('resize', this._onWindowResize);
             this._onReady();
         });
     }
@@ -1017,18 +1110,27 @@ class AppElement extends AsyncElement {
         // no longer holds.
         this._hierarchyReady = false;
         this._resetReady();
-        // Remove event listeners
-        window.removeEventListener('resize', this._onWindowResize);
+        // Stop tracking the element's size
+        this._resizeObserver?.disconnect();
+        this._resizeObserver = null;
         // Remove the canvas
         if (this._canvas && this.contains(this._canvas)) {
             this.removeChild(this._canvas);
             this._canvas = null;
         }
     }
-    _onWindowResize() {
-        if (this.app) {
-            this.app.resizeCanvas();
+    /**
+     * Syncs the drawing buffer and the picker to the canvas's current CSS size. The picker must
+     * track the buffer, or picks would land at stale coordinates after a resize. Skipped while
+     * an XR session presents - the session owns the buffer size.
+     */
+    _syncCanvasSize() {
+        if (!this.app || this.app.xr?.active) {
+            return;
         }
+        this.app.updateCanvasSize();
+        const { width, height } = this.app.graphicsDevice;
+        this._picker?.resize(width, height);
     }
     _pickerCreate() {
         const { width, height } = this.app.graphicsDevice;
@@ -1048,7 +1150,7 @@ 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('pc-entity')).some((entity) => entity._hasListeners(type));
+            const anyListeners = Array.from(this.querySelectorAll('pc-entity, pc-node')).some((entity) => entity._hasListeners(type));
             if (anyListeners) {
                 this._onPointerListenerAdded(type);
             }
@@ -1078,11 +1180,11 @@ class AppElement extends AsyncElement {
         };
     }
     /**
-     * Registers the element that created an entity. Called by EntityElement when it creates its
-     * entity.
+     * Registers the element that fronts an entity. Called by EntityElement when it creates its
+     * entity, and by NodeElement when it binds one.
      *
      * @param entity - The entity.
-     * @param element - The element that created it.
+     * @param element - The element that fronts it.
      * @internal
      */
     _registerEntityElement(entity, element) {
@@ -1098,21 +1200,22 @@ class AppElement extends AsyncElement {
         this._entityElements.delete(entity);
     }
     /**
-     * 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.
+     * 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.
      *
      * @param entity - The entity to look up.
-     * @returns The element backing the entity, or `null`.
+     * @returns The element fronting the entity, or `null`.
      */
     elementFromEntity(entity) {
         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 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.
+     * 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.
      *
      * @param node - The picked node, or `null`.
      * @returns The owning element, or `null`.
@@ -1244,7 +1347,7 @@ class AppElement extends AsyncElement {
         }
     }
     _onPointerListenerRemoved(type) {
-        const hasListeners = Array.from(this.querySelectorAll('pc-entity')).some((entity) => entity._hasListeners(type));
+        const hasListeners = Array.from(this.querySelectorAll('pc-entity, pc-node')).some((entity) => entity._hasListeners(type));
         if (!hasListeners && this._canvas) {
             this._hasPointerListeners[type] = false;
             const handler = type === 'pointerenter' || type === 'pointerleave'
@@ -1365,7 +1468,7 @@ class AppElement extends AsyncElement {
         this._maxPixelRatio = value;
         if (this.app) {
             this.app.graphicsDevice.maxPixelRatio = value;
-            this.app.resizeCanvas();
+            this._syncCanvasSize();
         }
     }
     /**
@@ -1422,6 +1525,125 @@ class AppElement extends AsyncElement {
 }
 customElements.define('pc-app', AppElement);
 
+/**
+ * The attribute names of the inline `onpointer*` event handlers, shared by every element that
+ * fronts an engine entity. Spread into `observedAttributes` by subclasses.
+ * @ignore
+ */
+const POINTER_ATTRIBUTES = [
+    'onpointerenter',
+    'onpointerleave',
+    'onpointerdown',
+    'onpointerup',
+    '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.
+ */
+class EntityBaseElement extends AsyncElement {
+    _entity = null;
+    /**
+     * The application element this entity is registered with, cached at registration time so the
+     * entity can be unregistered even once this element has left the DOM.
+     */
+    _appElement = null;
+    /**
+     * The pointer event listeners for the entity.
+     */
+    _listeners = {};
+    /**
+     * The event types for which an inline `onpointer*` attribute is currently present.
+     */
+    _inlineHandlerTypes = new Set();
+    /**
+     * The PlayCanvas entity instance. `null` until the element is ready, and again once the
+     * entity is gone — await {@link whenReady} or the element's `ready()` promise before
+     * accessing it.
+     * @returns The entity instance, or `null`.
+     */
+    get entity() {
+        return this._entity;
+    }
+    /**
+     * Registers `entity` as this element's backing entity with the owning application, which
+     * joins engine nodes back to elements by identity (never by name).
+     *
+     * @param entity - The entity to register.
+     */
+    _registerEntity(entity) {
+        this._appElement = this.closestApp;
+        this._appElement?._registerEntityElement(entity, this);
+    }
+    /**
+     * Removes the registration for `entity`.
+     *
+     * @param entity - The entity to unregister.
+     */
+    _unregisterEntity(entity) {
+        this._appElement?._unregisterEntityElement(entity);
+        this._appElement = null;
+    }
+    /**
+     * Tracks whether an inline `onpointer*` attribute is present. The browser itself compiles and
+     * runs these attributes — they are standard `GlobalEventHandlers`, so setting one replaces
+     * the previous handler and removing it removes the handler, exactly like `onclick` on any
+     * HTML element. But because they bypass {@link addEventListener}, the connect/disconnect
+     * bookkeeping that lets the application lazily attach its canvas pointer handlers must be
+     * kept in sync here.
+     *
+     * @param name - The attribute name (e.g. 'onpointerdown').
+     * @param value - The attribute value, or `null` when the attribute has been removed.
+     */
+    _updateInlineHandler(name, value) {
+        const type = name.substring(2);
+        const had = this._inlineHandlerTypes.has(type);
+        const has = value !== null;
+        if (has && !had) {
+            this._inlineHandlerTypes.add(type);
+            this.dispatchEvent(new CustomEvent(`${type}:connect`, { bubbles: true }));
+        }
+        else if (!has && had) {
+            this._inlineHandlerTypes.delete(type);
+            this.dispatchEvent(new CustomEvent(`${type}:disconnect`, { bubbles: true }));
+        }
+    }
+    addEventListener(type, listener, options) {
+        if (!this._listeners[type]) {
+            this._listeners[type] = [];
+        }
+        this._listeners[type].push(listener);
+        super.addEventListener(type, listener, options);
+        if (type.startsWith('pointer')) {
+            this.dispatchEvent(new CustomEvent(`${type}:connect`, { bubbles: true }));
+        }
+    }
+    removeEventListener(type, listener, options) {
+        if (this._listeners[type]) {
+            this._listeners[type] = this._listeners[type].filter((l) => l !== listener);
+        }
+        super.removeEventListener(type, listener, options);
+        if (type.startsWith('pointer')) {
+            this.dispatchEvent(new CustomEvent(`${type}:disconnect`, { bubbles: true }));
+        }
+    }
+    /**
+     * Whether the element has a listener for an event type, registered either with
+     * {@link addEventListener} or with the matching inline `onpointer*` attribute. Read by the
+     * containing `<pc-app>` element to gate pointer event synthesis.
+     *
+     * @param type - The event type.
+     * @returns Whether a listener is registered.
+     * @internal
+     */
+    _hasListeners(type) {
+        return Boolean(this._listeners[type]?.length) || this._inlineHandlerTypes.has(type);
+    }
+}
+
 /**
  * The EntityElement interface provides properties and methods for manipulating
  * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-entity/ | `<pc-entity>`} elements.
@@ -1446,7 +1668,7 @@ customElements.define('pc-app', AppElement);
  * @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 AsyncElement {
+class EntityElement extends EntityBaseElement {
     /**
      * Whether the entity is enabled.
      */
@@ -1471,33 +1693,10 @@ class EntityElement extends AsyncElement {
      * The tags of the entity.
      */
     _tags = [];
-    /**
-     * The pointer event listeners for the entity.
-     */
-    _listeners = {};
-    /**
-     * The event types for which an inline `onpointer*` attribute is currently present.
-     */
-    _inlineHandlerTypes = new Set();
     /**
      * Whether the hierarchy has been built for this entity.
      */
     _built = false;
-    _entity = null;
-    /**
-     * The application element this entity is registered with, cached at creation time so the
-     * entity can be unregistered even once this element has left the DOM.
-     */
-    _appElement = null;
-    /**
-     * The PlayCanvas entity instance. `null` until the element is ready, and again once it has
-     * been removed from the document — await {@link whenReady} or the element's `ready()`
-     * promise before accessing it.
-     * @returns The entity instance, or `null`.
-     */
-    get entity() {
-        return this._entity;
-    }
     /**
      * Creates the backing entity. Called by the containing `<pc-app>` element during its boot
      * sweep, and on connection for elements inserted while the application is already running.
@@ -1525,13 +1724,11 @@ class EntityElement extends AsyncElement {
         if (this._tags.length > 0) {
             entity.tags.add(this._tags);
         }
-        // Register with the owning application, which joins engine nodes back to elements by
-        // identity (never by name), and hook the entity's destruction. The engine fires 'destroy'
-        // for every entity in a destroyed subtree, so the element learns of its entity's death no
-        // matter who causes it: this element, an ancestor, the whole application, or a user
-        // script calling entity.destroy().
-        this._appElement = this.closestApp;
-        this._appElement?._registerEntityElement(entity, this);
+        // Register with the owning application and hook the entity's destruction. The engine
+        // fires 'destroy' for every entity in a destroyed subtree, so the element learns of its
+        // entity's death no matter who causes it: this element, an ancestor, the whole
+        // application, or a user script calling entity.destroy().
+        this._registerEntity(entity);
         entity.once('destroy', this._onEntityDestroy, this);
     }
     /**
@@ -1544,17 +1741,16 @@ class EntityElement extends AsyncElement {
      * @param entity - The entity that was destroyed.
      */
     _onEntityDestroy(entity) {
-        this._appElement?._unregisterEntityElement(entity);
-        this._appElement = null;
+        this._unregisterEntity(entity);
         this._entity = null;
         this._built = false;
         this._resetReady();
     }
     /**
-     * Parents the backing entity: under the entity of the nearest ancestor `<pc-entity>` 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>` 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
@@ -1562,8 +1758,14 @@ class EntityElement extends AsyncElement {
     _buildHierarchy(app) {
         if (!this.entity || this._built)
             return;
-        this._built = true;
         const closestEntity = this.closestEntity;
+        // A host element without an entity is an unresolved `<pc-node>`: building now would
+        // mis-anchor this entity to the application root while the host is still resolving.
+        // Stay unbuilt - the host drives this subtree itself once it binds.
+        if (closestEntity && !closestEntity.entity) {
+            return;
+        }
+        this._built = true;
         if (closestEntity?.entity) {
             closestEntity.entity.addChild(this.entity);
         }
@@ -1709,44 +1911,8 @@ class EntityElement extends AsyncElement {
     get tags() {
         return this._tags;
     }
-    /**
-     * Tracks whether an inline `onpointer*` attribute is present. The browser itself compiles and
-     * runs these attributes — they are standard `GlobalEventHandlers`, so setting one replaces
-     * the previous handler and removing it removes the handler, exactly like `onclick` on any
-     * HTML element. But because they bypass {@link addEventListener}, the connect/disconnect
-     * bookkeeping that lets the application lazily attach its canvas pointer handlers must be
-     * kept in sync here.
-     *
-     * @param name - The attribute name (e.g. 'onpointerdown').
-     * @param value - The attribute value, or `null` when the attribute has been removed.
-     */
-    _updateInlineHandler(name, value) {
-        const type = name.substring(2);
-        const had = this._inlineHandlerTypes.has(type);
-        const has = value !== null;
-        if (has && !had) {
-            this._inlineHandlerTypes.add(type);
-            this.dispatchEvent(new CustomEvent(`${type}:connect`, { bubbles: true }));
-        }
-        else if (!has && had) {
-            this._inlineHandlerTypes.delete(type);
-            this.dispatchEvent(new CustomEvent(`${type}:disconnect`, { bubbles: true }));
-        }
-    }
     static get observedAttributes() {
-        return [
-            'enabled',
-            'name',
-            'position',
-            'rotation',
-            'scale',
-            'tags',
-            'onpointerenter',
-            'onpointerleave',
-            'onpointerdown',
-            'onpointerup',
-            'onpointermove'
-        ];
+        return ['enabled', 'name', 'position', 'rotation', 'scale', 'tags', ...POINTER_ATTRIBUTES];
     }
     attributeChangedCallback(name, _oldValue, newValue) {
         switch (name) {
@@ -1777,37 +1943,6 @@ class EntityElement extends AsyncElement {
                 break;
         }
     }
-    addEventListener(type, listener, options) {
-        if (!this._listeners[type]) {
-            this._listeners[type] = [];
-        }
-        this._listeners[type].push(listener);
-        super.addEventListener(type, listener, options);
-        if (type.startsWith('pointer')) {
-            this.dispatchEvent(new CustomEvent(`${type}:connect`, { bubbles: true }));
-        }
-    }
-    removeEventListener(type, listener, options) {
-        if (this._listeners[type]) {
-            this._listeners[type] = this._listeners[type].filter((l) => l !== listener);
-        }
-        super.removeEventListener(type, listener, options);
-        if (type.startsWith('pointer')) {
-            this.dispatchEvent(new CustomEvent(`${type}:disconnect`, { bubbles: true }));
-        }
-    }
-    /**
-     * Whether the element has a listener for an event type, registered either with
-     * {@link addEventListener} or with the matching inline `onpointer*` attribute. Read by the
-     * containing `<pc-app>` element to gate pointer event synthesis.
-     *
-     * @param type - The event type.
-     * @returns Whether a listener is registered.
-     * @internal
-     */
-    _hasListeners(type) {
-        return Boolean(this._listeners[type]?.length) || this._inlineHandlerTypes.has(type);
-    }
 }
 customElements.define('pc-entity', EntityElement);
 
@@ -1992,6 +2127,48 @@ const renderModes = new Map([
     ['sliced', SPRITE_RENDERMODE_SLICED],
     ['tiled', SPRITE_RENDERMODE_TILED]
 ]);
+const addressModes = new Map([
+    ['repeat', ADDRESS_REPEAT],
+    ['clamp', ADDRESS_CLAMP_TO_EDGE],
+    ['mirror', ADDRESS_MIRRORED_REPEAT]
+]);
+const minFilterModes = new Map([
+    ['nearest', FILTER_NEAREST],
+    ['linear', FILTER_LINEAR],
+    ['nearest-mip-nearest', FILTER_NEAREST_MIPMAP_NEAREST],
+    ['linear-mip-nearest', FILTER_LINEAR_MIPMAP_NEAREST],
+    ['nearest-mip-linear', FILTER_NEAREST_MIPMAP_LINEAR],
+    ['linear-mip-linear', FILTER_LINEAR_MIPMAP_LINEAR]
+]);
+const magFilterModes = new Map([
+    ['nearest', FILTER_NEAREST],
+    ['linear', FILTER_LINEAR]
+]);
+// The engine's texture JSON spells the filter names with underscores ('linear_mip_linear'); the
+// attribute values are kebab-case like every other enum attribute in this library. The address
+// mode names contain no dashes, so for them the rename is the identity.
+const toTextureJson = (name) => name.replace(/-/g, '_');
+// Engine Texture constructor defaults, restored on a loaded texture when a texture option
+// attribute is removed.
+const textureOptionDefaults = {
+    addressU: ADDRESS_REPEAT,
+    addressV: ADDRESS_REPEAT,
+    anisotropy: 1,
+    flipY: false,
+    magFilter: FILTER_LINEAR,
+    minFilter: FILTER_LINEAR_MIPMAP_LINEAR,
+    mipmaps: true,
+    srgb: false
+};
+// Attributes that only apply to certain asset types, used to warn when one is set on an asset of
+// any other type (where it would otherwise be silently ignored).
+const typeScopedAttributes = [
+    [
+        ['address-u', 'address-v', 'anisotropy', 'flip-y', 'mag-filter', 'min-filter', 'mipmaps', 'srgb'],
+        ['texture', 'textureatlas']
+    ],
+    [['atlas', 'frame-keys', 'pixels-per-unit', 'render-mode'], ['sprite']]
+];
 const extToType = new Map([
     ['bin', 'binary'],
     ['css', 'css'],
@@ -2048,8 +2225,16 @@ const processBufferView = (gltfBuffer, buffers, continuation) => {
  * immediately unless `lazy`. A `pc-asset` must be a direct child of `pc-app` — elements placed
  * elsewhere, or with an unsupported asset type, never become ready.
  *
- * Apart from `lazy`, these attributes are read once when the asset is created, so changing them
- * later has no effect.
+ * For `texture` and `textureatlas` assets, the texture options (`address-u`, `address-v`,
+ * `min-filter`, `mag-filter`, `anisotropy`, `mipmaps`, `srgb`, `flip-y`) apply when the texture is
+ * created and — like `lazy` — are observed: changing one updates a texture that has already
+ * loaded, and removing one restores the engine default. Changing `srgb` or `mipmaps` on a loaded
+ * texture recreates the underlying GPU resource, so prefer declaring those up front. Each option
+ * overrides the matching key in the `data` JSON; options left unset write nothing, leaving the
+ * engine's per-format defaults in force.
+ *
+ * Apart from `lazy` and the texture options, these attributes are read once when the asset is
+ * created, so changing them later has no effect.
  *
  * @attribute {string} id - The identifier used to reference the asset from other elements.
  * @attribute {string} src - The URL of the asset to load.
@@ -2071,7 +2256,15 @@ const processBufferView = (gltfBuffer, buffers, continuation) => {
  * not that it succeeded.
  */
 class AssetElement extends AsyncElement {
+    _addressU = null;
+    _addressV = null;
+    _anisotropy = null;
+    _flipY = null;
     _lazy = false;
+    _magFilter = null;
+    _minFilter = null;
+    _mipmaps = null;
+    _srgb = null;
     /**
      * The asset that is loaded. Available once the element is ready — await
      * {@link whenReady} or the element's `ready()` promise before accessing it.
@@ -2142,6 +2335,15 @@ class AssetElement extends AsyncElement {
             console.warn(`Unsupported asset type: ${src}`);
             return;
         }
+        // Attributes scoped to other asset types have no effect here - say so rather than
+        // failing silently.
+        const inapplicable = typeScopedAttributes
+            .filter(([, types]) => !types.includes(type))
+            .flatMap(([attributes]) => attributes)
+            .filter((attribute) => this.hasAttribute(attribute));
+        if (inapplicable.length > 0) {
+            console.warn(`pc-asset '${id || src}' has attributes that do not apply to asset type '${type}' and are ignored: ${inapplicable.join(', ')}`);
+        }
         // Optional inline asset data, used by data-driven assets such as texture atlases (frame
         // definitions) and sprites (atlas reference, frame keys, etc.).
         const data = this._buildData(type);
@@ -2169,9 +2371,11 @@ class AssetElement extends AsyncElement {
         this.asset.on('error', this._onAssetError, this);
     }
     /**
-     * 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`,
-     * `render-mode`). Returns `undefined` when there is no data to apply.
+     * Builds the `data` object for the asset from an optional inline `data` attribute (JSON), the
+     * texture option attributes (for `texture` and `textureatlas` assets), and the sprite
+     * convenience attributes (`atlas`, `frame-keys`, `pixels-per-unit`, `render-mode`). An
+     * attribute overrides the matching `data` JSON key. Returns `undefined` when there is no data
+     * to apply.
      * @param type - The resolved asset type.
      * @returns The asset data, or `undefined`.
      */
@@ -2186,6 +2390,37 @@ class AssetElement extends AsyncElement {
                 console.warn(`Invalid 'data' JSON on pc-asset: ${dataAttr}`);
             }
         }
+        if (type === 'texture' || type === 'textureatlas') {
+            data = data ?? {};
+            // Only options the user actually set are written: the engine reads these keys with
+            // hasOwnProperty semantics, and an absent key leaves its per-format default (an HDR's
+            // 'rgbe' type, a KTX2's transcoded format) in force.
+            if (this._addressU !== null) {
+                data.addressu = this._addressU;
+            }
+            if (this._addressV !== null) {
+                data.addressv = this._addressV;
+            }
+            if (this._anisotropy !== null) {
+                data.anisotropy = this._anisotropy;
+            }
+            if (this._flipY !== null) {
+                // 'flipY' is the one camelCase key in the engine's texture JSON
+                data.flipY = this._flipY;
+            }
+            if (this._magFilter !== null) {
+                data.magfilter = toTextureJson(this._magFilter);
+            }
+            if (this._minFilter !== null) {
+                data.minfilter = toTextureJson(this._minFilter);
+            }
+            if (this._mipmaps !== null) {
+                data.mipmaps = this._mipmaps;
+            }
+            if (this._srgb !== null) {
+                data.srgb = this._srgb;
+            }
+        }
         if (type === 'sprite') {
             data = data ?? {};
             // Resolve the referenced texture atlas to its (numeric) asset id. The atlas must be
@@ -2219,6 +2454,56 @@ class AssetElement extends AsyncElement {
         }
         return data;
     }
+    /**
+     * Returns the engine texture behind this asset, when there is one: the resource itself for a
+     * `texture` asset, the atlas's texture for a `textureatlas` asset, `null` otherwise
+     * (including before the asset has loaded).
+     * @returns The texture, or `null`.
+     */
+    _texture() {
+        const asset = this.asset;
+        if (!asset?.resource)
+            return null;
+        if (asset.type === 'texture')
+            return asset.resource;
+        if (asset.type === 'textureatlas')
+            return asset.resource.texture ?? null;
+        return null;
+    }
+    /**
+     * Writes one texture option through to the created asset, if any. The engine-JSON key is
+     * written into `asset.data`, mutated in place - replacing the whole object would make the
+     * registry re-patch every key, and a re-patched `srgb` or `mipmaps` recreates the texture
+     * even when unchanged. The in-place key is what a not-yet-started load reads at texture
+     * construction, and what any later reload reads. When the texture already exists, the
+     * corresponding property is assigned directly; `null` (attribute removed) deletes the key
+     * and restores the engine default. Assets of any other type are left untouched.
+     *
+     * @param key - The engine texture JSON key in `asset.data`.
+     * @param property - The Texture property to assign.
+     * @param dataValue - The engine-JSON value for `asset.data`, or `null` to delete the key.
+     * @param textureValue - The value for the Texture property, or `null` for the engine default.
+     */
+    _applyTextureOption(key, property, dataValue, textureValue) {
+        const asset = this.asset;
+        if (!asset || (asset.type !== 'texture' && asset.type !== 'textureatlas'))
+            return;
+        const data = asset.data;
+        if (dataValue === null) {
+            delete data[key];
+        }
+        else {
+            data[key] = dataValue;
+        }
+        const texture = this._texture();
+        if (texture) {
+            // Every option here is a number- or boolean-valued Texture property; the
+            // value/property pairing is fixed by the callers, which TypeScript cannot see
+            // through the union.
+            texture[property] =
+                textureValue ?? textureOptionDefaults[property];
+        }
+    }
     _destroyAsset() {
         if (this.asset) {
             // A caller that keeps the Asset alive must not dispatch on a removed element
@@ -2231,22 +2516,164 @@ class AssetElement extends AsyncElement {
         }
     }
     /**
-     * Sets whether the asset should be loaded lazily.
-     * @param value - The lazy loading flag.
+     * Sets the texture's horizontal (U) address mode: how texture coordinates outside the 0 to 1
+     * range sample the texture. Applies to `texture` and `textureatlas` assets, both when the
+     * texture is created and after it has loaded.
+     * @param value - The address mode, or `null` to use the engine default of 'repeat'.
      */
-    set lazy(value) {
-        this._lazy = value;
-        if (this.asset) {
-            this.asset.preload = !value;
-        }
+    set addressU(value) {
+        this._addressU = value;
+        const constant = value === null ? null : (addressModes.get(value) ?? ADDRESS_REPEAT);
+        this._applyTextureOption('addressu', 'addressU', value, constant);
     }
     /**
-     * Gets whether the asset should be loaded lazily.
-     * @returns The lazy loading flag.
+     * Gets the texture's horizontal (U) address mode.
+     * @returns The address mode, or `null` when unset.
      */
-    get lazy() {
+    get addressU() {
+        return this._addressU;
+    }
+    /**
+     * Sets the texture's vertical (V) address mode: how texture coordinates outside the 0 to 1
+     * range sample the texture. Applies to `texture` and `textureatlas` assets, both when the
+     * texture is created and after it has loaded.
+     * @param value - The address mode, or `null` to use the engine default of 'repeat'.
+     */
+    set addressV(value) {
+        this._addressV = value;
+        const constant = value === null ? null : (addressModes.get(value) ?? ADDRESS_REPEAT);
+        this._applyTextureOption('addressv', 'addressV', value, constant);
+    }
+    /**
+     * Gets the texture's vertical (V) address mode.
+     * @returns The address mode, or `null` when unset.
+     */
+    get addressV() {
+        return this._addressV;
+    }
+    /**
+     * Sets the texture's maximum anisotropic filtering level, which improves quality at oblique
+     * viewing angles. Applies to `texture` and `textureatlas` assets, both when the texture is
+     * created and after it has loaded.
+     * @param value - The anisotropy level, or `null` to use the engine default of 1.
+     */
+    set anisotropy(value) {
+        this._anisotropy = value;
+        this._applyTextureOption('anisotropy', 'anisotropy', value, value);
+    }
+    /**
+     * Gets the texture's maximum anisotropic filtering level.
+     * @returns The anisotropy level, or `null` when unset.
+     */
+    get anisotropy() {
+        return this._anisotropy;
+    }
+    /**
+     * Sets whether the texture's image data is flipped vertically at upload. Applies to `texture`
+     * and `textureatlas` assets, both when the texture is created and after it has loaded.
+     * @param value - The flip flag, or `null` to use the engine default of `false`.
+     */
+    set flipY(value) {
+        this._flipY = value;
+        this._applyTextureOption('flipY', 'flipY', value, value);
+    }
+    /**
+     * Gets whether the texture's image data is flipped vertically at upload.
+     * @returns The flip flag, or `null` when unset.
+     */
+    get flipY() {
+        return this._flipY;
+    }
+    /**
+     * Sets whether the asset should be loaded lazily.
+     * @param value - The lazy loading flag.
+     */
+    set lazy(value) {
+        this._lazy = value;
+        if (this.asset) {
+            this.asset.preload = !value;
+        }
+    }
+    /**
+     * Gets whether the asset should be loaded lazily.
+     * @returns The lazy loading flag.
+     */
+    get lazy() {
         return this._lazy;
     }
+    /**
+     * Sets the texture's magnification filter, used when the texture is displayed larger than its
+     * source size. Applies to `texture` and `textureatlas` assets, both when the texture is
+     * created and after it has loaded.
+     * @param value - The filter, or `null` to use the engine default of 'linear'.
+     */
+    set magFilter(value) {
+        this._magFilter = value;
+        const json = value === null ? null : toTextureJson(value);
+        const constant = value === null ? null : (magFilterModes.get(value) ?? FILTER_LINEAR);
+        this._applyTextureOption('magfilter', 'magFilter', json, constant);
+    }
+    /**
+     * Gets the texture's magnification filter.
+     * @returns The filter, or `null` when unset.
+     */
+    get magFilter() {
+        return this._magFilter;
+    }
+    /**
+     * Sets the texture's minification filter, used when the texture is displayed smaller than its
+     * source size. The mip variants blend within (and, for the second `linear`, between) mipmap
+     * levels. Applies to `texture` and `textureatlas` assets, both when the texture is created
+     * and after it has loaded.
+     * @param value - The filter, or `null` to use the engine default of 'linear-mip-linear'.
+     */
+    set minFilter(value) {
+        this._minFilter = value;
+        const json = value === null ? null : toTextureJson(value);
+        const constant = value === null ? null : (minFilterModes.get(value) ?? FILTER_LINEAR_MIPMAP_LINEAR);
+        this._applyTextureOption('minfilter', 'minFilter', json, constant);
+    }
+    /**
+     * Gets the texture's minification filter.
+     * @returns The filter, or `null` when unset.
+     */
+    get minFilter() {
+        return this._minFilter;
+    }
+    /**
+     * Sets whether the texture generates and uses mipmaps. Changing this on a loaded texture
+     * recreates the underlying GPU resource, so prefer declaring it up front. Applies to
+     * `texture` and `textureatlas` assets.
+     * @param value - The mipmaps flag, or `null` to use the engine default of `true`.
+     */
+    set mipmaps(value) {
+        this._mipmaps = value;
+        this._applyTextureOption('mipmaps', 'mipmaps', value, value);
+    }
+    /**
+     * Gets whether the texture generates and uses mipmaps.
+     * @returns The mipmaps flag, or `null` when unset.
+     */
+    get mipmaps() {
+        return this._mipmaps;
+    }
+    /**
+     * Sets whether the texture holds sRGB (gamma-encoded) color data, enabling hardware gamma
+     * decode. Free when set before the texture loads; changing it on a loaded texture recreates
+     * the underlying GPU resource. Applies to `texture` and `textureatlas` assets.
+     * @param value - The sRGB flag, or `null` to use the engine default of `false`.
+     */
+    set srgb(value) {
+        this._srgb = value;
+        this._applyTextureOption('srgb', 'srgb', value, value);
+    }
+    /**
+     * Gets whether the texture holds sRGB (gamma-encoded) color data.
+     * @returns The sRGB flag, or `null` when unset.
+     */
+    get srgb() {
+        return this._srgb;
+    }
     /**
      * 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.
@@ -2259,11 +2686,91 @@ class AssetElement extends AsyncElement {
         return assetElement?.asset;
     }
     static get observedAttributes() {
-        return ['lazy'];
+        return [
+            'address-u',
+            'address-v',
+            'anisotropy',
+            'flip-y',
+            'lazy',
+            'mag-filter',
+            'min-filter',
+            'mipmaps',
+            'srgb'
+        ];
     }
     attributeChangedCallback(name, _oldValue, newValue) {
-        if (name === 'lazy') {
-            this.lazy = parseBool(newValue, false);
+        // Each texture option keeps its parse* call as the branch's first assignment (the CEM
+        // manifest derives the attribute's type and default from it - a ternary would degrade
+        // both to plain string) and treats a removed attribute (null) as a reset to unset,
+        // which restores the engine default on a loaded texture.
+        switch (name) {
+            case 'address-u':
+                if (newValue !== null) {
+                    this.addressU = parseEnum(newValue, addressModes, 'repeat', name);
+                }
+                else {
+                    this.addressU = null;
+                }
+                break;
+            case 'address-v':
+                if (newValue !== null) {
+                    this.addressV = parseEnum(newValue, addressModes, 'repeat', name);
+                }
+                else {
+                    this.addressV = null;
+                }
+                break;
+            case 'anisotropy':
+                if (newValue !== null) {
+                    this.anisotropy = parseNumber(newValue, 1, name);
+                }
+                else {
+                    this.anisotropy = null;
+                }
+                break;
+            case 'flip-y':
+                if (newValue !== null) {
+                    this.flipY = parseBool(newValue, false);
+                }
+                else {
+                    this.flipY = null;
+                }
+                break;
+            case 'lazy':
+                this.lazy = parseBool(newValue, false);
+                break;
+            case 'mag-filter':
+                if (newValue !== null) {
+                    this.magFilter = parseEnum(newValue, magFilterModes, 'linear', name);
+                }
+                else {
+                    this.magFilter = null;
+                }
+                break;
+            case 'min-filter':
+                if (newValue !== null) {
+                    this.minFilter = parseEnum(newValue, minFilterModes, 'linear-mip-linear', name);
+                }
+                else {
+                    this.minFilter = null;
+                }
+                break;
+            case 'mipmaps':
+                if (newValue !== null) {
+                    this.mipmaps = parseBool(newValue, true);
+                }
+                else {
+                    this.mipmaps = null;
+                }
+                break;
+            case 'srgb':
+                if (newValue !== null) {
+                    this.srgb = parseBool(newValue, false);
+                }
+                else {
+                    this.srgb = null;
+                }
+                break;
         }
     }
 }
@@ -2279,6 +2786,16 @@ class ComponentElement extends AsyncElement {
     _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
@@ -2306,6 +2823,37 @@ class ComponentElement extends AsyncElement {
     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;
@@ -2322,9 +2870,40 @@ class ComponentElement extends AsyncElement {
         if (generation !== this._connectionGeneration) {
             return;
         }
-        // Add the component to the entity
-        const data = this.getInitialComponentData();
-        this._component = entityElement.entity.addComponent(this._componentName, data);
+        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
@@ -2353,6 +2932,11 @@ class ComponentElement extends AsyncElement {
     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.
@@ -3312,6 +3896,12 @@ customElements.define('pc-camera', CameraComponentElement);
  * The CollisionComponentElement interface also inherits the properties and methods of the
  * {@link HTMLElement} interface.
  *
+ * For `type="mesh"`, the collision geometry defaults to the host entity's own render component
+ * (its render asset) — a collider matching the visible mesh, which is what a mesh collider on a
+ * glTF node means. The default resolves each time the component applies, so a `pc-node` that
+ * 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.
+ *
  * @category Components
  */
 class CollisionComponentElement extends ComponentElement {
@@ -3339,6 +3929,29 @@ class CollisionComponentElement extends ComponentElement {
             type: this._type
         };
     }
+    initComponent() {
+        this._applyMeshGeometryDefault();
+    }
+    /**
+     * Defaults a mesh collider's geometry to the host entity's own render component. The
+     * engine's mesh collider only works with explicitly supplied geometry, and the element has
+     * 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.
+     */
+    _applyMeshGeometryDefault() {
+        const component = this.component;
+        if (!component || this._type !== 'mesh' || component.renderAsset !== null) {
+            return;
+        }
+        const asset = component.entity.render?.asset ?? null;
+        if (asset === null) {
+            console.warn(`pc-collision type="mesh" on '${component.entity.name}' found no asset-backed render component to take geometry from - collider has no shape`);
+            return;
+        }
+        component.renderAsset = asset;
+    }
     /**
      * Gets the underlying PlayCanvas collision component.
      * @returns The collision component.
@@ -3413,6 +4026,7 @@ class CollisionComponentElement extends ComponentElement {
         this._type = value;
         if (this.component) {
             this.component.type = value;
+            this._applyMeshGeometryDefault();
         }
     }
     get type() {
@@ -5583,13 +6197,13 @@ class MaterialElement extends HTMLElement {
     }
     /**
      * @param slot - The material property to write.
-     * @param texture - The loaded texture.
+     * @param texture - The loaded texture, applied with its sampler state untouched - anisotropy
+     * and friends belong to the `pc-asset`'s texture options.
      */
     _applyMap(slot, texture) {
         if (!this.material)
             return;
         this.material[slot] = texture;
-        texture.anisotropy = 4;
         this._scheduleUpdate();
     }
     /**
@@ -9869,6 +10483,21 @@ customElements.define('pc-gsplat', GSplatComponentElement);
  * {@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 = '';
@@ -9881,11 +10510,12 @@ class ModelElement extends AsyncElement {
      */
     _loadGeneration = 0;
     /**
-     * The pending asset-load subscription of the current load, if it is waiting for its asset.
-     * Held so that whatever supersedes the load can detach the handler from the asset, rather
-     * than leave it registered until the asset loads (or forever, if it never does).
+     * 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.
@@ -9895,18 +10525,36 @@ class ModelElement extends AsyncElement {
         return this._entity;
     }
     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();
-        this._onReady();
     }
     disconnectedCallback() {
         this._loadGeneration++;
-        this._detachLoadHandler();
+        this._detachLoadHandlers();
         this._unloadModel();
         this._resetReady();
     }
-    _detachLoadHandler() {
+    _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;
@@ -9928,6 +10576,7 @@ class ModelElement extends AsyncElement {
                     return;
                 }
                 parentEntityElement.entity.addChild(entity);
+                this._announceLoad();
             });
         }
         else {
@@ -9938,6 +10587,7 @@ class ModelElement extends AsyncElement {
                         return;
                     }
                     appElement.app.root.addChild(entity);
+                    this._announceLoad();
                 });
             }
         }
@@ -9946,15 +10596,29 @@ class ModelElement extends AsyncElement {
         this._unloadModel();
         // Supersede any load already in flight - only the newest load may instantiate
         const generation = ++this._loadGeneration;
-        this._detachLoadHandler();
-        const appElement = await this.closestApp?.ready();
+        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 app = appElement?.app;
+        const app = appElement.app;
         const asset = AssetElement.get(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) {
@@ -9963,14 +10627,26 @@ class ModelElement extends AsyncElement {
         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.
+            // holds on its own. Whichever of load/error fires first detaches the other.
             this._loadHandle = asset.once('load', () => {
-                this._loadHandle = null;
+                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();
+            });
             app.assets.load(asset);
         }
     }
@@ -10008,6 +10684,625 @@ class ModelElement extends AsyncElement {
 }
 customElements.define('pc-model', ModelElement);
 
+/**
+ * Computes the Levenshtein distance between two strings, for near-miss suggestions in the
+ * resolution warnings.
+ *
+ * @param a - The first string.
+ * @param b - The second string.
+ * @returns The edit distance.
+ */
+const levenshtein = (a, b) => {
+    const row = Array.from({ length: b.length + 1 }, (_, i) => i);
+    for (let i = 1; i <= a.length; i++) {
+        let previous = row[0];
+        row[0] = i;
+        for (let j = 1; j <= b.length; j++) {
+            const current = row[j];
+            row[j] = Math.min(row[j] + 1, row[j - 1] + 1, previous + (a[i - 1] === b[j - 1] ? 0 : 1));
+            previous = current;
+        }
+    }
+    return row[b.length];
+};
+/**
+ * The NodeElement interface provides properties and methods for manipulating
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-node/ | `<pc-node>`}
+ * elements. The NodeElement interface also inherits the properties and methods of the
+ * {@link HTMLElement} interface.
+ *
+ * A `pc-node` is an override element: where `pc-entity` creates an entity, `pc-node` binds to a
+ * node a `pc-model` loaded and declares overrides against the authored asset — components to
+ * add, properties to change, content to attach. Attributes present apply as overrides; attributes
+ * absent leave authored values untouched, and removing an attribute (or assigning `null` to the
+ * matching property) restores the authored value.
+ *
+ * `name` selects among the host model's nodes (first match in depth-first order), nesting a
+ * `pc-node` inside another scopes the search to that subtree, and `index` picks among identically
+ * named matches. When `name` matches more than one node and no `index` is given, the element
+ * warns and binds nothing.
+ *
+ * The element becomes ready once bound, and never while unresolved — a missing or ambiguous
+ * name warns and records the failure in `state`, readiness stays unresolved, and descendants
+ * wait with it.
+ *
+ * The pointer events below are dispatched by the containing `<pc-app>` element when the pointer
+ * intersects the bound node's geometry, exactly as for `<pc-entity>`.
+ *
+ * @attribute {string} name - The name of the node to bind, resolved within the nearest ancestor
+ * `pc-model` (or `pc-node`) once it has instantiated.
+ * @attribute {number} index - Which match to bind when `name` matches more than one node,
+ * 0-based in depth-first order. Optional for a unique match; required for an ambiguous one.
+ * @attribute {boolean} enabled - Overrides the node's enabled state.
+ * @attribute {string} position - Overrides the node's local position, as an "x y z" triple.
+ * @attribute {string} rotation - Overrides the node's local rotation (Euler angles), as an
+ * "x y z" triple.
+ * @attribute {string} scale - Overrides the node's local scale, as an "x y z" triple.
+ * @attribute {string} tags - Overrides the node's tags, separated by spaces or commas.
+ * @attribute {string} onpointerenter - Script to run when the pointer moves onto the node.
+ * @attribute {string} onpointerleave - Script to run when the pointer moves off the node.
+ * @attribute {string} onpointermove - Script to run when the pointer moves over the node.
+ * @attribute {string} onpointerdown - Script to run when a pointer button is pressed over the
+ * node.
+ * @attribute {string} onpointerup - Script to run when a pointer button is released over the
+ * node.
+ * @fires {PointerEvent} pointerenter - Fired when the pointer moves onto the node.
+ * @fires {PointerEvent} pointerleave - Fired when the pointer moves off the node.
+ * @fires {PointerEvent} pointermove - Fired when the pointer moves over the node.
+ * @fires {PointerEvent} pointerdown - Fired when a pointer button is pressed over the node.
+ * @fires {PointerEvent} pointerup - Fired when a pointer button is released over the node.
+ */
+class NodeElement extends EntityBaseElement {
+    _name = '';
+    _index = null;
+    _state = 'pending';
+    _path = null;
+    /**
+     * The element whose entity roots this element's search: the nearest ancestor `pc-node`, or
+     * failing that the nearest ancestor `pc-model`. Resolved on connection.
+     */
+    _host = null;
+    /**
+     * The listener following the host's binding cycles. Both host kinds announce each cycle
+     * with a `ready` event — `pc-model` on every instantiation, `pc-node` on every bind.
+     */
+    _hostListener = null;
+    /**
+     * The subscription to the bound entity's destruction, detached on unbind so a retargeted
+     * element cannot be reset by the eventual death of a node it no longer fronts.
+     */
+    _destroyHandle = null;
+    /** The authored values displaced by this element's overrides, captured per property. */
+    _authored = {};
+    // Override values. `null` means "no override": the authored value stays in force.
+    _enabled = null;
+    _position = null;
+    _rotation = null;
+    _scale = null;
+    _tags = null;
+    /**
+     * The binding state: `pending` until the host instantiates and `name` resolves, `bound`
+     * once decorated, `missing`/`ambiguous`/`duplicate` when resolution failed (each also
+     * warns). Useful for asserting a document's bindings programmatically.
+     * @returns The binding state.
+     */
+    get state() {
+        return this._state;
+    }
+    /**
+     * The path of the bound node below the search root, `/`-separated, or `null` while not
+     * bound.
+     * @returns The bound node's path, or `null`.
+     */
+    get path() {
+        return this._path;
+    }
+    connectedCallback() {
+        const host = (this.parentElement?.closest('pc-model, pc-node') ?? null);
+        if (!host) {
+            const label = this._name ? ` '${this._name}'` : '';
+            console.warn(`pc-node${label} must be a descendant of pc-model - node not bound`);
+            return;
+        }
+        this._host = host;
+        // Follow the host's binding cycles. `ready` bubbles, so cycles of elements nested under
+        // the host pass through it - only the host's own count.
+        this._hostListener = (event) => {
+            if (event.target !== this._host) {
+                return;
+            }
+            this._rebind();
+        };
+        host.addEventListener('ready', this._hostListener);
+        // The host may already be instantiated (an element inserted after load binds immediately)
+        this._rebind();
+    }
+    disconnectedCallback() {
+        if (this._host && this._hostListener) {
+            this._host.removeEventListener('ready', this._hostListener);
+        }
+        this._host = null;
+        this._hostListener = null;
+        // Removal reverts: the model owns the node, so the entity is left as authored. Children
+        // clean up through their own disconnect behavior.
+        this._unbind();
+        this._state = 'pending';
+    }
+    /**
+     * Re-resolves the binding against the host's current hierarchy: on connection, on a `name`
+     * or `index` change, and on every host cycle (a model [re]instantiating, an enclosing
+     * `pc-node` [re]binding). When re-resolution yields the entity already bound, the binding
+     * is retained untouched — a redundant edit must not flicker overrides through a revert.
+     */
+    _rebind() {
+        const hostEntity = this._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.
+            this._unbind();
+            this._state = 'pending';
+            return;
+        }
+        const target = this._resolve(hostEntity);
+        if (target && target === this._entity) {
+            this._path = this._pathOf(target, hostEntity);
+            return;
+        }
+        this._unbind();
+        if (!target) {
+            // _resolve warned and set the failure state
+            return;
+        }
+        this._bind(target, hostEntity);
+    }
+    /**
+     * Resolves `name` (and `index`) to an entity under `hostEntity`, warning and recording the
+     * failure state when it cannot.
+     *
+     * @param hostEntity - The root of the search.
+     * @returns The resolved entity, or `null`.
+     */
+    _resolve(hostEntity) {
+        const matches = hostEntity.find((node) => node.name === this._name);
+        if (matches.length === 0) {
+            const closest = this._closestName(hostEntity);
+            const hint = closest ? ` - closest match: '${closest}'` : '';
+            console.warn(`pc-node '${this._name}' not found in ${this._describeHost()}${hint}`);
+            this._state = 'missing';
+            return null;
+        }
+        let target;
+        if (this._index !== null) {
+            if (this._index >= matches.length) {
+                console.warn(`pc-node '${this._name}' index ${this._index} is out of range - ${matches.length} match(es) in ${this._describeHost()}`);
+                this._state = 'missing';
+                return null;
+            }
+            target = matches[this._index];
+        }
+        else if (matches.length > 1) {
+            // Ambiguity binds nothing: a fallback guess performs side effects on the wrong
+            // scene node, and would go wrong silently when a re-export introduces a duplicate
+            // name. The candidates tell the author exactly what to write.
+            const candidates = matches.map((m, i) => `[${i}] ${this._pathOf(m, hostEntity)}`).join(', ');
+            console.warn(`pc-node '${this._name}' is ambiguous in ${this._describeHost()} - specify index: ${candidates}`);
+            this._state = 'ambiguous';
+            return null;
+        }
+        else {
+            target = matches[0];
+        }
+        const owner = this.closestApp?.elementFromEntity(target);
+        if (owner && owner !== this) {
+            console.warn(`pc-node '${this._name}' resolves to a node already bound by another element - element ignored`);
+            this._state = 'duplicate';
+            return null;
+        }
+        return target;
+    }
+    /**
+     * Binds `target`: registers it (making it a pick target), hooks its destruction, applies
+     * this element's overrides, announces readiness and builds the deferred child subtree.
+     *
+     * @param target - The entity to bind.
+     * @param hostEntity - The search root, for the path.
+     */
+    _bind(target, hostEntity) {
+        this._entity = target;
+        this._registerEntity(target);
+        this._destroyHandle = target.once('destroy', this._onEntityDestroy, this);
+        this._state = 'bound';
+        this._path = this._pathOf(target, hostEntity);
+        this._applyOverrides();
+        this._onReady();
+        this._buildChildren();
+    }
+    /**
+     * Dissolves the current binding, restoring every authored value this element's overrides
+     * displaced and removing the decorations this binding hosts: attachment entities are
+     * destroyed (re-created against the next binding) and component decorations are removed
+     * from the abandoned node. Both sweeps are scoped by `closestEntity`, so a still-bound
+     * nested `pc-node` keeps its own decorations. Safe to call in any state.
+     */
+    _unbind() {
+        const entity = this._entity;
+        if (!entity) {
+            return;
+        }
+        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) => {
+            if (child.closestEntity === this) {
+                child.entity?.destroy();
+            }
+        });
+        this._destroyHandle?.off();
+        this._destroyHandle = null;
+        this._unregisterEntity(entity);
+        this._entity = null;
+        this._path = null;
+        this._authored = {};
+        // Component decorations come off through the same hook the host-ready cycle uses. A
+        // dissolve that never rebinds fires no ready event, so the sweep is explicit - after
+        // `_entity` is cleared, so the hook sees a host without an entity.
+        this.querySelectorAll('*').forEach((child) => {
+            if (child instanceof ComponentElement && child.closestEntity === this) {
+                child._hostCycled();
+            }
+        });
+        this._resetReady();
+    }
+    /**
+     * Handles the destruction of the bound entity - its model unloading, reloading, or a script
+     * destroying it. There is nothing to revert on a destroyed entity; the element returns to
+     * pending and the host's next cycle re-resolves it.
+     */
+    _onEntityDestroy(entity) {
+        this._destroyHandle = null;
+        this._unregisterEntity(entity);
+        this._entity = null;
+        this._path = null;
+        this._authored = {};
+        this._state = 'pending';
+        this._resetReady();
+    }
+    /**
+     * Creates and parents the entities of child `pc-entity` elements - the attachment points.
+     * Mirrors the runtime-insertion path in EntityElement.connectedCallback: children were
+     * deferred while this host was unresolved (or reset when a previous binding dissolved), and
+     * build here once it binds.
+     */
+    _buildChildren() {
+        const app = this.closestApp?.app;
+        if (!app) {
+            return;
+        }
+        const childEntities = this.querySelectorAll('pc-entity');
+        childEntities.forEach((child) => {
+            child._createEntity(app);
+        });
+        childEntities.forEach((child) => {
+            child._buildHierarchy(app);
+        });
+    }
+    /**
+     * Applies every override that is explicitly set, capturing the authored value it displaces.
+     */
+    _applyOverrides() {
+        if (this._enabled !== null) {
+            this.enabled = this._enabled;
+        }
+        if (this._position !== null) {
+            this.position = this._position;
+        }
+        if (this._rotation !== null) {
+            this.rotation = this._rotation;
+        }
+        if (this._scale !== null) {
+            this.scale = this._scale;
+        }
+        if (this._tags !== null) {
+            this.tags = this._tags;
+        }
+    }
+    /**
+     * Restores every authored value this element's overrides displaced. The override values
+     * themselves are kept - they re-apply on the next binding.
+     */
+    _revertOverrides() {
+        const entity = this._entity;
+        const authored = this._authored;
+        if (authored.enabled !== undefined) {
+            entity.enabled = authored.enabled;
+        }
+        if (authored.position) {
+            entity.setLocalPosition(authored.position);
+        }
+        if (authored.rotation) {
+            entity.setLocalRotation(authored.rotation);
+        }
+        if (authored.scale) {
+            entity.setLocalScale(authored.scale);
+        }
+        if (authored.tags) {
+            entity.tags.clear();
+            entity.tags.add(authored.tags);
+        }
+        this._authored = {};
+    }
+    /**
+     * Renders the path of `node` below `root`, for the `path` property and the resolution
+     * warnings.
+     *
+     * @param node - The node to describe.
+     * @param root - The search root.
+     * @returns The `/`-separated path.
+     */
+    _pathOf(node, root) {
+        const parts = [];
+        for (let current = node; current && current !== root; current = current.parent) {
+            parts.unshift(current.name);
+        }
+        return parts.join('/') || node.name;
+    }
+    /**
+     * Describes the search root for warnings: the model's asset id, or the enclosing node's
+     * name.
+     * @returns The description.
+     */
+    _describeHost() {
+        if (this._host instanceof ModelElement) {
+            return `model '${this._host.asset}'`;
+        }
+        return `pc-node '${this._host?.name ?? ''}' subtree`;
+    }
+    /**
+     * Finds the node name nearest to the missing `name`, for the miss warning. The names are
+     * already in hand from resolution, so the suggestion is nearly free.
+     *
+     * @param hostEntity - The root of the search.
+     * @returns The closest name within an edit distance of 2, or `null`.
+     */
+    _closestName(hostEntity) {
+        let best = null;
+        let bestDistance = 3;
+        hostEntity.find((node) => {
+            const distance = levenshtein(this._name, node.name);
+            if (distance < bestDistance) {
+                bestDistance = distance;
+                best = node.name;
+            }
+            return false;
+        });
+        return best;
+    }
+    /**
+     * Sets the name of the node to bind. A change retargets: the current binding's overrides
+     * revert and the new name resolves afresh. `name` on a `pc-node` is never a rename of the
+     * authored node - it is only ever a reference.
+     * @param value - The node name.
+     */
+    set name(value) {
+        this._name = value;
+        if (this.isConnected && this._host) {
+            this._rebind();
+        }
+    }
+    /**
+     * Gets the name of the node to bind.
+     * @returns The node name.
+     */
+    get name() {
+        return this._name;
+    }
+    /**
+     * Sets which match to bind when `name` matches more than one node, 0-based in depth-first
+     * order. A change retargets, like `name`. `null` means unset - required when the name is
+     * ambiguous, optional otherwise.
+     * @param value - The match index, or `null`.
+     */
+    set index(value) {
+        this._index = value;
+        if (this.isConnected && this._host) {
+            this._rebind();
+        }
+    }
+    /**
+     * Gets which match to bind.
+     * @returns The match index, or `null` when unset.
+     */
+    get index() {
+        return this._index;
+    }
+    /**
+     * Sets the enabled override. `null` clears it, restoring the authored state.
+     * @param value - The enabled state, or `null`.
+     */
+    set enabled(value) {
+        this._enabled = value;
+        const entity = this._state === 'bound' ? this._entity : null;
+        if (!entity) {
+            return;
+        }
+        if (value !== null) {
+            this._authored.enabled ??= entity.enabled;
+            entity.enabled = value;
+        }
+        else if (this._authored.enabled !== undefined) {
+            entity.enabled = this._authored.enabled;
+            delete this._authored.enabled;
+        }
+    }
+    /**
+     * Gets the enabled override.
+     * @returns The enabled state, or `null` while no override is set.
+     */
+    get enabled() {
+        return this._enabled;
+    }
+    /**
+     * Sets the local position override. `null` clears it, restoring the authored position.
+     * @param value - The position, or `null`.
+     */
+    set position(value) {
+        this._position = value;
+        const entity = this._state === 'bound' ? this._entity : null;
+        if (!entity) {
+            return;
+        }
+        if (value !== null) {
+            this._authored.position ??= entity.getLocalPosition().clone();
+            entity.setLocalPosition(value);
+        }
+        else if (this._authored.position) {
+            entity.setLocalPosition(this._authored.position);
+            delete this._authored.position;
+        }
+    }
+    /**
+     * Gets the local position override.
+     * @returns The position, or `null` while no override is set.
+     */
+    get position() {
+        return this._position;
+    }
+    /**
+     * Sets the local rotation override, as Euler angles in degrees. `null` clears it, restoring
+     * the authored rotation.
+     * @param value - The rotation, or `null`.
+     */
+    set rotation(value) {
+        this._rotation = value;
+        const entity = this._state === 'bound' ? this._entity : null;
+        if (!entity) {
+            return;
+        }
+        if (value !== null) {
+            // The authored rotation is cached as a quaternion: it restores exactly, where a
+            // round trip through Euler angles need not.
+            this._authored.rotation ??= entity.getLocalRotation().clone();
+            entity.setLocalEulerAngles(value);
+        }
+        else if (this._authored.rotation) {
+            entity.setLocalRotation(this._authored.rotation);
+            delete this._authored.rotation;
+        }
+    }
+    /**
+     * Gets the local rotation override.
+     * @returns The rotation, or `null` while no override is set.
+     */
+    get rotation() {
+        return this._rotation;
+    }
+    /**
+     * Sets the local scale override. `null` clears it, restoring the authored scale.
+     * @param value - The scale, or `null`.
+     */
+    set scale(value) {
+        this._scale = value;
+        const entity = this._state === 'bound' ? this._entity : null;
+        if (!entity) {
+            return;
+        }
+        if (value !== null) {
+            this._authored.scale ??= entity.getLocalScale().clone();
+            entity.setLocalScale(value);
+        }
+        else if (this._authored.scale) {
+            entity.setLocalScale(this._authored.scale);
+            delete this._authored.scale;
+        }
+    }
+    /**
+     * Gets the local scale override.
+     * @returns The scale, or `null` while no override is set.
+     */
+    get scale() {
+        return this._scale;
+    }
+    /**
+     * Sets the tags override. `null` clears it, restoring the authored tags.
+     * @param value - The tags, or `null`.
+     */
+    set tags(value) {
+        this._tags = value;
+        const entity = this._state === 'bound' ? this._entity : null;
+        if (!entity) {
+            return;
+        }
+        if (value !== null) {
+            this._authored.tags ??= entity.tags.list().slice();
+            entity.tags.clear();
+            entity.tags.add(value);
+        }
+        else if (this._authored.tags) {
+            entity.tags.clear();
+            entity.tags.add(this._authored.tags);
+            delete this._authored.tags;
+        }
+    }
+    /**
+     * Gets the tags override.
+     * @returns The tags, or `null` while no override is set.
+     */
+    get tags() {
+        return this._tags;
+    }
+    static get observedAttributes() {
+        return ['enabled', 'index', 'name', 'position', 'rotation', 'scale', 'tags', ...POINTER_ATTRIBUTES];
+    }
+    attributeChangedCallback(name, _oldValue, newValue) {
+        switch (name) {
+            case 'enabled':
+                this.enabled = newValue === null ? null : parseBool(newValue, true);
+                break;
+            case 'index':
+                if (newValue === null) {
+                    this.index = null;
+                }
+                else {
+                    // Number('') is 0, which would make index="" silently mean the first match
+                    const index = newValue.trim() === '' ? NaN : Number(newValue);
+                    if (!Number.isInteger(index) || index < 0) {
+                        // Invalid values are treated as absent: under ambiguity that means
+                        // unbound, the fail-safe direction.
+                        console.warn(`pc-node index '${newValue}' is not a non-negative integer - treated as absent`);
+                        this.index = null;
+                    }
+                    else {
+                        this.index = index;
+                    }
+                }
+                break;
+            case 'name':
+                this.name = newValue ?? '';
+                break;
+            case 'position':
+                this.position = newValue === null ? null : parseVec3(newValue, Vec3.ZERO, name);
+                break;
+            case 'rotation':
+                this.rotation = newValue === null ? null : parseVec3(newValue, Vec3.ZERO, name);
+                break;
+            case 'scale':
+                this.scale = newValue === null ? null : parseVec3(newValue, Vec3.ONE, name);
+                break;
+            case 'tags':
+                this.tags = newValue === null ? null : parseTags(newValue);
+                break;
+            case 'onpointerenter':
+            case 'onpointerleave':
+            case 'onpointerdown':
+            case 'onpointerup':
+            case 'onpointermove':
+                this._updateInlineHandler(name, newValue);
+                break;
+        }
+    }
+}
+customElements.define('pc-node', NodeElement);
+
 /**
  * The SceneElement interface provides properties and methods for manipulating
  * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-scene/ | `<pc-scene>`} elements.
@@ -10280,7 +11575,6 @@ class SkyElement extends AsyncElement {
             return;
         const source = asset.resource;
         const skybox = EnvLighting.generateSkyboxCubemap(source);
-        skybox.anisotropy = 4;
         // This element owns what it generated (see _unloadSkybox) - replacing a skybox from an
         // earlier load must release it, not orphan it on the GPU
         this._scene.skybox?.destroy();
@@ -10529,5 +11823,5 @@ class SkyElement extends AsyncElement {
 }
 customElements.define('pc-sky', SkyElement);
 
-export { AppElement, AssetElement, AsyncElement, ButtonComponentElement, CameraComponentElement, CollisionComponentElement, ComponentElement, ElementComponentElement, EntityElement, GSplatComponentElement, LayoutChildComponentElement, LayoutGroupComponentElement, LightComponentElement, ListenerComponentElement, MaterialElement, ModelElement, ModuleElement, ParticleSystemComponentElement, RenderComponentElement, RigidBodyComponentElement, SceneElement, ScreenComponentElement, ScriptComponentElement, ScriptElement, ScrollViewComponentElement, ScrollbarComponentElement, SkyElement, SoundComponentElement, SoundSlotElement, whenReady };
+export { AppElement, AssetElement, AsyncElement, ButtonComponentElement, CameraComponentElement, CollisionComponentElement, ComponentElement, ElementComponentElement, EntityBaseElement, EntityElement, GSplatComponentElement, LayoutChildComponentElement, LayoutGroupComponentElement, LightComponentElement, ListenerComponentElement, MaterialElement, ModelElement, ModuleElement, NodeElement, ParticleSystemComponentElement, RenderComponentElement, RigidBodyComponentElement, SceneElement, ScreenComponentElement, ScriptComponentElement, ScriptElement, ScrollViewComponentElement, ScrollbarComponentElement, SkyElement, SoundComponentElement, SoundSlotElement, whenReady };
 //# sourceMappingURL=pwc.mjs.map