@babylonjs/inspector 9.9.0 → 9.9.2

package/lib/{index-PYblOaAV.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';
@@ -144,7 +153,9 @@ import { SceneRecorder } from '@babylonjs/core/Misc/sceneRecorder.js';
 import { VideoRecorder } from '@babylonjs/core/Misc/videoRecorder.js';
 import { SceneSerializer } from '@babylonjs/core/Misc/sceneSerializer.js';
 import { EnvironmentTextureTools } from '@babylonjs/core/Misc/environmentTextureTools.js';
-import { SerializeSmartAssetManagerMap, GetAllSmartAssets, RemoveSmartAssetAsync, LoadSmartAssetMapAsync, GetSmartAssetTextureExtensions, GetSmartAssetManager, LoadSmartAssetTextureAsync, LoadSmartAssetAsync, ReloadSmartAssetAsync, FindSmartAssetKeyForObject, UnloadSmartAssetAsync } from '@babylonjs/core/SmartAssets/smartAssetManager.js';
+import { FindSmartAssetKeyForObject, SerializeSmartAssetManagerMap, GetSmartAssetTextureExtensions, GetAllSmartAssets, RemoveSmartAssetAsync, RegisterSmartAsset, LoadAllSmartAssetsAsync, LoadSmartAssetAsync, GetSmartAssetManager, LoadSmartAssetTextureAsync, ReloadSmartAssetAsync, UnloadSmartAssetAsync } from '@babylonjs/core/SmartAssets/smartAssetManager.js';
+import '@babylonjs/core/Loading/Plugins/babylonFileLoader.js';
+import { ReadJsonSourceAsync, ResolveAssetUrl, DeserializeSmartAssetMap } from '@babylonjs/core/SmartAssets/smartAssetSerializer.js';
 import { ImportAnimationsAsync, SceneLoader } from '@babylonjs/core/Loading/sceneLoader.js';
 import { FilesInput } from '@babylonjs/core/Misc/filesInput.js';
 import { registeredGLTFExtensions } from '@babylonjs/loaders/glTF/2.0/glTFLoaderExtensionRegistry.js';
@@ -246,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";
 
@@ -266,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);
@@ -281,7 +292,7 @@ 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";
 
@@ -294,6 +305,9 @@ const useStyles$11 = 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",
     },
@@ -464,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);
                 }
@@ -1691,7 +1709,7 @@ 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 [checked, setChecked] = useState(value);
@@ -1705,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({
@@ -2434,16 +2452,39 @@ const useStyles$Y = 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$Y();
-    return (jsx(FluentProvider, { theme: theme, className: mergeClasses(classes.root, className), applyStylesToPortals: applyStylesToPortals, ...rest, children: props.children }));
+    // 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$X = makeStyles({
@@ -2682,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;
     }
-    if (defaultHeight !== undefined) {
-        features.push({ key: "height", value: defaultHeight.toString() });
+    catch {
+        Logger.Warn(`Could not parse saved bounds for popup window with id ${id}`);
+        return null;
+    }
+}
+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.
@@ -2708,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;
     }
@@ -2957,6 +3068,7 @@ const useStyles$W = makeStyles({
     paneCollapseButton: {
         padding: `0 0 0 ${tokens.spacingHorizontalXS}`,
         borderBottom: `1px solid ${tokens.colorNeutralStroke2}`,
+        backgroundColor: tokens.colorNeutralBackground2,
     },
     paneCollapseButtonWithBorder: {
         borderLeft: `1px solid ${tokens.colorNeutralStroke2}`,
@@ -2980,6 +3092,11 @@ const useStyles$W = 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,
@@ -3291,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.
@@ -4279,6 +4405,37 @@ const useStyles$U = 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
@@ -4290,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
@@ -4450,7 +4607,7 @@ 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$U();
@@ -6153,13 +6310,25 @@ function CoerceStepValue(step, isFineKeyPressed, isCourseKeyPressed) {
     }
     return step;
 }
-// Allow arbitrary expressions, primarily for math operations (e.g. 10*60 for 10 minutes in seconds).
-// Use Function constructor to safely evaluate the expression without allowing access to scope.
-// If the expression is invalid, fallback to NaN which will be caught by validateValue and prevent committing.
+// Parse the raw input into a number, supporting plain numeric values and arbitrary math expressions
+// (e.g. "10*60" for 10 minutes in seconds).
+// First, try Number() so plain numeric input works even under a strict Content-Security-Policy that
+// disallows eval/Function. Only fall back to the Function constructor for non-numeric inputs that may
+// be expressions. Empty/whitespace input returns NaN so validateValue rejects it rather than committing
+// 0 (which is what Number("") would otherwise return).
+// Non-finite results (NaN, +/-Infinity) are rejected from both paths so callers don't have to handle them.
 function EvaluateExpression(rawValue) {
-    const val = rawValue.trim();
+    rawValue = rawValue.trim();
+    if (rawValue.length === 0) {
+        return NaN;
+    }
+    const value = Number(rawValue);
+    if (Number.isFinite(value)) {
+        return value;
+    }
     try {
-        return Number(Function(`"use strict";return (${val})`)());
+        const result = Number(Function(`"use strict";return (${rawValue})`)());
+        return Number.isFinite(result) ? result : NaN;
     }
     catch {
         return NaN;
@@ -7633,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();
@@ -7768,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() {
@@ -8340,11 +8552,18 @@ 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;
@@ -8411,6 +8630,24 @@ const useStyles$K = 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) });
@@ -8446,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) {
@@ -8496,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.
@@ -8518,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-DTrjNf_v.js');
+                    const { ExtensionListServiceDefinition } = await import('./extensionsListService-j6viqje8.js');
                     serviceContainer.addService(ExtensionListServiceDefinition);
                 }
                 // Register all external services (that make up a unique tool).
@@ -8585,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";
@@ -8639,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-8d6rBO-A.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-B7LcD1Sn.js'),
+        getExtensionModuleAsync: async () => await import('./reflectorService-2dP-GJrK.js'),
     },
 ]);
 
@@ -14241,7 +14519,7 @@ const AtmospherePropertiesServiceDefinition = {
     },
 };
 
-function useSoundState(sound) {
+function useSoundState$1(sound) {
     const stateChangedObservables = [
         useInterceptObservable("function", sound, "play"),
         useInterceptObservable("function", sound, "pause"),
@@ -14253,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") {
@@ -14272,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: [
@@ -14290,55 +14753,167 @@ const AudioPropertiesServiceDefinition = {
                 },
             ],
         });
-        return {
-            dispose: () => {
-                soundContentRegistration.dispose();
-            },
-        };
-    },
-};
-
-const ArcRotateCameraTransformProperties = (props) => {
-    const { camera } = props;
-    const [toDisplayAngle, fromDisplayAngle, useDegrees] = useAngleConverters();
-    const lowerAlphaLimit = useProperty(camera, "lowerAlphaLimit") ?? 0;
-    const upperAlphaLimit = useProperty(camera, "upperAlphaLimit") ?? Math.PI * 2;
-    const lowerBetaLimit = useProperty(camera, "lowerBetaLimit") ?? -Math.PI;
-    const upperBetaLimit = useProperty(camera, "upperBetaLimit") ?? Math.PI;
-    const lowerRadiusLimit = useProperty(camera, "lowerRadiusLimit");
-    const upperRadiusLimit = useProperty(camera, "upperRadiusLimit");
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Alpha", description: `Horizontal angle in ${useDegrees ? "degrees" : "radians"}`, target: camera, propertyKey: "alpha", min: toDisplayAngle(lowerAlphaLimit), max: toDisplayAngle(upperAlphaLimit), step: toDisplayAngle(0.01), unit: useDegrees ? "°" : "rad", convertTo: (value) => toDisplayAngle(value, true), convertFrom: fromDisplayAngle }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Beta", description: `Vertical angle in ${useDegrees ? "degrees" : "radians"}`, target: camera, propertyKey: "beta", min: toDisplayAngle(lowerBetaLimit), max: toDisplayAngle(upperBetaLimit), step: toDisplayAngle(0.01), unit: useDegrees ? "°" : "rad", convertTo: (value) => toDisplayAngle(value, true), convertFrom: fromDisplayAngle }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Radius", description: "Distance from the target point.", target: camera, propertyKey: "radius", min: lowerRadiusLimit ?? undefined, max: upperRadiusLimit ?? undefined, step: 0.01 })] }));
-};
-const ArcRotateCameraControlProperties = (props) => {
-    const { camera } = props;
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Angular Sensitivity X", target: camera, propertyKey: "angularSensibilityX" }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Angular Sensitivity Y", target: camera, propertyKey: "angularSensibilityY" }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Panning Sensitivity", target: camera, propertyKey: "panningSensibility" }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Pinch Delta Percentage", target: camera, propertyKey: "pinchDeltaPercentage" }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Wheel Delta Percentage", target: camera, propertyKey: "wheelDeltaPercentage" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use Natural Pinch Zoom", target: camera, propertyKey: "useNaturalPinchZoom" })] }));
-};
-const ArcRotateCameraCollisionProperties = (props) => {
-    const { camera } = props;
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Check Collisions", target: camera, propertyKey: "checkCollisions" }), jsx(BoundProperty, { component: Vector3PropertyLine, label: "Collision Radius", target: camera, propertyKey: "collisionRadius" })] }));
-};
-const ArcRotateCameraLimitsProperties = (props) => {
-    const { camera } = props;
-    const [toDisplayAngle, fromDisplayAngle, useDegrees] = useAngleConverters();
-    const minAlphaLimit = 0;
-    const maxAlphaLimit = Math.PI * 2;
-    const minBetaLimit = -Math.PI;
-    const maxBetaLimit = Math.PI;
-    const lowerAlphaLimit = useProperty(camera, "lowerAlphaLimit") ?? minAlphaLimit;
-    const upperAlphaLimit = useProperty(camera, "upperAlphaLimit") ?? maxAlphaLimit;
-    const lowerBetaLimit = useProperty(camera, "lowerBetaLimit") ?? minBetaLimit;
-    const upperBetaLimit = useProperty(camera, "upperBetaLimit") ?? maxBetaLimit;
-    const lowerRadiusLimit = useProperty(camera, "lowerRadiusLimit");
-    const upperRadiusLimit = useProperty(camera, "upperRadiusLimit");
-    // TODO-Iv2: Update defaultValues
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Lower Alpha Limit", target: camera, propertyKey: "lowerAlphaLimit", nullable: true, defaultValue: toDisplayAngle(minAlphaLimit), min: toDisplayAngle(minAlphaLimit), max: toDisplayAngle(upperAlphaLimit), unit: useDegrees ? "°" : "rad", convertTo: (value) => (value === null ? value : toDisplayAngle(value, true)), convertFrom: (value) => (value === null ? value : fromDisplayAngle(value)) }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Upper Alpha Limit", target: camera, propertyKey: "upperAlphaLimit", nullable: true, defaultValue: toDisplayAngle(maxAlphaLimit), min: toDisplayAngle(lowerAlphaLimit), max: toDisplayAngle(maxAlphaLimit), unit: useDegrees ? "°" : "rad", convertTo: (value) => (value === null ? value : toDisplayAngle(value, true)), convertFrom: (value) => (value === null ? value : fromDisplayAngle(value)) }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Lower Beta Limit", target: camera, propertyKey: "lowerBetaLimit", nullable: true, defaultValue: toDisplayAngle(minBetaLimit), min: toDisplayAngle(minBetaLimit), max: toDisplayAngle(upperBetaLimit), unit: useDegrees ? "°" : "rad", convertTo: (value) => (value === null ? value : toDisplayAngle(value, true)), convertFrom: (value) => (value === null ? value : fromDisplayAngle(value)) }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Upper Beta Limit", target: camera, propertyKey: "upperBetaLimit", nullable: true, defaultValue: toDisplayAngle(maxBetaLimit), min: toDisplayAngle(lowerBetaLimit), max: toDisplayAngle(maxBetaLimit), unit: useDegrees ? "°" : "rad", convertTo: (value) => (value === null ? value : toDisplayAngle(value, true)), convertFrom: (value) => (value === null ? value : fromDisplayAngle(value)) }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Lower Radius Limit", target: camera, propertyKey: "lowerRadiusLimit", nullable: true, defaultValue: 0, min: 0, max: upperRadiusLimit ?? undefined }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Upper Radius Limit", target: camera, propertyKey: "upperRadiusLimit", nullable: true, defaultValue: 100, min: lowerRadiusLimit ?? undefined }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Lower Target Y Limit", target: camera, propertyKey: "lowerTargetYLimit" })] }));
-};
-const ArcRotateCameraBehaviorsProperties = (props) => {
-    const { camera } = props;
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Auto Rotation", target: camera, propertyKey: "useAutoRotationBehavior" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Bouncing", target: camera, propertyKey: "useBouncingBehavior" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Framing", target: camera, propertyKey: "useFramingBehavior" })] }));
-};
-
-const GeospatialCameraTransformProperties = (props) => {
+        // --- 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: () => {
+                soundV1ContentRegistration.dispose();
+                engineV2ContentRegistration.dispose();
+                busV2ContentRegistration.dispose();
+                audioBusV2ContentRegistration.dispose();
+                soundV2ContentRegistration.dispose();
+                staticSoundV2ContentRegistration.dispose();
+                streamingSoundV2ContentRegistration.dispose();
+                soundSourceV2ContentRegistration.dispose();
+                spatialV2ContentRegistration.dispose();
+            },
+        };
+    },
+};
+
+const ArcRotateCameraTransformProperties = (props) => {
+    const { camera } = props;
+    const [toDisplayAngle, fromDisplayAngle, useDegrees] = useAngleConverters();
+    const lowerAlphaLimit = useProperty(camera, "lowerAlphaLimit") ?? 0;
+    const upperAlphaLimit = useProperty(camera, "upperAlphaLimit") ?? Math.PI * 2;
+    const lowerBetaLimit = useProperty(camera, "lowerBetaLimit") ?? -Math.PI;
+    const upperBetaLimit = useProperty(camera, "upperBetaLimit") ?? Math.PI;
+    const lowerRadiusLimit = useProperty(camera, "lowerRadiusLimit");
+    const upperRadiusLimit = useProperty(camera, "upperRadiusLimit");
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Alpha", description: `Horizontal angle in ${useDegrees ? "degrees" : "radians"}`, target: camera, propertyKey: "alpha", min: toDisplayAngle(lowerAlphaLimit), max: toDisplayAngle(upperAlphaLimit), step: toDisplayAngle(0.01), unit: useDegrees ? "°" : "rad", convertTo: (value) => toDisplayAngle(value, true), convertFrom: fromDisplayAngle }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Beta", description: `Vertical angle in ${useDegrees ? "degrees" : "radians"}`, target: camera, propertyKey: "beta", min: toDisplayAngle(lowerBetaLimit), max: toDisplayAngle(upperBetaLimit), step: toDisplayAngle(0.01), unit: useDegrees ? "°" : "rad", convertTo: (value) => toDisplayAngle(value, true), convertFrom: fromDisplayAngle }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Radius", description: "Distance from the target point.", target: camera, propertyKey: "radius", min: lowerRadiusLimit ?? undefined, max: upperRadiusLimit ?? undefined, step: 0.01 })] }));
+};
+const ArcRotateCameraControlProperties = (props) => {
+    const { camera } = props;
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Angular Sensitivity X", target: camera, propertyKey: "angularSensibilityX" }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Angular Sensitivity Y", target: camera, propertyKey: "angularSensibilityY" }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Panning Sensitivity", target: camera, propertyKey: "panningSensibility" }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Pinch Delta Percentage", target: camera, propertyKey: "pinchDeltaPercentage" }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Wheel Delta Percentage", target: camera, propertyKey: "wheelDeltaPercentage" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use Natural Pinch Zoom", target: camera, propertyKey: "useNaturalPinchZoom" })] }));
+};
+const ArcRotateCameraCollisionProperties = (props) => {
+    const { camera } = props;
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Check Collisions", target: camera, propertyKey: "checkCollisions" }), jsx(BoundProperty, { component: Vector3PropertyLine, label: "Collision Radius", target: camera, propertyKey: "collisionRadius" })] }));
+};
+const ArcRotateCameraLimitsProperties = (props) => {
+    const { camera } = props;
+    const [toDisplayAngle, fromDisplayAngle, useDegrees] = useAngleConverters();
+    const minAlphaLimit = 0;
+    const maxAlphaLimit = Math.PI * 2;
+    const minBetaLimit = -Math.PI;
+    const maxBetaLimit = Math.PI;
+    const lowerAlphaLimit = useProperty(camera, "lowerAlphaLimit") ?? minAlphaLimit;
+    const upperAlphaLimit = useProperty(camera, "upperAlphaLimit") ?? maxAlphaLimit;
+    const lowerBetaLimit = useProperty(camera, "lowerBetaLimit") ?? minBetaLimit;
+    const upperBetaLimit = useProperty(camera, "upperBetaLimit") ?? maxBetaLimit;
+    const lowerRadiusLimit = useProperty(camera, "lowerRadiusLimit");
+    const upperRadiusLimit = useProperty(camera, "upperRadiusLimit");
+    // TODO-Iv2: Update defaultValues
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Lower Alpha Limit", target: camera, propertyKey: "lowerAlphaLimit", nullable: true, defaultValue: toDisplayAngle(minAlphaLimit), min: toDisplayAngle(minAlphaLimit), max: toDisplayAngle(upperAlphaLimit), unit: useDegrees ? "°" : "rad", convertTo: (value) => (value === null ? value : toDisplayAngle(value, true)), convertFrom: (value) => (value === null ? value : fromDisplayAngle(value)) }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Upper Alpha Limit", target: camera, propertyKey: "upperAlphaLimit", nullable: true, defaultValue: toDisplayAngle(maxAlphaLimit), min: toDisplayAngle(lowerAlphaLimit), max: toDisplayAngle(maxAlphaLimit), unit: useDegrees ? "°" : "rad", convertTo: (value) => (value === null ? value : toDisplayAngle(value, true)), convertFrom: (value) => (value === null ? value : fromDisplayAngle(value)) }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Lower Beta Limit", target: camera, propertyKey: "lowerBetaLimit", nullable: true, defaultValue: toDisplayAngle(minBetaLimit), min: toDisplayAngle(minBetaLimit), max: toDisplayAngle(upperBetaLimit), unit: useDegrees ? "°" : "rad", convertTo: (value) => (value === null ? value : toDisplayAngle(value, true)), convertFrom: (value) => (value === null ? value : fromDisplayAngle(value)) }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Upper Beta Limit", target: camera, propertyKey: "upperBetaLimit", nullable: true, defaultValue: toDisplayAngle(maxBetaLimit), min: toDisplayAngle(lowerBetaLimit), max: toDisplayAngle(maxBetaLimit), unit: useDegrees ? "°" : "rad", convertTo: (value) => (value === null ? value : toDisplayAngle(value, true)), convertFrom: (value) => (value === null ? value : fromDisplayAngle(value)) }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Lower Radius Limit", target: camera, propertyKey: "lowerRadiusLimit", nullable: true, defaultValue: 0, min: 0, max: upperRadiusLimit ?? undefined }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Upper Radius Limit", target: camera, propertyKey: "upperRadiusLimit", nullable: true, defaultValue: 100, min: lowerRadiusLimit ?? undefined }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Lower Target Y Limit", target: camera, propertyKey: "lowerTargetYLimit" })] }));
+};
+const ArcRotateCameraBehaviorsProperties = (props) => {
+    const { camera } = props;
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Auto Rotation", target: camera, propertyKey: "useAutoRotationBehavior" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Bouncing", target: camera, propertyKey: "useBouncingBehavior" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Framing", target: camera, propertyKey: "useFramingBehavior" })] }));
+};
+
+const GeospatialCameraTransformProperties = (props) => {
     const { camera } = props;
     const [toDisplayAngle, fromDisplayAngle, useDegrees] = useAngleConverters();
     const limits = useProperty(camera, "limits");
@@ -15776,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 },
@@ -15880,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;
@@ -15890,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;
@@ -15957,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.
@@ -15966,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.
@@ -15983,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.
@@ -15992,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.
@@ -16001,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.
@@ -16010,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.
@@ -16019,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 },
@@ -16054,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.
@@ -16440,7 +17124,7 @@ function SaveMetadata(entity, metadata) {
         entity.metadata = metadata;
     }
 }
