@mml-io/mml-web-client 0.0.0-experimental-f410cae-20250908 → 0.0.0-experimental-9ed5b0c-20250916

package/build/index.js

@@ -546,6 +546,56 @@
   });
 
   // ../networked-dom-web/build/index.js
+  function remapAttributeName(attrName) {
+    const remapped = SVG_ATTRS_ADJUSTMENT_MAP.get(attrName.toLowerCase());
+    if (remapped) {
+      return remapped;
+    }
+    return attrName;
+  }
+  function createElementWithSVGSupport(tag, options = {}) {
+    let filteredTag = tag.toLowerCase();
+    if (ALWAYS_DISALLOWED_TAGS.has(filteredTag.toLowerCase())) {
+      console.error("Disallowing tag", filteredTag);
+      filteredTag = options.replacementTagPrefix ? options.replacementTagPrefix + tag : `x-${tag}`;
+    }
+    let svgTagMapping;
+    if (options.allowSVGElements) {
+      svgTagMapping = SVG_TAG_NAMES_ADJUSTMENT_MAP.get(filteredTag);
+    }
+    if (svgTagMapping) {
+      filteredTag = svgTagMapping;
+      const xmlns = "http://www.w3.org/2000/svg";
+      return document.createElementNS(xmlns, filteredTag);
+    } else {
+      if (options.tagPrefix) {
+        if (!tag.toLowerCase().startsWith(options.tagPrefix.toLowerCase())) {
+          filteredTag = options.replacementTagPrefix ? options.replacementTagPrefix + tag : `x-${tag}`;
+        }
+      }
+      return document.createElement(filteredTag);
+    }
+  }
+  function setElementAttribute(element, key, value) {
+    if (DOMSanitizer.shouldAcceptAttribute(key)) {
+      const remappedKey = remapAttributeName(key);
+      element.setAttribute(remappedKey, value);
+    }
+  }
+  function getChildrenTarget(parent) {
+    let targetForChildren = parent;
+    if (parent.getPortalElement) {
+      targetForChildren = parent.getPortalElement();
+    }
+    return targetForChildren;
+  }
+  function getRemovalTarget(parent) {
+    let targetForRemoval = parent;
+    if (parent.getPortalElement) {
+      targetForRemoval = parent.getPortalElement();
+    }
+    return targetForRemoval;
+  }
   function NetworkedDOMWebsocketStatusToString(status) {
     switch (status) {
       case 0:
@@ -563,7 +613,7 @@
     }
   }
   function isHTMLElement(node, rootNode) {
-    if (node instanceof HTMLElement) {
+    if (node instanceof HTMLElement || node instanceof Element) {
       return true;
     }
     if (!rootNode.ownerDocument.defaultView) {
@@ -580,7 +630,7 @@
     }
     return node instanceof rootNode.ownerDocument.defaultView.Text;
   }
-  var DOMSanitizer, NetworkedDOMWebsocketV01Adapter, connectionId, hiddenTag, NetworkedDOMWebsocketV02Adapter, startingBackoffTimeMilliseconds, maximumBackoffTimeMilliseconds, maximumWebsocketConnectionTimeout, NetworkedDOMWebsocketStatus, NetworkedDOMWebsocket;
+  var DOMSanitizer, ALWAYS_DISALLOWED_TAGS, SVG_TAG_NAMES_ADJUSTMENT_MAP, SVG_ATTRS_ADJUSTMENT_MAP, NetworkedDOMWebsocketV01Adapter, connectionId, hiddenTag, NetworkedDOMWebsocketV02Adapter, startingBackoffTimeMilliseconds, maximumBackoffTimeMilliseconds, maximumWebsocketConnectionTimeout, NetworkedDOMWebsocketStatus, NetworkedDOMWebsocket;
   var init_build2 = __esm({
     "../networked-dom-web/build/index.js"() {
       init_build();
@@ -646,7 +696,7 @@
           return c2 >= "0" && c2 <= "9";
         }
         static IsASCIIAlpha(c2) {
-          return c2 >= "a" && c2 <= "z";
+          return c2 >= "a" && c2 <= "z" || c2 >= "A" && c2 <= "Z";
         }
         static IsValidAttributeName(characters) {
           const c2 = characters[0];
@@ -669,6 +719,122 @@
           return !attribute.startsWith("on");
         }
       };
+      ALWAYS_DISALLOWED_TAGS = /* @__PURE__ */ new Set(["foreignobject", "iframe", "script"]);
+      SVG_TAG_NAMES_ADJUSTMENT_MAP = new Map(
+        [
+          "svg",
+          "defs",
+          "g",
+          "text",
+          "filter",
+          "stop",
+          "path",
+          "rect",
+          "line",
+          "circle",
+          "animate",
+          "altGlyph",
+          "altGlyphDef",
+          "altGlyphItem",
+          "animateColor",
+          "animateMotion",
+          "animateTransform",
+          "clipPath",
+          "feBlend",
+          "feDropShadow",
+          "feColorMatrix",
+          "feComponentTransfer",
+          "feComposite",
+          "feConvolveMatrix",
+          "feDiffuseLighting",
+          "feDisplacementMap",
+          "feDistantLight",
+          "feFlood",
+          "feFuncA",
+          "feFuncB",
+          "feFuncG",
+          "feFuncR",
+          "feGaussianBlur",
+          "feImage",
+          "feMerge",
+          "feMergeNode",
+          "feMorphology",
+          "feOffset",
+          "fePointLight",
+          "feSpecularLighting",
+          "feSpotLight",
+          "feTile",
+          "feTurbulence",
+          "glyphRef",
+          "linearGradient",
+          "radialGradient",
+          "textPath"
+          // `foreignObject` is explicitly disallowed because it allows injecting arbitrary HTML
+          // "foreignObject",
+        ].map((tn) => [tn.toLowerCase(), tn])
+      );
+      SVG_ATTRS_ADJUSTMENT_MAP = new Map(
+        [
+          "attributeName",
+          "attributeType",
+          "baseFrequency",
+          "baseProfile",
+          "calcMode",
+          "clipPathUnits",
+          "diffuseConstant",
+          "edgeMode",
+          "filterUnits",
+          "glyphRef",
+          "gradientTransform",
+          "gradientUnits",
+          "kernelMatrix",
+          "kernelUnitLength",
+          "keyPoints",
+          "keySplines",
+          "keyTimes",
+          "lengthAdjust",
+          "limitingConeAngle",
+          "markerHeight",
+          "markerUnits",
+          "markerWidth",
+          "maskContentUnits",
+          "maskUnits",
+          "numOctaves",
+          "pathLength",
+          "patternContentUnits",
+          "patternTransform",
+          "patternUnits",
+          "pointsAtX",
+          "pointsAtY",
+          "pointsAtZ",
+          "preserveAlpha",
+          "preserveAspectRatio",
+          "primitiveUnits",
+          "refX",
+          "refY",
+          "repeatCount",
+          "repeatDur",
+          "requiredExtensions",
+          "requiredFeatures",
+          "specularConstant",
+          "specularExponent",
+          "spreadMethod",
+          "startOffset",
+          "stdDeviation",
+          "stitchTiles",
+          "surfaceScale",
+          "systemLanguage",
+          "tableValues",
+          "targetX",
+          "targetY",
+          "textLength",
+          "viewBox",
+          "viewTarget",
+          "xChannelSelector",
+          "yChannelSelector",
+          "zoomAndPan"
+        ].map((attr) => [attr.toLowerCase(), attr])
+      );
       NetworkedDOMWebsocketV01Adapter = class {
         constructor(websocket, parentElement, connectedCallback, timeCallback, options = {}) {
           this.websocket = websocket;
@@ -787,6 +953,7 @@
           if (!isHTMLElement(parent, this.parentElement)) {
             throw new Error("Parent is not an HTMLElement (that supports children)");
           }
+          const targetForChildren = getChildrenTarget(parent);
           let nextElement = null;
           let previousElement = null;
           if (previousNodeId) {
@@ -808,12 +975,12 @@
               if (nextElement) {
                 const docFrag = new DocumentFragment();
                 docFrag.append(...elementsToAdd);
-                parent.insertBefore(docFrag, nextElement);
+                targetForChildren.insertBefore(docFrag, nextElement);
               } else {
-                parent.append(...elementsToAdd);
+                targetForChildren.append(...elementsToAdd);
               }
             } else {
-              parent.prepend(...elementsToAdd);
+              targetForChildren.prepend(...elementsToAdd);
             }
           }
           for (const removedNode of removedNodes) {
@@ -823,15 +990,20 @@
             }
             this.elementToId.delete(childElement);
             this.idToElement.delete(removedNode);
-            parent.removeChild(childElement);
+            const targetForRemoval = getRemovalTarget(parent);
+            targetForRemoval.removeChild(childElement);
             if (isHTMLElement(childElement, this.parentElement)) {
               this.removeChildElementIds(childElement);
             }
           }
         }
         removeChildElementIds(parent) {
-          for (let i = 0; i < parent.children.length; i++) {
-            const child = parent.children[i];
+          const portal = getChildrenTarget(parent);
+          if (portal !== parent) {
+            this.removeChildElementIds(portal);
+          }
+          for (let i = 0; i < parent.childNodes.length; i++) {
+            const child = parent.childNodes[i];
             const childId = this.elementToId.get(child);
             if (!childId) {
               console.error("Inner child of removed element had no id", child);
@@ -871,9 +1043,7 @@
               if (newValue === null) {
                 element.removeAttribute(attribute);
               } else {
-                if (DOMSanitizer.shouldAcceptAttribute(attribute)) {
-                  element.setAttribute(attribute, newValue);
-                }
+                setElementAttribute(element, attribute, newValue);
               }
             } else {
               console.error("Element is not an HTMLElement and cannot support attributes", element);
@@ -912,13 +1082,7 @@
           }
           let element;
           try {
-            let filteredTag = tag;
-            if (this.options.tagPrefix) {
-              if (!tag.toLowerCase().startsWith(this.options.tagPrefix.toLowerCase())) {
-                filteredTag = this.options.replacementTagPrefix ? this.options.replacementTagPrefix + tag : `x-${tag}`;
-              }
-            }
-            element = document.createElement(filteredTag);
+            element = createElementWithSVGSupport(tag, this.options);
           } catch (e) {
             console.error(`Error creating element: (${tag})`, e);
             element = document.createElement("x-div");
@@ -926,10 +1090,8 @@
           this.idToElement.set(nodeId, element);
           this.elementToId.set(element, nodeId);
           for (const key in attributes) {
-            if (DOMSanitizer.shouldAcceptAttribute(key)) {
-              const value = attributes[key];
-              element.setAttribute(key, value);
-            }
+            const value = attributes[key];
+            setElementAttribute(element, key, value);
           }
           if (children) {
             for (const child of children) {
@@ -1123,6 +1285,7 @@
           if (!isHTMLElement(parent, this.parentElement)) {
             throw new Error("Parent is not an HTMLElement (that supports children)");
           }
+          const targetForChildren = getChildrenTarget(parent);
           let nextElement = null;
           let previousElement = null;
           if (previousNodeId) {
@@ -1144,12 +1307,12 @@
               if (nextElement) {
                 const docFrag = new DocumentFragment();
                 docFrag.append(...elementsToAdd);
-                parent.insertBefore(docFrag, nextElement);
+                targetForChildren.insertBefore(docFrag, nextElement);
               } else {
-                parent.append(...elementsToAdd);
+                targetForChildren.append(...elementsToAdd);
               }
             } else {
-              parent.prepend(...elementsToAdd);
+              targetForChildren.prepend(...elementsToAdd);
             }
           }
         }
@@ -1177,15 +1340,20 @@
             this.elementToId.delete(childElement);
             this.idToElement.delete(removedNode);
             this.hiddenPlaceholderElements.delete(removedNode);
-            parent.removeChild(childElement);
+            const targetForRemoval = getRemovalTarget(parent);
+            targetForRemoval.removeChild(childElement);
             if (isHTMLElement(childElement, this.parentElement)) {
               this.removeChildElementIds(childElement);
             }
           }
         }
         removeChildElementIds(parent) {
-          for (let i = 0; i < parent.children.length; i++) {
-            const child = parent.children[i];
+          const portal = getChildrenTarget(parent);
+          if (portal !== parent) {
+            this.removeChildElementIds(portal);
+          }
+          for (let i = 0; i < parent.childNodes.length; i++) {
+            const child = parent.childNodes[i];
             const childId = this.elementToId.get(child);
             if (!childId) {
               console.error("Inner child of removed element had no id", child);
@@ -1237,9 +1405,7 @@
                 if (newValue === null) {
                   element.removeAttribute(key);
                 } else {
-                  if (DOMSanitizer.shouldAcceptAttribute(key)) {
-                    element.setAttribute(key, newValue);
-                  }
+                  setElementAttribute(element, key, newValue);
                 }
               }
             } else {
@@ -1276,22 +1442,14 @@
           }
           let element;
           try {
-            let filteredTag = tag;
-            if (this.options.tagPrefix) {
-              if (!tag.toLowerCase().startsWith(this.options.tagPrefix.toLowerCase())) {
-                filteredTag = this.options.replacementTagPrefix ? this.options.replacementTagPrefix + tag : `x-${tag}`;
-              }
-            }
-            element = document.createElement(filteredTag);
+            element = createElementWithSVGSupport(tag, this.options);
           } catch (e) {
             console.error(`Error creating element: (${tag})`, e);
             element = document.createElement("x-div");
           }
           for (const [key, value] of attributes) {
             if (value !== null) {
-              if (DOMSanitizer.shouldAcceptAttribute(key)) {
-                element.setAttribute(key, value);
-              }
+              setElementAttribute(element, key, value);
             }
           }
           if (children) {
@@ -2010,6 +2168,7 @@
     targetWindow.customElements.define(Group.tagName, Group);
     targetWindow.customElements.define(Prompt.tagName, Prompt);
     targetWindow.customElements.define(Link.tagName, Link);
+    targetWindow.customElements.define(Overlay.tagName, Overlay);
     targetWindow.customElements.define(Sphere.tagName, Sphere);
     targetWindow.customElements.define(Image2.tagName, Image2);
     targetWindow.customElements.define(Video.tagName, Video);
@@ -2088,8 +2247,8 @@
     interactionPrompt.innerHTML = "Press E to interact";
     return interactionPrompt;
   }
-  function configureWindowForMML(window2, getGraphicsAdapter) {
-    const fullScreenMMLScene = new FullScreenMMLScene();
+  function configureWindowForMML(window2, getGraphicsAdapter, options) {
+    const fullScreenMMLScene = new FullScreenMMLScene(options);
     const mmlDocumentTimeManager = new MMLDocumentTimeManager();
     setGlobalMMLScene(fullScreenMMLScene);
     setGlobalDocumentTimeManager(mmlDocumentTimeManager);
@@ -2223,7 +2382,7 @@
       peerConnection.onicegatheringstatechange = () => peerConnection.iceGatheringState === "complete" && resolve(peerConnection.localDescription);
     });
   }
-  var colors, AttributeHandler, scene, documentTimeManager, MELEMENT_PROPERTY_NAME, consumeEventEventName, MElement, defaultAttribute, defaultStart, defaultEnd, defaultLoop, defaultPingPong, defaultEasing, defaultStartTime, defaultPauseTime, defaultAnimDuration, defaultPingPongDelay, defaultColor, _AttributeAnimation, AttributeAnimation, defaultAttribute2, defaultEasing2, defaultLerpDuration, _AttributeLerp, AttributeLerp, AnimatedAttributeHelper, easingFunctions, easingsByName, StartOfAnimationSymbol, EndOfAnimationSymbol, Quat, Vect3, Vect3Zeroes, Vect3Ones, _Matr4, Matr4, epsilon, matrix1, vector1, OrientedBoundingBox, CanvasText, collideAttributeName, collisionIntervalAttributeName, defaultCollideable, _CollideableHelper, CollideableHelper, debugAttributeName, DebugHelper, _EulXYZ, EulXYZ, defaultVisible, _TransformableElement, TransformableElement, defaultModelSrc, defaultModelAnim, defaultModelAnimLoop, defaultModelAnimEnabled, defaultModelAnimStartTime, defaultModelAnimPauseTime, defaultModelCastShadows, defaultModelDebug, _Model, Model, defaultAnimationSrc, defaultAnimationWeight, defaultAnimationSpeed, defaultAnimationLoop, defaultAnimationStartTime, defaultAnimationPauseTime, defaultAnimationRatio, _Animation, Animation, defaultAudioVolume, defaultAudioLoop, defaultAudioEnabled, defaultAudioStartTime, defaultAudioPauseTime, defaultAudioSrc, defaultAudioInnerConeAngle, defaultAudioOuterConeAngle, defaultAudioDebug, _Audio, Audio2, Character, tempContainerMatrix, tempTargetMatrix, tempPositionVector, tempRotationEuler, tempRotationQuaternion, tempScaleVector, defaultChatProbeRange, defaultChatProbeDebug, chatProbeChatEventName, _ChatProbe, ChatProbe, defaultCubeColor, defaultCubeWidth, defaultCubeHeight, defaultCubeDepth, defaultCubeOpacity, defaultCubeCastShadows, _Cube, Cube, defaultCylinderColor, defaultCylinderRadius, defaultCylinderHeight, defaultCylinderOpacity, defaultCylinderCastShadows, _Cylinder, Cylinder, noManagerSymbol, LoadingInstanceManager, LoadingProgressManager, LoadingProgressBar, LoadingSpinner, domParser, RemoteDocumentWrapper, StaticHTMLFrameInstance, WebSocketFrameInstance, defaultUnloadRange, defaultFrameDebug, _Frame, Frame, _Group, Group, defaultImageSrc, defaultImageWidth, defaultImageHeight, defaultImageOpacity, defaultImageCastShadows, defaultImageEmissive, _Image, Image2, defaultInteractionRange, defaultInteractionInFocus, defaultInteractionLineOfSight, defaultInteractionPriority, defaultInteractionPrompt, defaultInteractionDebug, _Interaction, Interaction, MLabelAlignment, defaultLabelColor, defaultFontColor, defaultLabelAlignment, defaultLabelFontSize, defaultLabelPadding, defaultLabelWidth, defaultLabelHeight, defaultLabelCastShadows, defaultEmissive, _Label, Label, LightTypes, defaultLightColor, defaultLightIntensity, defaultLightAngle, defaultLightEnabled, defaultLightDebug, defaultLightDistance, defaultLightCastShadows, defaultLightType, _Light, Light, _Link, Link, defaultPlaneColor, defaultPlaneWidth, defaultPlaneHeight, defaultPlaneOpacity, defaultPlaneCastShadows, _Plane, Plane, defaultPositionProbeRange, defaultPositionProbeInterval, defaultPositionProbeMinimumInterval, defaultPositionProbeDebug, positionProbeEnterEventName, positionProbePositionMoveEventName, positionProbeLeaveEventName, _PositionProbe, PositionProbe, _Prompt, Prompt, MMLDocumentTimeManager, RemoteDocument, defaultSphereColor, defaultSphereRadius, defaultSphereOpacity, defaultSphereCastShadows, _Sphere, Sphere, defaultVideoWidth, defaultVideoHeight, defaultVideoVolume, defaultVideoLoop, defaultVideoEnabled, defaultVideoStartTime, defaultVideoPauseTime, defaultVideoSrc, defaultVideoCastShadows, defaultVideoEmissive, _Video, Video, EventHandlerCollection, _InteractionManager, InteractionManager, Modal, ConfirmModal, PromptModal, PromptManager, MMLScene, FullScreenMMLScene, AnimationGraphics, AudioGraphics, ChatProbeGraphics, CubeGraphics, CylinderGraphics, DebugHelperGraphics, FrameGraphics, ImageGraphics, InteractionGraphics, LabelGraphics, LightGraphics, LinkGraphics, MElementGraphics, ModelGraphics, PlaneGraphics, PositionProbeGraphics, PromptGraphics, RemoteDocumentGraphics, SphereGraphics, TransformableGraphics, VideoGraphics, IframeWrapper, MMLNetworkSource, StatusUI, tagAdapterDefaultTheme, TagDebugAdapterDebugHelper, TagDebugAttribute, ignoredAttributes, TagDebugMElement, TagDebugAdapterGraphicsInterface, StandaloneTagDebugAdapter, StaticFileVideoSource, WHEPVideoSource;
+  var colors, AttributeHandler, scene, documentTimeManager, MELEMENT_PROPERTY_NAME, consumeEventEventName, MElement, defaultAttribute, defaultStart, defaultEnd, defaultLoop, defaultPingPong, defaultEasing, defaultStartTime, defaultPauseTime, defaultAnimDuration, defaultPingPongDelay, defaultColor, _AttributeAnimation, AttributeAnimation, defaultAttribute2, defaultEasing2, defaultLerpDuration, _AttributeLerp, AttributeLerp, AnimatedAttributeHelper, easingFunctions, easingsByName, StartOfAnimationSymbol, EndOfAnimationSymbol, Quat, Vect3, Vect3Zeroes, Vect3Ones, _Matr4, Matr4, epsilon, matrix1, vector1, OrientedBoundingBox, CanvasText, collideAttributeName, collisionIntervalAttributeName, defaultCollideable, _CollideableHelper, CollideableHelper, clickableAttributeName, defaultClickable, _ClickableHelper, ClickableHelper, debugAttributeName, DebugHelper, _EulXYZ, EulXYZ, defaultVisible, _TransformableElement, TransformableElement, defaultModelSrc, defaultModelAnim, defaultModelAnimLoop, defaultModelAnimEnabled, defaultModelAnimStartTime, defaultModelAnimPauseTime, defaultModelCastShadows, defaultModelDebug, _Model, Model, defaultAnimationSrc, defaultAnimationWeight, defaultAnimationSpeed, defaultAnimationLoop, defaultAnimationStartTime, defaultAnimationPauseTime, defaultAnimationRatio, _Animation, Animation, defaultAudioVolume, defaultAudioLoop, defaultAudioEnabled, defaultAudioStartTime, defaultAudioPauseTime, defaultAudioSrc, defaultAudioInnerConeAngle, defaultAudioOuterConeAngle, defaultAudioDebug, _Audio, Audio2, Character, tempContainerMatrix, tempTargetMatrix, tempPositionVector, tempRotationEuler, tempRotationQuaternion, tempScaleVector, defaultChatProbeRange, defaultChatProbeDebug, chatProbeChatEventName, _ChatProbe, ChatProbe, defaultCubeColor, defaultCubeWidth, defaultCubeHeight, defaultCubeDepth, defaultCubeOpacity, defaultCubeCastShadows, _Cube, Cube, defaultCylinderColor, defaultCylinderRadius, defaultCylinderHeight, defaultCylinderOpacity, defaultCylinderCastShadows, _Cylinder, Cylinder, noManagerSymbol, LoadingInstanceManager, LoadingProgressManager, LoadingProgressBar, LoadingSpinner, domParser, RemoteDocumentWrapper, StaticHTMLFrameInstance, WebSocketFrameInstance, defaultUnloadRange, defaultFrameDebug, _Frame, Frame, _Group, Group, defaultImageSrc, defaultImageWidth, defaultImageHeight, defaultImageOpacity, defaultImageCastShadows, defaultImageEmissive, _Image, Image2, defaultInteractionRange, defaultInteractionInFocus, defaultInteractionLineOfSight, defaultInteractionPriority, defaultInteractionPrompt, defaultInteractionDebug, _Interaction, Interaction, MLabelAlignment, defaultLabelColor, defaultFontColor, defaultLabelAlignment, defaultLabelFontSize, defaultLabelPadding, defaultLabelWidth, defaultLabelHeight, defaultLabelCastShadows, defaultEmissive, _Label, Label, LightTypes, defaultLightColor, defaultLightIntensity, defaultLightAngle, defaultLightEnabled, defaultLightDebug, defaultLightDistance, defaultLightCastShadows, defaultLightType, _Light, Light, _Link, Link, OverlayAnchor, _Overlay, Overlay, defaultPlaneColor, defaultPlaneWidth, defaultPlaneHeight, defaultPlaneOpacity, defaultPlaneCastShadows, _Plane, Plane, defaultPositionProbeRange, defaultPositionProbeInterval, defaultPositionProbeMinimumInterval, defaultPositionProbeDebug, positionProbeEnterEventName, positionProbePositionMoveEventName, positionProbeLeaveEventName, _PositionProbe, PositionProbe, _Prompt, Prompt, MMLDocumentTimeManager, RemoteDocument, defaultSphereColor, defaultSphereRadius, defaultSphereOpacity, defaultSphereCastShadows, _Sphere, Sphere, defaultVideoWidth, defaultVideoHeight, defaultVideoVolume, defaultVideoLoop, defaultVideoEnabled, defaultVideoStartTime, defaultVideoPauseTime, defaultVideoSrc, defaultVideoCastShadows, defaultVideoEmissive, _Video, Video, EventHandlerCollection, _InteractionManager, InteractionManager, Modal, ConfirmModal, PromptModal, PromptManager, MMLScene, FullScreenMMLScene, AnimationGraphics, AudioGraphics, ChatProbeGraphics, CubeGraphics, CylinderGraphics, DebugHelperGraphics, FrameGraphics, ImageGraphics, InteractionGraphics, LabelGraphics, LightGraphics, LinkGraphics, MElementGraphics, ModelGraphics, OverlayGraphics, PlaneGraphics, PositionProbeGraphics, PromptGraphics, RemoteDocumentGraphics, SphereGraphics, TransformableGraphics, VideoGraphics, IframeWrapper, MMLNetworkSource, StatusUI, tagAdapterDefaultTheme, TagDebugAdapterDebugHelper, TagDebugAttribute, ignoredAttributes, TagDebugMElement, TagDebugAdapterGraphicsInterface, StandaloneTagDebugAdapter, StaticFileVideoSource, WHEPVideoSource;
   var init_build3 = __esm({
     "../mml-web/build/index.js"() {
       init_build2();
@@ -3911,6 +4070,31 @@
       });
       _CollideableHelper.observedAttributes = _CollideableHelper.AttributeHandler.getAttributes();
       CollideableHelper = _CollideableHelper;
+      clickableAttributeName = "clickable";
+      defaultClickable = true;
+      _ClickableHelper = class _ClickableHelper2 {
+        constructor() {
+          this.props = {
+            clickable: defaultClickable
+          };
+        }
+        isClickable() {
+          return this.props.clickable;
+        }
+        handle(name, newValue) {
+          _ClickableHelper2.AttributeHandler.handle(this, name, newValue);
+        }
+      };
+      _ClickableHelper.AttributeHandler = new AttributeHandler({
+        [clickableAttributeName]: (instance, newValue) => {
+          const clickable = parseBoolAttribute(newValue, defaultClickable);
+          if (clickable !== instance.props.clickable) {
+            instance.props.clickable = clickable;
+          }
+        }
+      });
+      _ClickableHelper.observedAttributes = _ClickableHelper.AttributeHandler.getAttributes();
+      ClickableHelper = _ClickableHelper;
       debugAttributeName = "debug";
       DebugHelper = class {
         constructor(element) {
@@ -4411,6 +4595,7 @@
             debug: defaultModelDebug
           };
           this.collideableHelper = new CollideableHelper(this);
+          this.clickableHelper = new ClickableHelper();
           this.modelGraphics = null;
           this.isModel = true;
         }
@@ -4427,7 +4612,8 @@
           return [
             ...TransformableElement.observedAttributes,
             ..._Model2.attributeHandler.getAttributes(),
-            ...CollideableHelper.observedAttributes
+            ...CollideableHelper.observedAttributes,
+            ...ClickableHelper.observedAttributes
           ];
         }
         getContentBounds() {
@@ -4451,7 +4637,7 @@
           (_a2 = this.modelGraphics) == null ? void 0 : _a2.transformed();
         }
         isClickable() {
-          return true;
+          return this.clickableHelper.isClickable();
         }
         addSideEffectChild(child) {
           if (Animation.isAnimation(child)) {
@@ -4478,6 +4664,7 @@
           super.attributeChangedCallback(name, oldValue, newValue);
           _Model2.attributeHandler.handle(this, name, newValue);
           this.collideableHelper.handle(name, newValue);
+          this.clickableHelper.handle(name, newValue);
           if (TransformableElement.observedAttributes.includes(name)) {
             this.modelGraphics.transformed();
           }
@@ -4796,7 +4983,7 @@
         parentTransformed() {
         }
         isClickable() {
-          return true;
+          return false;
         }
         attributeChangedCallback(name, oldValue, newValue) {
           if (!this.audioGraphics) {
@@ -4902,9 +5089,6 @@
         parentTransformed() {
           super.parentTransformed();
         }
-        isClickable() {
-          return true;
-        }
         connectedCallback() {
           super.connectedCallback();
         }
@@ -5130,6 +5314,7 @@
             ]
           });
           this.collideableHelper = new CollideableHelper(this);
+          this.clickableHelper = new ClickableHelper();
         }
         enable() {
           this.collideableHelper.enable();
@@ -5150,7 +5335,8 @@
           return [
             ...TransformableElement.observedAttributes,
             ..._Cube2.attributeHandler.getAttributes(),
-            ...CollideableHelper.observedAttributes
+            ...CollideableHelper.observedAttributes,
+            ...ClickableHelper.observedAttributes
           ];
         }
         addSideEffectChild(child) {
@@ -5165,7 +5351,7 @@
           this.collideableHelper.parentTransformed();
         }
         isClickable() {
-          return true;
+          return this.clickableHelper.isClickable();
         }
         attributeChangedCallback(name, oldValue, newValue) {
           if (!this.cubeGraphics) {
@@ -5174,6 +5360,7 @@
           super.attributeChangedCallback(name, oldValue, newValue);
           _Cube2.attributeHandler.handle(this, name, newValue);
           this.collideableHelper.handle(name, newValue);
+          this.clickableHelper.handle(name, newValue);
         }
         connectedCallback() {
           var _a2;
@@ -5298,6 +5485,7 @@
             ]
           });
           this.collideableHelper = new CollideableHelper(this);
+          this.clickableHelper = new ClickableHelper();
         }
         enable() {
           this.collideableHelper.enable();
@@ -5318,7 +5506,8 @@
           return [
             ...TransformableElement.observedAttributes,
             ..._Cylinder2.attributeHandler.getAttributes(),
-            ...CollideableHelper.observedAttributes
+            ...CollideableHelper.observedAttributes,
+            ...ClickableHelper.observedAttributes
           ];
         }
         addSideEffectChild(child) {
@@ -5333,7 +5522,7 @@
           this.collideableHelper.parentTransformed();
         }
         isClickable() {
-          return true;
+          return this.clickableHelper.isClickable();
         }
         attributeChangedCallback(name, oldValue, newValue) {
           if (!this.cylinderGraphics) {
@@ -5342,6 +5531,7 @@
           super.attributeChangedCallback(name, oldValue, newValue);
           _Cylinder2.attributeHandler.handle(this, name, newValue);
           this.collideableHelper.handle(name, newValue);
+          this.clickableHelper.handle(name, newValue);
         }
         connectedCallback() {
           var _a2;
@@ -6077,7 +6267,7 @@
           this.boundsUpdated();
         }
         isClickable() {
-          return true;
+          return false;
         }
         startEmitting() {
           if (this.timer) {
@@ -6249,7 +6439,7 @@
         parentTransformed() {
         }
         isClickable() {
-          return true;
+          return false;
         }
         attributeChangedCallback(name, oldValue, newValue) {
           if (!this.transformableElementGraphics) {
@@ -6328,6 +6518,7 @@
             ]
           });
           this.collideableHelper = new CollideableHelper(this);
+          this.clickableHelper = new ClickableHelper();
         }
         enable() {
           this.collideableHelper.enable();
@@ -6339,7 +6530,8 @@
           return [
             ...TransformableElement.observedAttributes,
             ..._Image2.attributeHandler.getAttributes(),
-            ...CollideableHelper.observedAttributes
+            ...CollideableHelper.observedAttributes,
+            ...ClickableHelper.observedAttributes
           ];
         }
         getContentBounds() {
@@ -6365,7 +6557,7 @@
           this.collideableHelper.parentTransformed();
         }
         isClickable() {
-          return true;
+          return this.clickableHelper.isClickable();
         }
         attributeChangedCallback(name, oldValue, newValue) {
           if (!this.imageGraphics) {
@@ -6374,6 +6566,7 @@
           super.attributeChangedCallback(name, oldValue, newValue);
           _Image2.attributeHandler.handle(this, name, newValue);
           this.collideableHelper.handle(name, newValue);
+          this.clickableHelper.handle(name, newValue);
         }
         connectedCallback() {
           var _a2;
@@ -6610,6 +6803,7 @@
         constructor() {
           super();
           this.collideableHelper = new CollideableHelper(this);
+          this.clickableHelper = new ClickableHelper();
           this.labelAnimatedAttributeHelper = new AnimatedAttributeHelper(this, {
             color: [
               2,
@@ -6689,7 +6883,8 @@
           return [
             ...TransformableElement.observedAttributes,
             ..._Label2.attributeHandler.getAttributes(),
-            ...CollideableHelper.observedAttributes
+            ...CollideableHelper.observedAttributes,
+            ...ClickableHelper.observedAttributes
           ];
         }
         getContentBounds() {
@@ -6712,7 +6907,7 @@
         parentTransformed() {
         }
         isClickable() {
-          return true;
+          return this.clickableHelper.isClickable();
         }
         attributeChangedCallback(name, oldValue, newValue) {
           if (!this.labelGraphics) {
@@ -6721,6 +6916,7 @@
           super.attributeChangedCallback(name, oldValue, newValue);
           _Label2.attributeHandler.handle(this, name, newValue);
           this.collideableHelper.handle(name, newValue);
+          this.clickableHelper.handle(name, newValue);
         }
         connectedCallback() {
           var _a2;
@@ -7086,6 +7282,234 @@
         }
       });
       Link = _Link;
+      OverlayAnchor = /* @__PURE__ */ ((OverlayAnchor2) => {
+        OverlayAnchor2["top-left"] = "top-left";
+        OverlayAnchor2["top-center"] = "top-center";
+        OverlayAnchor2["top-right"] = "top-right";
+        OverlayAnchor2["center-left"] = "center-left";
+        OverlayAnchor2["center"] = "center";
+        OverlayAnchor2["center-right"] = "center-right";
+        OverlayAnchor2["bottom-left"] = "bottom-left";
+        OverlayAnchor2["bottom-center"] = "bottom-center";
+        OverlayAnchor2["bottom-right"] = "bottom-right";
+        return OverlayAnchor2;
+      })(OverlayAnchor || {});
+      _Overlay = class _Overlay2 extends TransformableElement {
+        constructor() {
+          super();
+          this.overlayGraphics = null;
+          this.overlayElement = null;
+          this.mode = "pending";
+          this.props = {
+            href: null,
+            target: null,
+            anchor: "top-left",
+            offsetX: 0,
+            offsetY: 0
+          };
+        }
+        static get observedAttributes() {
+          return [
+            ...TransformableElement.observedAttributes,
+            ..._Overlay2.attributeHandler.getAttributes()
+          ];
+        }
+        updateOverlayElementPosition() {
+          if (!this.overlayElement) {
+            return;
+          }
+          this.overlayElement.style.position = "absolute";
+          this.overlayElement.style.zIndex = "1000";
+          switch (this.props.anchor) {
+            case "top-left":
+              this.overlayElement.style.top = `0`;
+              this.overlayElement.style.left = `0`;
+              this.overlayElement.style.right = ``;
+              this.overlayElement.style.bottom = ``;
+              this.overlayElement.style.transformOrigin = "top left";
+              this.overlayElement.style.transform = `translateX(calc(${this.props.offsetX}px)) translateY(${this.props.offsetY}px)`;
+              break;
+            case "top-center":
+              this.overlayElement.style.top = `0`;
+              this.overlayElement.style.left = `50%`;
+              this.overlayElement.style.right = ``;
+              this.overlayElement.style.bottom = ``;
+              this.overlayElement.style.transformOrigin = "top center";
+              this.overlayElement.style.transform = `translateX(calc(-50% + ${this.props.offsetX}px)) translateY(${this.props.offsetY}px)`;
+              break;
+            case "top-right":
+              this.overlayElement.style.top = `0`;
+              this.overlayElement.style.right = `0`;
+              this.overlayElement.style.left = ``;
+              this.overlayElement.style.bottom = ``;
+              this.overlayElement.style.transformOrigin = "top right";
+              this.overlayElement.style.transform = `translateX(${this.props.offsetX}px) translateY(${this.props.offsetY}px)`;
+              break;
+            case "center-left":
+              this.overlayElement.style.top = "50%";
+              this.overlayElement.style.left = `0`;
+              this.overlayElement.style.right = ``;
+              this.overlayElement.style.bottom = ``;
+              this.overlayElement.style.transformOrigin = "center left";
+              this.overlayElement.style.transform = `translateX(calc(${this.props.offsetX}px)) translateY(calc(-50% + ${this.props.offsetY}px))`;
+              break;
+            case "center":
+              this.overlayElement.style.top = "50%";
+              this.overlayElement.style.left = "50%";
+              this.overlayElement.style.right = ``;
+              this.overlayElement.style.bottom = ``;
+              this.overlayElement.style.transformOrigin = "center";
+              this.overlayElement.style.transform = `translate(calc(-50% + ${this.props.offsetX}px), calc(-50% + ${this.props.offsetY}px))`;
+              break;
+            case "center-right":
+              this.overlayElement.style.top = "50%";
+              this.overlayElement.style.left = "100%";
+              this.overlayElement.style.right = ``;
+              this.overlayElement.style.bottom = ``;
+              this.overlayElement.style.transformOrigin = "center right";
+              this.overlayElement.style.transform = `translateX(calc(-100% + ${this.props.offsetX}px)) translateY(calc(-50% + ${this.props.offsetY}px))`;
+              break;
+            case "bottom-left":
+              this.overlayElement.style.top = "100%";
+              this.overlayElement.style.left = `${this.props.offsetX}px`;
+              this.overlayElement.style.right = ``;
+              this.overlayElement.style.bottom = ``;
+              this.overlayElement.style.transformOrigin = "bottom left";
+              this.overlayElement.style.transform = `translateX(${this.props.offsetX}px) translateY(calc(-100% + ${this.props.offsetY}px))`;
+              break;
+            case "bottom-center":
+              this.overlayElement.style.top = "100%";
+              this.overlayElement.style.left = "50%";
+              this.overlayElement.style.right = ``;
+              this.overlayElement.style.bottom = ``;
+              this.overlayElement.style.transformOrigin = "bottom center";
+              this.overlayElement.style.transform = `translateX(calc(-50% + ${this.props.offsetX}px)) translateY(calc(-100% + ${this.props.offsetY}px))`;
+              break;
+            case "bottom-right":
+              this.overlayElement.style.top = "100%";
+              this.overlayElement.style.left = "100%";
+              this.overlayElement.style.right = ``;
+              this.overlayElement.style.bottom = ``;
+              this.overlayElement.style.transformOrigin = "bottom right";
+              this.overlayElement.style.transform = `translateX(calc(-100% + ${this.props.offsetX}px)) translateY(calc(-100% + ${this.props.offsetY}px))`;
+              break;
+            default:
+              throw new Error(`Unknown anchor: ${this.props.anchor}`);
+          }
+        }
+        getPortalElement() {
+          if (this.mode === "direct") {
+            return this;
+          } else if (this.mode === "portal") {
+            if (!this.overlayElement) {
+              throw new Error("Overlay element is not set");
+            }
+            return this.overlayElement;
+          }
+          throw new Error("Unknown overlay mode");
+        }
+        parentTransformed() {
+        }
+        isClickable() {
+          return false;
+        }
+        attributeChangedCallback(name, oldValue, newValue) {
+          if (!this.transformableElementGraphics) {
+            return;
+          }
+          super.attributeChangedCallback(name, oldValue, newValue);
+          _Overlay2.attributeHandler.handle(this, name, newValue);
+        }
+        disable() {
+        }
+        enable() {
+        }
+        getContentBounds() {
+          return null;
+        }
+        connectedCallback() {
+          var _a2, _b2;
+          super.connectedCallback();
+          if (!this.getScene().hasGraphicsAdapter() || this.overlayGraphics) {
+            return;
+          }
+          const remoteDocument = this.getInitiatedRemoteDocument();
+          if (remoteDocument) {
+            this.mode = "portal";
+            this.overlayElement = document.createElement("div");
+            this.overlayElement.addEventListener("click", (event) => {
+              event.stopImmediatePropagation();
+              event.preventDefault();
+              const remoteDocument2 = this.getInitiatedRemoteDocument();
+              if (remoteDocument2) {
+                remoteDocument2.dispatchEvent(
+                  new CustomEvent(consumeEventEventName, {
+                    bubbles: false,
+                    detail: { element: event.target, originalEvent: event }
+                  })
+                );
+              }
+            });
+            const parentElement = (_b2 = (_a2 = this.getScene()).getOverlayElement) == null ? void 0 : _b2.call(_a2);
+            if (parentElement) {
+              parentElement.appendChild(this.overlayElement);
+            } else {
+              console.warn(
+                "An m-overlay element was found but getOverlayElement was not provided by the scene"
+              );
+            }
+            for (const child of Array.from(this.childNodes)) {
+              this.overlayElement.appendChild(child);
+            }
+          } else {
+            this.mode = "direct";
+            this.overlayElement = this;
+          }
+          const graphicsAdapter = this.getScene().getGraphicsAdapter();
+          this.overlayGraphics = graphicsAdapter.getGraphicsAdapterFactory().MMLOverlayGraphicsInterface(this);
+          for (const name of _Overlay2.observedAttributes) {
+            const value = this.getAttribute(name);
+            if (value !== null) {
+              this.attributeChangedCallback(name, null, value);
+            }
+          }
+          this.updateOverlayElementPosition();
+        }
+        disconnectedCallback() {
+          var _a2, _b2;
+          (_a2 = this.overlayGraphics) == null ? void 0 : _a2.dispose();
+          this.overlayGraphics = null;
+          (_b2 = this.overlayElement) == null ? void 0 : _b2.remove();
+          super.disconnectedCallback();
+        }
+      };
+      _Overlay.tagName = "m-overlay";
+      _Overlay.attributeHandler = new AttributeHandler({
+        href: (instance, newValue) => {
+          instance.props.href = newValue !== null ? newValue : null;
+        },
+        target: (instance, newValue) => {
+          instance.props.target = newValue !== null ? newValue : null;
+        },
+        anchor: (instance, newValue) => {
+          instance.props.anchor = parseEnumAttribute(
+            newValue,
+            OverlayAnchor,
+            "top-left"
+            /* top-left */
+          );
+          instance.updateOverlayElementPosition();
+        },
+        "offset-x": (instance, newValue) => {
+          instance.props.offsetX = parseFloatAttribute(newValue, 0);
+          instance.updateOverlayElementPosition();
+        },
+        "offset-y": (instance, newValue) => {
+          instance.props.offsetY = parseFloatAttribute(newValue, 0);
+          instance.updateOverlayElementPosition();
+        }
+      });
+      Overlay = _Overlay;
       defaultPlaneColor = { r: 1, g: 1, b: 1 };
       defaultPlaneWidth = 1;
       defaultPlaneHeight = 1;
@@ -7144,6 +7568,7 @@
             ]
           });
           this.collideableHelper = new CollideableHelper(this);
+          this.clickableHelper = new ClickableHelper();
         }
         enable() {
           this.collideableHelper.enable();
@@ -7164,7 +7589,8 @@
           return [
             ...TransformableElement.observedAttributes,
             ..._Plane2.attributeHandler.getAttributes(),
-            ...CollideableHelper.observedAttributes
+            ...CollideableHelper.observedAttributes,
+            ...ClickableHelper.observedAttributes
           ];
         }
         addSideEffectChild(child) {
@@ -7179,7 +7605,7 @@
           this.collideableHelper.parentTransformed();
         }
         isClickable() {
-          return true;
+          return this.clickableHelper.isClickable();
         }
         attributeChangedCallback(name, oldValue, newValue) {
           if (!this.planeGraphics) {
@@ -7188,6 +7614,7 @@
           super.attributeChangedCallback(name, oldValue, newValue);
           _Plane2.attributeHandler.handle(this, name, newValue);
           this.collideableHelper.handle(name, newValue);
+          this.clickableHelper.handle(name, newValue);
         }
         connectedCallback() {
           var _a2;
@@ -7639,11 +8066,7 @@
           super.disconnectedCallback();
         }
         dispatchEvent(event) {
-          if (this.contains(event.detail.element)) {
-            return HTMLElement.prototype.dispatchEvent.call(this, event);
-          } else {
-            return false;
-          }
+          return HTMLElement.prototype.dispatchEvent.call(this, event);
         }
         init(mmlScene, documentAddress) {
           if (this.scene) {
@@ -7715,6 +8138,7 @@
             ]
           });
           this.collideableHelper = new CollideableHelper(this);
+          this.clickableHelper = new ClickableHelper();
         }
         enable() {
           this.collideableHelper.enable();
@@ -7735,7 +8159,8 @@
           return [
             ...TransformableElement.observedAttributes,
             ..._Sphere2.attributeHandler.getAttributes(),
-            ...CollideableHelper.observedAttributes
+            ...CollideableHelper.observedAttributes,
+            ...ClickableHelper.observedAttributes
           ];
         }
         addSideEffectChild(child) {
@@ -7750,7 +8175,7 @@
           this.collideableHelper.parentTransformed();
         }
         isClickable() {
-          return true;
+          return this.clickableHelper.isClickable();
         }
         attributeChangedCallback(name, oldValue, newValue) {
           if (!this.sphereGraphics) {
@@ -7759,6 +8184,7 @@
           super.attributeChangedCallback(name, oldValue, newValue);
           _Sphere2.attributeHandler.handle(this, name, newValue);
           this.collideableHelper.handle(name, newValue);
+          this.clickableHelper.handle(name, newValue);
         }
         connectedCallback() {
           super.connectedCallback();
@@ -7855,6 +8281,7 @@
             ]
           });
           this.collideableHelper = new CollideableHelper(this);
+          this.clickableHelper = new ClickableHelper();
           this.props = {
             startTime: defaultVideoStartTime,
             pauseTime: defaultVideoPauseTime,
@@ -7872,7 +8299,8 @@
           return [
             ...TransformableElement.observedAttributes,
             ..._Video2.attributeHandler.getAttributes(),
-            ...CollideableHelper.observedAttributes
+            ...CollideableHelper.observedAttributes,
+            ...ClickableHelper.observedAttributes
           ];
         }
         enable() {
@@ -7905,7 +8333,7 @@
           this.collideableHelper.parentTransformed();
         }
         isClickable() {
-          return true;
+          return this.clickableHelper.isClickable();
         }
         attributeChangedCallback(name, oldValue, newValue) {
           if (!this.videoGraphics) {
@@ -7914,6 +8342,7 @@
           super.attributeChangedCallback(name, oldValue, newValue);
           _Video2.attributeHandler.handle(this, name, newValue);
           this.collideableHelper.handle(name, newValue);
+          this.clickableHelper.handle(name, newValue);
         }
         documentTimeChanged() {
           var _a2;
@@ -8687,6 +9116,12 @@
           this.loadingProgressBar.dispose();
           this.createLoadingProgressBar();
         }
+        getOverlayElement() {
+          if (this.options.allowOverlay) {
+            return this.element;
+          }
+          return null;
+        }
         configureWindowStyling() {
           document.documentElement.style.width = "100%";
           document.documentElement.style.height = "100%";
@@ -8780,6 +9215,11 @@
         constructor(element, updateMeshCallback) {
         }
       };
+      OverlayGraphics = class {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        constructor(element) {
+        }
+      };
       PlaneGraphics = class {
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         constructor(element) {
@@ -8902,7 +9342,9 @@
                 this.options.statusUpdated(status);
               },
               {
-                tagPrefix: "m-"
+                tagPrefix: "m-",
+                // If overlays are allowed, allow SVG elements to populate them
+                allowSVGElements: this.options.allowOverlay
               }
             );
             this.websocket = websocket;
@@ -9475,6 +9917,17 @@
             parentModelUpdated: () => {
             }
           }
+        ),
+        MMLOverlayGraphicsInterface: TagDebugAdapterElement(
+          {
+            setAnchor: "anchor",
+            setOffsetX: "offset-x",
+            setOffsetY: "offset-y"
+          },
+          {
+            dispose: () => {
+            }
+          }
         )
       };
       StandaloneTagDebugAdapter = class _StandaloneTagDebugAdapter {
@@ -68199,7 +68652,7 @@ ${DracoWorker.toString()}
       // w
     ];
   }
