@playcanvas/web-components 0.16.0 → 0.18.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (126) hide show
  1. package/README.md +5 -3
  2. package/dist/app.d.cts +18 -13
  3. package/dist/app.d.ts +18 -13
  4. package/dist/asset.d.cts +13 -3
  5. package/dist/asset.d.ts +13 -3
  6. package/dist/async-element.d.cts +13 -13
  7. package/dist/async-element.d.ts +13 -13
  8. package/dist/components/anim-clip.d.cts +4 -0
  9. package/dist/components/anim-clip.d.ts +4 -0
  10. package/dist/components/anim-component.d.cts +38 -5
  11. package/dist/components/anim-component.d.ts +38 -5
  12. package/dist/components/audio-listener-component.d.cts +26 -0
  13. package/dist/components/audio-listener-component.d.ts +26 -0
  14. package/dist/components/button-component.d.cts +10 -1
  15. package/dist/components/button-component.d.ts +10 -1
  16. package/dist/components/camera-component.d.cts +37 -1
  17. package/dist/components/camera-component.d.ts +37 -1
  18. package/dist/components/collision-component.d.cts +9 -1
  19. package/dist/components/collision-component.d.ts +9 -1
  20. package/dist/components/component.d.cts +3 -2
  21. package/dist/components/component.d.ts +3 -2
  22. package/dist/components/element-component.d.cts +11 -0
  23. package/dist/components/element-component.d.ts +11 -0
  24. package/dist/components/gsplat-component.d.cts +6 -0
  25. package/dist/components/gsplat-component.d.ts +6 -0
  26. package/dist/components/joint-component.d.cts +14 -2
  27. package/dist/components/joint-component.d.ts +14 -2
  28. package/dist/components/{layoutchild-component.d.cts → layout-child-component.d.cts} +7 -1
  29. package/dist/components/{layoutchild-component.d.ts → layout-child-component.d.ts} +7 -1
  30. package/dist/components/{layoutgroup-component.d.cts → layout-group-component.d.cts} +7 -1
  31. package/dist/components/{layoutgroup-component.d.ts → layout-group-component.d.ts} +7 -1
  32. package/dist/components/light-component.d.cts +52 -1
  33. package/dist/components/light-component.d.ts +52 -1
  34. package/dist/components/{particlesystem-component.d.cts → particle-system-component.d.cts} +7 -1
  35. package/dist/components/{particlesystem-component.d.ts → particle-system-component.d.ts} +7 -1
  36. package/dist/components/render-component.d.cts +7 -0
  37. package/dist/components/render-component.d.ts +7 -0
  38. package/dist/components/{rigidbody-component.d.cts → rigid-body-component.d.cts} +8 -1
  39. package/dist/components/{rigidbody-component.d.ts → rigid-body-component.d.ts} +8 -1
  40. package/dist/components/screen-component.d.cts +6 -0
  41. package/dist/components/screen-component.d.ts +6 -0
  42. package/dist/components/script-component.d.cts +26 -12
  43. package/dist/components/script-component.d.ts +26 -12
  44. package/dist/components/{script.d.cts → script-instance.d.cts} +11 -7
  45. package/dist/components/{script.d.ts → script-instance.d.ts} +11 -7
  46. package/dist/components/{scrollview-component.d.cts → scroll-view-component.d.cts} +7 -1
  47. package/dist/components/{scrollview-component.d.ts → scroll-view-component.d.ts} +7 -1
  48. package/dist/components/scrollbar-component.d.cts +6 -0
  49. package/dist/components/scrollbar-component.d.ts +6 -0
  50. package/dist/components/sound-component.d.cts +7 -1
  51. package/dist/components/sound-component.d.ts +7 -1
  52. package/dist/components/sound-slot.d.cts +5 -2
  53. package/dist/components/sound-slot.d.ts +5 -2
  54. package/dist/custom-elements.json +1852 -974
  55. package/dist/entity-base.d.cts +7 -6
  56. package/dist/entity-base.d.ts +7 -6
  57. package/dist/entity-owner.d.cts +118 -0
  58. package/dist/entity-owner.d.ts +118 -0
  59. package/dist/entity.d.cts +14 -102
  60. package/dist/entity.d.ts +14 -102
  61. package/dist/index.d.cts +26 -22
  62. package/dist/index.d.ts +26 -22
  63. package/dist/material.d.cts +18 -7
  64. package/dist/material.d.ts +18 -7
  65. package/dist/model.d.cts +72 -24
  66. package/dist/model.d.ts +72 -24
  67. package/dist/node.d.cts +6 -1
  68. package/dist/node.d.ts +6 -1
  69. package/dist/pwc.cjs +807 -293
  70. package/dist/pwc.cjs.map +1 -1
  71. package/dist/pwc.js +807 -293
  72. package/dist/pwc.js.map +1 -1
  73. package/dist/pwc.min.js +1 -1
  74. package/dist/pwc.min.js.map +1 -1
  75. package/dist/pwc.min.mjs +1 -1
  76. package/dist/pwc.min.mjs.map +1 -1
  77. package/dist/pwc.mjs +805 -292
  78. package/dist/pwc.mjs.map +1 -1
  79. package/dist/scene.d.cts +3 -0
  80. package/dist/scene.d.ts +3 -0
  81. package/dist/sky.d.cts +4 -0
  82. package/dist/sky.d.ts +4 -0
  83. package/dist/vscode.html-custom-data.json +351 -121
  84. package/dist/{module.d.cts → wasm.d.cts} +10 -6
  85. package/dist/{module.d.ts → wasm.d.ts} +10 -6
  86. package/dist/web-types.json +465 -291
  87. package/package.json +7 -7
  88. package/src/app.ts +49 -35
  89. package/src/asset.ts +13 -4
  90. package/src/async-element.ts +14 -14
  91. package/src/components/anim-clip.ts +4 -0
  92. package/src/components/anim-component.ts +89 -14
  93. package/src/components/audio-listener-component.ts +36 -0
  94. package/src/components/button-component.ts +10 -1
  95. package/src/components/camera-component.ts +65 -6
  96. package/src/components/collision-component.ts +9 -1
  97. package/src/components/component.ts +4 -3
  98. package/src/components/element-component.ts +11 -0
  99. package/src/components/gsplat-component.ts +6 -0
  100. package/src/components/joint-component.ts +14 -2
  101. package/src/components/{layoutchild-component.ts → layout-child-component.ts} +8 -2
  102. package/src/components/{layoutgroup-component.ts → layout-group-component.ts} +8 -2
  103. package/src/components/light-component.ts +110 -17
  104. package/src/components/{particlesystem-component.ts → particle-system-component.ts} +8 -2
  105. package/src/components/render-component.ts +7 -0
  106. package/src/components/{rigidbody-component.ts → rigid-body-component.ts} +9 -2
  107. package/src/components/screen-component.ts +6 -0
  108. package/src/components/script-component.ts +66 -42
  109. package/src/components/{script.ts → script-instance.ts} +18 -14
  110. package/src/components/{scrollview-component.ts → scroll-view-component.ts} +8 -2
  111. package/src/components/scrollbar-component.ts +6 -0
  112. package/src/components/sound-component.ts +8 -2
  113. package/src/components/sound-slot.ts +7 -4
  114. package/src/entity-base.ts +8 -7
  115. package/src/entity-owner.ts +298 -0
  116. package/src/entity.ts +21 -271
  117. package/src/index.ts +38 -25
  118. package/src/material.ts +19 -8
  119. package/src/model.ts +164 -72
  120. package/src/node.ts +15 -6
  121. package/src/scene.ts +3 -0
  122. package/src/sky.ts +4 -0
  123. package/src/{module.ts → wasm.ts} +12 -8
  124. package/dist/components/listener-component.d.cts +0 -20
  125. package/dist/components/listener-component.d.ts +0 -20
  126. package/src/components/listener-component.ts +0 -30