-const useStyles$l = makeStyles({
+const useStyles$k = makeStyles({
     mainDiv: {
         display: "flex",
         flexDirection: "column",
@@ -16460,7 +17144,7 @@ const useStyles$l = makeStyles({
  */
 const MetadataProperties = (props) => {
     const { entity } = props;
-    const classes = useStyles$l();
+    const classes = useStyles$k();
     const { size } = useContext(ToolContext);
     const metadata = useProperty(entity, "metadata");
     const stringifiedMetadata = useMemo(() => StringifyMetadata(metadata, false) ?? "", [metadata]);
@@ -17395,7 +18079,7 @@ const ParticleSystemEmitterProperties = (props) => {
                                 } })) : (jsx(Property, { component: TextPropertyLine, propertyPath: "source", label: "Source", value: "No meshes in scene." })), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use normals for direction", target: particleEmitterType, propertyKey: "useMeshNormalsForDirection" }), !useMeshNormalsForDirection && (jsxs(Fragment, { children: [jsx(BoundProperty, { component: Vector3PropertyLine, label: "Direction1", target: particleEmitterType, propertyKey: "direction1" }), jsx(BoundProperty, { component: Vector3PropertyLine, label: "Direction2", target: particleEmitterType, propertyKey: "direction2" })] }))] })), particleEmitterType instanceof BoxParticleEmitter && (jsxs(Fragment, { children: [jsx(BoundProperty, { component: Vector3PropertyLine, label: "Direction1", target: particleEmitterType, propertyKey: "direction1" }), jsx(BoundProperty, { component: Vector3PropertyLine, label: "Direction2", target: particleEmitterType, propertyKey: "direction2" }), jsx(BoundProperty, { component: Vector3PropertyLine, label: "Min emit box", target: particleEmitterType, propertyKey: "minEmitBox" }), jsx(BoundProperty, { component: Vector3PropertyLine, label: "Max emit box", target: particleEmitterType, propertyKey: "maxEmitBox" })] })), particleEmitterType instanceof ConeParticleEmitter && (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Radius range", target: particleEmitterType, propertyKey: "radiusRange", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Height range", target: particleEmitterType, propertyKey: "heightRange", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Emit from spawn point only", target: particleEmitterType, propertyKey: "emitFromSpawnPointOnly" }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Direction randomizer", target: particleEmitterType, propertyKey: "directionRandomizer", min: 0, max: 1, step: 0.01 })] })), particleEmitterType instanceof SphereParticleEmitter && (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Radius", target: particleEmitterType, propertyKey: "radius", min: 0, step: 0.1 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Radius range", target: particleEmitterType, propertyKey: "radiusRange", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Direction randomizer", target: particleEmitterType, propertyKey: "directionRandomizer", min: 0, max: 1, step: 0.01 })] })), particleEmitterType instanceof CylinderParticleEmitter && (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Radius", target: particleEmitterType, propertyKey: "radius", min: 0, step: 0.1 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Height", target: particleEmitterType, propertyKey: "height", min: 0, step: 0.1 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Radius range", target: particleEmitterType, propertyKey: "radiusRange", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Direction randomizer", target: particleEmitterType, propertyKey: "directionRandomizer", min: 0, max: 1, step: 0.01 })] })), particleEmitterType instanceof HemisphericParticleEmitter && (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Radius", target: particleEmitterType, propertyKey: "radius", min: 0, step: 0.1 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Radius range", target: particleEmitterType, propertyKey: "radiusRange", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Direction randomizer", target: particleEmitterType, propertyKey: "directionRandomizer", min: 0, max: 1, step: 0.01 })] })), particleEmitterType instanceof PointParticleEmitter && (jsxs(Fragment, { children: [jsx(BoundProperty, { component: Vector3PropertyLine, label: "Direction1", target: particleEmitterType, propertyKey: "direction1" }), jsx(BoundProperty, { component: Vector3PropertyLine, label: "Direction2", target: particleEmitterType, propertyKey: "direction2" })] }))] })), !scene && jsx(TextPropertyLine, { label: "Emitter", value: "No scene available." })] }));
 };
 
-const useStyles$k = makeStyles({
+const useStyles$j = makeStyles({
     subsection: {
         marginTop: tokens.spacingVerticalM,
     },
@@ -17415,7 +18099,7 @@ const ParticleSystemSizeProperties = (props) => {
     const sizeGradientGetter = useCallback(() => system.getSizeGradients(), [system]);
     const sizeGradient = useObservableArray(system, sizeGradientGetter, "addSizeGradient", "removeSizeGradient", "forceRefreshGradients");
     const useSizeGradients = (sizeGradient?.length ?? 0) > 0;
-    const classes = useStyles$k();
+    const classes = useStyles$j();
     return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Min size", target: system, propertyKey: "minSize", min: 0, step: 0.1 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Max size", target: system, propertyKey: "maxSize", min: 0, step: 0.1 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Min scale x", target: system, propertyKey: "minScaleX", min: 0, step: 0.1 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Max scale x", target: system, propertyKey: "maxScaleX", min: 0, step: 0.1 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Min scale y", target: system, propertyKey: "minScaleY", min: 0, step: 0.1 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Max scale y", target: system, propertyKey: "maxScaleY", min: 0, step: 0.1 }), isCpuParticleSystem && !useStartSizeGradients && (jsx(ButtonLine, { label: "Use Start Size gradients", onClick: () => {
                     system.addStartSizeGradient(0, system.minSize, system.maxSize);
                     system.forceRefreshGradients();
@@ -17451,7 +18135,7 @@ const ParticleSystemSizeProperties = (props) => {
                         } })] }))] }));
 };
 
-const useStyles$j = makeStyles({
+const useStyles$i = makeStyles({
     subsection: {
         marginTop: tokens.spacingVerticalM,
     },
@@ -17477,7 +18161,7 @@ const ParticleSystemEmissionProperties = (props) => {
     const useVelocityGradients = (velocityGradients?.length ?? 0) > 0;
     const useLimitVelocityGradients = (limitVelocityGradients?.length ?? 0) > 0;
     const useDragGradients = (dragGradients?.length ?? 0) > 0;
-    const classes = useStyles$j();
+    const classes = useStyles$i();
     return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Emit rate", target: system, propertyKey: "emitRate", min: 0, step: 1 }), isCpuParticleSystem && !useEmitRateGradients && (jsx(ButtonLine, { label: "Use Emit rate gradients", onClick: () => {
                     system.addEmitRateGradient(0, system.emitRate, system.emitRate);
                     system.forceRefreshGradients();
@@ -17545,7 +18229,7 @@ const ParticleSystemEmissionProperties = (props) => {
                         } })] }))] }));
 };
 
-const useStyles$i = makeStyles({
+const useStyles$h = makeStyles({
     subsection: {
         marginTop: tokens.spacingVerticalM,
     },
@@ -17562,7 +18246,7 @@ const ParticleSystemLifetimeProperties = (props) => {
     const lifeTimeGradientsGetter = useCallback(() => system.getLifeTimeGradients(), [system]);
     const lifeTimeGradients = useObservableArray(system, lifeTimeGradientsGetter, "addLifeTimeGradient", "removeLifeTimeGradient", "forceRefreshGradients");
     const useLifeTimeGradients = (lifeTimeGradients?.length ?? 0) > 0;
-    const classes = useStyles$i();
+    const classes = useStyles$h();
     return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Min lifetime", target: system, propertyKey: "minLifeTime", min: 0, step: 0.1 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Max lifetime", target: system, propertyKey: "maxLifeTime", min: 0, step: 0.1 }), isCpuParticleSystem && !useLifeTimeGradients && (jsx(ButtonLine, { label: "Use Lifetime gradients", onClick: () => {
                     system.addLifeTimeGradient(0, system.minLifeTime, system.maxLifeTime);
                     system.forceRefreshGradients();
@@ -17582,7 +18266,7 @@ const ParticleSystemLifetimeProperties = (props) => {
                         } })] })), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Target stop duration", target: system, propertyKey: "targetStopDuration", min: 0, step: 0.1 })] }));
 };
 
-const useStyles$h = makeStyles({
+const useStyles$g = makeStyles({
     subsection: {
         marginTop: tokens.spacingVerticalM,
     },
@@ -17609,7 +18293,7 @@ const ParticleSystemColorProperties = (props) => {
     const hasRampGradients = (rampGradients?.length ?? 0) > 0;
     const hasColorRemapGradients = (colorRemapGradients?.length ?? 0) > 0;
     const hasAlphaRemapGradients = (alphaRemapGradients?.length ?? 0) > 0;
-    const classes = useStyles$h();
+    const classes = useStyles$g();
     return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: Color4PropertyLine, label: "Color 1", target: system, propertyKey: "color1" }), jsx(BoundProperty, { component: Color4PropertyLine, label: "Color 2", target: system, propertyKey: "color2" }), jsx(BoundProperty, { component: Color4PropertyLine, label: "Color dead", target: system, propertyKey: "colorDead" }), !hasColorGradients && (jsx(ButtonLine, { label: "Use Color gradients", onClick: () => {
                     system.addColorGradient(0, system.color1, system.color1);
                     system.addColorGradient(1, system.color2, system.color2);
@@ -17681,7 +18365,7 @@ const ParticleSystemColorProperties = (props) => {
                                 } })] }))] }))] }));
 };
 
-const useStyles$g = makeStyles({
+const useStyles$f = makeStyles({
     subsection: {
         marginTop: tokens.spacingVerticalM,
     },
@@ -17696,7 +18380,7 @@ const ParticleSystemRotationProperties = (props) => {
     const angularSpeedGradientsGetter = useCallback(() => system.getAngularSpeedGradients(), [system]);
     const angularSpeedGradients = useObservableArray(system, angularSpeedGradientsGetter, "addAngularSpeedGradient", "removeAngularSpeedGradient", "forceRefreshGradients");
     const useAngularSpeedGradients = (angularSpeedGradients?.length ?? 0) > 0;
-    const classes = useStyles$g();
+    const classes = useStyles$f();
     return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Min Angular speed", target: system, propertyKey: "minAngularSpeed", step: 0.01 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Max Angular speed", target: system, propertyKey: "maxAngularSpeed", step: 0.01 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Min initial rotation", target: system, propertyKey: "minInitialRotation", step: 0.01 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Max initial rotation", target: system, propertyKey: "maxInitialRotation", step: 0.01 }), !useAngularSpeedGradients && (jsx(ButtonLine, { label: "Use Angular speed gradients", onClick: () => {
                     system.addAngularSpeedGradient(0, system.minAngularSpeed, system.maxAngularSpeed);
                     system.forceRefreshGradients();
@@ -17802,7 +18486,7 @@ const AttractorComponent = (props) => {
                 } }), !attractorData.isReadOnly && (jsx(ToggleButton, { title: "Add / remove position gizmo from particle attractor", checkedIcon: ArrowMoveFilled, value: isControlled(impostor), onChange: (control) => onControl(control ? impostor : undefined) }))] }));
 };
 
