@babylonjs/inspector 9.9.1 → 9.9.2

package/lib/{index-UoPnMkyH.js → index--oJsOVVX.js}

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { createContext, forwardRef, useContext, useState, useCallback, Component, useMemo, useEffect, useRef, useReducer, Children, isValidElement, useLayoutEffect, useImperativeHandle, cloneElement, createElement, Suspense, memo, Fragment as Fragment$1, lazy } from 'react';
-import { tokens, makeStyles, Tooltip as Tooltip$1, Button as Button$1, Spinner, Link as Link$1, Caption1, Body1, useFluent, Accordion as Accordion$1, AccordionHeader, Subtitle2Stronger, AccordionPanel, Divider, MessageBar as MessageBar$1, MessageBarBody, AccordionItem, SearchBox as SearchBox$1, Portal, ToggleButton as ToggleButton$1, InfoLabel as InfoLabel$1, Body1Strong, mergeClasses, useId, useToastController, Toast, ToastTitle, FluentProvider, Toaster, Checkbox as Checkbox$1, createLightTheme, createDarkTheme, TeachingPopover, TeachingPopoverSurface, TeachingPopoverHeader, TeachingPopoverBody, createDOMRenderer, RendererProvider, Menu, MenuTrigger, SplitButton, MenuPopover, MenuList, MenuItem, Toolbar as Toolbar$1, ToolbarRadioButton, MenuGroup, MenuGroupHeader, Switch as Switch$1, treeItemLevelToken, FlatTree, FlatTreeItem, TreeItemLayout, MenuDivider, MenuItemCheckbox, useMergedRefs, Input, Dropdown as Dropdown$1, Option, Popover as Popover$1, PopoverTrigger, PopoverSurface, ColorPicker, ColorArea, ColorSlider, AlphaSlider, ColorSwatch, PresenceBadge, Slider as Slider$1, MenuItemRadio, Dialog as Dialog$1, DialogSurface, DialogBody, DialogTitle, DialogContent, DialogActions, List as List$1, ListItem, Badge, Label, MessageBarTitle, useComboboxFilter, Combobox, Subtitle2, Textarea as Textarea$1, ToolbarButton, ToolbarDivider, DialogTrigger, Field } from '@fluentui/react-components';
-import { ErrorCircleRegular, EyeFilled, EyeOffRegular, CheckmarkFilled, EditRegular, FilterRegular, PinFilled, PinRegular, ArrowCircleUpRegular, ChevronCircleRight16Regular, ChevronCircleRight20Regular, ChevronCircleDown16Regular, ChevronCircleDown20Regular, Copy16Regular, CopyRegular, PanelLeftExpandRegular, PanelRightExpandRegular, PanelLeftContractRegular, PanelRightContractRegular, PictureInPictureEnterRegular, MoreHorizontalRegular, LayoutColumnTwoFocusLeftFilled, LayoutColumnTwoSplitLeftFocusTopLeftFilled, LayoutColumnTwoSplitLeftFocusBottomLeftFilled, LayoutColumnTwoFocusRightFilled, LayoutColumnTwoSplitRightFocusTopRightFilled, LayoutColumnTwoSplitRightFocusBottomRightFilled, SettingsRegular, DocumentTextRegular, createFluentIcon, TextSortAscendingRegular, GlobeRegular, WarningRegular, ArrowExpandAllRegular, ArrowCollapseAllRegular, CubeTreeRegular, BugRegular, ArrowUploadRegular, ArrowBidirectionalUpDownFilled, ArrowDownloadRegular, StopRegular, RecordRegular, DataBarHorizontalRegular, WrenchRegular, ArrowClockwiseRegular, WeatherSunnyRegular, WeatherMoonRegular, PlugDisconnectedRegular, PlugConnectedRegular, PlugConnectedCheckmarkRegular, ArrowRotateClockwiseRegular, ArrowExpandRegular, SelectObjectRegular, CubeRegular, CameraRegular, AddRegular, DeleteRegular, FullScreenMaximizeRegular, ChevronDownRegular, ChevronRightRegular, CircleSmallFilled, SaveRegular, PreviousRegular, ArrowPreviousRegular, TriangleLeftRegular, RecordStopRegular, PlayRegular, ArrowNextRegular, NextRegular, PauseRegular, LinkDismissRegular, LinkEditRegular, ArrowUndoRegular, BracesRegular, BracesDismiss16Regular, EyeRegular, CloudArrowUpRegular, CloudArrowDownRegular, EyeOffFilled, ArrowMoveFilled, StopFilled, PlayFilled, LockOpenRegular, LockClosedRegular, ResizeRegular, ChevronUpRegular, ArrowResetRegular, CircleHalfFillRegular, EyedropperRegular, PaintBucketRegular, InkStrokeRegular, StackRegular, FilmstripRegular, PauseFilled, WeatherSunnyLowFilled, LayerRegular, FrameRegular, AppGenericRegular, RectangleLandscapeRegular, BorderOutsideRegular, BorderNoneRegular, MyLocationRegular, BubbleMultipleRegular, LightbulbRegular, VideoFilled, VideoRegular, FlashlightRegular, FlashlightOffRegular, DropRegular, BlurRegular, PipelineRegular, PersonWalkingRegular, DataLineRegular, SoundWaveCircleRegular, PersonSquareRegular, LayerDiagonalPersonRegular, ImageEditRegular, ImageRegular, LinkRegular, ArrowSyncRegular, TargetRegular, PersonFeedbackRegular, DismissRegular, BranchRegular, DeleteFilled } from '@fluentui/react-icons';
+import { tokens, makeStyles, Tooltip as Tooltip$1, Button as Button$1, Spinner, Link as Link$1, Caption1, Body1, useFluent, Accordion as Accordion$1, AccordionHeader, Subtitle2Stronger, AccordionPanel, Divider, MessageBar as MessageBar$1, MessageBarBody, AccordionItem, SearchBox as SearchBox$1, Portal, ToggleButton as ToggleButton$1, InfoLabel as InfoLabel$1, Body1Strong, mergeClasses, useId, useToastController, Toast, ToastTitle, FluentProvider, Toaster, Checkbox as Checkbox$1, createLightTheme, createDarkTheme, createDOMRenderer, RendererProvider, TeachingPopover, TeachingPopoverSurface, TeachingPopoverHeader, TeachingPopoverBody, Menu, MenuTrigger, SplitButton, MenuPopover, MenuList, MenuItem, Toolbar as Toolbar$1, ToolbarRadioButton, MenuGroup, MenuGroupHeader, Switch as Switch$1, treeItemLevelToken, typographyStyles, FlatTree, FlatTreeItem, TreeItemLayout, MenuDivider, MenuItemCheckbox, useMergedRefs, Input, Dropdown as Dropdown$1, Option, Popover as Popover$1, PopoverTrigger, PopoverSurface, ColorPicker, ColorArea, ColorSlider, AlphaSlider, ColorSwatch, PresenceBadge, Slider as Slider$1, MenuItemRadio, Dialog as Dialog$1, DialogSurface, DialogBody, DialogTitle, DialogContent, DialogActions, List as List$1, ListItem, Badge, Label, MessageBarTitle, useComboboxFilter, Combobox, Subtitle2, Textarea as Textarea$1, ToolbarButton, ToolbarDivider, DialogTrigger, Field } from '@fluentui/react-components';
+import { ErrorCircleRegular, EyeFilled, EyeOffRegular, CheckmarkFilled, EditRegular, FilterRegular, PinFilled, PinRegular, ArrowCircleUpRegular, ChevronCircleRight16Regular, ChevronCircleRight20Regular, ChevronCircleDown16Regular, ChevronCircleDown20Regular, Copy16Regular, CopyRegular, PanelLeftExpandRegular, PanelRightExpandRegular, PanelLeftContractRegular, PanelRightContractRegular, PictureInPictureEnterRegular, MoreHorizontalRegular, LayoutColumnTwoFocusLeftFilled, LayoutColumnTwoSplitLeftFocusTopLeftFilled, LayoutColumnTwoSplitLeftFocusBottomLeftFilled, LayoutColumnTwoFocusRightFilled, LayoutColumnTwoSplitRightFocusTopRightFilled, LayoutColumnTwoSplitRightFocusBottomRightFilled, SettingsRegular, DocumentTextRegular, createFluentIcon, TextSortAscendingRegular, GlobeRegular, WarningRegular, ArrowExpandAllRegular, ArrowCollapseAllRegular, CubeTreeRegular, BugRegular, ArrowUploadRegular, ArrowBidirectionalUpDownFilled, ArrowDownloadRegular, StopRegular, RecordRegular, DataBarHorizontalRegular, WrenchRegular, ArrowClockwiseRegular, WeatherSunnyRegular, WeatherMoonRegular, InfoRegular, CheckmarkCircleRegular, PlugDisconnectedRegular, PlugConnectedRegular, PlugConnectedCheckmarkRegular, ArrowRotateClockwiseRegular, ArrowExpandRegular, SelectObjectRegular, CubeRegular, CameraRegular, AddRegular, DeleteRegular, FullScreenMaximizeRegular, ChevronDownRegular, ChevronRightRegular, CircleSmallFilled, SaveRegular, PreviousRegular, ArrowPreviousRegular, TriangleLeftRegular, RecordStopRegular, PlayRegular, ArrowNextRegular, NextRegular, PauseRegular, LinkDismissRegular, LinkEditRegular, ArrowUndoRegular, BracesRegular, BracesDismiss16Regular, EyeRegular, CloudArrowUpRegular, CloudArrowDownRegular, EyeOffFilled, ArrowMoveFilled, StopFilled, PlayFilled, LockOpenRegular, LockClosedRegular, ResizeRegular, ChevronUpRegular, ArrowResetRegular, CircleHalfFillRegular, EyedropperRegular, PaintBucketRegular, InkStrokeRegular, StackRegular, FilmstripRegular, PauseFilled, WeatherSunnyLowFilled, HeadphonesSoundWaveRegular, ArrowEnterUpRegular, SoundWaveCircleRegular, SoundWaveCircleFilled, CatchUpRegular, LayerRegular, FrameRegular, AppGenericRegular, RectangleLandscapeRegular, BorderOutsideRegular, BorderNoneRegular, MyLocationRegular, BubbleMultipleRegular, LightbulbRegular, VideoFilled, VideoRegular, FlashlightRegular, FlashlightOffRegular, DropRegular, BlurRegular, PipelineRegular, PersonWalkingRegular, DataLineRegular, PersonSquareRegular, LayerDiagonalPersonRegular, ImageEditRegular, ImageRegular, LinkRegular, ArrowSyncRegular, TargetRegular, PersonFeedbackRegular, DismissRegular, BranchRegular, DeleteFilled } from '@fluentui/react-icons';
 import { Color3, Color4 } from '@babylonjs/core/Maths/math.color.js';
 import { Vector3, Quaternion, Matrix, Vector2, Vector4, TmpVectors } from '@babylonjs/core/Maths/math.vector.js';
 import { Observable } from '@babylonjs/core/Misc/observable.js';
@@ -42,6 +42,7 @@ import { FrameGraphUtils, FindMainCamera } from '@babylonjs/core/FrameGraph/fram
 import { CameraGizmo } from '@babylonjs/core/Gizmos/cameraGizmo.js';
 import { GizmoManager } from '@babylonjs/core/Gizmos/gizmoManager.js';
 import { LightGizmo } from '@babylonjs/core/Gizmos/lightGizmo.js';
+import { SpatialAudioGizmo } from '@babylonjs/core/Gizmos/spatialAudioGizmo.js';
 import { Light } from '@babylonjs/core/Lights/light.js';
 import { AbstractMesh } from '@babylonjs/core/Meshes/abstractMesh.js';
 import { Node as Node$1 } from '@babylonjs/core/node.js';
@@ -53,6 +54,13 @@ import { AnimationGroup, TargetedAnimation } from '@babylonjs/core/Animations/an
 import { Animation } from '@babylonjs/core/Animations/animation.js';
 import { AnimationPropertiesOverride } from '@babylonjs/core/Animations/animationPropertiesOverride.js';
 import { Sound } from '@babylonjs/core/Audio/sound.js';
+import { AbstractAudioBus } from '@babylonjs/core/AudioV2/abstractAudio/abstractAudioBus.js';
+import { AbstractSound } from '@babylonjs/core/AudioV2/abstractAudio/abstractSound.js';
+import { AbstractSoundSource } from '@babylonjs/core/AudioV2/abstractAudio/abstractSoundSource.js';
+import { AudioBus } from '@babylonjs/core/AudioV2/abstractAudio/audioBus.js';
+import { AudioEngineV2, OnAudioEngineV2CreatedObservable, LastCreatedAudioEngine } from '@babylonjs/core/AudioV2/abstractAudio/audioEngineV2.js';
+import { StaticSound } from '@babylonjs/core/AudioV2/abstractAudio/staticSound.js';
+import { StreamingSound } from '@babylonjs/core/AudioV2/abstractAudio/streamingSound.js';
 import { ArcRotateCamera } from '@babylonjs/core/Cameras/arcRotateCamera.js';
 import { FollowCamera } from '@babylonjs/core/Cameras/followCamera.js';
 import { FreeCamera } from '@babylonjs/core/Cameras/freeCamera.js';
@@ -135,6 +143,7 @@ import { EnvCubeTexture } from '@babylonjs/core/Materials/Textures/envCubeTextur
 import { MultiRenderTarget } from '@babylonjs/core/Materials/Textures/multiRenderTarget.js';
 import { RenderTargetTexture } from '@babylonjs/core/Materials/Textures/renderTargetTexture.js';
 import { ThinTexture } from '@babylonjs/core/Materials/Textures/thinTexture.js';
+import { MainAudioBus } from '@babylonjs/core/AudioV2/abstractAudio/mainAudioBus.js';
 import '@babylonjs/core/Rendering/boundingBoxRenderer.js';
 import '@babylonjs/core/PostProcesses/RenderPipeline/postProcessRenderPipelineManagerSceneComponent.js';
 import '@babylonjs/core/Sprites/spriteSceneComponent.js';