-  var mouseMovePixelsThreshold2, mouseMoveTimeThresholdMilliseconds2, PlayCanvasClickTrigger, PlayCanvasAnimation, _PlayCanvasAudio, PlayCanvasAudio, PlayCanvasChatProbe, PlayCanvasCube, PlayCanvasCylinder, PlayCanvasDebugHelper, PlayCanvasFrame, PlayCanvasImage, PlayCanvasInteraction, PlayCanvasLabel, lightIntensityFactor, lightLuminanceFactor, PlayCanvasLight, PlayCanvasLink, PlayCanvasMElement, PlayCanvasModel, PlayCanvasPlane, PlayCanvasPositionProbe, PlayCanvasPrompt, reconnectingStatus2, PlayCanvasRemoteDocument, PlayCanvasSphere, halfToRad, PlayCanvasTransformable, audioRefDistance3, audioRolloffFactor3, PlayCanvasVideo, PlayCanvasGraphicsInterface, PlayCanvasInteractionAdapter;
+  var mouseMovePixelsThreshold2, mouseMoveTimeThresholdMilliseconds2, PlayCanvasClickTrigger, PlayCanvasAnimation, _PlayCanvasAudio, PlayCanvasAudio, PlayCanvasChatProbe, PlayCanvasCube, PlayCanvasCylinder, PlayCanvasDebugHelper, PlayCanvasFrame, PlayCanvasImage, PlayCanvasInteraction, PlayCanvasLabel, lightIntensityFactor, lightLuminanceFactor, PlayCanvasLight, PlayCanvasLink, PlayCanvasMElement, PlayCanvasModel, PlayCanvasOverlay, PlayCanvasPlane, PlayCanvasPositionProbe, PlayCanvasPrompt, reconnectingStatus2, PlayCanvasRemoteDocument, PlayCanvasSphere, halfToRad, PlayCanvasTransformable, audioRefDistance3, audioRolloffFactor3, PlayCanvasVideo, PlayCanvasGraphicsInterface, PlayCanvasInteractionAdapter;
   var init_build4 = __esm({
     "../mml-web-playcanvas/build/index.js"() {
       init_build3();
@@ -68240,6 +68693,7 @@ ${DracoWorker.toString()}
       init_src();
       init_build3();
       init_build3();
+      init_build3();
       init_src();
       init_build3();
       init_src();
@@ -68314,20 +68768,22 @@ ${DracoWorker.toString()}
             console.warn("No rigidbody system found in the PlayCanvas app. Cannot raycast.");
             return;
           }
-          const result = rigidbodySystem.raycastFirst(from, to);
-          if (result) {
-            const hitEntity = result.entity;
-            let mElement;
-            for (let entity = hitEntity; entity; entity = entity.parent) {
-              mElement = MElement.getMElementFromObject(entity);
-              if (mElement) {
-                break;
+          const intersections = rigidbodySystem.raycastAll(from, to);
+          intersections.sort((a, b) => a.point.distance(from) - b.point.distance(from));
+          for (const intersection of intersections) {
+            let obj = intersection.entity;
+            currentIntersection: while (obj) {
+              const mElement = MElement.getMElementFromObject(obj);
+              if (!mElement) {
+                obj = obj.parent;
+                continue currentIntersection;
+              }
+              if (!mElement.isClickable()) {
+                break currentIntersection;
               }
-            }
-            if (mElement && TransformableElement.isTransformableElement(mElement) && mElement.isClickable()) {
               const elementRelative = getRelativePositionAndRotationRelativeToObject(
                 {
-                  position: result.point,
+                  position: intersection.point,
                   rotation: {
                     x: 0,
                     y: 0,
@@ -70690,6 +71146,24 @@ ${DracoWorker.toString()}
           }
         }
       };
+      PlayCanvasOverlay = class extends OverlayGraphics {
+        constructor(overlay) {
+          super(overlay);
+          this.overlay = overlay;
+        }
+        disable() {
+        }
+        enable() {
+        }
+        setAnchor() {
+        }
+        setOffsetX() {
+        }
+        setOffsetY() {
+        }
+        dispose() {
+        }
+      };
       PlayCanvasPlane = class extends PlaneGraphics {
         constructor(plane) {
           super(plane);
@@ -71353,6 +71827,7 @@ ${DracoWorker.toString()}
         MMLLabelGraphicsInterface: (element) => new PlayCanvasLabel(element),
         MMLLightGraphicsInterface: (element) => new PlayCanvasLight(element),
         MMLLinkGraphicsInterface: (element) => new PlayCanvasLink(element),
+        MMLOverlayGraphicsInterface: (element) => new PlayCanvasOverlay(element),
         MMLModelGraphicsInterface: (element, updateMeshCallback) => new PlayCanvasModel(element, updateMeshCallback),
         MMLPlaneGraphicsInterface: (element) => new PlayCanvasPlane(element),
         MMLPositionProbeGraphicsInterface: (element) => new PlayCanvasPositionProbe(element),
@@ -110233,6 +110708,7 @@ void main() {
   init_build3();
   init_build3();
   init_build3();
+  init_build3();
   var _ThreeJSAnimation = class _ThreeJSAnimation2 extends AnimationGraphics {
     constructor(animation) {
       super(animation);
@@ -112443,6 +112919,24 @@ void main() {
     opacity: 0.3
   });
   var ThreeJSModel = _ThreeJSModel;
+  var ThreeJSOverlay = class extends OverlayGraphics {
+    constructor(overlay) {
+      super(overlay);
+      this.overlay = overlay;
+    }
+    disable() {
+    }
+    enable() {
+    }
+    setAnchor() {
+    }
+    setOffsetX() {
+    }
+    setOffsetY() {
+    }
+    dispose() {
+    }
+  };
   var _ThreeJSPlane = class _ThreeJSPlane2 extends PlaneGraphics {
     constructor(plane) {
       super(plane);
@@ -113031,36 +113525,40 @@ void main() {
       if (intersections.length > 0) {
         for (const intersection of intersections) {
           let obj = intersection.object;
-          while (obj) {
+          currentIntersection: while (obj) {
             if (this.isMaterialIgnored(obj)) {
-              break;
+              break currentIntersection;
             }
             const mElement = MElement.getMElementFromObject(obj);
-            if (mElement && TransformableElement.isTransformableElement(mElement) && mElement.isClickable()) {
-              const elementRelative = getRelativePositionAndRotationRelativeToObject(
-                {
-                  position: intersection.point,
-                  rotation: {
-                    x: 0,
-                    y: 0,
-                    z: 0
-                  }
-                },
-                mElement
-              );
-              mElement.dispatchEvent(
-                new CustomEvent("click", {
-                  bubbles: true,
-                  detail: {
-                    position: {
-                      ...elementRelative.position
-                    }
-                  }
-                })
-              );
-              return;
+            if (!mElement) {
+              obj = obj.parent;
+              continue currentIntersection;
+            }
+            if (!mElement.isClickable()) {
+              break currentIntersection;
             }
-            obj = obj.parent;
+            const elementRelative = getRelativePositionAndRotationRelativeToObject(
+              {
+                position: intersection.point,
+                rotation: {
+                  x: 0,
+                  y: 0,
+                  z: 0
+                }
+              },
+              mElement
+            );
+            mElement.dispatchEvent(
+              new CustomEvent("click", {
+                bubbles: true,
+                detail: {
+                  position: {
+                    ...elementRelative.position
+                  }
+                }
+              })
+            );
+            return;
           }
         }
       }
@@ -113071,7 +113569,7 @@ void main() {
     isMaterialIgnored(obj) {
       const mesh = obj;
       if (mesh) {
-        if (mesh.material && mesh.material.transparent && mesh.material.opacity < 1 || mesh.material && mesh.material.wireframe || mesh.material && mesh.material.wireframe || mesh.material && mesh.material.wireframe || mesh.material && mesh.material.wireframe || mesh.material && mesh.material.isLineBasicMaterial) {
+        if (mesh.material && mesh.material.wireframe || mesh.material && mesh.material.wireframe || mesh.material && mesh.material.wireframe || mesh.material && mesh.material.wireframe || mesh.material && mesh.material.isLineBasicMaterial) {
           return true;
         }
       }
@@ -113090,6 +113588,7 @@ void main() {
     MMLInteractionGraphicsInterface: (element) => new ThreeJSInteraction(element),
     MMLLabelGraphicsInterface: (element) => new ThreeJSLabel(element),
     MMLLightGraphicsInterface: (element) => new ThreeJSLight(element),
+    MMLOverlayGraphicsInterface: (element) => new ThreeJSOverlay(element),
     MMLLinkGraphicsInterface: (element) => new ThreeJSLink(element),
     MMLModelGraphicsInterface: (element, updateMeshCallback) => new ThreeJSModel(element, updateMeshCallback),
     MMLPlaneGraphicsInterface: (element) => new ThreeJSPlane(element),
@@ -113733,17 +114232,22 @@ void main() {
         });
       }
     }
+    const urlSearchParams = new URLSearchParams(window.location.search);
+    const useIframe = scriptUrl.searchParams.get("iframe") === "true" || urlSearchParams.get("iframe") === "true";
+    const allowOverlay = scriptUrl.searchParams.get("allowOverlay") === "true" || urlSearchParams.get("allowOverlay") === "true";
+    const fullScreenMMLSceneOptions = {
+      allowOverlay
+    };
     const url = scriptUrl.searchParams.get("url");
     if (!url) {
-      configureWindowForMML(window, getGraphicsAdapter);
+      configureWindowForMML(window, getGraphicsAdapter, fullScreenMMLSceneOptions);
       return;
     }
     window.addEventListener("load", async () => {
-      const fullScreenMMLScene = new FullScreenMMLScene();
+      const fullScreenMMLScene = new FullScreenMMLScene(fullScreenMMLSceneOptions);
       document.body.append(fullScreenMMLScene.element);
       const graphicsAdapter = await getGraphicsAdapter(fullScreenMMLScene.element);
       fullScreenMMLScene.init(graphicsAdapter);
-      const useIframe = new URL(window.location.href).searchParams.get("iframe") === "true";
       let targetForWrappers;
       let windowTarget;
       if (useIframe) {
@@ -113768,7 +114272,8 @@ void main() {
           }
         },
         windowTarget,
-        targetForWrappers
+        targetForWrappers,
+        allowOverlay
       });
       const defineGlobals = scriptUrl.searchParams.get("defineGlobals") === "true";
       if (defineGlobals) {