-const useStyles$f = makeStyles({
+const useStyles$e = makeStyles({
     subsection: {
         marginTop: tokens.spacingVerticalM,
     },
@@ -17859,7 +18543,7 @@ const AttractorList = (props) => {
         gizmoManager.attachToMesh(attached);
         setControlledImpostor(attached);
     };
-    const classes = useStyles$f();
+    const classes = useStyles$e();
     return (jsxs(Fragment, { children: [items.length > 0 && (jsxs(Fragment, { children: [jsx(Color3PropertyLine, { label: "Attractor Debug Color", value: impostorColor, onChange: setImpostorColor }), jsx(SyncedSliderPropertyLine, { label: "Attractor Debug Size", value: impostorScale, onChange: setImpostorScale, min: 0, max: 10, step: 0.1 }), jsx(Subtitle2, { className: classes.subsection, children: "Attractors list" })] })), jsx(List, { addButtonLabel: `Add New Attractor`, items: items, onDelete: attractorSource.removeAttractor
                     ? (item, _index) => {
                         // Only CPU attractors (Attractor instances) can be removed
@@ -17969,7 +18653,7 @@ const ParticleSystemAttractorProperties = (props) => {
     return (jsx(Fragment, { children: scene ? (jsx(AttractorList, { attractorSource: attractorSource, scene: scene })) : (jsx(MessageBar, { intent: "info", title: "No Scene Available", message: "Cannot display attractors without a scene" })) }));
 };
 
-const useStyles$e = makeStyles({
+const useStyles$d = makeStyles({
     subsection: {
         marginTop: tokens.spacingVerticalM,
     },
@@ -18023,7 +18707,7 @@ const InputBlockPropertyLine = (props) => {
  */
 const ParticleSystemNodeEditorProperties = (props) => {
     const { particleSystem: system } = props;
-    const classes = useStyles$e();
+    const classes = useStyles$d();
     const source = system.source;
     const inputBlocks = useObservableState(useCallback(() => {
         if (!source) {
@@ -18884,14 +19568,14 @@ const SkeletonPropertiesServiceDefinition = {
     },
 };
 
-const useStyles$d = makeStyles({
+const useStyles$c = makeStyles({
     uniformWidth: {
         ...UniformWidthStyling,
     },
 });
 const SpinButtonPropertyLine = (props) => {
     SpinButtonPropertyLine.displayName = "SpinButtonPropertyLine";
-    const classes = useStyles$d();
+    const classes = useStyles$c();
     return (jsx(PropertyLine, { ...props, children: jsx(SpinButton, { ...props, className: mergeClasses(classes.uniformWidth, props.className) }) }));
 };
 
@@ -19139,7 +19823,7 @@ function _TextureFormatHasNoAlpha(format) {
     }
 }
 
-const useStyles$c = makeStyles({
+const useStyles$b = makeStyles({
     root: {
         display: "flex",
         flexDirection: "column",
@@ -19191,7 +19875,7 @@ const TextureChannelStates = {
  */
 const TexturePreview = (props) => {
     const { texture, disableToolbar = false, maxWidth = "100%", maxHeight = "384px", offsetX = 0, offsetY = 0, width, height, imperativeRef } = props;
-    const classes = useStyles$c();
+    const classes = useStyles$b();
     const canvasRef = useRef(null);
     const [channels, setChannels] = useState(TextureChannelStates.ALL);
     const [face, setFace] = useState(0);
@@ -20101,7 +20785,7 @@ class TextureCanvasManager {
     }
 }
 
-const useStyles$b = makeStyles({
+const useStyles$a = makeStyles({
     channelsBar: {
         display: "flex",
         flexDirection: "column",
@@ -20146,7 +20830,7 @@ const useStyles$b = makeStyles({
  */
 const ChannelsBar = (props) => {
     const { channels, setChannels } = props;
-    const classes = useStyles$b();
+    const classes = useStyles$a();
     const toggleVisibility = useCallback((index) => {
         const newChannels = [...channels];
         newChannels[index] = { ...newChannels[index], visible: !newChannels[index].visible };
@@ -20176,7 +20860,7 @@ const ChannelsBar = (props) => {
         }) }));
 };
 
-const useStyles$a = makeStyles({
+const useStyles$9 = makeStyles({
     propertiesBar: {
         display: "flex",
         backgroundColor: tokens.colorNeutralBackground1,
@@ -20226,7 +20910,7 @@ const useStyles$a = makeStyles({
     },
 });
 const PixelDataDisplay = ({ label, value }) => {
-    const classes = useStyles$a();
+    const classes = useStyles$9();
     return (jsxs("span", { className: classes.pixelData, children: [jsxs(Label, { className: classes.pixelDataLabel, children: [label, ":"] }), jsx(Label, { className: classes.pixelDataValue, children: value !== undefined ? value : "-" })] }));
 };
 const CubeFaces = ["+X", "-X", "+Y", "-Y", "+Z", "-Z"];
@@ -20237,7 +20921,7 @@ const CubeFaces = ["+X", "-X", "+Y", "-Y", "+Z", "-Z"];
  */
 const PropertiesBar = (props) => {
     const { texture, size, saveTexture, pixelData, face, setFace, resetTexture, resizeTexture, uploadTexture, mipLevel, setMipLevel } = props;
-    const classes = useStyles$a();
+    const classes = useStyles$9();
     const uploadInputRef = useRef(null);
     const [width, setWidth] = useState(size.width);
     const [height, setHeight] = useState(size.height);
@@ -20272,7 +20956,7 @@ const PropertiesBar = (props) => {
     return (jsxs("div", { className: classes.propertiesBar, children: [jsxs("div", { className: classes.section, children: [jsx(Label, { children: "W:" }), jsx(Input, { className: classes.dimensionInput, size: "small", type: "text", value: width.toString(), readOnly: texture.isCube, onChange: (_, data) => setWidth(getNewDimension(width, data.value)) }), jsx(Label, { children: "H:" }), jsx(Input, { className: classes.dimensionInput, size: "small", type: "text", value: height.toString(), readOnly: texture.isCube, onChange: (_, data) => setHeight(getNewDimension(height, data.value)) }), !texture.isCube && (jsx(Tooltip$1, { content: "Resize", relationship: "label", children: jsx(ToolbarButton, { icon: jsx(ResizeRegular, {}), onClick: handleResize }) }))] }), jsx(ToolbarDivider, {}), jsxs("div", { className: classes.section, children: [jsx(PixelDataDisplay, { label: "X", value: pixelData.x }), jsx(PixelDataDisplay, { label: "Y", value: pixelData.y })] }), jsx(ToolbarDivider, {}), jsxs("div", { className: classes.section, children: [jsx(PixelDataDisplay, { label: "R", value: pixelData.r }), jsx(PixelDataDisplay, { label: "G", value: pixelData.g }), jsx(PixelDataDisplay, { label: "B", value: pixelData.b }), jsx(PixelDataDisplay, { label: "A", value: pixelData.a })] }), texture.isCube && (jsxs(Fragment, { children: [jsx(ToolbarDivider, {}), jsx(Toolbar$1, { size: "small", children: CubeFaces.map((label, index) => (jsx(ToolbarButton, { className: classes.faceButton, appearance: face === index ? "primary" : "subtle", onClick: () => setFace(index), children: label }, label))) })] })), mipsEnabled && (jsxs(Fragment, { children: [jsx(ToolbarDivider, {}), jsxs("div", { className: classes.section, children: [jsx(Label, { children: "MIP:" }), jsx(Tooltip$1, { content: "Mip Preview Up", relationship: "label", children: jsx(ToolbarButton, { icon: jsx(ChevronUpRegular, {}), disabled: mipLevel <= 0, onClick: () => setMipLevel(mipLevel - 1) }) }), jsx(Label, { children: mipLevel }), jsx(Tooltip$1, { content: "Mip Preview Down", relationship: "label", children: jsx(ToolbarButton, { icon: jsx(ChevronDownRegular, {}), disabled: mipLevel >= maxLevels, onClick: () => setMipLevel(mipLevel + 1) }) })] })] })), jsx("div", { className: classes.spacer }), jsxs(Toolbar$1, { size: "small", children: [jsx(Tooltip$1, { content: "Reset", relationship: "label", children: jsx(ToolbarButton, { icon: jsx(ArrowResetRegular, {}), onClick: resetTexture }) }), jsx(Tooltip$1, { content: "Upload", relationship: "label", children: jsx(ToolbarButton, { icon: jsx(ArrowUploadRegular, {}), onClick: handleUploadClick }) }), jsx("input", { ref: uploadInputRef, className: classes.uploadInput, type: "file", accept: ".jpg, .png, .tga, .dds, .env, .exr", onChange: handleFileChange }), jsx(Tooltip$1, { content: "Save", relationship: "label", children: jsx(ToolbarButton, { icon: jsx(SaveRegular, {}), onClick: saveTexture }) })] })] }));
 };
 
-const useStyles$9 = makeStyles({
+const useStyles$8 = makeStyles({
     statusBar: {
         display: "flex",
         backgroundColor: tokens.colorNeutralBackground1,
@@ -20300,14 +20984,14 @@ const useStyles$9 = makeStyles({
  */
 const StatusBar = (props) => {
     const { texture, mipLevel } = props;
-    const classes = useStyles$9();
+    const classes = useStyles$8();
     const factor = Math.pow(2, mipLevel);
     const width = Math.ceil(texture.getSize().width / factor);
     const height = Math.ceil(texture.getSize().height / factor);
     return (jsxs("div", { className: classes.statusBar, children: [jsx("span", { className: classes.fileName, children: texture.name }), !texture.noMipmap && (jsxs("span", { className: classes.mipInfo, children: ["MIP Preview: ", mipLevel, " (", width, "\u00D7", height, ")"] }))] }));
 };
 
-const useStyles$8 = makeStyles({
+const useStyles$7 = makeStyles({
     toolbar: {
         display: "flex",
         flexDirection: "column",
@@ -20344,7 +21028,7 @@ const useStyles$8 = makeStyles({
  */
 const ToolBar = (props) => {
     const { tools, changeTool, activeToolIndex, metadata, setMetadata, hasAlpha } = props;
-    const classes = useStyles$8();
+    const classes = useStyles$7();
     const computeRGBAColor = useCallback(() => {
         const opacityInt = Math.floor(metadata.alpha * 255);
         const opacityHex = opacityInt.toString(16).padStart(2, "0");
@@ -20373,7 +21057,7 @@ const ToolBar = (props) => {
                 }) })] }));
 };
 
-const useStyles$7 = makeStyles({
+const useStyles$6 = makeStyles({
     textureEditor: {
         display: "flex",
         flexDirection: "column",
@@ -20437,7 +21121,7 @@ const PREVIEW_UPDATE_DELAY_MS = 160;
  */
 const TextureEditor = (props) => {
     const { texture, toolProviders = [], window: editorWindow, onUpdate } = props;
-    const classes = useStyles$7();
+    const classes = useStyles$6();
     // Canvas refs
     const uiCanvasRef = useRef(null);
     const canvas2DRef = useRef(null);
@@ -20585,7 +21269,7 @@ const TextureEditor = (props) => {
     return (jsxs("div", { className: classes.textureEditor, children: [jsx(PropertiesBar, { texture: texture, saveTexture: saveTexture, pixelData: pixelData, face: face, setFace: setFace, resetTexture: resetTexture, resizeTexture: resizeTexture, uploadTexture: uploadTexture, mipLevel: mipLevel, setMipLevel: setMipLevel, size: canvasManagerRef.current?.size || size }), jsxs("div", { className: classes.mainContent, children: [jsxs("div", { className: classes.canvasContainer, style: { cursor }, children: [jsx("canvas", { ref: uiCanvasRef, className: classes.canvasUI, tabIndex: 1 }), jsx("canvas", { ref: canvas2DRef, className: classes.canvas2D }), jsx("canvas", { ref: canvas3DRef, className: classes.canvas3D })] }), CurrentToolSettings && (jsx("div", { className: classes.toolSettingsContainer, children: jsx(CurrentToolSettings, {}) })), !texture.isCube && (jsx("div", { className: classes.sidebarLeft, children: jsx(ToolBar, { tools: toolProviders, activeToolIndex: activeToolIndex, changeTool: changeTool, metadata: metadata, setMetadata: setMetadata, hasAlpha: hasAlpha }) })), jsx("div", { className: classes.sidebarRight, children: jsx(ChannelsBar, { channels: channels, setChannels: setChannels }) })] }), jsx(StatusBar, { texture: texture, mipLevel: mipLevel })] }));
 };
 
-const useStyles$6 = makeStyles({
+const useStyles$5 = makeStyles({
     settingsContainer: {
         display: "flex",
         flexDirection: "column",
@@ -20605,7 +21289,7 @@ const Contrast = {
     name: "Contrast/Exposure",
     order: 500,
     icon: () => {
-        const classes = useStyles$6();
+        const classes = useStyles$5();
         return jsx(CircleHalfFillRegular, { className: classes.icon });
     },
     is3D: true,
@@ -20670,7 +21354,7 @@ const Contrast = {
                 setContrast(0);
             },
             settingsComponent: () => {
-                const classes = useStyles$6();
+                const classes = useStyles$5();
                 const [contrast, exposure] = useObservableState(useCallback(() => [_contrast, _exposure], []), stateChangedObservable);
                 const handleContrastChange = (_, data) => {
                     setContrast(data.value);
@@ -20771,7 +21455,7 @@ const Floodfill = {
     },
 };
 
-const useStyles$5 = makeStyles({
+const useStyles$4 = makeStyles({
     settingsContainer: {
         display: "flex",
         flexDirection: "column",
@@ -20895,7 +21579,7 @@ const Paintbrush = {
                 pointerObserver?.remove();
             },
             settingsComponent: () => {
-                const classes = useStyles$5();
+                const classes = useStyles$4();
                 const width = useObservableState(useCallback(() => _width, []), stateChangedObservable);
                 const handleWidthChange = (_, data) => {
                     setWidth(data.value);
@@ -21511,57 +22195,294 @@ const AtmosphereExplorerServiceDefinition = {
     },
 };
 
-const DisposableCommandServiceDefinition = {
-    friendlyName: "Disposable Command Service",
-    consumes: [SceneExplorerServiceIdentity, SceneContextIdentity],
-    factory: (sceneExplorerService, sceneContext) => {
-        const scene = sceneContext.currentScene;
-        if (!scene) {
-            return undefined;
-        }
-        const disposeCommandRegistration = sceneExplorerService.addEntityCommand({
-            predicate: (entity) => typeof entity.dispose === "function",
-            order: 10000 /* DefaultCommandsOrder.Dispose */,
-            getCommand: (disposable) => {
-                return {
-                    type: "action",
-                    mode: "contextMenu",
-                    displayName: "Dispose",
-                    icon: () => jsx(DeleteRegular, {}),
-                    hotKey: {
-                        keyCode: "Delete",
-                    },
-                    execute: () => disposable.dispose(),
-                };
-            },
-        });
-        return {
-            dispose() {
-                disposeCommandRegistration.dispose();
-            },
+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 EffectLayerExplorerServiceDefinition = {
-    friendlyName: "Effect Layer Explorer",
-    consumes: [SceneExplorerServiceIdentity, SceneContextIdentity, WatcherServiceIdentity],
-    factory: (sceneExplorerService, sceneContext, watcherService) => {
-        const scene = sceneContext.currentScene;
-        if (!scene) {
-            return undefined;
-        }
-        const sectionRegistration = sceneExplorerService.addSection({
-            displayName: "Effect Layers",
-            order: 700 /* DefaultSectionsOrder.EffectLayers */,
-            getRootEntities: () => scene.effectLayers,
-            getEntityDisplayInfo: (effectLayer) => {
-                const onChangeObservable = new Observable();
-                const nameHookToken = watcherService.watchProperty(effectLayer, "name", () => onChangeObservable.notifyObservers());
-                return {
-                    get name() {
-                        return effectLayer.name || `Unnamed ${effectLayer.getClassName()}`;
-                    },
+        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],
+    factory: (sceneExplorerService, sceneContext) => {
+        const scene = sceneContext.currentScene;
+        if (!scene) {
+            return undefined;
+        }
+        const disposeCommandRegistration = sceneExplorerService.addEntityCommand({
+            predicate: (entity) => typeof entity.dispose === "function",
+            order: 10000 /* DefaultCommandsOrder.Dispose */,
+            getCommand: (disposable) => {
+                return {
+                    type: "action",
+                    mode: "contextMenu",
+                    displayName: "Dispose",
+                    icon: () => jsx(DeleteRegular, {}),
+                    hotKey: {
+                        keyCode: "Delete",
+                    },
+                    execute: () => disposable.dispose(),
+                };
+            },
+        });
+        return {
+            dispose() {
+                disposeCommandRegistration.dispose();
+            },
+        };
+    },
+};
+
+const EffectLayerExplorerServiceDefinition = {
+    friendlyName: "Effect Layer Explorer",
+    consumes: [SceneExplorerServiceIdentity, SceneContextIdentity, WatcherServiceIdentity],
+    factory: (sceneExplorerService, sceneContext, watcherService) => {
+        const scene = sceneContext.currentScene;
+        if (!scene) {
+            return undefined;
+        }
+        const sectionRegistration = sceneExplorerService.addSection({
+            displayName: "Effect Layers",
+            order: 700 /* DefaultSectionsOrder.EffectLayers */,
+            getRootEntities: () => scene.effectLayers,
+            getEntityDisplayInfo: (effectLayer) => {
+                const onChangeObservable = new Observable();
+                const nameHookToken = watcherService.watchProperty(effectLayer, "name", () => onChangeObservable.notifyObservers());
+                return {
+                    get name() {
+                        return effectLayer.name || `Unnamed ${effectLayer.getClassName()}`;
+                    },
                     onChange: onChangeObservable,
                     dispose: () => {
                         nameHookToken.dispose();
@@ -22889,91 +23810,1447 @@ const ExportServiceDefinition = {
     },
 };
 
-const useStyles$4 = makeStyles({
-    statusMessage: {
-        padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalS}`,
-        opacity: 0.7,
-    },
-    busyMessage: {
-        display: "flex",
-        alignItems: "center",
-        gap: tokens.spacingHorizontalXS,
-        padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalS}`,
-    },
-});
+const OverrideManagerKey = Symbol("babylonjs:overrideManager");
+const OverrideManagerInternals = new WeakMap();
+const OnOverrideManagerCreatedObservable = new Observable();
 /**
- * Save/load controls for a scene's Smart Asset map.
- * @param props - Component props.
- * @returns The Smart Asset map controls.
+ * Creates a new OverrideManager state object and attaches it to the scene.
+ *
+ * Internal: callers should use {@link GetOverrideManager} which returns the
+ * existing manager when one is already attached.
+ * @param scene - The scene this manager operates on.
+ * @returns The created override manager state.
  */
-const SmartAssetProjectTools = (props) => {
-    const { scene } = props;
-    const [statusMessage, setStatusMessage] = useState("");
-    const [busyMessage, setBusyMessage] = useState("");
-    const styles = useStyles$4();
-    const isBusy = busyMessage !== "";
-    const onSaveAssetMap = useCallback(async () => {
-        if (isBusy) {
-            return;
-        }
-        setBusyMessage("Saving assets...");
-        setStatusMessage("");
-        try {
-            const assetMap = SerializeSmartAssetManagerMap(scene);
-            const jsonBlob = new Blob([JSON.stringify(assetMap, null, 2)], { type: "application/json" });
-            Tools.Download(jsonBlob, "smart-assets.json");
-            setStatusMessage(`Saved: ${Object.keys(assetMap.assets).length} assets`);
+function CreateOverrideManager(scene) {
+    const manager = {
+        scene,
+        onChangedObservable: new Observable(),
+    };
+    const internal = {
+        overrides: [],
+        originalValues: new Map(),
+        sceneDisposeObserver: null,
+    };
+    OverrideManagerInternals.set(manager, internal);
+    if (!scene.metadata) {
+        scene.metadata = {};
+    }
+    scene.metadata[OverrideManagerKey] = manager;
+    // Auto-dispose when the scene is disposed so the manager doesn't outlive it.
+    internal.sceneDisposeObserver = scene.onDisposeObservable.add(() => DisposeOverrideManager(manager));
+    OnOverrideManagerCreatedObservable.notifyObservers(manager);
+    return manager;
+}
+/**
+ * Returns the OverrideManager attached to the given scene, creating and
+ * attaching one if none exists.
+ * @param scene - The scene to look up or attach a manager to.
+ * @returns The existing or newly created OverrideManager.
+ */
+function GetOverrideManager(scene) {
+    const existing = scene.metadata?.[OverrideManagerKey];
+    if (existing) {
+        return existing;
+    }
+    return CreateOverrideManager(scene);
+}
+/**
+ * Adds an override entry and immediately applies it.
+ * If an override with the same target coordinates already exists, it is replaced.
+ *
+ * When the caller has already mutated the target (e.g. an Inspector edit),
+ * pass `{ originalValue }` containing the property's prior value — this seeds
+ * the original-value map (so {@link RemoveOverride} can restore it) and skips
+ * the redundant apply step.
+ * @param scene - The scene whose override registry to update.
+ * @param entry - The override to add.
+ * @param options - Optional behavior modifiers; see {@link AddOverrideOptions}.
+ */
+function AddOverride(scene, entry, options) {
+    const manager = GetOverrideManager(scene);
+    const internal = GetOverrideInternals(manager);
+    RemoveMatchingOverride(internal, entry.targetType, entry.targetName, entry.targetIndex, entry.propertyPath);
+    internal.overrides.push(entry);
+    if (options && "originalValue" in options) {
+        // Caller already applied the new value. Seed the captured original from
+        // their pre-edit snapshot — otherwise ApplyOverrideEntry would capture
+        // the post-edit value and RemoveOverride would have nothing to restore.
+        const origKey = MakeOriginalValueKey(entry.targetType, entry.targetName, entry.targetIndex, entry.propertyPath);
+        if (!internal.originalValues.has(origKey)) {
+            internal.originalValues.set(origKey, CloneValue(options.originalValue));
         }
-        catch (err) {
-            setStatusMessage(`Save error: ${err}`);
+    }
+    else {
+        ApplyOverrideEntry(manager, internal, entry);
+    }
+    manager.onChangedObservable.notifyObservers();
+}
+/**
+ * Returns all overrides currently registered with the scene.
+ * @param scene - The scene whose override registry to read.
+ * @returns A read-only array of override entries.
+ */
+function GetOverrides(scene) {
+    return GetOverrideInternals(GetOverrideManager(scene)).overrides;
+}
+/**
+ * Removes all overrides, optionally restoring original values.
+ * @param scene - The scene whose override registry to clear.
+ * @param restoreOriginals - If true, restores all captured original values.
+ */
+function ClearOverrides(scene, restoreOriginals = false) {
+    const manager = GetOverrideManager(scene);
+    const internal = GetOverrideInternals(manager);
+    if (restoreOriginals) {
+        // Snapshot the entries so we can restore each original without firing
+        // an onChangedObservable notification per entry; consumers only need
+        // one signal that the registry was emptied.
+        const entries = [...internal.overrides];
+        internal.overrides.length = 0;
+        for (const entry of entries) {
+            const origKey = MakeOriginalValueKey(entry.targetType, entry.targetName, entry.targetIndex, entry.propertyPath);
+            const original = internal.originalValues.get(origKey);
+            if (original !== undefined) {
+                const target = ResolveTarget(manager.scene, entry.targetType, entry.targetName, entry.targetIndex);
+                if (target) {
+                    SetNestedProperty(target, entry.propertyPath, original);
+                }
+            }
         }
-        finally {
-            setBusyMessage("");
+        internal.originalValues.clear();
+        manager.onChangedObservable.notifyObservers();
+        return;
+    }
+    internal.overrides.length = 0;
+    internal.originalValues.clear();
+    manager.onChangedObservable.notifyObservers();
+}
+/**
+ * Updates the target coordinates on the override matching a specific (type,
+ * old-name, old-index) so it follows an entity rename. Used by capture services
+ * to keep overrides attached to a specific object after the user renames it.
+ *
+ * Only the override at the exact `(targetType, oldName, oldIndex)` slot is
+ * updated, so other same-named siblings keep their own overrides untouched.
+ *
+ * @param scene - The scene whose override registry to update.
+ * @param targetType - The target type.
+ * @param oldName - The previous name of the renamed entity.
+ * @param oldIndex - The previous index of the renamed entity among same-named siblings.
+ * @param newName - The new name of the renamed entity.
+ * @param newIndex - The new index of the renamed entity among same-named siblings.
+ */
+function RenameOverrideTarget(scene, targetType, oldName, oldIndex, newName, newIndex) {
+    const manager = GetOverrideManager(scene);
+    const internal = GetOverrideInternals(manager);
+    let changed = false;
+    for (let i = 0; i < internal.overrides.length; i++) {
+        const entry = internal.overrides[i];
+        if (entry.targetType === targetType && entry.targetName === oldName && entry.targetIndex === oldIndex) {
+            internal.overrides[i] = { ...entry, targetName: newName, targetIndex: newIndex };
+            changed = true;
+        }
+    }
+    // Update original-value keys to match the new identity
+    const oldPrefix = `${targetType}::${oldName}::${oldIndex}::`;
+    const newPrefix = `${targetType}::${newName}::${newIndex}::`;
+    for (const [origKey, value] of Array.from(internal.originalValues.entries())) {
+        if (origKey.startsWith(oldPrefix)) {
+            const propertyPath = origKey.substring(oldPrefix.length);
+            internal.originalValues.set(newPrefix + propertyPath, value);
+            internal.originalValues.delete(origKey);
+        }
+    }
+    if (changed) {
+        manager.onChangedObservable.notifyObservers();
+    }
+}
+/**
+ * Rewrites override *values* that reference an entity by name when that entity
+ * has been renamed. Mirrors {@link RenameOverrideTarget} but operates on the
+ * `value` field rather than the `targetName` field, so overrides whose value
+ * is `"ref:oldName"` (material/light/camera references) or `"texture:oldName"`
+ * (non-SmartAsset texture references) follow the rename instead of silently
+ * pointing at a non-existent entity.
+ *
+ * SmartAsset texture references (`"samTexture:<key>"`) are unaffected because
+ * the SmartAsset key is decoupled from the texture's runtime `name` field.
+ *
+ * @param scene - The scene whose override registry to update.
+ * @param valueScheme - Which encoded-reference prefix to rewrite: `"ref"` for
+ * material/light/camera references, `"texture"` for non-SAM textures.
+ * @param oldName - The previous name embedded in the reference.
+ * @param newName - The new name embedded in the reference.
+ */
+function RenameOverrideValueReferences(scene, valueScheme, oldName, newName) {
+    if (oldName === newName) {
+        return;
+    }
+    const manager = GetOverrideManager(scene);
+    const internal = GetOverrideInternals(manager);
+    const oldValue = `${valueScheme}:${oldName}`;
+    const newValue = `${valueScheme}:${newName}`;
+    let changed = false;
+    for (let i = 0; i < internal.overrides.length; i++) {
+        const entry = internal.overrides[i];
+        if (entry.value === oldValue) {
+            internal.overrides[i] = { ...entry, value: newValue };
+            changed = true;
         }
-    }, [scene, isBusy]);
-    const onLoadAssetMap = useCallback(async (files) => {
-        const file = files[0];
-        if (!file) {
-            return;
+    }
+    if (changed) {
+        manager.onChangedObservable.notifyObservers();
+    }
+}
+// ── Application ──
+/**
+ * Applies all overrides to their current targets in the scene.
+ *
+ * Call this after any scene mutation that might have invalidated previously
+ * applied state (asset reload, object recreation, project load). The override
+ * manager does not auto-subscribe to other scene subsystems — coordination is
+ * the caller's responsibility, which keeps the override system independent.
+ * @param scene - The scene whose overrides to apply.
+ */
+function ApplyAllOverrides(scene) {
+    const manager = GetOverrideManager(scene);
+    const internal = GetOverrideInternals(manager);
+    for (const entry of internal.overrides) {
+        ApplyOverrideEntry(manager, internal, entry);
+    }
+}
+// ── Serialization ──
+/**
+ * Serializes all overrides to a JSON-compatible array.
+ * The on-disk shape is identical to the in-memory `IOverrideEntry`.
+ * @param scene - The scene whose overrides to serialize.
+ * @returns An array of override entries (shallow copies).
+ */
+function SerializeOverrides(scene) {
+    const internal = GetOverrideInternals(GetOverrideManager(scene));
+    return internal.overrides.map((o) => ({ ...o }));
+}
+/**
+ * Loads overrides from a serialized array and applies them.
+ * @param scene - The scene whose override registry to populate.
+ * @param data - Array of override entries.
+ */
+function DeserializeAndApplyOverrides(scene, data) {
+    if (!Array.isArray(data)) {
+        throw new Error("OverrideManager: Expected an array of override entries.");
+    }
+    for (const entry of data) {
+        if (!entry.targetType || entry.targetName === undefined || typeof entry.targetIndex !== "number" || !entry.propertyPath || entry.value === undefined) {
+            Logger.Warn("OverrideManager: Skipping invalid override entry.");
+            continue;
         }
-        if (isBusy) {
-            return;
+        AddOverride(scene, entry);
+    }
+}
+// ── Lifecycle ──
+/**
+ * Disposes the manager, clearing all overrides and detaching it from its scene.
+ * Safe to call multiple times; subsequent calls are no-ops. Automatically invoked when the
+ * owning scene is disposed.
+ * @param manager - The override manager state.
+ */
+function DisposeOverrideManager(manager) {
+    const internal = OverrideManagerInternals.get(manager);
+    if (!internal) {
+        return;
+    }
+    OverrideManagerInternals.delete(manager);
+    if (internal.sceneDisposeObserver) {
+        manager.scene.onDisposeObservable.remove(internal.sceneDisposeObserver);
+        internal.sceneDisposeObserver = null;
+    }
+    internal.overrides.length = 0;
+    internal.originalValues.clear();
+    manager.onChangedObservable.clear();
+    if (manager.scene.metadata) {
+        delete manager.scene.metadata[OverrideManagerKey];
+    }
+}
+// ── Private ──
+function GetOverrideInternals(manager) {
+    const internal = OverrideManagerInternals.get(manager);
+    if (!internal) {
+        throw new Error("OverrideManager: Unknown manager state.");
+    }
+    return internal;
+}
+/**
+ * Applies a single override entry to its target, capturing the original value
+ * on the first application so {@link RemoveOverride} can restore it later.
+ * @param manager - The override manager owning the entry.
+ * @param internal - The manager's internal state.
+ * @param entry - The override to apply.
+ */
+function ApplyOverrideEntry(manager, internal, entry) {
+    const target = ResolveTarget(manager.scene, entry.targetType, entry.targetName, entry.targetIndex);
+    if (!target) {
+        Logger.Warn(`OverrideManager: target not found for type="${entry.targetType}" name="${entry.targetName}" index=${entry.targetIndex} prop="${entry.propertyPath}"`);
+        return; // Target not loaded yet — override will be applied on next ApplyAllOverrides
+    }
+    // Capture original value before first override
+    const origKey = MakeOriginalValueKey(entry.targetType, entry.targetName, entry.targetIndex, entry.propertyPath);
+    if (!internal.originalValues.has(origKey)) {
+        const currentValue = GetNestedProperty(target, entry.propertyPath);
+        if (currentValue !== undefined) {
+            internal.originalValues.set(origKey, CloneValue(currentValue));
         }
-        setBusyMessage("Loading assets...");
-        setStatusMessage("");
-        try {
-            await Promise.all(Array.from(GetAllSmartAssets(scene).keys()).map(async (key) => await RemoveSmartAssetAsync(scene, key)));
-            await LoadSmartAssetMapAsync(scene, file);
-            setStatusMessage(`Loaded: ${GetAllSmartAssets(scene).size} assets`);
+    }
+    const resolvedValue = ResolveOverrideValue(manager.scene, entry.value);
+    SetNestedProperty(target, entry.propertyPath, resolvedValue);
+}
+/**
+ * Locates a scene object by (targetType, targetName, targetIndex). The scene
+ * collection is filtered to objects matching `targetName`; the N-th survivor
+ * (per `targetIndex`) is returned. Falls back to the first match if the index
+ * is out of range — useful when the scene shape has changed since capture.
+ * @param scene - The scene to search.
+ * @param targetType - The override target type.
+ * @param targetName - The target object name (or "" for scene-level).
+ * @param targetIndex - The target's position among same-named siblings.
+ * @returns The matching scene object, or null if not found.
+ */
+function ResolveTarget(scene, targetType, targetName, targetIndex) {
+    // Scene-level overrides target the scene itself
+    if (targetType === "scene") {
+        return scene;
+    }
+    const collection = GetCollection$1(scene, targetType);
+    if (!collection) {
+        return null;
+    }
+    const matches = collection.filter((obj) => obj.name === targetName);
+    if (matches.length === 0) {
+        return null;
+    }
+    return (matches[targetIndex] ?? matches[0]);
+}
+/**
+ * Returns the scene collection corresponding to an override target type.
+ * @param scene - The scene to inspect.
+ * @param targetType - The target type.
+ * @returns The collection, or null if the type has no collection.
+ */
+function GetCollection$1(scene, targetType) {
+    switch (targetType) {
+        case "meshes":
+            return scene.meshes;
+        case "materials":
+            return scene.materials;
+        case "textures":
+            return scene.textures;
+        case "lights":
+            return scene.lights;
+        case "cameras":
+            return scene.cameras;
+        case "animationGroups":
+            return scene.animationGroups;
+        default:
+            return null;
+    }
+}
+/**
+ * Resolves an override value, expanding string references like "ref:name",
+ * "samTexture:key", or "texture:name" into the actual scene object they refer to.
+ * @param scene - The scene used to look up references.
+ * @param value - The serialized override value.
+ * @returns The runtime value to assign to the target property.
+ */
+function ResolveOverrideValue(scene, value) {
+    if (typeof value === "string") {
+        if (value.startsWith("ref:")) {
+            return ResolveObjectReference(scene, value.substring(4));
         }
-        catch (err) {
-            setStatusMessage(`Load error: ${err}`);
+        if (value.startsWith("samTexture:")) {
+            return ResolveSamTextureReference(scene, value.substring(11));
         }
-        finally {
-            setBusyMessage("");
+        if (value.startsWith("texture:")) {
+            return ResolveTextureReference(scene, value.substring(8));
         }
-    }, [scene, isBusy]);
-    return (jsxs(Fragment, { children: [jsx(ButtonLine, { label: "Save Smart Assets", icon: ArrowDownloadRegular, onClick: onSaveAssetMap, disabled: isBusy }), jsx(FileUploadLine, { label: "Load Smart Assets", accept: ".json", onClick: onLoadAssetMap, disabled: isBusy }), jsx(Collapse, { visible: isBusy, children: jsxs("div", { className: styles.busyMessage, children: [jsx(Spinner, { size: "extra-small" }), jsx(Caption1, { children: busyMessage })] }) }), jsx(Collapse, { visible: statusMessage !== "", children: jsx(Caption1, { className: styles.statusMessage, children: statusMessage }) })] }));
-};
-
-const SmartAssetsPaneKey$1 = "Smart Assets";
-const SceneFileAccept = [".glb", ".gltf", ".babylon", ".obj"];
-const TextureFileAccept = Array.from(GetSmartAssetTextureExtensions());
-const AllAcceptString = [...SceneFileAccept, ...TextureFileAccept].join(",");
-// eslint-disable-next-line @typescript-eslint/naming-convention
-function _isTextureExtension(ext) {
-    return GetSmartAssetTextureExtensions().has(ext);
+    }
+    // Number arrays are passed through as-is. SetNestedProperty will use
+    // the live target's `fromArray` method (Vector3, Color3, etc.) to push
+    // values in-place, preserving the math instance identity.
+    return value;
 }
 /**
- * Inspector pane service that hosts the Smart Assets pane.
+ * Resolves a "ref:name" value by looking up a material, light, or camera
+ * in the scene by name.
+ * @param scene - The scene to search.
+ * @param name - The object name to resolve.
+ * @returns The matching material, light, or camera, or undefined if not found.
  */
-const SmartAssetsServiceDefinition = {
-    friendlyName: "Smart Assets",
-    consumes: [ShellServiceIdentity, SceneContextIdentity, SelectionServiceIdentity],
-    factory: (shellService, sceneContext, selectionService) => {
-        const paneRegistration = shellService.addSidePane({
-            key: SmartAssetsPaneKey$1,
-            title: SmartAssetsPaneKey$1,
+function ResolveObjectReference(scene, name) {
+    const mat = scene.materials.find((m) => m.name === name);
+    if (mat) {
+        return mat;
+    }
+    const light = scene.lights.find((l) => l.name === name);
+    if (light) {
+        return light;
+    }
+    const camera = scene.cameras.find((c) => c.name === name);
+    if (camera) {
+        return camera;
+    }
+    Logger.Warn(`OverrideManager: Object reference "${name}" not found in scene.`);
+    return undefined;
+}
+/**
+ * Resolves a "texture:name" value by looking up a texture in the scene by name.
+ * @param scene - The scene to search.
+ * @param name - The texture name to resolve.
+ * @returns The matching texture, or undefined if not found.
+ */
+function ResolveTextureReference(scene, name) {
+    const tex = scene.textures.find((t) => t.name === name);
+    if (tex) {
+        return tex;
+    }
+    Logger.Warn(`OverrideManager: Texture reference "${name}" not found.`);
+    return undefined;
+}
+/**
+ * Resolves a "samTexture:key" value by looking up a SmartAsset-tracked texture
+ * by its registry key. The SAM key is stable across save/load whereas the
+ * texture's `name` (for SAM textures, the blob URL) changes on every reload,
+ * so this is the only reliable way to round-trip texture references on
+ * user-uploaded SmartAsset textures.
+ * @param scene - The scene to search.
+ * @param key - The SmartAsset key to resolve.
+ * @returns The matching texture, or undefined if not found.
+ */
+function ResolveSamTextureReference(scene, key) {
+    const tex = scene.textures.find((t) => FindSmartAssetKeyForObject(scene, t) === key);
+    if (tex) {
+        return tex;
+    }
+    Logger.Warn(`OverrideManager: SmartAsset texture "${key}" not found.`);
+    return undefined;
+}
+/**
+ * Finds the index of an override matching the given coordinates.
+ * @param internal - The manager's internal state.
+ * @param targetType - The target type.
+ * @param targetName - The target object name.
+ * @param targetIndex - The target index among same-named siblings.
+ * @param propertyPath - The property path.
+ * @returns The matching index, or -1 if none found.
+ */
+function FindOverrideIndex(internal, targetType, targetName, targetIndex, propertyPath) {
+    return internal.overrides.findIndex((o) => o.targetType === targetType && o.targetName === targetName && o.targetIndex === targetIndex && o.propertyPath === propertyPath);
+}
+/**
+ * Removes any existing override that matches the given coordinates. Used by
+ * {@link AddOverride} to enforce one entry per (type, name, index, property).
+ * @param internal - The manager's internal state.
+ * @param targetType - The target type.
+ * @param targetName - The target object name.
+ * @param targetIndex - The target index among same-named siblings.
+ * @param propertyPath - The property path.
+ */
+function RemoveMatchingOverride(internal, targetType, targetName, targetIndex, propertyPath) {
+    const idx = FindOverrideIndex(internal, targetType, targetName, targetIndex, propertyPath);
+    if (idx >= 0) {
+        internal.overrides.splice(idx, 1);
+    }
+}
+/**
+ * Creates a unique key for storing original values.
+ * @param targetType - The override target type.
+ * @param targetName - The target object name.
+ * @param targetIndex - The target index among same-named siblings.
+ * @param propertyPath - The property path.
+ * @returns A composite string key uniquely identifying the original value slot.
+ */
+function MakeOriginalValueKey(targetType, targetName, targetIndex, propertyPath) {
+    return `${targetType}::${targetName}::${targetIndex}::${propertyPath}`;
+}
+/**
+ * Gets a nested property from an object using a dot-separated path.
+ * @param obj - The root object to traverse.
+ * @param path - The dot-separated property path.
+ * @returns The value at the path, or undefined if any segment is missing.
+ */
+function GetNestedProperty(obj, path) {
+    const parts = path.split(".");
+    let current = obj;
+    for (const part of parts) {
+        if (current === null || current === undefined || typeof current !== "object") {
+            return undefined;
+        }
+        current = current[part];
+    }
+    return current;
+}
+/**
+ * Sets a nested property on an object using a dot-separated path.
+ *
+ * When the value is a number array and the existing property is a Babylon
+ * math type (Vector*, Quaternion, Color3/4, Matrix), uses the math type's
+ * `fromArray` method to mutate it in place — preserving the live instance
+ * identity that consumers may already hold references to. Otherwise falls
+ * back to direct property replacement.
+ * @param obj - The root object to mutate.
+ * @param path - The dot-separated property path.
+ * @param value - The new value to assign.
+ */
+function SetNestedProperty(obj, path, value) {
+    const parts = path.split(".");
+    let current = obj;
+    for (let i = 0; i < parts.length - 1; i++) {
+        if (current === null || current === undefined || typeof current !== "object") {
+            return;
+        }
+        current = current[parts[i]];
+    }
+    if (current === null || current === undefined || typeof current !== "object") {
+        return;
+    }
+    const lastPart = parts[parts.length - 1];
+    const existing = current[lastPart];
+    if (Array.isArray(value) && existing && typeof existing === "object" && typeof existing.fromArray === "function") {
+        existing.fromArray(value);
+        return;
+    }
+    current[lastPart] = value;
+}
+/**
+ * Snapshots a value for original-value tracking.
+ *
+ * Scene entities (textures, materials, meshes, etc.) are stored by reference
+ * because cloning them would register unwanted duplicates in the scene.
+ * Plain math types (Vector3, Color3, etc.) are cloned so mutations to the
+ * live object don't corrupt the saved original.
+ * @param value - The value to snapshot.
+ * @returns The snapshot value (cloned for plain math types, by reference for entities).
+ */
+function CloneValue(value) {
+    if (value === null || value === undefined) {
+        return value;
+    }
+    if (typeof value !== "object") {
+        return value;
+    }
+    if (typeof value.getScene === "function") {
+        return value;
+    }
+    if ("clone" in value && typeof value.clone === "function") {
+        return value.clone();
+    }
+    return { ...value };
+}
+
+/**
+ * Inspector service that captures property edits made through Inspector and
+ * feeds them to the OverrideManager as persistent overrides.
+ *
+ * Works on any scene object — overrides have no concept of "which asset"
+ * owns an object. When multiple objects share a name, an entity's position
+ * among same-named siblings (`targetIndex`) is captured so the override
+ * re-applies to the same object after reload.
+ *
+ * The service re-attaches to the current scene whenever it changes, so
+ * overrides are captured against the active scene even after loads/swaps.
+ */
+const OverrideCaptureServiceDefinition = {
+    friendlyName: "Override Capture",
+    consumes: [SceneContextIdentity, PropertiesServiceIdentity],
+    factory: (sceneContext, propertiesService) => {
+        // Track each entity's name + index at first contact so we can update
+        // existing overrides when the user renames the entity in Inspector.
+        // Re-created on each scene attach so identities don't leak across scenes.
+        let previousIdentity = new WeakMap();
+        let changeObserver = null;
+        function attachToScene(scene) {
+            if (changeObserver) {
+                changeObserver.remove();
+                changeObserver = null;
+            }
+            previousIdentity = new WeakMap();
+            if (!scene) {
+                return;
+            }
+            changeObserver = propertiesService.onPropertyChanged.add((changeInfo) => {
+                const { entity, propertyKey, oldValue, newValue } = changeInfo;
+                // When "name" changes, update the matching override so it follows the rename
+                // instead of creating a new (orphaned) one. Also rewrite any overrides
+                // whose *value* referenced this entity by name so cross-references
+                // (e.g. `mesh.material = ref:redMat`) survive the rename too.
+                if (propertyKey === "name" && typeof newValue === "string") {
+                    const targetType = ClassifyEntity(entity, scene);
+                    if (targetType !== null && targetType !== "scene") {
+                        const previous = previousIdentity.get(entity);
+                        if (previous && previous.name !== newValue) {
+                            // The entity already has the new name at this point, so compute its new index among same-named siblings.
+                            const newIndex = ComputeTargetIndex(scene, targetType, entity, newValue);
+                            RenameOverrideTarget(scene, targetType, previous.name, previous.index, newValue, newIndex);
+                            // Mirror the rename into override values that reference
+                            // this entity by name. SmartAsset textures use the
+                            // `samTexture:<key>` form and stay decoupled from the
+                            // texture's runtime name, so they don't need rewriting.
+                            const valueScheme = targetType === "textures" ? "texture" : "ref";
+                            RenameOverrideValueReferences(scene, valueScheme, previous.name, newValue);
+                        }
+                        previousIdentity.set(entity, { name: newValue, index: ComputeTargetIndex(scene, targetType, entity, newValue) });
+                    }
+                    return;
+                }
+                if (propertyKey === "id") {
+                    return;
+                }
+                let targetType = ClassifyEntity(entity, scene);
+                let targetName;
+                let targetIndex;
+                let propertyPath = String(propertyKey);
+                let targetEntity;
+                if (targetType !== null) {
+                    if (targetType === "scene") {
+                        targetName = "";
+                        targetIndex = 0;
+                        targetEntity = scene;
+                    }
+                    else {
+                        targetName = GetEntityName(entity);
+                        targetIndex = ComputeTargetIndex(scene, targetType, entity, targetName);
+                        targetEntity = entity;
+                    }
+                    // Seed identity on first contact so rename tracking works
+                    if (!previousIdentity.has(targetEntity) && targetName) {
+                        previousIdentity.set(targetEntity, { name: targetName, index: targetIndex });
+                    }
+                }
+                else {
+                    // Sub-object: check if this is a property of a known parent
+                    const parentInfo = FindParentEntity(entity, scene);
+                    if (!parentInfo) {
+                        return;
+                    }
+                    targetType = parentInfo.targetType;
+                    targetName = parentInfo.targetName;
+                    targetIndex = parentInfo.targetIndex;
+                    propertyPath = `${parentInfo.parentProperty}.${propertyPath}`;
+                }
+                const serializedValue = SerializeOverrideValueForCapture(newValue, scene);
+                if (serializedValue === undefined) {
+                    return;
+                }
+                // The Inspector binding has already written `newValue` to the
+                // entity, so pass `oldValue` so the manager can record the
+                // true pre-edit value (without this, RemoveOverride would have
+                // no record of the original and could not restore it).
+                AddOverride(scene, {
+                    targetType,
+                    targetName,
+                    targetIndex,
+                    propertyPath,
+                    value: serializedValue,
+                }, { originalValue: oldValue });
+            });
+        }
+        attachToScene(sceneContext.currentScene);
+        const sceneSubObserver = sceneContext.currentSceneObservable.add((scene) => attachToScene(scene));
+        return {
+            dispose: () => {
+                sceneSubObserver.remove();
+                if (changeObserver) {
+                    changeObserver.remove();
+                    changeObserver = null;
+                }
+            },
+        };
+    },
+};
+/**
+ * Classifies an entity into an OverrideTargetType by membership in the
+ * scene's standard collections (or by being the scene itself).
+ * @param entity - The entity to classify.
+ * @param scene - The scene to check collections against.
+ * @returns The target type, or null if unrecognized.
+ */
+function ClassifyEntity(entity, scene) {
+    if (entity === scene) {
+        return "scene";
+    }
+    const obj = entity;
+    if (!obj || typeof obj !== "object") {
+        return null;
+    }
+    if (scene.materials.includes(obj)) {
+        return "materials";
+    }
+    if (scene.meshes.includes(obj)) {
+        return "meshes";
+    }
+    if (scene.lights.includes(obj)) {
+        return "lights";
+    }
+    if (scene.cameras.includes(obj)) {
+        return "cameras";
+    }
+    if (scene.textures.includes(obj)) {
+        return "textures";
+    }
+    if (scene.animationGroups.includes(obj)) {
+        return "animationGroups";
+    }
+    return null;
+}
+/**
+ * Gets the name of a scene entity.
+ * @param entity - The entity to get the name from.
+ * @returns The entity name, or an empty string if unavailable.
+ */
+function GetEntityName(entity) {
+    const obj = entity;
+    return obj?.name ?? "";
+}
+/**
+ * Returns the position of `entity` among scene[targetType] objects with the
+ * same name. Used so overrides can disambiguate same-named siblings.
+ * @param scene - The scene to inspect.
+ * @param targetType - The target type / collection name.
+ * @param entity - The entity to locate.
+ * @param name - The name to filter by.
+ * @returns The index within the same-name filter, or 0 if not found.
+ */
+function ComputeTargetIndex(scene, targetType, entity, name) {
+    const collection = GetCollection(scene, targetType);
+    if (!collection) {
+        return 0;
+    }
+    const sameName = collection.filter((obj) => obj.name === name);
+    const idx = sameName.indexOf(entity);
+    return idx >= 0 ? idx : 0;
+}
+/**
+ * Returns the scene collection matching a target type.
+ * @param scene - The scene to inspect.
+ * @param targetType - The target type.
+ * @returns The collection, or null if `targetType` doesn't map to one.
+ */
+function GetCollection(scene, targetType) {
+    switch (targetType) {
+        case "meshes":
+            return scene.meshes;
+        case "materials":
+            return scene.materials;
+        case "textures":
+            return scene.textures;
+        case "lights":
+            return scene.lights;
+        case "cameras":
+            return scene.cameras;
+        case "animationGroups":
+            return scene.animationGroups;
+        default:
+            return null;
+    }
+}
+/**
+ * Serializes a property value into an OverrideValue.
+ * Returns undefined for unsupported types.
+ * @param value - The value to serialize.
+ * @param scene - Optional scene for resolving object references.
+ * @returns The serialized value, or undefined if unsupported.
+ */
+function SerializeOverrideValueForCapture(value, scene) {
+    // null is a legitimate override value (e.g. clearing a material slot) and
+    // must round-trip as null — substituting "" here would silently corrupt
+    // object-typed slots with an empty string on reload.
+    if (value === null) {
+        return null;
+    }
+    if (typeof value === "number" || typeof value === "string" || typeof value === "boolean") {
+        return value;
+    }
+    // Material reference → "ref:materialName"
+    if (value && typeof value === "object" && "getClassName" in value && typeof value.getClassName === "function") {
+        const className = value.getClassName();
+        if (className.includes("Material") || className.includes("material")) {
+            return `ref:${value.name}`;
+        }
+    }
+    // Texture reference → "samTexture:<key>" if SmartAsset-tracked, else "texture:<name>".
+    // The SAM key is stable across save/load; `texture.name` for a SAM-tracked
+    // texture is the blob URL, which dies on page reload — using it as the
+    // override identifier would break the override after every reload.
+    if (value && typeof value === "object" && "getClassName" in value && scene) {
+        const className = value.getClassName();
+        if (className.includes("Texture") || className.includes("texture")) {
+            const samKey = FindSmartAssetKeyForObject(scene, value);
+            if (samKey !== undefined) {
+                return `samTexture:${samKey}`;
+            }
+            return `texture:${value.name}`;
+        }
+    }
+    // Color3 / Color4
+    if (value && typeof value === "object" && "r" in value && "g" in value && "b" in value) {
+        const color = value;
+        if ("a" in color && color.a !== undefined) {
+            return [color.r, color.g, color.b, color.a];
+        }
+        return [color.r, color.g, color.b];
+    }
+    // Vector3 / Vector4
+    if (value && typeof value === "object" && "x" in value && "y" in value && "z" in value) {
+        const vec = value;
+        if ("w" in vec && vec.w !== undefined) {
+            return [vec.x, vec.y, vec.z, vec.w];
+        }
+        return [vec.x, vec.y, vec.z];
+    }
+    // Vector2
+    if (value && typeof value === "object" && "x" in value && "y" in value && !("z" in value)) {
+        const vec2 = value;
+        return [vec2.x, vec2.y];
+    }
+    return undefined;
+}
+/**
+ * Checks if an entity is a sub-object of a known scene entity by scanning
+ * well-known sub-object properties on the scene and its collections.
+ * Returns the parent entity info with the property path prefix.
+ * @param entity - The entity to search for.
+ * @param scene - The scene to search in.
+ * @returns The parent entity info, or null if not found.
+ */
+function FindParentEntity(entity, scene) {
+    // Check scene sub-objects (imageProcessingConfiguration, fogSettings, etc.)
+    const sceneSubProps = ["imageProcessingConfiguration", "postProcessRenderPipelineManager", "ambientColor", "gravity"];
+    for (const prop of sceneSubProps) {
+        if (scene[prop] === entity) {
+            return { targetType: "scene", targetName: "", targetIndex: 0, parentProperty: prop };
+        }
+    }
+    const collections = [
+        { type: "materials", items: scene.materials },
+        { type: "cameras", items: scene.cameras },
+        { type: "meshes", items: scene.meshes },
+        { type: "lights", items: scene.lights },
+    ];
+    for (const { type, items } of collections) {
+        for (const parent of items) {
+            for (const prop of Object.keys(parent)) {
+                if (prop.startsWith("_")) {
+                    continue;
+                }
+                try {
+                    if (parent[prop] === entity) {
+                        const targetIndex = items.filter((p) => p.name === parent.name).indexOf(parent);
+                        return { targetType: type, targetName: parent.name, targetIndex: Math.max(targetIndex, 0), parentProperty: prop };
+                    }
+                }
+                catch {
+                    // Skip properties that throw on access
+                }
+            }
+        }
+    }
+    return null;
+}
+
+// Side-effect import: registers the `.babylon` SceneLoader plugin so the
+// companion `.babylon` file produced by SerializeProject can be loaded back.
+// Without this, LoadAssetContainerAsync logs "Unable to find a plugin to
+// load .babylon files" and the companion load fails.
+/**
+ * ## `.babylonproj` project file format
+ *
+ * The `.babylonproj` zip on disk packages three layers:
+ * 1. **SmartAsset registry** — URL references to external assets (glb/gltf/textures
+ *    loaded via SAM). Local blob/data assets are bundled inside the zip and
+ *    extracted to fresh blob URLs on load.
+ * 2. **OverrideManager state** — declarative property overrides applied after load.
+ * 3. **Companion `.babylon`** — meshes, lights, cameras, transform nodes, and
+ *    materials that are *not* tracked by SAM (i.e. user-created scene content).
+ *    Plus a `companionBindings` side table mapping material texture slots back
+ *    to SAM-tracked textures so re-attachment works without embedding texture
+ *    bytes in the companion.
+ *
+ * ### What round-trips cleanly
+ * - SAM-tracked assets (re-fetched from their URLs or extracted from the zip)
+ * - User-created `Mesh` geometry, `Material`s (Standard/PBR/Multi/Node), and
+ *   `*Texture` slot bindings to SAM textures
+ * - `Light`s, `Camera`s, `TransformNode`s, scene/material image processing,
+ *   clear color, fog, environment intensity
+ * - Property overrides on any of the above
+ *
+ * ### Known gaps (not preserved on save/load)
+ * - `PostProcess` attachments to cameras (a post-process attaches to a *specific*
+ *   camera instance; we dispose+recreate cameras, leaving post-processes orphaned).
+ * - `AdvancedDynamicTexture` GUI controls — not in `.babylon` format.
+ * - Audio (`Sound` / `AudioEngine` state).
+ * - Particle systems with runtime state, baked vertex animations.
+ * - Complex shader-driven content like GaussianSplatting: the mesh round-trips
+ *   but its companion utility materials (`gaussianSplattingDepth`, `ProxyMaterial`)
+ *   get duplicated on each load cycle.
+ * - Skeleton animation playback state.
+ *
+ * If you hit a "the scene looks different after load" issue, it's almost
+ * certainly one of the gaps above rather than camera or mesh state drift.
+ */
+/**
+ * Reserved smart asset key for user-created objects (materials, lights, cameras)
+ * that are persisted as a companion `.babylon` file alongside the project JSON.
+ */
+const ProjectLocalsKey = "__project_locals__";
+// ── JSON layer (scene ↔ ISerializedProject) ──
+/**
+ * Serializes a scene's smart asset map and override registry into a project
+ * bundle. User-created objects (materials, lights, cameras not owned by any
+ * smart asset) are serialized into a companion `.babylon` file rather than
+ * embedded in the project JSON.
+ *
+ * Both managers are looked up (and created if missing) via their respective
+ * `Get…Manager(scene)` accessors, so this function can be called on any scene.
+ *
+ * @param scene - The scene to serialize.
+ * @param baseUrl - Optional base URL for making asset paths relative.
+ * @returns A project bundle containing the JSON document and optional companion file.
+ */
+function SerializeProject(scene, baseUrl) {
+    const assetMap = SerializeSmartAssetManagerMap(scene, baseUrl);
+    const overrides = SerializeOverrides(scene);
+    // Build a minimal .babylon JSON with only user-created objects, plus the
+    // texture-binding side table that records which SmartAsset textures should
+    // be re-attached to which material slots after load.
+    const companionResult = SerializeCompanionBabylon(scene);
+    let companionBabylon;
+    const assets = { ...assetMap.assets };
+    if (companionResult) {
+        companionBabylon = new Blob([JSON.stringify(companionResult.companion)], { type: "application/json" });
+        assets[ProjectLocalsKey] = { url: ProjectLocalsKey + ".babylon" };
+    }
+    else {
+        // Remove stale companion entry if no locals exist
+        delete assets[ProjectLocalsKey];
+    }
+    const hasBindings = companionResult && Object.keys(companionResult.bindings).length > 0;
+    const project = {
+        version: 2,
+        assets,
+        overrides,
+        ...(hasBindings ? { companionBindings: companionResult.bindings } : {}),
+    };
+    return { project, companionBabylon };
+}
+/**
+ * Loads a project file from a URL, File, or pre-parsed object.
+ * Registers all asset entries on the scene's SmartAssetManager, loads all
+ * assets (including the companion `.babylon` for user-created objects), then
+ * applies all overrides via the OverrideManager.
+ *
+ * For loading the `.babylonproj` zip on-disk format, use {@link LoadProjectFileAsync}
+ * instead — it extracts the zip and then calls this function with the embedded
+ * JSON document.
+ *
+ * @param scene - The scene to populate.
+ * @param source - A URL string, File object, or pre-parsed ISerializedProject.
+ * @param rootUrl - Optional root URL for resolving relative asset paths.
+ */
+async function LoadProjectAsync(scene, source, rootUrl) {
+    let resolvedRootUrl = "";
+    if (typeof source === "string" && true) {
+        const { Tools } = await import('@babylonjs/core/Misc/tools.js');
+        resolvedRootUrl = Tools.GetFolderPath(source);
+    }
+    const raw = await ReadJsonSourceAsync(source);
+    const doc = DeserializeProject(raw);
+    // Pause the engine's render loops for the duration of the swap. Disposing
+    // cameras mid-frame would throw "No camera defined" out of `scene.render`,
+    // which kills the render loop entirely (it is not re-queued after an
+    // uncaught exception). Snapshot the active loops first so we can restore
+    // exactly what was running, even if multiple callbacks were registered.
+    const engine = scene.getEngine();
+    const savedRenderLoops = [...engine.activeRenderLoops];
+    engine.stopRenderLoop();
+    try {
+        // Clear existing state so we load fresh from the project file.
+        // The companion `.babylon` (when present) is the source of truth for all
+        // user-created scene content, so dispose user-owned meshes, lights,
+        // cameras, materials, and animation groups before reloading.
+        await Promise.all(Array.from(GetAllSmartAssets(scene).keys()).map(async (existingKey) => await RemoveSmartAssetAsync(scene, existingKey)));
+        ClearOverrides(scene);
+        for (const mesh of [...scene.meshes]) {
+            mesh.dispose();
+        }
+        for (const tn of [...scene.transformNodes]) {
+            tn.dispose();
+        }
+        for (const ag of [...scene.animationGroups]) {
+            ag.dispose();
+        }
+        for (const mat of [...scene.materials]) {
+            mat.dispose();
+        }
+        for (const light of [...scene.lights]) {
+            light.dispose();
+        }
+        for (const camera of [...scene.cameras]) {
+            camera.dispose();
+        }
+        // Register all assets. Defer the companion .babylon — it must load after
+        // textures are available so binding re-attachment can find them.
+        let hasCompanion = false;
+        for (const [key, entry] of Object.entries(doc.assets)) {
+            if (key === ProjectLocalsKey) {
+                hasCompanion = true;
+                continue;
+            }
+            const resolved = resolvedRootUrl ? ResolveAssetUrl(entry.url, resolvedRootUrl) : entry.url;
+            RegisterSmartAsset(scene, key, resolved, { type: entry.type, extension: entry.extension, metadata: entry.metadata });
+        }
+        await LoadAllSmartAssetsAsync(scene);
+        // Now load the companion .babylon. Its materials were saved with texture
+        // slots stripped (the binding side table records which SmartAsset texture
+        // each slot should be re-attached to), so the loader never sees a broken
+        // texture URL. Pass the .babylon extension hint because blob URLs have
+        // no file extension.
+        if (hasCompanion) {
+            const companionEntry = doc.assets[ProjectLocalsKey];
+            const companionUrl = resolvedRootUrl ? ResolveAssetUrl(companionEntry.url, resolvedRootUrl) : companionEntry.url;
+            await LoadSmartAssetAsync(scene, ProjectLocalsKey, companionUrl, { extension: ".babylon" });
+            if (doc.companionBindings) {
+                ApplyCompanionBindings(scene, doc.companionBindings);
+            }
+        }
+        // Apply overrides
+        if (doc.overrides.length > 0) {
+            DeserializeAndApplyOverrides(scene, doc.overrides);
+        }
+        // Re-assign the active camera if the companion brought in fresh cameras.
+        // The .babylon scene loader populates scene.cameras but does not set
+        // scene.activeCamera, so render would otherwise throw "No camera defined".
+        if (!scene.activeCamera && scene.cameras.length > 0) {
+            scene.activeCamera = scene.cameras[0];
+        }
+        // Attach controls so the user can rotate/zoom/pan after load. New
+        // camera instances from the companion .babylon are not attached to
+        // the canvas by the loader — without this, the camera renders but
+        // ignores mouse/touch input.
+        const canvas = engine.getRenderingCanvas();
+        if (scene.activeCamera && canvas) {
+            scene.activeCamera.attachControl(canvas, true);
+        }
+    }
+    finally {
+        // Always restore the render loops, even if loading threw — otherwise
+        // the canvas stays frozen forever and the user has no way to recover.
+        for (const loop of savedRenderLoops) {
+            engine.runRenderLoop(loop);
+        }
+    }
+}
+/**
+ * Validates and parses a serialized project document.
+ * @param data - The raw data to validate (typically parsed JSON).
+ * @returns The validated project document.
+ * @throws If the data does not conform to the expected schema.
+ */
+function DeserializeProject(data) {
+    if (!data || typeof data !== "object") {
+        throw new Error("ProjectFile: Invalid project file — expected an object.");
+    }
+    const doc = data;
+    if (doc.version !== 2) {
+        throw new Error(`ProjectFile: Unsupported project version "${doc.version}". Expected version 2.`);
+    }
+    // Validate the asset map portion
+    DeserializeSmartAssetMap({ version: 1, assets: doc.assets });
+    // Validate overrides array
+    if (!Array.isArray(doc.overrides)) {
+        throw new Error("ProjectFile: Invalid project file — 'overrides' must be an array.");
+    }
+    // Validate optional companion bindings (shape-only check)
+    if (doc.companionBindings !== undefined) {
+        if (typeof doc.companionBindings !== "object" || doc.companionBindings === null || Array.isArray(doc.companionBindings)) {
+            throw new Error("ProjectFile: Invalid project file — 'companionBindings' must be an object.");
+        }
+    }
+    return data;
+}
+// ── Zip layer (.babylonproj on disk) ──
+/**
+ * Serializes a scene's project (smart assets + overrides) into a `.babylonproj`
+ * zip bundle.
+ *
+ * The zip contains:
+ * - `project.json` — the project document (assets + overrides)
+ * - `__project_locals__.babylon` — companion file for user-created objects (if any)
+ * - Bundled local asset files (blobs the user dragged in from disk)
+ *
+ * Remote URLs (http/https) are left as references and not bundled.
+ *
+ * @param scene - The scene to serialize.
+ * @returns A Blob containing the zip bundle.
+ */
+async function SaveProjectFileAsync(scene) {
+    const bundle = SerializeProject(scene);
+    const files = {};
+    // Collect local (blob/data URI) assets to bundle inside the zip.
+    // Rewrite their URLs in the project JSON to relative paths.
+    const projectAssets = { ...bundle.project.assets };
+    // Fetch all blob/data URIs in parallel (avoid serial awaits in a loop).
+    const blobEntries = Object.entries(projectAssets).filter(([key, entry]) => key !== ProjectLocalsKey && (entry.url.startsWith("blob:") || entry.url.startsWith("data:")));
+    const fetched = await Promise.all(blobEntries.map(async ([key, entry]) => {
+        try {
+            const response = await fetch(entry.url);
+            const arrayBuffer = await response.arrayBuffer();
+            return { key, entry, arrayBuffer };
+        }
+        catch {
+            // Can't fetch blob — leave the URL as-is (will break on reload,
+            // but at least the project structure is preserved).
+            return null;
+        }
+    }));
+    for (const result of fetched) {
+        if (!result) {
+            continue;
+        }
+        const { key, entry, arrayBuffer } = result;
+        const ext = GuessExtension(entry.url, IsTextureEntry(entry.url, entry.extension, entry.type));
+        const filename = `assets/${key}${ext}`;
+        files[filename] = new Uint8Array(arrayBuffer);
+        projectAssets[key] = { ...entry, url: filename };
+    }
+    // Add companion .babylon if it exists
+    if (bundle.companionBabylon) {
+        const companionBuffer = await bundle.companionBabylon.arrayBuffer();
+        const companionFilename = ProjectLocalsKey + ".babylon";
+        files[companionFilename] = new Uint8Array(companionBuffer);
+        projectAssets[ProjectLocalsKey] = { url: companionFilename };
+    }
+    // Write the project JSON with updated asset paths
+    const projectWithBundledPaths = {
+        ...bundle.project,
+        assets: projectAssets,
+    };
+    const { zip, strToU8 } = await import('./browser-CANgtOiM.js');
+    files["project.json"] = strToU8(JSON.stringify(projectWithBundledPaths, null, 2));
+    // Create the zip (async — runs in a Web Worker to avoid blocking the UI thread)
+    const zipped = await new Promise((resolve, reject) => {
+        zip(files, { level: 6 }, (err, data) => (err ? reject(err) : resolve(data)));
+    });
+    return new Blob([zipped], { type: "application/zip" });
+}
+/**
+ * Loads a `.babylonproj` zip bundle into a scene. Extracts all files, creates
+ * blob URLs for bundled assets, and loads the project through SAM.
+ *
+ * @param scene - The scene to load the project into.
+ * @param zipFile - The `.babylonproj` zip file to load.
+ */
+async function LoadProjectFileAsync(scene, zipFile) {
+    const arrayBuffer = await zipFile.arrayBuffer();
+    const { unzip, strFromU8 } = await import('./browser-CANgtOiM.js');
+    const extracted = await new Promise((resolve, reject) => {
+        unzip(new Uint8Array(arrayBuffer), (err, data) => (err ? reject(err) : resolve(data)));
+    });
+    // Parse project.json
+    const projectJsonBytes = extracted["project.json"];
+    if (!projectJsonBytes) {
+        throw new Error("ProjectFile: Invalid project bundle — missing project.json");
+    }
+    const projectJson = JSON.parse(strFromU8(projectJsonBytes));
+    // Create blob URLs for all bundled files and rewrite asset URLs
+    for (const [, entry] of Object.entries(projectJson.assets)) {
+        const filename = entry.url;
+        const fileBytes = extracted[filename];
+        if (fileBytes) {
+            const mimeType = GuessMimeType(filename);
+            // Use a named File so LoadAssetContainerAsync can detect the
+            // format from the filename (blob URLs alone have no extension).
+            const file = new File([fileBytes], filename, { type: mimeType });
+            const blobUrl = URL.createObjectURL(file);
+            entry.url = blobUrl;
+        }
+        // If no file found in zip, assume the URL is a remote reference — leave it as-is
+    }
+    // Load through the standard JSON path
+    await LoadProjectAsync(scene, projectJson);
+    // Note: textures and scene files may still reference the blob URLs created
+    // above, so we do NOT revoke them here. They'll be cleaned up when SAM disposes.
+}
+// ── Private ──
+/**
+ * Returns true if a scene object is a "local" — not owned by any external
+ * smart asset, or owned by the reserved `__project_locals__` key.
+ * @param scene - The scene that owns the object.
+ * @param obj - The scene object to check.
+ * @returns True if the object should be included in the companion file.
+ */
+function IsLocalObject(scene, obj) {
+    const key = FindSmartAssetKeyForObject(scene, obj);
+    return key === undefined || key === ProjectLocalsKey;
+}
+/**
+ * Builds a `.babylon`-compatible JSON containing all user-created scene
+ * content (meshes, lights, cameras, transform nodes, and materials not owned
+ * by any external smart asset), plus a side table recording which `*Texture`
+ * slots on each material should be re-attached to which SmartAsset textures
+ * after load.
+ *
+ * Mesh, light, camera, and standalone material serialization is delegated to
+ * `SceneSerializer.SerializeMesh`, which auto-handles geometries, sub-materials,
+ * and skeletons. Texture slots that map to a SmartAsset-tracked texture are
+ * stripped from the serialized material so the `.babylon` loader never sees a
+ * broken URL; the binding table is the sole source of truth for re-attachment.
+ *
+ * @param scene - The scene to extract locals from.
+ * @returns The companion document and binding table, or null if there are no local objects.
+ */
+function SerializeCompanionBabylon(scene) {
+    const meshes = scene.meshes.filter((m) => m instanceof Mesh && m.name !== "__root__" && IsLocalObject(scene, m));
+    const lights = scene.lights.filter((l) => IsLocalObject(scene, l));
+    const cameras = scene.cameras.filter((c) => IsLocalObject(scene, c));
+    const transformNodes = scene.transformNodes.filter((t) => IsLocalObject(scene, t));
+    // Standalone materials (not attached to any included mesh) need to be
+    // added explicitly — SerializeMesh only picks up materials reachable from
+    // the supplied meshes.
+    const meshMaterialIds = new Set(meshes.map((m) => m.material?.uniqueId).filter((id) => id !== undefined));
+    const standaloneMaterials = scene.materials.filter((mat) => mat.name !== "default material" && IsLocalObject(scene, mat) && !meshMaterialIds.has(mat.uniqueId));
+    if (meshes.length === 0 && lights.length === 0 && cameras.length === 0 && transformNodes.length === 0 && standaloneMaterials.length === 0) {
+        return null;
+    }
+    const companion = SceneSerializer.SerializeMesh([...meshes, ...lights, ...cameras, ...transformNodes], false, false);
+    const allMaterials = companion.materials ?? [];
+    companion.materials = allMaterials;
+    for (const mat of standaloneMaterials) {
+        const serialized = mat.serialize();
+        if (serialized && !allMaterials.some((m) => m.uniqueId === serialized.uniqueId)) {
+            allMaterials.push(serialized);
+        }
+    }
+    // Strip non-JSON-serializable metadata (e.g. metadata that references
+    // another scene object) to avoid `Converting circular structure to JSON`
+    // when the companion is stringified. Simple JSON metadata is preserved.
+    SanitizeMetadataInPlace(companion);
+    // Walk every serialized material (mesh-attached + standalone + multi-material
+    // children) and extract SmartAsset texture bindings, stripping those slots
+    // from the serialized data.
+    const bindings = {};
+    for (const serializedMat of allMaterials) {
+        const matBindings = ExtractTextureBindings(scene, serializedMat);
+        if (Object.keys(matBindings).length > 0 && typeof serializedMat.name === "string") {
+            bindings[serializedMat.name] = matBindings;
+        }
+    }
+    const multiMaterials = companion.multiMaterials ?? [];
+    for (const serializedMat of multiMaterials) {
+        const matBindings = ExtractTextureBindings(scene, serializedMat);
+        if (Object.keys(matBindings).length > 0 && typeof serializedMat.name === "string") {
+            bindings[serializedMat.name] = matBindings;
+        }
+    }
+    return { companion, bindings };
+}
+/**
+ * Walks the top-level entity arrays in a serialized companion document and
+ * strips `metadata` fields that cannot be JSON-stringified (typically because
+ * the user put a reference to another scene object in metadata). Simple
+ * JSON-serializable metadata is preserved.
+ * @param companion - The serialized companion document to mutate in-place.
+ */
+function SanitizeMetadataInPlace(companion) {
+    const arrays = ["meshes", "transformNodes", "lights", "cameras", "materials", "multiMaterials"];
+    for (const arrayKey of arrays) {
+        const arr = companion[arrayKey];
+        if (!Array.isArray(arr)) {
+            continue;
+        }
+        for (const item of arr) {
+            if (item && typeof item === "object" && "metadata" in item && item.metadata !== undefined) {
+                try {
+                    item.metadata = JSON.parse(JSON.stringify(item.metadata));
+                }
+                catch {
+                    delete item.metadata;
+                }
+            }
+        }
+    }
+}
+/**
+ * Walks a serialized material's `*Texture` slots and, for any that reference a
+ * SmartAsset-tracked texture, records a `{slot: samKey}` binding and removes
+ * the slot from the serialized data so the `.babylon` loader does not try to
+ * fetch the (now-dead) original URL.
+ * @param scene - The scene that owns the textures.
+ * @param serializedMaterial - The serialized material data to rewrite in-place.
+ * @returns A map of stripped slot names to their SmartAsset keys.
+ */
+function ExtractTextureBindings(scene, serializedMaterial) {
+    const bindings = {};
+    for (const [propName, propValue] of Object.entries(serializedMaterial)) {
+        if (!propName.endsWith("Texture") || typeof propValue !== "object" || propValue === null) {
+            continue;
+        }
+        const texData = propValue;
+        const texName = typeof texData.name === "string" ? texData.name : undefined;
+        const texUrl = typeof texData.url === "string" ? texData.url : undefined;
+        if (!texName && !texUrl) {
+            continue;
+        }
+        for (const tex of scene.textures) {
+            const key = FindSmartAssetKeyForObject(scene, tex);
+            if (key && (tex.name === texName || tex.url === texName || tex.name === texUrl || tex.url === texUrl)) {
+                bindings[propName] = key;
+                delete serializedMaterial[propName];
+                break;
+            }
+        }
+    }
+    return bindings;
+}
+/**
+ * Re-attaches SmartAsset-tracked textures to user-created material slots
+ * after the companion `.babylon` has loaded. Silently skips bindings whose
+ * material or texture is no longer present (e.g. the underlying SmartAsset
+ * was removed before reload).
+ * @param scene - The scene that owns the materials and textures.
+ * @param bindings - The binding table from the project document.
+ */
+function ApplyCompanionBindings(scene, bindings) {
+    for (const [materialName, slots] of Object.entries(bindings)) {
+        const mat = scene.materials.find((m) => m.name === materialName);
+        if (!mat) {
+            continue;
+        }
+        for (const [slotName, samKey] of Object.entries(slots)) {
+            const texture = scene.textures.find((tex) => FindSmartAssetKeyForObject(scene, tex) === samKey);
+            if (texture) {
+                mat[slotName] = texture;
+            }
+        }
+    }
+}
+/**
+ * Returns true if a serialized asset entry refers to a standalone texture,
+ * based on the registered options or the URL extension.
+ * @param url - The asset URL.
+ * @param extension - Optional explicit extension hint from the registration options.
+ * @param type - Optional explicit type from the registration options.
+ * @returns True if the entry should be treated as a texture.
+ */
+function IsTextureEntry(url, extension, type) {
+    if (type === "texture") {
+        return true;
+    }
+    const textureExts = GetSmartAssetTextureExtensions();
+    if (extension && textureExts.has(extension.toLowerCase())) {
+        return true;
+    }
+    const ext = ExtractExtension(url);
+    return ext !== "" && textureExts.has(ext);
+}
+/**
+ * Extracts the file extension (with leading dot, lowercased) from a URL,
+ * stripping query/hash and ignoring blob/data prefixes.
+ * @param url - The URL to inspect.
+ * @returns The extension including the leading dot, or "" if none found.
+ */
+function ExtractExtension(url) {
+    if (url.startsWith("blob:") || url.startsWith("data:")) {
+        return "";
+    }
+    const clean = url.split("?")[0].split("#")[0];
+    const lastDot = clean.lastIndexOf(".");
+    const lastSlash = Math.max(clean.lastIndexOf("/"), clean.lastIndexOf("\\"));
+    if (lastDot > lastSlash && lastDot >= 0) {
+        return clean.substring(lastDot).toLowerCase();
+    }
+    return "";
+}
+/**
+ * Guesses a file extension for a blob/data URL when bundling into the zip.
+ * @param url - The original URL.
+ * @param isTexture - Whether the key is known to be a texture.
+ * @returns A file extension including the dot (e.g. ".glb", ".png").
+ */
+function GuessExtension(url, isTexture) {
+    // Try to extract from data URI mime type
+    if (url.startsWith("data:")) {
+        const mimeMatch = url.match(/^data:([^;,]+)/);
+        if (mimeMatch) {
+            const ext = MimeToExtension(mimeMatch[1]);
+            if (ext) {
+                return ext;
+            }
+        }
+    }
+    return isTexture ? ".png" : ".glb";
+}
+// Tuple-array `Map`s rather than object literals so the MIME and extension
+// keys (e.g. "model/gltf-binary", ".glb") don't trigger the naming-convention
+// rule that runs on object-literal property names.
+const MimeToExtensionMap = new Map([
+    ["model/gltf-binary", ".glb"],
+    ["model/gltf+json", ".gltf"],
+    ["image/png", ".png"],
+    ["image/jpeg", ".jpg"],
+    ["image/webp", ".webp"],
+    ["application/octet-stream", ".glb"],
+    ["application/json", ".babylon"],
+]);
+const ExtensionToMimeMap = new Map([
+    [".glb", "model/gltf-binary"],
+    [".gltf", "model/gltf+json"],
+    [".babylon", "application/json"],
+    [".png", "image/png"],
+    [".jpg", "image/jpeg"],
+    [".jpeg", "image/jpeg"],
+    [".env", "application/octet-stream"],
+    [".hdr", "application/octet-stream"],
+    [".dds", "application/octet-stream"],
+    [".ktx", "application/octet-stream"],
+    [".ktx2", "application/octet-stream"],
+    [".json", "application/json"],
+]);
+/**
+ * Maps a MIME type to a file extension.
+ * @param mime - The MIME type string.
+ * @returns The file extension including the dot, or empty string if unknown.
+ */
+function MimeToExtension(mime) {
+    return MimeToExtensionMap.get(mime) ?? "";
+}
+/**
+ * Guesses a MIME type from a filename.
+ * @param filename - The filename to check.
+ * @returns The guessed MIME type string.
+ */
+function GuessMimeType(filename) {
+    const ext = filename.substring(filename.lastIndexOf(".")).toLowerCase();
+    return ExtensionToMimeMap.get(ext) ?? "application/octet-stream";
+}
+
+const ProjectAuthoringPaneKey = "Project Authoring";
+const SceneFileAccept = [".glb", ".gltf", ".babylon", ".obj"];
+const TextureFileAccept = Array.from(GetSmartAssetTextureExtensions());
+const AllAcceptString = [...SceneFileAccept, ...TextureFileAccept].join(",");
+// eslint-disable-next-line @typescript-eslint/naming-convention
+function _isTextureExtension(ext) {
+    return GetSmartAssetTextureExtensions().has(ext);
+}
+/**
+ * Inspector pane service that hosts the Project Authoring pane. Combines
+ * smart-asset management (assets list, asset map I/O) with override-driven
+ * scene authoring (material assignment, override summary).
+ */
+const BabylonProjectAuthoringServiceDefinition = {
+    friendlyName: "Project Authoring",
+    consumes: [ShellServiceIdentity, SceneContextIdentity, SelectionServiceIdentity],
+    factory: (shellService, sceneContext, selectionService) => {
+        const paneRegistration = shellService.addSidePane({
+            key: ProjectAuthoringPaneKey,
+            title: ProjectAuthoringPaneKey,
             icon: CubeRegular,
             horizontalLocation: "right",
             verticalLocation: "top",
@@ -22981,7 +25258,7 @@ const SmartAssetsServiceDefinition = {
             teachingMoment: false,
             content: () => {
                 const scene = useObservableState(() => sceneContext.currentScene, sceneContext.currentSceneObservable);
-                return scene ? jsx(SmartAssetsPane, { scene: scene, selectionService: selectionService }) : null;
+                return scene ? jsx(BabylonProjectAuthoringPane, { scene: scene, selectionService: selectionService }) : null;
             },
         });
         return {
@@ -23036,11 +25313,81 @@ const useStyles$3 = makeStyles({
     hiddenInput: {
         display: "none",
     },
+    overrideRow: {
+        display: "flex",
+        gap: tokens.spacingHorizontalXS,
+        padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalS}`,
+        fontSize: "10px",
+        fontFamily: "monospace",
+    },
+    dimSeparator: {
+        opacity: 0.5,
+    },
+    overrideValue: {
+        color: tokens.colorPaletteGreenForeground1,
+    },
+    busyMessage: {
+        display: "flex",
+        alignItems: "center",
+        gap: tokens.spacingHorizontalXS,
+        padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalS}`,
+    },
 });
-// ── Smart Assets Pane ──
-const SmartAssetsPane = (props) => {
+// ── Project Authoring Pane ──
+const BabylonProjectAuthoringPane = (props) => {
     const { scene, selectionService } = props;
-    return (jsxs(Accordion, { uniqueId: "SmartAssets", enablePinnedItems: true, enableHiddenItems: true, enableSearchItems: true, children: [jsx(AccordionSection, { title: "Assets", children: jsx(SmartAssetList, { scene: scene, selectionService: selectionService }) }), jsx(AccordionSection, { title: "Asset Map", children: jsx(SmartAssetProjectTools, { scene: scene }) })] }));
+    return (jsxs(Accordion, { uniqueId: "ProjectAuthoring", enablePinnedItems: true, enableHiddenItems: true, enableSearchItems: true, children: [jsx(AccordionSection, { title: "Project File", children: jsx(ProjectFileTools, { scene: scene }) }), jsx(AccordionSection, { title: "Assets", children: jsx(SmartAssetList, { scene: scene, selectionService: selectionService }) }), jsx(AccordionSection, { title: "Override Summary", children: jsx(OverrideSummary, { scene: scene }) })] }));
+};
+// ── Project File ──
+/**
+ * Save/load controls for the `.babylonproj` zip bundle that captures the
+ * scene's smart assets and overrides as a single project file.
+ * @param props - Component props.
+ * @returns The project file controls.
+ */
+const ProjectFileTools = (props) => {
+    const { scene } = props;
+    const styles = useStyles$3();
+    const [status, setStatus] = useState("");
+    const [busy, setBusy] = useState("");
+    const isBusy = busy !== "";
+    const onSaveProject = useCallback(async () => {
+        if (isBusy) {
+            return;
+        }
+        setBusy("Saving project...");
+        setStatus("");
+        try {
+            const blob = await SaveProjectFileAsync(scene);
+            Tools.Download(blob, "scene.babylonproj");
+            setStatus("Saved scene.babylonproj");
+        }
+        catch (err) {
+            setStatus(`Save error: ${err}`);
+        }
+        finally {
+            setBusy("");
+        }
+    }, [scene, isBusy]);
+    const onLoadProject = useCallback(async (files) => {
+        const file = files[0];
+        if (!file || isBusy) {
+            return;
+        }
+        setBusy("Loading project...");
+        setStatus("");
+        try {
+            await LoadProjectFileAsync(scene, file);
+            setStatus(`Loaded ${file.name}`);
+        }
+        catch (err) {
+            setStatus(`Load error: ${err}`);
+        }
+        finally {
+            setBusy("");
+        }
+    }, [scene, isBusy]);
+    return (jsxs(Fragment, { children: [jsx(ButtonLine, { label: "Save Project (.babylonproj)", icon: SaveRegular, onClick: onSaveProject, disabled: isBusy }), jsx(FileUploadLine, { label: "Load Project (.babylonproj)", accept: ".babylonproj", onClick: onLoadProject, disabled: isBusy }), isBusy && (jsxs("div", { className: styles.busyMessage, children: [jsx(Spinner, { size: "extra-small" }), jsx(Caption1, { children: busy })] })), status && jsx("div", { className: styles.statusMessage, children: status })] }));
 };
 // ── Smart Asset List ──
 const SmartAssetList = (props) => {
@@ -23055,8 +25402,10 @@ const SmartAssetList = (props) => {
     const compactToolContext = useMemo(() => ({ ...toolContext, size: "small" }), [toolContext]);
     // Subscribe reactively to changes — re-renders the asset list whenever
     // RegisterSmartAsset / Load / Remove / Reload fire onChangedObservable.
+    // Filter out the reserved companion key so it does not appear as a user
+    // asset alongside dragged-in textures/models.
     const sam = GetSmartAssetManager(scene);
-    const assets = useObservableState(useCallback(() => Array.from(GetAllSmartAssets(scene), ([key, url]) => ({ key, url })), [scene]), sam.onChangedObservable);
+    const assets = useObservableState(useCallback(() => Array.from(GetAllSmartAssets(scene), ([key, url]) => ({ key, url })).filter((a) => a.key !== ProjectLocalsKey), [scene]), sam.onChangedObservable);
     const onAddAsset = useCallback(() => {
         fileInputRef.current?.click();
     }, []);
@@ -23107,6 +25456,12 @@ const SmartAssetList = (props) => {
     }, [scene]);
     const onReloadAsset = useCallback(async (key) => {
         await ReloadSmartAssetAsync(scene, key);
+        // ReloadSmartAssetAsync disposes the old asset and loads fresh
+        // instances — those new objects have no knowledge of previously
+        // applied overrides, so we must re-apply them. (The swap path
+        // does the same.) Without this, overrides on a smart asset
+        // appear to silently revert whenever the user hits Reload.
+        ApplyAllOverrides(scene);
         setStatus(`Reloaded: ${key}`);
     }, [scene]);
     const onSwapAsset = useCallback((key) => {
@@ -23234,6 +25589,34 @@ const SmartAssetList = (props) => {
             }), jsx(ButtonLine, { label: "Add Asset", icon: AddRegular, onClick: onAddAsset }), jsx("input", { ref: fileInputRef, type: "file", accept: AllAcceptString, multiple: true, className: styles.hiddenInput, onChange: onFileSelected }), status && jsx(Caption1, { className: styles.statusMessage, children: status })] }));
 };
 // ── Utilities ──
+// ── Override Summary ──
+/**
+ * Pane content that lists all registered overrides for the scene. Subscribes
+ * directly to the manager's change observable so loads, deletes, and
+ * Inspector-driven edits update the view instantly.
+ * @param props - Component props.
+ * @returns The override list view.
+ */
+const OverrideSummary = (props) => {
+    const { scene } = props;
+    const styles = useStyles$3();
+    const overrideManager = GetOverrideManager(scene);
+    const overrideList = useObservableState(useCallback(() => {
+        return GetOverrides(scene).map((o) => {
+            const nameLabel = o.targetName === "" ? "(scene)" : o.targetIndex > 0 ? `${o.targetName}[${o.targetIndex}]` : o.targetName;
+            return {
+                target: `${o.targetType}.${nameLabel}`,
+                prop: o.propertyPath,
+                value: String(o.value),
+            };
+        });
+    }, [scene]), overrideManager.onChangedObservable);
+    if (overrideList.length === 0) {
+        return jsx("div", { className: styles.emptyMessage, children: "No overrides tracked. Edit properties in Inspector to create overrides." });
+    }
+    return (jsx(Fragment, { children: overrideList.map((o, i) => (jsxs("div", { className: styles.overrideRow, children: [jsx("span", { children: o.target }), jsx("span", { className: styles.dimSeparator, children: "." }), jsx("span", { children: o.prop }), jsx("span", { className: styles.dimSeparator, children: "=" }), jsx("span", { className: styles.overrideValue, children: ShortenValue(o.value) })] }, i))) }));
+};
+// ── Utilities ──
 /**
  * Finds the first scene entity produced by a smart asset key, for click-to-select.
  * Prefers non-root meshes, then materials, then textures.
@@ -23293,6 +25676,14 @@ function _getExtension(url) {
     }
     return "";
 }
+/**
+ * Truncates a value string to a maximum display length.
+ * @param value - The value string to shorten.
+ * @returns The truncated string, with an ellipsis if it was shortened.
+ */
+function ShortenValue(value) {
+    return value.length > 30 ? value.substring(0, 27) + "…" : value;
+}
 
 const AnimationGroupLoadingModes = [
     { label: "Clean", value: 0 /* SceneLoaderAnimationGroupLoadingMode.Clean */ },
@@ -23804,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";
@@ -24086,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.
@@ -24096,7 +26487,7 @@ function ShowInspector(scene, options = {}) {
         // Stats pane tab and related services.
         StatsServiceDefinition, 
         // Tools pane tab and related services.
-        ToolsServiceDefinition, ExportServiceDefinition, SmartAssetPromptServiceDefinition, SmartAssetsServiceDefinition, GLTFAnimationImportServiceDefinition, GLTFLoaderOptionsServiceDefinition, GLTFValidationServiceDefinition, CaptureToolsDefinition, 
+        ToolsServiceDefinition, ExportServiceDefinition, SmartAssetPromptServiceDefinition, BabylonProjectAuthoringServiceDefinition, OverrideCaptureServiceDefinition, GLTFAnimationImportServiceDefinition, GLTFLoaderOptionsServiceDefinition, GLTFValidationServiceDefinition, CaptureToolsDefinition, 
         // Settings pane tab and related services.
         SettingsServiceDefinition, InspectorSettingsServiceDefinition, WatcherSettingsServiceDefinition, ShellSettingsServiceDefinition, 
         // Adds a button to refresh all properties manually (when watcher is in "manual" mode).
@@ -24958,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-PYblOaAV.js.map
+//# sourceMappingURL=index--oJsOVVX.js.map