@@ -248,11 +257,11 @@ function ValidateColorHex(val) {
 // forwardRef wrapper to avoid "function components cannot be given refs" warning
 // FluentTooltip handles ref forwarding to children internally via applyTriggerPropsToChildren
 const Tooltip = forwardRef((props, _ref) => {
-    const { content, children } = props;
+    const { content, positioning, children } = props;
     if (!content) {
         return children;
     }
-    return (jsx(Tooltip$1, { relationship: "description", content: content, children: children }));
+    return (jsx(Tooltip$1, { relationship: "description", content: content, positioning: positioning, children: children }));
 });
 Tooltip.displayName = "Tooltip";
 
@@ -268,7 +277,7 @@ const Button = forwardRef((props, ref) => {
     const { size } = useContext(ToolContext);
     const classes = useButtonStyles();
     // eslint-disable-next-line @typescript-eslint/naming-convention
-    const { icon: Icon, label, onClick, disabled, className, title, ...buttonProps } = props;
+    const { icon: Icon, label, onClick, disabled, className, title, ariaLabel, ...buttonProps } = props;
     const [isOnClickBusy, setIsOnClickBusy] = useState(false);
     const handleOnClick = useCallback(async (e) => {
         const result = onClick?.(e);
@@ -283,11 +292,11 @@ const Button = forwardRef((props, ref) => {
         }
     }, [onClick]);
     const iconClass = size === "small" ? classes.smallIcon : classes.mediumIcon;
-    return (jsx(Tooltip, { content: title ?? "", children: jsx(Button$1, { ref: ref, iconPosition: "after", ...buttonProps, className: className, size: size, icon: isOnClickBusy ? jsx(Spinner, { size: "extra-tiny" }) : Icon && jsx(Icon, { className: iconClass }), onClick: handleOnClick, disabled: disabled || isOnClickBusy, children: label && props.label }) }));
+    return (jsx(Tooltip, { content: title ?? "", children: jsx(Button$1, { ref: ref, iconPosition: "after", ...buttonProps, className: className, size: size, "aria-label": ariaLabel ?? (!label ? title : undefined), icon: isOnClickBusy ? jsx(Spinner, { size: "extra-tiny" }) : Icon && jsx(Icon, { className: iconClass }), onClick: handleOnClick, disabled: disabled || isOnClickBusy, children: label && props.label }) }));
 });
 Button.displayName = "Button";
 
-const useStyles$10 = makeStyles({
+const useStyles$11 = makeStyles({
     root: {
         display: "flex",
         flexDirection: "column",
@@ -296,6 +305,9 @@ const useStyles$10 = makeStyles({
         padding: TokenMap.px20,
         backgroundColor: tokens.colorNeutralBackground1,
         color: tokens.colorNeutralForeground1,
+        // Claim the full row of the flex parent (e.g. shellService's central-content row)
+        // so the centered children sit in the middle of the available area, not at the left edge.
+        flex: 1,
         height: "100%",
         minHeight: "100px",
     },
@@ -368,7 +380,7 @@ class ErrorBoundary extends Component {
     }
 }
 function ErrorFallback({ error, onRetry }) {
-    const styles = useStyles$10();
+    const styles = useStyles$11();
     return (jsxs("div", { className: styles.root, children: [jsx(ErrorCircleRegular, { className: styles.icon }), jsx("div", { className: styles.title, children: "Something went wrong" }), jsx("div", { className: styles.message, children: "An error occurred in this component. You can try again or continue using other parts of the tool." }), jsx(Button, { label: "Try Again", appearance: "primary", onClick: onRetry }), error && jsx("div", { className: styles.details, children: error.message })] }));
 }
 
@@ -466,9 +478,13 @@ function InterceptProperty(target, propertyKey, hooks) {
         // Replace the property with a new one that calls the hooks in addition to the original getter and setter.
         !Reflect.defineProperty(target, propertyKey, {
             configurable: true,
-            get: getValue ? () => getValue.call(target) : undefined,
-            set: (newValue) => {
-                setValue.call(target, newValue);
+            get: getValue
+                ? function () {
+                    return getValue.call(this);
+                }
+                : undefined,
+            set: function (newValue) {
+                setValue.call(this, newValue);
                 for (const { afterSet } of hooksForKey) {
                     afterSet?.(newValue);
                 }
@@ -1369,7 +1385,7 @@ function useIsSectionEmpty(sectionId) {
     return hasItems;
 }
 
-const useStyles$$ = makeStyles({
+const useStyles$10 = makeStyles({
     accordion: {
         display: "flex",
         flexDirection: "column",
@@ -1461,7 +1477,7 @@ const useStyles$$ = makeStyles({
  */
 const AccordionMenuBar = () => {
     AccordionMenuBar.displayName = "AccordionMenuBar";
-    const classes = useStyles$$();
+    const classes = useStyles$10();
     const accordionCtx = useContext(AccordionContext);
     if (!accordionCtx) {
         return null;
@@ -1485,7 +1501,7 @@ const AccordionMenuBar = () => {
 const AccordionSectionBlock = (props) => {
     AccordionSectionBlock.displayName = "AccordionSectionBlock";
     const { children, sectionId } = props;
-    const classes = useStyles$$();
+    const classes = useStyles$10();
     const accordionCtx = useContext(AccordionContext);
     const { context: sectionContext, isEmpty } = useAccordionSectionBlockContext(props);
     if (accordionCtx) {
@@ -1505,7 +1521,7 @@ const AccordionSectionBlock = (props) => {
 const AccordionSectionItem = (props) => {
     AccordionSectionItem.displayName = "AccordionSectionItem";
     const { children, staticItem } = props;
-    const classes = useStyles$$();
+    const classes = useStyles$10();
     const accordionCtx = useContext(AccordionContext);
     const itemState = useAccordionSectionItemState(props);
     const [ctrlMode, setCtrlMode] = useState(false);
@@ -1545,7 +1561,7 @@ const AccordionSectionItem = (props) => {
  */
 const AccordionPinnedContainer = () => {
     AccordionPinnedContainer.displayName = "AccordionPinnedContainer";
-    const classes = useStyles$$();
+    const classes = useStyles$10();
     const accordionCtx = useContext(AccordionContext);
     return (jsx("div", { ref: accordionCtx?.pinnedContainerRef, className: classes.pinnedContainer, children: jsx(MessageBar$1, { className: classes.pinnedContainerEmpty, children: jsx(MessageBarBody, { children: "No pinned items" }) }) }));
 };
@@ -1556,7 +1572,7 @@ const AccordionPinnedContainer = () => {
  */
 const AccordionSearchBox = () => {
     AccordionSearchBox.displayName = "AccordionSearchBox";
-    const classes = useStyles$$();
+    const classes = useStyles$10();
     const accordionCtx = useContext(AccordionContext);
     if (!accordionCtx?.features.search) {
         return null;
@@ -1572,7 +1588,7 @@ const AccordionSearchBox = () => {
  */
 const AccordionSection = (props) => {
     AccordionSection.displayName = "AccordionSection";
-    const classes = useStyles$$();
+    const classes = useStyles$10();
     return jsx("div", { className: classes.panelDiv, children: props.children });
 };
 const StringAccordion = Accordion$1;
@@ -1580,7 +1596,7 @@ const Accordion = forwardRef((props, ref) => {
     Accordion.displayName = "Accordion";
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const { children, highlightSections, uniqueId, enablePinnedItems, enableHiddenItems, enableSearchItems, ...rest } = props;
-    const classes = useStyles$$();
+    const classes = useStyles$10();
     const { size } = useContext(ToolContext);
     const accordionCtx = useAccordionContext(props);
     const hasPinning = accordionCtx?.features.pinning ?? false;
@@ -1677,7 +1693,7 @@ const Collapse = (props) => {
     return (jsx(Collapse$1, { visible: props.visible, orientation: props.orientation, unmountOnExit: true, children: jsx("div", { className: `${classes.collapseContent} ${props.orientation === "horizontal" ? classes.horizontal : classes.vertical}`, children: props.children }) }));
 };
 
-const useStyles$_ = makeStyles({
+const useStyles$$ = makeStyles({
     button: {
         display: "flex",
         alignItems: "center",
@@ -1693,9 +1709,9 @@ const useStyles$_ = makeStyles({
  */
 const ToggleButton = (props) => {
     ToggleButton.displayName = "ToggleButton";
-    const { value, onChange, title, appearance = "subtle" } = props;
+    const { value, onChange, title, appearance = "subtle", ariaLabel } = props;
     const { size } = useContext(ToolContext);
-    const classes = useStyles$_();
+    const classes = useStyles$$();
     const [checked, setChecked] = useState(value);
     const toggle = useCallback(() => {
         setChecked((prevChecked) => {
@@ -1707,7 +1723,7 @@ const ToggleButton = (props) => {
     useEffect(() => {
         setChecked(props.value);
     }, [props.value]);
-    return (jsx(Tooltip, { content: title ?? "", children: jsx(ToggleButton$1, { className: classes.button, size: size, icon: checked ? jsx(props.checkedIcon, {}) : props.uncheckedIcon ? jsx(props.uncheckedIcon, {}) : jsx(props.checkedIcon, {}), appearance: appearance, checked: checked, onClick: toggle }) }));
+    return (jsx(Tooltip, { content: title ?? "", positioning: props.titlePositioning, children: jsx(ToggleButton$1, { className: classes.button, size: size, "aria-label": ariaLabel ?? title, icon: checked ? jsx(props.checkedIcon, {}) : props.uncheckedIcon ? jsx(props.uncheckedIcon, {}) : jsx(props.checkedIcon, {}), appearance: appearance, checked: checked, onClick: toggle }) }));
 };
 
 const useInfoLabelStyles = makeStyles({
@@ -2004,7 +2020,7 @@ const UXContextProvider = (props) => {
 function AsReadonlyArray(array) {
     return array;
 }
-const useStyles$Z = makeStyles({
+const useStyles$_ = makeStyles({
     rootDiv: {
         flex: 1,
         overflow: "hidden",
@@ -2019,7 +2035,7 @@ const useStyles$Z = makeStyles({
  * @returns The extensible accordion component.
  */
 function ExtensibleAccordion(props) {
-    const classes = useStyles$Z();
+    const classes = useStyles$_();
     const { children, sections, sectionContent, context, sectionsRef, ...rest } = props;
     const defaultSections = useMemo(() => {
         const defaultSections = [];
@@ -2144,7 +2160,7 @@ function ExtensibleAccordion(props) {
                     })] }) })) }));
 }
 
-const useStyles$Y = makeStyles({
+const useStyles$Z = makeStyles({
     paneRootDiv: {
         display: "flex",
         flex: 1,
@@ -2157,7 +2173,7 @@ const useStyles$Y = makeStyles({
  */
 const SidePaneContainer = forwardRef((props, ref) => {
     const { className, ...rest } = props;
-    const classes = useStyles$Y();
+    const classes = useStyles$Z();
     return (jsx("div", { className: mergeClasses(classes.paneRootDiv, className), ref: ref, ...rest, children: props.children }));
 });
 
@@ -2428,7 +2444,7 @@ function useTheme(invert = false) {
 }
 
 // Fluent doesn't apply styling to scrollbars by default, so provide our own reasonable default.
-const useStyles$X = makeStyles({
+const useStyles$Y = makeStyles({
     root: {
         scrollbarColor: `${tokens.colorNeutralForeground3} ${tokens.colorTransparentBackground}`,
     },
@@ -2436,19 +2452,42 @@ const useStyles$X = makeStyles({
 /**
  * A themed Fluent UI provider that applies the current theme mode (light or dark).
  * @param props Fluent provider props, plus an optional `invert` flag to swap the theme.
+ *              When `targetDocument` is provided and differs from the inherited Fluent
+ *              document (e.g. when rendering into a popup window), a Griffel renderer
+ *              scoped to that document is created so styles are injected into it.
+ *              When omitted, `targetDocument` is inherited from the ambient Fluent
+ *              context so nested Theme components do not lose cross-window targeting.
  * @returns The themed Fluent UI provider component.
  */
 const Theme = (props) => {
     // NOTE: We do not want to applyStylesToPortals by default. It makes classes flow into portals
     // (like popovers), and if those styles do things like disable overflow, they can completely
     // break any UI within the portal. Therefore, default to false.
-    const { invert = false, applyStylesToPortals = false, className, ...rest } = props;
+    const { invert = false, applyStylesToPortals = false, className, targetDocument: explicitTargetDocument, ...rest } = props;
     const theme = useTheme(invert);
-    const classes = useStyles$X();
-    return (jsx(FluentProvider, { theme: theme, className: mergeClasses(classes.root, className), applyStylesToPortals: applyStylesToPortals, ...rest, children: props.children }));
+    const classes = useStyles$Y();
+    // Resolve the target document from the explicit prop or fall back to the ambient Fluent context.
+    // This makes nested <Theme> components automatically inherit cross-window targeting from a
+    // top-level <Theme targetDocument={popupDocument}> wrapper.
+    const inheritedTargetDocument = useFluent().targetDocument;
+    const resolvedTargetDocument = explicitTargetDocument ?? inheritedTargetDocument;
+    // Only create a new Griffel renderer when the resolved document differs from the inherited
+    // one. In the common (main-window, no nesting) case, this leaves Fluent's default renderer
+    // and renderer provider in place — matching the original behaviour exactly.
+    const renderer = useMemo(() => {
+        if (resolvedTargetDocument && resolvedTargetDocument !== inheritedTargetDocument) {
+            return createDOMRenderer(resolvedTargetDocument);
+        }
+        return undefined;
+    }, [resolvedTargetDocument, inheritedTargetDocument]);
+    const fluent = (jsx(FluentProvider, { theme: theme, className: mergeClasses(classes.root, className), applyStylesToPortals: applyStylesToPortals, targetDocument: resolvedTargetDocument, ...rest, children: props.children }));
+    if (renderer && resolvedTargetDocument) {
+        return (jsx(RendererProvider, { renderer: renderer, targetDocument: resolvedTargetDocument, children: fluent }));
+    }
+    return fluent;
 };
 
-const useStyles$W = makeStyles({
+const useStyles$X = makeStyles({
     extensionTeachingPopover: {
         maxWidth: "320px",
     },
@@ -2459,7 +2498,7 @@ const useStyles$W = makeStyles({
  * @returns The teaching moment popover.
  */
 const TeachingMoment = ({ shouldDisplay, positioningRef, onOpenChange, title, description }) => {
-    const classes = useStyles$W();
+    const classes = useStyles$X();
     return (jsx(TeachingPopover, { appearance: "brand", open: shouldDisplay, positioning: { positioningRef }, onOpenChange: onOpenChange, children: jsxs(TeachingPopoverSurface, { className: classes.extensionTeachingPopover, children: [jsx(TeachingPopoverHeader, { children: title }), jsx(TeachingPopoverBody, { children: description })] }) }));
 };
 
@@ -2684,24 +2723,161 @@ function ConstructorFactory(constructor) {
     return (...args) => new constructor(...args);
 }
 
-function ToFeaturesString(options) {
-    const { defaultWidth, defaultHeight, defaultLeft, defaultTop } = options;
-    const features = [];
-    if (defaultWidth !== undefined) {
-        features.push({ key: "width", value: defaultWidth.toString() });
+const StorageKeyPrefix = "Babylon/Settings/PopupWindow";
+function LoadSavedBounds(id) {
+    const stored = localStorage.getItem(`${StorageKeyPrefix}/${id}/Bounds`);
+    if (!stored) {
+        return null;
+    }
+    try {
+        const parsed = JSON.parse(stored);
+        return parsed;
+    }
+    catch {
+        Logger.Warn(`Could not parse saved bounds for popup window with id ${id}`);
+        return null;
     }
-    if (defaultHeight !== undefined) {
-        features.push({ key: "height", value: defaultHeight.toString() });
+}
+function SaveBounds(id, bounds) {
+    try {
+        localStorage.setItem(`${StorageKeyPrefix}/${id}/Bounds`, JSON.stringify(bounds));
     }
-    if (defaultLeft !== undefined) {
-        features.push({ key: "left", value: defaultLeft.toString() });
+    catch {
+        // Storage may be full / disabled — bounds simply won't persist.
     }
-    if (defaultTop !== undefined) {
-        features.push({ key: "top", value: defaultTop.toString() });
+}
+function ResolveBounds(options) {
+    const saved = options.id ? LoadSavedBounds(options.id) : null;
+    const width = options.defaultWidth ?? saved?.width ?? Math.floor(window.innerWidth * (2 / 3));
+    const height = options.defaultHeight ?? saved?.height ?? Math.floor(window.innerHeight * (2 / 3));
+    const left = options.defaultLeft ?? saved?.left ?? Math.floor(window.screenX + (window.innerWidth - width) / 2);
+    const top = options.defaultTop ?? saved?.top ?? Math.floor(window.screenY + (window.innerHeight - height) / 2);
+    // When the caller passes explicit width/height/left/top, always honour them; otherwise fall
+    // back to the (saved or computed) values above. The order above already gives explicit
+    // options precedence, so just build the resulting bounds now.
+    return { left, top, width, height };
+}
+function ToFeaturesString(bounds) {
+    return `width=${bounds.width},height=${bounds.height},left=${bounds.left},top=${bounds.top},location=no`;
+}
+/**
+ * Opens a new browser popup window suitable for hosting a Fluent-based modular tool.
+ *
+ * The popup body is configured for full-bleed flex layout and a host `<div>` is appended
+ * for the tool to render into. Fluent style targeting (Griffel `RendererProvider`,
+ * `FluentProvider` with `targetDocument`) is the caller's responsibility — typically wired
+ * up by `MakeModularTool`, which derives `targetDocument` from `containerElement.ownerDocument`.
+ *
+ * **Must be called synchronously in response to a user interaction** (e.g. button click) —
+ * otherwise the browser will block the popup as a scripted popup.
+ *
+ * @param options Window options. See {@link PopupWindowOptions}.
+ * @returns A handle to the popup window and its host element, plus a `dispose` to close it.
+ *          `null` if the popup was blocked by the browser.
+ */
+function OpenPopupWindow(options = {}) {
+    const bounds = ResolveBounds(options);
+    const popupWindow = window.open("", "", ToFeaturesString(bounds));
+    if (!popupWindow) {
+        return null;
     }
-    features.push({ key: "location", value: "no" });
-    return features.map((feature) => `${feature.key}=${feature.value}`).join(",");
+    if (options.title) {
+        popupWindow.document.title = options.title;
+    }
+    const popupBody = popupWindow.document.body;
+    popupBody.style.width = "100%";
+    popupBody.style.height = "100%";
+    popupBody.style.margin = "0";
+    popupBody.style.padding = "0";
+    popupBody.style.display = "flex";
+    popupBody.style.overflow = "hidden";
+    const hostElement = popupWindow.document.createElement("div");
+    hostElement.style.display = "flex";
+    hostElement.style.flexDirection = "column";
+    hostElement.style.flexGrow = "1";
+    hostElement.style.width = "100%";
+    hostElement.style.height = "100%";
+    hostElement.style.margin = "0";
+    hostElement.style.padding = "0";
+    hostElement.style.overflow = "hidden";
+    popupBody.appendChild(hostElement);
+    // Track the most recently observed window bounds. In some browsers (e.g. Firefox), accessing
+    // properties like screenX on a closed window throws, so we cache the last known good values
+    // to use as a fallback when saving after the window has already been closed.
+    const getBounds = () => ({
+        left: popupWindow.screenX,
+        top: popupWindow.screenY,
+        width: popupWindow.innerWidth,
+        height: popupWindow.innerHeight,
+    });
+    let lastBounds = bounds;
+    const onPopupBeforeUnload = () => {
+        try {
+            lastBounds = getBounds();
+        }
+        catch {
+            // Use the cached lastBounds.
+        }
+    };
+    popupWindow.addEventListener("beforeunload", onPopupBeforeUnload);
+    let disposed = false;
+    // Internal cleanup: tears down listeners, persists bounds, closes the popup.
+    // Does NOT invoke `options.onClose` — that's reserved for popup unload events
+    // that originate from outside our own teardown (e.g. user dismissed the popup).
+    const cleanup = () => {
+        if (disposed) {
+            return;
+        }
+        disposed = true;
+        if (options.id) {
+            try {
+                if (!popupWindow.closed) {
+                    lastBounds = getBounds();
+                }
+            }
+            catch {
+                // Use the cached lastBounds.
+            }
+            SaveBounds(options.id, lastBounds);
+        }
+        popupWindow.removeEventListener("beforeunload", onPopupBeforeUnload);
+        // Remove the unload listener so that any pending unload event triggered by our
+        // own popupWindow.close() below cannot reach back into onPopupUnload after we've
+        // already torn down. This avoids a race where, during a programmatic open-while-open
+        // swap, the old popup's unload would otherwise fire onClose and clear React state
+        // pointing at the new popup.
+        popupWindow.removeEventListener("unload", onPopupUnload);
+        window.removeEventListener("unload", onParentUnload);
+        if (!popupWindow.closed) {
+            popupWindow.close();
+        }
+    };
+    const onPopupUnload = () => {
+        if (disposed) {
+            // Already torn down programmatically; the popup is just finishing its unload.
+            return;
+        }
+        cleanup();
+        // Notify the consumer only for externally-triggered closures (user dismissed the popup,
+        // tab/browser closed). Programmatic disposal calls cleanup() directly and intentionally
+        // skips this so callers don't get a re-entrant onClose for the close they themselves issued.
+        options.onClose?.();
+    };
+    popupWindow.addEventListener("unload", onPopupUnload, { once: true });
+    // If the parent window is unloaded (page refresh / navigation), don't leave the popup orphaned.
+    const onParentUnload = () => {
+        if (!popupWindow.closed) {
+            popupWindow.close();
+        }
+    };
+    window.addEventListener("unload", onParentUnload, { once: true });
+    return {
+        popupWindow,
+        hostElement,
+        dispose: cleanup,
+    };
 }
+
 /**
  * Allows displaying a child window that can contain child components.
  * @param props Props for the child window.
@@ -2710,133 +2886,66 @@ function ToFeaturesString(options) {
 const ChildWindow = (props) => {
     const { id, children, onOpenChange, imperativeRef: imperativeRef } = props;
     const [windowState, setWindowState] = useState();
-    const [childWindow, setChildWindow] = useState();
-    const storageKey = id ? `Babylon/Settings/ChildWindow/${id}/Bounds` : null;
+    const [popupHandle, setPopupHandle] = useState();
     // This function is just for creating the child window itself. It is a function because
     // it must be called synchronously in response to a user interaction (e.g. button click),
     // otherwise the browser will block it as a scripted popup.
     const createWindow = useCallback((options = {}) => {
-        if (storageKey) {
-            // If we are persisting window bounds, but the window is already open, just use the existing bounds.
-            // Otherwise, try to load bounds from storage.
-            if (childWindow) {
-                options.defaultLeft = childWindow.screenX;
-                options.defaultTop = childWindow.screenY;
-                options.defaultWidth = childWindow.innerWidth;
-                options.defaultHeight = childWindow.innerHeight;
-            }
-            else {
-                const savedBounds = localStorage.getItem(storageKey);
-                if (savedBounds) {
-                    try {
-                        const bounds = JSON.parse(savedBounds);
-                        options.defaultLeft = bounds.left;
-                        options.defaultTop = bounds.top;
-                        options.defaultWidth = bounds.width;
-                        options.defaultHeight = bounds.height;
-                    }
-                    catch {
-                        Logger.Warn(`Could not parse saved bounds for child window with key ${storageKey}`);
-                    }
-                }
-            }
-        }
-        // Half width by default.
-        if (!options.defaultWidth) {
-            options.defaultWidth = window.innerWidth * (2 / 3);
-        }
-        // Half height by default.
-        if (!options.defaultHeight) {
-            options.defaultHeight = window.innerHeight * (2 / 3);
-        }
-        // Horizontally centered by default.
-        if (!options.defaultLeft) {
-            options.defaultLeft = window.screenX + (window.innerWidth - options.defaultWidth) * (2 / 3);
-        }
-        // Vertically centered by default.
-        if (!options.defaultTop) {
-            options.defaultTop = window.screenY + (window.innerHeight - options.defaultHeight) * (2 / 3);
-        }
-        // Try to create the child window (can be null if popups are blocked).
-        const newChildWindow = window.open("", "", ToFeaturesString(options));
-        if (newChildWindow) {
-            // Set the title if provided.
-            newChildWindow.document.title = options.title ?? id ?? "";
-            // Set the child window state.
-            setChildWindow((current) => {
-                // But first close any existing child window.
-                current?.close();
-                return newChildWindow;
+        const handle = OpenPopupWindow({
+            id,
+            title: options.title ?? id,
+            defaultWidth: options.defaultWidth,
+            defaultHeight: options.defaultHeight,
+            defaultLeft: options.defaultLeft,
+            defaultTop: options.defaultTop,
+            onClose: () => {
+                // Triggered when the popup is closed for any reason (user dismissal, parent unload,
+                // or programmatic dispose). Clear the popup handle so the effect cleanup runs and
+                // `onOpenChange(false)` is propagated up the tree (which lets a parent shell re-dock
+                // a previously-undocked pane). teardown() is idempotent so calling dispose() again
+                // from the effect cleanup is a safe no-op.
+                setPopupHandle(undefined);
+            },
+        });
+        if (handle) {
+            setPopupHandle((current) => {
+                // Close any existing child window before adopting the new one.
+                current?.dispose();
+                return handle;
             });
         }
-    }, [childWindow, storageKey]);
+    }, [id]);
     useImperativeHandle(imperativeRef, () => {
         return {
             open: createWindow,
-            close: () => setChildWindow(undefined),
+            close: () => {
+                setPopupHandle((current) => {
+                    current?.dispose();
+                    return undefined;
+                });
+            },
         };
     }, [createWindow]);
-    // This side effect runs any time the child window instance changes. It does the rest of the child window
+    // This side effect runs any time the popup handle changes. It does the rest of the child window
     // setup work, including creating resources and state needed to properly render the content of the child window.
     useEffect(() => {
-        const disposeActions = [];
-        if (childWindow) {
-            const body = childWindow.document.body;
-            body.style.width = "100%";
-            body.style.height = "100%";
-            body.style.margin = "0";
-            body.style.padding = "0";
-            body.style.display = "flex";
-            body.style.overflow = "hidden";
-            // Setup the window state, including creating a Fluent/Griffel "renderer" for managing runtime styles/classes in the child window.
-            setWindowState({ mountNode: body, renderer: createDOMRenderer(childWindow.document) });
-            onOpenChange?.(true);
-            // Track the most recently observed window bounds. In some browsers (e.g. Firefox), accessing
-            // properties like screenX on a closed window throws, so we cache the last known good values
-            // to use as a fallback when the dispose runs after the window has already been closed.
-            const getBounds = () => ({
-                left: childWindow.screenX,
-                top: childWindow.screenY,
-                width: childWindow.innerWidth,
-                height: childWindow.innerHeight,
-            });
-            let lastBounds = getBounds();
-            // When the child window is closed for any reason, transition back to a closed state.
-            const onChildWindowUnload = () => {
-                setWindowState(undefined);
-                setChildWindow(undefined);
-                onOpenChange?.(false);
-            };
-            childWindow.addEventListener("unload", onChildWindowUnload, { once: true });
-            disposeActions.push(() => childWindow.removeEventListener("unload", onChildWindowUnload));
-            // Capture bounds before the window is unloaded, while its properties are still safe to read.
-            const onChildWindowBeforeUnload = () => {
-                lastBounds = getBounds();
-            };
-            childWindow.addEventListener("beforeunload", onChildWindowBeforeUnload);
-            disposeActions.push(() => childWindow.removeEventListener("beforeunload", onChildWindowBeforeUnload));
-            // If the main window closes, close any open child windows as well (don't leave them orphaned).
-            const onParentWindowUnload = () => {
-                childWindow.close();
-            };
-            window.addEventListener("unload", onParentWindowUnload, { once: true });
-            disposeActions.push(() => window.removeEventListener("unload", onParentWindowUnload));
-            // On dispose, close the child window.
-            disposeActions.push(() => childWindow.close());
-            // On dispose, save the window bounds.
-            disposeActions.push(() => {
-                if (storageKey) {
-                    if (!childWindow.closed) {
-                        lastBounds = getBounds();
-                    }
-                    localStorage.setItem(storageKey, JSON.stringify(lastBounds));
-                }
-            });
+        if (!popupHandle) {
+            return undefined;
         }
+        const popupDocument = popupHandle.popupWindow.document;
+        // Use the popup's hostElement as the React mount point. OpenPopupWindow configures it as a
+        // flex column that fills the popup body, so the FluentProvider (also a flex column with
+        // flex-grow: 1) inside it can fill the available space.
+        setWindowState({ mountNode: popupHandle.hostElement, renderer: createDOMRenderer(popupDocument) });
+        onOpenChange?.(true);
         return () => {
-            disposeActions.reverse().forEach((dispose) => dispose());
+            // Tear down the popup. The cached handle's dispose() handles bounds saving and
+            // listener cleanup; React state is reset so the Portal/Provider tree unmounts.
+            popupHandle.dispose();
+            setWindowState(undefined);
+            onOpenChange?.(false);
         };
-    }, [childWindow]);
+    }, [popupHandle]);
     if (!windowState) {
         return null;
     }
@@ -2892,7 +3001,7 @@ const RootComponentServiceIdentity = Symbol("RootComponent");
  * The unique identity symbol for the shell service.
  */
 const ShellServiceIdentity = Symbol("ShellService");
-const useStyles$V = makeStyles({
+const useStyles$W = makeStyles({
     mainView: {
         flex: 1,
         display: "flex",
@@ -2959,6 +3068,7 @@ const useStyles$V = makeStyles({
     paneCollapseButton: {
         padding: `0 0 0 ${tokens.spacingHorizontalXS}`,
         borderBottom: `1px solid ${tokens.colorNeutralStroke2}`,
+        backgroundColor: tokens.colorNeutralBackground2,
     },
     paneCollapseButtonWithBorder: {
         borderLeft: `1px solid ${tokens.colorNeutralStroke2}`,
@@ -2982,6 +3092,11 @@ const useStyles$V = makeStyles({
     paneContainer: {
         display: "flex",
         flexDirection: "column",
+        // Side panes hold the width requested by their `style.width` (or saved/dragged value)
+        // and never give it up to a neighboring pane growing. Without this, dragging the left
+        // pane wider would also squeeze the right pane (proportional flex-shrink). The central
+        // content (`flex-grow: 1`) is the only flex item that absorbs the change.
+        flexShrink: 0,
         overflowX: "hidden",
         overflowY: "hidden",
         zIndex: 1,
@@ -3105,14 +3220,14 @@ const DockMenu = (props) => {
 };
 const PaneHeader = (props) => {
     const { id, title, dockOptions } = props;
-    const classes = useStyles$V();
+    const classes = useStyles$W();
     return (jsxs("div", { className: classes.paneHeaderDiv, children: [props.icon && (jsx("div", { className: classes.paneHeaderIcon, children: jsx(props.icon, {}) })), jsx(Subtitle2Stronger, { className: mergeClasses(classes.paneHeaderText, !props.icon && classes.paneHeaderTextNoIcon), children: title }), jsx(DockMenu, { sidePaneId: id, dockOptions: dockOptions, children: jsx(Button$1, { className: classes.paneHeaderButton, appearance: "transparent", icon: jsx(MoreHorizontalRegular, {}) }) })] }));
 };
 // This is a wrapper for an item in a toolbar that simply adds a teaching moment, which is useful for dynamically added items, possibly from extensions.
 const ToolbarItem = (props) => {
     // eslint-disable-next-line @typescript-eslint/naming-convention
     const { verticalLocation, horizontalLocation, id, component: Component, displayName } = props;
-    const classes = useStyles$V();
+    const classes = useStyles$W();
     const useTeachingMoment = useMemo(() => MakePopoverTeachingMoment(`Bar/${verticalLocation}/${horizontalLocation}/${displayName ?? id}`), [displayName, id]);
     const teachingMoment = useTeachingMoment(props.teachingMoment === false);
     const title = typeof props.teachingMoment === "object" ? props.teachingMoment.title : (displayName ?? id);
@@ -3122,7 +3237,7 @@ const ToolbarItem = (props) => {
 // TODO: Handle overflow, possibly via https://react.fluentui.dev/?path=/docs/components-overflow--docs with priority.
 // This component just renders a toolbar with left aligned toolbar items on the left and right aligned toolbar items on the right.
 const Toolbar = ({ location, components }) => {
-    const classes = useStyles$V();
+    const classes = useStyles$W();
     const leftComponents = useMemo(() => components.filter((entry) => entry.horizontalLocation === "left"), [components]);
     const rightComponents = useMemo(() => components.filter((entry) => entry.horizontalLocation === "right"), [components]);
     return (jsx(Fragment, { children: components.length > 0 && (jsxs("div", { className: `${classes.bar} ${location === "top" ? classes.barTop : classes.barBottom}`, children: [jsx("div", { className: classes.barLeft, children: leftComponents.map((entry) => (jsx(ToolbarItem, { verticalLocation: location, horizontalLocation: entry.horizontalLocation, id: entry.key, component: entry.component, displayName: entry.displayName, teachingMoment: entry.teachingMoment }, entry.key))) }), jsx("div", { className: classes.barRight, children: rightComponents.map((entry) => (jsx(ToolbarItem, { verticalLocation: location, horizontalLocation: entry.horizontalLocation, id: entry.key, component: entry.component, displayName: entry.displayName, teachingMoment: entry.teachingMoment }, entry.key))) })] })) }));
@@ -3132,7 +3247,7 @@ const SidePaneTab = (props) => {
     const { location, id, isSelected, isFirst, isLast, dockOptions, 
     // eslint-disable-next-line @typescript-eslint/naming-convention
     icon: Icon, title, } = props;
-    const classes = useStyles$V();
+    const classes = useStyles$W();
     const useTeachingMoment = useMemo(() => MakePopoverTeachingMoment(`Pane/${location}/${title ?? id}`), [title, id]);
     const teachingMoment = useTeachingMoment(props.teachingMoment === false);
     const tabClass = mergeClasses(classes.tab, isSelected ? classes.selectedTab : classes.unselectedTab, isFirst ? classes.firstTab : undefined, isLast ? classes.lastTab : undefined);
@@ -3144,7 +3259,7 @@ const SidePaneTab = (props) => {
 // In "compact" mode, the tab list is integrated into the pane itself.
 // In "full" mode, the returned tab list is later injected into the toolbar.
 function usePane(location, defaultWidth, minWidth, sidePanes, onSelectSidePane, dockOperations, toolbarMode, topBarItems, bottomBarItems, initialCollapsed) {
-    const classes = useStyles$V();
+    const classes = useStyles$W();
     const [topSelectedTab, setTopSelectedTab] = useState();
     const [bottomSelectedTab, setBottomSelectedTab] = useState();
     const [collapsed, setCollapsed] = useState(initialCollapsed);
@@ -3293,16 +3408,25 @@ function usePane(location, defaultWidth, minWidth, sidePanes, onSelectSidePane,
     // registered). The Fluent hook's setValue will silently fail when the element doesn't exist (in relative mode,
     // it measures the element before/after and reverts if unchanged, which always happens when the element is null).
     // By composing the ref callback, we ensure the stored value is applied immediately after the element mounts.
+    //
+    // We also set the CSS variable directly as a fallback. The hook preserves its internal currentValue across
+    // re-mounts, so when (for example) the user undocks a resized pane and then re-docks it, currentValue already
+    // equals the persisted setting and the hook's setValue short-circuits — but the freshly-mounted DOM node has no
+    // inline CSS variable, so the pane visually reverts to the default width until the user drags. Setting the
+    // variable directly closes that gap. The order is important: setValue first (handles the first-mount case where
+    // currentValue starts at 0), then the direct setProperty as a redundant fallback for the no-op case.
     const composedHorizontalElementRef = useCallback((node) => {
         paneHorizontalResizeElementRef(node);
         if (node) {
             setPaneWidthAdjust(paneWidthSettingRef.current);
+            node.style.setProperty(paneWidthAdjustCSSVar, `${paneWidthSettingRef.current}px`);
         }
     }, [paneHorizontalResizeElementRef, setPaneWidthAdjust]);
     const composedVerticalElementRef = useCallback((node) => {
         paneVerticalResizeElementRef(node);
         if (node) {
             setPaneHeightAdjust(paneHeightSettingRef.current);
+            node.style.setProperty(paneHeightAdjustCSSVar, `${paneHeightSettingRef.current}px`);
         }
     }, [paneVerticalResizeElementRef, setPaneHeightAdjust]);
     // Handle external setting changes (e.g. settings reset) after elements are already mounted.
@@ -3373,7 +3497,7 @@ function MakeShellServiceDefinition({ leftPaneDefaultWidth = 350, leftPaneMinWid
                 expand: () => onCollapseChanged.notifyObservers({ location: "right", collapsed: false }),
             };
             const rootComponent = () => {
-                const classes = useStyles$V();
+                const classes = useStyles$W();
                 const [sidePaneDockOverrides, setSidePaneDockOverrides] = useSetting(SidePaneDockOverridesSettingDescriptor);
                 // This function returns a promise that resolves after the dock change takes effect so that
                 // we can then select the re-docked pane.
@@ -3760,13 +3884,13 @@ function useImpulse() {
     return [value, pulse];
 }
 
-const useStyles$U = makeStyles({
+const useStyles$V = makeStyles({
     placeholderDiv: {
         padding: `${tokens.spacingVerticalM} ${tokens.spacingHorizontalM}`,
     },
 });
 const PropertiesPane = (props) => {
-    const classes = useStyles$U();
+    const classes = useStyles$V();
     const entity = props.context;
     return entity != null ? (jsx(ExtensibleAccordion, { ...props })) : (jsx("div", { className: classes.placeholderDiv, children: jsx(Body1Strong, { italic: true, children: "No entity selected." }) }));
 };
@@ -4206,7 +4330,7 @@ function CoerceEntityArray(entities, sort) {
     }
     return entities;
 }
-const useStyles$T = makeStyles({
+const useStyles$U = makeStyles({
     rootDiv: {
         flex: 1,
         overflow: "hidden",
@@ -4281,6 +4405,37 @@ const useStyles$T = makeStyles({
 function GetCommandDescription(command) {
     return command.hotKey ? `${command.displayName} (${GetCommandHotKeyDescription(command)})` : command.displayName;
 }
+const useTruncatingBody1Styles = makeStyles({
+    container: {
+        display: "block",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+        minWidth: 0,
+        ...typographyStyles.body1,
+    },
+});
+const TruncatingBody1 = (props) => {
+    const { text } = props;
+    const classes = useTruncatingBody1Styles();
+    const ref = useRef(null);
+    const [isTruncated, setIsTruncated] = useState(false);
+    const [isHovered, setIsHovered] = useState(false);
+    useEffect(() => {
+        const element = ref.current;
+        if (!element) {
+            return undefined;
+        }
+        const update = () => {
+            setIsTruncated(element.scrollWidth > element.clientWidth);
+        };
+        update();
+        const observer = new ResizeObserver(update);
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, [text]);
+    return (jsx(Tooltip$1, { content: text, positioning: "after", relationship: "description", visible: isTruncated && isHovered, onVisibleChange: (_, data) => setIsHovered(data.visible), children: jsx("span", { ref: ref, className: classes.container, children: text }) }));
+};
 const ActionCommand = (props) => {
     const { command } = props;
     // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -4292,7 +4447,7 @@ const ToggleCommand = (props) => {
     // eslint-disable-next-line @typescript-eslint/naming-convention
     const [Icon, isEnabled] = useObservableState(useCallback(() => [command.icon, command.isEnabled], [command]), command.onChange);
     // TODO-iv2: Consolidate icon prop passing approach for inspector and shared components
-    return (jsx(ToggleButton, { appearance: "transparent", title: GetCommandDescription(command), checkedIcon: Icon, value: isEnabled, onChange: (val) => (command.isEnabled = val) }));
+    return (jsx(ToggleButton, { appearance: "transparent", title: GetCommandDescription(command), titlePositioning: "after", checkedIcon: Icon, value: isEnabled, onChange: (val) => (command.isEnabled = val) }));
 };
 // This "placeholder" command has a blank icon and is a no-op. It is used for aside
 // alignment when some toggle commands are enabled. See more details on the commands
@@ -4315,14 +4470,14 @@ function MakeInlineCommandElement(command, isPlaceholder) {
 }
 const SceneTreeItem = (props) => {
     const { isSelected, select } = props;
-    const classes = useStyles$T();
+    const classes = useStyles$U();
     const [compactMode] = useSetting(CompactModeSettingDescriptor);
     const treeItemLayoutClass = mergeClasses(classes.sceneTreeItemLayout, compactMode ? classes.treeItemLayoutCompact : undefined);
     return (jsx(FlatTreeItem, { className: classes.treeItem, value: "scene", itemType: "leaf", parentValue: undefined, "aria-level": 1, "aria-setsize": 1, "aria-posinset": 1, onClick: select, children: jsx(TreeItemLayout, { iconBefore: jsx(GlobeRegular, {}), className: treeItemLayoutClass, style: isSelected ? { backgroundColor: tokens.colorNeutralBackground1Selected } : undefined, children: jsx(Body1Strong, { wrap: false, truncate: true, children: "Scene" }) }) }, "scene"));
 };
 const SectionTreeItem = (props) => {
     const { section, isFiltering, commandProviders, expandAll, collapseAll, isDropTarget, ...dropProps } = props;
-    const classes = useStyles$T();
+    const classes = useStyles$U();
     const [compactMode] = useSetting(CompactModeSettingDescriptor);
     // Get the commands that apply to this section.
     const commands = useResource(useCallback(() => {
@@ -4339,7 +4494,7 @@ const SectionTreeItem = (props) => {
 };
 const EntityTreeItem = (props) => {
     const { entityItem, isSelected, select, isFiltering, commandProviders, expandAll, collapseAll, isDragging, isDropTarget, ...dragProps } = props;
-    const classes = useStyles$T();
+    const classes = useStyles$U();
     const [compactMode] = useSetting(CompactModeSettingDescriptor);
     const hasChildren = !!entityItem.children?.length;
     const displayInfo = useResource(useCallback(() => {
@@ -4452,10 +4607,10 @@ const EntityTreeItem = (props) => {
                         }, main: {
                             // Prevent the "main" content (the Body1 below) from growing too large and pushing the actions/aside out of view.
                             className: classes.treeItemLayoutMain,
-                        }, children: jsx(Tooltip$1, { content: name, relationship: "description", children: jsx(Body1, { wrap: false, truncate: true, children: name }) }) }) }, GetEntityId$1(entityItem.entity)) }), jsx(MenuPopover, { hidden: !hasChildren && contextMenuCommands.length === 0, children: jsxs(MenuList, { children: [hasChildren && (jsxs(Fragment, { children: [jsx(MenuItem, { icon: jsx(ArrowExpandAllRegular, {}), onClick: expandAll, children: jsx(Body1, { children: "Expand All" }) }), jsx(MenuItem, { icon: jsx(ArrowCollapseAllRegular, {}), onClick: collapseAll, children: jsx(Body1, { children: "Collapse All" }) })] })), hasChildren && contextMenuCommands.length > 0 && jsx(MenuDivider, {}), contextMenuItems] }) })] }));
+                        }, children: jsx(TruncatingBody1, { text: name }) }) }, GetEntityId$1(entityItem.entity)) }), jsx(MenuPopover, { hidden: !hasChildren && contextMenuCommands.length === 0, children: jsxs(MenuList, { children: [hasChildren && (jsxs(Fragment, { children: [jsx(MenuItem, { icon: jsx(ArrowExpandAllRegular, {}), onClick: expandAll, children: jsx(Body1, { children: "Expand All" }) }), jsx(MenuItem, { icon: jsx(ArrowCollapseAllRegular, {}), onClick: collapseAll, children: jsx(Body1, { children: "Collapse All" }) })] })), hasChildren && contextMenuCommands.length > 0 && jsx(MenuDivider, {}), contextMenuItems] }) })] }));
 };
 const SceneExplorer = (props) => {
-    const classes = useStyles$T();
+    const classes = useStyles$U();
     const { sections, entityCommandProviders, sectionCommandProviders, scene, selectedEntity = null } = props;
     const [openItems, setOpenItems] = useState(new Set());
     const [sceneVersion, setSceneVersion] = useState(0);
@@ -6081,7 +6236,7 @@ class CanvasGraphService {
     }
 }
 
-const useStyles$S = makeStyles({
+const useStyles$T = makeStyles({
     canvas: {
         flexGrow: 1,
         width: "100%",
@@ -6090,7 +6245,7 @@ const useStyles$S = makeStyles({
 });
 const CanvasGraph = (props) => {
     const { collector, scene, layoutObservable, returnToPlayheadObservable, onVisibleRangeChangedObservable, initialGraphSize } = props;
-    const classes = useStyles$S();
+    const classes = useStyles$T();
     const canvasRef = useRef(null);
     useEffect(() => {
         if (!canvasRef.current) {
@@ -6179,7 +6334,7 @@ function EvaluateExpression(rawValue) {
         return NaN;
     }
 }
-const useStyles$R = makeStyles({
+const useStyles$S = makeStyles({
     icon: {
         "&:hover": {
             color: tokens.colorBrandForeground1,
@@ -6193,7 +6348,7 @@ const useStyles$R = makeStyles({
 const SpinButton = forwardRef((props, ref) => {
     SpinButton.displayName = "SpinButton2";
     const inputClasses = useInputStyles$1();
-    const classes = useStyles$R();
+    const classes = useStyles$S();
     const { size } = useContext(ToolContext);
     const { min, max } = props;
     const baseStep = props.step ?? 1;
@@ -6460,7 +6615,7 @@ const Dropdown = (props) => {
 const NumberDropdown = Dropdown;
 const StringDropdown = Dropdown;
 
-const useStyles$Q = makeStyles({
+const useStyles$R = makeStyles({
     surface: {
         maxWidth: "400px",
     },
@@ -6475,7 +6630,7 @@ const useStyles$Q = makeStyles({
 const Popover = forwardRef((props, ref) => {
     const { children, open: controlledOpen, onOpenChange, positioning, surfaceClassName } = props;
     const [internalOpen, setInternalOpen] = useState(false);
-    const classes = useStyles$Q();
+    const classes = useStyles$R();
     const isControlled = controlledOpen !== undefined;
     const popoverOpen = isControlled ? controlledOpen : internalOpen;
     const handleOpenChange = (_, data) => {
@@ -6719,7 +6874,7 @@ const InputAlphaField = (props) => {
         } }));
 };
 
-const useStyles$P = makeStyles({
+const useStyles$Q = makeStyles({
     sidebar: {
         display: "flex",
         flexDirection: "column",
@@ -6783,7 +6938,7 @@ const useStyles$P = makeStyles({
 });
 const PerformanceSidebar = (props) => {
     const { collector, onVisibleRangeChangedObservable } = props;
-    const classes = useStyles$P();
+    const classes = useStyles$Q();
     // Map from id to IPerfMetadata information
     const [metadataMap, setMetadataMap] = useState();
     // Map from category to all the ids belonging to that category
@@ -6856,7 +7011,7 @@ const PerformanceSidebar = (props) => {
                     })] }, `category-${category || "version"}`))) }));
 };
 
-const useStyles$O = makeStyles({
+const useStyles$P = makeStyles({
     container: {
         display: "flex",
         flexDirection: "row",
@@ -6885,7 +7040,7 @@ const useStyles$O = makeStyles({
 });
 const PerformanceViewer = (props) => {
     const { scene, layoutObservable, returnToLiveObservable, performanceCollector, initialGraphSize } = props;
-    const classes = useStyles$O();
+    const classes = useStyles$P();
     const [onVisibleRangeChangedObservable] = useState(() => new Observable());
     const onReturnToPlayheadClick = () => {
         returnToLiveObservable.notifyObservers();
@@ -7052,14 +7207,14 @@ const TextPropertyLine = (props) => {
     return (jsx(PropertyLine, { ...props, children: jsx(Body1, { title: title, children: value ?? "" }) }));
 };
 
-const useStyles$N = makeStyles({
+const useStyles$O = makeStyles({
     pinnedStatsPane: {
         flex: "0 1 auto",
         paddingBottom: tokens.spacingHorizontalM,
     },
 });
 const StatsPane = (props) => {
-    const classes = useStyles$N();
+    const classes = useStyles$O();
     const scene = props.context;
     const engine = scene.getEngine();
     const pollingObservable = usePollingObservable(250);
@@ -7222,7 +7377,7 @@ const ToolsServiceDefinition = {
  */
 const ReactContextServiceIdentity = Symbol("ReactContextService");
 
-const useStyles$M = makeStyles({
+const useStyles$N = makeStyles({
     dropdown: {
         ...UniformWidthStyling,
     },
@@ -7234,7 +7389,7 @@ const useStyles$M = makeStyles({
  */
 const DropdownPropertyLine = forwardRef((props, ref) => {
     DropdownPropertyLine.displayName = "DropdownPropertyLine";
-    const classes = useStyles$M();
+    const classes = useStyles$N();
     return (jsx(PropertyLine, { ...props, ref: ref, children: jsx(Dropdown, { ...props, className: classes.dropdown }) }));
 });
 /**
@@ -7392,7 +7547,7 @@ const SyncedSliderInput = (props) => {
     return (jsxs("div", { className: mergeClasses(classes.container, props.className), children: [infoLabel && jsx(InfoLabel, { ...infoLabel, htmlFor: "syncedSlider" }), jsxs("div", { id: "syncedSlider", className: classes.syncedSlider, children: [hasSlider && (jsx(Slider, { className: getSliderClassName(), value: value, onChange: handleSliderChange, min: props.min, max: props.max, step: props.step, disabled: props.disabled, onPointerDown: handleSliderPointerDown, onPointerUp: handleSliderPointerUp })), jsx(SpinButton, { ...passthroughProps, className: useCompactSizing ? classes.compactSpinButton : classes.spinButton, inputClassName: useCompactSizing ? classes.compactSpinButtonInput : classes.spinButtonInput, value: value, onChange: handleInputChange, step: props.step, disabled: props.disabled, disableDragButton: true })] })] }));
 };
 
-const useStyles$L = makeStyles({
+const useStyles$M = makeStyles({
     uniformWidth: {
         ...UniformWidthStyling,
     },
@@ -7404,7 +7559,7 @@ const useStyles$L = makeStyles({
  */
 const SyncedSliderPropertyLine = forwardRef((props, ref) => {
     SyncedSliderPropertyLine.displayName = "SyncedSliderPropertyLine";
-    const classes = useStyles$L();
+    const classes = useStyles$M();
     const { label, description, ...sliderProps } = props;
     return (jsx(PropertyLine, { ref: ref, ...props, children: jsx(SyncedSliderInput, { ...sliderProps, className: mergeClasses(classes.uniformWidth, props.className) }) }));
 });
@@ -7647,6 +7802,48 @@ const GizmoServiceDefinition = {
         const getCameraGizmo = (camera) => getGizmo(camera, camera.getScene(), CameraGizmo, cameraGizmos, (camera, gizmo) => (gizmo.camera = camera));
         const lightGizmos = new WeakMap();
         const getLightGizmo = (light) => getGizmo(light, light.getScene(), LightGizmo, lightGizmos, (light, gizmo) => (gizmo.light = light));
+        // Ref-counted spatial audio gizmos. Sound sources are not Babylon Nodes, so we can't reuse the helper above directly.
+        // Unlike `getGizmo`, this doesn't override `gizmo.dispose` — it routes shared cleanup through a lambda
+        // (avoiding both Function.bind and Function.call, which are prohibited by the repo's performance/style rules).
+        const spatialAudioGizmos = new WeakMap();
+        const getSpatialAudioGizmo = (soundSource, scene) => {
+            let refCounted = spatialAudioGizmos.get(soundSource);
+            if (!refCounted) {
+                const utilityLayerRef = getUtilityLayer(scene);
+                const gizmo = new SpatialAudioGizmo(utilityLayerRef.value);
+                gizmo.soundSource = soundSource;
+                let isCleanedUp = false;
+                const cleanup = () => {
+                    if (isCleanedUp) {
+                        return;
+                    }
+                    isCleanedUp = true;
+                    sourceDisposedObserver.remove();
+                    gizmo.dispose();
+                    utilityLayerRef.dispose();
+                    spatialAudioGizmos.delete(soundSource);
+                };
+                // If the underlying sound source is disposed externally, tear the gizmo down too.
+                const sourceDisposedObserver = soundSource.onDisposeObservable.addOnce(cleanup);
+                refCounted = { gizmo, cleanup, refCount: 0 };
+                spatialAudioGizmos.set(soundSource, refCounted);
+            }
+            refCounted.refCount++;
+            const refCountedCapture = refCounted;
+            let disposed = false;
+            return {
+                value: refCounted.gizmo,
+                dispose: () => {
+                    if (!disposed) {
+                        disposed = true;
+                        refCountedCapture.refCount--;
+                        if (refCountedCapture.refCount === 0) {
+                            refCountedCapture.cleanup();
+                        }
+                    }
+                },
+            };
+        };
         // Gizmo mode/coordinates state and GizmoManager lifecycle.
         let gizmoModeState = undefined;
         const gizmoModeObservable = new Observable();
@@ -7782,6 +7979,7 @@ const GizmoServiceDefinition = {
             getUtilityLayer,
             getCameraGizmo,
             getLightGizmo,
+            getSpatialAudioGizmo,
             getCameraGizmos: (scene) => scene.cameras.map((camera) => cameraGizmos.get(camera)?.gizmo).filter(Boolean),
             getLightGizmos: (scene) => scene.lights.map((light) => lightGizmos.get(light)?.gizmo).filter(Boolean),
             get gizmoMode() {
@@ -8354,17 +8552,24 @@ class ServiceContainer {
     }
 }
 
+/**
+ * The unique identity symbol for the dialog service.
+ */
+const DialogServiceIdentity = Symbol("DialogService");
+
 /**
  * The unique identity symbol for the toast service.
  */
 const ToastServiceIdentity = Symbol("ToastService");
 
+const DialogContext = createContext({ showDialog: (options) => alert(options.title) });
+
 const ExtensionManagerContext = createContext(undefined);
 function useExtensionManager() {
     return useContext(ExtensionManagerContext)?.extensionManager;
 }
 
-const useStyles$K = makeStyles({
+const useStyles$L = makeStyles({
     themeButton: {
         margin: 0,
     },
@@ -8383,7 +8588,7 @@ const ThemeSelectorServiceDefinition = {
             teachingMoment: false,
             order: -300,
             component: () => {
-                const classes = useStyles$K();
+                const classes = useStyles$L();
                 const { isDarkMode, themeMode, setThemeMode } = useThemeMode();
                 const onSelectedThemeChange = useCallback((e, data) => {
                     setThemeMode(data.checkedItems.includes("System") ? "system" : data.checkedItems[0].toLocaleLowerCase());
@@ -8400,7 +8605,7 @@ const ThemeSelectorServiceDefinition = {
     },
 };
 
-const useStyles$J = makeStyles({
+const useStyles$K = makeStyles({
     app: {
         colorScheme: "light dark",
         flexGrow: 1,
@@ -8425,6 +8630,24 @@ const useStyles$J = makeStyles({
     extensionErrorIcon: {
         color: tokens.colorPaletteRedForeground1,
     },
+    dialogTitle: {
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center",
+        gap: tokens.spacingHorizontalS,
+    },
+    dialogIconSuccess: {
+        color: tokens.colorStatusSuccessForeground1,
+    },
+    dialogIconError: {
+        color: tokens.colorStatusDangerForeground1,
+    },
+    dialogIconWarning: {
+        color: tokens.colorStatusWarningForeground1,
+    },
+    dialogIconInfo: {
+        color: tokens.colorBrandForeground1,
+    },
 });
 const ReactContextsWrapper = ({ contexts, children }) => {
     return jsx(Fragment, { children: contexts.reduceRight((acc, entry) => createElement(entry.provider, { value: entry.value }, acc), children) });
@@ -8445,7 +8668,7 @@ function MakeModularTool(options) {
     // This deferred resolves once the React effect cleanup (which disposes the ServiceContainer) is complete.
     const disposeDeferred = new Deferred();
     const modularToolRootComponent = () => {
-        const classes = useStyles$J();
+        const classes = useStyles$K();
         const [extensionManagerContext, setExtensionManagerContext] = useState();
         const [requiredExtensions, setRequiredExtensions] = useState();
         const [requiredExtensionsDeferred, setRequiredExtensionsDeferred] = useState();
@@ -8460,6 +8683,21 @@ function MakeModularTool(options) {
                 setToastQueue([]);
             }
         }, [toastHandle, toastQueue]);
+        // Queue of dialogs to display. We show one at a time (the one at the head of the queue).
+        const [dialogQueue, dispatchDialogQueue] = useReducer((state, action) => {
+            switch (action.type) {
+                case "enqueue":
+                    return [...state, action.options];
+                case "dequeue":
+                    return state.slice(1);
+            }
+        }, []);
+        const showDialog = useCallback((dialogOptions) => {
+            dispatchDialogQueue({ type: "enqueue", options: dialogOptions });
+        }, []);
+        const onDismissDialog = useCallback(() => {
+            dispatchDialogQueue({ type: "dequeue" });
+        }, []);
         const [rootComponentService, setRootComponentService] = useState();
         const [contexts, updateContexts] = useReducer((state, action) => {
             switch (action.type) {
@@ -8510,6 +8748,12 @@ function MakeModularTool(options) {
                         },
                     }),
                 });
+                // Expose the dialog service so non-React code (e.g. Observable callbacks) can show dialogs.
+                serviceContainer.addService({
+                    friendlyName: "Dialog Service",
+                    produces: [DialogServiceIdentity],
+                    factory: () => ({ showDialog }),
+                });
                 // Register the shell service (top level toolbar/side pane UI layout).
                 serviceContainer.addService(MakeShellServiceDefinition(options));
                 // Register a service that simply consumes the services we need before first render.
@@ -8532,7 +8776,7 @@ function MakeModularTool(options) {
                 }
                 // Register the extension list service (for browsing/installing extensions) if extension feeds are provided.
                 if (extensionFeeds.length > 0) {
-                    const { ExtensionListServiceDefinition } = await import('./extensionsListService-Drj94Pma.js');
+                    const { ExtensionListServiceDefinition } = await import('./extensionsListService-j6viqje8.js');
                     serviceContainer.addService(ExtensionListServiceDefinition);
                 }
                 // Register all external services (that make up a unique tool).
@@ -8599,16 +8843,36 @@ function MakeModularTool(options) {
         const onAcknowledgedExtensionInstallError = useCallback(() => {
             setExtensionInstallError(undefined);
         }, [setExtensionInstallError]);
+        // The dialog at the head of the queue, if any, is the one currently being displayed.
+        const currentDialog = dialogQueue[0];
+        const currentDialogIcon = (() => {
+            switch (currentDialog?.intent) {
+                case "success":
+                    return jsx(CheckmarkCircleRegular, { className: classes.dialogIconSuccess });
+                case "error":
+                    return jsx(ErrorCircleRegular, { className: classes.dialogIconError });
+                case "warning":
+                    return jsx(WarningRegular, { className: classes.dialogIconWarning });
+                case "info":
+                case undefined:
+                    return jsx(InfoRegular, { className: classes.dialogIconInfo });
+            }
+        })();
         // Show a spinner until a main view has been set.
         if (!rootComponentService) {
-            return (jsx(ReactContextsWrapper, { contexts: contexts, children: jsx(SettingsStoreContext.Provider, { value: settingsStore, children: jsx(Theme, { className: classes.app, children: jsx(Spinner, { className: classes.spinner }) }) }) }));
+            return (jsx(ReactContextsWrapper, { contexts: contexts, children: jsx(SettingsStoreContext.Provider, { value: settingsStore, children: jsx(Theme, { className: classes.app, targetDocument: targetDocument, children: jsx(Spinner, { className: classes.spinner }) }) }) }));
         }
         else {
             // eslint-disable-next-line @typescript-eslint/naming-convention
             const Content = rootComponentService.rootComponent;
-            return (jsx(ReactContextsWrapper, { contexts: contexts, children: jsx(SettingsStoreContext.Provider, { value: settingsStore, children: jsx(ExtensionManagerContext.Provider, { value: extensionManagerContext, children: jsx(Theme, { className: classes.app, children: jsxs(ToastProvider, { imperativeRef: setToastHandle, children: [jsx(Dialog$1, { open: !!requiredExtensions, modalType: "alert", children: jsx(DialogSurface, { children: jsxs(DialogBody, { children: [jsx(DialogTitle, { children: "Required Extensions" }), jsxs(DialogContent, { children: ["Opening this URL requires the following extensions to be installed and enabled:", jsx("ul", { children: requiredExtensions?.map((name) => (jsx("li", { children: name }, name))) })] }), jsxs(DialogActions, { children: [jsx(Button$1, { appearance: "primary", onClick: onAcceptRequiredExtensions, children: "Install & Enable" }), jsx(Button$1, { appearance: "secondary", onClick: onRejectRequiredExtensions, children: "No Thanks" })] })] }) }) }), jsx(Dialog$1, { open: !!extensionInstallError, modalType: "alert", children: jsx(DialogSurface, { children: jsxs(DialogBody, { children: [jsx(DialogTitle, { children: jsxs("div", { className: classes.extensionErrorTitleDiv, children: ["Extension Install Error", jsx(ErrorCircleRegular, { className: classes.extensionErrorIcon })] }) }), jsx(DialogContent, { children: jsxs(List$1, { children: [jsx(ListItem, { children: jsx(Body1, { children: `Extension "${extensionInstallError?.extension.name}" failed to install and was removed.` }) }), jsx(ListItem, { children: jsx(Body1, { children: `${extensionInstallError?.error}` }) })] }) }), jsx(DialogActions, { children: jsx(Button$1, { appearance: "primary", onClick: onAcknowledgedExtensionInstallError, children: "Close" }) })] }) }) }), jsx(Suspense, { fallback: jsx(Spinner, { className: classes.spinner }), children: jsx(Content, {}) })] }) }) }) }) }));
+            return (jsx(ReactContextsWrapper, { contexts: contexts, children: jsx(SettingsStoreContext.Provider, { value: settingsStore, children: jsx(ExtensionManagerContext.Provider, { value: extensionManagerContext, children: jsx(Theme, { className: classes.app, targetDocument: targetDocument, children: jsxs(ToastProvider, { imperativeRef: setToastHandle, children: [jsx(Dialog$1, { open: !!requiredExtensions, modalType: "alert", children: jsx(DialogSurface, { children: jsxs(DialogBody, { children: [jsx(DialogTitle, { children: "Required Extensions" }), jsxs(DialogContent, { children: ["Opening this URL requires the following extensions to be installed and enabled:", jsx("ul", { children: requiredExtensions?.map((name) => (jsx("li", { children: name }, name))) })] }), jsxs(DialogActions, { children: [jsx(Button$1, { appearance: "primary", onClick: onAcceptRequiredExtensions, children: "Install & Enable" }), jsx(Button$1, { appearance: "secondary", onClick: onRejectRequiredExtensions, children: "No Thanks" })] })] }) }) }), jsx(Dialog$1, { open: !!extensionInstallError, modalType: "alert", children: jsx(DialogSurface, { children: jsxs(DialogBody, { children: [jsx(DialogTitle, { children: jsxs("div", { className: classes.extensionErrorTitleDiv, children: ["Extension Install Error", jsx(ErrorCircleRegular, { className: classes.extensionErrorIcon })] }) }), jsx(DialogContent, { children: jsxs(List$1, { children: [jsx(ListItem, { children: jsx(Body1, { children: `Extension "${extensionInstallError?.extension.name}" failed to install and was removed.` }) }), jsx(ListItem, { children: jsx(Body1, { children: `${extensionInstallError?.error}` }) })] }) }), jsx(DialogActions, { children: jsx(Button$1, { appearance: "primary", onClick: onAcknowledgedExtensionInstallError, children: "Close" }) })] }) }) }), jsx(Dialog$1, { open: !!currentDialog, modalType: "alert", children: jsx(DialogSurface, { children: jsxs(DialogBody, { children: [jsx(DialogTitle, { children: jsxs("div", { className: classes.dialogTitle, children: [currentDialogIcon, currentDialog?.title] }) }), currentDialog?.content && jsx(DialogContent, { children: currentDialog.content }), jsx(DialogActions, { children: jsx(Button$1, { appearance: "primary", onClick: onDismissDialog, children: "OK" }) })] }) }) }), jsx(Suspense, { fallback: jsx(Spinner, { className: classes.spinner }), children: jsx(DialogContext.Provider, { value: { showDialog }, children: jsx(Content, {}) }) })] }) }) }) }) }));
         }
     };
+    // Derive the target document from the container element. When the container is in a popup
+    // window (or other document distinct from the main one), this is what makes Fluent inject
+    // styles and render portals into the correct document.
+    const containerOwnerDocument = containerElement.ownerDocument;
+    const targetDocument = containerOwnerDocument && containerOwnerDocument !== document ? containerOwnerDocument : undefined;
     // Set the container element to be a flex container so that the tool can be displayed properly.
     const originalContainerElementDisplay = containerElement.style.display;
     containerElement.style.display = "flex";
@@ -8653,14 +8917,14 @@ const DefaultInspectorExtensionFeed = new BuiltInsExtensionFeed("Inspector", [
         description: "Adds a new panel for easy creation of various Babylon assets. This is a WIP extension...expect changes!",
         keywords: ["creation", "tools"],
         ...BabylonWebResources,
-        getExtensionModuleAsync: async () => await import('./quickCreateToolsService-CXUBvaDf.js'),
+        getExtensionModuleAsync: async () => await import('./quickCreateToolsService-eZ4MCuJ2.js'),
     },
     {
         name: "Reflector",
         description: "Connects to the Reflector Bridge for real-time scene synchronization with the Babylon.js Sandbox.",
         keywords: ["reflector", "bridge", "sync", "sandbox", "tools"],
         ...BabylonWebResources,
-        getExtensionModuleAsync: async () => await import('./reflectorService-D3JRLq4p.js'),
+        getExtensionModuleAsync: async () => await import('./reflectorService-2dP-GJrK.js'),
     },
 ]);
 
@@ -9701,7 +9965,7 @@ const ColorSliders = ({ color, onSliderChange }) => (jsxs(Fragment, { children:
 const Color3PropertyLine = ColorPropertyLine;
 const Color4PropertyLine = ColorPropertyLine;
 
-const useStyles$I = makeStyles({
+const useStyles$J = makeStyles({
     uniformWidth: {
         ...UniformWidthStyling,
     },
@@ -9713,7 +9977,7 @@ const useStyles$I = makeStyles({
  */
 const TextInputPropertyLine = (props) => {
     TextInputPropertyLine.displayName = "TextInputPropertyLine";
-    const classes = useStyles$I();
+    const classes = useStyles$J();
     return (jsx(PropertyLine, { ...props, children: jsx(TextInput, { ...props, className: mergeClasses(classes.uniformWidth, props.className) }) }));
 };
 /**
@@ -9724,7 +9988,7 @@ const TextInputPropertyLine = (props) => {
  */
 const NumberInputPropertyLine = (props) => {
     NumberInputPropertyLine.displayName = "NumberInputPropertyLine";
-    const classes = useStyles$I();
+    const classes = useStyles$J();
     return (jsx(PropertyLine, { ...props, children: jsx(SpinButton, { ...props, className: mergeClasses(classes.uniformWidth, props.className) }) }));
 };
 
@@ -9856,7 +10120,7 @@ const LegacyInspectableObjectPropertiesServiceDefinition = {
 };
 
 const DocUrl = "https://www.npmjs.com/package/@babylonjs/inspector#inspector-cli";
-const useStyles$H = makeStyles({
+const useStyles$I = makeStyles({
     tooltipContent: {
         display: "flex",
         flexDirection: "column",
@@ -9874,7 +10138,7 @@ const CliConnectionStatusServiceDefinition = {
             teachingMoment: false,
             order: 0 /* DefaultToolbarItemOrder.CliStatus */,
             component: () => {
-                const classes = useStyles$H();
+                const classes = useStyles$I();
                 const isEnabled = useObservableState(() => cliConnectionStatus.isEnabled, cliConnectionStatus.onConnectionStatusChanged);
                 const isConnected = useObservableState(() => cliConnectionStatus.isConnected, cliConnectionStatus.onConnectionStatusChanged);
                 const { showToast } = useToast();
@@ -9935,7 +10199,7 @@ const BreakTangentIcon = createFluentIcon("BreakTangent", "20", '<g transform="s
 const UnifyTangentIcon = createFluentIcon("UnifyTangent", "20", '<g transform="scale(0.5)"><path d="M27.94,18.28a1.49,1.49,0,0,0-1.41,1h-5l-1.62-1.63-1.62,1.63h-5a1.5,1.5,0,1,0,0,1h5l1.62,1.62,1.62-1.62h5a1.5,1.5,0,1,0,1.41-2Z"/></g>');
 const StepTangentIcon = createFluentIcon("StepTangent", "20", '<g transform="scale(0.5)"><path d="M29,16.71a1.5,1.5,0,1,0-2,1.41v5.67H11v1H28V18.12A1.51,1.51,0,0,0,29,16.71Z"/></g>');
 
-const useStyles$G = makeStyles({
+const useStyles$H = makeStyles({
     coordinatesModeButton: {
         margin: `0 0 0 ${tokens.spacingHorizontalXS}`,
     },
@@ -9951,7 +10215,7 @@ const useStyles$G = makeStyles({
 });
 const GizmoToolbar = (props) => {
     const { gizmoService, sceneContext } = props;
-    const classes = useStyles$G();
+    const classes = useStyles$H();
     const gizmoMode = useObservableState(() => gizmoService.gizmoMode, gizmoService.onGizmoModeChanged);
     const coordinatesMode = useObservableState(() => gizmoService.coordinatesMode, gizmoService.onCoordinatesModeChanged);
     const cameraGizmo = useObservableState(() => gizmoService.gizmoCamera, gizmoService.onCameraGizmoChanged);
@@ -10080,7 +10344,7 @@ const HighlightServiceDefinition = {
     },
 };
 
-const useStyles$F = makeStyles({
+const useStyles$G = makeStyles({
     badge: {
         margin: tokens.spacingHorizontalXXS,
         fontFamily: "monospace",
@@ -10097,7 +10361,7 @@ const MiniStatsServiceDefinition = {
             order: 300 /* DefaultToolbarItemOrder.FrameRate */,
             teachingMoment: false,
             component: () => {
-                const classes = useStyles$F();
+                const classes = useStyles$G();
                 const scene = useObservableState(useCallback(() => sceneContext.currentScene, [sceneContext.currentScene]), sceneContext.currentSceneObservable);
                 const engine = scene?.getEngine();
                 const pollingObservable = usePollingObservable(250);
@@ -10426,7 +10690,7 @@ function useCurveEditor() {
     return context;
 }
 
-const useStyles$E = makeStyles({
+const useStyles$F = makeStyles({
     root: {
         display: "flex",
         flexDirection: "row",
@@ -10470,7 +10734,7 @@ const useStyles$E = makeStyles({
  * @returns The top bar component
  */
 const TopBar = () => {
-    const styles = useStyles$E();
+    const styles = useStyles$F();
     const { state, observables } = useCurveEditor();
     const [keyFrameValue, setKeyFrameValue] = useState(null);
     const [keyValue, setKeyValue] = useState(null);
@@ -10563,7 +10827,7 @@ const ColorChannelColors = {
  */
 const DefaultCurveColor = "#ffffff";
 
-const useStyles$D = makeStyles({
+const useStyles$E = makeStyles({
     root: {
         display: "flex",
         flexDirection: "column",
@@ -10605,7 +10869,7 @@ const LOOP_MODES$1 = [
  * @returns The edit animation panel component
  */
 const EditAnimationPanel = ({ animation, onClose }) => {
-    const styles = useStyles$D();
+    const styles = useStyles$E();
     const { observables } = useCurveEditor();
     const [name, setName] = useState(animation.name);
     const [property, setProperty] = useState(animation.targetProperty);
@@ -10636,7 +10900,7 @@ const EditAnimationPanel = ({ animation, onClose }) => {
     return (jsxs("div", { className: styles.root, children: [jsxs("div", { className: styles.form, children: [jsxs("div", { className: styles.row, children: [jsx(Label, { children: "Display Name" }), jsx(Input, { value: name, onChange: (_, data) => setName(data.value), placeholder: "Animation name" })] }), jsxs("div", { className: styles.row, children: [jsx(Label, { children: "Property" }), jsx(Input, { value: property, onChange: (_, data) => setProperty(data.value), placeholder: "e.g., position, rotation, scaling" })] }), jsxs("div", { className: styles.row, children: [jsx(Label, { children: "Loop Mode" }), jsx(Dropdown$1, { value: getLoopModeLabel(loopMode), selectedOptions: [loopMode.toString()], onOptionSelect: (_, data) => setLoopMode(Number(data.optionValue)), positioning: "below", inlinePopup: true, children: LOOP_MODES$1.map((mode) => (jsx(Option, { value: mode.value.toString(), children: mode.label }, mode.value))) })] })] }), jsxs("div", { className: styles.buttons, children: [jsx(Button, { appearance: "primary", onClick: saveChanges, label: "Save", disabled: !isValid }), jsx(Button, { appearance: "subtle", onClick: onClose, label: "Cancel" })] })] }));
 };
 
-const useStyles$C = makeStyles({
+const useStyles$D = makeStyles({
     root: {
         display: "flex",
         flexDirection: "column",
@@ -10702,7 +10966,7 @@ const useStyles$C = makeStyles({
  * @returns Animation entry component
  */
 const AnimationEntry = ({ animation }) => {
-    const styles = useStyles$C();
+    const styles = useStyles$D();
     const { state, actions, observables } = useCurveEditor();
     const [isExpanded, setIsExpanded] = useState(false);
     const [isHovered, setIsHovered] = useState(false);
@@ -10781,7 +11045,7 @@ const AnimationEntry = ({ animation }) => {
  * @returns Animation sub-entry component
  */
 const AnimationSubEntry = ({ animation, subName, color }) => {
-    const styles = useStyles$C();
+    const styles = useStyles$D();
     const { actions, observables } = useCurveEditor();
     const activeChannel = actions.getActiveChannel(animation);
     const isThisChannelActive = activeChannel === color;
@@ -10804,7 +11068,7 @@ const AnimationSubEntry = ({ animation, subName, color }) => {
  * @returns Animation list component
  */
 const AnimationList = () => {
-    const styles = useStyles$C();
+    const styles = useStyles$D();
     const { state, observables } = useCurveEditor();
     // Re-render when animations are loaded or changed (e.g. animation deleted)
     // useCallback stabilizes the accessor to prevent infinite re-render loops
@@ -10817,7 +11081,7 @@ const AnimationList = () => {
         }) }));
 };
 
-const useStyles$B = makeStyles({
+const useStyles$C = makeStyles({
     root: {
         display: "flex",
         flexDirection: "column",
@@ -10866,7 +11130,7 @@ const LoopModeOptions = LOOP_MODES.map((lm) => ({ label: lm, value: lm }));
  * @returns The add animation panel component
  */
 const AddAnimationPanel = ({ onClose }) => {
-    const styles = useStyles$B();
+    const styles = useStyles$C();
     const { state, actions, observables } = useCurveEditor();
     const [name, setName] = useState("");
     const [mode, setMode] = useState("List");
@@ -11083,7 +11347,7 @@ const AddAnimationPanel = ({ onClose }) => {
     return (jsxs("div", { className: styles.root, children: [jsx("div", { className: styles.header, children: jsx("div", { className: styles.title, children: "Add Animation" }) }), jsxs("div", { className: styles.form, children: [jsxs("div", { className: styles.row, children: [jsx(Label, { children: "Display Name" }), jsx(TextInput, { value: name, onChange: setName })] }), jsx("div", { className: styles.row, children: jsx(StringDropdown, { value: mode, onChange: (val) => setMode(val), options: ModeOptions, disabled: properties.length === 0, infoLabel: { label: "Mode" } }) }), jsxs("div", { className: styles.row, children: [jsx(Label, { children: "Property" }), isCustomMode ? (jsx(TextInput, { value: customProperty, onChange: setCustomProperty })) : (jsx(StringDropdown, { value: selectedProperty, onChange: (val) => setSelectedProperty(val), options: properties.map((p) => ({ label: p, value: p })) }))] }), jsxs("div", { className: styles.row, children: [jsx(Label, { children: "Type" }), isCustomMode ? (jsx(StringDropdown, { value: animationType, onChange: (val) => setAnimationType(val), options: AnimationTypeOptions })) : (jsx("div", { className: styles.typeDisplay, children: inferredType }))] }), jsx("div", { className: styles.row, children: jsx(StringDropdown, { value: loopMode, onChange: (val) => setLoopMode(val), options: LoopModeOptions, infoLabel: { label: "Loop Mode" } }) })] }), jsxs("div", { className: styles.buttons, children: [jsx(Button, { appearance: "primary", onClick: createAnimation, disabled: !isValid, label: "Create" }), jsx(Button, { appearance: "subtle", onClick: onClose, label: "Cancel" })] })] }));
 };
 
-const useStyles$A = makeStyles({
+const useStyles$B = makeStyles({
     root: {
         display: "flex",
         flexDirection: "column",
@@ -11126,7 +11390,7 @@ const useStyles$A = makeStyles({
  * @returns The load animation panel component
  */
 const LoadAnimationPanel = ({ onClose }) => {
-    const styles = useStyles$A();
+    const styles = useStyles$B();
     const { state, actions, observables } = useCurveEditor();
     const [snippetIdInput, setSnippetIdInput] = useState("");
     const [loadedSnippetId, setLoadedSnippetId] = useState(null);
@@ -11265,7 +11529,7 @@ class StringTools {
     }
 }
 
-const useStyles$z = makeStyles({
+const useStyles$A = makeStyles({
     root: {
         display: "flex",
         flexDirection: "column",
@@ -11310,7 +11574,7 @@ const useStyles$z = makeStyles({
  * @returns The save animation panel component
  */
 const SaveAnimationPanel = ({ onClose: _onClose }) => {
-    const styles = useStyles$z();
+    const styles = useStyles$A();
     const { state } = useCurveEditor();
     const [selectedAnimations, setSelectedAnimations] = useState(() => {
         if (!state.animations) {
@@ -11383,7 +11647,7 @@ const SaveAnimationPanel = ({ onClose: _onClose }) => {
                 }) }), jsxs("div", { className: styles.buttons, children: [jsx(Button, { appearance: "primary", onClick: saveToSnippetServer, disabled: selectedAnimations.length === 0 || isSaving, label: isSaving ? "Saving..." : "Save to Snippet Server" }), jsx(Button, { appearance: "secondary", onClick: saveToFile, disabled: selectedAnimations.length === 0, label: "Save to File" })] }), saveError && jsx("div", { className: styles.errorText, children: saveError }), snippetId && jsxs("div", { className: styles.snippetId, children: ["Saved! Snippet ID: ", snippetId] })] }));
 };
 
-const useStyles$y = makeStyles({
+const useStyles$z = makeStyles({
     root: {
         display: "flex",
         flexDirection: "column",
@@ -11437,7 +11701,7 @@ const useStyles$y = makeStyles({
  * @returns The sidebar component
  */
 const SideBar = () => {
-    const styles = useStyles$y();
+    const styles = useStyles$z();
     const { state, actions, observables } = useCurveEditor();
     const [openPopover, setOpenPopover] = useState(null);
     const [fps, setFps] = useState(60);
@@ -12425,7 +12689,7 @@ const KeyPointComponent = (props) => {
                                 } })] }))] }))] }));
 };
 
-const useStyles$x = makeStyles({
+const useStyles$y = makeStyles({
     root: {
         position: "absolute",
         top: 0,
@@ -12609,7 +12873,7 @@ function ExtractValuesFromKeys(keys, curves) {
  * @returns The graph component
  */
 const Graph = ({ width, height }) => {
-    const styles = useStyles$x();
+    const styles = useStyles$y();
     const { state, actions, observables } = useCurveEditor();
     const svgRef = useRef(null);
     const [scale, setScale] = useState(1);
@@ -12972,7 +13236,7 @@ const Graph = ({ width, height }) => {
                     }), renderValueAxis()] })] }));
 };
 
-const useStyles$w = makeStyles({
+const useStyles$x = makeStyles({
     root: {
         position: "absolute",
         top: 0,
@@ -13015,7 +13279,7 @@ const useStyles$w = makeStyles({
  * @returns The playhead component
  */
 const PlayHead = ({ width, height: _height }) => {
-    const styles = useStyles$w();
+    const styles = useStyles$x();
     const { state, actions, observables } = useCurveEditor();
     const [isDragging, setIsDragging] = useState(false);
     // Use refs for all mutable values to avoid render cycles
@@ -13166,7 +13430,7 @@ const PlayHead = ({ width, height: _height }) => {
     return (jsxs("div", { className: styles.root, children: [jsx("div", { ref: lineRef, className: styles.line, onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp }), jsx("div", { ref: handleRef, className: styles.handle, onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp })] }));
 };
 
-const useStyles$v = makeStyles({
+const useStyles$w = makeStyles({
     root: {
         display: "flex",
         flexDirection: "row",
@@ -13198,7 +13462,7 @@ const useStyles$v = makeStyles({
  * @returns The frame bar component
  */
 const FrameBar = ({ width }) => {
-    const styles = useStyles$v();
+    const styles = useStyles$w();
     const { state, observables } = useCurveEditor();
     const containerRef = useRef(null);
     const [scale, setScale] = useState(1);
@@ -13256,7 +13520,7 @@ const FrameBar = ({ width }) => {
     return (jsx("div", { className: styles.root, ref: containerRef, children: renderTicks() }));
 };
 
-const useStyles$u = makeStyles({
+const useStyles$v = makeStyles({
     root: {
         display: "flex",
         flexDirection: "column",
@@ -13297,7 +13561,7 @@ const OFFSET_X = 10;
  * @returns The range frame bar component
  */
 const RangeFrameBar = ({ width }) => {
-    const styles = useStyles$u();
+    const styles = useStyles$v();
     const { state, actions, observables } = useCurveEditor();
     const svgRef = useRef(null);
     const [viewWidth, setViewWidth] = useState(width);
@@ -13408,7 +13672,7 @@ const RangeFrameBar = ({ width }) => {
                 }), renderKeyframes, renderActiveFrame] }) }));
 };
 
-const useStyles$t = makeStyles({
+const useStyles$u = makeStyles({
     root: {
         display: "flex",
         flexDirection: "column",
@@ -13440,7 +13704,7 @@ const useStyles$t = makeStyles({
  * @returns The canvas component
  */
 const Canvas = () => {
-    const styles = useStyles$t();
+    const styles = useStyles$u();
     const { observables } = useCurveEditor();
     const containerRef = useRef(null);
     const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
@@ -13470,7 +13734,7 @@ const Canvas = () => {
     return (jsxs("div", { className: styles.root, ref: containerRef, children: [jsx("div", { className: styles.frameBar, children: jsx(FrameBar, { width: dimensions.width }) }), jsxs("div", { className: styles.canvasArea, children: [jsx(Graph, { width: dimensions.width, height: dimensions.height - 70 }), jsx(PlayHead, { width: dimensions.width, height: dimensions.height - 70 })] }), jsx("div", { className: styles.rangeFrameBar, children: jsx(RangeFrameBar, { width: dimensions.width }) })] }));
 };
 
-const useStyles$s = makeStyles({
+const useStyles$t = makeStyles({
     root: {
         flex: 1,
         height: "25px",
@@ -13532,7 +13796,7 @@ const useStyles$s = makeStyles({
  * @returns The range selector component
  */
 const RangeSelector = () => {
-    const styles = useStyles$s();
+    const styles = useStyles$t();
     const { state, actions, observables } = useCurveEditor();
     const containerRef = useRef(null);
     const scrollbarRef = useRef(null);
@@ -13677,7 +13941,7 @@ function GetKeyAtAnyFrameIndex(animations, frame) {
     }
     return false;
 }
-const useStyles$r = makeStyles({
+const useStyles$s = makeStyles({
     root: {
         display: "flex",
         flexDirection: "row",
@@ -13734,7 +13998,7 @@ MediaControls.displayName = "MediaControls";
  * @returns The BottomBar component.
  */
 const BottomBar = () => {
-    const styles = useStyles$r();
+    const styles = useStyles$s();
     const { state, actions, observables } = useCurveEditor();
     // Track display frame separately for smooth updates during playback
     const [displayFrame, setDisplayFrame] = useState(state.activeFrame);
@@ -13849,7 +14113,7 @@ const BottomBar = () => {
     return (jsxs("div", { className: styles.root, children: [jsx("div", { className: styles.mediaControls, children: jsx(MediaControls, { hasActiveAnimations: hasActiveAnimations, isPlaying: state.isPlaying, forwardAnimation: state.forwardAnimation, onPlayForward: handlePlayForward, onPlayBackward: handlePlayBackward, onStop: handleStop, onPrevKey: handlePrevKey, onNextKey: handleNextKey, onFirstFrame: handleFirstFrame, onLastFrame: handleLastFrame }) }), jsxs("div", { className: styles.frameDisplay, children: [jsx("div", { className: styles.frameLabel, children: "Frame:" }), jsx(SpinButton, { className: styles.spinButton, value: displayFrame, onChange: handleFrameChange, min: state.fromKey, max: state.toKey, disabled: !hasActiveAnimations })] }), jsx(RangeSelector, {}), jsxs("div", { className: styles.clipLengthSection, children: [jsx("div", { className: styles.frameLabel, children: "Clip Length:" }), jsx(SpinButton, { className: styles.spinButton, value: clipLength, onChange: handleClipLengthChange, min: 1, disabled: !hasActiveAnimations })] })] }));
 };
 
-const useStyles$q = makeStyles({
+const useStyles$r = makeStyles({
     root: {
         display: "flex",
         flexDirection: "column",
@@ -13898,7 +14162,7 @@ const useStyles$q = makeStyles({
  * @returns The curve editor content
  */
 const CurveEditorContent = () => {
-    const styles = useStyles$q();
+    const styles = useStyles$r();
     const { state, actions, observables } = useCurveEditor();
     const rootRef = useRef(null);
     const prepareRef = useRef(() => actions.prepare());
@@ -14255,7 +14519,7 @@ const AtmospherePropertiesServiceDefinition = {
     },
 };
 
-function useSoundState(sound) {
+function useSoundState$1(sound) {
     const stateChangedObservables = [
         useInterceptObservable("function", sound, "play"),
         useInterceptObservable("function", sound, "pause"),
@@ -14267,12 +14531,12 @@ function useSoundState(sound) {
 }
 const SoundGeneralProperties = (props) => {
     const { sound } = props;
-    const soundState = useSoundState(sound);
+    const soundState = useSoundState$1(sound);
     return (jsx(Fragment, { children: jsx(TextPropertyLine, { label: "Status", value: soundState }) }));
 };
 const SoundCommandProperties = (props) => {
     const { sound } = props;
-    const soundState = useSoundState(sound);
+    const soundState = useSoundState$1(sound);
     const volume = useObservableState(useCallback(() => sound.getVolume(), [sound]), useInterceptObservable("function", sound, "setVolume"));
     return (jsxs(Fragment, { children: [jsx(ButtonLine, { uniqueId: "Start/Stop", label: soundState === "Playing" ? "Pause" : "Play", icon: soundState === "Playing" ? PauseRegular : PlayRegular, onClick: () => {
                     if (soundState === "Playing") {
@@ -14286,11 +14550,196 @@ const SoundCommandProperties = (props) => {
                 } }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Loop", target: sound, propertyKey: "loop" })] }));
 };
 
+/**
+ * Spatial-audio property line that shows the scene node a v2 sound or sound source is attached to,
+ * with a clickable link to navigate to that node in the inspector.
+ * @returns The rendered property line.
+ */
+const AudioV2SpatialAttachmentProperties = ({ source, selectionService }) => {
+    // Intercept attach/detach on this instance's spatial sub-property so the link refreshes when attachment changes.
+    const onAttach = useInterceptObservable("function", source.spatial, "attach");
+    const onDetach = useInterceptObservable("function", source.spatial, "detach");
+    const attachedNode = useObservableState(() => source.spatial.attachedNode, onAttach, onDetach);
+    return (jsx(LinkToEntityPropertyLine, { label: "Attached Node", description: "The scene node this sound is attached to via spatial audio.", entity: attachedNode, selectionService: selectionService }));
+};
+
+/**
+ * Renders a clickable "Output Bus" property line for any audio entity that routes to a downstream bus.
+ * @returns The rendered property line.
+ */
+const AudioV2OutputBusLink = ({ target, description, selectionService }) => {
+    const outBus = useObservableState(useCallback(() => target.outBus, [target]), useInterceptObservable("property", target, "outBus"));
+    return (jsx(LinkToEntityPropertyLine, { label: "Output Bus", description: description ?? "The bus this entity routes its output to.", entity: outBus, selectionService: selectionService }));
+};
+// -----------------------------------------------------------------------------
+// Engine
+// -----------------------------------------------------------------------------
+function useEngineState(engine) {
+    const stateChangedObservables = [
+        useInterceptObservable("function", engine, "pauseAsync"),
+        useInterceptObservable("function", engine, "resumeAsync"),
+        useInterceptObservable("function", engine, "unlockAsync"),
+    ];
+    return useObservableState(useCallback(() => engine.state, [engine]), ...stateChangedObservables);
+}
+/**
+ * Setup / playback properties for an {@link AudioEngineV2}.
+ * @returns The rendered component.
+ */
+const AudioV2EngineGeneralProperties = ({ engine }) => {
+    const state = useEngineState(engine);
+    const volume = useObservableState(useCallback(() => engine.volume, [engine]), useInterceptObservable("function", engine, "setVolume"));
+    return (jsxs(Fragment, { children: [jsx(TextPropertyLine, { label: "State", value: state }), jsx(Property, { component: SyncedSliderPropertyLine, label: "Volume", functionPath: "setVolume", value: volume, min: 0, max: 1, step: 0.01, onChange: (value) => engine.setVolume(value) }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Parameter Ramp Duration", target: engine, propertyKey: "parameterRampDuration", min: 0, step: 0.01, unit: "s" })] }));
+};
+/**
+ * Resume / pause controls for an {@link AudioEngineV2}.
+ *
+ * No separate Unlock button — `engine.unlockAsync()` is just a thin wrapper around
+ * `engine.resumeAsync()` on the base class, so Resume already covers the autoplay-blocked path.
+ * @returns The rendered component.
+ */
+const AudioV2EngineCommandsProperties = ({ engine }) => {
+    const state = useEngineState(engine);
+    return (jsx(Fragment, { children: state === "running" ? (jsx(ButtonLine, { uniqueId: "audiov2-engine-pause", label: "Pause", icon: PauseRegular, onClick: () => void engine.pauseAsync() })) : (jsx(ButtonLine, { uniqueId: "audiov2-engine-resume", label: "Resume", icon: PlayRegular, onClick: () => void engine.resumeAsync() })) }));
+};
+/**
+ * Listener spatial-attachment property line for an {@link AudioEngineV2}.
+ * @returns The rendered component.
+ */
+const AudioV2EngineListenerProperties = ({ engine, selectionService }) => {
+    const listener = engine.listener;
+    const onAttach = useInterceptObservable("function", listener, "attach");
+    const onDetach = useInterceptObservable("function", listener, "detach");
+    const attachedNode = useObservableState(() => listener.attachedNode, onAttach, onDetach);
+    return (jsx(LinkToEntityPropertyLine, { label: "Attached Node", description: "The scene node the audio listener is attached to via spatial audio.", entity: attachedNode, selectionService: selectionService }));
+};
+// -----------------------------------------------------------------------------
+// Buses (Main + Audio)
+// -----------------------------------------------------------------------------
+/**
+ * General properties shared by all v2 audio buses (main and regular).
+ * @returns The rendered component.
+ */
+const AudioV2BusGeneralProperties = ({ bus }) => {
+    const volume = useObservableState(useCallback(() => bus.volume, [bus]), useInterceptObservable("function", bus, "setVolume"));
+    return (jsx(Property, { component: SyncedSliderPropertyLine, label: "Volume", functionPath: "setVolume", value: volume, min: 0, max: 1, step: 0.01, onChange: (value) => bus.setVolume(value) }));
+};
+/**
+ * Additional properties specific to {@link AudioBus} (a non-main bus that can be routed to another bus).
+ * @returns The rendered component.
+ */
+const AudioV2AudioBusGeneralProperties = ({ bus, selectionService }) => {
+    return jsx(AudioV2OutputBusLink, { target: bus, description: "The bus this bus routes its output to.", selectionService: selectionService });
+};
+// -----------------------------------------------------------------------------
+// Sounds (StaticSound + StreamingSound)
+// -----------------------------------------------------------------------------
+function GetSoundStateLabel(state) {
+    switch (state) {
+        case 3 /* SoundState.Started */:
+            return "Playing";
+        case 5 /* SoundState.Paused */:
+            return "Paused";
+        case 2 /* SoundState.Starting */:
+            return "Starting";
+        case 0 /* SoundState.Stopping */:
+            return "Stopping";
+        case 4 /* SoundState.FailedToStart */:
+            return "Failed to start";
+        case 1 /* SoundState.Stopped */:
+        default:
+            return "Stopped";
+    }
+}
+function useSoundState(sound) {
+    const stateChangedObservables = [
+        useInterceptObservable("function", sound, "play"),
+        useInterceptObservable("function", sound, "pause"),
+        useInterceptObservable("function", sound, "resume"),
+        useInterceptObservable("function", sound, "stop"),
+        // Engine-level hook fires for every state transition on every sound (including async
+        // Starting → Started, FailedToStart, and natural Stopped after stop()), covering changes
+        // that the per-method intercepts above miss.
+        useInterceptObservable("function", sound.engine, "_onSoundPlaybackStateChanged"),
+    ];
+    return useObservableState(useCallback(() => sound.state, [sound]), ...stateChangedObservables, 
+    // Fires when the sound ends naturally (full duration, non-looping).
+    sound.onEndedObservable);
+}
+/**
+ * General properties for any v2 sound.
+ * @returns The rendered component.
+ */
+const AudioV2SoundGeneralProperties = ({ sound, selectionService }) => {
+    const state = useSoundState(sound);
+    const volume = useObservableState(useCallback(() => sound.volume, [sound]), useInterceptObservable("function", sound, "setVolume"));
+    return (jsxs(Fragment, { children: [jsx(TextPropertyLine, { label: "State", value: GetSoundStateLabel(state) }), jsx(Property, { component: SyncedSliderPropertyLine, label: "Volume", functionPath: "setVolume", value: volume, min: 0, max: 1, step: 0.01, onChange: (value) => sound.setVolume(value) }), jsx(AudioV2OutputBusLink, { target: sound, description: "The bus this sound routes its output to.", selectionService: selectionService })] }));
+};
+/**
+ * Playback properties shared by all v2 sounds (loop, start offset, current time).
+ * @returns The rendered component.
+ */
+const AudioV2SoundPlaybackProperties = ({ sound }) => {
+    // currentTime advances implicitly as the sound plays — poll to keep the display in sync.
+    // Note: this is total elapsed playback time, not position-within-buffer — it keeps growing
+    // past buffer.duration when looping. That's why it's rendered as a number input rather
+    // than a scrub-style slider.
+    const tickObservable = usePollingObservable(100);
+    const currentTime = useObservableState(useCallback(() => sound.currentTime, [sound]), tickObservable, useInterceptObservable("property", sound, "currentTime"));
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Loop", target: sound, propertyKey: "loop" }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Start Offset", target: sound, propertyKey: "startOffset", min: 0, step: 0.1, unit: "s" }), jsx(Property, { component: NumberInputPropertyLine, label: "Current Time", propertyPath: "currentTime", value: currentTime, min: 0, step: 0.1, unit: "s", onChange: (value) => (sound.currentTime = value) })] }));
+};
+/**
+ * Additional playback properties specific to {@link StaticSound} (duration, loop range, pitch, playback rate).
+ * @returns The rendered component.
+ */
+const AudioV2StaticSoundPlaybackProperties = ({ sound }) => {
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Duration", target: sound, propertyKey: "duration", min: 0, step: 0.1, unit: "s" }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Loop Start", target: sound, propertyKey: "loopStart", min: 0, step: 0.1, unit: "s" }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Loop End", target: sound, propertyKey: "loopEnd", min: 0, step: 0.1, unit: "s" }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Pitch", target: sound, propertyKey: "pitch", step: 1, unit: "\u00A2" }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Playback Rate", target: sound, propertyKey: "playbackRate", min: 0, step: 0.1 })] }));
+};
+/**
+ * Preload status display for {@link StreamingSound}.
+ * @returns The rendered component.
+ */
+const AudioV2StreamingSoundPreloadProperties = ({ sound }) => {
+    return (jsxs(Fragment, { children: [jsx(TextPropertyLine, { label: "Preload Count", value: String(sound.preloadCount) }), jsx(TextPropertyLine, { label: "Preload Completed", value: String(sound.preloadCompletedCount) })] }));
+};
+/**
+ * Play / pause / stop controls for any v2 sound.
+ * @returns The rendered component.
+ */
+const AudioV2SoundCommandsProperties = ({ sound }) => {
+    const state = useSoundState(sound);
+    const isPlaying = state === 3 /* SoundState.Started */ || state === 2 /* SoundState.Starting */;
+    const isPaused = state === 5 /* SoundState.Paused */;
+    return (jsxs(Fragment, { children: [jsx(ButtonLine, { uniqueId: "audiov2-sound-play-pause", label: isPlaying ? "Pause" : "Play", icon: isPlaying ? PauseRegular : PlayRegular, onClick: () => {
+                    if (isPlaying) {
+                        sound.pause();
+                    }
+                    else if (isPaused) {
+                        sound.resume();
+                    }
+                    else {
+                        sound.play();
+                    }
+                } }), jsx(ButtonLine, { uniqueId: "audiov2-sound-stop", label: "Stop", icon: StopRegular, onClick: () => sound.stop() })] }));
+};
+// -----------------------------------------------------------------------------
+// Standalone sound sources (e.g. microphone)
+// -----------------------------------------------------------------------------
+/**
+ * General properties for a v2 sound source that is not a sound (e.g. microphone).
+ * @returns The rendered component.
+ */
+const AudioV2SoundSourceGeneralProperties = ({ source, selectionService }) => {
+    const volume = useObservableState(useCallback(() => source.volume, [source]), useInterceptObservable("function", source, "setVolume"));
+    return (jsxs(Fragment, { children: [jsx(Property, { component: SyncedSliderPropertyLine, label: "Volume", functionPath: "setVolume", value: volume, min: 0, max: 1, step: 0.01, onChange: (value) => source.setVolume(value) }), jsx(AudioV2OutputBusLink, { target: source, description: "The bus this source routes its output to.", selectionService: selectionService })] }));
+};
+
 const AudioPropertiesServiceDefinition = {
     friendlyName: "Audio Properties",
-    consumes: [PropertiesServiceIdentity],
-    factory: (propertiesService) => {
-        const soundContentRegistration = propertiesService.addSectionContent({
+    consumes: [PropertiesServiceIdentity, SelectionServiceIdentity],
+    factory: (propertiesService, selectionService) => {
+        // --- v1 Sound ---
+        const soundV1ContentRegistration = propertiesService.addSectionContent({
             key: "Sound General Properties",
             predicate: (entity) => entity instanceof Sound,
             content: [
@@ -14304,9 +14753,121 @@ const AudioPropertiesServiceDefinition = {
                 },
             ],
         });
+        // --- v2 AudioEngineV2 ---
+        const engineV2ContentRegistration = propertiesService.addSectionContent({
+            key: "Audio V2 Engine Properties",
+            predicate: (entity) => entity instanceof AudioEngineV2,
+            content: [
+                {
+                    section: "General",
+                    component: ({ context }) => jsx(AudioV2EngineGeneralProperties, { engine: context }),
+                },
+                {
+                    section: "Listener",
+                    component: ({ context }) => jsx(AudioV2EngineListenerProperties, { engine: context, selectionService: selectionService }),
+                },
+                {
+                    section: "Commands",
+                    component: ({ context }) => jsx(AudioV2EngineCommandsProperties, { engine: context }),
+                },
+            ],
+        });
+        // --- v2 Buses (any AbstractAudioBus — covers Main + Audio) ---
+        const busV2ContentRegistration = propertiesService.addSectionContent({
+            key: "Audio V2 Bus Properties",
+            predicate: (entity) => entity instanceof AbstractAudioBus,
+            content: [
+                {
+                    section: "General",
+                    component: ({ context }) => jsx(AudioV2BusGeneralProperties, { bus: context }),
+                },
+            ],
+        });
+        // --- v2 AudioBus (non-main bus; adds an Output Bus link) ---
+        const audioBusV2ContentRegistration = propertiesService.addSectionContent({
+            key: "Audio V2 AudioBus Properties",
+            predicate: (entity) => entity instanceof AudioBus,
+            content: [
+                {
+                    section: "General",
+                    component: ({ context }) => jsx(AudioV2AudioBusGeneralProperties, { bus: context, selectionService: selectionService }),
+                },
+            ],
+        });
+        // --- v2 Sounds (Static + Streaming) ---
+        const soundV2ContentRegistration = propertiesService.addSectionContent({
+            key: "Audio V2 Sound Properties",
+            predicate: (entity) => entity instanceof AbstractSound,
+            content: [
+                {
+                    section: "General",
+                    component: ({ context }) => jsx(AudioV2SoundGeneralProperties, { sound: context, selectionService: selectionService }),
+                },
+                {
+                    section: "Playback",
+                    component: ({ context }) => jsx(AudioV2SoundPlaybackProperties, { sound: context }),
+                },
+                {
+                    section: "Commands",
+                    component: ({ context }) => jsx(AudioV2SoundCommandsProperties, { sound: context }),
+                },
+            ],
+        });
+        // --- v2 StaticSound (extra playback properties) ---
+        const staticSoundV2ContentRegistration = propertiesService.addSectionContent({
+            key: "Audio V2 Static Sound Properties",
+            predicate: (entity) => entity instanceof StaticSound,
+            content: [
+                {
+                    section: "Playback",
+                    component: ({ context }) => jsx(AudioV2StaticSoundPlaybackProperties, { sound: context }),
+                },
+            ],
+        });
+        // --- v2 StreamingSound (preload status) ---
+        const streamingSoundV2ContentRegistration = propertiesService.addSectionContent({
+            key: "Audio V2 Streaming Sound Properties",
+            predicate: (entity) => entity instanceof StreamingSound,
+            content: [
+                {
+                    section: "Streaming",
+                    component: ({ context }) => jsx(AudioV2StreamingSoundPreloadProperties, { sound: context }),
+                },
+            ],
+        });
+        // --- v2 Sound Sources (microphone, audio-node) — non-Sound only ---
+        const soundSourceV2ContentRegistration = propertiesService.addSectionContent({
+            key: "Audio V2 Sound Source Properties",
+            predicate: (entity) => entity instanceof AbstractSoundSource && !(entity instanceof AbstractSound),
+            content: [
+                {
+                    section: "General",
+                    component: ({ context }) => jsx(AudioV2SoundSourceGeneralProperties, { source: context, selectionService: selectionService }),
+                },
+            ],
+        });
+        // --- v2 Spatial attachment (any AbstractSoundSource currently spatial) ---
+        const spatialV2ContentRegistration = propertiesService.addSectionContent({
+            key: "Audio V2 Spatial Properties",
+            predicate: (entity) => entity instanceof AbstractSoundSource && entity._isSpatial,
+            content: [
+                {
+                    section: "Spatial",
+                    component: ({ context }) => jsx(AudioV2SpatialAttachmentProperties, { source: context, selectionService: selectionService }),
+                },
+            ],
+        });
         return {
             dispose: () => {
-                soundContentRegistration.dispose();
+                soundV1ContentRegistration.dispose();
+                engineV2ContentRegistration.dispose();
+                busV2ContentRegistration.dispose();
+                audioBusV2ContentRegistration.dispose();
+                soundV2ContentRegistration.dispose();
+                staticSoundV2ContentRegistration.dispose();
+                streamingSoundV2ContentRegistration.dispose();
+                soundSourceV2ContentRegistration.dispose();
+                spatialV2ContentRegistration.dispose();
             },
         };
     },
@@ -14740,7 +15301,7 @@ function useObservableArray(target, getItems, addFn, removeFn, changeFn) {
     }, [getItems]), useInterceptObservable("function", target, addFn), useInterceptObservable("function", target, removeFn), changeFn ? useInterceptObservable("function", target, changeFn) : undefined);
 }
 
-const useStyles$p = makeStyles({
+const useStyles$q = makeStyles({
     lightsListDiv: {
         display: "flex",
         flexDirection: "column",
@@ -14750,7 +15311,7 @@ const ClusteredLightContainerSetupProperties = ({ context: container }) => {
     return (jsxs(Fragment, { children: [jsx(BooleanBadgePropertyLine, { label: "Is Supported", value: container.isSupported }), jsx(BoundProperty, { label: "Horizontal Tiles", component: NumberInputPropertyLine, target: container, propertyKey: "horizontalTiles", step: 1, min: 1, forceInt: true }), jsx(BoundProperty, { label: "Vertical Tiles", component: NumberInputPropertyLine, target: container, propertyKey: "verticalTiles", step: 1, min: 1, forceInt: true }), jsx(BoundProperty, { label: "Depth Slices", component: NumberInputPropertyLine, target: container, propertyKey: "depthSlices", step: 1, min: 1, forceInt: true }), jsx(BoundProperty, { label: "Max Range", component: NumberInputPropertyLine, target: container, propertyKey: "maxRange", min: 1 })] }));
 };
 const ClusteredLightContainerLightsProperties = ({ container, selectionService, }) => {
-    const classes = useStyles$p();
+    const classes = useStyles$q();
     const lights = useObservableArray(container, useCallback(() => container.lights, [container]), "addLight", "removeLight");
     return (jsx(PropertyLine, { label: "Lights", expandedContent: jsx("div", { className: classes.lightsListDiv, children: lights.map((light) => (jsx(LinkToEntityPropertyLine, { label: light.getClassName(), entity: light, selectionService: selectionService }, light.uniqueId))) }), children: jsx(Badge, { appearance: "filled", children: lights.length }) }));
 };
@@ -14800,7 +15361,7 @@ const HemisphericLightSetupProperties = ({ context: hemisphericLight }) => {
     return (jsxs(Fragment, { children: [jsx(BoundProperty, { label: "Direction", component: Vector3PropertyLine, target: hemisphericLight, propertyKey: "direction" }), jsx(BoundProperty, { label: "Diffuse", component: Color3PropertyLine, target: hemisphericLight, propertyKey: "diffuse" }), jsx(BoundProperty, { label: "Ground", component: Color3PropertyLine, target: hemisphericLight, propertyKey: "groundColor" }), jsx(BoundProperty, { label: "Intensity", component: NumberInputPropertyLine, target: hemisphericLight, propertyKey: "intensity" })] }));
 };
 
-const useStyles$o = makeStyles({
+const useStyles$p = makeStyles({
     root: {
         display: "grid",
         gridTemplateRows: "repeat(1fr)",
@@ -14830,7 +15391,7 @@ const useStyles$o = makeStyles({
 const ComboBox = forwardRef((props, ref) => {
     ComboBox.displayName = "ComboBox";
     const comboId = useId();
-    const styles = useStyles$o();
+    const styles = useStyles$p();
     const { size } = useContext(ToolContext);
     // Find the label for the current value
     const getLabel = (value) => props.options.find((opt) => opt.value === value)?.label ?? "";
@@ -14853,7 +15414,7 @@ const ComboBox = forwardRef((props, ref) => {
     return (jsxs("div", { className: styles.root, children: [jsx("label", { id: comboId, children: props.label }), jsx(Combobox, { ref: ref, defaultOpen: props.defaultOpen, size: size, root: { className: styles.comboBox }, input: { className: styles.input }, listbox: { className: styles.listbox }, onOptionSelect: onOptionSelect, "aria-labelledby": comboId, placeholder: "Search..", onChange: (ev) => setQuery(ev.target.value), value: query, children: children })] }));
 });
 
-const useStyles$n = makeStyles({
+const useStyles$o = makeStyles({
     linkDiv: {
         display: "flex",
         flexDirection: "row",
@@ -14878,7 +15439,7 @@ const useStyles$n = makeStyles({
 function EntitySelector(props) {
     const { value, onLink, getEntities, getName, filter, defaultValue } = props;
     const onChange = props.onChange;
-    const classes = useStyles$n();
+    const classes = useStyles$o();
     const comboBoxRef = useRef(null);
     // Build options with uniqueId as key
     const options = useMemo(() => {
@@ -15032,7 +15593,7 @@ const TextureUpload = (props) => {
     return jsx(UploadButton, { onUpload: handleUpload, accept: accept, title: "Upload Texture", label: label });
 };
 
-const useStyles$m = makeStyles({
+const useStyles$n = makeStyles({
     container: {
         display: "flex",
         flexDirection: "row",
@@ -15049,7 +15610,7 @@ const useStyles$m = makeStyles({
 const TextureSelector = (props) => {
     TextureSelector.displayName = "TextureSelector";
     const { scene, cubeOnly, value, onChange, onLink, defaultValue } = props;
-    const classes = useStyles$m();
+    const classes = useStyles$n();
     const getTextures = useCallback(() => scene.textures, [scene.textures]);
     const getName = useCallback((texture) => texture.displayName || texture.name || `${texture.getClassName() || "Unnamed Texture"} (${texture.uniqueId})`, []);
     const filter = useCallback((texture) => !cubeOnly || texture.isCube, [cubeOnly]);
@@ -15654,7 +16215,7 @@ async function EditNodeMaterial(material) {
     await material.edit({ nodeEditorConfig: { backgroundColor: material.getScene().clearColor } });
 }
 
-const useStyles$l = makeStyles({
+const useStyles$m = makeStyles({
     subsection: {
         marginTop: tokens.spacingVerticalM,
     },
@@ -15728,7 +16289,7 @@ const GradientBlockPropertyLine = (props) => {
 };
 const NodeMaterialInputProperties = (props) => {
     const { material } = props;
-    const classes = useStyles$l();
+    const classes = useStyles$m();
     const inputBlocks = useObservableState(useCallback(() => {
         const inspectorVisibleInputBlocks = material
             .getInputBlocks()
@@ -15790,6 +16351,115 @@ const CheckboxPropertyLine = (props) => {
     return (jsx(PropertyLine, { ...props, children: jsx(Checkbox, { ...props }) }));
 };
 
+const useStyles$l = makeStyles({
+    expandedDebugContainer: {
+        display: "flex",
+        alignItems: "center",
+        marginTop: tokens.spacingVerticalXS,
+    },
+    debugLabel: {
+        flex: 1,
+    },
+});
+/**
+ * Toggles debug mode for a texture on a material.
+ * When enabled, creates a debug `StandardMaterial` with the texture wired as `emissiveTexture` and swaps it onto every
+ * mesh that currently uses the original material. Enabling debug for one texture on a material disables it for any
+ * other texture on that material (mutually exclusive).
+ *
+ * Notes:
+ * - The texture is rendered using its current `level`. Textures whose level is not 1 will appear modulated; this is
+ *   intentional so that no global state on the source texture is mutated (a level mutation would affect every other
+ *   material that references the same texture instance).
+ * - Only meshes referencing the original material at toggle time receive the debug material. Meshes added or
+ *   reassigned to the original material afterwards are not affected until the next toggle cycle.
+ * @param material - The material to debug
+ * @param texture - The texture to debug
+ * @param enable - Whether to enable or disable debug mode
+ */
+function ToggleTextureDebug(material, texture, enable) {
+    if (!material || !texture) {
+        return;
+    }
+    const scene = material.getScene();
+    material.reservedDataStore ?? (material.reservedDataStore = {});
+    const store = material.reservedDataStore;
+    store.debugTexture ?? (store.debugTexture = null);
+    store.debugMaterial ?? (store.debugMaterial = null);
+    const isCurrentlyDebugging = store.debugTexture === texture;
+    if (enable && !isCurrentlyDebugging) {
+        // If we were debugging a different texture, clean it up first.
+        if (store.debugTexture) {
+            ToggleTextureDebug(material, store.debugTexture, false);
+        }
+        const debugMaterial = new StandardMaterial("debugMaterial", scene);
+        debugMaterial.disableLighting = true;
+        debugMaterial.sideOrientation = material.sideOrientation;
+        debugMaterial.emissiveTexture = texture;
+        debugMaterial.forceDepthWrite = true;
+        debugMaterial.reservedDataStore = { hidden: true };
+        for (const mesh of scene.meshes) {
+            if (mesh.material === material) {
+                mesh.material = debugMaterial;
+            }
+        }
+        store.debugMaterial = debugMaterial;
+        // Assign debugTexture LAST so observers see a fully-populated store.
+        store.debugTexture = texture;
+    }
+    else if (!enable && isCurrentlyDebugging) {
+        const debugMaterial = store.debugMaterial;
+        if (debugMaterial) {
+            for (const mesh of scene.meshes) {
+                if (mesh.material === debugMaterial) {
+                    mesh.material = material;
+                }
+            }
+            debugMaterial.dispose();
+            store.debugMaterial = null;
+        }
+        store.debugTexture = null;
+    }
+}
+/**
+ * A texture selector property line with material texture debug capability.
+ * Displays a debug toggle in expanded content to render the selected texture as emissive on the material.
+ * Enabling debug on one texture for a given material disables it for any other texture on that material.
+ * @param props - The texture selector property line props plus material reference
+ * @returns The property line element with debug toggle
+ */
+const MaterialTextureDebugPropertyLine = (props) => {
+    const classes = useStyles$l();
+    const { material, ...textureProps } = props;
+    const texture = props.value;
+    const reservedDataStore = useProperty(material, "reservedDataStore");
+    const debugTexture = useProperty(reservedDataStore, "debugTexture");
+    const isDebugEnabled = !!texture && debugTexture === texture;
+    // Track the texture this slot last rendered with so we can detect when its value changes away
+    // from the texture currently being debugged. Without this, reassigning the slot's texture (or
+    // setting it to null) while debug is active would leave the scene stuck in debug view with no
+    // visible toggle to turn it off (the toggle for that slot is keyed off texture-instance
+    // equality and would just appear off).
+    const prevTextureRef = useRef(texture);
+    useEffect(() => {
+        const prevTexture = prevTextureRef.current;
+        prevTextureRef.current = texture;
+        if (prevTexture && prevTexture !== texture) {
+            const store = material.reservedDataStore;
+            if (store?.debugTexture === prevTexture) {
+                ToggleTextureDebug(material, prevTexture, false);
+            }
+        }
+    }, [texture]);
+    const handleDebugToggle = useCallback((checked) => {
+        if (texture) {
+            ToggleTextureDebug(material, texture, checked);
+        }
+    }, [material, texture]);
+    const expandedContent = texture ? (jsxs("div", { className: classes.expandedDebugContainer, children: [jsx("span", { className: classes.debugLabel, children: "Display Texture for Debug" }), jsx(Switch, { value: isDebugEnabled, onChange: handleDebugToggle })] })) : undefined;
+    return (jsx(PropertyLine, { ...textureProps, expandedContent: expandedContent, children: jsx(TextureSelector, { ...textureProps }) }));
+};
+
 const LightFalloffOptions = [
     { label: "Physical", value: PBRBaseMaterial.LIGHTFALLOFF_PHYSICAL },
     { label: "glTF", value: PBRBaseMaterial.LIGHTFALLOFF_GLTF },
@@ -15894,7 +16564,7 @@ const PBRBaseMaterialChannelsProperties = (props) => {
     const { material, selectionService } = props;
     const scene = material.getScene();
     const selectEntity = (entity) => (selectionService.selectedEntity = entity);
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Albedo", target: material, propertyKey: "_albedoTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Base Weight", target: material, propertyKey: "_baseWeightTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Base Diffuse Roughness", target: material, propertyKey: "_baseDiffuseRoughnessTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Metallic Roughness", target: material, propertyKey: "_metallicTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, uniqueId: "PBRBaseMaterialChannels_Reflection", label: "Reflection", target: material, propertyKey: "_reflectionTexture", scene: scene, cubeOnly: true, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Refraction", target: material.subSurface, propertyKey: "refractionTexture", propertyPath: "subSurface.refractionTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Reflectivity", target: material, propertyKey: "_reflectivityTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Micro Surface", target: material, propertyKey: "_microSurfaceTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Bump", target: material, propertyKey: "_bumpTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Emissive", target: material, propertyKey: "_emissiveTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Opacity", target: material, propertyKey: "_opacityTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Ambient", target: material, propertyKey: "_ambientTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Lightmap", target: material, propertyKey: "_lightmapTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Detailmap", target: material.detailMap, propertyKey: "texture", propertyPath: "detailMap.texture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use Lightmap as Shadowmap", target: material, propertyKey: "_useLightmapAsShadowmap" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use Detailmap", target: material.detailMap, propertyKey: "isEnabled", propertyPath: "detailMap.isEnabled" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use Decalmap", target: material.decalMap, propertyKey: "isEnabled", propertyPath: "decalMap.isEnabled" })] }));
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: MaterialTextureDebugPropertyLine, label: "Albedo", target: material, propertyKey: "_albedoTexture", scene: scene, onLink: selectEntity, defaultValue: null, material: material }), jsx(BoundProperty, { component: MaterialTextureDebugPropertyLine, label: "Base Weight", target: material, propertyKey: "_baseWeightTexture", scene: scene, onLink: selectEntity, defaultValue: null, material: material }), jsx(BoundProperty, { component: MaterialTextureDebugPropertyLine, label: "Base Diffuse Roughness", target: material, propertyKey: "_baseDiffuseRoughnessTexture", scene: scene, onLink: selectEntity, defaultValue: null, material: material }), jsx(BoundProperty, { component: MaterialTextureDebugPropertyLine, label: "Metallic Roughness", target: material, propertyKey: "_metallicTexture", scene: scene, onLink: selectEntity, defaultValue: null, material: material }), jsx(BoundProperty, { component: MaterialTextureDebugPropertyLine, uniqueId: "PBRBaseMaterialChannels_Reflection", label: "Reflection", target: material, propertyKey: "_reflectionTexture", scene: scene, cubeOnly: true, onLink: selectEntity, defaultValue: null, material: material }), jsx(BoundProperty, { component: MaterialTextureDebugPropertyLine, label: "Refraction", target: material.subSurface, propertyKey: "refractionTexture", propertyPath: "subSurface.refractionTexture", scene: scene, onLink: selectEntity, defaultValue: null, material: material }), jsx(BoundProperty, { component: MaterialTextureDebugPropertyLine, label: "Reflectivity", target: material, propertyKey: "_reflectivityTexture", scene: scene, onLink: selectEntity, defaultValue: null, material: material }), jsx(BoundProperty, { component: MaterialTextureDebugPropertyLine, label: "Micro Surface", target: material, propertyKey: "_microSurfaceTexture", scene: scene, onLink: selectEntity, defaultValue: null, material: material }), jsx(BoundProperty, { component: MaterialTextureDebugPropertyLine, label: "Bump", target: material, propertyKey: "_bumpTexture", scene: scene, onLink: selectEntity, defaultValue: null, material: material }), jsx(BoundProperty, { component: MaterialTextureDebugPropertyLine, label: "Emissive", target: material, propertyKey: "_emissiveTexture", scene: scene, onLink: selectEntity, defaultValue: null, material: material }), jsx(BoundProperty, { component: MaterialTextureDebugPropertyLine, label: "Opacity", target: material, propertyKey: "_opacityTexture", scene: scene, onLink: selectEntity, defaultValue: null, material: material }), jsx(BoundProperty, { component: MaterialTextureDebugPropertyLine, label: "Ambient", target: material, propertyKey: "_ambientTexture", scene: scene, onLink: selectEntity, defaultValue: null, material: material }), jsx(BoundProperty, { component: MaterialTextureDebugPropertyLine, label: "Lightmap", target: material, propertyKey: "_lightmapTexture", scene: scene, onLink: selectEntity, defaultValue: null, material: material }), jsx(BoundProperty, { component: MaterialTextureDebugPropertyLine, label: "Detailmap", target: material.detailMap, propertyKey: "texture", propertyPath: "detailMap.texture", scene: scene, onLink: selectEntity, defaultValue: null, material: material }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use Lightmap as Shadowmap", target: material, propertyKey: "_useLightmapAsShadowmap" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use Detailmap", target: material.detailMap, propertyKey: "isEnabled", propertyPath: "detailMap.isEnabled" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use Decalmap", target: material.decalMap, propertyKey: "isEnabled", propertyPath: "decalMap.isEnabled" })] }));
 };
 const PBRBaseMaterialLightingAndColorProperties = (props) => {
     const { material } = props;
@@ -15904,7 +16574,7 @@ const PBRBaseMaterialMetallicWorkflowProperties = (props) => {
     const { material, selectionService } = props;
     const scene = material.getScene();
     const selectEntity = (entity) => (selectionService.selectedEntity = entity);
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Metallic", target: material, propertyKey: "_metallic", min: 0, max: 1, step: 0.01, nullable: true, defaultValue: 0 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, uniqueId: "PBRBaseMaterialMetallicWorkflow_Roughness", label: "Roughness", target: material, propertyKey: "_roughness", min: 0, max: 1, step: 0.01, nullable: true, defaultValue: 0 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Base Diffuse Roughness", target: material, propertyKey: "_baseDiffuseRoughness", min: 0, max: 1, step: 0.01, nullable: true, defaultValue: 0 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Index of Refraction", target: material.subSurface, propertyKey: "indexOfRefraction", propertyPath: "subSurface.indexOfRefraction", min: 1, max: 3, step: 0.01 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "F0 Factor", target: material, propertyKey: "_metallicF0Factor", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Reflectance Color", target: material, propertyKey: "_metallicReflectanceColor", isLinearMode: true }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Metallic Only", description: "Use only metallic from MetallicReflectance texture", target: material, propertyKey: "_useOnlyMetallicFromMetallicReflectanceTexture" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Metallic Reflectance", target: material, propertyKey: "_metallicReflectanceTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Reflectance", target: material, propertyKey: "_reflectanceTexture", scene: scene, onLink: selectEntity, defaultValue: null })] }));
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Metallic", target: material, propertyKey: "_metallic", min: 0, max: 1, step: 0.01, nullable: true, defaultValue: 0 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, uniqueId: "PBRBaseMaterialMetallicWorkflow_Roughness", label: "Roughness", target: material, propertyKey: "_roughness", min: 0, max: 1, step: 0.01, nullable: true, defaultValue: 0 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Base Diffuse Roughness", target: material, propertyKey: "_baseDiffuseRoughness", min: 0, max: 1, step: 0.01, nullable: true, defaultValue: 0 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Index of Refraction", target: material.subSurface, propertyKey: "indexOfRefraction", propertyPath: "subSurface.indexOfRefraction", min: 1, max: 3, step: 0.01 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "F0 Factor", target: material, propertyKey: "_metallicF0Factor", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Reflectance Color", target: material, propertyKey: "_metallicReflectanceColor", isLinearMode: true }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Metallic Only", description: "Use only metallic from MetallicReflectance texture", target: material, propertyKey: "_useOnlyMetallicFromMetallicReflectanceTexture" }), jsx(BoundProperty, { component: MaterialTextureDebugPropertyLine, label: "Metallic Reflectance", target: material, propertyKey: "_metallicReflectanceTexture", material: material, scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: MaterialTextureDebugPropertyLine, label: "Reflectance", target: material, propertyKey: "_reflectanceTexture", material: material, scene: scene, onLink: selectEntity, defaultValue: null })] }));
 };
 const PBRBaseMaterialClearCoatProperties = (props) => {
     const { material, selectionService } = props;
@@ -15971,7 +16641,7 @@ const PBRBaseMaterialDebugProperties = (props) => {
  */
 const OpenPBRMaterialBaseProperties = (props) => {
     const { material } = props;
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Base Weight", target: material, propertyKey: "baseWeight", min: 0, max: 1, step: 0.01, description: "Controls how strong or visible the base aspect appears.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Base Weight", target: material, propertyKey: "baseWeightTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Base Color", target: material, propertyKey: "baseColor", isLinearMode: true, description: "Sets the primary surface color of the material.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Base Color", target: material, propertyKey: "baseColorTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Base Metalness", target: material, propertyKey: "baseMetalness", min: 0, max: 1, step: 0.01, description: "Controls whether the material behaves as metal or non-metal. The parameter supersedes transmission_weight and subsurface_weight.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Base Metalness", target: material, propertyKey: "baseMetalnessTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Base Diffuse Roughness", target: material, propertyKey: "baseDiffuseRoughness", min: 0, max: 1, step: 0.01, description: "Softens the surface's base appearance. Higher values create matte or porous looks. Lower values are smoother.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Base Diffuse Roughness", target: material, propertyKey: "baseDiffuseRoughnessTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Ambient Occlusion", target: material, propertyKey: "ambientOcclusionTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 })] }));
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Base Weight", target: material, propertyKey: "baseWeight", min: 0, max: 1, step: 0.01, description: "Controls how strong or visible the base aspect appears.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate" }), jsx(BoundProperty, { component: MaterialTextureDebugPropertyLine, label: "Base Weight", target: material, propertyKey: "baseWeightTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0, material: material }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Base Color", target: material, propertyKey: "baseColor", isLinearMode: true, description: "Sets the primary surface color of the material.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate" }), jsx(BoundProperty, { component: MaterialTextureDebugPropertyLine, label: "Base Color", target: material, propertyKey: "baseColorTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0, material: material }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Base Metalness", target: material, propertyKey: "baseMetalness", min: 0, max: 1, step: 0.01, description: "Controls whether the material behaves as metal or non-metal. The parameter supersedes transmission_weight and subsurface_weight.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate" }), jsx(BoundProperty, { component: MaterialTextureDebugPropertyLine, label: "Base Metalness", target: material, propertyKey: "baseMetalnessTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0, material: material }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Base Diffuse Roughness", target: material, propertyKey: "baseDiffuseRoughness", min: 0, max: 1, step: 0.01, description: "Softens the surface's base appearance. Higher values create matte or porous looks. Lower values are smoother.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate" }), jsx(BoundProperty, { component: MaterialTextureDebugPropertyLine, label: "Base Diffuse Roughness", target: material, propertyKey: "baseDiffuseRoughnessTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0, material: material }), jsx(BoundProperty, { component: MaterialTextureDebugPropertyLine, label: "Ambient Occlusion", target: material, propertyKey: "ambientOcclusionTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0, material: material })] }));
 };
 /**
  * Displays the specular layer properties of an OpenPBR material.
@@ -15980,15 +16650,15 @@ const OpenPBRMaterialBaseProperties = (props) => {
  */
 const OpenPBRMaterialSpecularProperties = (props) => {
     const { material } = props;
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Specular Weight", target: material, propertyKey: "specularWeight", min: 0, max: 1, step: 0.01, description: "Controls how strong the reflections appear.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Specular Weight", target: material, propertyKey: "specularWeightTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Specular Color", target: material, propertyKey: "specularColor", isLinearMode: true, description: "Tints the color of reflections.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Specular Color", target: material, propertyKey: "specularColorTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Specular Roughness", target: material, propertyKey: "specularRoughness", min: 0, max: 1, step: 0.01, description: "Controls how sharp or blurry reflections are.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Specular Roughness", target: material, propertyKey: "specularRoughnessTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Specular Roughness Anisotropy", target: material, propertyKey: "specularRoughnessAnisotropy", min: 0, max: 1, step: 0.01, description: "Stretches reflections in one direction for brushed or streaked looks. Requires specular_roughness > 0.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/microfacetmodel" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Specular Roughness Anisotropy", target: material, propertyKey: "specularRoughnessAnisotropyTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Specular IOR", target: material, propertyKey: "specularIor", min: 1, max: 30, step: 0.01, description: "Index of refraction is a physical value controlling the reflective intensity and refraction. The parameter has no effect on metals.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate" })] }));
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Specular Weight", target: material, propertyKey: "specularWeight", min: 0, max: 1, step: 0.01, description: "Controls how strong the reflections appear.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate" }), jsx(BoundProperty, { component: MaterialTextureDebugPropertyLine, label: "Specular Weight", target: material, propertyKey: "specularWeightTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0, material: material }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Specular Color", target: material, propertyKey: "specularColor", isLinearMode: true, description: "Tints the color of reflections.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate" }), jsx(BoundProperty, { component: MaterialTextureDebugPropertyLine, label: "Specular Color", target: material, propertyKey: "specularColorTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0, material: material }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Specular Roughness", target: material, propertyKey: "specularRoughness", min: 0, max: 1, step: 0.01, description: "Controls how sharp or blurry reflections are.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate" }), jsx(BoundProperty, { component: MaterialTextureDebugPropertyLine, label: "Specular Roughness", target: material, propertyKey: "specularRoughnessTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0, material: material }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Specular Roughness Anisotropy", target: material, propertyKey: "specularRoughnessAnisotropy", min: 0, max: 1, step: 0.01, description: "Stretches reflections in one direction for brushed or streaked looks. Requires specular_roughness > 0.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/microfacetmodel" }), jsx(BoundProperty, { component: MaterialTextureDebugPropertyLine, label: "Specular Roughness Anisotropy", target: material, propertyKey: "specularRoughnessAnisotropyTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0, material: material }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Specular IOR", target: material, propertyKey: "specularIor", min: 1, max: 30, step: 0.01, description: "Index of refraction is a physical value controlling the reflective intensity and refraction. The parameter has no effect on metals.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate" })] }));
 };
 const OpenPBRMaterialTransmissionProperties = (props) => {
     const { material } = props;
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Transmission Weight", target: material, propertyKey: "transmissionWeight", min: 0, max: 1, step: 0.01, description: "Controls the presence of the transparency effect. The parameter is superseded by base_metalness.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate/translucentbase" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Transmission Weight", target: material, propertyKey: "transmissionWeightTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Transmission Color", target: material, propertyKey: "transmissionColor", isLinearMode: true, description: "Tints light passing through the material. Works with transmission_depth for realistic thickness-based coloring.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate/translucentbase" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Transmission Color", target: material, propertyKey: "transmissionColorTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Transmission Depth (cm)", target: material, propertyKey: "transmissionDepth", min: 0, max: 50, step: 0.001, convertTo: (value) => value * 100, convertFrom: (value) => value / 100, description: "Controls how quickly light is absorbed with thickness. Distance is in scene units.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate/translucentbase" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Transmission Depth", target: material, propertyKey: "transmissionDepthTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Transmission Scatter", target: material, propertyKey: "transmissionScatter", isLinearMode: true, description: "Adds internal cloudiness to create materials like juice, honey, etc. Requires transmission_depth > 0.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate/translucentbase" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Transmission Scatter", target: material, propertyKey: "transmissionScatterTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Transmission Scatter Anisotropy", target: material, propertyKey: "transmissionScatterAnisotropy", min: -1, max: 1, step: 0.01, description: "Shifts scattering forward/backward for clearer or hazier appearance depending on viewing angle.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate/translucentbase" }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Transmission Dispersion Abbe Number", target: material, propertyKey: "transmissionDispersionAbbeNumber", min: 1, max: 100, step: 1, description: "Physical value for the rainbow color separation in refraction.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate/translucentbase" }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Transmission Dispersion Scale", target: material, propertyKey: "transmissionDispersionScale", min: 0, max: 5, step: 0.01, description: "Strength of rainbow color separation in refraction.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate/translucentbase" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Transmission Dispersion Scale", target: material, propertyKey: "transmissionDispersionScaleTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 })] }));
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Transmission Weight", target: material, propertyKey: "transmissionWeight", min: 0, max: 1, step: 0.01, description: "Controls the presence of the transparency effect. The parameter is superseded by base_metalness.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate/translucentbase" }), jsx(BoundProperty, { component: MaterialTextureDebugPropertyLine, label: "Transmission Weight", target: material, propertyKey: "transmissionWeightTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0, material: material }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Transmission Color", target: material, propertyKey: "transmissionColor", isLinearMode: true, description: "Tints light passing through the material. Works with transmission_depth for realistic thickness-based coloring.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate/translucentbase" }), jsx(BoundProperty, { component: MaterialTextureDebugPropertyLine, label: "Transmission Color", target: material, propertyKey: "transmissionColorTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0, material: material }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Transmission Depth (cm)", target: material, propertyKey: "transmissionDepth", min: 0, max: 50, step: 0.001, convertTo: (value) => value * 100, convertFrom: (value) => value / 100, description: "Controls how quickly light is absorbed with thickness. Distance is in scene units.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate/translucentbase" }), jsx(BoundProperty, { component: MaterialTextureDebugPropertyLine, label: "Transmission Depth", target: material, propertyKey: "transmissionDepthTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0, material: material }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Transmission Scatter", target: material, propertyKey: "transmissionScatter", isLinearMode: true, description: "Adds internal cloudiness to create materials like juice, honey, etc. Requires transmission_depth > 0.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate/translucentbase" }), jsx(BoundProperty, { component: MaterialTextureDebugPropertyLine, label: "Transmission Scatter", target: material, propertyKey: "transmissionScatterTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0, material: material }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Transmission Scatter Anisotropy", target: material, propertyKey: "transmissionScatterAnisotropy", min: -1, max: 1, step: 0.01, description: "Shifts scattering forward/backward for clearer or hazier appearance depending on viewing angle.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate/translucentbase" }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Transmission Dispersion Abbe Number", target: material, propertyKey: "transmissionDispersionAbbeNumber", min: 1, max: 100, step: 1, description: "Physical value for the rainbow color separation in refraction.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate/translucentbase" }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Transmission Dispersion Scale", target: material, propertyKey: "transmissionDispersionScale", min: 0, max: 5, step: 0.01, description: "Strength of rainbow color separation in refraction.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate/translucentbase" }), jsx(BoundProperty, { component: MaterialTextureDebugPropertyLine, label: "Transmission Dispersion Scale", target: material, propertyKey: "transmissionDispersionScaleTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0, material: material })] }));
 };
 const OpenPBRMaterialSubsurfaceProperties = (props) => {
     const { material } = props;
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Subsurface Weight", target: material, propertyKey: "subsurfaceWeight", min: 0, max: 1, step: 0.01, description: "Controls the presence of the subsurface effect. The parameter is superseded by base_metalness and transmission_weight.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate/subsurface" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Subsurface Weight", target: material, propertyKey: "subsurfaceWeightTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Subsurface Color", target: material, propertyKey: "subsurfaceColor", isLinearMode: true, description: "Colors the light that scatters under the surface.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate/subsurface" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Subsurface Color", target: material, propertyKey: "subsurfaceColorTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Subsurface Radius (cm)", target: material, propertyKey: "subsurfaceRadius", min: 0, max: 50, step: 0.001, convertTo: (value) => value * 100, convertFrom: (value) => value / 100, description: "Controls how soft and spread-out the subsurface look appears.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate/subsurface" }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Subsurface Radius Scale", target: material, propertyKey: "subsurfaceRadiusScale", isLinearMode: true, description: "Tints thin areas with light shining through, like warm glow on ears or leaves.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate/subsurface" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Subsurface Radius Scale", target: material, propertyKey: "subsurfaceRadiusScaleTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Subsurface Scatter Anisotropy", target: material, propertyKey: "subsurfaceScatterAnisotropy", min: -1, max: 1, step: 0.01, description: "Shifts scattering forward/backward for a softer glow or a sharper one.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate/subsurface" })] }));
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Subsurface Weight", target: material, propertyKey: "subsurfaceWeight", min: 0, max: 1, step: 0.01, description: "Controls the presence of the subsurface effect. The parameter is superseded by base_metalness and transmission_weight.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate/subsurface" }), jsx(BoundProperty, { component: MaterialTextureDebugPropertyLine, label: "Subsurface Weight", target: material, propertyKey: "subsurfaceWeightTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0, material: material }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Subsurface Color", target: material, propertyKey: "subsurfaceColor", isLinearMode: true, description: "Colors the light that scatters under the surface.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate/subsurface" }), jsx(BoundProperty, { component: MaterialTextureDebugPropertyLine, label: "Subsurface Color", target: material, propertyKey: "subsurfaceColorTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0, material: material }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Subsurface Radius (cm)", target: material, propertyKey: "subsurfaceRadius", min: 0, max: 50, step: 0.001, convertTo: (value) => value * 100, convertFrom: (value) => value / 100, description: "Controls how soft and spread-out the subsurface look appears.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate/subsurface" }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Subsurface Radius Scale", target: material, propertyKey: "subsurfaceRadiusScale", isLinearMode: true, description: "Tints thin areas with light shining through, like warm glow on ears or leaves.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate/subsurface" }), jsx(BoundProperty, { component: MaterialTextureDebugPropertyLine, label: "Subsurface Radius Scale", target: material, propertyKey: "subsurfaceRadiusScaleTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0, material: material }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Subsurface Scatter Anisotropy", target: material, propertyKey: "subsurfaceScatterAnisotropy", min: -1, max: 1, step: 0.01, description: "Shifts scattering forward/backward for a softer glow or a sharper one.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate/subsurface" })] }));
 };
 /**
  * Displays the coat layer properties of an OpenPBR material.
@@ -15997,7 +16667,7 @@ const OpenPBRMaterialSubsurfaceProperties = (props) => {
  */
 const OpenPBRMaterialCoatProperties = (props) => {
     const { material } = props;
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Coat Weight", target: material, propertyKey: "coatWeight", min: 0, max: 1, step: 0.01, description: "Controls the presence of the coat.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/coat" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Coat Weight", target: material, propertyKey: "coatWeightTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Coat Color", target: material, propertyKey: "coatColor", isLinearMode: true, description: "Tints the coat, for tinted varnish or paint.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/coat" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Coat Color", target: material, propertyKey: "coatColorTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Coat Roughness", target: material, propertyKey: "coatRoughness", min: 0, max: 1, step: 0.01, description: "Controls how sharp or blurry the coat reflections appear.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/coat/roughening" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Coat Roughness", target: material, propertyKey: "coatRoughnessTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Coat Roughness Anisotropy", target: material, propertyKey: "coatRoughnessAnisotropy", min: 0, max: 1, step: 0.01, description: "Stretches coat reflections in one direction for brushed or streaked looks. Requires coat_roughness > 0.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/coat" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Coat Roughness Anisotropy", target: material, propertyKey: "coatRoughnessAnisotropyTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Coat IOR", target: material, propertyKey: "coatIor", min: 1, max: 3, step: 0.01, description: "Index of refraction is a physical value controlling the reflective intensity of the coat.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/coat" }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Coat Darkening", target: material, propertyKey: "coatDarkening", min: 0, max: 1, step: 0.01, description: "Darkens the base under the coat, similar to how real varnish deepens color.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/coat/darkening" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Coat Darkening", target: material, propertyKey: "coatDarkeningTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 })] }));
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Coat Weight", target: material, propertyKey: "coatWeight", min: 0, max: 1, step: 0.01, description: "Controls the presence of the coat.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/coat" }), jsx(BoundProperty, { component: MaterialTextureDebugPropertyLine, label: "Coat Weight", target: material, propertyKey: "coatWeightTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0, material: material }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Coat Color", target: material, propertyKey: "coatColor", isLinearMode: true, description: "Tints the coat, for tinted varnish or paint.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/coat" }), jsx(BoundProperty, { component: MaterialTextureDebugPropertyLine, label: "Coat Color", target: material, propertyKey: "coatColorTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0, material: material }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Coat Roughness", target: material, propertyKey: "coatRoughness", min: 0, max: 1, step: 0.01, description: "Controls how sharp or blurry the coat reflections appear.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/coat/roughening" }), jsx(BoundProperty, { component: MaterialTextureDebugPropertyLine, label: "Coat Roughness", target: material, propertyKey: "coatRoughnessTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0, material: material }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Coat Roughness Anisotropy", target: material, propertyKey: "coatRoughnessAnisotropy", min: 0, max: 1, step: 0.01, description: "Stretches coat reflections in one direction for brushed or streaked looks. Requires coat_roughness > 0.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/coat" }), jsx(BoundProperty, { component: MaterialTextureDebugPropertyLine, label: "Coat Roughness Anisotropy", target: material, propertyKey: "coatRoughnessAnisotropyTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0, material: material }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Coat IOR", target: material, propertyKey: "coatIor", min: 1, max: 3, step: 0.01, description: "Index of refraction is a physical value controlling the reflective intensity of the coat.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/coat" }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Coat Darkening", target: material, propertyKey: "coatDarkening", min: 0, max: 1, step: 0.01, description: "Darkens the base under the coat, similar to how real varnish deepens color.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/coat/darkening" }), jsx(BoundProperty, { component: MaterialTextureDebugPropertyLine, label: "Coat Darkening", target: material, propertyKey: "coatDarkeningTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0, material: material })] }));
 };
 /**
  * Displays the fuzz layer properties of an OpenPBR material.
@@ -16006,7 +16676,7 @@ const OpenPBRMaterialCoatProperties = (props) => {
  */
 const OpenPBRMaterialFuzzProperties = (props) => {
     const { material } = props;
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Fuzz Weight", target: material, propertyKey: "fuzzWeight", min: 0, max: 1, step: 0.01, description: "Controls the presence of the fuzz.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/fuzz" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Fuzz Weight", target: material, propertyKey: "fuzzWeightTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Fuzz Color", target: material, propertyKey: "fuzzColor", isLinearMode: true, description: "Controls the color of the fuzz.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/fuzz" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Fuzz Color", target: material, propertyKey: "fuzzColorTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Fuzz Roughness", target: material, propertyKey: "fuzzRoughness", min: 0, max: 1, step: 0.01, description: "Controls the roughness of the fuzz.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/fuzz" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Fuzz Roughness", target: material, propertyKey: "fuzzRoughnessTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 })] }));
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Fuzz Weight", target: material, propertyKey: "fuzzWeight", min: 0, max: 1, step: 0.01, description: "Controls the presence of the fuzz.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/fuzz" }), jsx(BoundProperty, { component: MaterialTextureDebugPropertyLine, label: "Fuzz Weight", target: material, propertyKey: "fuzzWeightTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0, material: material }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Fuzz Color", target: material, propertyKey: "fuzzColor", isLinearMode: true, description: "Controls the color of the fuzz.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/fuzz" }), jsx(BoundProperty, { component: MaterialTextureDebugPropertyLine, label: "Fuzz Color", target: material, propertyKey: "fuzzColorTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0, material: material }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Fuzz Roughness", target: material, propertyKey: "fuzzRoughness", min: 0, max: 1, step: 0.01, description: "Controls the roughness of the fuzz.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/fuzz" }), jsx(BoundProperty, { component: MaterialTextureDebugPropertyLine, label: "Fuzz Roughness", target: material, propertyKey: "fuzzRoughnessTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0, material: material })] }));
 };
 /**
  * Displays the emission properties of an OpenPBR material.
@@ -16015,7 +16685,7 @@ const OpenPBRMaterialFuzzProperties = (props) => {
  */
 const OpenPBRMaterialEmissionProperties = (props) => {
     const { material } = props;
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: Color3PropertyLine, label: "Emission Color", target: material, propertyKey: "emissionColor", isLinearMode: true, description: "Controls the color of the glow.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/emission" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Emission Color", target: material, propertyKey: "emissionColorTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Emission Luminance", target: material, propertyKey: "emissionLuminance", min: 0, max: 10, step: 0.01, description: "Controls how bright the glow is.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/emission" })] }));
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: Color3PropertyLine, label: "Emission Color", target: material, propertyKey: "emissionColor", isLinearMode: true, description: "Controls the color of the glow.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/emission" }), jsx(BoundProperty, { component: MaterialTextureDebugPropertyLine, label: "Emission Color", target: material, propertyKey: "emissionColorTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0, material: material }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Emission Luminance", target: material, propertyKey: "emissionLuminance", min: 0, max: 10, step: 0.01, description: "Controls how bright the glow is.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/emission" })] }));
 };
 /**
  * Displays the thin film properties of an OpenPBR material.
@@ -16024,7 +16694,7 @@ const OpenPBRMaterialEmissionProperties = (props) => {
  */
 const OpenPBRMaterialThinFilmProperties = (props) => {
     const { material } = props;
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Thin Film Weight", target: material, propertyKey: "thinFilmWeight", min: 0, max: 1, step: 0.01, description: "Controls the presence of the thin-film.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/thin-filmiridescence" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Thin Film Weight", target: material, propertyKey: "thinFilmWeightTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Thin Film Thickness", target: material, propertyKey: "thinFilmThickness", min: 0, max: 1, step: 0.01, description: "Changes the color pattern of the iridescence.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/thin-filmiridescence" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Thin Film Thickness", target: material, propertyKey: "thinFilmThicknessTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Thin Film IOR", target: material, propertyKey: "thinFilmIor", min: 1, max: 3, step: 0.01, description: "Alters the strength and contrast of the color shift based in the index of refraction.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/thin-filmiridescence" })] }));
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Thin Film Weight", target: material, propertyKey: "thinFilmWeight", min: 0, max: 1, step: 0.01, description: "Controls the presence of the thin-film.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/thin-filmiridescence" }), jsx(BoundProperty, { component: MaterialTextureDebugPropertyLine, label: "Thin Film Weight", target: material, propertyKey: "thinFilmWeightTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0, material: material }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Thin Film Thickness", target: material, propertyKey: "thinFilmThickness", min: 0, max: 1, step: 0.01, description: "Changes the color pattern of the iridescence.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/thin-filmiridescence" }), jsx(BoundProperty, { component: MaterialTextureDebugPropertyLine, label: "Thin Film Thickness", target: material, propertyKey: "thinFilmThicknessTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0, material: material }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Thin Film IOR", target: material, propertyKey: "thinFilmIor", min: 1, max: 3, step: 0.01, description: "Alters the strength and contrast of the color shift based in the index of refraction.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/thin-filmiridescence" })] }));
 };
 /**
  * Displays the geometry properties of an OpenPBR material.
@@ -16033,7 +16703,7 @@ const OpenPBRMaterialThinFilmProperties = (props) => {
  */
 const OpenPBRMaterialGeometryProperties = (props) => {
     const { material } = props;
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Geometry Opacity", target: material, propertyKey: "geometryOpacity", min: 0, max: 1, step: 0.01, description: "Controls material presence and transparency cutout.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/opacity/transparency" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Geometry Opacity", target: material, propertyKey: "geometryOpacityTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: CheckboxPropertyLine, label: "Thin-Walled", target: material, propertyKey: "geometryThinWalled", description: "When enabled, treats material as a thin shell (like leaves, paper sheets or windows). Disables ray bending in refraction.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/thin-walledcase" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Geometry Normal", target: material, propertyKey: "geometryNormalTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Tangent Angle", target: material, propertyKey: "geometryTangentAngle", min: 0, max: Math.PI, step: 0.01, description: "Tangent vector controlling anisotropic reflection direction for the base (metal and non-metal). Works with specular_roughness_anisotropy.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/geometry/tangent" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Geometry Tangent", target: material, propertyKey: "geometryTangentTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Coat Tangent Angle", target: material, propertyKey: "geometryCoatTangentAngle", min: 0, max: Math.PI, step: 0.01, description: "Tangent vector controlling anisotropic reflection direction for the coat. Works with coat_roughness_anisotropy.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/geometry/coat-tangent" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Geometry Coat Normal", target: material, propertyKey: "geometryCoatNormalTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Geometry Coat Tangent", target: material, propertyKey: "geometryCoatTangentTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Geometry Thickness", target: material, propertyKey: "geometryThickness", min: 0, step: 0.001, description: "Controls the thickness of the geometry for volume approximations.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/thickness" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Geometry Thickness", target: material, propertyKey: "geometryThicknessTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 })] }));
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Geometry Opacity", target: material, propertyKey: "geometryOpacity", min: 0, max: 1, step: 0.01, description: "Controls material presence and transparency cutout.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/opacity/transparency" }), jsx(BoundProperty, { component: MaterialTextureDebugPropertyLine, label: "Geometry Opacity", target: material, propertyKey: "geometryOpacityTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0, material: material }), jsx(BoundProperty, { component: CheckboxPropertyLine, label: "Thin-Walled", target: material, propertyKey: "geometryThinWalled", description: "When enabled, treats material as a thin shell (like leaves, paper sheets or windows). Disables ray bending in refraction.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/thin-walledcase" }), jsx(BoundProperty, { component: MaterialTextureDebugPropertyLine, label: "Geometry Normal", target: material, propertyKey: "geometryNormalTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0, material: material }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Tangent Angle", target: material, propertyKey: "geometryTangentAngle", min: 0, max: Math.PI, step: 0.01, description: "Tangent vector controlling anisotropic reflection direction for the base (metal and non-metal). Works with specular_roughness_anisotropy.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/geometry/tangent" }), jsx(BoundProperty, { component: MaterialTextureDebugPropertyLine, label: "Geometry Tangent", target: material, propertyKey: "geometryTangentTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0, material: material }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Coat Tangent Angle", target: material, propertyKey: "geometryCoatTangentAngle", min: 0, max: Math.PI, step: 0.01, description: "Tangent vector controlling anisotropic reflection direction for the coat. Works with coat_roughness_anisotropy.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/geometry/coat-tangent" }), jsx(BoundProperty, { component: MaterialTextureDebugPropertyLine, label: "Geometry Coat Normal", target: material, propertyKey: "geometryCoatNormalTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0, material: material }), jsx(BoundProperty, { component: MaterialTextureDebugPropertyLine, label: "Geometry Coat Tangent", target: material, propertyKey: "geometryCoatTangentTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0, material: material }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Geometry Thickness", target: material, propertyKey: "geometryThickness", min: 0, step: 0.001, description: "Controls the thickness of the geometry for volume approximations.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/thickness" }), jsx(BoundProperty, { component: MaterialTextureDebugPropertyLine, label: "Geometry Thickness", target: material, propertyKey: "geometryThicknessTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0, material: material })] }));
 };
 const SssQualityOptions = [
     { label: "Low (8 samples)", value: 0 },
@@ -16068,7 +16738,7 @@ const StandardMaterialTexturesProperties = (props) => {
     const { material, selectionService } = props;
     const scene = material.getScene();
     const selectEntity = (entity) => (selectionService.selectedEntity = entity);
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Diffuse", target: material, propertyKey: "diffuseTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Specular", target: material, propertyKey: "specularTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, uniqueId: "StandardMaterialTextures_Reflection", label: "Reflection", target: material, propertyKey: "reflectionTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Refraction", target: material, propertyKey: "refractionTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Emissive", target: material, propertyKey: "emissiveTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Bump", target: material, propertyKey: "bumpTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Opacity", target: material, propertyKey: "opacityTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Ambient", target: material, propertyKey: "ambientTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Lightmap", target: material, propertyKey: "lightmapTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Detailmap", target: material.detailMap, propertyKey: "texture", propertyPath: "detailMap.texture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use Lightmap as Shadowmap", target: material, propertyKey: "useLightmapAsShadowmap" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use Detailmap", target: material.detailMap, propertyKey: "isEnabled", propertyPath: "detailMap.isEnabled" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use Decalmap", target: material.decalMap, propertyKey: "isEnabled", propertyPath: "decalMap.isEnabled" })] }));
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: MaterialTextureDebugPropertyLine, label: "Diffuse", target: material, propertyKey: "diffuseTexture", scene: scene, onLink: selectEntity, defaultValue: null, material: material }), jsx(BoundProperty, { component: MaterialTextureDebugPropertyLine, label: "Specular", target: material, propertyKey: "specularTexture", scene: scene, onLink: selectEntity, defaultValue: null, material: material }), jsx(BoundProperty, { component: MaterialTextureDebugPropertyLine, uniqueId: "StandardMaterialTextures_Reflection", label: "Reflection", target: material, propertyKey: "reflectionTexture", scene: scene, onLink: selectEntity, defaultValue: null, material: material }), jsx(BoundProperty, { component: MaterialTextureDebugPropertyLine, label: "Refraction", target: material, propertyKey: "refractionTexture", scene: scene, onLink: selectEntity, defaultValue: null, material: material }), jsx(BoundProperty, { component: MaterialTextureDebugPropertyLine, label: "Emissive", target: material, propertyKey: "emissiveTexture", scene: scene, onLink: selectEntity, defaultValue: null, material: material }), jsx(BoundProperty, { component: MaterialTextureDebugPropertyLine, label: "Bump", target: material, propertyKey: "bumpTexture", scene: scene, onLink: selectEntity, defaultValue: null, material: material }), jsx(BoundProperty, { component: MaterialTextureDebugPropertyLine, label: "Opacity", target: material, propertyKey: "opacityTexture", scene: scene, onLink: selectEntity, defaultValue: null, material: material }), jsx(BoundProperty, { component: MaterialTextureDebugPropertyLine, label: "Ambient", target: material, propertyKey: "ambientTexture", scene: scene, onLink: selectEntity, defaultValue: null, material: material }), jsx(BoundProperty, { component: MaterialTextureDebugPropertyLine, label: "Lightmap", target: material, propertyKey: "lightmapTexture", scene: scene, onLink: selectEntity, defaultValue: null, material: material }), jsx(BoundProperty, { component: MaterialTextureDebugPropertyLine, label: "Detailmap", target: material.detailMap, propertyKey: "texture", propertyPath: "detailMap.texture", scene: scene, onLink: selectEntity, defaultValue: null, material: material }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use Lightmap as Shadowmap", target: material, propertyKey: "useLightmapAsShadowmap" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use Detailmap", target: material.detailMap, propertyKey: "isEnabled", propertyPath: "detailMap.isEnabled" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use Decalmap", target: material.decalMap, propertyKey: "isEnabled", propertyPath: "decalMap.isEnabled" })] }));
 };
 /**
  * Displays the levels properties of a standard material.
@@ -21525,6 +22195,243 @@ const AtmosphereExplorerServiceDefinition = {
     },
 };
 
+function IsRoutable(node) {
+    return node instanceof AbstractSoundSource || node instanceof AudioBus;
+}
+function GetEngineDisplayName(engine) {
+    return LastCreatedAudioEngine() === engine ? "Last Created Audio Engine" : "Other Audio Engine";
+}
+const AudioV2ExplorerServiceDefinition = {
+    friendlyName: "Audio V2 Explorer",
+    consumes: [SceneExplorerServiceIdentity, SceneContextIdentity, GizmoServiceIdentity, SelectionServiceIdentity],
+    factory: (sceneExplorerService, sceneContext, gizmoService, selectionService) => {
+        // Section-level observables driven by per-engine subscriptions below.
+        const entityAddedObservable = new Observable();
+        const entityRemovedObservable = new Observable();
+        const entityMovedObservable = new Observable();
+        // Notified whenever any engine's "Last Created" status may have changed (i.e. an engine
+        // was added or removed). Display info hooks subscribe to this to refresh the engine label.
+        const engineDisplayNameChangedObservable = new Observable();
+        // Per-engine subscription tokens (disposed when the engine is disposed).
+        const engineSubscriptions = new Map();
+        // Per-instance outBus interception tokens for sounds / sound sources / audio buses.
+        const outBusInterceptors = new Map();
+        const subscribeOutBus = (entity) => {
+            if (outBusInterceptors.has(entity)) {
+                return;
+            }
+            outBusInterceptors.set(entity, InterceptProperty(entity, "outBus", {
+                afterSet: () => entityMovedObservable.notifyObservers(entity),
+            }));
+        };
+        const unsubscribeOutBus = (entity) => {
+            outBusInterceptors.get(entity)?.dispose();
+            outBusInterceptors.delete(entity);
+        };
+        const subscribeEngine = (engine) => {
+            if (engineSubscriptions.has(engine)) {
+                return;
+            }
+            const nodeAddedObserver = engine.onNodeAddedObservable.add((node) => {
+                if (IsRoutable(node)) {
+                    subscribeOutBus(node);
+                }
+                entityAddedObservable.notifyObservers(node);
+            });
+            const nodeRemovedObserver = engine.onNodeRemovedObservable.add((node) => {
+                if (IsRoutable(node)) {
+                    unsubscribeOutBus(node);
+                }
+                entityRemovedObservable.notifyObservers(node);
+            });
+            const disposeObserver = engine.onDisposeObservable.add(() => {
+                unsubscribeEngine(engine);
+                entityRemovedObservable.notifyObservers(engine);
+                engineDisplayNameChangedObservable.notifyObservers();
+            });
+            // Seed outBus interception for nodes that already exist on this engine.
+            for (const node of engine.nodes) {
+                if (IsRoutable(node)) {
+                    subscribeOutBus(node);
+                }
+            }
+            engineSubscriptions.set(engine, {
+                dispose: () => {
+                    nodeAddedObserver.remove();
+                    nodeRemovedObserver.remove();
+                    disposeObserver.remove();
+                },
+            });
+        };
+        const unsubscribeEngine = (engine) => {
+            engineSubscriptions.get(engine)?.dispose();
+            engineSubscriptions.delete(engine);
+        };
+        // Seed with engines that already exist.
+        for (const engine of AudioEngineV2.Instances) {
+            subscribeEngine(engine);
+        }
+        // React to new engines.
+        const engineCreatedObserver = OnAudioEngineV2CreatedObservable.add((engine) => {
+            subscribeEngine(engine);
+            entityAddedObservable.notifyObservers(engine);
+            engineDisplayNameChangedObservable.notifyObservers();
+        });
+        const sectionRegistration = sceneExplorerService.addSection({
+            displayName: "Audio V2",
+            order: 1500 /* DefaultSectionsOrder.AudioV2 */,
+            getRootEntities: () => [...AudioEngineV2.Instances],
+            getEntityChildren: (entity) => {
+                if (entity instanceof AudioEngineV2) {
+                    const children = [];
+                    for (const node of entity.nodes) {
+                        if (node instanceof MainAudioBus) {
+                            children.push(node);
+                        }
+                        else if (IsRoutable(node) && !node.outBus) {
+                            // Surface routable nodes that don't route through a bus (e.g. microphone
+                            // sound sources, or sounds with outBus explicitly cleared) directly under
+                            // the engine so they remain visible in the tree.
+                            children.push(node);
+                        }
+                    }
+                    return children;
+                }
+                if (entity instanceof MainAudioBus || entity instanceof AudioBus) {
+                    const children = [];
+                    for (const node of entity.engine.nodes) {
+                        if (IsRoutable(node) && node.outBus === entity) {
+                            children.push(node);
+                        }
+                    }
+                    return children;
+                }
+                return [];
+            },
+            getEntityDisplayInfo: (entity) => {
+                const onChangeObservable = new Observable();
+                let nodeNameObserver = null;
+                let engineDisplayObserver = null;
+                if (entity instanceof AudioEngineV2) {
+                    engineDisplayObserver = engineDisplayNameChangedObservable.add(() => onChangeObservable.notifyObservers());
+                }
+                else {
+                    nodeNameObserver = entity.onNameChangedObservable.add(() => onChangeObservable.notifyObservers());
+                }
+                return {
+                    get name() {
+                        if (entity instanceof AudioEngineV2) {
+                            return GetEngineDisplayName(entity);
+                        }
+                        return entity.name || `Unnamed ${entity.getClassName()}`;
+                    },
+                    onChange: onChangeObservable,
+                    dispose: () => {
+                        nodeNameObserver?.remove();
+                        engineDisplayObserver?.remove();
+                        onChangeObservable.clear();
+                    },
+                };
+            },
+            entityIcon: ({ entity }) => {
+                const color = tokens.colorPaletteForestForeground2;
+                if (entity instanceof AudioEngineV2) {
+                    return jsx(HeadphonesSoundWaveRegular, { color: color });
+                }
+                if (entity instanceof AbstractAudioBus) {
+                    return jsx(ArrowEnterUpRegular, { color: color });
+                }
+                if (entity instanceof StaticSound) {
+                    return jsx(SoundWaveCircleRegular, { color: color });
+                }
+                if (entity instanceof StreamingSound) {
+                    return jsx(SoundWaveCircleFilled, { color: color });
+                }
+                if (entity instanceof AbstractSoundSource) {
+                    return jsx(CatchUpRegular, { color: color });
+                }
+                return jsx(Fragment, {});
+            },
+            getEntityAddedObservables: () => [entityAddedObservable],
+            getEntityRemovedObservables: () => [entityRemovedObservable],
+            getEntityMovedObservables: () => [entityMovedObservable],
+        });
+        // Spatial-audio visualization gizmo toggle.
+        const spatialGizmoCommandRegistration = sceneExplorerService.addEntityCommand({
+            predicate: (entity) => entity instanceof AbstractSoundSource && entity._isSpatial,
+            order: 800 /* DefaultCommandsOrder.GizmoActive */,
+            getCommand: (source) => {
+                const onChangeObservable = new Observable();
+                let gizmoRef = null;
+                let onClickedObserver = null;
+                const releaseGizmo = () => {
+                    onClickedObserver?.dispose();
+                    onClickedObserver = null;
+                    gizmoRef?.dispose();
+                    gizmoRef = null;
+                };
+                return {
+                    type: "toggle",
+                    get displayName() {
+                        return `Turn ${gizmoRef ? "Off" : "On"} Gizmo`;
+                    },
+                    icon: () => (gizmoRef ? jsx(EyeRegular, {}) : jsx(EyeOffRegular, {})),
+                    get isEnabled() {
+                        return !!gizmoRef;
+                    },
+                    set isEnabled(enabled) {
+                        if (enabled) {
+                            if (!gizmoRef) {
+                                const scene = sceneContext.currentScene;
+                                if (scene) {
+                                    const ref = gizmoService.getSpatialAudioGizmo(source, scene);
+                                    gizmoRef = ref;
+                                    // Clicking the gizmo in the viewport selects the underlying sound source
+                                    // so the inspector navigates to it (mirrors how camera/light gizmos behave
+                                    // via the scene picking path).
+                                    const observer = ref.value.onClickedObservable.add((clickedSource) => {
+                                        selectionService.selectedEntity = clickedSource;
+                                    });
+                                    onClickedObserver = { dispose: () => observer.remove() };
+                                    onChangeObservable.notifyObservers();
+                                }
+                            }
+                        }
+                        else if (gizmoRef) {
+                            releaseGizmo();
+                            onChangeObservable.notifyObservers();
+                        }
+                    },
+                    onChange: onChangeObservable,
+                    dispose: () => {
+                        releaseGizmo();
+                        onChangeObservable.clear();
+                    },
+                };
+            },
+        });
+        return {
+            dispose: () => {
+                engineCreatedObserver.remove();
+                for (const subscription of engineSubscriptions.values()) {
+                    subscription.dispose();
+                }
+                engineSubscriptions.clear();
+                for (const token of outBusInterceptors.values()) {
+                    token.dispose();
+                }
+                outBusInterceptors.clear();
+                entityAddedObservable.clear();
+                entityRemovedObservable.clear();
+                entityMovedObservable.clear();
+                engineDisplayNameChangedObservable.clear();
+                spatialGizmoCommandRegistration.dispose();
+                sectionRegistration.dispose();
+            },
+        };
+    },
+};
+
 const DisposableCommandServiceDefinition = {
     friendlyName: "Disposable Command Service",
     consumes: [SceneExplorerServiceIdentity, SceneContextIdentity],
@@ -25288,7 +26195,7 @@ const Dialog = (props) => {
             if (!data.open && onDismiss) {
                 onDismiss();
             }
-        }, children: jsx(DialogSurface, { children: jsxs(DialogBody, { children: [jsx(DialogTitle, { action: onDismiss ? (jsx(DialogTrigger, { action: "close", children: jsx(Button, { appearance: "subtle", "aria-label": "close", icon: DismissRegular }) })) : undefined, children: title }), jsx(DialogContent, { children: children }), actions && actions.length > 0 && (jsx(DialogActions, { children: actions.map((action, index) => (jsx(Button, { appearance: action.appearance ?? "secondary", onClick: action.onClick, label: action.label }, index))) }))] }) }) }));
+        }, children: jsx(DialogSurface, { children: jsxs(DialogBody, { children: [jsx(DialogTitle, { action: onDismiss ? (jsx(DialogTrigger, { action: "close", children: jsx(Button, { appearance: "subtle", ariaLabel: "close", icon: DismissRegular }) })) : undefined, children: title }), jsx(DialogContent, { children: children }), actions && actions.length > 0 && (jsx(DialogActions, { children: actions.map((action, index) => (jsx(Button, { appearance: action.appearance ?? "secondary", onClick: action.onClick, label: action.label }, index))) }))] }) }) }));
 };
 
 const SmartAssetsPaneKey = "Smart Assets";
@@ -25570,7 +26477,7 @@ function ShowInspector(scene, options = {}) {
         // Helps with managing gizmos and a shared utility layer.
         GizmoServiceDefinition, 
         // Scene explorer tab and related services.
-        SceneExplorerServiceDefinition, NodeExplorerServiceDefinition, SkeletonExplorerServiceDefinition, MaterialExplorerServiceDefinition, TextureExplorerServiceDefinition, PostProcessExplorerServiceDefinition, RenderingPipelineExplorerServiceDefinition, EffectLayerExplorerServiceDefinition, ParticleSystemExplorerServiceDefinition, SpriteManagerExplorerServiceDefinition, AnimationGroupExplorerServiceDefinition, GuiExplorerServiceDefinition, FrameGraphExplorerServiceDefinition, AtmosphereExplorerServiceDefinition, SoundExplorerServiceDefinition, DisposableCommandServiceDefinition, 
+        SceneExplorerServiceDefinition, NodeExplorerServiceDefinition, SkeletonExplorerServiceDefinition, MaterialExplorerServiceDefinition, TextureExplorerServiceDefinition, PostProcessExplorerServiceDefinition, RenderingPipelineExplorerServiceDefinition, EffectLayerExplorerServiceDefinition, ParticleSystemExplorerServiceDefinition, SpriteManagerExplorerServiceDefinition, AnimationGroupExplorerServiceDefinition, GuiExplorerServiceDefinition, FrameGraphExplorerServiceDefinition, AtmosphereExplorerServiceDefinition, SoundExplorerServiceDefinition, AudioV2ExplorerServiceDefinition, DisposableCommandServiceDefinition, 
         // Properties pane tab and related services.
         ScenePropertiesServiceDefinition, PropertiesServiceDefinition, TexturePropertiesServiceDefinition, CommonPropertiesServiceDefinition, TransformPropertiesServiceDefinition, AnimationPropertiesServiceDefinition, NodePropertiesServiceDefinition, PhysicsPropertiesServiceDefinition, SkeletonPropertiesServiceDefinition, MaterialPropertiesServiceDefinition, LightPropertiesServiceDefinition, SpritePropertiesServiceDefinition, ParticleSystemPropertiesServiceDefinition, CameraPropertiesServiceDefinition, PostProcessPropertiesServiceDefinition, RenderingPipelinePropertiesServiceDefinition, EffectLayerPropertiesServiceDefinition, FrameGraphPropertiesServiceDefinition, AnimationGroupPropertiesServiceDefinition, MetadataPropertiesServiceDefinition, AtmospherePropertiesServiceDefinition, AudioPropertiesServiceDefinition, 
         // Texture editor and related services.
@@ -26442,4 +27349,4 @@ const TextAreaPropertyLine = (props) => {
 AttachDebugLayer();
 
 export { GetPropertyDescriptor as $, Accordion as A, Button as B, CheckboxPropertyLine as C, Color4PropertyLine as D, ColorPickerPopup as E, ColorStepGradientComponent as F, ComboBox as G, ComboBoxPropertyLine as H, ConstructorFactory as I, ConvertOptions as J, DebugServiceIdentity as K, Link as L, MessageBar as M, NumberInputPropertyLine as N, DetachDebugLayer as O, Popover as P, DraggableLine as Q, Dropdown as R, ShellServiceIdentity as S, TextInputPropertyLine as T, EntitySelector as U, Vector3PropertyLine as V, ErrorBoundary as W, ExtensibleAccordion as X, FactorGradientComponent as Y, FactorGradientList as Z, FileUploadLine as _, useToast as a, ThemeServiceIdentity as a$, GizmoServiceIdentity as a0, HexPropertyLine as a1, InfoLabel as a2, InputHexField as a3, InputHsvField as a4, Inspector as a5, InterceptFunction as a6, InterceptProperty as a7, IsPropertyReadonly as a8, LineContainer as a9, SearchBox as aA, SelectionServiceDefinition as aB, SettingsServiceIdentity as aC, SettingsStore as aD, SettingsStoreIdentity as aE, ShowInspector as aF, SidePaneContainer as aG, SkeletonSelector as aH, Slider as aI, SpinButton as aJ, StartInspectable as aK, StatsServiceIdentity as aL, StringDropdown as aM, StringDropdownPropertyLine as aN, StringifiedPropertyLine as aO, Switch as aP, SwitchPropertyLine as aQ, SyncedSliderInput as aR, SyncedSliderPropertyLine as aS, TeachingMoment as aT, TextAreaPropertyLine as aU, TextInput as aV, TextPropertyLine as aW, Textarea as aX, TextureSelector as aY, TextureUpload as aZ, Theme as a_, LinkPropertyLine as aa, LinkToEntityPropertyLine as ab, List as ac, MakeDialogTeachingMoment as ad, MakeLazyComponent as ae, MakeModularBridge as af, MakeModularTool as ag, MakePopoverTeachingMoment as ah, MakePropertyHook as ai, MakeTeachingMoment as aj, MaterialSelector as ak, NodeSelector as al, NumberDropdown as am, NumberDropdownPropertyLine as an, ObservableCollection as ao, Pane as ap, PlaceholderPropertyLine as aq, PositionedPopover as ar, PropertiesServiceIdentity as as, Property as at, PropertyContext as au, PropertyLine as av, QuaternionPropertyLine as aw, RotationVectorPropertyLine as ax, SceneExplorerServiceIdentity as ay, SearchBar as az, useInterceptObservable as b, ToastProvider as b0, ToggleButton as b1, Tooltip as b2, UploadButton as b3, Vector2PropertyLine as b4, Vector4PropertyLine as b5, WatcherServiceIdentity as b6, inspectorAssetNotFoundHandler as b7, useAngleConverters as b8, useAsyncResource as b9, useColor3Property as ba, useColor4Property as bb, useEventListener as bc, useEventfulState as bd, useKeyListener as be, useKeyState as bf, useObservableCollection as bg, useOrderedObservableCollection as bh, usePollingObservable as bi, usePropertyChangedNotifier as bj, useQuaternionProperty as bk, useResource as bl, useTheme as bm, useThemeMode as bn, useVector3Property as bo, LinkToEntity as c, SpinButtonPropertyLine as d, useProperty as e, SceneContextIdentity as f, SelectionServiceIdentity as g, useObservableState as h, AccordionSection as i, ButtonLine as j, ToolsServiceIdentity as k, AccordionSectionItem as l, AttachDebugLayer as m, BooleanBadgePropertyLine as n, BoundProperty as o, BridgeCommandRegistryIdentity as p, BuiltInsExtensionFeed as q, Checkbox as r, ChildWindow as s, Collapse as t, useExtensionManager as u, Color3GradientComponent as v, Color3GradientList as w, Color3PropertyLine as x, Color4GradientComponent as y, Color4GradientList as z };
-//# sourceMappingURL=index-UoPnMkyH.js.map
+//# sourceMappingURL=index--oJsOVVX.js.map