@@ -15,14 +15,14 @@ import {
15
15
  } from '../parse';
16
16
 
17
17
  import { ComponentElement } from './component';
18
- import { ScriptElement } from './script';
18
+ import { ScriptInstanceElement } from './script-instance';
19
19
 
20
20
  /**
21
- * Attributes on `pc-script` that never map to script attributes: the element's own API (derived
21
+ * Attributes on `pc-script-instance` that never map to script attributes: the element's own API (derived
22
22
  * from its observed attributes) plus reserved and global HTML attribute names.
23
23
  */
24
24
  const RESERVED_ATTRIBUTES = new Set([
25
- ...ScriptElement.observedAttributes,
25
+ ...ScriptInstanceElement.observedAttributes,
26
26
  'accesskey',
27
27
  'autocapitalize',
28
28
  'autofocus',
@@ -54,7 +54,7 @@ const RESERVED_ATTRIBUTES = new Set([
54
54
  ]);
55
55
 
56
56
  /**
57
- * Checks whether a `pc-script` attribute name is reserved (and so never maps to a script
57
+ * Checks whether a `pc-script-instance` attribute name is reserved (and so never maps to a script
58
58
  * attribute). Reserved names are the element's own API, global HTML attribute names, `data-*`
59
59
  * and `aria-*` attributes, names starting with `_` (framework-stamped attributes), and real
60
60
  * inline event handler names (`onclick` etc. — detected via the platform, so script attributes
@@ -244,10 +244,15 @@ export type ScriptNameChangeEvent = {
244
244
 
245
245
  /**
246
246
  * The ScriptComponentElement interface provides properties and methods for manipulating
247
- * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-scripts/ | `<pc-scripts>`} elements.
247
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-script/ | `<pc-script>`} elements.
248
248
  * The ScriptComponentElement interface also inherits the properties and methods of the
249
249
  * {@link HTMLElement} interface.
250
250
  *
251
+ * Engine component: {@link ScriptComponent} (`script`).
252
+ *
253
+ * @elementSummary The `<pc-script>` element holds the `<pc-script-instance>` children that attach
254
+ * scripts to its entity. Must be a child of a `<pc-entity>`, `<pc-model>` or `<pc-node>`.
255
+ *
251
256
  * @category Components
252
257
  */
253
258
  class ScriptComponentElement extends ComponentElement {
@@ -268,15 +273,24 @@ class ScriptComponentElement extends ComponentElement {
268
273
 
269
274
  connectedCallback() {
270
275
  // (Re-)observe on every connection - disconnectedCallback disconnects the observer.
271
- // Attribute changes on child pc-script elements are watched here too: per-property
276
+ // Attribute changes on child pc-script-instance elements are watched here too: per-property
272
277
  // script attributes are not statically known, so they cannot use observedAttributes.
273
278
  this.observer.observe(this, { childList: true, subtree: true, attributes: true });
274
279
  return super.connectedCallback();
275
280
  }
276
281
 
277
282
  protected initComponent() {
278
- // Handle initial script elements
279
- this.querySelectorAll<ScriptElement>(':scope > pc-script').forEach((scriptElement) => {
283
+ this.querySelectorAll<ScriptInstanceElement>(':scope > pc-script-instance').forEach((scriptElement) => {
284
+ // A host readiness cycle re-runs this against a component that can have survived it
285
+ // (a pc-model reloading content on its stable host entity). The engine rejects a
286
+ // duplicate create - returning null, silently in production builds - which would
287
+ // skip attribute application entirely. A surviving instance is re-asserted instead,
288
+ // so both cycle outcomes leave the component reflecting the element's declared state.
289
+ const script = this.scriptFor(scriptElement);
290
+ if (script) {
291
+ this.applyDeclaredState(script, scriptElement);
292
+ return;
293
+ }
280
294
  this.createScript(scriptElement);
281
295
  });
282
296
  }
@@ -424,12 +438,12 @@ class ScriptComponentElement extends ComponentElement {
424
438
  }
425
439
 
426
440
  /**
427
- * Returns the camelCase keys of the per-property attributes present on a `pc-script`
441
+ * Returns the camelCase keys of the per-property attributes present on a `pc-script-instance`
428
442
  * element.
429
- * @param scriptElement - The `pc-script` element.
443
+ * @param scriptElement - The `pc-script-instance` element.
430
444
  * @returns The camelCase keys.
431
445
  */
432
- private inlineKeys(scriptElement: ScriptElement): Set<string> {
446
+ private inlineKeys(scriptElement: ScriptInstanceElement): Set<string> {
433
447
  const keys = new Set<string>();
434
448
  for (const attr of Array.from(scriptElement.attributes)) {
435
449
  if (!isReservedAttribute(attr.name)) {
@@ -440,13 +454,13 @@ class ScriptComponentElement extends ComponentElement {
440
454
  }
441
455
 
442
456
  /**
443
- * Resolves the script instance owned by a `pc-script` element. Returns `null` when the
457
+ * Resolves the script instance owned by a `pc-script-instance` element. Returns `null` when the
444
458
  * element has no created script, or when its name resolves to a script created by a
445
459
  * different element (e.g. a duplicate-named sibling).
446
- * @param scriptElement - The `pc-script` element.
460
+ * @param scriptElement - The `pc-script-instance` element.
447
461
  * @returns The owned script, or `null`.
448
462
  */
449
- private scriptFor(scriptElement: ScriptElement): Script | null {
463
+ private scriptFor(scriptElement: ScriptInstanceElement): Script | null {
450
464
  const name = scriptElement.getAttribute('name');
451
465
  if (!name || !this.component) return null;
452
466
 
@@ -455,7 +469,7 @@ class ScriptComponentElement extends ComponentElement {
455
469
  }
456
470
 
457
471
  private handleScriptAttributesChange(event: ScriptAttributesChangeEvent) {
458
- const scriptElement = event.target as ScriptElement;
472
+ const scriptElement = event.target as ScriptInstanceElement;
459
473
  const script = this.scriptFor(scriptElement);
460
474
  if (script) {
461
475
  // Per-property attributes stay authoritative: keys they pin are excluded here
@@ -464,7 +478,7 @@ class ScriptComponentElement extends ComponentElement {
464
478
  }
465
479
 
466
480
  private handleScriptEnableChange(event: ScriptEnableChangeEvent) {
467
- const scriptElement = event.target as ScriptElement;
481
+ const scriptElement = event.target as ScriptInstanceElement;
468
482
 
469
483
  // Apply any queued per-property changes first, so that initialize() (fired by the
470
484
  // engine on first effective enable) sees every attribute value set this tick
@@ -477,7 +491,7 @@ class ScriptComponentElement extends ComponentElement {
477
491
  }
478
492
 
479
493
  /**
480
- * Handles a runtime `name` change on a child `pc-script`, swapping the engine script instance
494
+ * Handles a runtime `name` change on a child `pc-script-instance`, swapping the engine script instance
481
495
  * to match. Without this the element would keep pointing at the old-name instance: the old
482
496
  * script would go on running while every subsequent update (attribute changes, enable
483
497
  * changes, destruction on removal) resolved the new name and silently no-opped.
@@ -487,10 +501,10 @@ class ScriptComponentElement extends ComponentElement {
487
501
  * @param event - The name change event.
488
502
  */
489
503
  private handleScriptNameChange(event: ScriptNameChangeEvent) {
490
- const scriptElement = event.target as ScriptElement;
504
+ const scriptElement = event.target as ScriptInstanceElement;
491
505
 
492
- // Only direct children are managed, matching initComponent's ':scope > pc-script'
493
- // contract - the event bubbles, so a deeper pc-script must not be created here
506
+ // Only direct children are managed, matching initComponent's ':scope > pc-script-instance'
507
+ // contract - the event bubbles, so a deeper pc-script-instance must not be created here
494
508
  if (scriptElement.parentElement !== this) return;
495
509
 
496
510
  // Before the component exists there is nothing to swap: initComponent creates from
@@ -509,14 +523,14 @@ class ScriptComponentElement extends ComponentElement {
509
523
  }
510
524
 
511
525
  /**
512
- * Creates the script instance for a `pc-script` element. The instance is created disabled,
526
+ * Creates the script instance for a `pc-script-instance` element. The instance is created disabled,
513
527
  * the element's converted attributes are merged over the instance's defaults (which is what
514
528
  * allows plain numeric arrays to be typed against those defaults), and only then is the
515
529
  * declared enabled state applied — so `initialize()` runs with every attribute in place.
516
- * @param scriptElement - The `pc-script` element to create the script instance for.
530
+ * @param scriptElement - The `pc-script-instance` element to create the script instance for.
517
531
  * @returns The created script, or `null`.
518
532
  */
519
- private createScript(scriptElement: ScriptElement): Script | null {
533
+ private createScript(scriptElement: ScriptInstanceElement): Script | null {
520
534
  const name = scriptElement.getAttribute('name');
521
535
  if (!name || !this.component) return null;
522
536
 
@@ -525,11 +539,7 @@ class ScriptComponentElement extends ComponentElement {
525
539
 
526
540
  scriptElement._script = script;
527
541
 
528
- // The JSON blob first with per-property-shadowed keys stripped, then the per-property
529
- // attributes: each property is written exactly once and individual attributes win
530
- this.applyAttributes(script, scriptElement.scriptAttributes, this.inlineKeys(scriptElement));
531
- this.applyInlineAttributes(script, scriptElement);
532
- script.enabled = scriptElement.enabled;
542
+ this.applyDeclaredState(script, scriptElement);
533
543
 
534
544
  scriptElement._onScriptCreated();
535
545
 
@@ -537,14 +547,28 @@ class ScriptComponentElement extends ComponentElement {
537
547
  }
538
548
 
539
549
  /**
540
- * Applies the per-property attributes present on a `pc-script` element any attribute that
550
+ * Applies a `pc-script-instance` element's declared state to a script instance: the `attributes` JSON
551
+ * first with per-property-shadowed keys stripped, then the per-property attributes — each
552
+ * property is written exactly once and individual attributes win — and finally the declared
553
+ * enabled state, so `initialize()` runs with every attribute in place.
554
+ * @param script - The script instance.
555
+ * @param scriptElement - The `pc-script-instance` element holding the declared state.
556
+ */
557
+ private applyDeclaredState(script: Script, scriptElement: ScriptInstanceElement) {
558
+ this.applyAttributes(script, scriptElement.scriptAttributes, this.inlineKeys(scriptElement));
559
+ this.applyInlineAttributes(script, scriptElement);
560
+ script.enabled = scriptElement.enabled;
561
+ }
562
+
563
+ /**
564
+ * Applies the per-property attributes present on a `pc-script-instance` element — any attribute that
541
565
  * is not part of the element's own API or a reserved HTML attribute name. These are applied
542
566
  * after the `attributes` JSON, so an individual attribute always takes precedence over the
543
567
  * blob.
544
568
  * @param script - The script to apply the attributes to.
545
- * @param scriptElement - The `pc-script` element holding the attributes.
569
+ * @param scriptElement - The `pc-script-instance` element holding the attributes.
546
570
  */
547
- private applyInlineAttributes(script: any, scriptElement: ScriptElement) {
571
+ private applyInlineAttributes(script: any, scriptElement: ScriptInstanceElement) {
548
572
  const scriptName = scriptElement.getAttribute('name') ?? '';
549
573
  for (const attr of Array.from(scriptElement.attributes)) {
550
574
  if (!isReservedAttribute(attr.name)) {
@@ -554,13 +578,13 @@ class ScriptComponentElement extends ComponentElement {
554
578
  }
555
579
 
556
580
  /**
557
- * Applies a single per-property attribute change to the script of a `pc-script` element.
581
+ * Applies a single per-property attribute change to the script of a `pc-script-instance` element.
558
582
  * When the attribute has been removed, the value from the `attributes` JSON (if any) takes
559
583
  * effect again.
560
- * @param scriptElement - The `pc-script` element whose attribute changed.
584
+ * @param scriptElement - The `pc-script-instance` element whose attribute changed.
561
585
  * @param attributeName - The name of the changed attribute.
562
586
  */
563
- private applyScriptProperty(scriptElement: ScriptElement, attributeName: string) {
587
+ private applyScriptProperty(scriptElement: ScriptInstanceElement, attributeName: string) {
564
588
  const script = this.scriptFor(scriptElement);
565
589
  if (!script) return;
566
590
 
@@ -596,7 +620,7 @@ class ScriptComponentElement extends ComponentElement {
596
620
 
597
621
  if (typeof current === 'function' || SCRIPT_API_MEMBERS.has(key)) {
598
622
  console.warn(
599
- `Ignoring attribute '${attributeName}' on pc-script '${scriptName}' - '${key}' is part of the Script API.`
623
+ `Ignoring attribute '${attributeName}' on pc-script-instance '${scriptName}' - '${key}' is part of the Script API.`
600
624
  );
601
625
  return;
602
626
  }
@@ -651,11 +675,11 @@ class ScriptComponentElement extends ComponentElement {
651
675
 
652
676
  private handleMutations(mutations: MutationRecord[]) {
653
677
  for (const mutation of mutations) {
654
- // Handle per-property attribute changes on child pc-script elements
678
+ // Handle per-property attribute changes on child pc-script-instance elements
655
679
  if (mutation.type === 'attributes') {
656
680
  const target = mutation.target;
657
681
  if (
658
- target instanceof ScriptElement &&
682
+ target instanceof ScriptInstanceElement &&
659
683
  target.parentElement === this &&
660
684
  mutation.attributeName &&
661
685
  !isReservedAttribute(mutation.attributeName)
@@ -667,17 +691,17 @@ class ScriptComponentElement extends ComponentElement {
667
691
 
668
692
  // Only direct children are managed - the observer watches the subtree for attribute
669
693
  // changes, but deeper childList records must not create or destroy scripts
670
- // (matching initComponent's ':scope > pc-script' contract)
694
+ // (matching initComponent's ':scope > pc-script-instance' contract)
671
695
  if (mutation.target !== this) {
672
696
  continue;
673
697
  }
674
698
 
675
- // Handle removed nodes first, so that replacing a pc-script with a same-named one
699
+ // Handle removed nodes first, so that replacing a pc-script-instance with a same-named one
676
700
  // destroys the old script before the replacement is created. Only destroy a script
677
701
  // this element actually owns - a duplicate-named element whose own create() failed
678
702
  // must not take down the live script on removal.
679
703
  mutation.removedNodes.forEach((node) => {
680
- if (node instanceof ScriptElement) {
704
+ if (node instanceof ScriptInstanceElement) {
681
705
  const scriptName = node.getAttribute('name');
682
706
  if (
683
707
  scriptName &&
@@ -693,7 +717,7 @@ class ScriptComponentElement extends ComponentElement {
693
717
 
694
718
  // Handle added nodes
695
719
  mutation.addedNodes.forEach((node) => {
696
- if (node instanceof ScriptElement) {
720
+ if (node instanceof ScriptInstanceElement) {
697
721
  this.createScript(node);
698
722
  }
699
723
  });
@@ -714,6 +738,6 @@ class ScriptComponentElement extends ComponentElement {
714
738
  }
715
739
  }
716
740
 
717
- customElements.define('pc-scripts', ScriptComponentElement);
741
+ customElements.define('pc-script', ScriptComponentElement);
718
742
 
719
743
  export { ScriptComponentElement };
@@ -4,8 +4,8 @@ import { AsyncElement } from '../async-element';
4
4
  import { parseBool } from '../parse';
5
5
 
6
6
  /**
7
- * The ScriptElement interface provides properties and methods for manipulating
8
- * `<pc-script>` elements. The ScriptElement interface also inherits the properties and
7
+ * The ScriptInstanceElement interface provides properties and methods for manipulating
8
+ * `<pc-script-instance>` elements. The ScriptInstanceElement interface also inherits the properties and
9
9
  * methods of the {@link AsyncElement} interface.
10
10
  *
11
11
  * Script attributes can be supplied through two channels:
@@ -27,7 +27,11 @@ import { parseBool } from '../parse';
27
27
  * new-name one, re-applying both attribute channels to it.
28
28
  *
29
29
  * The element becomes ready once its script instance has been created by the parent
30
- * `<pc-scripts>` element.
30
+ * `<pc-script>` element.
31
+ *
32
+ * @elementSummary The `<pc-script-instance>` element attaches one script class, named by `name`, to
33
+ * the entity of its parent `<pc-script>`. Its other attributes set script attributes of the same
34
+ * name, and `attributes` takes a JSON object instead. Must be a direct child of `<pc-script>`.
31
35
  *
32
36
  * @fires {CustomEvent} scriptattributeschange - Fired when the script's attributes change. The
33
37
  * `detail` carries the new `attributes` object. Bubbles.
@@ -36,13 +40,13 @@ import { parseBool } from '../parse';
36
40
  * @fires {CustomEvent} scriptnamechange - Fired when the script is renamed on a live element. The
37
41
  * `detail` carries `oldName` and `newName`. Bubbles.
38
42
  */
39
- class ScriptElement extends AsyncElement {
43
+ class ScriptInstanceElement extends AsyncElement {
40
44
  private _attributes: Record<string, any> = {};
41
45
 
42
46
  private _enabled = true;
43
47
 
44
48
  /**
45
- * The Script instance created for this element by its parent `<pc-scripts>` element.
49
+ * The Script instance created for this element by its parent `<pc-script>` element.
46
50
  * @internal
47
51
  */
48
52
  _script: Script | null = null;
@@ -97,11 +101,11 @@ class ScriptElement extends AsyncElement {
97
101
 
98
102
  /**
99
103
  * Sets the name of the script to create. The `name` attribute is the single source of truth
100
- * (it is what the parent `<pc-scripts>` element reads when creating the instance), so the
104
+ * (it is what the parent `<pc-script>` element reads when creating the instance), so the
101
105
  * property writes through to it — assigning before insertion works as expected:
102
106
  *
103
107
  * ```js
104
- * const script = document.createElement('pc-script');
108
+ * const script = document.createElement('pc-script-instance');
105
109
  * script.name = 'rotate';
106
110
  * scriptsElement.appendChild(script);
107
111
  * await script.ready();
@@ -131,11 +135,11 @@ class ScriptElement extends AsyncElement {
131
135
  }
132
136
 
133
137
  connectedCallback() {
134
- // Script instances are created by the parent pc-scripts element, so an element placed
138
+ // Script instances are created by the parent pc-script element, so an element placed
135
139
  // anywhere else is inert and never becomes ready - warn rather than hang silently
136
- if (this.parentElement?.tagName !== 'PC-SCRIPTS') {
140
+ if (this.parentElement?.tagName !== 'PC-SCRIPT') {
137
141
  console.warn(
138
- `pc-script '${this.getAttribute('name')}' must be a direct child of pc-scripts - script not created`
142
+ `pc-script-instance '${this.getAttribute('name')}' must be a direct child of pc-script - script not created`
139
143
  );
140
144
  }
141
145
  }
@@ -149,7 +153,7 @@ class ScriptElement extends AsyncElement {
149
153
  }
150
154
 
151
155
  /**
152
- * Called by the parent `<pc-scripts>` element when the script instance has been created.
156
+ * Called by the parent `<pc-script>` element when the script instance has been created.
153
157
  * Creation can happen more than once per connection (a runtime `name` change recreates the
154
158
  * instance), but `_onReady` signals readiness at most once per cycle.
155
159
  * @internal
@@ -173,7 +177,7 @@ class ScriptElement extends AsyncElement {
173
177
  this.scriptAttributes = JSON.parse(newValue);
174
178
  } catch (error) {
175
179
  console.warn(
176
- `Invalid 'attributes' JSON on pc-script '${this.getAttribute('name')}': ${(error as Error).message}`
180
+ `Invalid 'attributes' JSON on pc-script-instance '${this.getAttribute('name')}': ${(error as Error).message}`
177
181
  );
178
182
  }
179
183
  break;
@@ -197,6 +201,6 @@ class ScriptElement extends AsyncElement {
197
201
  }
198
202
  }
199
203
 
200
- customElements.define('pc-script', ScriptElement);
204
+ customElements.define('pc-script-instance', ScriptInstanceElement);
201
205
 
202
- export { ScriptElement };
206
+ export { ScriptInstanceElement };
@@ -25,10 +25,16 @@ const visibilities = new Map<'always' | 'when-required', number>([
25
25
 
26
26
  /**
27
27
  * The ScrollViewComponentElement interface provides properties and methods for manipulating
28
- * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-scrollview/ | `<pc-scrollview>`} elements.
28
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-scroll-view/ | `<pc-scroll-view>`} elements.
29
29
  * The ScrollViewComponentElement interface also inherits the properties and methods of the
30
30
  * {@link HTMLElement} interface.
31
31
  *
32
+ * Engine component: {@link ScrollViewComponent} (`scrollview`).
33
+ *
34
+ * @elementSummary The `<pc-scroll-view>` element scrolls a larger content entity within a clipped
35
+ * viewport at its entity, optionally driven by the `<pc-scrollbar>` elements it references. Must be
36
+ * a child of a `<pc-entity>`, `<pc-model>` or `<pc-node>`.
37
+ *
32
38
  * @category Components
33
39
  */
34
40
  class ScrollViewComponentElement extends ComponentElement {
@@ -437,6 +443,6 @@ class ScrollViewComponentElement extends ComponentElement {
437
443
  }
438
444
  }
439
445
 
440
- customElements.define('pc-scrollview', ScrollViewComponentElement);
446
+ customElements.define('pc-scroll-view', ScrollViewComponentElement);
441
447
 
442
448
  export { ScrollViewComponentElement };
@@ -16,6 +16,12 @@ const orientations = new Map<'horizontal' | 'vertical', number>([
16
16
  * The ScrollbarComponentElement interface also inherits the properties and methods of the
17
17
  * {@link HTMLElement} interface.
18
18
  *
19
+ * Engine component: {@link ScrollbarComponent} (`scrollbar`).
20
+ *
21
+ * @elementSummary The `<pc-scrollbar>` element gives its entity a draggable handle reporting a
22
+ * position from 0 to 1, which a `<pc-scroll-view>` references to scroll its content. Must be a
23
+ * child of a `<pc-entity>`, `<pc-model>` or `<pc-node>`.
24
+ *
19
25
  * @category Components
20
26
  */
21
27
  class ScrollbarComponentElement extends ComponentElement {
@@ -6,10 +6,16 @@ import { ComponentElement } from './component';
6
6
 
7
7
  /**
8
8
  * The SoundComponentElement interface provides properties and methods for manipulating
9
- * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-sounds/ | `<pc-sounds>`} elements.
9
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-sound/ | `<pc-sound>`} elements.
10
10
  * The SoundComponentElement interface also inherits the properties and methods of the
11
11
  * {@link HTMLElement} interface.
12
12
  *
13
+ * Engine component: {@link SoundComponent} (`sound`).
14
+ *
15
+ * @elementSummary The `<pc-sound>` element holds the `<pc-sound-slot>` children that play sounds at
16
+ * its entity, along with the positional audio settings they share. Must be a child of a
17
+ * `<pc-entity>`, `<pc-model>` or `<pc-node>`.
18
+ *
13
19
  * @category Components
14
20
  */
15
21
  class SoundComponentElement extends ComponentElement {
@@ -227,6 +233,6 @@ class SoundComponentElement extends ComponentElement {
227
233
  }
228
234
  }
229
235
 
230
- customElements.define('pc-sounds', SoundComponentElement);
236
+ customElements.define('pc-sound', SoundComponentElement);
231
237
 
232
238
  export { SoundComponentElement };
@@ -8,8 +8,11 @@ import { SoundComponentElement } from './sound-component';
8
8
 
9
9
  /**
10
10
  * The SoundSlotElement interface provides properties and methods for manipulating
11
- * `<pc-sound>` elements. The SoundSlotElement interface also inherits the properties and
11
+ * `<pc-sound-slot>` elements. The SoundSlotElement interface also inherits the properties and
12
12
  * methods of the {@link AsyncElement} interface.
13
+ *
14
+ * @elementSummary The `<pc-sound-slot>` element declares one named sound on its parent `<pc-sound>`
15
+ * — its asset, volume, pitch, looping and autoplay. Must be a direct child of `<pc-sound>`.
13
16
  */
14
17
  class SoundSlotElement extends AsyncElement {
15
18
  private _asset = '';
@@ -31,7 +34,7 @@ class SoundSlotElement extends AsyncElement {
31
34
  private _volume = 1;
32
35
 
33
36
  /**
34
- * The `<pc-sounds>` this slot was added to, captured at connect time.
37
+ * The `<pc-sound>` this slot was added to, captured at connect time.
35
38
  *
36
39
  * `disconnectedCallback` cannot rediscover it: by the time the element is disconnected its
37
40
  * `parentElement` is already `null`, so a lookup would both fail to find the component and
@@ -106,7 +109,7 @@ class SoundSlotElement extends AsyncElement {
106
109
  const soundElement = this.parentElement as SoundComponentElement;
107
110
 
108
111
  if (!(soundElement instanceof SoundComponentElement)) {
109
- console.warn('pc-sound must be a direct child of a pc-sounds element');
112
+ console.warn('pc-sound-slot must be a direct child of a pc-sound element');
110
113
  return null;
111
114
  }
112
115
 
@@ -324,6 +327,6 @@ class SoundSlotElement extends AsyncElement {
324
327
  }
325
328
  }
326
329
 
327
- customElements.define('pc-sound', SoundSlotElement);
330
+ customElements.define('pc-sound-slot', SoundSlotElement);
328
331
 
329
332
  export { SoundSlotElement };
@@ -17,11 +17,12 @@ export const POINTER_ATTRIBUTES = [
17
17
  ] as const;
18
18
 
19
19
  /**
20
- * The base class for elements that front an engine {@link Entity}: `<pc-entity>`, which creates
21
- * one, and `<pc-node>`, which binds to one inside a model's instantiated hierarchy. It carries
22
- * what both need — the `entity` contract, registration with the owning application (which joins
23
- * picked scene nodes back to elements by identity, never by name), and the pointer listener
24
- * bookkeeping that lets the application lazily attach its canvas handlers.
20
+ * The base class for elements that front an engine {@link Entity}: `<pc-entity>` and
21
+ * `<pc-model>`, which create one, and `<pc-node>`, which binds to one inside a model's
22
+ * instantiated hierarchy. It carries what all of them need — the `entity` contract, registration
23
+ * with the owning application (which joins picked scene nodes back to elements by identity,
24
+ * never by name), and the pointer listener bookkeeping that lets the application lazily attach
25
+ * its canvas handlers.
25
26
  */
26
27
  class EntityBaseElement extends AsyncElement {
27
28
  protected _entity: Entity | null = null;
@@ -77,7 +78,7 @@ class EntityBaseElement extends AsyncElement {
77
78
  * Tracks whether an inline `onpointer*` attribute is present. The browser itself compiles and
78
79
  * runs these attributes — they are standard `GlobalEventHandlers`, so setting one replaces
79
80
  * the previous handler and removing it removes the handler, exactly like `onclick` on any
80
- * HTML element. But because they bypass {@link addEventListener}, the connect/disconnect
81
+ * HTML element. But because they bypass {@link EventTarget.addEventListener}, the connect/disconnect
81
82
  * bookkeeping that lets the application lazily attach its canvas pointer handlers must be
82
83
  * kept in sync here.
83
84
  *
@@ -121,7 +122,7 @@ class EntityBaseElement extends AsyncElement {
121
122
 
122
123
  /**
123
124
  * Whether the element has a listener for an event type, registered either with
124
- * {@link addEventListener} or with the matching inline `onpointer*` attribute. Read by the
125
+ * {@link EventTarget.addEventListener} or with the matching inline `onpointer*` attribute. Read by the
125
126
  * containing `<pc-app>` element to gate pointer event synthesis.
126
127
  *
127
128
  * @param type - The event type.