@playcanvas/web-components 0.13.0 → 0.14.0

package/src/loading-bar.ts

@@ -8,8 +8,9 @@ const REMOVAL_DELAY_MS = 250;
  * All styling is inline, so the library injects no stylesheet. The colors and height resolve CSS
  * custom properties — `--pc-loading-bar-color`, `--pc-loading-bar-background` and
  * `--pc-loading-bar-height` — so a page can theme the bar from `pc-app` or `:root`.
+ * @internal
  */
-class LoadingBar {
+export class LoadingBar {
     private _track: HTMLDivElement;
 
     private _fill: HTMLDivElement;
@@ -118,5 +119,3 @@ class LoadingBar {
         this._track.remove();
     }
 }
-
-export { LoadingBar };

package/src/material.ts

@@ -26,7 +26,7 @@ import {
 import type { EventHandle, Texture } from 'playcanvas';
 
 import type { AppElement } from './app';
-import { AssetElement } from './asset';
+import { useAsset } from './asset';
 import { parseBool, parseColor, parseEnum, parseNumber, parseVec2 } from './parse';
 
 type BlendType =
@@ -251,6 +251,8 @@ class MaterialElement extends HTMLElement {
 
     private _metalnessMapUv = 0;
 
+    private _name = 'Untitled';
+
     private _normalMap = '';
 
     private _normalMapOffset = new Vec2(0, 0);
@@ -402,6 +404,7 @@ class MaterialElement extends HTMLElement {
         material.metalnessMapRotation = this._metalnessMapRotation;
         material.metalnessMapTiling = this._metalnessMapTiling;
         material.metalnessMapUv = this._metalnessMapUv;
+        material.name = this._name;
         material.normalMapOffset = this._normalMapOffset;
         material.normalMapRotation = this._normalMapRotation;
         material.normalMapTiling = this._normalMapTiling;
@@ -523,7 +526,7 @@ class MaterialElement extends HTMLElement {
             return;
         }
 
-        const asset = AssetElement.get(id);
+        const asset = useAsset(id);
         if (!asset) return;
 
         if (asset.loaded) {
@@ -1615,6 +1618,28 @@ class MaterialElement extends HTMLElement {
         return this._metalnessMapUv;
     }
 
+    /**
+     * Sets the name of the material.
+     * @param value - The material name.
+     */
+    set name(value: string) {
+        this._name = value;
+        if (this.material) {
+            // A label rather than shader state, so no update() is scheduled
+            this.material.name = value;
+        }
+    }
+
+    /**
+     * Gets the name of the material - the label shown wherever materials surface by name, such
+     * as profilers, GPU captures and the assignments `pc-model.hierarchy()` reports. Purely a
+     * label: element references resolve through `id`.
+     * @returns The material name.
+     */
+    get name() {
+        return this._name;
+    }
+
     /**
      * Sets the id of the `pc-asset` to use as the normal map.
      * @param value - The asset id.
@@ -2243,6 +2268,7 @@ class MaterialElement extends HTMLElement {
             'metalness-map-rotation',
             'metalness-map-tiling',
             'metalness-map-uv',
+            'name',
             'normal-map',
             'normal-map-offset',
             'normal-map-rotation',
@@ -2444,6 +2470,9 @@ class MaterialElement extends HTMLElement {
             case 'metalness-map-uv':
                 this.metalnessMapUv = parseNumber(newValue, 0, name);
                 break;
+            case 'name':
+                this.name = newValue ?? 'Untitled';
+                break;
             case 'normal-map':
                 this.normalMap = newValue ?? '';
                 break;

package/src/model.ts

@@ -1,8 +1,103 @@
 import type { ContainerResource, Entity, EventHandle } from 'playcanvas';
 
-import { AssetElement } from './asset';
+import { useAsset } from './asset';
 import { AsyncElement } from './async-element';
 
+/**
+ * One material assignment of a {@link HierarchyNode} with a render component: a mesh instance's
+ * position within the component and the runtime name of its current material.
+ */
+type HierarchyMaterial = {
+    /** The mesh instance's position in the render component's `meshInstances` array. */
+    index: number;
+    /**
+     * The runtime name of the mesh instance's current material, reported as-is: the engine
+     * names an unnamed glTF material `Untitled`, and assigns a shared material named
+     * `defaultGlbMaterial` to a primitive authored without one — neither is a unique authored
+     * identifier. `null` when a script has cleared the assignment.
+     */
+    name: string | null;
+};
+
+/**
+ * One node of the tree returned by {@link ModelElement.hierarchy}. A plain-data snapshot —
+ * `JSON.stringify` serializes it — whose `toString()` renders the node's subtree as a printable
+ * tree.
+ */
+type HierarchyNode = {
+    /**
+     * The node's name as instantiated, which is the name `pc-node` binding resolves: the engine
+     * parser synthesizes `node_<index>` names for unnamed nodes and renames identically named
+     * siblings apart (`Wheel`, `Wheel1`, ...), so it can differ from the name authored in the
+     * source asset.
+     */
+    name: string;
+    /**
+     * The node's `/`-separated path below the model root — the path a `pc-node` bound to this
+     * node reports. The root's path is its own name.
+     */
+    path: string;
+    /**
+     * The node's position among identically named nodes in the model, counted in depth-first
+     * order over the whole tree: the match a `pc-node`'s `index` attribute selects when `name`
+     * alone is ambiguous.
+     */
+    index: number;
+    /** The types of the components attached to the node (e.g. 'render'), sorted. */
+    components: string[];
+    /**
+     * The material assignments of the node's render component, one entry per mesh instance in
+     * component order. Empty for a node without a render component.
+     */
+    materials: HierarchyMaterial[];
+    /** The node's children. */
+    children: HierarchyNode[];
+    /**
+     * Renders the subtree rooted at this node as a printable tree, one line per node: the name,
+     * `[index]` after a name that several nodes in the model share, the component types in
+     * parentheses, and the material names of a render component in braces.
+     */
+    toString(): string;
+};
+
+/**
+ * Formats one line of the printable hierarchy: the node's name, an `[index]` marker when the
+ * name is shared by several nodes in the model, the attached component types, and the material
+ * names of a render component.
+ *
+ * @param node - The node to format.
+ * @param counts - The number of nodes bearing each name.
+ * @returns The formatted line.
+ */
+const formatNode = (node: HierarchyNode, counts: ReadonlyMap<string, number>): string => {
+    const index = (counts.get(node.name) ?? 0) > 1 ? ` [${node.index}]` : '';
+    const components = node.components.length > 0 ? ` (${node.components.join(', ')})` : '';
+    // Braces rather than brackets: `[N]` already means a match index on this line
+    const materials =
+        node.materials.length > 0 ? ` {${node.materials.map((slot) => slot.name ?? 'null').join(', ')}}` : '';
+    return `${node.name}${index}${components}${materials}`;
+};
+
+/**
+ * Formats the printable form of a hierarchy subtree.
+ *
+ * @param root - The subtree root.
+ * @param counts - The number of nodes bearing each name.
+ * @returns The tree, one line per node.
+ */
+const formatHierarchy = (root: HierarchyNode, counts: ReadonlyMap<string, number>): string => {
+    const lines = [formatNode(root, counts)];
+    const walk = (node: HierarchyNode, prefix: string) => {
+        node.children.forEach((child, i) => {
+            const last = i === node.children.length - 1;
+            lines.push(`${prefix}${last ? '└─ ' : '├─ '}${formatNode(child, counts)}`);
+            walk(child, `${prefix}${last ? '   ' : '│  '}`);
+        });
+    };
+    walk(root, '');
+    return lines.join('\n');
+};
+
 /**
  * The ModelElement interface provides properties and methods for manipulating
  * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-model/ | `<pc-model>`} elements.
@@ -55,6 +150,66 @@ class ModelElement extends AsyncElement {
         return this._entity;
     }
 
+    /**
+     * Returns a snapshot of the instantiated node tree, or `null` while there is none (the
+     * container asset has not loaded, or the element has left the document). One call grounds a
+     * session — a browser console, a test, an agent — in the vocabulary `pc-node` binding
+     * resolves against: the instantiated names ({@link HierarchyNode.name}), paths, match
+     * indices, attached component types and the material assignments of render components
+     * ({@link HierarchyNode.materials}). `String(...)` of the result, or of any node in it,
+     * is the printable form.
+     *
+     * The snapshot is plain data, computed afresh each call: it does not follow later changes
+     * to the hierarchy, and mutating it changes nothing.
+     *
+     * @returns The root of the instantiated node tree, or `null`.
+     */
+    hierarchy(): HierarchyNode | null {
+        const root = this._entity;
+        if (!root) {
+            return null;
+        }
+
+        // Ordinals are assigned in the traversal resolution searches — pre-order depth-first
+        // from the model root, the root itself included — so each node's index is exactly what
+        // a pc-node's index attribute selects. Once the walk completes, the map holds the total
+        // count per name, which is what the printable form reads to annotate only shared names.
+        const ordinals = new Map<string, number>();
+
+        const describe = (entity: Entity, pathBelowRoot: string): HierarchyNode => {
+            const index = ordinals.get(entity.name) ?? 0;
+            ordinals.set(entity.name, index + 1);
+
+            const node: HierarchyNode = {
+                name: entity.name,
+                // The root has no path below itself; its own name stands in, as it does for
+                // the path a pc-node bound to the root reports.
+                path: pathBelowRoot || entity.name,
+                index,
+                // A plain GraphNode grafted into the hierarchy has no component storage
+                components: Object.keys(entity.c ?? {}).sort(),
+                materials: (entity.render?.meshInstances ?? []).map((meshInstance, slot) => ({
+                    index: slot,
+                    name: meshInstance.material?.name ?? null
+                })),
+                children: entity.children.map((child) =>
+                    describe(child as Entity, pathBelowRoot ? `${pathBelowRoot}/${child.name}` : child.name)
+                )
+            };
+
+            // Non-enumerable, keeping the snapshot plain data under JSON.stringify, spreads and
+            // key enumeration. Deferred to call time, by which the ordinal map holds its totals.
+            Object.defineProperty(node, 'toString', {
+                enumerable: false,
+                value: () => formatHierarchy(node, ordinals)
+            });
+
+            return node;
+        };
+
+        return describe(root, '');
+    }
+
     connectedCallback() {
         // A model outside an application is inert and never becomes ready, so awaiting it hangs.
         // Warn rather than fail silently, naming the parent it requires, as every other misplaced
@@ -154,9 +309,7 @@ class ModelElement extends AsyncElement {
             return;
         }
 
-        const app = appElement.app;
-
-        const asset = AssetElement.get(this._asset);
+        const asset = useAsset(this._asset);
         if (!asset) {
             // An empty id is a legitimate transient (the asset may be assigned later); a
             // non-empty one that resolves to nothing is a dead end - say so rather than staying
@@ -194,7 +347,6 @@ class ModelElement extends AsyncElement {
                 );
                 this._onReady();
             });
-            app!.assets.load(asset);
         }
     }
 
@@ -238,3 +390,4 @@ class ModelElement extends AsyncElement {
 customElements.define('pc-model', ModelElement);
 
 export { ModelElement };
+export type { HierarchyMaterial, HierarchyNode };

package/src/node.ts

@@ -1,9 +1,10 @@
-import type { Entity, EventHandle, GraphNode, Quat } from 'playcanvas';
+import type { Entity, EventHandle, GraphNode, Material, MeshInstance, Quat, RenderComponent } from 'playcanvas';
 import { Vec3 } from 'playcanvas';
 
 import { ComponentElement } from './components/component';
 import type { EntityElement } from './entity';
 import { EntityBaseElement, POINTER_ATTRIBUTES } from './entity-base';
+import { MaterialElement } from './material';
 import { ModelElement } from './model';
 import { parseBool, parseTags, parseVec3 } from './parse';
 
@@ -27,6 +28,95 @@ type AuthoredState = {
     tags?: string[];
 };
 
+/**
+ * A sparse mapping from selector to `pc-material` id, as carried by the `material-overrides`
+ * attribute and `materialOverrides` property. A `name:X` key selects every mesh instance of the
+ * bound node's render component whose baseline material is named `X`; an `index:N` key selects
+ * mesh instance `N` and wins over a name rule for the same instance.
+ */
+type MaterialOverrides = Readonly<Record<string, string>>;
+
+/**
+ * One baseline assignment, captured for every mesh instance of the authored render component
+ * when the first material override applies: the mesh instance, the material it displaced, and
+ * that material's name at capture time — the name `name:` selectors match, immune to later
+ * renames. `material` is `null` when a script had already cleared the assignment.
+ */
+type BaselineAssignment = {
+    meshInstance: MeshInstance;
+    material: Material | null;
+    name: string | null;
+};
+
+/** One selector of a material-overrides mapping, in parsed form. */
+type MaterialRule = { kind: 'name'; name: string; id: string } | { kind: 'index'; index: number; id: string };
+
+/**
+ * Parses one mapping into its valid rules, warning for each entry that is not one: an unknown
+ * or missing selector prefix, an empty `name:` value, an `index:` value that is not a
+ * non-negative integer, or a replacement id that is not a non-empty string. An invalid rule
+ * behaves exactly as if absent from the mapping.
+ *
+ * @param overrides - The mapping to parse.
+ * @param label - The element description for warnings.
+ * @returns The valid rules.
+ */
+const parseMaterialRules = (overrides: MaterialOverrides, label: string): MaterialRule[] => {
+    const rules: MaterialRule[] = [];
+    for (const [selector, id] of Object.entries(overrides)) {
+        if (typeof id !== 'string' || id === '') {
+            console.warn(`${label} material-overrides '${selector}' needs a pc-material id - rule ignored`);
+        } else if (selector.startsWith('name:')) {
+            // The text after the prefix is the selector value, exactly as written - a material
+            // name may legitimately begin or end with whitespace
+            const name = selector.slice('name:'.length);
+            if (name === '') {
+                console.warn(`${label} material-overrides 'name:' selector is empty - rule ignored`);
+            } else {
+                rules.push({ kind: 'name', name, id });
+            }
+        } else if (selector.startsWith('index:')) {
+            // Whitespace around the number is tolerated; Number('') is 0, so blank means NaN
+            const text = selector.slice('index:'.length).trim();
+            const index = text === '' ? NaN : Number(text);
+            if (!Number.isInteger(index) || index < 0) {
+                console.warn(
+                    `${label} material-overrides '${selector}' is not a non-negative integer index - rule ignored`
+                );
+            } else {
+                rules.push({ kind: 'index', index, id });
+            }
+        } else {
+            console.warn(`${label} material-overrides '${selector}' has no 'name:' or 'index:' prefix - rule ignored`);
+        }
+    }
+    return rules;
+};
+
+/**
+ * Parses the material-overrides attribute text. Anything but a JSON object — malformed JSON, an
+ * array, a primitive — warns and yields `null`, the absent mapping: a stale mapping must not
+ * survive an attribute value the DOM no longer represents.
+ *
+ * @param text - The attribute text.
+ * @param label - The element description for warnings.
+ * @returns The mapping, or `null`.
+ */
+const parseMaterialOverridesAttribute = (text: string, label: string): MaterialOverrides | null => {
+    let parsed: unknown;
+    try {
+        parsed = JSON.parse(text);
+    } catch (error) {
+        console.warn(`${label} material-overrides is not valid JSON - treated as absent: ${(error as Error).message}`);
+        return null;
+    }
+    if (parsed === null || typeof parsed !== 'object' || Array.isArray(parsed)) {
+        console.warn(`${label} material-overrides must be a JSON object - treated as absent`);
+        return null;
+    }
+    return parsed as MaterialOverrides;
+};
+
 /**
  * Computes the Levenshtein distance between two strings, for near-miss suggestions in the
  * resolution warnings.
@@ -83,6 +173,13 @@ const levenshtein = (a: string, b: string): number => {
  * "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} material-overrides - Overrides material assignments on the bound node's
+ * render component, as a JSON object from selector to `pc-material` id — for example
+ * `{"name:CarPaint": "candy-red", "index:7": "smoked-glass"}`. A `name:X` key selects every mesh
+ * instance whose baseline material is named `X`; an `index:N` key selects mesh instance `N` and
+ * wins over a name rule for the same instance. Assignments no rule matches keep their baseline
+ * materials, and removing the attribute restores all of them. Use `pc-model.hierarchy()` to
+ * discover the names and indices a node offers.
  * @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.
@@ -126,6 +223,20 @@ class NodeElement extends EntityBaseElement {
     /** The authored values displaced by this element's overrides, captured per property. */
     private _authored: AuthoredState = {};
 
+    /**
+     * The model-authored render component of the bound node, recorded at bind — before child
+     * decorations build — so a render component added later by a child `pc-render` can never
+     * become the override target. `null` when the bound node has none.
+     */
+    private _authoredRender: RenderComponent | null = null;
+
+    /**
+     * The baseline assignments displaced by the material overrides, captured for every mesh
+     * instance when the first non-empty mapping applies and released when the mapping goes
+     * absent (restoring them) or the binding dissolves.
+     */
+    private _baseline: BaselineAssignment[] | null = null;
+
     // Override values. `null` means "no override": the authored value stays in force.
 
     private _enabled: boolean | null = null;
@@ -138,6 +249,8 @@ class NodeElement extends EntityBaseElement {
 
     private _tags: string[] | null = null;
 
+    private _materialOverrides: MaterialOverrides | null = null;
+
     /**
      * The binding state: `pending` until the host instantiates and `name` resolves, `bound`
      * once decorated, `missing`/`ambiguous`/`duplicate` when resolution failed (each also
@@ -298,6 +411,7 @@ class NodeElement extends EntityBaseElement {
         this._destroyHandle = target.once('destroy', this._onEntityDestroy, this);
         this._state = 'bound';
         this._path = this._pathOf(target, hostEntity);
+        this._authoredRender = target.render ?? null;
 
         this._applyOverrides();
         this._onReady();
@@ -333,6 +447,7 @@ class NodeElement extends EntityBaseElement {
         this._entity = null;
         this._path = null;
         this._authored = {};
+        this._authoredRender = null;
 
         // 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
@@ -357,6 +472,9 @@ class NodeElement extends EntityBaseElement {
         this._entity = null;
         this._path = null;
         this._authored = {};
+        this._authoredRender = null;
+        // The mesh instances died with the entity - the capture is dropped, not restored
+        this._baseline = null;
         this._state = 'pending';
         this._resetReady();
     }
@@ -400,6 +518,9 @@ class NodeElement extends EntityBaseElement {
         if (this._tags !== null) {
             this.tags = this._tags;
         }
+        if (this._materialOverrides !== null) {
+            this._applyMaterialOverrides();
+        }
     }
 
     /**
@@ -426,6 +547,120 @@ class NodeElement extends EntityBaseElement {
             entity.tags.add(authored.tags);
         }
         this._authored = {};
+        this._restoreBaseline();
+    }
+
+    /**
+     * Applies the material mapping to the authored render component: parse the mapping's valid
+     * rules, capture the baseline on first application, then recompute every assignment from
+     * that baseline - name rules write over it, index rules write over them, so `index:` wins -
+     * and assign whatever changed. An absent mapping, or one with no valid rules, restores the
+     * baseline instead. Called while bound, from `_applyOverrides` and the property setter.
+     */
+    private _applyMaterialOverrides() {
+        const label = `pc-node '${this._name}'`;
+
+        const rules = this._materialOverrides ? parseMaterialRules(this._materialOverrides, label) : [];
+        if (rules.length === 0) {
+            this._restoreBaseline();
+            return;
+        }
+
+        if (!this._baseline) {
+            if (!this._authoredRender) {
+                console.warn(
+                    `${label} is bound to a node without an authored render component - material-overrides ignored`
+                );
+                return;
+            }
+            this._baseline = this._authoredRender.meshInstances.map((meshInstance) => ({
+                meshInstance,
+                material: (meshInstance.material as Material | null) ?? null,
+                name: meshInstance.material?.name ?? null
+            }));
+        }
+
+        const baseline = this._baseline;
+
+        /** Resolves a replacement id, warning when it does not resolve. */
+        const resolveReplacement = (id: string): Material | null => {
+            const material = MaterialElement.get(id);
+            if (!material) {
+                console.warn(`${label} material-overrides could not resolve pc-material '${id}' - rule ignored`);
+            }
+            return material ?? null;
+        };
+
+        // Recompute the whole list from the baseline: name rules write over it, index rules
+        // write over them. Recomputing makes mapping edits order-independent, and a rule whose
+        // replacement does not resolve simply leaves the layer below it in force.
+        const resolved = baseline.map((assignment) => assignment.material);
+
+        for (const rule of rules) {
+            if (rule.kind !== 'name') {
+                continue;
+            }
+            const material = resolveReplacement(rule.id);
+            if (!material) {
+                continue;
+            }
+            let matched = false;
+            baseline.forEach((assignment, index) => {
+                if (assignment.name === rule.name) {
+                    resolved[index] = material;
+                    matched = true;
+                }
+            });
+            if (!matched) {
+                const names = baseline.map((assignment) => `'${assignment.name}'`).join(', ');
+                console.warn(
+                    `${label} material-overrides 'name:${rule.name}' matches no assignment - ` +
+                        `baseline names: ${names || '(none)'}`
+                );
+            }
+        }
+
+        for (const rule of rules) {
+            if (rule.kind !== 'index') {
+                continue;
+            }
+            if (rule.index >= baseline.length) {
+                console.warn(
+                    `${label} material-overrides 'index:${rule.index}' is out of range - ` +
+                        `${baseline.length} assignment(s)`
+                );
+                continue;
+            }
+            const material = resolveReplacement(rule.id);
+            if (material) {
+                resolved[rule.index] = material;
+            }
+        }
+
+        baseline.forEach((assignment, index) => {
+            // The engine setter rebuilds material and shader state even for a redundant write,
+            // so only actual changes are assigned
+            if (assignment.meshInstance.material !== resolved[index]) {
+                assignment.meshInstance.material = resolved[index] as Material;
+            }
+        });
+    }
+
+    /**
+     * Restores every baseline assignment the material overrides displaced and releases the
+     * capture, so the next non-empty mapping captures afresh. Safe to call without a capture.
+     */
+    private _restoreBaseline() {
+        const baseline = this._baseline;
+        if (!baseline) {
+            return;
+        }
+        this._baseline = null;
+        for (const assignment of baseline) {
+            if (assignment.meshInstance.material !== assignment.material) {
+                assignment.meshInstance.material = assignment.material as Material;
+            }
+        }
     }
 
     /**
@@ -659,8 +894,43 @@ class NodeElement extends EntityBaseElement {
         return this._tags;
     }
 
+    /**
+     * Sets the material overrides: a sparse mapping from selector to `pc-material` id, applied
+     * to the bound node's authored render component. A `name:X` key selects every mesh instance
+     * whose baseline material is named `X`; an `index:N` key selects mesh instance `N` and wins
+     * over a name rule for the same instance. Assignments no rule matches keep their baseline
+     * materials. `null` clears the mapping, restoring every baseline assignment.
+     * @param value - The mapping, or `null`.
+     */
+    set materialOverrides(value: MaterialOverrides | null) {
+        // Copied and frozen: later caller mutation of the passed object must not silently
+        // disagree with the mapping the element applied
+        this._materialOverrides = value === null ? null : Object.freeze({ ...value });
+        if (this._state === 'bound') {
+            this._applyMaterialOverrides();
+        }
+    }
+
+    /**
+     * Gets the material overrides.
+     * @returns The mapping, or `null` while no override is set.
+     */
+    get materialOverrides(): MaterialOverrides | null {
+        return this._materialOverrides;
+    }
+
     static get observedAttributes() {
-        return ['enabled', 'index', 'name', 'position', 'rotation', 'scale', 'tags', ...POINTER_ATTRIBUTES];
+        return [
+            'enabled',
+            'index',
+            'material-overrides',
+            'name',
+            'position',
+            'rotation',
+            'scale',
+            'tags',
+            ...POINTER_ATTRIBUTES
+        ];
     }
 
     attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null) {
@@ -684,6 +954,10 @@ class NodeElement extends EntityBaseElement {
                     }
                 }
                 break;
+            case 'material-overrides':
+                this.materialOverrides =
+                    newValue === null ? null : parseMaterialOverridesAttribute(newValue, `pc-node '${this._name}'`);
+                break;
             case 'name':
                 this.name = newValue ?? '';
                 break;
@@ -713,3 +987,4 @@ class NodeElement extends EntityBaseElement {
 customElements.define('pc-node', NodeElement);
 
 export { NodeElement };
+export type { MaterialOverrides };