@playcanvas/web-components 0.14.0 → 0.15.0

package/dist/pwc.cjs

@@ -877,6 +877,23 @@ class AppElement extends AsyncElement {
         if (this._loadingBar && !this._bar) {
             this._bar = new LoadingBar(this);
         }
+        // Upgrade the subtree before reading anything out of it. A subtree cloned from a
+        // <template> arrives entirely unupgraded - template content lives in an inert document,
+        // where custom element definitions are never looked up - and appending the clone upgrades
+        // its elements in tree order, this one before its descendants. The module query below would
+        // otherwise find plain HTMLElements with no _getLoadPromise to call, and the boot would die
+        // there, leaving the element permanently unready: no canvas, no entities, no application.
+        //
+        // Upgrading is the fix here rather than skipping whatever has not upgraded, because a
+        // <pc-module> is the one child that nothing else ever builds on its own behalf - skipping
+        // it would drop the wasm module the app asked for, silently and only for cloned apps.
+        // Upgrading runs each descendant's connectedCallback synchronously, a few lines earlier
+        // than the parser's path runs them but into the same state they see there: no application
+        // yet and _hierarchyReady false, so they defer to the sweeps below. A descendant that
+        // disconnects this element from there is caught by the generation check after the await,
+        // as any other disconnect is. An already-upgraded subtree - every other insertion path -
+        // is left completely untouched.
+        customElements.upgrade(this);
         // Get all pc-module elements that are direct children of the pc-app element
         const moduleElements = this.querySelectorAll(':scope > pc-module');
         // Wait for all modules to load
@@ -1728,6 +1745,30 @@ class EntityBaseElement extends AsyncElement {
     }
 }
 
