@babylonjs/inspector 8.52.0 → 8.52.1

package/lib/{index-Cmd13UXt.js → index-BvYg0Psk.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, cloneElement, useImperativeHandle, 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, mergeClasses, Body1Strong, useId, useToastController, Toast, ToastTitle, FluentProvider, Toaster, Checkbox as Checkbox$1, createLightTheme, createDarkTheme, TeachingPopover, TeachingPopoverSurface, TeachingPopoverHeader, TeachingPopoverBody, Switch as Switch$1, createDOMRenderer, RendererProvider, Menu, MenuTrigger, SplitButton, MenuPopover, MenuList, MenuItem, Toolbar as Toolbar$1, ToolbarRadioButton, MenuGroup, MenuGroupHeader, treeItemLevelToken, FlatTree, FlatTreeItem, TreeItemLayout, MenuDivider, MenuItemCheckbox, SpinButton as SpinButton$1, Input, Dropdown as Dropdown$1, Option, Popover as Popover$1, PopoverTrigger, PopoverSurface, ColorPicker, ColorArea, ColorSlider, AlphaSlider, ColorSwatch, PresenceBadge, Slider, MenuItemRadio, Dialog, DialogSurface, DialogBody, DialogTitle, DialogContent, DialogActions, List as List$1, ListItem, Badge, Label, MessageBarTitle, Subtitle2, useComboboxFilter, Combobox, Textarea as Textarea$1, ToolbarButton, ToolbarDivider, 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, ArrowExpandAllRegular, ArrowCollapseAllRegular, CubeTreeRegular, BugRegular, ArrowUploadRegular, ArrowDownloadRegular, StopRegular, RecordRegular, DataBarHorizontalRegular, WrenchRegular, WeatherSunnyRegular, WeatherMoonRegular, 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, LightbulbRegular, VideoFilled, VideoRegular, FlashlightRegular, FlashlightOffRegular, DropRegular, BlurRegular, PipelineRegular, PersonWalkingRegular, DataLineRegular, SoundWaveCircleRegular, PersonSquareRegular, LayerDiagonalPersonRegular, ImageEditRegular, ImageRegular, TargetRegular, PersonFeedbackRegular, 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, mergeClasses, Body1Strong, useId, useToastController, Toast, ToastTitle, FluentProvider, Toaster, Checkbox as Checkbox$1, createLightTheme, createDarkTheme, TeachingPopover, TeachingPopoverSurface, TeachingPopoverHeader, TeachingPopoverBody, Switch as Switch$1, createDOMRenderer, RendererProvider, Menu, MenuTrigger, SplitButton, MenuPopover, MenuList, MenuItem, Toolbar as Toolbar$1, ToolbarRadioButton, MenuGroup, MenuGroupHeader, 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, DialogSurface, DialogBody, DialogTitle, DialogContent, DialogActions, List as List$1, ListItem, Badge, Label, MessageBarTitle, Subtitle2, useComboboxFilter, Combobox, Textarea as Textarea$1, ToolbarButton, ToolbarDivider, 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, ArrowExpandAllRegular, ArrowCollapseAllRegular, CubeTreeRegular, BugRegular, ArrowUploadRegular, ArrowBidirectionalUpDownFilled, ArrowDownloadRegular, StopRegular, RecordRegular, DataBarHorizontalRegular, WrenchRegular, ArrowClockwiseRegular, WeatherSunnyRegular, WeatherMoonRegular, 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, LightbulbRegular, VideoFilled, VideoRegular, FlashlightRegular, FlashlightOffRegular, DropRegular, BlurRegular, PipelineRegular, PersonWalkingRegular, DataLineRegular, SoundWaveCircleRegular, PersonSquareRegular, LayerDiagonalPersonRegular, ImageEditRegular, ImageRegular, TargetRegular, PersonFeedbackRegular, 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';
@@ -45,6 +45,8 @@ 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';
 import { createRoot } from 'react-dom/client';
+import { SelectionOutlineLayer } from '@babylonjs/core/Layers/selectionOutlineLayer.js';
+import { GaussianSplattingMesh } from '@babylonjs/core/Meshes/GaussianSplatting/gaussianSplattingMesh.js';
 import { AnimationGroup, TargetedAnimation } from '@babylonjs/core/Animations/animationGroup.js';
 import { Animation } from '@babylonjs/core/Animations/animation.js';
 import { AnimationPropertiesOverride } from '@babylonjs/core/Animations/animationPropertiesOverride.js';
@@ -80,7 +82,6 @@ import { NodeMaterialBlockConnectionPointTypes } from '@babylonjs/core/Materials
 import { FactorGradient, Color3Gradient, ColorGradient } from '@babylonjs/core/Misc/gradients.js';
 import { ReadFile } from '@babylonjs/core/Misc/fileTools.js';
 import { CubeTexture } from '@babylonjs/core/Materials/Textures/cubeTexture.js';
-import { GaussianSplattingMesh } from '@babylonjs/core/Meshes/GaussianSplatting/gaussianSplattingMesh.js';
 import { Mesh } from '@babylonjs/core/Meshes/mesh.js';
 import { SkeletonViewer } from '@babylonjs/core/Debug/skeletonViewer.js';
 import { VertexBuffer } from '@babylonjs/core/Meshes/buffer.js';
@@ -144,7 +145,6 @@ import { ImportAnimationsAsync, SceneLoader } from '@babylonjs/core/Loading/scen
 import { FilesInput } from '@babylonjs/core/Misc/filesInput.js';
 import { GLTFLoaderAnimationStartMode, GLTFLoaderCoordinateSystemMode, GLTFLoaderDefaultOptions } from '@babylonjs/loaders/glTF/glTFFileLoader.js';
 import { GLTFValidation } from '@babylonjs/loaders/glTF/glTFValidation.js';
-import { SelectionOutlineLayer } from '@babylonjs/core/Layers/selectionOutlineLayer.js';
 import { EngineStore } from '@babylonjs/core/Engines/engineStore.js';
 import { DebugLayer } from '@babylonjs/core/Debug/debugLayer.js';
 import { Lazy } from '@babylonjs/core/Misc/lazy.js';
@@ -276,7 +276,7 @@ const Button = forwardRef((props, ref) => {
 });
 Button.displayName = "Button";
 
-const useStyles$T = makeStyles({
+const useStyles$U = makeStyles({
     root: {
         display: "flex",
         flexDirection: "column",
@@ -357,7 +357,7 @@ class ErrorBoundary extends Component {
     }
 }
 function ErrorFallback({ error, onRetry }) {
-    const styles = useStyles$T();
+    const styles = useStyles$U();
     return (jsxs("div", { className: styles.root, children: [jsx(ErrorCircleRegular, { className: styles.icon }), jsx("div", { className: styles.title, children: "Something went wrong" }), jsx("div", { className: styles.message, children: "An error occurred in this component. You can try again or continue using other parts of the tool." }), jsx(Button, { label: "Try Again", appearance: "primary", onClick: onRetry }), error && jsx("div", { className: styles.details, children: error.message })] }));
 }
 
@@ -369,82 +369,6 @@ function usePropertyChangedNotifier() {
     }, [propertyContext]);
 }
 
-const InterceptorHooksMaps$1 = new WeakMap();
-/** @internal */
-function InterceptFunction(target, propertyKey, hooks) {
-    if (!hooks.afterCall) {
-        throw new Error("At least one hook must be provided.");
-    }
-    const originalFunction = Reflect.get(target, propertyKey, target);
-    if (typeof originalFunction !== "function") {
-        throw new Error(`Property "${propertyKey.toString()}" of object "${target}" is not a function.`);
-    }
-    // Make sure the property is configurable and writable, otherwise it is immutable and cannot be intercepted.
-    const propertyDescriptor = Reflect.getOwnPropertyDescriptor(target, propertyKey);
-    if (propertyDescriptor) {
-        if (!propertyDescriptor.configurable) {
-            throw new Error(`Property "${propertyKey.toString()}" of object "${target}" is not configurable.`);
-        }
-        if (propertyDescriptor.writable === false || (propertyDescriptor.writable === undefined && !propertyDescriptor.set)) {
-            throw new Error(`Property "${propertyKey.toString()}" of object "${target}" is readonly.`);
-        }
-    }
-    // Get or create the hooks map for the target object.
-    let hooksMap = InterceptorHooksMaps$1.get(target);
-    if (!hooksMap) {
-        InterceptorHooksMaps$1.set(target, (hooksMap = new Map()));
-    }
-    // Get or create the hooks array for the property key.
-    let hooksForKey = hooksMap.get(propertyKey);
-    if (!hooksForKey) {
-        hooksMap.set(propertyKey, (hooksForKey = []));
-        if (
-        // Replace the function with a new one that calls the hooks in addition to the original function.
-        !Reflect.set(target, propertyKey, (...args) => {
-            const result = Reflect.apply(originalFunction, target, args);
-            for (const { afterCall } of hooksForKey) {
-                afterCall?.(...args);
-            }
-            return result;
-        })) {
-            throw new Error(`Failed to define new function "${propertyKey.toString()}" on object "${target}".`);
-        }
-    }
-    hooksForKey.push(hooks);
-    let isDisposed = false;
-    return {
-        dispose: () => {
-            if (!isDisposed) {
-                // Remove the hooks from the hooks array for the property key.
-                hooksForKey.splice(hooksForKey.indexOf(hooks), 1);
-                // If there are no more hooks for the property key, remove the property from the hooks map.
-                if (hooksForKey.length === 0) {
-                    hooksMap.delete(propertyKey);
-                    // If there are no more hooks for the target object, remove the hooks map from the WeakMap.
-                    if (hooksMap.size === 0) {
-                        InterceptorHooksMaps$1.delete(target);
-                    }
-                    if (propertyDescriptor) {
-                        // If we have a property descriptor, it means the property was defined directly on the target object,
-                        // in which case we replaced it and the original property descriptor needs to be restored.
-                        if (!Reflect.defineProperty(target, propertyKey, propertyDescriptor)) {
-                            throw new Error(`Failed to restore original function "${propertyKey.toString()}" on object "${target}".`);
-                        }
-                    }
-                    else {
-                        // Otherwise, the property was inherited through the prototype chain, and so we can simply delete it from
-                        // the target object to allow it to fall back to the prototype chain as it did originally.
-                        if (!Reflect.deleteProperty(target, propertyKey)) {
-                            throw new Error(`Failed to delete transient function "${propertyKey.toString()}" on object "${target}".`);
-                        }
-                    }
-                }
-                isDisposed = true;
-            }
-        },
-    };
-}
-
 /**
  * Gets the property descriptor for a property on an object, including inherited properties.
  * @param target The object containing the property.
@@ -474,7 +398,7 @@ function IsPropertyReadonly(propertyDescriptor) {
     // If the property is not writable, it is readonly.
     return propertyDescriptor.writable === false || (propertyDescriptor.writable === undefined && !propertyDescriptor.set);
 }
-const InterceptorHooksMaps = new WeakMap();
+const InterceptorHooksMaps$1 = new WeakMap();
 /** @internal */
 function InterceptProperty(target, propertyKey, hooks) {
     // Find the property descriptor and note the owning object (might be inherited through the prototype chain).
@@ -505,9 +429,9 @@ function InterceptProperty(target, propertyKey, hooks) {
         }
     }
     // Get or create the hooks map for the target object.
-    let hooksMap = InterceptorHooksMaps.get(target);
+    let hooksMap = InterceptorHooksMaps$1.get(target);
     if (!hooksMap) {
-        InterceptorHooksMaps.set(target, (hooksMap = new Map()));
+        InterceptorHooksMaps$1.set(target, (hooksMap = new Map()));
     }
     // Get or create the hooks array for the property key.
     let hooksForKey = hooksMap.get(propertyKey);
@@ -547,7 +471,7 @@ function InterceptProperty(target, propertyKey, hooks) {
                     hooksMap.delete(propertyKey);
                     // If there are no more hooks for the target object, remove the hooks map from the WeakMap.
                     if (hooksMap.size === 0) {
-                        InterceptorHooksMaps.delete(target);
+                        InterceptorHooksMaps$1.delete(target);
                     }
                     const shouldRestorePropertyDescriptor = 
                     // If the property is owned by the target object, then we may have replaced an original property descriptor that needs to be restore.
@@ -573,6 +497,95 @@ function InterceptProperty(target, propertyKey, hooks) {
     };
 }
 
+const DefaultWatcher = {
+    watchProperty(target, propertyKey, onChanged) {
+        return InterceptProperty(target, propertyKey, {
+            afterSet: (value) => onChanged(value),
+        });
+    },
+    refresh: () => { },
+};
+const WatcherContext = createContext(DefaultWatcher);
+function useWatcher() {
+    return useContext(WatcherContext);
+}
+
+const InterceptorHooksMaps = new WeakMap();
+/** @internal */
+function InterceptFunction(target, propertyKey, hooks) {
+    if (!hooks.afterCall) {
+        throw new Error("At least one hook must be provided.");
+    }
+    const originalFunction = Reflect.get(target, propertyKey, target);
+    if (typeof originalFunction !== "function") {
+        throw new Error(`Property "${propertyKey.toString()}" of object "${target}" is not a function.`);
+    }
+    // Make sure the property is configurable and writable, otherwise it is immutable and cannot be intercepted.
+    const propertyDescriptor = Reflect.getOwnPropertyDescriptor(target, propertyKey);
+    if (propertyDescriptor) {
+        if (!propertyDescriptor.configurable) {
+            throw new Error(`Property "${propertyKey.toString()}" of object "${target}" is not configurable.`);
+        }
+        if (propertyDescriptor.writable === false || (propertyDescriptor.writable === undefined && !propertyDescriptor.set)) {
+            throw new Error(`Property "${propertyKey.toString()}" of object "${target}" is readonly.`);
+        }
+    }
+    // Get or create the hooks map for the target object.
+    let hooksMap = InterceptorHooksMaps.get(target);
+    if (!hooksMap) {
+        InterceptorHooksMaps.set(target, (hooksMap = new Map()));
+    }
+    // Get or create the hooks array for the property key.
+    let hooksForKey = hooksMap.get(propertyKey);
+    if (!hooksForKey) {
+        hooksMap.set(propertyKey, (hooksForKey = []));
+        if (
+        // Replace the function with a new one that calls the hooks in addition to the original function.
+        !Reflect.set(target, propertyKey, (...args) => {
+            const result = Reflect.apply(originalFunction, target, args);
+            for (const { afterCall } of hooksForKey) {
+                afterCall?.(...args);
+            }
+            return result;
+        })) {
+            throw new Error(`Failed to define new function "${propertyKey.toString()}" on object "${target}".`);
+        }
+    }
+    hooksForKey.push(hooks);
+    let isDisposed = false;
+    return {
+        dispose: () => {
+            if (!isDisposed) {
+                // Remove the hooks from the hooks array for the property key.
+                hooksForKey.splice(hooksForKey.indexOf(hooks), 1);
+                // If there are no more hooks for the property key, remove the property from the hooks map.
+                if (hooksForKey.length === 0) {
+                    hooksMap.delete(propertyKey);
+                    // If there are no more hooks for the target object, remove the hooks map from the WeakMap.
+                    if (hooksMap.size === 0) {
+                        InterceptorHooksMaps.delete(target);
+                    }
+                    if (propertyDescriptor) {
+                        // If we have a property descriptor, it means the property was defined directly on the target object,
+                        // in which case we replaced it and the original property descriptor needs to be restored.
+                        if (!Reflect.defineProperty(target, propertyKey, propertyDescriptor)) {
+                            throw new Error(`Failed to restore original function "${propertyKey.toString()}" on object "${target}".`);
+                        }
+                    }
+                    else {
+                        // Otherwise, the property was inherited through the prototype chain, and so we can simply delete it from
+                        // the target object to allow it to fall back to the prototype chain as it did originally.
+                        if (!Reflect.deleteProperty(target, propertyKey)) {
+                            throw new Error(`Failed to delete transient function "${propertyKey.toString()}" on object "${target}".`);
+                        }
+                    }
+                }
+                isDisposed = true;
+            }
+        },
+    };
+}
+
 /**
  * Provides an observable that fires when a specified function/property is called/set.
  * @param type The type of the interceptor, either "function" or "property".
@@ -583,6 +596,7 @@ function InterceptProperty(target, propertyKey, hooks) {
 function useInterceptObservable(type, target, propertyKey) {
     // Create a cached observable. It effectively has the lifetime of the component that uses this hook.
     const observable = useMemo(() => new Observable(), []);
+    const watcher = useWatcher();
     // Whenever the type, target, or property key changes, we need to set up a new interceptor.
     useEffect(() => {
         let interceptToken = null;
@@ -595,11 +609,7 @@ function useInterceptObservable(type, target, propertyKey) {
                 });
             }
             else if (type === "property") {
-                interceptToken = InterceptProperty(target, propertyKey, {
-                    afterSet: () => {
-                        observable.notifyObservers();
-                    },
-                });
+                interceptToken = watcher.watchProperty(target, propertyKey, () => observable.notifyObservers());
             }
             else {
                 throw new Error(`Unknown interceptor type: ${type}`);
@@ -1068,14 +1078,20 @@ function useKeyState(key, options) {
     useKeyListener({
         onKeyDown: useCallback((e) => {
             if (e.key === key) {
+                if (options?.preventDefault) {
+                    e.preventDefault();
+                }
                 setIsPressed(true);
             }
-        }, [key]),
+        }, [key, options?.preventDefault]),
         onKeyUp: useCallback((e) => {
             if (e.key === key) {
+                if (options?.preventDefault) {
+                    e.preventDefault();
+                }
                 setIsPressed(false);
             }
-        }, [key]),
+        }, [key, options?.preventDefault]),
     }, options);
     useEventListener("window", "blur", useCallback(() => setIsPressed(false), []), options); // Reset state on window blur to avoid stuck keys
     return isPressed;
@@ -1338,7 +1354,7 @@ function useIsSectionEmpty(sectionId) {
     return hasItems;
 }
 
-const useStyles$S = makeStyles({
+const useStyles$T = makeStyles({
     accordion: {
         display: "flex",
         flexDirection: "column",
@@ -1425,7 +1441,7 @@ const useStyles$S = makeStyles({
  */
 const AccordionMenuBar = () => {
     AccordionMenuBar.displayName = "AccordionMenuBar";
-    const classes = useStyles$S();
+    const classes = useStyles$T();
     const accordionCtx = useContext(AccordionContext);
     if (!accordionCtx) {
         return null;
@@ -1468,7 +1484,7 @@ const AccordionSectionBlock = (props) => {
 const AccordionSectionItem = (props) => {
     AccordionSectionItem.displayName = "AccordionSectionItem";
     const { children, staticItem } = props;
-    const classes = useStyles$S();
+    const classes = useStyles$T();
     const accordionCtx = useContext(AccordionContext);
     const itemState = useAccordionSectionItemState(props);
     const [ctrlMode, setCtrlMode] = useState(false);
@@ -1508,7 +1524,7 @@ const AccordionSectionItem = (props) => {
  */
 const AccordionPinnedContainer = () => {
     AccordionPinnedContainer.displayName = "AccordionPinnedContainer";
-    const classes = useStyles$S();
+    const classes = useStyles$T();
     const accordionCtx = useContext(AccordionContext);
     return (jsx("div", { ref: accordionCtx?.pinnedContainerRef, className: classes.pinnedContainer, children: jsx(MessageBar$1, { className: classes.pinnedContainerEmpty, children: jsx(MessageBarBody, { children: "No pinned items" }) }) }));
 };
@@ -1519,7 +1535,7 @@ const AccordionPinnedContainer = () => {
  */
 const AccordionSearchBox = () => {
     AccordionSearchBox.displayName = "AccordionSearchBox";
-    const classes = useStyles$S();
+    const classes = useStyles$T();
     const accordionCtx = useContext(AccordionContext);
     if (!accordionCtx?.features.search) {
         return null;
@@ -1535,14 +1551,14 @@ const AccordionSearchBox = () => {
  */
 const AccordionSection = (props) => {
     AccordionSection.displayName = "AccordionSection";
-    const classes = useStyles$S();
+    const classes = useStyles$T();
     return jsx("div", { className: classes.panelDiv, children: props.children });
 };
 const StringAccordion = Accordion$1;
 const Accordion = forwardRef((props, ref) => {
     Accordion.displayName = "Accordion";
     const { children, highlightSections, ...rest } = props;
-    const classes = useStyles$S();
+    const classes = useStyles$T();
     const { size } = useContext(ToolContext);
     const accordionCtx = useAccordionContext(props);
     const hasPinning = accordionCtx?.features.pinning ?? false;
@@ -1639,7 +1655,7 @@ const Collapse = (props) => {
     return (jsx(Collapse$1, { visible: props.visible, orientation: props.orientation, unmountOnExit: true, children: jsx("div", { className: `${classes.collapseContent} ${props.orientation === "horizontal" ? classes.horizontal : classes.vertical}`, children: props.children }) }));
 };
 
-const useStyles$R = makeStyles({
+const useStyles$S = makeStyles({
     button: {
         display: "flex",
         alignItems: "center",
@@ -1657,7 +1673,7 @@ const ToggleButton = (props) => {
     ToggleButton.displayName = "ToggleButton";
     const { value, onChange, title, appearance = "subtle" } = props;
     const { size } = useContext(ToolContext);
-    const classes = useStyles$R();
+    const classes = useStyles$S();
     const [checked, setChecked] = useState(value);
     const toggle = useCallback(() => {
         setChecked((prevChecked) => {
@@ -1908,11 +1924,11 @@ const CompactModeSettingDescriptor = {
 };
 const UseDegreesSettingDescriptor = {
     key: "UseDegrees",
-    defaultValue: false,
+    defaultValue: true,
 };
 const UseEulerSettingDescriptor = {
     key: "UseEuler",
-    defaultValue: false,
+    defaultValue: true,
 };
 const DisableCopySettingDescriptor = {
     key: "DisableCopy",
@@ -1996,7 +2012,7 @@ const UXContextProvider = (props) => {
 function AsReadonlyArray(array) {
     return array;
 }
-const useStyles$Q = makeStyles({
+const useStyles$R = makeStyles({
     rootDiv: {
         flex: 1,
         overflow: "hidden",
@@ -2005,7 +2021,7 @@ const useStyles$Q = makeStyles({
     },
 });
 function ExtensibleAccordion(props) {
-    const classes = useStyles$Q();
+    const classes = useStyles$R();
     const { children, sections, sectionContent, context, sectionsRef, ...rest } = props;
     const defaultSections = useMemo(() => {
         const defaultSections = [];
@@ -2130,7 +2146,7 @@ function ExtensibleAccordion(props) {
                     })] }) })) }));
 }
 
-const useStyles$P = makeStyles({
+const useStyles$Q = makeStyles({
     paneRootDiv: {
         display: "flex",
         flex: 1,
@@ -2143,7 +2159,7 @@ const useStyles$P = makeStyles({
  */
 const SidePaneContainer = forwardRef((props, ref) => {
     const { className, ...rest } = props;
-    const classes = useStyles$P();
+    const classes = useStyles$Q();
     return (jsx("div", { className: mergeClasses(classes.paneRootDiv, className), ref: ref, ...rest, children: props.children }));
 });
 
@@ -2393,7 +2409,7 @@ const Theme = (props) => {
     return (jsx(FluentProvider, { theme: theme, applyStylesToPortals: applyStylesToPortals, ...rest, children: props.children }));
 };
 
-const useStyles$O = makeStyles({
+const useStyles$P = makeStyles({
     extensionTeachingPopover: {
         maxWidth: "320px",
     },
@@ -2404,7 +2420,7 @@ const useStyles$O = makeStyles({
  * @returns The teaching moment popover.
  */
 const TeachingMoment = ({ shouldDisplay, positioningRef, onOpenChange, title, description }) => {
-    const classes = useStyles$O();
+    const classes = useStyles$P();
     return (jsx(TeachingPopover, { appearance: "brand", open: shouldDisplay, positioning: { positioningRef }, onOpenChange: onOpenChange, children: jsxs(TeachingPopoverSurface, { className: classes.extensionTeachingPopover, children: [jsx(TeachingPopoverHeader, { children: title }), jsx(TeachingPopoverBody, { children: description })] }) }));
 };
 
@@ -2588,13 +2604,13 @@ function ConstructorFactory(constructor) {
     return (...args) => new constructor(...args);
 }
 
-const useStyles$N = makeStyles({
+const useStyles$O = makeStyles({
     placeholderDiv: {
         padding: `${tokens.spacingVerticalM} ${tokens.spacingHorizontalM}`,
     },
 });
 const PropertiesPane = (props) => {
-    const classes = useStyles$N();
+    const classes = useStyles$O();
     const entity = props.context;
     return entity != null ? (jsx(ExtensibleAccordion, { ...props })) : (jsx("div", { className: classes.placeholderDiv, children: jsx(Body1Strong, { italic: true, children: "No entity selected." }) }));
 };
@@ -2896,7 +2912,7 @@ const RightSidePaneHeightAdjustSettingDescriptor = {
 };
 const RootComponentServiceIdentity = Symbol("RootComponent");
 const ShellServiceIdentity = Symbol("ShellService");
-const useStyles$M = makeStyles({
+const useStyles$N = makeStyles({
     mainView: {
         flex: 1,
         display: "flex",
@@ -3099,34 +3115,38 @@ const DockMenu = (props) => {
 };
 const PaneHeader = (props) => {
     const { id, title, dockOptions } = props;
-    const classes = useStyles$M();
+    const classes = useStyles$N();
     return (jsxs("div", { className: classes.paneHeaderDiv, children: [jsx(Subtitle2Stronger, { className: classes.paneHeaderText, children: title }), jsx(DockMenu, { sidePaneId: id, dockOptions: dockOptions, children: jsx(Button$1, { className: classes.paneHeaderButton, appearance: "transparent", icon: jsx(MoreHorizontalRegular, {}) }) })] }));
 };
 // This is a wrapper for an item in a toolbar that simply adds a teaching moment, which is useful for dynamically added items, possibly from extensions.
-const ToolbarItem = ({ verticalLocation, horizontalLocation, id, component: Component, displayName: displayName, suppressTeachingMoment }) => {
-    const classes = useStyles$M();
+const ToolbarItem = (props) => {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    const { verticalLocation, horizontalLocation, id, component: Component, displayName } = props;
+    const classes = useStyles$N();
     const useTeachingMoment = useMemo(() => MakePopoverTeachingMoment(`Bar/${verticalLocation}/${horizontalLocation}/${displayName ?? id}`), [displayName, id]);
-    const teachingMoment = useTeachingMoment(suppressTeachingMoment);
-    return (jsxs(Fragment, { children: [jsx(TeachingMoment, { ...teachingMoment, shouldDisplay: teachingMoment.shouldDisplay && !suppressTeachingMoment, title: displayName ?? "Extension", description: `The "${displayName ?? id}" extension can be accessed here.` }), jsx("div", { className: classes.barItem, ref: teachingMoment.targetRef, children: jsx(Component, {}) })] }));
+    const teachingMoment = useTeachingMoment(props.teachingMoment === false);
+    const title = typeof props.teachingMoment === "object" ? props.teachingMoment.title : (displayName ?? id);
+    const description = typeof props.teachingMoment === "object" ? props.teachingMoment.description : `The "${displayName ?? id}" extension can be accessed here.`;
+    return (jsxs(Fragment, { children: [jsx(TeachingMoment, { ...teachingMoment, shouldDisplay: teachingMoment.shouldDisplay, title: title, description: description }), jsx("div", { className: classes.barItem, ref: teachingMoment.targetRef, children: jsx(Component, {}) })] }));
 };
 // TODO: Handle overflow, possibly via https://react.fluentui.dev/?path=/docs/components-overflow--docs with priority.
 // This component just renders a toolbar with left aligned toolbar items on the left and right aligned toolbar items on the right.
 const Toolbar = ({ location, components }) => {
-    const classes = useStyles$M();
+    const classes = useStyles$N();
     const leftComponents = useMemo(() => components.filter((entry) => entry.horizontalLocation === "left"), [components]);
     const rightComponents = useMemo(() => components.filter((entry) => entry.horizontalLocation === "right"), [components]);
-    return (jsx(Fragment, { children: components.length > 0 && (jsxs("div", { className: `${classes.bar} ${location === "top" ? classes.barTop : classes.barBottom}`, children: [jsx("div", { className: classes.barLeft, children: leftComponents.map((entry) => (jsx(ToolbarItem, { verticalLocation: location, horizontalLocation: entry.horizontalLocation, id: entry.key, component: entry.component, displayName: entry.displayName, suppressTeachingMoment: entry.suppressTeachingMoment }, entry.key))) }), jsx("div", { className: classes.barRight, children: rightComponents.map((entry) => (jsx(ToolbarItem, { verticalLocation: location, horizontalLocation: entry.horizontalLocation, id: entry.key, component: entry.component, displayName: entry.displayName, suppressTeachingMoment: entry.suppressTeachingMoment }, entry.key))) })] })) }));
+    return (jsx(Fragment, { children: components.length > 0 && (jsxs("div", { className: `${classes.bar} ${location === "top" ? classes.barTop : classes.barBottom}`, children: [jsx("div", { className: classes.barLeft, children: leftComponents.map((entry) => (jsx(ToolbarItem, { verticalLocation: location, horizontalLocation: entry.horizontalLocation, id: entry.key, component: entry.component, displayName: entry.displayName, teachingMoment: entry.teachingMoment }, entry.key))) }), jsx("div", { className: classes.barRight, children: rightComponents.map((entry) => (jsx(ToolbarItem, { verticalLocation: location, horizontalLocation: entry.horizontalLocation, id: entry.key, component: entry.component, displayName: entry.displayName, teachingMoment: entry.teachingMoment }, entry.key))) })] })) }));
 };
 // This is a wrapper for a tab in a side pane that simply adds a teaching moment, which is useful for dynamically added items, possibly from extensions.
 const SidePaneTab = (props) => {
     const { location, id, isSelected, isFirst, isLast, dockOptions, 
     // eslint-disable-next-line @typescript-eslint/naming-convention
-    icon: Icon, title, suppressTeachingMoment, } = props;
-    const classes = useStyles$M();
+    icon: Icon, title, } = props;
+    const classes = useStyles$N();
     const useTeachingMoment = useMemo(() => MakePopoverTeachingMoment(`Pane/${location}/${title ?? id}`), [title, id]);
-    const teachingMoment = useTeachingMoment(suppressTeachingMoment);
+    const teachingMoment = useTeachingMoment(props.teachingMoment === false);
     const tabClass = mergeClasses(classes.tab, isSelected ? classes.selectedTab : classes.unselectedTab, isFirst ? classes.firstTab : undefined, isLast ? classes.lastTab : undefined);
-    return (jsxs(Fragment, { children: [jsx(TeachingMoment, { ...teachingMoment, shouldDisplay: teachingMoment.shouldDisplay && !suppressTeachingMoment, title: title ?? "Extension", description: `The "${title ?? id}" extension can be accessed here.` }), jsx("div", { className: tabClass, children: jsx(DockMenu, { openOnContext: true, sidePaneId: id, dockOptions: dockOptions, children: jsx(Tooltip, { content: title ?? id, children: jsx(ToolbarRadioButton, { ref: teachingMoment.targetRef, appearance: "transparent", className: classes.tabRadioButton, name: "selectedTab", value: id, icon: {
+    return (jsxs(Fragment, { children: [jsx(TeachingMoment, { ...teachingMoment, shouldDisplay: teachingMoment.shouldDisplay, title: typeof props.teachingMoment === "object" ? props.teachingMoment.title : (title ?? "Extension"), description: typeof props.teachingMoment === "object" ? props.teachingMoment.description : `The "${title ?? id}" extension can be accessed here.` }), jsx("div", { className: tabClass, children: jsx(DockMenu, { openOnContext: true, sidePaneId: id, dockOptions: dockOptions, children: jsx(Tooltip, { content: title ?? id, children: jsx(ToolbarRadioButton, { ref: teachingMoment.targetRef, appearance: "transparent", className: classes.tabRadioButton, name: "selectedTab", value: id, icon: {
                                 children: jsx(Icon, {}),
                             } }) }) }) })] }));
 };
@@ -3134,7 +3154,7 @@ const SidePaneTab = (props) => {
 // In "compact" mode, the tab list is integrated into the pane itself.
 // In "full" mode, the returned tab list is later injected into the toolbar.
 function usePane(location, defaultWidth, minWidth, sidePanes, onSelectSidePane, dockOperations, toolbarMode, topBarItems, bottomBarItems, initialCollapsed) {
-    const classes = useStyles$M();
+    const classes = useStyles$N();
     const [topSelectedTab, setTopSelectedTab] = useState();
     const [bottomSelectedTab, setBottomSelectedTab] = useState();
     const [collapsed, setCollapsed] = useState(initialCollapsed);
@@ -3236,7 +3256,7 @@ function usePane(location, defaultWidth, minWidth, sidePanes, onSelectSidePane,
                                 setCollapsed(false);
                             }, children: paneComponents.map((entry, index) => {
                                 const isSelected = selectedTab?.key === entry.key;
-                                return (jsx(SidePaneTab, { location: location, id: entry.key, title: entry.title, icon: entry.icon, suppressTeachingMoment: entry.suppressTeachingMoment, isSelected: isSelected && !collapsed, isFirst: index === 0, isLast: index === paneComponents.length - 1, dockOptions: dockOptions }, entry.key));
+                                return (jsx(SidePaneTab, { location: location, id: entry.key, title: entry.title, icon: entry.icon, teachingMoment: entry.teachingMoment, isSelected: isSelected && !collapsed, isFirst: index === 0, isLast: index === paneComponents.length - 1, dockOptions: dockOptions }, entry.key));
                             }) }) })), toolbarMode === "full" && (jsx(Collapse, { visible: !isChildWindowOpen, orientation: "horizontal", children: expandCollapseButton }))] })) }));
     }, [location, collapsed, isChildWindowOpen, expandCollapseButton]);
     // This memos the TabList to make it easy for the JSX to be inserted at the top of the pane (in "compact" mode) or returned to the caller to be used in the toolbar (in "full" mode).
@@ -3331,7 +3351,7 @@ function MakeShellServiceDefinition({ leftPaneDefaultWidth = 350, leftPaneMinWid
                 expand: () => onCollapseChanged.notifyObservers({ location: "right", collapsed: false }),
             };
             const rootComponent = () => {
-                const classes = useStyles$M();
+                const classes = useStyles$N();
                 const [sidePaneDockOverrides, setSidePaneDockOverrides] = useSetting(SidePaneDockOverridesSettingDescriptor);
                 // This function returns a promise that resolves after the dock change takes effect so that
                 // we can then select the re-docked pane.
@@ -3566,7 +3586,7 @@ const SettingsServiceDefinition = {
             horizontalLocation: "right",
             verticalLocation: "top",
             order: 500,
-            suppressTeachingMoment: true,
+            teachingMoment: false,
             content: () => {
                 const sections = useOrderedObservableCollection(sectionsCollection);
                 const sectionContent = useObservableCollection(sectionContentCollection);
@@ -3672,7 +3692,7 @@ const PropertiesServiceDefinition = {
             horizontalLocation: "right",
             verticalLocation: "top",
             order: 100,
-            suppressTeachingMoment: true,
+            teachingMoment: false,
             keepMounted: true,
             content: () => {
                 const sections = useOrderedObservableCollection(sectionsCollection);
@@ -4076,7 +4096,7 @@ function CoerceEntityArray(entities, sort) {
     }
     return entities;
 }
-const useStyles$L = makeStyles({
+const useStyles$M = makeStyles({
     rootDiv: {
         flex: 1,
         overflow: "hidden",
@@ -4184,14 +4204,14 @@ function MakeInlineCommandElement(command, isPlaceholder) {
 }
 const SceneTreeItem = (props) => {
     const { isSelected, select } = props;
-    const classes = useStyles$L();
+    const classes = useStyles$M();
     const [compactMode] = useSetting(CompactModeSettingDescriptor);
     const treeItemLayoutClass = mergeClasses(classes.sceneTreeItemLayout, compactMode ? classes.treeItemLayoutCompact : undefined);
     return (jsx(FlatTreeItem, { className: classes.treeItem, value: "scene", itemType: "leaf", parentValue: undefined, "aria-level": 1, "aria-setsize": 1, "aria-posinset": 1, onClick: select, children: jsx(TreeItemLayout, { iconBefore: jsx(GlobeRegular, {}), className: treeItemLayoutClass, style: isSelected ? { backgroundColor: tokens.colorNeutralBackground1Selected } : undefined, children: jsx(Body1Strong, { wrap: false, truncate: true, children: "Scene" }) }) }, "scene"));
 };
 const SectionTreeItem = (props) => {
     const { section, isFiltering, commandProviders, expandAll, collapseAll, isDropTarget, ...dropProps } = props;
-    const classes = useStyles$L();
+    const classes = useStyles$M();
     const [compactMode] = useSetting(CompactModeSettingDescriptor);
     // Get the commands that apply to this section.
     const commands = useResource(useCallback(() => {
@@ -4208,7 +4228,7 @@ const SectionTreeItem = (props) => {
 };
 const EntityTreeItem = (props) => {
     const { entityItem, isSelected, select, isFiltering, commandProviders, expandAll, collapseAll, isDragging, isDropTarget, ...dragProps } = props;
-    const classes = useStyles$L();
+    const classes = useStyles$M();
     const [compactMode] = useSetting(CompactModeSettingDescriptor);
     const hasChildren = !!entityItem.children?.length;
     const displayInfo = useResource(useCallback(() => {
@@ -4324,7 +4344,7 @@ const EntityTreeItem = (props) => {
                         }, children: jsx(Body1, { wrap: false, truncate: true, children: name }) }) }, GetEntityId(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$L();
+    const classes = useStyles$M();
     const { sections, entityCommandProviders, sectionCommandProviders, scene, selectedEntity = null } = props;
     const [openItems, setOpenItems] = useState(new Set());
     const [sceneVersion, setSceneVersion] = useState(0);
@@ -4617,7 +4637,7 @@ const SceneExplorerServiceDefinition = {
             icon: CubeTreeRegular,
             horizontalLocation: "left",
             verticalLocation: "top",
-            suppressTeachingMoment: true,
+            teachingMoment: false,
             keepMounted: true,
             content: () => {
                 const sections = useOrderedObservableCollection(sectionsCollection);
@@ -4778,7 +4798,7 @@ const DebugServiceDefinition = {
             horizontalLocation: "right",
             verticalLocation: "top",
             order: 200,
-            suppressTeachingMoment: true,
+            teachingMoment: false,
             content: () => {
                 const sections = useOrderedObservableCollection(sectionsCollection);
                 const sectionContent = useObservableCollection(sectionContentCollection);
@@ -5947,7 +5967,7 @@ class CanvasGraphService {
     }
 }
 
-const useStyles$K = makeStyles({
+const useStyles$L = makeStyles({
     canvas: {
         flexGrow: 1,
         width: "100%",
@@ -5956,7 +5976,7 @@ const useStyles$K = makeStyles({
 });
 const CanvasGraph = (props) => {
     const { collector, scene, layoutObservable, returnToPlayheadObservable, onVisibleRangeChangedObservable, initialGraphSize } = props;
-    const classes = useStyles$K();
+    const classes = useStyles$L();
     const canvasRef = useRef(null);
     useEffect(() => {
         if (!canvasRef.current) {
@@ -6010,135 +6030,208 @@ const CanvasGraph = (props) => {
     return jsx("canvas", { className: classes.canvas, ref: canvasRef });
 };
 
-function CoerceStepValue(step, isAltKeyPressed, isShiftKeyPressed) {
-    // When the alt key is pressed, decrease step by a factor of 10.
-    if (isAltKeyPressed) {
+function CoerceStepValue(step, isFineKeyPressed, isCourseKeyPressed) {
+    // When the fine key is pressed, decrease step by a factor of 10.
+    if (isFineKeyPressed) {
         return step * 0.1;
     }
-    // When the shift key is pressed, increase step by a factor of 10.
-    if (isShiftKeyPressed) {
+    // When the course key is pressed, increase step by a factor of 10.
+    if (isCourseKeyPressed) {
         return step * 10;
     }
     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.
+function EvaluateExpression(rawValue) {
+    const val = rawValue.trim();
+    try {
+        return Number(Function(`"use strict";return (${val})`)());
+    }
+    catch {
+        return NaN;
+    }
+}
+const useStyles$K = makeStyles({
+    icon: {
+        "&:hover": {
+            color: tokens.colorBrandForeground1,
+        },
+    },
+});
+/**
+ * A numeric input with a vertical drag-to-scrub icon (ArrowsBidirectionalRegular rotated 90°).
+ * Click-and-drag up/down on the icon to increment/decrement the value.
+ */
 const SpinButton = forwardRef((props, ref) => {
-    SpinButton.displayName = "SpinButton";
-    const classes = useInputStyles$1();
+    SpinButton.displayName = "SpinButton2";
+    const inputClasses = useInputStyles$1();
+    const classes = useStyles$K();
     const { size } = useContext(ToolContext);
     const { min, max } = props;
-    const [value, setValue] = useState(props.value);
-    const lastCommittedValue = useRef(props.value);
-    // When the input does not have keyboard focus
-    const isUnfocusedAltKeyPressed = useKeyState("Alt");
-    const isUnfocusedShiftKeyPressed = useKeyState("Shift");
-    // When the input does have keyboard focus
-    const [isFocusedAltKeyPressed, setIsFocusedAltKeyPressed] = useState(false);
-    const [isFocusedShiftKeyPressed, setIsFocusedShiftKeyPressed] = useState(false);
-    // step and forceInt are not mutually exclusive since there could be cases where you want to forceInt but have spinButton jump >1 int per spin
-    const step = CoerceStepValue(props.step ?? 1, isUnfocusedAltKeyPressed || isFocusedAltKeyPressed, isUnfocusedShiftKeyPressed || isFocusedShiftKeyPressed);
+    const baseStep = props.step ?? 1;
+    // Local ref for the input element so we can blur it programmatically (e.g. when a drag starts while editing).
+    const inputRef = useRef(null);
+    const mergedRef = useMergedRefs(ref, inputRef);
+    // Modifier keys for step coercion.
+    const isAltKeyPressed = useKeyState("Alt", { preventDefault: true });
+    const isShiftKeyPressed = useKeyState("Shift");
+    const step = CoerceStepValue(baseStep, isAltKeyPressed, isShiftKeyPressed);
     const stepPrecision = Math.max(0, CalculatePrecision(step));
-    const valuePrecision = Math.max(0, CalculatePrecision(value));
-    // Display precision: controls how many decimals are shown in the formatted displayValue. Cap at 4 to avoid wild numbers
-    const displayPrecision = Math.min(4, Math.max(stepPrecision, valuePrecision));
-    // Set to large const to prevent Fluent from rounding user-entered values on commit
-    // We control display formatting ourselves via displayValue, so this only affects internal rounding. The value stored internally will still have max precision
-    const fluentPrecision = 20;
-    useEffect(() => {
-        if (props.value !== lastCommittedValue.current) {
-            lastCommittedValue.current = props.value;
-            setValue(props.value); // Update local state when props.value changes
+    const [value, setValue] = useState(props.value ?? 0);
+    const lastCommittedValue = useRef(props.value);
+    const [isDragging, setIsDragging] = useState(false);
+    const scrubStartYRef = useRef(0);
+    const scrubStartValueRef = useRef(0);
+    const lastPointerYRef = useRef(0);
+    const [isHovered, setIsHovered] = useState(false);
+    // Editing state: when the user is typing, we show their raw text rather than the formatted value.
+    const [isEditing, setIsEditing] = useState(false);
+    const [editText, setEditText] = useState("");
+    const valuePrecision = Math.max(0, CalculatePrecision(value));
+    // Display precision: controls how many decimals are shown in the formatted displayValue. Cap at 4 to avoid wild numbers.
+    // If a fixed precision prop is provided, use it instead.
+    const displayPrecision = props.precision ?? Math.min(4, Math.max(stepPrecision, valuePrecision));
+    // Format a number for display: toFixed, then trim trailing zeros and period unless a fixed precision is specified.
+    const formatValue = useCallback((v) => {
+        const fixed = v.toFixed(displayPrecision);
+        if (props.precision !== undefined) {
+            return fixed;
+        }
+        return fixed.replace(/(\.\d*?)0+$/, "$1").replace(/\.$/, "");
+    }, [displayPrecision, props.precision]);
+    useEffect(() => {
+        if (!isDragging && props.value !== lastCommittedValue.current) {
+            lastCommittedValue.current = props.value;
+            setValue(props.value ?? 0);
         }
-    }, [props.value]);
-    const validateValue = (numericValue) => {
+    }, [props.value, isDragging]);
+    const validateValue = useCallback((numericValue) => {
         const outOfBounds = (min !== undefined && numericValue < min) || (max !== undefined && numericValue > max);
         const failsValidator = props.validator && !props.validator(numericValue);
         const failsIntCheck = props.forceInt ? !Number.isInteger(numericValue) : false;
         const invalid = !!outOfBounds || !!failsValidator || isNaN(numericValue) || !!failsIntCheck;
         return !invalid;
-    };
-    const tryCommitValue = (currVal) => {
-        // Only commit if valid and different from last committed value
+    }, [min, max, props.validator, props.forceInt]);
+    // Constrain a value to the valid range by clamping to [min, max].
+    const constrainValue = useCallback((v) => Clamp(v, min ?? -Infinity, max ?? Infinity), [min, max]);
+    const tryCommitValue = useCallback((currVal) => {
         if (validateValue(currVal) && currVal !== lastCommittedValue.current) {
             lastCommittedValue.current = currVal;
             props.onChange(currVal);
         }
-    };
-    const handleChange = (event, data) => {
-        event.stopPropagation(); // Prevent event propagation
-        if (data.value != null && !Number.isNaN(data.value)) {
-            setValue(data.value);
-            tryCommitValue(data.value);
-        }
-    };
-    // Strip the unit suffix (e.g. "deg" or " deg") from the raw input value before evaluating expressions.
-    const stripUnit = (val) => {
-        if (!props.unit) {
-            return val;
-        }
-        const regex = new RegExp("\\s*" + props.unit + "$");
-        const match = val.match(regex);
-        if (match) {
-            return val.slice(0, -match[0].length);
-        }
-        return val;
-    };
-    // 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.
-    const evaluateExpression = (rawValue) => {
-        const val = stripUnit(rawValue).trim();
-        try {
-            return Number(Function(`"use strict";return (${val})`)());
-        }
-        catch {
-            return NaN;
+    }, [validateValue, props.onChange]);
+    const handleInputChange = useCallback((_, data) => {
+        // Just update the raw text — no evaluation or commit until Enter/blur.
+        setEditText(data.value);
+    }, []);
+    // Evaluate the current edit text and commit the value. Returns the clamped value if valid, or undefined.
+    const commitEditText = useCallback((text) => {
+        const numericValue = EvaluateExpression(text);
+        if (!isNaN(numericValue) && validateValue(numericValue)) {
+            const constrained = constrainValue(numericValue);
+            setValue(constrained);
+            tryCommitValue(constrained);
+            return constrained;
         }
-    };
-    const handleKeyDown = (event) => {
-        if (event.key === "Alt") {
-            setIsFocusedAltKeyPressed(true);
+        return undefined;
+    }, [validateValue, constrainValue, tryCommitValue]);
+    const handleIconPointerDown = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        // If the input was being edited, commit the current text and blur the input
+        // so the focus state stays consistent after the drag ends.
+        let startValue = value;
+        if (isEditing) {
+            const committed = commitEditText(editText);
+            if (committed !== undefined) {
+                startValue = committed;
+            }
+            setIsEditing(false);
+        }
+        // Blur the active element to ensure we can observe document level modifier keys.
+        inputRef.current?.ownerDocument.activeElement?.blur?.();
+        setIsDragging(true);
+        scrubStartYRef.current = e.clientY;
+        scrubStartValueRef.current = startValue;
+        e.currentTarget.setPointerCapture(e.pointerId);
+    }, [value, isEditing, editText, commitEditText]);
+    // When the step size changes during a drag (e.g. Shift/Alt pressed or released), reset the scrub reference point
+    // to the current value and pointer position so only future movement uses the new step.
+    useEffect(() => {
+        if (isDragging) {
+            scrubStartValueRef.current = value;
+            scrubStartYRef.current = lastPointerYRef.current;
         }
-        else if (event.key === "Shift") {
-            setIsFocusedShiftKeyPressed(true);
+    }, [step]);
+    const handleIconPointerMove = useCallback((e) => {
+        if (!isDragging) {
+            return;
         }
-        // Evaluate on Enter in keyDown (before Fluent's internal commit clears the raw text
-        // and re-renders with the truncated displayValue).
+        lastPointerYRef.current = e.clientY;
+        // Dragging up (negative dy) should increment, dragging down should decrement.
+        // Scale delta by step but round to display precision (not step) for smooth fine-grained control.
+        const dy = scrubStartYRef.current - e.clientY;
+        // 5 is just a number that "feels right" for the drag sensitivity — it determines how far the user needs to drag to change the value by 1 step.
+        const delta = (dy * step) / 5;
+        const raw = scrubStartValueRef.current + delta;
+        const precisionFactor = Math.pow(10, displayPrecision);
+        const rounded = Math.round(raw * precisionFactor) / precisionFactor;
+        const constrained = constrainValue(rounded);
+        setValue(constrained);
+        tryCommitValue(constrained);
+    }, [isDragging, step, displayPrecision, constrainValue, tryCommitValue]);
+    const handleIconPointerUp = useCallback((e) => {
+        setIsDragging(false);
+        e.currentTarget.releasePointerCapture(e.pointerId);
+    }, []);
+    const handleKeyDown = useCallback((event) => {
+        // Commit on Enter and blur the input if the value is valid.
         if (event.key === "Enter") {
-            const currVal = evaluateExpression(event.target.value);
-            if (!isNaN(currVal)) {
-                setValue(currVal);
-                tryCommitValue(currVal);
+            const committed = commitEditText(event.currentTarget.value);
+            if (committed !== undefined) {
+                inputRef.current?.blur();
             }
         }
-        HandleKeyDown(event);
-    };
-    const handleKeyUp = (event) => {
-        event.stopPropagation(); // Prevent event propagation
-        if (event.key === "Alt") {
-            setIsFocusedAltKeyPressed(false);
-        }
-        else if (event.key === "Shift") {
-            setIsFocusedShiftKeyPressed(false);
+        if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+            event.preventDefault();
+            const direction = event.key === "ArrowUp" ? 1 : -1;
+            const newValue = constrainValue(Math.round((value + direction * step) / step) * step);
+            setValue(newValue);
+            tryCommitValue(newValue);
+            // Update edit text to reflect the new value so the user sees the change
+            setEditText(formatValue(newValue));
         }
-        // Skip Enter — it's handled in keyDown before Fluent's internal commit
-        // clears the raw text and replaces it with the truncated displayValue.
-        if (event.key === "Enter") {
+        HandleKeyDown(event);
+    }, [value, step, constrainValue, tryCommitValue, commitEditText, formatValue]);
+    const id = useId("spin-button2");
+    // Real-time validation: when editing, validate the expression; otherwise validate the committed value.
+    // (validateValue already handles NaN, so no separate isNaN check needed.)
+    const isInputInvalid = !validateValue(isEditing ? EvaluateExpression(editText) : value);
+    const mergedClassName = mergeClasses(inputClasses.input, isInputInvalid ? inputClasses.invalid : "", props.className);
+    const inputSlotClassName = mergeClasses(inputClasses.inputSlot, props.inputClassName);
+    const formattedValue = formatValue(value);
+    const handleFocus = useCallback(() => {
+        setIsEditing(true);
+        setEditText(formattedValue);
+    }, [formattedValue]);
+    const handleBlur = useCallback((event) => {
+        // Skip blur handling if a drag just started (icon pointerDown already committed).
+        if (isDragging) {
             return;
         }
-        const currVal = evaluateExpression(event.target.value);
-        if (!isNaN(currVal)) {
-            setValue(currVal);
-            tryCommitValue(currVal);
-        }
-    };
-    const id = useId("spin-button");
-    const mergedClassName = mergeClasses(classes.input, !validateValue(value) ? classes.invalid : "", props.className);
-    // Build input slot from inputClassName
-    const inputSlot = {
-        className: mergeClasses(classes.inputSlot, props.inputClassName),
-    };
-    const spinButton = (jsx(SpinButton$1, { ref: ref, ...props, appearance: "outline", input: inputSlot, step: step, id: id, size: size, precision: fluentPrecision, displayValue: `${value.toFixed(displayPrecision)}${props.unit ? " " + props.unit : ""}`, value: value, onChange: handleChange, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onBlur: HandleOnBlur, className: mergedClassName }));
-    return props.infoLabel ? (jsxs("div", { className: classes.container, children: [jsx(InfoLabel, { ...props.infoLabel, htmlFor: id }), spinButton] })) : (spinButton);
+        commitEditText(event.target.value);
+        setIsEditing(false);
+        HandleOnBlur(event);
+    }, [commitEditText, isDragging]);
+    const contentBefore = !props.disableDragButton && (isHovered || isDragging) && !isInputInvalid ? (jsx(ArrowBidirectionalUpDownFilled, { className: classes.icon, style: { cursor: isDragging ? "ns-resize" : "pointer" }, onPointerDown: handleIconPointerDown, onPointerMove: handleIconPointerMove, onPointerUp: handleIconPointerUp })) : undefined;
+    const input = (jsx("div", { onMouseEnter: () => setIsHovered(true), onMouseLeave: () => {
+            if (!isDragging) {
+                setIsHovered(false);
+            }
+        }, children: jsx(Input, { ref: mergedRef, id: id, appearance: "outline", size: size, className: mergedClassName, input: { className: inputSlotClassName }, value: isEditing ? editText : formattedValue, onChange: handleInputChange, onFocus: handleFocus, onKeyDown: handleKeyDown, onBlur: handleBlur, contentBefore: contentBefore, contentAfter: props.unit }) }));
+    return props.infoLabel ? (jsxs("div", { className: inputClasses.container, children: [jsx(InfoLabel, { ...props.infoLabel, htmlFor: id }), input] })) : (input);
 });
 
 const TextInput = (props) => {
@@ -6820,7 +6913,7 @@ const StatsServiceDefinition = {
             horizontalLocation: "right",
             verticalLocation: "top",
             order: 300,
-            suppressTeachingMoment: true,
+            teachingMoment: false,
             content: () => {
                 const sections = useOrderedObservableCollection(sectionsCollection);
                 const sectionContent = useObservableCollection(sectionContentCollection);
@@ -6909,7 +7002,7 @@ const ToolsServiceDefinition = {
                     horizontalLocation: "right",
                     verticalLocation: "top",
                     order: 400,
-                    suppressTeachingMoment: true,
+                    teachingMoment: false,
                     content: () => {
                         const sections = useOrderedObservableCollection(sectionsCollection);
                         const sectionContent = useObservableCollection(sectionContentCollection);
@@ -6927,12 +7020,337 @@ const ToolsServiceDefinition = {
     },
 };
 
+const useStyles$F = makeStyles({
+    dropdown: {
+        ...UniformWidthStyling,
+    },
+});
+/**
+ * Wraps a dropdown in a property line
+ * @param props - PropertyLineProps and DropdownProps
+ * @returns property-line wrapped dropdown
+ */
+const DropdownPropertyLine = forwardRef((props, ref) => {
+    DropdownPropertyLine.displayName = "DropdownPropertyLine";
+    const classes = useStyles$F();
+    return (jsx(PropertyLine, { ...props, ref: ref, children: jsx(Dropdown, { ...props, className: classes.dropdown }) }));
+});
+/**
+ * Dropdown component for number values.
+ */
+const NumberDropdownPropertyLine = DropdownPropertyLine;
+/**
+ * Dropdown component for string values
+ */
+const StringDropdownPropertyLine = DropdownPropertyLine;
+
+/**
+ * A slider primitive that wraps the Fluent UI Slider with step scaling, drag tracking, and optional notify-on-release behavior.
+ * Follows the same pattern as other primitives (e.g. Switch) — no wrapper divs, just the Fluent component with logic.
+ * @param props
+ * @returns Slider component
+ */
+const Slider = (props) => {
+    Slider.displayName = "Slider";
+    const { size } = useContext(ToolContext);
+    const [value, setValue] = useState(props.value ?? 0);
+    const pendingValueRef = useRef(undefined);
+    const isDraggingRef = useRef(false);
+    // NOTE: The Fluent slider will add tick marks if the step prop is anything other than undefined.
+    // To avoid this, we scale the min/max based on the step so we can always make step undefined.
+    // The actual step size in the Fluent slider is 1 when it is set to undefined.
+    const min = props.min ?? 0;
+    const max = props.max ?? 100;
+    const step = props.step ?? 1;
+    useEffect(() => {
+        !isDraggingRef.current && setValue(props.value ?? 0); // Update local state when props.value changes as long as user is not actively dragging
+    }, [props.value]);
+    const handleSliderChange = (_, data) => {
+        const newValue = data.value * step;
+        setValue(newValue);
+        if (props.notifyOnlyOnRelease) {
+            // Store the value but don't notify parent yet
+            pendingValueRef.current = newValue;
+        }
+        else {
+            // Notify parent as slider changes
+            props.onChange(newValue);
+        }
+    };
+    const handleSliderPointerDown = () => {
+        isDraggingRef.current = true;
+    };
+    const handleSliderPointerUp = () => {
+        if (props.notifyOnlyOnRelease && isDraggingRef.current && pendingValueRef.current !== undefined) {
+            props.onChange(pendingValueRef.current);
+            pendingValueRef.current = undefined;
+        }
+        isDraggingRef.current = false;
+    };
+    return (jsx(Slider$1, { className: props.className, size: size, min: min / step, max: max / step, step: undefined, value: value / step, disabled: props.disabled, onChange: handleSliderChange, onPointerDown: () => {
+            handleSliderPointerDown();
+            props.onPointerDown?.();
+        }, onPointerUp: () => {
+            handleSliderPointerUp();
+            props.onPointerUp?.();
+        } }));
+};
+
+const useSyncedSliderStyles = makeStyles({
+    container: { display: "flex", minWidth: 0 },
+    syncedSlider: {
+        flex: "1 1 0",
+        flexDirection: "row",
+        display: "flex",
+        alignItems: "center",
+        minWidth: 0,
+    },
+    slider: {
+        flex: "1 1 auto",
+        minWidth: "75px",
+        maxWidth: "75px",
+    },
+    compactSlider: {
+        flex: "1 1 auto",
+        minWidth: "50px", // Allow shrinking for compact mode
+        maxWidth: "75px",
+    },
+    growSlider: {
+        flex: "1 1 auto",
+        minWidth: "50px",
+        // No maxWidth - slider grows to fill available space
+    },
+    compactSpinButton: {
+        width: "65px",
+        minWidth: "65px",
+        maxWidth: "65px",
+    },
+    compactSpinButtonInput: {
+        minWidth: "0",
+    },
+});
+/**
+ * Component which synchronizes a slider and an input field, allowing the user to change the value using either control
+ * @param props
+ * @returns SyncedSlider component
+ */
+const SyncedSliderInput = (props) => {
+    SyncedSliderInput.displayName = "SyncedSliderInput";
+    const { infoLabel, ...passthroughProps } = props;
+    const classes = useSyncedSliderStyles();
+    const [value, setValue] = useState(props.value ?? 0);
+    const pendingValueRef = useRef(undefined);
+    const isDraggingRef = useRef(false);
+    useEffect(() => {
+        !isDraggingRef.current && setValue(props.value ?? 0); // Update local state when props.value changes as long as user is not actively dragging
+    }, [props.value]);
+    const handleSliderChange = (newValue) => {
+        setValue(newValue);
+        if (props.notifyOnlyOnRelease) {
+            // Store the value but don't notify parent yet
+            pendingValueRef.current = newValue;
+        }
+        else {
+            // Notify parent as slider changes
+            props.onChange(newValue);
+        }
+    };
+    const handleSliderPointerDown = () => {
+        isDraggingRef.current = true;
+    };
+    const handleSliderPointerUp = () => {
+        if (props.notifyOnlyOnRelease && isDraggingRef.current && pendingValueRef.current !== undefined) {
+            props.onChange(pendingValueRef.current);
+            pendingValueRef.current = undefined;
+        }
+        isDraggingRef.current = false;
+    };
+    const handleInputChange = (value) => {
+        setValue(value);
+        props.onChange(value); // Input always updates immediately
+    };
+    const hasSlider = props.min !== undefined && props.max !== undefined;
+    // Determine Slider className based on props
+    const getSliderClassName = () => {
+        if (props.growSlider) {
+            return classes.growSlider;
+        }
+        if (props.compact) {
+            return classes.compactSlider;
+        }
+        return classes.slider;
+    };
+    return (jsxs("div", { className: classes.container, children: [infoLabel && jsx(InfoLabel, { ...infoLabel, htmlFor: "syncedSlider" }), jsxs("div", { id: "syncedSlider", className: classes.syncedSlider, children: [hasSlider && (jsx(Slider, { className: getSliderClassName(), value: value, onChange: handleSliderChange, min: props.min, max: props.max, step: props.step, disabled: props.disabled, onPointerDown: handleSliderPointerDown, onPointerUp: handleSliderPointerUp })), jsx(SpinButton, { ...passthroughProps, className: hasSlider || props.compact ? classes.compactSpinButton : undefined, inputClassName: hasSlider || props.compact ? classes.compactSpinButtonInput : undefined, value: value, onChange: handleInputChange, step: props.step, disableDragButton: true })] })] }));
+};
+
+/**
+ * Renders a simple wrapper around the SyncedSliderInput
+ * @param props
+ * @returns
+ */
+const SyncedSliderPropertyLine = forwardRef((props, ref) => {
+    SyncedSliderPropertyLine.displayName = "SyncedSliderPropertyLine";
+    const { label, description, ...sliderProps } = props;
+    return (jsx(PropertyLine, { ref: ref, ...props, children: jsx(SyncedSliderInput, { ...sliderProps }) }));
+});
+
+const WatcherSettingDescriptor = {
+    key: "WatcherSettings",
+    defaultValue: {
+        mode: "intercept",
+    },
+};
+const WatcherServiceIdentity = Symbol("WatcherService");
+const WatcherServiceDefinition = {
+    friendlyName: "Watcher Service",
+    produces: [WatcherServiceIdentity],
+    consumes: [SettingsStoreIdentity],
+    factory: (settingsStore) => {
+        let refreshObservable = null;
+        let pollingHandle = null;
+        const applySettings = () => {
+            const settings = settingsStore.readSetting(WatcherSettingDescriptor);
+            if (pollingHandle !== null) {
+                clearInterval(pollingHandle);
+                pollingHandle = null;
+            }
+            if (settings.mode === "intercept") {
+                if (refreshObservable) {
+                    refreshObservable.clear();
+                    refreshObservable = null;
+                }
+            }
+            else {
+                const pollingObservable = refreshObservable ?? (refreshObservable = new Observable());
+                if (settings.mode === "polling") {
+                    pollingHandle = window.setInterval(() => {
+                        pollingObservable.notifyObservers();
+                    }, settings.interval);
+                }
+            }
+        };
+        const settingsStoreObserver = settingsStore.onChanged.add((key) => {
+            if (key === WatcherSettingDescriptor.key) {
+                applySettings();
+            }
+        });
+        applySettings();
+        return {
+            watchProperty(target, propertyKey, onChanged) {
+                if (refreshObservable) {
+                    let previousValue = target[propertyKey];
+                    const observer = refreshObservable.add(() => {
+                        const currentValue = target[propertyKey];
+                        if (!Object.is(previousValue, currentValue)) {
+                            previousValue = currentValue;
+                            onChanged(currentValue);
+                        }
+                    });
+                    return {
+                        dispose: () => observer.remove(),
+                    };
+                }
+                else {
+                    return InterceptProperty(target, propertyKey, {
+                        afterSet: (value) => onChanged(value),
+                    });
+                }
+            },
+            refresh: () => {
+                refreshObservable?.notifyObservers();
+            },
+            dispose: () => {
+                if (pollingHandle !== null) {
+                    clearInterval(pollingHandle);
+                    pollingHandle = null;
+                }
+                refreshObservable?.clear();
+                refreshObservable = null;
+                settingsStoreObserver.remove();
+            },
+        };
+    },
+};
+const WatchModes = [
+    { label: "Interception", value: "intercept" },
+    { label: "Polling", value: "polling" },
+    { label: "Manual", value: "manual" },
+];
+const WatcherSettingsServiceDefinition = {
+    friendlyName: "Watcher Settings Service",
+    consumes: [SettingsServiceIdentity],
+    factory: (settingsService) => {
+        const settingsRegistration = settingsService.addSectionContent({
+            key: "watcherSettings",
+            section: "UI",
+            component: () => {
+                const [watcherSettings, setWatcherSettings] = useSetting(WatcherSettingDescriptor);
+                return (jsxs(Fragment, { children: [jsx(DropdownPropertyLine, { label: "Property Watch Mode", description: `Specifies how Inspector watches entity properties for changes. "Interception" sees changes instantly, but for complex scenes can impact performance. "Polling" has less performance impact on complex scenes, but changes are only detected at the specified interval. "Manual" requires the "Refresh" button in the toolbar to be pressed.`, options: WatchModes, value: watcherSettings.mode, onChange: (value) => setWatcherSettings((prev) => {
+                                return { interval: 250, ...prev, mode: value };
+                            }) }), jsx(Collapse, { visible: watcherSettings.mode === "polling", children: jsx(SyncedSliderPropertyLine, { label: "Polling Interval", description: "A smaller polling interval will detect changes faster but may impact performance more.", min: 30, max: 1000, step: 10, unit: "ms", value: watcherSettings.mode === "polling" ? watcherSettings.interval : NaN, onChange: (value) => setWatcherSettings((prev) => {
+                                    return { ...prev, interval: value };
+                                }) }) })] }));
+            },
+        });
+        return {
+            dispose: () => {
+                settingsRegistration.dispose();
+            },
+        };
+    },
+};
+const WatcherRefreshToolbarServiceDefinition = {
+    friendlyName: "Watcher Refresh Toolbar Service",
+    consumes: [WatcherServiceIdentity, SettingsStoreIdentity, ShellServiceIdentity],
+    factory: (watcherService, settingsStore, shellService) => {
+        let toolbarItemRegistration = null;
+        const updateToolbar = () => {
+            const settings = settingsStore.readSetting(WatcherSettingDescriptor);
+            if (settings.mode === "manual") {
+                if (!toolbarItemRegistration) {
+                    toolbarItemRegistration = shellService.addToolbarItem({
+                        key: "Watcher Refresh",
+                        displayName: "Refresh Properties",
+                        verticalLocation: "bottom",
+                        horizontalLocation: "right",
+                        order: 200 /* DefaultToolbarItemOrder.RefreshProperties */,
+                        teachingMoment: {
+                            title: "Refresh Properties",
+                            description: "Press this button to manually refresh all UI bound to scene state. This is only available when Property Watch Mode is set to Manual in the settings pane.",
+                        },
+                        component: () => {
+                            return (jsx(Button, { appearance: "subtle", icon: ArrowClockwiseRegular, title: "Update all UI (e.g. Scene Explorer, Properties, etc.) bound to properties of entities (Meshes, Materials, etc.)", onClick: () => watcherService.refresh() }));
+                        },
+                    });
+                }
+            }
+            else {
+                toolbarItemRegistration?.dispose();
+                toolbarItemRegistration = null;
+            }
+        };
+        updateToolbar();
+        const settingsStoreObserver = settingsStore.onChanged.add((key) => {
+            if (key === WatcherSettingDescriptor.key) {
+                updateToolbar();
+            }
+        });
+        return {
+            dispose: () => {
+                toolbarItemRegistration?.dispose();
+                toolbarItemRegistration = null;
+                settingsStoreObserver.remove();
+            },
+        };
+    },
+};
+
 const GizmoServiceIdentity = Symbol("GizmoService");
 const GizmoServiceDefinition = {
     friendlyName: "Gizmo Service",
     produces: [GizmoServiceIdentity],
-    consumes: [SceneContextIdentity, SelectionServiceIdentity],
-    factory: (sceneContext, selectionService) => {
+    consumes: [SceneContextIdentity, SelectionServiceIdentity, WatcherServiceIdentity],
+    factory: (sceneContext, selectionService, watcherService) => {
         // Ref-counted utility layers, shared across consumers.
         const utilityLayers = new WeakMap();
         const getUtilityLayer = (scene, layer = "default") => {
@@ -7031,13 +7449,11 @@ const GizmoServiceDefinition = {
                 currentKeepDepthUtilityLayerRef = null;
             };
             gm.coordinatesMode = coordinatesModeState;
-            coordinatesModeInterceptToken = InterceptProperty(gm, "coordinatesMode", {
-                afterSet: (value) => {
-                    if (value !== coordinatesModeState) {
-                        coordinatesModeState = value;
-                        coordinatesModeObservable.notifyObservers();
-                    }
-                },
+            coordinatesModeInterceptToken = watcherService.watchProperty(gm, "coordinatesMode", (value) => {
+                if (value !== coordinatesModeState) {
+                    coordinatesModeState = value;
+                    coordinatesModeObservable.notifyObservers();
+                }
             });
             currentGizmoManager = gm;
         }
@@ -7210,7 +7626,7 @@ const DefaultInspectorExtensionFeed = new BuiltInsExtensionFeed("Inspector", [
         keywords: ["creation", "tools"],
         ...BabylonWebResources,
         author: { name: "Babylon.js", forumUserName: "" },
-        getExtensionModuleAsync: async () => await import('./quickCreateToolsService-C9jZpIAl.js'),
+        getExtensionModuleAsync: async () => await import('./quickCreateToolsService-DHfs_EZ6.js'),
     },
     {
         name: "Reflector",
@@ -7218,116 +7634,10 @@ const DefaultInspectorExtensionFeed = new BuiltInsExtensionFeed("Inspector", [
         keywords: ["reflector", "bridge", "sync", "sandbox", "tools"],
         ...BabylonWebResources,
         author: { name: "Babylon.js", forumUserName: "" },
-        getExtensionModuleAsync: async () => await import('./reflectorService-DGy36OAK.js'),
+        getExtensionModuleAsync: async () => await import('./reflectorService-DEPuGTAZ.js'),
     },
 ]);
 
-const useSyncedSliderStyles = makeStyles({
-    container: { display: "flex", minWidth: 0 },
-    syncedSlider: {
-        flex: "1 1 0",
-        flexDirection: "row",
-        display: "flex",
-        alignItems: "center",
-        minWidth: 0,
-    },
-    slider: {
-        flex: "1 1 auto",
-        minWidth: "75px",
-        maxWidth: "75px",
-    },
-    compactSlider: {
-        flex: "1 1 auto",
-        minWidth: "50px", // Allow shrinking for compact mode
-        maxWidth: "75px",
-    },
-    growSlider: {
-        flex: "1 1 auto",
-        minWidth: "50px",
-        // No maxWidth - slider grows to fill available space
-    },
-    compactSpinButton: {
-        width: "65px",
-        minWidth: "65px",
-        maxWidth: "65px",
-    },
-    compactSpinButtonInput: {
-        minWidth: "0",
-    },
-});
-/**
- * Component which synchronizes a slider and an input field, allowing the user to change the value using either control
- * @param props
- * @returns SyncedSlider component
- */
-const SyncedSliderInput = (props) => {
-    SyncedSliderInput.displayName = "SyncedSliderInput";
-    const { infoLabel, ...passthroughProps } = props;
-    const classes = useSyncedSliderStyles();
-    const { size } = useContext(ToolContext);
-    const [value, setValue] = useState(props.value ?? 0);
-    const pendingValueRef = useRef(undefined);
-    const isDraggingRef = useRef(false);
-    // NOTE: The Fluent slider will add tick marks if the step prop is anything other than undefined.
-    // To avoid this, we scale the min/max based on the step so we can always make step undefined.
-    // The actual step size in the Fluent slider is 1 when it is ste to undefined.
-    const min = props.min ?? 0;
-    const max = props.max ?? 100;
-    const step = props.step ?? 1;
-    useEffect(() => {
-        !isDraggingRef.current && setValue(props.value ?? 0); // Update local state when props.value changes as long as user is not actively dragging
-    }, [props.value]);
-    const handleSliderChange = (_, data) => {
-        const newValue = data.value * step;
-        setValue(newValue);
-        if (props.notifyOnlyOnRelease) {
-            // Store the value but don't notify parent yet
-            pendingValueRef.current = newValue;
-        }
-        else {
-            // Notify parent as slider changes
-            props.onChange(newValue);
-        }
-    };
-    const handleSliderPointerDown = () => {
-        isDraggingRef.current = true;
-    };
-    const handleSliderPointerUp = () => {
-        if (props.notifyOnlyOnRelease && isDraggingRef.current && pendingValueRef.current !== undefined) {
-            props.onChange(pendingValueRef.current);
-            pendingValueRef.current = undefined;
-        }
-        isDraggingRef.current = false;
-    };
-    const handleInputChange = (value) => {
-        setValue(value);
-        props.onChange(value); // Input always updates immediately
-    };
-    const hasSlider = props.min !== undefined && props.max !== undefined;
-    // Determine Slider className based on props
-    const getSliderClassName = () => {
-        if (props.growSlider) {
-            return classes.growSlider;
-        }
-        if (props.compact) {
-            return classes.compactSlider;
-        }
-        return classes.slider;
-    };
-    return (jsxs("div", { className: classes.container, children: [infoLabel && jsx(InfoLabel, { ...infoLabel, htmlFor: "syncedSlider" }), jsxs("div", { id: "syncedSlider", className: classes.syncedSlider, children: [hasSlider && (jsx(Slider, { ...passthroughProps, className: getSliderClassName(), size: size, min: min / step, max: max / step, step: undefined, value: value / step, onChange: handleSliderChange, onPointerDown: handleSliderPointerDown, onPointerUp: handleSliderPointerUp })), jsx(SpinButton, { ...passthroughProps, className: hasSlider || props.compact ? classes.compactSpinButton : undefined, inputClassName: hasSlider || props.compact ? classes.compactSpinButtonInput : undefined, value: value, onChange: handleInputChange, step: props.step })] })] }));
-};
-
-/**
- * Renders a simple wrapper around the SyncedSliderInput
- * @param props
- * @returns
- */
-const SyncedSliderPropertyLine = forwardRef((props, ref) => {
-    SyncedSliderPropertyLine.displayName = "SyncedSliderPropertyLine";
-    const { label, description, ...sliderProps } = props;
-    return (jsx(PropertyLine, { ref: ref, ...props, children: jsx(SyncedSliderInput, { ...sliderProps }) }));
-});
-
 /**
  * Reusable component which renders a color property line containing a label, colorPicker popout, and expandable RGBA values
  * The expandable RGBA values are synced sliders that allow the user to modify the color's RGBA values directly
@@ -7362,30 +7672,6 @@ const ColorSliders = ({ color, onSliderChange }) => (jsxs(Fragment, { children:
 const Color3PropertyLine = ColorPropertyLine;
 const Color4PropertyLine = ColorPropertyLine;
 
-const useStyles$F = makeStyles({
-    dropdown: {
-        ...UniformWidthStyling,
-    },
-});
-/**
- * Wraps a dropdown in a property line
- * @param props - PropertyLineProps and DropdownProps
- * @returns property-line wrapped dropdown
- */
-const DropdownPropertyLine = forwardRef((props, ref) => {
-    DropdownPropertyLine.displayName = "DropdownPropertyLine";
-    const classes = useStyles$F();
-    return (jsx(PropertyLine, { ...props, ref: ref, children: jsx(Dropdown, { ...props, className: classes.dropdown }) }));
-});
-/**
- * Dropdown component for number values.
- */
-const NumberDropdownPropertyLine = DropdownPropertyLine;
-/**
- * Dropdown component for string values
- */
-const StringDropdownPropertyLine = DropdownPropertyLine;
-
 /**
  * Wraps a text input in a property line
  * @param props - PropertyLineProps and InputProps
@@ -7430,21 +7716,21 @@ const TensorPropertyLine = (props) => {
     useEffect(() => {
         setVector(props.value);
     }, [props.value, props.expandedContent]);
-    return (jsx(PropertyLine, { ...props, expandedContent: vector ? jsx(VectorSliders, { vector: vector, min: min, max: max, unit: props.unit, step: props.step, converted: converted, onChange: onChange }) : undefined, children: jsx(Body1, { children: `[${formatted(props.value.x)}, ${formatted(props.value.y)}${HasZ(props.value) ? `, ${formatted(props.value.z)}` : ""}${HasW(props.value) ? `, ${formatted(props.value.w)}` : ""}]` }) }));
+    return (jsx(PropertyLine, { ...props, expandedContent: jsxs(Fragment, { children: [props.expandedContent, vector ? (jsx(VectorSliders, { vector: vector, min: min, max: max, unit: props.unit, step: props.step, precision: props.precision, converted: converted, onChange: onChange })) : undefined] }), children: jsx(Body1, { children: `[${formatted(props.value.x)}, ${formatted(props.value.y)}${HasZ(props.value) ? `, ${formatted(props.value.z)}` : ""}${HasW(props.value) ? `, ${formatted(props.value.w)}` : ""}]` }) }));
 };
-const VectorSliders = ({ vector, min, max, unit, step, converted, onChange }) => (jsxs(Fragment, { children: [jsx(SyncedSliderPropertyLine, { label: "X", value: converted(vector.x), min: min, max: max, onChange: (val) => onChange(val, "x"), unit: unit, step: step }), jsx(SyncedSliderPropertyLine, { label: "Y", value: converted(vector.y), min: min, max: max, onChange: (val) => onChange(val, "y"), unit: unit, step: step }), HasZ(vector) && jsx(SyncedSliderPropertyLine, { label: "Z", value: converted(vector.z), min: min, max: max, onChange: (val) => onChange(val, "z"), unit: unit, step: step }), HasW(vector) && jsx(SyncedSliderPropertyLine, { label: "W", value: converted(vector.w), min: min, max: max, onChange: (val) => onChange(val, "w"), unit: unit, step: step })] }));
+const VectorSliders = ({ vector, min, max, unit, step, precision, converted, onChange }) => (jsxs(Fragment, { children: [jsx(NumberInputPropertyLine, { label: "X", value: converted(vector.x), min: min, max: max, onChange: (val) => onChange(val, "x"), unit: unit, step: step, precision: precision }), jsx(NumberInputPropertyLine, { label: "Y", value: converted(vector.y), min: min, max: max, onChange: (val) => onChange(val, "y"), unit: unit, step: step, precision: precision }), HasZ(vector) && (jsx(NumberInputPropertyLine, { label: "Z", value: converted(vector.z), min: min, max: max, onChange: (val) => onChange(val, "z"), unit: unit, step: step, precision: precision })), HasW(vector) && (jsx(NumberInputPropertyLine, { label: "W", value: converted(vector.w), min: min, max: max, onChange: (val) => onChange(val, "w"), unit: unit, step: step, precision: precision }))] }));
 const ToDegreesConverter = { from: Tools.ToDegrees, to: Tools.ToRadians };
 const RotationVectorPropertyLine = (props) => {
     RotationVectorPropertyLine.displayName = "RotationVectorPropertyLine";
-    const min = props.useDegrees ? 0 : undefined;
-    const max = props.useDegrees ? 360 : undefined;
-    return (jsx(Vector3PropertyLine, { ...props, unit: props.useDegrees ? "deg" : "rad", valueConverter: props.useDegrees ? ToDegreesConverter : undefined, min: min, max: max, step: 0.001 }));
+    const step = props.useDegrees ? 1 : 0.01;
+    const precision = props.useDegrees ? 1 : 2;
+    return (jsx(Vector3PropertyLine, { ...props, unit: props.useDegrees ? "°" : "rad", valueConverter: props.useDegrees ? ToDegreesConverter : undefined, step: step, precision: precision }));
 };
 const QuaternionPropertyLineInternal = TensorPropertyLine;
 const QuaternionPropertyLine = (props) => {
     QuaternionPropertyLine.displayName = "QuaternionPropertyLine";
-    const min = props.useDegrees ? 0 : undefined;
-    const max = props.useDegrees ? 360 : undefined;
+    const step = props.useDegrees ? 1 : 0.01;
+    const precision = props.useDegrees ? 1 : 2;
     const [quat, setQuat] = useState(props.value);
     useEffect(() => {
         setQuat(props.value);
@@ -7459,7 +7745,7 @@ const QuaternionPropertyLine = (props) => {
         const quat = Quaternion.FromEulerAngles(val.x, val.y, val.z);
         onQuatChange(quat);
     };
-    return useEuler ? (jsx(Vector3PropertyLine, { ...restProps, nullable: false, ignoreNullable: false, value: quat.toEulerAngles(), valueConverter: ToDegreesConverter, min: min, max: max, onChange: onEulerChange, unit: props.useDegrees ? "deg" : "rad" })) : (jsx(QuaternionPropertyLineInternal, { ...props, nullable: false, value: quat, min: min, max: max, onChange: onQuatChange, unit: props.useDegrees ? "deg" : "rad" }));
+    return useEuler ? (jsx(Vector3PropertyLine, { ...restProps, nullable: false, ignoreNullable: false, value: quat.toEulerAngles(), valueConverter: ToDegreesConverter, onChange: onEulerChange, unit: props.useDegrees ? "°" : "rad", step: step, precision: precision, expandedContent: jsx(TextPropertyLine, { label: "Quaternion", value: `[${quat.x.toFixed(4)}, ${quat.y.toFixed(4)}, ${quat.z.toFixed(4)}, ${quat.w.toFixed(4)}]` }) })) : (jsx(QuaternionPropertyLineInternal, { ...props, nullable: false, value: quat, onChange: onQuatChange, unit: props.useDegrees ? "°" : "rad", step: step, precision: precision }));
 };
 const Vector2PropertyLine = TensorPropertyLine;
 const Vector3PropertyLine = TensorPropertyLine;
@@ -7974,7 +8260,7 @@ const ThemeSelectorServiceDefinition = {
             key: "ThemeSelector",
             horizontalLocation: "right",
             verticalLocation: "top",
-            suppressTeachingMoment: true,
+            teachingMoment: false,
             order: -300,
             component: () => {
                 const classes = useStyles$E();
@@ -8039,7 +8325,7 @@ function MakeModularTool(options) {
         const [requiredExtensions, setRequiredExtensions] = useState();
         const [requiredExtensionsDeferred, setRequiredExtensionsDeferred] = useState();
         const [extensionInstallError, setExtensionInstallError] = useState();
-        const [rootComponent, setRootComponent] = useState();
+        const [bootstrapServices, setBootstrapServices] = useState();
         // This is the main async initialization.
         useEffect(() => {
             const initializeExtensionManagerAsync = async () => {
@@ -8050,17 +8336,22 @@ function MakeModularTool(options) {
                     produces: [SettingsStoreIdentity],
                     factory: () => settingsStore,
                 });
+                // Register watcher service early since many other services will rely on it.
+                // TODO: Really this should be in the Inspector layer, but we would need a way
+                //       to setup the WatcherContext.Provider before the root component is rendered
+                //       for that to work, since components will use the WatcherContext.
+                await serviceContainer.addServiceAsync(WatcherServiceDefinition);
                 // Register the shell service (top level toolbar/side pane UI layout).
                 await serviceContainer.addServiceAsync(MakeShellServiceDefinition(options));
-                // Register a service that simply consumes the IRootComponentService and sets the root component as state so it can be rendered.
+                // Register a service that simply consumes the services we need before first render.
                 await serviceContainer.addServiceAsync({
-                    friendlyName: "Root Component Bootstrapper",
-                    consumes: [RootComponentServiceIdentity],
-                    factory: (rootComponentService) => {
+                    friendlyName: "Service Bootstrapper",
+                    consumes: [RootComponentServiceIdentity, WatcherServiceIdentity],
+                    factory: (rootComponentService, watcherService) => {
                         // Use function syntax for the state setter since the root component may be a function component.
-                        setRootComponent(() => rootComponentService.rootComponent);
+                        setBootstrapServices({ rootComponentService, watcherService });
                         return {
-                            dispose: () => setRootComponent(undefined),
+                            dispose: () => setBootstrapServices(undefined),
                         };
                     },
                 });
@@ -8072,7 +8363,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-qU9tqfBg.js');
+                    const { ExtensionListServiceDefinition } = await import('./extensionsListService-Duej2zkq.js');
                     await serviceContainer.addServiceAsync(ExtensionListServiceDefinition);
                 }
                 // Register all external services (that make up a unique tool).
@@ -8139,12 +8430,17 @@ function MakeModularTool(options) {
             setExtensionInstallError(undefined);
         }, [setExtensionInstallError]);
         // Show a spinner until a main view has been set.
-        // eslint-disable-next-line @typescript-eslint/naming-convention
-        const Content = rootComponent ?? (() => jsx(Spinner, { className: classes.spinner }));
-        return (
-        // Expose the settings store as a React context so that UI components can read/write
-        // settings without the ISettingsService needing to be explicitly passed around.
-        jsx(SettingsStoreContext.Provider, { value: settingsStore, children: jsx(ExtensionManagerContext.Provider, { value: extensionManagerContext, children: jsx(Theme, { className: classes.app, children: jsxs(ToastProvider, { children: [jsx(Dialog, { 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, { 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, {}) })] }) }) }) }));
+        if (!bootstrapServices) {
+            return (jsx(SettingsStoreContext.Provider, { value: settingsStore, children: jsx(Theme, { className: classes.app, children: jsx(Spinner, { className: classes.spinner }) }) }));
+        }
+        else {
+            // eslint-disable-next-line @typescript-eslint/naming-convention
+            const Content = bootstrapServices.rootComponentService.rootComponent;
+            return (
+            // Expose the settings store as a React context so that UI components can read/write
+            // settings without the ISettingsService needing to be explicitly passed around.
+            jsx(SettingsStoreContext.Provider, { value: settingsStore, children: jsx(WatcherContext.Provider, { value: bootstrapServices.watcherService, children: jsx(ExtensionManagerContext.Provider, { value: extensionManagerContext, children: jsx(Theme, { className: classes.app, children: jsxs(ToastProvider, { children: [jsx(Dialog, { 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, { 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, {}) })] }) }) }) }) }));
+        }
     };
     // Set the container element to be a flex container so that the tool can be displayed properly.
     const originalContainerElementDisplay = containerElement.style.display;
@@ -8223,12 +8519,103 @@ const GizmoToolbarServiceDefinition = {
             key: "Gizmo Toolbar",
             verticalLocation: "top",
             horizontalLocation: "left",
-            suppressTeachingMoment: true,
+            teachingMoment: false,
             component: () => jsx(GizmoToolbar, { gizmoService: gizmoService, sceneContext: sceneContext }),
         });
     },
 };
 
+const HighlightSelectedEntitySettingDescriptor = {
+    key: "HighlightSelectedEntity",
+    defaultValue: true,
+};
+const HighlightServiceDefinition = {
+    friendlyName: "Highlight Service",
+    consumes: [SelectionServiceIdentity, SceneContextIdentity, SettingsStoreIdentity, ThemeServiceIdentity, GizmoServiceIdentity],
+    factory: (selectionService, sceneContext, settingsStore, themeService, gizmoService) => {
+        let outlineLayer = null;
+        let utilityLayer = null;
+        let currentScene = null;
+        let activeCameraObserver = null;
+        function disposeOutlineLayer() {
+            outlineLayer?.dispose();
+            outlineLayer = null;
+            utilityLayer?.dispose();
+            utilityLayer = null;
+            currentScene = null;
+        }
+        function getOrCreateOutlineLayer(scene) {
+            if (!outlineLayer || currentScene !== scene) {
+                disposeOutlineLayer();
+                utilityLayer = gizmoService.getUtilityLayer(scene);
+                outlineLayer = new SelectionOutlineLayer("InspectorSelectionOutline", utilityLayer.value.utilityLayerScene);
+                updateColor(outlineLayer);
+                currentScene = scene;
+            }
+            return outlineLayer;
+        }
+        function updateColor(outlineLayer) {
+            outlineLayer.outlineColor = Color3.FromHexString(themeService.theme.colorBrandForeground1);
+        }
+        function updateHighlight() {
+            const scene = sceneContext.currentScene;
+            const entity = selectionService.selectedEntity instanceof AbstractMesh && !(selectionService.selectedEntity instanceof GaussianSplattingMesh)
+                ? selectionService.selectedEntity
+                : null;
+            if (!entity || !settingsStore.readSetting(HighlightSelectedEntitySettingDescriptor) || !scene || !scene.activeCamera) {
+                disposeOutlineLayer();
+                return;
+            }
+            const layer = getOrCreateOutlineLayer(scene);
+            layer.clearSelection();
+            layer.addSelection(entity);
+        }
+        function watchActiveCamera(scene) {
+            activeCameraObserver?.remove();
+            activeCameraObserver = null;
+            if (scene) {
+                activeCameraObserver = scene.onActiveCameraChanged.add(updateHighlight);
+            }
+        }
+        // React to theme changes.
+        const themeObserver = themeService.onChanged.add(() => {
+            if (outlineLayer) {
+                updateColor(outlineLayer);
+            }
+        });
+        // React to selection changes.
+        const selectionObserver = selectionService.onSelectedEntityChanged.add(updateHighlight);
+        // React to scene changes.
+        const sceneObserver = sceneContext.currentSceneObservable.add(() => {
+            // Dispose the old layer when the scene changes.
+            disposeOutlineLayer();
+            watchActiveCamera(sceneContext.currentScene);
+            updateHighlight();
+        });
+        // React to setting changes.
+        const settingObserver = settingsStore.onChanged.add((setting) => {
+            if (setting === HighlightSelectedEntitySettingDescriptor.key) {
+                updateHighlight();
+            }
+        });
+        // Watch active camera on the initial scene.
+        watchActiveCamera(sceneContext.currentScene);
+        // Initial update.
+        updateHighlight();
+        return {
+            dispose: () => {
+                themeObserver.remove();
+                selectionObserver.remove();
+                sceneObserver.remove();
+                settingObserver.remove();
+                activeCameraObserver?.remove();
+                activeCameraObserver = null;
+                disposeOutlineLayer();
+            },
+        };
+    },
+};
+
 const useStyles$B = makeStyles({
     badge: {
         margin: tokens.spacingHorizontalXXS,
@@ -8243,7 +8630,8 @@ const MiniStatsServiceDefinition = {
             key: "Mini Stats",
             verticalLocation: "bottom",
             horizontalLocation: "right",
-            suppressTeachingMoment: true,
+            order: 300 /* DefaultToolbarItemOrder.FrameRate */,
+            teachingMoment: false,
             component: () => {
                 const classes = useStyles$B();
                 const scene = useObservableState(useCallback(() => sceneContext.currentScene, [sceneContext.currentScene]), sceneContext.currentSceneObservable);
@@ -12429,7 +12817,7 @@ const SoundCommandProperties = (props) => {
                     else {
                         sound.play();
                     }
-                } }), jsx(Property, { component: SyncedSliderPropertyLine, label: "Volume", functionPath: "setVolume", value: volume, min: 0, max: 5, step: 0.1, onChange: (value) => {
+                } }), jsx(Property, { component: NumberInputPropertyLine, label: "Volume", functionPath: "setVolume", value: volume, min: 0, step: 0.1, onChange: (value) => {
                     sound.setVolume(value);
                 } }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Loop", target: sound, propertyKey: "loop" })] }));
 };
@@ -12469,7 +12857,7 @@ const ArcRotateCameraTransformProperties = (props) => {
     const upperBetaLimit = useProperty(camera, "upperBetaLimit") ?? Math.PI;
     const lowerRadiusLimit = useProperty(camera, "lowerRadiusLimit");
     const upperRadiusLimit = useProperty(camera, "upperRadiusLimit");
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Alpha", description: `Horizontal angle in ${useDegrees ? "degrees" : "radians"}`, target: camera, propertyKey: "alpha", min: toDisplayAngle(lowerAlphaLimit), max: toDisplayAngle(upperAlphaLimit), step: toDisplayAngle(0.01), convertTo: (value) => toDisplayAngle(value, true), convertFrom: fromDisplayAngle }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Beta", description: `Vertical angle in ${useDegrees ? "degrees" : "radians"}`, target: camera, propertyKey: "beta", min: toDisplayAngle(lowerBetaLimit), max: toDisplayAngle(upperBetaLimit), step: toDisplayAngle(0.01), convertTo: (value) => toDisplayAngle(value, true), convertFrom: fromDisplayAngle }), lowerRadiusLimit != null && upperRadiusLimit != null ? (jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Radius", description: "Distance from the target point.", target: camera, propertyKey: "radius", min: lowerRadiusLimit, max: upperRadiusLimit, step: 0.01 })) : (jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Radius", description: "Distance from the target point.", target: camera, propertyKey: "radius", min: 0, step: 0.01 }))] }));
+    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;
@@ -12481,8 +12869,19 @@ const ArcRotateCameraCollisionProperties = (props) => {
 };
 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: 0 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Upper Alpha Limit", target: camera, propertyKey: "upperAlphaLimit", nullable: true, defaultValue: Infinity }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Lower Beta Limit", target: camera, propertyKey: "lowerBetaLimit", nullable: true, defaultValue: -Math.PI }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Upper Beta Limit", target: camera, propertyKey: "upperBetaLimit", nullable: true, defaultValue: Math.PI }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Lower Radius Limit", target: camera, propertyKey: "lowerRadiusLimit", nullable: true, defaultValue: 0 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Upper Radius Limit", target: camera, propertyKey: "upperRadiusLimit", nullable: true, defaultValue: 100 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Lower Target Y Limit", target: camera, propertyKey: "lowerTargetYLimit" })] }));
+    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;
@@ -12499,7 +12898,7 @@ const GeospatialCameraTransformProperties = (props) => {
     const pitchMax = limits?.pitchMax ?? Math.PI / 2;
     const radiusMin = limits?.radiusMin ?? 0;
     const radiusMax = limits?.radiusMax ?? Infinity;
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Yaw", description: `Horizontal rotation in ${useDegrees ? "degrees" : "radians"} (0 = north)`, target: camera, propertyKey: "yaw", min: toDisplayAngle(yawMin), max: toDisplayAngle(yawMax), step: toDisplayAngle(0.01), convertTo: (value) => toDisplayAngle(value, true), convertFrom: fromDisplayAngle }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Pitch", description: `Vertical angle in ${useDegrees ? "degrees" : "radians"} (0 = looking down, π/2 = horizon)`, target: camera, propertyKey: "pitch", min: toDisplayAngle(pitchMin), max: toDisplayAngle(pitchMax), step: toDisplayAngle(0.01), convertTo: (value) => toDisplayAngle(value, true), convertFrom: fromDisplayAngle }), radiusMax !== Infinity ? (jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Radius", description: "Distance from the center point.", target: camera, propertyKey: "radius", min: radiusMin, max: radiusMax, step: 0.01 })) : (jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Radius", description: "Distance from the center point.", target: camera, propertyKey: "radius", min: 0, step: 0.01 })), jsx(BoundProperty, { component: Vector3PropertyLine, label: "Center", description: "The point on the globe the camera orbits around.", target: camera, propertyKey: "center" }), jsx(BoundProperty, { component: Vector3PropertyLine, label: "Position", description: "The camera's position.", target: camera, propertyKey: "position" })] }));
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Yaw", description: `Horizontal rotation in ${useDegrees ? "degrees" : "radians"} (0 = north)`, target: camera, propertyKey: "yaw", min: toDisplayAngle(yawMin), max: toDisplayAngle(yawMax), step: toDisplayAngle(0.01), unit: useDegrees ? "°" : "rad", convertTo: (value) => toDisplayAngle(value, true), convertFrom: fromDisplayAngle }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Pitch", description: `Vertical angle in ${useDegrees ? "degrees" : "radians"} (0 = looking down, π/2 = horizon)`, target: camera, propertyKey: "pitch", min: toDisplayAngle(pitchMin), max: toDisplayAngle(pitchMax), step: toDisplayAngle(0.01), unit: useDegrees ? "°" : "rad", convertTo: (value) => toDisplayAngle(value, true), convertFrom: fromDisplayAngle }), radiusMax !== Infinity ? (jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Radius", description: "Distance from the center point.", target: camera, propertyKey: "radius", min: radiusMin, max: radiusMax, step: 0.01 })) : (jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Radius", description: "Distance from the center point.", target: camera, propertyKey: "radius", min: 0, step: 0.01 })), jsx(BoundProperty, { component: Vector3PropertyLine, label: "Center", description: "The point on the globe the camera orbits around.", target: camera, propertyKey: "center" }), jsx(BoundProperty, { component: Vector3PropertyLine, label: "Position", description: "The camera's position.", target: camera, propertyKey: "position" })] }));
 };
 const GeospatialCameraCollisionProperties = (props) => {
     const { camera } = props;
@@ -12576,7 +12975,7 @@ const CameraGeneralProperties = (props) => {
     const { camera } = props;
     const [toDisplayAngle, fromDisplayAngle, useDegrees] = useAngleConverters();
     const mode = useProperty(camera, "mode");
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Near Plane", description: "Anything closer than this will not be drawn.", target: camera, propertyKey: "minZ" }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Far Plane", description: "Anything further than this will not be drawn.", target: camera, propertyKey: "maxZ" }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Inertia", target: camera, propertyKey: "inertia", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: HexPropertyLine, label: "Layer Mask", target: camera, propertyKey: "layerMask" }), jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "Mode", options: CameraModes, target: camera, propertyKey: "mode" }), jsx(Collapse, { visible: mode === Camera.PERSPECTIVE_CAMERA, children: jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "FOV", description: `Field of view in ${useDegrees ? "degrees" : "radians"}`, target: camera, propertyKey: "fov", min: toDisplayAngle(0.1), max: toDisplayAngle(Math.PI), step: toDisplayAngle(0.01), convertTo: toDisplayAngle, convertFrom: fromDisplayAngle }) }), jsx(Collapse, { visible: mode === Camera.ORTHOGRAPHIC_CAMERA, children: jsxs("div", { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Left", target: camera, step: 0.1, propertyKey: "orthoLeft", nullable: true, defaultValue: 0 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Right", target: camera, step: 0.1, propertyKey: "orthoRight", nullable: true, defaultValue: 0 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Top", target: camera, step: 0.1, propertyKey: "orthoTop", nullable: true, defaultValue: 0 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Bottom", target: camera, step: 0.1, propertyKey: "orthoBottom", nullable: true, defaultValue: 0 })] }) })] }));
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Near Plane", description: "Anything closer than this will not be drawn.", target: camera, propertyKey: "minZ" }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Far Plane", description: "Anything further than this will not be drawn.", target: camera, propertyKey: "maxZ" }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Inertia", target: camera, propertyKey: "inertia", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: HexPropertyLine, label: "Layer Mask", target: camera, propertyKey: "layerMask" }), jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "Mode", options: CameraModes, target: camera, propertyKey: "mode" }), jsx(Collapse, { visible: mode === Camera.PERSPECTIVE_CAMERA, children: jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "FOV", description: `Field of view in ${useDegrees ? "degrees" : "radians"}`, target: camera, propertyKey: "fov", min: toDisplayAngle(0.1), max: toDisplayAngle(Math.PI), step: toDisplayAngle(0.01), unit: useDegrees ? "°" : "rad", convertTo: toDisplayAngle, convertFrom: fromDisplayAngle }) }), jsx(Collapse, { visible: mode === Camera.ORTHOGRAPHIC_CAMERA, children: jsxs("div", { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Left", target: camera, step: 0.1, propertyKey: "orthoLeft", nullable: true, defaultValue: 0 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Right", target: camera, step: 0.1, propertyKey: "orthoRight", nullable: true, defaultValue: 0 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Top", target: camera, step: 0.1, propertyKey: "orthoTop", nullable: true, defaultValue: 0 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Bottom", target: camera, step: 0.1, propertyKey: "orthoBottom", nullable: true, defaultValue: 0 })] }) })] }));
 };
 
 const FollowCameraTransformProperties = (props) => {
@@ -13295,7 +13694,7 @@ const Gradient = (props) => {
     // Only use compact mode when there are numeric values (spinbuttons) taking up space
     const hasNumericValues = !(gradient.value1 instanceof Color3 || gradient.value1 instanceof Color4) ||
         (gradient.value2 !== undefined && !(gradient.value2 instanceof Color3 || gradient.value2 instanceof Color4));
-    return (jsxs("div", { id: "gradientContainer", className: classes.container, children: [jsx("div", { className: gradient.value1 instanceof Color3 || gradient.value1 instanceof Color4 ? classes.colorWrapper : classes.valueWrapper, children: gradient.value1 instanceof Color3 || gradient.value1 instanceof Color4 ? (jsx(ColorPickerPopup, { value: gradient.value1, onChange: (color) => gradientChange({ ...gradient, value1: color }) })) : (jsx(SyncedSliderInput, { step: 0.01, value: gradient.value1, onChange: (val) => gradientChange({ ...gradient, value1: val }), compact: true })) }), gradient.value2 !== undefined && (jsx("div", { className: gradient.value2 instanceof Color3 || gradient.value2 instanceof Color4 ? classes.colorWrapper : classes.valueWrapper, children: gradient.value2 instanceof Color3 || gradient.value2 instanceof Color4 ? (jsx(ColorPickerPopup, { value: gradient.value2, onChange: (color) => gradientChange({ ...gradient, value2: color }) })) : (jsx(SyncedSliderInput, { step: 0.01, value: gradient.value2, onChange: (val) => gradientChange({ ...gradient, value2: val }), compact: true })) })), jsx("div", { className: classes.stepSliderWrapper, children: jsx(SyncedSliderInput, { notifyOnlyOnRelease: true, min: 0, max: 1, step: 0.01, value: gradient.step, onChange: (val) => gradientChange({ ...gradient, step: val }), compact: hasNumericValues, growSlider: !hasNumericValues }) })] }));
+    return (jsxs("div", { id: "gradientContainer", className: classes.container, children: [jsx("div", { className: gradient.value1 instanceof Color3 || gradient.value1 instanceof Color4 ? classes.colorWrapper : classes.valueWrapper, children: gradient.value1 instanceof Color3 || gradient.value1 instanceof Color4 ? (jsx(ColorPickerPopup, { value: gradient.value1, onChange: (color) => gradientChange({ ...gradient, value1: color }) })) : (jsx(SyncedSliderInput, { step: 0.01, precision: 2, value: gradient.value1, onChange: (val) => gradientChange({ ...gradient, value1: val }), compact: true })) }), gradient.value2 !== undefined && (jsx("div", { className: gradient.value2 instanceof Color3 || gradient.value2 instanceof Color4 ? classes.colorWrapper : classes.valueWrapper, children: gradient.value2 instanceof Color3 || gradient.value2 instanceof Color4 ? (jsx(ColorPickerPopup, { value: gradient.value2, onChange: (color) => gradientChange({ ...gradient, value2: color }) })) : (jsx(SyncedSliderInput, { step: 0.01, precision: 2, value: gradient.value2, onChange: (val) => gradientChange({ ...gradient, value2: val }), compact: true })) })), jsx("div", { className: classes.stepSliderWrapper, children: jsx(SyncedSliderInput, { notifyOnlyOnRelease: true, min: 0, max: 1, step: 0.01, precision: 2, value: gradient.step, onChange: (val) => gradientChange({ ...gradient, step: val }), compact: hasNumericValues, growSlider: !hasNumericValues }) })] }));
 };
 const FactorGradientCast = Gradient;
 const Color3GradientCast = Gradient;
@@ -14166,7 +14565,7 @@ const PBRBaseMaterialDebugProperties = (props) => {
 const SkyMaterialProperties = (props) => {
     const { material } = props;
     const [toDisplayAngle, fromDisplayAngle, useDegrees] = useAngleConverters();
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Azimuth", description: `Azimuth angle in ${useDegrees ? "degrees" : "radians"}`, target: material, propertyKey: "azimuth", min: toDisplayAngle(0), max: toDisplayAngle(Math.PI * 2), step: toDisplayAngle(0.001), convertTo: toDisplayAngle, convertFrom: fromDisplayAngle, docLink: "https://doc.babylonjs.com/toolsAndResources/assetLibraries/materialsLibrary/skyMat/#configuring-the-sky-material" }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Inclination", description: `Inclination angle in ${useDegrees ? "degrees" : "radians"}`, target: material, propertyKey: "inclination", min: toDisplayAngle(0), max: toDisplayAngle(Math.PI / 2), step: toDisplayAngle(0.001), convertTo: toDisplayAngle, convertFrom: fromDisplayAngle, docLink: "https://doc.babylonjs.com/toolsAndResources/assetLibraries/materialsLibrary/skyMat/#configuring-the-sky-material" }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Turbidity", description: "Atmospheric turbidity.", target: material, propertyKey: "turbidity", min: 0, max: 100, step: 0.1, docLink: "https://doc.babylonjs.com/toolsAndResources/assetLibraries/materialsLibrary/skyMat/#configuring-the-sky-material" }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Luminance", description: "Brightness of the sky (0 to 1).", target: material, propertyKey: "luminance", min: 0, max: 1, step: 0.001, docLink: "https://doc.babylonjs.com/toolsAndResources/assetLibraries/materialsLibrary/skyMat/#configuring-the-sky-material" }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Rayleigh", description: "Rayleigh scattering coefficient (0 to 4).", target: material, propertyKey: "rayleigh", min: 0, max: 4, step: 0.001, docLink: "https://doc.babylonjs.com/toolsAndResources/assetLibraries/materialsLibrary/skyMat/#configuring-the-sky-material" }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Mie Directional G", description: "Mie directional scattering (0 to 1).", target: material, propertyKey: "mieDirectionalG", min: 0, max: 1, step: 0.001, docLink: "https://doc.babylonjs.com/toolsAndResources/assetLibraries/materialsLibrary/skyMat/#configuring-the-sky-material" }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Mie Coefficient", description: "Mie scattering coefficient (0 to 1).", target: material, propertyKey: "mieCoefficient", min: 0, max: 1, step: 0.001, docLink: "https://doc.babylonjs.com/toolsAndResources/assetLibraries/materialsLibrary/skyMat/#configuring-the-sky-material" }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Distance", description: "Distance to the sky dome (0 to 1000 units).", target: material, propertyKey: "distance", min: 0, max: 1000, step: 0.1, docLink: "https://doc.babylonjs.com/toolsAndResources/assetLibraries/materialsLibrary/skyMat/#configuring-the-sky-material" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use Sun Pos", description: "Enable custom sun position.", target: material, propertyKey: "useSunPosition", docLink: "https://doc.babylonjs.com/toolsAndResources/assetLibraries/materialsLibrary/skyMat/#configuring-the-sky-material" }), jsx(BoundProperty, { component: Vector3PropertyLine, label: "Sun Position", description: "Custom sun position (Vector3).", target: material, propertyKey: "sunPosition", docLink: "https://doc.babylonjs.com/toolsAndResources/assetLibraries/materialsLibrary/skyMat/#configuring-the-sky-material" }), jsx(BoundProperty, { component: Vector3PropertyLine, label: "Camera Offset", description: "Offset for the camera (Vector3).", target: material, propertyKey: "cameraOffset", docLink: "https://doc.babylonjs.com/toolsAndResources/assetLibraries/materialsLibrary/skyMat/#keeping-the-horizon-relative-to-the-camera-elevation" })] }));
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Azimuth", description: `Azimuth angle in ${useDegrees ? "degrees" : "radians"}`, target: material, propertyKey: "azimuth", step: toDisplayAngle(0.001), unit: useDegrees ? "°" : "rad", convertTo: toDisplayAngle, convertFrom: fromDisplayAngle, docLink: "https://doc.babylonjs.com/toolsAndResources/assetLibraries/materialsLibrary/skyMat/#configuring-the-sky-material" }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Inclination", description: `Inclination angle in ${useDegrees ? "degrees" : "radians"}`, target: material, propertyKey: "inclination", min: toDisplayAngle(0), max: toDisplayAngle(Math.PI / 2), step: toDisplayAngle(0.001), unit: useDegrees ? "°" : "rad", convertTo: toDisplayAngle, convertFrom: fromDisplayAngle, docLink: "https://doc.babylonjs.com/toolsAndResources/assetLibraries/materialsLibrary/skyMat/#configuring-the-sky-material" }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Turbidity", description: "Atmospheric turbidity.", target: material, propertyKey: "turbidity", min: 0, max: 100, step: 0.1, docLink: "https://doc.babylonjs.com/toolsAndResources/assetLibraries/materialsLibrary/skyMat/#configuring-the-sky-material" }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Luminance", description: "Brightness of the sky (0 to 1).", target: material, propertyKey: "luminance", min: 0, max: 1, step: 0.001, docLink: "https://doc.babylonjs.com/toolsAndResources/assetLibraries/materialsLibrary/skyMat/#configuring-the-sky-material" }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Rayleigh", description: "Rayleigh scattering coefficient (0 to 4).", target: material, propertyKey: "rayleigh", min: 0, max: 4, step: 0.001, docLink: "https://doc.babylonjs.com/toolsAndResources/assetLibraries/materialsLibrary/skyMat/#configuring-the-sky-material" }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Mie Directional G", description: "Mie directional scattering (0 to 1).", target: material, propertyKey: "mieDirectionalG", min: 0, max: 1, step: 0.001, docLink: "https://doc.babylonjs.com/toolsAndResources/assetLibraries/materialsLibrary/skyMat/#configuring-the-sky-material" }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Mie Coefficient", description: "Mie scattering coefficient (0 to 1).", target: material, propertyKey: "mieCoefficient", min: 0, max: 1, step: 0.001, docLink: "https://doc.babylonjs.com/toolsAndResources/assetLibraries/materialsLibrary/skyMat/#configuring-the-sky-material" }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Distance", description: "Distance to the sky dome (0 to 1000 units).", target: material, propertyKey: "distance", min: 0, max: 1000, step: 0.1, docLink: "https://doc.babylonjs.com/toolsAndResources/assetLibraries/materialsLibrary/skyMat/#configuring-the-sky-material" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use Sun Pos", description: "Enable custom sun position.", target: material, propertyKey: "useSunPosition", docLink: "https://doc.babylonjs.com/toolsAndResources/assetLibraries/materialsLibrary/skyMat/#configuring-the-sky-material" }), jsx(BoundProperty, { component: Vector3PropertyLine, label: "Sun Position", description: "Custom sun position (Vector3).", target: material, propertyKey: "sunPosition", docLink: "https://doc.babylonjs.com/toolsAndResources/assetLibraries/materialsLibrary/skyMat/#configuring-the-sky-material" }), jsx(BoundProperty, { component: Vector3PropertyLine, label: "Camera Offset", description: "Offset for the camera (Vector3).", target: material, propertyKey: "cameraOffset", docLink: "https://doc.babylonjs.com/toolsAndResources/assetLibraries/materialsLibrary/skyMat/#keeping-the-horizon-relative-to-the-camera-elevation" })] }));
 };
 
 const StandardMaterialGeneralProperties = (props) => {
@@ -17336,7 +17735,7 @@ const SpriteGeneralProperties = (props) => {
 const SpriteTransformProperties = (props) => {
     const { sprite } = props;
     const [toDisplayAngle, fromDisplayAngle, useDegrees] = useAngleConverters();
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: Vector3PropertyLine, label: "Position", target: sprite, propertyKey: "position" }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Angle", description: `Rotation angle of the sprite in ${useDegrees ? "degrees" : "radians"}`, min: 0, max: toDisplayAngle(Math.PI * 2), step: toDisplayAngle(0.01), target: sprite, propertyKey: "angle", convertTo: toDisplayAngle, convertFrom: fromDisplayAngle }, "Angle"), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Width", description: "Width of the sprite (in world space units)", target: sprite, propertyKey: "width" }, "Width"), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Height", description: "Height of the sprite (in world space units)", target: sprite, propertyKey: "height" }, "Height")] }));
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: Vector3PropertyLine, label: "Position", target: sprite, propertyKey: "position" }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Angle", description: `Rotation angle of the sprite in ${useDegrees ? "degrees" : "radians"}`, step: toDisplayAngle(0.01), unit: useDegrees ? "°" : "rad", target: sprite, propertyKey: "angle", convertTo: toDisplayAngle, convertFrom: fromDisplayAngle }, "Angle"), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Width", description: "Width of the sprite (in world space units)", target: sprite, propertyKey: "width" }, "Width"), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Height", description: "Height of the sprite (in world space units)", target: sprite, propertyKey: "height" }, "Height")] }));
 };
 const SpriteAnimationProperties = (props) => {
     const { sprite } = props;
@@ -18930,7 +19329,7 @@ const Contrast = {
                 const handleExposureChange = (_, data) => {
                     setExposure(data.value);
                 };
-                return (jsxs("div", { className: classes.settingsContainer, children: [jsxs("div", { className: classes.sliderRow, children: [jsxs(Label, { children: ["Contrast: ", contrast] }), jsx(Slider, { min: -100, max: 100, value: contrast, onChange: handleContrastChange })] }), jsxs("div", { className: classes.sliderRow, children: [jsxs(Label, { children: ["Exposure: ", exposure] }), jsx(Slider, { min: -100, max: 100, value: exposure, onChange: handleExposureChange })] })] }));
+                return (jsxs("div", { className: classes.settingsContainer, children: [jsxs("div", { className: classes.sliderRow, children: [jsxs(Label, { children: ["Contrast: ", contrast] }), jsx(Slider$1, { min: -100, max: 100, value: contrast, onChange: handleContrastChange })] }), jsxs("div", { className: classes.sliderRow, children: [jsxs(Label, { children: ["Exposure: ", exposure] }), jsx(Slider$1, { min: -100, max: 100, value: exposure, onChange: handleExposureChange })] })] }));
             },
         };
     },
@@ -19152,7 +19551,7 @@ const Paintbrush = {
                 const handleWidthChange = (_, data) => {
                     setWidth(data.value);
                 };
-                return (jsx("div", { className: classes.settingsContainer, children: jsxs("div", { className: classes.sliderRow, children: [jsxs(Label, { children: ["Size: ", width] }), jsx(Slider, { min: 1, max: 100, value: width, onChange: handleWidthChange })] }) }));
+                return (jsx("div", { className: classes.settingsContainer, children: jsxs("div", { className: classes.sliderRow, children: [jsxs(Label, { children: ["Size: ", width] }), jsx(Slider$1, { min: 1, max: 100, value: width, onChange: handleWidthChange })] }) }));
             },
         };
     },
@@ -19397,7 +19796,7 @@ const TransformProperties = (props) => {
     const quatRotation = useQuaternionProperty(transform, "rotationQuaternion");
     const [useDegrees] = useSetting(UseDegreesSettingDescriptor);
     const [useEuler] = useSetting(UseEulerSettingDescriptor);
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: Vector3PropertyLine, label: "Position", target: transform, propertyKey: "position" }), quatRotation ? (jsx(Property, { component: QuaternionPropertyLine, label: "Rotation Quaternion", propertyPath: "rotationQuaternion", value: quatRotation, onChange: (val) => (transform.rotationQuaternion = val), useDegrees: useDegrees, useEuler: useEuler })) : (jsx(BoundProperty, { component: RotationVectorPropertyLine, label: "Rotation", target: transform, propertyKey: "rotation", useDegrees: useDegrees })), jsx(BoundProperty, { component: Vector3PropertyLine, label: "Scaling", target: transform, propertyKey: "scaling" })] }));
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: Vector3PropertyLine, label: "Position", target: transform, propertyKey: "position" }), quatRotation ? (jsx(Property, { component: QuaternionPropertyLine, label: "Rotation", propertyPath: "rotationQuaternion", value: quatRotation, onChange: (val) => (transform.rotationQuaternion = val), useDegrees: useDegrees, useEuler: useEuler })) : (jsx(BoundProperty, { component: RotationVectorPropertyLine, label: "Rotation", target: transform, propertyKey: "rotation", useDegrees: useDegrees })), jsx(BoundProperty, { component: Vector3PropertyLine, label: "Scaling", target: transform, propertyKey: "scaling", step: 0.1 })] }));
 };
 
 const TransformPropertiesServiceDefinition = {
@@ -19425,8 +19824,8 @@ const TransformPropertiesServiceDefinition = {
 
 const AnimationGroupExplorerServiceDefinition = {
     friendlyName: "Animation Group Explorer",
-    consumes: [SceneExplorerServiceIdentity, SceneContextIdentity],
-    factory: (sceneExplorerService, sceneContext) => {
+    consumes: [SceneExplorerServiceIdentity, SceneContextIdentity, WatcherServiceIdentity],
+    factory: (sceneExplorerService, sceneContext, watcherService) => {
         const scene = sceneContext.currentScene;
         if (!scene) {
             return undefined;
@@ -19439,11 +19838,7 @@ const AnimationGroupExplorerServiceDefinition = {
             getEntityDisplayInfo: (entity) => {
                 const namedEntity = entity instanceof AnimationGroup ? entity : entity.animation;
                 const onChangeObservable = new Observable();
-                const nameHookToken = InterceptProperty(namedEntity, "name", {
-                    afterSet: () => {
-                        onChangeObservable.notifyObservers();
-                    },
-                });
+                const nameHookToken = watcherService.watchProperty(namedEntity, "name", () => onChangeObservable.notifyObservers());
                 return {
                     get name() {
                         return namedEntity.name;
@@ -19509,8 +19904,8 @@ const AnimationGroupExplorerServiceDefinition = {
 
 const AtmosphereExplorerServiceDefinition = {
     friendlyName: "Atmosphere Explorer",
-    consumes: [SceneExplorerServiceIdentity, SceneContextIdentity],
-    factory: (sceneExplorerService, sceneContext) => {
+    consumes: [SceneExplorerServiceIdentity, SceneContextIdentity, WatcherServiceIdentity],
+    factory: (sceneExplorerService, sceneContext, watcherService) => {
         const scene = sceneContext.currentScene;
         if (!scene) {
             return undefined;
@@ -19521,11 +19916,7 @@ const AtmosphereExplorerServiceDefinition = {
             getRootEntities: () => (scene.getExternalData("atmosphere") ? [scene.getExternalData("atmosphere")] : []),
             getEntityDisplayInfo: (atmosphere) => {
                 const onChangeObservable = new Observable();
-                const nameHookToken = InterceptProperty(atmosphere, "name", {
-                    afterSet: () => {
-                        onChangeObservable.notifyObservers();
-                    },
-                });
+                const nameHookToken = watcherService.watchProperty(atmosphere, "name", () => onChangeObservable.notifyObservers());
                 return {
                     get name() {
                         return atmosphere.name;
@@ -19584,8 +19975,8 @@ const DisposableCommandServiceDefinition = {
 
 const EffectLayerExplorerServiceDefinition = {
     friendlyName: "Effect Layer Explorer",
-    consumes: [SceneExplorerServiceIdentity, SceneContextIdentity],
-    factory: (sceneExplorerService, sceneContext) => {
+    consumes: [SceneExplorerServiceIdentity, SceneContextIdentity, WatcherServiceIdentity],
+    factory: (sceneExplorerService, sceneContext, watcherService) => {
         const scene = sceneContext.currentScene;
         if (!scene) {
             return undefined;
@@ -19596,11 +19987,7 @@ const EffectLayerExplorerServiceDefinition = {
             getRootEntities: () => scene.effectLayers,
             getEntityDisplayInfo: (effectLayer) => {
                 const onChangeObservable = new Observable();
-                const nameHookToken = InterceptProperty(effectLayer, "name", {
-                    afterSet: () => {
-                        onChangeObservable.notifyObservers();
-                    },
-                });
+                const nameHookToken = watcherService.watchProperty(effectLayer, "name", () => onChangeObservable.notifyObservers());
                 return {
                     get name() {
                         return effectLayer.name;
@@ -19626,8 +20013,8 @@ const EffectLayerExplorerServiceDefinition = {
 
 const FrameGraphExplorerServiceDefinition = {
     friendlyName: "Frame Graph Explorer",
-    consumes: [SceneExplorerServiceIdentity, SceneContextIdentity],
-    factory: (sceneExplorerService, sceneContext) => {
+    consumes: [SceneExplorerServiceIdentity, SceneContextIdentity, WatcherServiceIdentity],
+    factory: (sceneExplorerService, sceneContext, watcherService) => {
         const scene = sceneContext.currentScene;
         if (!scene) {
             return undefined;
@@ -19638,11 +20025,7 @@ const FrameGraphExplorerServiceDefinition = {
             getRootEntities: () => scene.frameGraphs,
             getEntityDisplayInfo: (frameGraph) => {
                 const onChangeObservable = new Observable();
-                const nameHookToken = InterceptProperty(frameGraph, "name", {
-                    afterSet: () => {
-                        onChangeObservable.notifyObservers();
-                    },
-                });
+                const nameHookToken = watcherService.watchProperty(frameGraph, "name", () => onChangeObservable.notifyObservers());
                 return {
                     get name() {
                         return frameGraph.name;
@@ -19663,9 +20046,7 @@ const FrameGraphExplorerServiceDefinition = {
             order: 900 /* DefaultCommandsOrder.FrameGraphPlay */,
             getCommand: (frameGraph) => {
                 const onChangeObservable = new Observable();
-                const frameGraphHook = InterceptProperty(scene, "frameGraph", {
-                    afterSet: () => onChangeObservable.notifyObservers(),
-                });
+                const frameGraphHook = watcherService.watchProperty(scene, "frameGraph", () => onChangeObservable.notifyObservers());
                 return {
                     type: "toggle",
                     displayName: "Make Active",
@@ -19728,8 +20109,8 @@ function IsControl(entity) {
 }
 const GuiExplorerServiceDefinition = {
     friendlyName: "GUI Explorer",
-    consumes: [SceneExplorerServiceIdentity, SceneContextIdentity],
-    factory: (sceneExplorerService, sceneContext) => {
+    consumes: [SceneExplorerServiceIdentity, SceneContextIdentity, WatcherServiceIdentity],
+    factory: (sceneExplorerService, sceneContext, watcherService) => {
         const scene = sceneContext.currentScene;
         if (!scene) {
             return undefined;
@@ -19755,10 +20136,8 @@ const GuiExplorerServiceDefinition = {
                 const disposeActions = [];
                 const onChangeObservable = new Observable();
                 disposeActions.push(() => onChangeObservable.clear());
-                const nameHookToken = InterceptProperty(entity, "name", {
-                    afterSet: () => {
-                        onChangeObservable.notifyObservers();
-                    },
+                const nameHookToken = watcherService.watchProperty(entity, "name", () => {
+                    onChangeObservable.notifyObservers();
                 });
                 disposeActions.push(() => nameHookToken.dispose());
                 if (!IsAdvancedDynamicTexture(entity) && IsContainer(entity)) {
@@ -19815,9 +20194,7 @@ const GuiExplorerServiceDefinition = {
             order: 1000 /* DefaultCommandsOrder.GuiHighlight */,
             getCommand: (control) => {
                 const onChangeObservable = new Observable();
-                const showBoundingBoxHook = InterceptProperty(control, "isHighlighted", {
-                    afterSet: () => onChangeObservable.notifyObservers(),
-                });
+                const showBoundingBoxHook = watcherService.watchProperty(control, "isHighlighted", () => onChangeObservable.notifyObservers());
                 return {
                     type: "toggle",
                     get displayName() {
@@ -19873,8 +20250,8 @@ const GuiExplorerServiceDefinition = {
 
 const MaterialExplorerServiceDefinition = {
     friendlyName: "Material Explorer",
-    consumes: [SceneExplorerServiceIdentity, SceneContextIdentity],
-    factory: (sceneExplorerService, sceneContext) => {
+    consumes: [SceneExplorerServiceIdentity, SceneContextIdentity, WatcherServiceIdentity],
+    factory: (sceneExplorerService, sceneContext, watcherService) => {
         const scene = sceneContext.currentScene;
         if (!scene) {
             return undefined;
@@ -19885,11 +20262,7 @@ const MaterialExplorerServiceDefinition = {
             getRootEntities: () => [...scene.materials, ...scene.multiMaterials],
             getEntityDisplayInfo: (material) => {
                 const onChangeObservable = new Observable();
-                const nameHookToken = InterceptProperty(material, "name", {
-                    afterSet: () => {
-                        onChangeObservable.notifyObservers();
-                    },
-                });
+                const nameHookToken = watcherService.watchProperty(material, "name", () => onChangeObservable.notifyObservers());
                 return {
                     get name() {
                         return material.name;
@@ -19929,8 +20302,8 @@ const MaterialExplorerServiceDefinition = {
 
 const NodeExplorerServiceDefinition = {
     friendlyName: "Node Explorer",
-    consumes: [SceneExplorerServiceIdentity, SceneContextIdentity, GizmoServiceIdentity],
-    factory: (sceneExplorerService, sceneContext, gizmoService) => {
+    consumes: [SceneExplorerServiceIdentity, SceneContextIdentity, GizmoServiceIdentity, WatcherServiceIdentity],
+    factory: (sceneExplorerService, sceneContext, gizmoService, watcherService) => {
         const scene = sceneContext.currentScene;
         if (!scene) {
             return undefined;
@@ -19969,14 +20342,8 @@ const NodeExplorerServiceDefinition = {
             getEntityChildren: (node) => node.getChildren(),
             getEntityDisplayInfo: (node) => {
                 const onChangeObservable = new Observable();
-                const nameHookToken = InterceptProperty(node, "name", {
-                    afterSet: () => onChangeObservable.notifyObservers(),
-                });
-                const parentHookToken = InterceptProperty(node, "parent", {
-                    afterSet: () => {
-                        nodeMovedObservable.notifyObservers(node);
-                    },
-                });
+                const nameHookToken = watcherService.watchProperty(node, "name", () => onChangeObservable.notifyObservers());
+                const parentHookToken = watcherService.watchProperty(node, "parent", () => nodeMovedObservable.notifyObservers(node));
                 return {
                     get name() {
                         return node.name;
@@ -20039,9 +20406,7 @@ const NodeExplorerServiceDefinition = {
             order: 1000 /* DefaultCommandsOrder.MeshBoundingBox */,
             getCommand: (mesh) => {
                 const onChangeObservable = new Observable();
-                const showBoundingBoxHook = InterceptProperty(mesh, "showBoundingBox", {
-                    afterSet: () => onChangeObservable.notifyObservers(),
-                });
+                const showBoundingBoxHook = watcherService.watchProperty(mesh, "showBoundingBox", () => onChangeObservable.notifyObservers());
                 return {
                     type: "toggle",
                     get displayName() {
@@ -20067,9 +20432,7 @@ const NodeExplorerServiceDefinition = {
             order: 1100 /* DefaultCommandsOrder.MeshVisibility */,
             getCommand: (mesh) => {
                 const onChangeObservable = new Observable();
-                const isVisibleHook = InterceptProperty(mesh, "isVisible", {
-                    afterSet: () => onChangeObservable.notifyObservers(),
-                });
+                const isVisibleHook = watcherService.watchProperty(mesh, "isVisible", () => onChangeObservable.notifyObservers());
                 return {
                     type: "toggle",
                     get displayName() {
@@ -20221,8 +20584,8 @@ const NodeExplorerServiceDefinition = {
 
 const ParticleSystemExplorerServiceDefinition = {
     friendlyName: "Particle System Explorer",
-    consumes: [SceneExplorerServiceIdentity, SceneContextIdentity],
-    factory: (sceneExplorerService, sceneContext) => {
+    consumes: [SceneExplorerServiceIdentity, SceneContextIdentity, WatcherServiceIdentity],
+    factory: (sceneExplorerService, sceneContext, watcherService) => {
         const scene = sceneContext.currentScene;
         if (!scene) {
             return undefined;
@@ -20233,11 +20596,7 @@ const ParticleSystemExplorerServiceDefinition = {
             getRootEntities: () => scene.particleSystems,
             getEntityDisplayInfo: (particleSystem) => {
                 const onChangeObservable = new Observable();
-                const nameHookToken = InterceptProperty(particleSystem, "name", {
-                    afterSet: () => {
-                        onChangeObservable.notifyObservers();
-                    },
-                });
+                const nameHookToken = watcherService.watchProperty(particleSystem, "name", () => onChangeObservable.notifyObservers());
                 return {
                     get name() {
                         return particleSystem.name;
@@ -20277,8 +20636,8 @@ const ParticleSystemExplorerServiceDefinition = {
 
 const PostProcessExplorerServiceDefinition = {
     friendlyName: "Post Process Explorer",
-    consumes: [SceneExplorerServiceIdentity, SceneContextIdentity],
-    factory: (sceneExplorerService, sceneContext) => {
+    consumes: [SceneExplorerServiceIdentity, SceneContextIdentity, WatcherServiceIdentity],
+    factory: (sceneExplorerService, sceneContext, watcherService) => {
         const scene = sceneContext.currentScene;
         if (!scene) {
             return undefined;
@@ -20289,11 +20648,7 @@ const PostProcessExplorerServiceDefinition = {
             getRootEntities: () => scene.postProcesses,
             getEntityDisplayInfo: (postProcess) => {
                 const onChangeObservable = new Observable();
-                const nameHookToken = InterceptProperty(postProcess, "name", {
-                    afterSet: () => {
-                        onChangeObservable.notifyObservers();
-                    },
-                });
+                const nameHookToken = watcherService.watchProperty(postProcess, "name", () => onChangeObservable.notifyObservers());
                 return {
                     get name() {
                         return postProcess.name;
@@ -20351,8 +20706,8 @@ const RenderingPipelineExplorerServiceDefinition = {
 
 const SkeletonExplorerServiceDefinition = {
     friendlyName: "Skeleton Explorer",
-    consumes: [SceneExplorerServiceIdentity, SceneContextIdentity],
-    factory: (sceneExplorerService, sceneContext) => {
+    consumes: [SceneExplorerServiceIdentity, SceneContextIdentity, WatcherServiceIdentity],
+    factory: (sceneExplorerService, sceneContext, watcherService) => {
         const scene = sceneContext.currentScene;
         if (!scene) {
             return undefined;
@@ -20365,16 +20720,8 @@ const SkeletonExplorerServiceDefinition = {
             getEntityChildren: (skeletonOrBone) => skeletonOrBone.getChildren(),
             getEntityDisplayInfo: (skeletonOrBone) => {
                 const onChangeObservable = new Observable();
-                const nameHookToken = InterceptProperty(skeletonOrBone, "name", {
-                    afterSet: () => onChangeObservable.notifyObservers(),
-                });
-                const parentHookToken = skeletonOrBone instanceof Skeleton
-                    ? null
-                    : InterceptProperty(skeletonOrBone, "parent", {
-                        afterSet: () => {
-                            boneMovedObservable.notifyObservers(skeletonOrBone);
-                        },
-                    });
+                const nameHookToken = watcherService.watchProperty(skeletonOrBone, "name", () => onChangeObservable.notifyObservers());
+                const parentHookToken = skeletonOrBone instanceof Skeleton ? null : watcherService.watchProperty(skeletonOrBone, "parent", () => boneMovedObservable.notifyObservers(skeletonOrBone));
                 return {
                     get name() {
                         return skeletonOrBone.name;
@@ -20402,8 +20749,8 @@ const SkeletonExplorerServiceDefinition = {
 
 const SoundExplorerServiceDefinition = {
     friendlyName: "Sound Explorer",
-    consumes: [SceneExplorerServiceIdentity, SceneContextIdentity],
-    factory: (sceneExplorerService, sceneContext) => {
+    consumes: [SceneExplorerServiceIdentity, SceneContextIdentity, WatcherServiceIdentity],
+    factory: (sceneExplorerService, sceneContext, watcherService) => {
         const scene = sceneContext.currentScene;
         if (!scene) {
             return undefined;
@@ -20429,25 +20776,14 @@ const SoundExplorerServiceDefinition = {
         // If _mainSoundTrack is already defined, set up hooks immediately.
         hookMainSoundTrack(scene.mainSoundTrack);
         // Watch for _mainSoundTrack being set (it is lazily created by the mainSoundTrack getter in audioSceneComponent.ts).
-        const mainSoundTrackHook = InterceptProperty(scene, "_mainSoundTrack", {
-            afterSet: () => hookMainSoundTrack(scene._mainSoundTrack),
-        });
+        const mainSoundTrackHook = watcherService.watchProperty(scene, "_mainSoundTrack", () => hookMainSoundTrack(scene._mainSoundTrack));
         const sectionRegistration = sceneExplorerService.addSection({
             displayName: "Sounds",
             order: 1400 /* DefaultSectionsOrder.Sounds */,
             getRootEntities: () => scene.mainSoundTrack?.soundCollection ?? [],
             getEntityDisplayInfo: (sound) => {
                 const onChangeObservable = new Observable();
-                const displayNameHookToken = InterceptProperty(sound, "name", {
-                    afterSet: () => {
-                        onChangeObservable.notifyObservers();
-                    },
-                });
-                const nameHookToken = InterceptProperty(sound, "name", {
-                    afterSet: () => {
-                        onChangeObservable.notifyObservers();
-                    },
-                });
+                const nameHookToken = watcherService.watchProperty(sound, "name", () => onChangeObservable.notifyObservers());
                 return {
                     get name() {
                         return sound.name;
@@ -20455,7 +20791,6 @@ const SoundExplorerServiceDefinition = {
                     onChange: onChangeObservable,
                     dispose: () => {
                         nameHookToken.dispose();
-                        displayNameHookToken.dispose();
                         onChangeObservable.clear();
                     },
                 };
@@ -20479,8 +20814,8 @@ const SoundExplorerServiceDefinition = {
 
 const SpriteManagerExplorerServiceDefinition = {
     friendlyName: "Sprite Manager Explorer",
-    consumes: [SceneExplorerServiceIdentity, SceneContextIdentity],
-    factory: (sceneExplorerService, sceneContext) => {
+    consumes: [SceneExplorerServiceIdentity, SceneContextIdentity, WatcherServiceIdentity],
+    factory: (sceneExplorerService, sceneContext, watcherService) => {
         const scene = sceneContext.currentScene;
         if (!scene) {
             return undefined;
@@ -20492,9 +20827,7 @@ const SpriteManagerExplorerServiceDefinition = {
             getEntityChildren: (spriteEntity) => (spriteEntity instanceof Sprite ? [] : spriteEntity.sprites),
             getEntityDisplayInfo: (spriteEntity) => {
                 const onChangeObservable = new Observable();
-                const nameHookToken = InterceptProperty(spriteEntity, "name", {
-                    afterSet: () => onChangeObservable.notifyObservers(),
-                });
+                const nameHookToken = watcherService.watchProperty(spriteEntity, "name", () => onChangeObservable.notifyObservers());
                 return {
                     get name() {
                         return spriteEntity.name;
@@ -20552,8 +20885,8 @@ const SpriteManagerExplorerServiceDefinition = {
 
 const TextureExplorerServiceDefinition = {
     friendlyName: "Texture Explorer",
-    consumes: [SceneExplorerServiceIdentity, SceneContextIdentity],
-    factory: (sceneExplorerService, sceneContext) => {
+    consumes: [SceneExplorerServiceIdentity, SceneContextIdentity, WatcherServiceIdentity],
+    factory: (sceneExplorerService, sceneContext, watcherService) => {
         const scene = sceneContext.currentScene;
         if (!scene) {
             return undefined;
@@ -20564,16 +20897,8 @@ const TextureExplorerServiceDefinition = {
             getRootEntities: () => scene.textures.filter((texture) => texture.getClassName() !== "AdvancedDynamicTexture"),
             getEntityDisplayInfo: (texture) => {
                 const onChangeObservable = new Observable();
-                const displayNameHookToken = InterceptProperty(texture, "displayName", {
-                    afterSet: () => {
-                        onChangeObservable.notifyObservers();
-                    },
-                });
-                const nameHookToken = InterceptProperty(texture, "name", {
-                    afterSet: () => {
-                        onChangeObservable.notifyObservers();
-                    },
-                });
+                const displayNameHookToken = watcherService.watchProperty(texture, "displayName", () => onChangeObservable.notifyObservers());
+                const nameHookToken = watcherService.watchProperty(texture, "name", () => onChangeObservable.notifyObservers());
                 return {
                     get name() {
                         return texture.displayName || texture.name || `${texture.getClassName() || "Unnamed Texture"} (${texture.uniqueId})`;
@@ -21123,97 +21448,6 @@ const GLTFValidationServiceDefinition = {
     },
 };
 
-const HighlightSelectedEntitySettingDescriptor = {
-    key: "HighlightSelectedEntity",
-    defaultValue: true,
-};
-const HighlightServiceDefinition = {
-    friendlyName: "Highlight Service",
-    consumes: [SelectionServiceIdentity, SceneContextIdentity, SettingsStoreIdentity, ThemeServiceIdentity, GizmoServiceIdentity],
-    factory: (selectionService, sceneContext, settingsStore, themeService, gizmoService) => {
-        let outlineLayer = null;
-        let utilityLayer = null;
-        let currentScene = null;
-        let activeCameraObserver = null;
-        function disposeOutlineLayer() {
-            outlineLayer?.dispose();
-            outlineLayer = null;
-            utilityLayer?.dispose();
-            utilityLayer = null;
-            currentScene = null;
-        }
-        function getOrCreateOutlineLayer(scene) {
-            if (!outlineLayer || currentScene !== scene) {
-                disposeOutlineLayer();
-                utilityLayer = gizmoService.getUtilityLayer(scene);
-                outlineLayer = new SelectionOutlineLayer("InspectorSelectionOutline", utilityLayer.value.utilityLayerScene);
-                updateColor(outlineLayer);
-                currentScene = scene;
-            }
-            return outlineLayer;
-        }
-        function updateColor(outlineLayer) {
-            outlineLayer.outlineColor = Color3.FromHexString(themeService.theme.colorBrandForeground1);
-        }
-        function updateHighlight() {
-            const scene = sceneContext.currentScene;
-            const entity = selectionService.selectedEntity instanceof AbstractMesh && !(selectionService.selectedEntity instanceof GaussianSplattingMesh)
-                ? selectionService.selectedEntity
-                : null;
-            if (!entity || !settingsStore.readSetting(HighlightSelectedEntitySettingDescriptor) || !scene || !scene.activeCamera) {
-                disposeOutlineLayer();
-                return;
-            }
-            const layer = getOrCreateOutlineLayer(scene);
-            layer.clearSelection();
-            layer.addSelection(entity);
-        }
-        function watchActiveCamera(scene) {
-            activeCameraObserver?.remove();
-            activeCameraObserver = null;
-            if (scene) {
-                activeCameraObserver = scene.onActiveCameraChanged.add(updateHighlight);
-            }
-        }
-        // React to theme changes.
-        const themeObserver = themeService.onChanged.add(() => {
-            if (outlineLayer) {
-                updateColor(outlineLayer);
-            }
-        });
-        // React to selection changes.
-        const selectionObserver = selectionService.onSelectedEntityChanged.add(updateHighlight);
-        // React to scene changes.
-        const sceneObserver = sceneContext.currentSceneObservable.add(() => {
-            // Dispose the old layer when the scene changes.
-            disposeOutlineLayer();
-            watchActiveCamera(sceneContext.currentScene);
-            updateHighlight();
-        });
-        // React to setting changes.
-        const settingObserver = settingsStore.onChanged.add((setting) => {
-            if (setting === HighlightSelectedEntitySettingDescriptor.key) {
-                updateHighlight();
-            }
-        });
-        // Watch active camera on the initial scene.
-        watchActiveCamera(sceneContext.currentScene);
-        // Initial update.
-        updateHighlight();
-        return {
-            dispose: () => {
-                themeObserver.remove();
-                selectionObserver.remove();
-                sceneObserver.remove();
-                settingObserver.remove();
-                activeCameraObserver?.remove();
-                activeCameraObserver = null;
-                disposeOutlineLayer();
-            },
-        };
-    },
-};
-
 const PickingToolbar = (props) => {
     const { scene, selectEntity, gizmoService, ignoreBackfaces, highlightSelectedEntity, onHighlightSelectedEntityChange } = props;
     const meshDataCache = useMemo(() => new WeakMap(), [scene]);
@@ -21322,7 +21556,7 @@ const PickingServiceDefinition = {
             key: "Picking Service",
             verticalLocation: "top",
             horizontalLocation: "left",
-            suppressTeachingMoment: true,
+            teachingMoment: false,
             component: () => {
                 const scene = useObservableState(() => sceneContext.currentScene, sceneContext.currentSceneObservable);
                 const selectEntity = useCallback((entity) => (selectionService.selectedEntity = entity), []);
@@ -21378,7 +21612,11 @@ const UserFeedbackServiceDefinition = {
             key: "User Feedback",
             verticalLocation: "bottom",
             horizontalLocation: "right",
-            suppressTeachingMoment: true,
+            order: 100 /* DefaultToolbarItemOrder.Feedback */,
+            teachingMoment: {
+                title: "Feedback",
+                description: "Press this button to give feedback on Inspector v2 and help us prioritize new features and improvements!",
+            },
             component: () => {
                 return (jsx(Tooltip, { content: "Give Feedback on Inspector v2", children: jsx(Button, { appearance: "subtle", icon: PersonFeedbackRegular, onClick: () => window.open("https://forum.babylonjs.com/t/introducing-inspector-v2/60937", "_blank") }) }));
             },
@@ -21569,7 +21807,9 @@ function ShowInspector(scene, options = {}) {
         // Tools pane tab and related services.
         ToolsServiceDefinition, ExportServiceDefinition, GLTFAnimationImportServiceDefinition, GLTFLoaderOptionsServiceDefinition, GLTFValidationServiceDefinition, CaptureToolsDefinition, 
         // Settings pane tab and related services.
-        SettingsServiceDefinition, ShellSettingsServiceDefinition, 
+        SettingsServiceDefinition, WatcherSettingsServiceDefinition, ShellSettingsServiceDefinition, 
+        // Adds a button to refresh all properties manually (when watcher is in "manual" mode).
+        WatcherRefreshToolbarServiceDefinition, 
         // Tracks entity selection state (e.g. which Mesh or Material or other entity is currently selected in scene explorer and bound to the properties pane, etc.).
         SelectionServiceDefinition, 
         // Gizmos for manipulating objects in the scene.
@@ -21803,19 +22043,15 @@ function ConvertOptions(v1Options) {
         const { additionalNodes } = v1Options;
         const additionalNodesServiceDefinition = {
             friendlyName: "Additional Nodes (Backward Compatibility)",
-            consumes: [SceneExplorerServiceIdentity],
-            factory: (sceneExplorerService) => {
+            consumes: [SceneExplorerServiceIdentity, WatcherServiceIdentity],
+            factory: (sceneExplorerService, watcherService) => {
                 const sceneExplorerSectionRegistrations = additionalNodes.map((node) => sceneExplorerService.addSection({
                     displayName: node.name,
                     order: Number.MAX_SAFE_INTEGER,
                     getRootEntities: () => node.getContent(),
                     getEntityDisplayInfo: (entity) => {
                         const onChangeObservable = new Observable();
-                        const nameHookToken = InterceptProperty(entity, "name", {
-                            afterSet: () => {
-                                onChangeObservable.notifyObservers();
-                            },
-                        });
+                        const nameHookToken = watcherService.watchProperty(entity, "name", () => onChangeObservable.notifyObservers());
                         return {
                             get name() {
                                 return entity.name;
@@ -22406,5 +22642,5 @@ const TextAreaPropertyLine = (props) => {
 // Attach Inspector v2 to Scene.debugLayer as a side effect for back compat.
 AttachDebugLayer();
 
-export { useEventfulState as $, Accordion as A, Button as B, CheckboxPropertyLine as C, DebugServiceIdentity as D, Property as E, LinkToEntityPropertyLine as F, GizmoServiceIdentity as G, ErrorBoundary as H, Inspector as I, ExtensibleAccordion as J, Theme as K, LinkToEntity as L, MessageBar as M, NumberInputPropertyLine as N, PropertyContext as O, Popover as P, usePropertyChangedNotifier as Q, BuiltInsExtensionFeed as R, SpinButtonPropertyLine as S, TextInputPropertyLine as T, useVector3Property as U, Vector3PropertyLine as V, useColor3Property as W, useColor4Property as X, useQuaternionProperty as Y, MakePropertyHook as Z, useInterceptObservable as _, useProperty as a, Pane as a$, useObservableCollection as a0, useOrderedObservableCollection as a1, usePollingObservable as a2, useResource as a3, useAsyncResource as a4, useSetting as a5, useAngleConverters as a6, MakeTeachingMoment as a7, MakeDialogTeachingMoment as a8, useThemeMode as a9, Color3GradientComponent as aA, Color4GradientComponent as aB, ColorStepGradientComponent as aC, InfoLabel as aD, MakeLazyComponent as aE, List as aF, MaterialSelector as aG, NodeSelector as aH, PositionedPopover as aI, SearchBar as aJ, SearchBox as aK, SkeletonSelector as aL, SpinButton as aM, Switch as aN, SyncedSliderInput as aO, Textarea as aP, TextInput as aQ, TextureSelector as aR, ToastProvider as aS, ToggleButton as aT, Tooltip as aU, UploadButton as aV, ChildWindow as aW, FileUploadLine as aX, FactorGradientList as aY, Color3GradientList as aZ, Color4GradientList as a_, useTheme as aa, InterceptFunction as ab, GetPropertyDescriptor as ac, IsPropertyReadonly as ad, InterceptProperty as ae, ObservableCollection as af, ConstructorFactory as ag, SelectionServiceDefinition as ah, SettingsStore as ai, ShowInspector as aj, useKeyListener as ak, useKeyState as al, useEventListener as am, AccordionSectionItem as an, Checkbox as ao, Collapse as ap, ColorPickerPopup as aq, InputHexField as ar, InputHsvField as as, ComboBox as at, DraggableLine as au, Dropdown as av, NumberDropdown as aw, StringDropdown as ax, EntitySelector as ay, FactorGradientComponent as az, ShellServiceIdentity as b, TextureUpload as b0, BooleanBadgePropertyLine as b1, Color3PropertyLine as b2, Color4PropertyLine as b3, ComboBoxPropertyLine as b4, HexPropertyLine as b5, LinkPropertyLine as b6, PropertyLine as b7, LineContainer as b8, PlaceholderPropertyLine as b9, StringifiedPropertyLine as ba, SwitchPropertyLine as bb, SyncedSliderPropertyLine as bc, TextAreaPropertyLine as bd, TextPropertyLine as be, RotationVectorPropertyLine as bf, QuaternionPropertyLine as bg, Vector2PropertyLine as bh, Vector4PropertyLine as bi, SceneContextIdentity as c, SelectionServiceIdentity as d, useObservableState as e, AccordionSection as f, ButtonLine as g, ToolsServiceIdentity as h, useExtensionManager as i, MakePopoverTeachingMoment as j, TeachingMoment as k, Link as l, SidePaneContainer as m, PropertiesServiceIdentity as n, SceneExplorerServiceIdentity as o, SettingsServiceIdentity as p, StatsServiceIdentity as q, ThemeServiceIdentity as r, SettingsStoreIdentity as s, ConvertOptions as t, useToast as u, AttachDebugLayer as v, DetachDebugLayer as w, NumberDropdownPropertyLine as x, StringDropdownPropertyLine as y, BoundProperty as z };
-//# sourceMappingURL=index-Cmd13UXt.js.map
+export { useObservableCollection as $, Accordion as A, Button as B, CheckboxPropertyLine as C, DebugServiceIdentity as D, ErrorBoundary as E, ExtensibleAccordion as F, GizmoServiceIdentity as G, Theme as H, Inspector as I, TeachingMoment as J, PropertyContext as K, LinkToEntity as L, MessageBar as M, NumberInputPropertyLine as N, usePropertyChangedNotifier as O, Popover as P, BuiltInsExtensionFeed as Q, useVector3Property as R, SpinButtonPropertyLine as S, TextInputPropertyLine as T, useColor3Property as U, Vector3PropertyLine as V, useColor4Property as W, useQuaternionProperty as X, MakePropertyHook as Y, useInterceptObservable as Z, useEventfulState as _, useProperty as a, Pane as a$, useOrderedObservableCollection as a0, usePollingObservable as a1, useResource as a2, useAsyncResource as a3, useSetting as a4, useAngleConverters as a5, MakeTeachingMoment as a6, MakeDialogTeachingMoment as a7, MakePopoverTeachingMoment as a8, useThemeMode as a9, Color3GradientComponent as aA, Color4GradientComponent as aB, ColorStepGradientComponent as aC, InfoLabel as aD, MakeLazyComponent as aE, List as aF, MaterialSelector as aG, NodeSelector as aH, PositionedPopover as aI, SearchBar as aJ, SearchBox as aK, SkeletonSelector as aL, SpinButton as aM, Switch as aN, SyncedSliderInput as aO, Textarea as aP, TextInput as aQ, TextureSelector as aR, ToastProvider as aS, ToggleButton as aT, Tooltip as aU, UploadButton as aV, ChildWindow as aW, FileUploadLine as aX, FactorGradientList as aY, Color3GradientList as aZ, Color4GradientList as a_, useTheme as aa, InterceptFunction as ab, GetPropertyDescriptor as ac, IsPropertyReadonly as ad, InterceptProperty as ae, ObservableCollection as af, ConstructorFactory as ag, SelectionServiceDefinition as ah, SettingsStore as ai, ShowInspector as aj, useKeyListener as ak, useKeyState as al, useEventListener as am, AccordionSectionItem as an, Checkbox as ao, Collapse as ap, ColorPickerPopup as aq, InputHexField as ar, InputHsvField as as, ComboBox as at, DraggableLine as au, Dropdown as av, NumberDropdown as aw, StringDropdown as ax, EntitySelector as ay, FactorGradientComponent as az, ShellServiceIdentity as b, TextureUpload as b0, BooleanBadgePropertyLine as b1, Color3PropertyLine as b2, Color4PropertyLine as b3, ComboBoxPropertyLine as b4, HexPropertyLine as b5, LinkPropertyLine as b6, PropertyLine as b7, LineContainer as b8, PlaceholderPropertyLine as b9, StringifiedPropertyLine as ba, SwitchPropertyLine as bb, SyncedSliderPropertyLine as bc, TextAreaPropertyLine as bd, TextPropertyLine as be, RotationVectorPropertyLine as bf, QuaternionPropertyLine as bg, Vector2PropertyLine as bh, Vector4PropertyLine as bi, SceneContextIdentity as c, SelectionServiceIdentity as d, useObservableState as e, AccordionSection as f, ButtonLine as g, ToolsServiceIdentity as h, useExtensionManager as i, Link as j, SidePaneContainer as k, PropertiesServiceIdentity as l, SceneExplorerServiceIdentity as m, SettingsServiceIdentity as n, StatsServiceIdentity as o, ThemeServiceIdentity as p, SettingsStoreIdentity as q, ConvertOptions as r, AttachDebugLayer as s, DetachDebugLayer as t, useToast as u, NumberDropdownPropertyLine as v, StringDropdownPropertyLine as w, BoundProperty as x, Property as y, LinkToEntityPropertyLine as z };
+//# sourceMappingURL=index-BvYg0Psk.js.map