+/**
+ * Creates and parents the entities of every descendant `<pc-entity>` of `root`, in two passes so
+ * that no parent's existence depends on document order. Called wherever a subtree could not build
+ * itself: an element inserted into an application that is already running, and a `<pc-node>` whose
+ * children waited for it to bind.
+ *
+ * Descendants that are not yet custom elements are skipped, because there is nothing useful to do
+ * for them and reaching for `_createEntity` would throw. A subtree cloned from a `<template>`
+ * arrives entirely unupgraded — template content lives in an inert document, where custom element
+ * definitions are never looked up — and appending the clone upgrades its elements in tree order,
+ * an element before its descendants. So a sweep from an element's own `connectedCallback` sees
+ * plain `HTMLElement`s below it. Each becomes an `EntityElement` moments later and its own
+ * `connectedCallback` creates and parents it, by which time the ancestor it parents under has its
+ * entity — the same guarantee tree order gives this sweep.
+ *
+ * @param root - The element whose descendant entities to build.
+ * @param app - The application to create the entities in.
+ * @internal
+ */
+const buildDescendantEntities = (root, app) => {
+    const children = Array.from(root.querySelectorAll('pc-entity')).filter((child) => child instanceof EntityElement);
+    children.forEach((child) => child._createEntity(app));
+    children.forEach((child) => child._buildHierarchy(app));
+};
 /**
  * The EntityElement interface provides properties and methods for manipulating
  * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-entity/ | `<pc-entity>`} elements.
@@ -1876,13 +1917,7 @@ class EntityElement extends EntityBaseElement {
             this._createEntity(app);
             this._buildHierarchy(app);
             // Handle any child entities that might exist
-            const childEntities = this.querySelectorAll('pc-entity');
-            childEntities.forEach((child) => {
-                child._createEntity(app);
-            });
-            childEntities.forEach((child) => {
-                child._buildHierarchy(app);
-            });
+            buildDescendantEntities(this, app);
         }
     }
     disconnectedCallback() {
@@ -4869,6 +4904,879 @@ class ElementComponentElement extends ComponentElement {
 }
 customElements.define('pc-element', ElementComponentElement);
 
+/**
+ * The JointComponentElement interface provides properties and methods for manipulating
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-joint/ | `<pc-joint>`} elements.
+ * The JointComponentElement interface also inherits the properties and methods of the
+ * {@link HTMLElement} interface.
+ *
+ * The entity holding the joint is not itself constrained. Its world transform defines the joint
+ * frame — the anchor point and axes the constraint operates about — with the local X axis as the
+ * primary axis: a hinge rotates about it, a slider translates along it and a ball joint twists
+ * about it. The constrained bodies are referenced by `entity-a` and `entity-b`, both of which need
+ * a rigid body component; leaving `entity-b` empty constrains `entity-a` to a fixed point in world
+ * space. The underlying engine component is in alpha, so its API may change.
+ *
+ * @fires {CustomEvent} break - Fired when the impulse on the joint exceeds `break-impulse` and the
+ * constraint breaks. A broken joint no longer constrains its bodies; calling `refreshFrames()` on
+ * the underlying component re-attaches it. Bubbles and is composed.
+ *
+ * @category Components
+ */
+class JointComponentElement extends ComponentElement {
+    /**
+     * The spring damping of the joint per angular axis.
+     */
+    _angularDamping = new playcanvas.Vec3(1, 1, 1);
+    /**
+     * The rest angle of the joint's angular springs.
+     */
+    _angularEquilibrium = new playcanvas.Vec3();
+    /**
+     * The rotation limits of the joint about its X axis.
+     */
+    _angularLimitsX = new playcanvas.Vec2();
+    /**
+     * The rotation limits of the joint about its Y axis.
+     */
+    _angularLimitsY = new playcanvas.Vec2();
+    /**
+     * The rotation limits of the joint about its Z axis.
+     */
+    _angularLimitsZ = new playcanvas.Vec2();
+    /**
+     * The rotational degree of freedom of the joint about its X axis.
+     */
+    _angularMotionX = 'locked';
+    /**
+     * The rotational degree of freedom of the joint about its Y axis.
+     */
+    _angularMotionY = 'locked';
+    /**
+     * The rotational degree of freedom of the joint about its Z axis.
+     */
+    _angularMotionZ = 'locked';
+    /**
+     * The spring stiffness of the joint per angular axis.
+     */
+    _angularStiffness = new playcanvas.Vec3();
+    /**
+     * The impulse above which the joint breaks.
+     */
+    _breakImpulse = Infinity;
+    /**
+     * Whether collision is enabled between the constrained bodies.
+     */
+    _enableCollision = false;
+    /**
+     * Whether the joint's limits are enforced.
+     */
+    _enableLimits = false;
+    /**
+     * The reference to the entity providing the first constrained body.
+     */
+    _entityA = '';
+    /**
+     * The reference to the entity providing the second constrained body.
+     */
+    _entityB = '';
+    /**
+     * The rotation or travel limits of the joint.
+     */
+    _limits = new playcanvas.Vec2(-45, 45);
+    /**
+     * The spring damping of the joint per linear axis.
+     */
+    _linearDamping = new playcanvas.Vec3(1, 1, 1);
+    /**
+     * The rest point of the joint's linear springs.
+     */
+    _linearEquilibrium = new playcanvas.Vec3();
+    /**
+     * The translation limits of the joint along its X axis.
+     */
+    _linearLimitsX = new playcanvas.Vec2();
+    /**
+     * The translation limits of the joint along its Y axis.
+     */
+    _linearLimitsY = new playcanvas.Vec2();
+    /**
+     * The translation limits of the joint along its Z axis.
+     */
+    _linearLimitsZ = new playcanvas.Vec2();
+    /**
+     * The linear degree of freedom of the joint along its X axis.
+     */
+    _linearMotionX = 'locked';
+    /**
+     * The linear degree of freedom of the joint along its Y axis.
+     */
+    _linearMotionY = 'locked';
+    /**
+     * The linear degree of freedom of the joint along its Z axis.
+     */
+    _linearMotionZ = 'locked';
+    /**
+     * The spring stiffness of the joint per linear axis.
+     */
+    _linearStiffness = new playcanvas.Vec3();
+    /**
+     * The maximum torque or force of the joint's motor.
+     */
+    _maxMotorForce = 0;
+    /**
+     * The target speed of the joint's motor.
+     */
+    _motorSpeed = 0;
+    /**
+     * The maximum swing of the joint around the joint frame's Y axis.
+     */
+    _swingLimitY = 45;
+    /**
+     * The maximum swing of the joint around the joint frame's Z axis.
+     */
+    _swingLimitZ = 45;
+    /**
+     * The maximum twist of the joint about its primary axis.
+     */
+    _twistLimit = 20;
+    /**
+     * The type of the joint.
+     */
+    _type = 'fixed';
+    /** @ignore */
+    constructor() {
+        super('joint');
+    }
+    getInitialComponentData() {
+        return {
+            angularDamping: this._angularDamping,
+            angularEquilibrium: this._angularEquilibrium,
+            angularLimitsX: this._angularLimitsX,
+            angularLimitsY: this._angularLimitsY,
+            angularLimitsZ: this._angularLimitsZ,
+            angularMotionX: this._angularMotionX,
+            angularMotionY: this._angularMotionY,
+            angularMotionZ: this._angularMotionZ,
+            angularStiffness: this._angularStiffness,
+            breakImpulse: this._breakImpulse,
+            enableCollision: this._enableCollision,
+            enableLimits: this._enableLimits,
+            entityA: getEntity(this._entityA),
+            entityB: getEntity(this._entityB),
+            limits: this._limits,
+            linearDamping: this._linearDamping,
+            linearEquilibrium: this._linearEquilibrium,
+            linearLimitsX: this._linearLimitsX,
+            linearLimitsY: this._linearLimitsY,
+            linearLimitsZ: this._linearLimitsZ,
+            linearMotionX: this._linearMotionX,
+            linearMotionY: this._linearMotionY,
+            linearMotionZ: this._linearMotionZ,
+            linearStiffness: this._linearStiffness,
+            maxMotorForce: this._maxMotorForce,
+            motorSpeed: this._motorSpeed,
+            swingLimitY: this._swingLimitY,
+            swingLimitZ: this._swingLimitZ,
+            twistLimit: this._twistLimit,
+            type: this._type
+        };
+    }
+    _onBreak() {
+        this.dispatchEvent(new CustomEvent('break', { bubbles: true, composed: true }));
+    }
+    initComponent() {
+        const component = this.component;
+        if (!component) {
+            return;
+        }
+        // A host readiness cycle can re-run this against the same surviving component instance,
+        // so the off/on pair keeps the subscription single either way. Component removal destroys
+        // the instance and its listeners with it, so there is no disconnect-side teardown.
+        component.off('break', this._onBreak, this);
+        component.on('break', this._onBreak, this);
+    }
+    /**
+     * Gets the underlying PlayCanvas joint component.
+     * @returns The joint component.
+     */
+    get component() {
+        return super.component;
+    }
+    /**
+     * Sets the spring damping of a 6dof joint per angular axis, used on axes with a non-zero
+     * angular-stiffness.
+     * @param value - The angular spring damping.
+     */
+    set angularDamping(value) {
+        this._angularDamping = value;
+        if (this.component) {
+            this.component.angularDamping = value;
+        }
+    }
+    /**
+     * Gets the spring damping of the joint per angular axis.
+     * @returns The angular spring damping.
+     */
+    get angularDamping() {
+        return this._angularDamping;
+    }
+    /**
+     * Sets the rest angle of a 6dof joint's angular springs in degrees per axis, used on axes with
+     * a non-zero angular-stiffness.
+     * @param value - The angular spring rest angles.
+     */
+    set angularEquilibrium(value) {
+        this._angularEquilibrium = value;
+        if (this.component) {
+            this.component.angularEquilibrium = value;
+        }
+    }
+    /**
+     * Gets the rest angle of the joint's angular springs.
+     * @returns The angular spring rest angles.
+     */
+    get angularEquilibrium() {
+        return this._angularEquilibrium;
+    }
+    /**
+     * Sets the lower and upper rotation limit of a 6dof joint about its X axis in degrees, used
+     * when angular-motion-x is limited.
+     * @param value - The X axis rotation limits.
+     */
+    set angularLimitsX(value) {
+        this._angularLimitsX = value;
+        if (this.component) {
+            this.component.angularLimitsX = value;
+        }
+    }
+    /**
+     * Gets the rotation limits of the joint about its X axis.
+     * @returns The X axis rotation limits.
+     */
+    get angularLimitsX() {
+        return this._angularLimitsX;
+    }
+    /**
+     * Sets the lower and upper rotation limit of a 6dof joint about its Y axis in degrees, used
+     * when angular-motion-y is limited.
+     * @param value - The Y axis rotation limits.
+     */
+    set angularLimitsY(value) {
+        this._angularLimitsY = value;
+        if (this.component) {
+            this.component.angularLimitsY = value;
+        }
+    }
+    /**
+     * Gets the rotation limits of the joint about its Y axis.
+     * @returns The Y axis rotation limits.
+     */
+    get angularLimitsY() {
+        return this._angularLimitsY;
+    }
+    /**
+     * Sets the lower and upper rotation limit of a 6dof joint about its Z axis in degrees, used
+     * when angular-motion-z is limited.
+     * @param value - The Z axis rotation limits.
+     */
+    set angularLimitsZ(value) {
+        this._angularLimitsZ = value;
+        if (this.component) {
+            this.component.angularLimitsZ = value;
+        }
+    }
+    /**
+     * Gets the rotation limits of the joint about its Z axis.
+     * @returns The Z axis rotation limits.
+     */
+    get angularLimitsZ() {
+        return this._angularLimitsZ;
+    }
+    /**
+     * Sets how a 6dof joint constrains rotation about its X axis. Can be `locked`, `limited` or
+     * `free`. Defaults to `locked`.
+     * @param value - The X axis rotational degree of freedom.
+     */
+    set angularMotionX(value) {
+        this._angularMotionX = value;
+        if (this.component) {
+            this.component.angularMotionX = value;
+        }
+    }
+    /**
+     * Gets how the joint constrains rotation about its X axis.
+     * @returns The X axis rotational degree of freedom.
+     */
+    get angularMotionX() {
+        return this._angularMotionX;
+    }
+    /**
+     * Sets how a 6dof joint constrains rotation about its Y axis. Can be `locked`, `limited` or
+     * `free`. Defaults to `locked`.
+     * @param value - The Y axis rotational degree of freedom.
+     */
+    set angularMotionY(value) {
+        this._angularMotionY = value;
+        if (this.component) {
+            this.component.angularMotionY = value;
+        }
+    }
+    /**
+     * Gets how the joint constrains rotation about its Y axis.
+     * @returns The Y axis rotational degree of freedom.
+     */
+    get angularMotionY() {
+        return this._angularMotionY;
+    }
+    /**
+     * Sets how a 6dof joint constrains rotation about its Z axis. Can be `locked`, `limited` or
+     * `free`. Defaults to `locked`.
+     * @param value - The Z axis rotational degree of freedom.
+     */
+    set angularMotionZ(value) {
+        this._angularMotionZ = value;
+        if (this.component) {
+            this.component.angularMotionZ = value;
+        }
+    }
+    /**
+     * Gets how the joint constrains rotation about its Z axis.
+     * @returns The Z axis rotational degree of freedom.
+     */
+    get angularMotionZ() {
+        return this._angularMotionZ;
+    }
+    /**
+     * Sets the spring stiffness of a 6dof joint per angular axis, where 0 disables the spring on
+     * that axis.
+     * @param value - The angular spring stiffness.
+     */
+    set angularStiffness(value) {
+        this._angularStiffness = value;
+        if (this.component) {
+            this.component.angularStiffness = value;
+        }
+    }
+    /**
+     * Gets the spring stiffness of the joint per angular axis.
+     * @returns The angular spring stiffness.
+     */
+    get angularStiffness() {
+        return this._angularStiffness;
+    }
+    /**
+     * Sets the impulse in newton seconds above which the joint breaks. Defaults to `Infinity`,
+     * which makes the joint unbreakable.
+     * @param value - The break impulse.
+     */
+    set breakImpulse(value) {
+        this._breakImpulse = value;
+        if (this.component) {
+            this.component.breakImpulse = value;
+        }
+    }
+    /**
+     * Gets the impulse above which the joint breaks.
+     * @returns The break impulse.
+     */
+    get breakImpulse() {
+        return this._breakImpulse;
+    }
+    /**
+     * Sets whether collision is enabled between the two constrained bodies.
+     * @param value - Whether collision is enabled.
+     */
+    set enableCollision(value) {
+        this._enableCollision = value;
+        if (this.component) {
+            this.component.enableCollision = value;
+        }
+    }
+    /**
+     * Gets whether collision is enabled between the two constrained bodies.
+     * @returns Whether collision is enabled.
+     */
+    get enableCollision() {
+        return this._enableCollision;
+    }
+    /**
+     * Sets whether the limits of a hinge, slider or ball joint are enforced.
+     * @param value - Whether the limits are enforced.
+     */
+    set enableLimits(value) {
+        this._enableLimits = value;
+        if (this.component) {
+            this.component.enableLimits = value;
+        }
+    }
+    /**
+     * Gets whether the limits of the joint are enforced.
+     * @returns Whether the limits are enforced.
+     */
+    get enableLimits() {
+        return this._enableLimits;
+    }
+    /**
+     * Sets the reference (CSS selector, element id or entity name) to the `<pc-entity>` providing
+     * the first constrained body. The reference resolves when it is set, so an entity created
+     * later is picked up by setting the attribute again.
+     * @param value - The first body's entity reference.
+     */
+    set entityA(value) {
+        this._entityA = value;
+        if (this.component) {
+            this.component.entityA = getEntity(value);
+        }
+    }
+    /**
+     * Gets the reference to the `<pc-entity>` providing the first constrained body.
+     * @returns The first body's entity reference.
+     */
+    get entityA() {
+        return this._entityA;
+    }
+    /**
+     * Sets the reference (CSS selector, element id or entity name) to the `<pc-entity>` providing
+     * the second constrained body, or empty to constrain the first body to a fixed point in world
+     * space. The reference resolves when it is set, so an entity created later is picked up by
+     * setting the attribute again.
+     * @param value - The second body's entity reference.
+     */
+    set entityB(value) {
+        this._entityB = value;
+        if (this.component) {
+            this.component.entityB = getEntity(value);
+        }
+    }
+    /**
+     * Gets the reference to the `<pc-entity>` providing the second constrained body.
+     * @returns The second body's entity reference.
+     */
+    get entityB() {
+        return this._entityB;
+    }
+    /**
+     * Sets the lower and upper limit of a hinge joint's rotation in degrees, or a slider joint's
+     * travel in meters, applied when enable-limits is set.
+     * @param value - The rotation or travel limits.
+     */
+    set limits(value) {
+        this._limits = value;
+        if (this.component) {
+            this.component.limits = value;
+        }
+    }
+    /**
+     * Gets the rotation or travel limits of the joint.
+     * @returns The rotation or travel limits.
+     */
+    get limits() {
+        return this._limits;
+    }
+    /**
+     * Sets the spring damping of a 6dof joint per linear axis, used on axes with a non-zero
+     * linear-stiffness.
+     * @param value - The linear spring damping.
+     */
+    set linearDamping(value) {
+        this._linearDamping = value;
+        if (this.component) {
+            this.component.linearDamping = value;
+        }
+    }
+    /**
+     * Gets the spring damping of the joint per linear axis.
+     * @returns The linear spring damping.
+     */
+    get linearDamping() {
+        return this._linearDamping;
+    }
+    /**
+     * Sets the rest point of a 6dof joint's linear springs in meters per axis, used on axes with a
+     * non-zero linear-stiffness.
+     * @param value - The linear spring rest points.
+     */
+    set linearEquilibrium(value) {
+        this._linearEquilibrium = value;
+        if (this.component) {
+            this.component.linearEquilibrium = value;
+        }
+    }
+    /**
+     * Gets the rest point of the joint's linear springs.
+     * @returns The linear spring rest points.
+     */
+    get linearEquilibrium() {
+        return this._linearEquilibrium;
+    }
+    /**
+     * Sets the lower and upper translation limit of a 6dof joint along its X axis in meters, used
+     * when linear-motion-x is limited.
+     * @param value - The X axis translation limits.
+     */
+    set linearLimitsX(value) {
+        this._linearLimitsX = value;
+        if (this.component) {
+            this.component.linearLimitsX = value;
+        }
+    }
+    /**
+     * Gets the translation limits of the joint along its X axis.
+     * @returns The X axis translation limits.
+     */
+    get linearLimitsX() {
+        return this._linearLimitsX;
+    }
+    /**
+     * Sets the lower and upper translation limit of a 6dof joint along its Y axis in meters, used
+     * when linear-motion-y is limited.
+     * @param value - The Y axis translation limits.
+     */
+    set linearLimitsY(value) {
+        this._linearLimitsY = value;
+        if (this.component) {
+            this.component.linearLimitsY = value;
+        }
+    }
+    /**
+     * Gets the translation limits of the joint along its Y axis.
+     * @returns The Y axis translation limits.
+     */
+    get linearLimitsY() {
+        return this._linearLimitsY;
+    }
+    /**
+     * Sets the lower and upper translation limit of a 6dof joint along its Z axis in meters, used
+     * when linear-motion-z is limited.
+     * @param value - The Z axis translation limits.
+     */
+    set linearLimitsZ(value) {
+        this._linearLimitsZ = value;
+        if (this.component) {
+            this.component.linearLimitsZ = value;
+        }
+    }
+    /**
+     * Gets the translation limits of the joint along its Z axis.
+     * @returns The Z axis translation limits.
+     */
+    get linearLimitsZ() {
+        return this._linearLimitsZ;
+    }
+    /**
+     * Sets how a 6dof joint constrains translation along its X axis. Can be `locked`, `limited` or
+     * `free`. Defaults to `locked`.
+     * @param value - The X axis linear degree of freedom.
+     */
+    set linearMotionX(value) {
+        this._linearMotionX = value;
+        if (this.component) {
+            this.component.linearMotionX = value;
+        }
+    }
+    /**
+     * Gets how the joint constrains translation along its X axis.
+     * @returns The X axis linear degree of freedom.
+     */
+    get linearMotionX() {
+        return this._linearMotionX;
+    }
+    /**
+     * Sets how a 6dof joint constrains translation along its Y axis. Can be `locked`, `limited` or
+     * `free`. Defaults to `locked`.
+     * @param value - The Y axis linear degree of freedom.
+     */
+    set linearMotionY(value) {
+        this._linearMotionY = value;
+        if (this.component) {
+            this.component.linearMotionY = value;
+        }
+    }
+    /**
+     * Gets how the joint constrains translation along its Y axis.
+     * @returns The Y axis linear degree of freedom.
+     */
+    get linearMotionY() {
+        return this._linearMotionY;
+    }
+    /**
+     * Sets how a 6dof joint constrains translation along its Z axis. Can be `locked`, `limited` or
+     * `free`. Defaults to `locked`.
+     * @param value - The Z axis linear degree of freedom.
+     */
+    set linearMotionZ(value) {
+        this._linearMotionZ = value;
+        if (this.component) {
+            this.component.linearMotionZ = value;
+        }
+    }
+    /**
+     * Gets how the joint constrains translation along its Z axis.
+     * @returns The Z axis linear degree of freedom.
+     */
+    get linearMotionZ() {
+        return this._linearMotionZ;
+    }
+    /**
+     * Sets the spring stiffness of a 6dof joint per linear axis, where 0 disables the spring on
+     * that axis.
+     * @param value - The linear spring stiffness.
+     */
+    set linearStiffness(value) {
+        this._linearStiffness = value;
+        if (this.component) {
+            this.component.linearStiffness = value;
+        }
+    }
+    /**
+     * Gets the spring stiffness of the joint per linear axis.
+     * @returns The linear spring stiffness.
+     */
+    get linearStiffness() {
+        return this._linearStiffness;
+    }
+    /**
+     * Sets the maximum torque in newton meters of a hinge joint's motor, or the maximum force in
+     * newtons of a slider joint's motor, where 0 disables the motor.
+     * @param value - The maximum motor torque or force.
+     */
+    set maxMotorForce(value) {
+        this._maxMotorForce = value;
+        if (this.component) {
+            this.component.maxMotorForce = value;
+        }
+    }
+    /**
+     * Gets the maximum torque or force of the joint's motor.
+     * @returns The maximum motor torque or force.
+     */
+    get maxMotorForce() {
+        return this._maxMotorForce;
+    }
+    /**
+     * Sets the target speed of a hinge joint's motor in degrees per second, or a slider joint's
+     * motor in meters per second, active while max-motor-force is greater than 0.
+     * @param value - The motor's target speed.
+     */
+    set motorSpeed(value) {
+        this._motorSpeed = value;
+        if (this.component) {
+            this.component.motorSpeed = value;
+        }
+    }
+    /**
+     * Gets the target speed of the joint's motor.
+     * @returns The motor's target speed.
+     */
+    get motorSpeed() {
+        return this._motorSpeed;
+    }
+    /**
+     * Sets the maximum swing of a ball joint around the joint frame's Y axis in degrees, applied
+     * when enable-limits is set.
+     * @param value - The Y axis swing limit.
+     */
+    set swingLimitY(value) {
+        this._swingLimitY = value;
+        if (this.component) {
+            this.component.swingLimitY = value;
+        }
+    }
+    /**
+     * Gets the maximum swing of the joint around the joint frame's Y axis.
+     * @returns The Y axis swing limit.
+     */
+    get swingLimitY() {
+        return this._swingLimitY;
+    }
+    /**
+     * Sets the maximum swing of a ball joint around the joint frame's Z axis in degrees, applied
+     * when enable-limits is set.
+     * @param value - The Z axis swing limit.
+     */
+    set swingLimitZ(value) {
+        this._swingLimitZ = value;
+        if (this.component) {
+            this.component.swingLimitZ = value;
+        }
+    }
+    /**
+     * Gets the maximum swing of the joint around the joint frame's Z axis.
+     * @returns The Z axis swing limit.
+     */
+    get swingLimitZ() {
+        return this._swingLimitZ;
+    }
+    /**
+     * Sets the maximum twist of a ball joint about its primary axis in degrees, applied when
+     * enable-limits is set.
+     * @param value - The twist limit.
+     */
+    set twistLimit(value) {
+        this._twistLimit = value;
+        if (this.component) {
+            this.component.twistLimit = value;
+        }
+    }
+    /**
+     * Gets the maximum twist of the joint about its primary axis.
+     * @returns The twist limit.
+     */
+    get twistLimit() {
+        return this._twistLimit;
+    }
+    /**
+     * Sets the type of the joint. Can be `fixed`, `ball`, `hinge`, `slider` or `6dof`. Defaults to
+     * `fixed`.
+     * @param value - The joint type.
+     */
+    set type(value) {
+        this._type = value;
+        if (this.component) {
+            this.component.type = value;
+        }
+    }
+    /**
+     * Gets the type of the joint.
+     * @returns The joint type.
+     */
+    get type() {
+        return this._type;
+    }
+    static get observedAttributes() {
+        return [
+            ...super.observedAttributes,
+            'angular-damping',
+            'angular-equilibrium',
+            'angular-limits-x',
+            'angular-limits-y',
+            'angular-limits-z',
+            'angular-motion-x',
+            'angular-motion-y',
+            'angular-motion-z',
+            'angular-stiffness',
+            'break-impulse',
+            'enable-collision',
+            'enable-limits',
+            'entity-a',
+            'entity-b',
+            'limits',
+            'linear-damping',
+            'linear-equilibrium',
+            'linear-limits-x',
+            'linear-limits-y',
+            'linear-limits-z',
+            'linear-motion-x',
+            'linear-motion-y',
+            'linear-motion-z',
+            'linear-stiffness',
+            'max-motor-force',
+            'motor-speed',
+            'swing-limit-y',
+            'swing-limit-z',
+            'twist-limit',
+            'type'
+        ];
+    }
+    attributeChangedCallback(name, _oldValue, newValue) {
+        super.attributeChangedCallback(name, _oldValue, newValue);
+        switch (name) {
+            case 'angular-damping':
+                this.angularDamping = parseVec3(newValue, playcanvas.Vec3.ONE, name);
+                break;
+            case 'angular-equilibrium':
+                this.angularEquilibrium = parseVec3(newValue, playcanvas.Vec3.ZERO, name);
+                break;
+            case 'angular-limits-x':
+                this.angularLimitsX = parseVec2(newValue, playcanvas.Vec2.ZERO, name);
+                break;
+            case 'angular-limits-y':
+                this.angularLimitsY = parseVec2(newValue, playcanvas.Vec2.ZERO, name);
+                break;
+            case 'angular-limits-z':
+                this.angularLimitsZ = parseVec2(newValue, playcanvas.Vec2.ZERO, name);
+                break;
+            case 'angular-motion-x':
+                this.angularMotionX = parseEnum(newValue, ['locked', 'limited', 'free'], 'locked', name);
+                break;
+            case 'angular-motion-y':
+                this.angularMotionY = parseEnum(newValue, ['locked', 'limited', 'free'], 'locked', name);
+                break;
+            case 'angular-motion-z':
+                this.angularMotionZ = parseEnum(newValue, ['locked', 'limited', 'free'], 'locked', name);
+                break;
+            case 'angular-stiffness':
+                this.angularStiffness = parseVec3(newValue, playcanvas.Vec3.ZERO, name);
+                break;
+            case 'break-impulse':
+                this.breakImpulse = parseNumber(newValue, Infinity, name);
+                break;
+            case 'enable-collision':
+                this.enableCollision = parseBool(newValue, false);
+                break;
+            case 'enable-limits':
+                this.enableLimits = parseBool(newValue, false);
+                break;
+            case 'entity-a':
+                this.entityA = newValue ?? '';
+                break;
+            case 'entity-b':
+                this.entityB = newValue ?? '';
+                break;
+            case 'limits':
+                this.limits = parseVec2(newValue, new playcanvas.Vec2(-45, 45), name);
+                break;
+            case 'linear-damping':
+                this.linearDamping = parseVec3(newValue, playcanvas.Vec3.ONE, name);
+                break;
+            case 'linear-equilibrium':
+                this.linearEquilibrium = parseVec3(newValue, playcanvas.Vec3.ZERO, name);
+                break;
+            case 'linear-limits-x':
+                this.linearLimitsX = parseVec2(newValue, playcanvas.Vec2.ZERO, name);
+                break;
+            case 'linear-limits-y':
+                this.linearLimitsY = parseVec2(newValue, playcanvas.Vec2.ZERO, name);
+                break;
+            case 'linear-limits-z':
+                this.linearLimitsZ = parseVec2(newValue, playcanvas.Vec2.ZERO, name);
+                break;
+            case 'linear-motion-x':
+                this.linearMotionX = parseEnum(newValue, ['locked', 'limited', 'free'], 'locked', name);
+                break;
+            case 'linear-motion-y':
+                this.linearMotionY = parseEnum(newValue, ['locked', 'limited', 'free'], 'locked', name);
+                break;
+            case 'linear-motion-z':
+                this.linearMotionZ = parseEnum(newValue, ['locked', 'limited', 'free'], 'locked', name);
+                break;
+            case 'linear-stiffness':
+                this.linearStiffness = parseVec3(newValue, playcanvas.Vec3.ZERO, name);
+                break;
+            case 'max-motor-force':
+                this.maxMotorForce = parseNumber(newValue, 0, name);
+                break;
+            case 'motor-speed':
+                this.motorSpeed = parseNumber(newValue, 0, name);
+                break;
+            case 'swing-limit-y':
+                this.swingLimitY = parseNumber(newValue, 45, name);
+                break;
+            case 'swing-limit-z':
+                this.swingLimitZ = parseNumber(newValue, 45, name);
+                break;
+            case 'twist-limit':
+                this.twistLimit = parseNumber(newValue, 20, name);
+                break;
+            case 'type':
+                this.type = parseEnum(newValue, ['fixed', 'ball', 'hinge', 'slider', '6dof'], 'fixed', name);
+                break;
+        }
+    }
+}
+customElements.define('pc-joint', JointComponentElement);
+
 /**
  * The LayoutChildComponentElement interface provides properties and methods for manipulating
  * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-layoutchild/ | `<pc-layoutchild>`} elements.
@@ -11295,13 +12203,7 @@ class NodeElement extends EntityBaseElement {
         if (!app) {
             return;
         }
-        const childEntities = this.querySelectorAll('pc-entity');
-        childEntities.forEach((child) => {
-            child._createEntity(app);
-        });
-        childEntities.forEach((child) => {
-            child._buildHierarchy(app);
-        });
+        buildDescendantEntities(this, app);
     }
     /**
      * Applies every override that is explicitly set, capturing the authored value it displaces.
@@ -12288,6 +13190,7 @@ exports.ElementComponentElement = ElementComponentElement;
 exports.EntityBaseElement = EntityBaseElement;
 exports.EntityElement = EntityElement;
 exports.GSplatComponentElement = GSplatComponentElement;
+exports.JointComponentElement = JointComponentElement;
 exports.LayoutChildComponentElement = LayoutChildComponentElement;
 exports.LayoutGroupComponentElement = LayoutGroupComponentElement;
 exports.LightComponentElement = LightComponentElement;