@babylonjs/inspector 8.51.2 → 8.52.1

package/lib/{index-DrQrky1o.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, RendererProvider, createDOMRenderer, 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;
@@ -1258,9 +1274,9 @@ function useAccordionSectionItemState(props) {
         }
         prevItemIdRef.current = itemId;
     }, [itemId, sectionCtx?.sectionId]);
-    // Register item and detect duplicates
+    // Register item and detect duplicates (skip nested items, as children of other AccordionSectionItem should not participate in pin/hide/search).
     useEffect(() => {
-        if (!accordionCtx || !itemUniqueId) {
+        if (!accordionCtx || !itemUniqueId || isNested) {
             return;
         }
         const { registeredItemIds } = accordionCtx;
@@ -1272,7 +1288,7 @@ function useAccordionSectionItemState(props) {
         return () => {
             registeredItemIds.delete(itemUniqueId);
         };
-    }, [accordionCtx, itemUniqueId, itemId, itemLabel, sectionCtx?.sectionId]);
+    }, [accordionCtx, itemUniqueId, itemId, itemLabel, sectionCtx?.sectionId, isNested]);
     // If no context, static item, or nested, return undefined
     if (!accordionCtx || staticItem) {
         return undefined;
@@ -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,15 +1673,15 @@ 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((prev) => {
-            const enabled = !prev;
+        setChecked((prevChecked) => {
+            const enabled = !prevChecked;
             onChange(enabled);
             return enabled;
         });
-    }, [setChecked]);
+    }, [onChange]);
     useEffect(() => {
         setChecked(props.value);
     }, [props.value]);
@@ -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." }) }));
 };
@@ -2752,22 +2768,9 @@ const ChildWindow = (props) => {
             body.style.padding = "0";
             body.style.display = "flex";
             body.style.overflow = "hidden";
-            const applyWindowState = () => {
-                // Setup the window state, including creating a Fluent/Griffel "renderer" for managing runtime styles/classes in the child window.
-                setWindowState({ mountNode: body, renderer: createDOMRenderer(childWindow.document) });
-                onOpenChange?.(true);
-            };
-            // Once the child window document is ready, setup the window state which will trigger another effect that renders into the child window.
-            if (childWindow.document.readyState === "complete") {
-                applyWindowState();
-            }
-            else {
-                const onChildWindowLoad = () => {
-                    applyWindowState();
-                };
-                childWindow.addEventListener("load", onChildWindowLoad, { once: true });
-                disposeActions.push(() => childWindow.removeEventListener("load", onChildWindowLoad));
-            }
+            // Setup the window state, including creating a Fluent/Griffel "renderer" for managing runtime styles/classes in the child window.
+            setWindowState({ mountNode: body, renderer: createDOMRenderer(childWindow.document) });
+            onOpenChange?.(true);
             // When the child window is closed for any reason, transition back to a closed state.
             const onChildWindowUnload = () => {
                 setWindowState(undefined);
@@ -2909,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",
@@ -3112,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, {}),
                             } }) }) }) })] }));
 };
@@ -3147,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);
@@ -3249,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).
@@ -3344,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.
@@ -3579,7 +3586,7 @@ const SettingsServiceDefinition = {
             horizontalLocation: "right",
             verticalLocation: "top",
             order: 500,
-            suppressTeachingMoment: true,
+            teachingMoment: false,
             content: () => {
                 const sections = useOrderedObservableCollection(sectionsCollection);
                 const sectionContent = useObservableCollection(sectionContentCollection);
@@ -3640,7 +3647,7 @@ const SelectionServiceDefinition = {
                 selectedEntityObservable.notifyObservers();
                 if (item) {
                     const disposable = item;
-                    if (disposable.dispose) {
+                    if (typeof disposable.dispose === "function") {
                         disposedHook = InterceptFunction(disposable, "dispose", { afterCall: () => setSelectedItem(null) });
                     }
                 }
@@ -3685,7 +3692,7 @@ const PropertiesServiceDefinition = {
             horizontalLocation: "right",
             verticalLocation: "top",
             order: 100,
-            suppressTeachingMoment: true,
+            teachingMoment: false,
             keepMounted: true,
             content: () => {
                 const sections = useOrderedObservableCollection(sectionsCollection);
@@ -4005,7 +4012,7 @@ function useSceneExplorerDragDrop(options) {
 
 const SyntheticUniqueIds = new WeakMap();
 function GetEntityId(entity) {
-    if (entity.uniqueId !== undefined) {
+    if ("uniqueId" in entity && typeof entity.uniqueId === "number") {
         return entity.uniqueId;
     }
     let id = SyntheticUniqueIds.get(entity);
@@ -4014,6 +4021,13 @@ function GetEntityId(entity) {
     }
     return id;
 }
+function IsEntityHidden(entity) {
+    return ("reservedDataStore" in entity &&
+        typeof entity.reservedDataStore === "object" &&
+        entity.reservedDataStore &&
+        "hidden" in entity.reservedDataStore &&
+        entity.reservedDataStore.hidden === true);
+}
 function GetEntitySection(entityItem) {
     let current = entityItem;
     while (current.type === "entity") {
@@ -4082,7 +4096,7 @@ function CoerceEntityArray(entities, sort) {
     }
     return entities;
 }
-const useStyles$L = makeStyles({
+const useStyles$M = makeStyles({
     rootDiv: {
         flex: 1,
         overflow: "hidden",
@@ -4190,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(() => {
@@ -4214,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(() => {
@@ -4330,8 +4344,8 @@ 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 { sections, entityCommandProviders, sectionCommandProviders, scene, selectedEntity } = props;
+    const classes = useStyles$M();
+    const { sections, entityCommandProviders, sectionCommandProviders, scene, selectedEntity = null } = props;
     const [openItems, setOpenItems] = useState(new Set());
     const [sceneVersion, setSceneVersion] = useState(0);
     const scrollViewRef = useRef(null);
@@ -4400,7 +4414,7 @@ const SceneExplorer = (props) => {
             scene: scene,
         };
         for (const section of sections) {
-            const rootEntities = section.getRootEntities().filter((entity) => !entity.reservedDataStore?.hidden);
+            const rootEntities = section.getRootEntities().filter((entity) => !IsEntityHidden(entity));
             const sectionTreeItem = {
                 type: "section",
                 sectionName: section.displayName,
@@ -4432,7 +4446,7 @@ const SceneExplorer = (props) => {
             (treeItem) => {
                 if (section.getEntityChildren) {
                     const children = section.getEntityChildren(treeItem.entity);
-                    return children.filter((child) => !child.reservedDataStore?.hidden).map((child) => createEntityTreeItemData(child, treeItem));
+                    return children.filter((child) => !IsEntityHidden(child)).map((child) => createEntityTreeItemData(child, treeItem));
                 }
                 return null;
             }, 
@@ -4623,7 +4637,7 @@ const SceneExplorerServiceDefinition = {
             icon: CubeTreeRegular,
             horizontalLocation: "left",
             verticalLocation: "top",
-            suppressTeachingMoment: true,
+            teachingMoment: false,
             keepMounted: true,
             content: () => {
                 const sections = useOrderedObservableCollection(sectionsCollection);
@@ -4784,7 +4798,7 @@ const DebugServiceDefinition = {
             horizontalLocation: "right",
             verticalLocation: "top",
             order: 200,
-            suppressTeachingMoment: true,
+            teachingMoment: false,
             content: () => {
                 const sections = useOrderedObservableCollection(sectionsCollection);
                 const sectionContent = useObservableCollection(sectionContentCollection);
@@ -5953,7 +5967,7 @@ class CanvasGraphService {
     }
 }
 
-const useStyles$K = makeStyles({
+const useStyles$L = makeStyles({
     canvas: {
         flexGrow: 1,
         width: "100%",
@@ -5962,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) {
@@ -6016,101 +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 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 [value, setValue] = useState(props.value ?? 0);
     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 precision = Math.min(4, Math.max(0, CalculatePrecision(step))); // Cap precision at 4 to avoid wild numbers
+    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 (props.value !== lastCommittedValue.current) {
+        if (!isDragging && props.value !== lastCommittedValue.current) {
             lastCommittedValue.current = props.value;
-            setValue(props.value); // Update local state when props.value changes
+            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);
+    }, [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;
+        }
+    }, [step]);
+    const handleIconPointerMove = useCallback((e) => {
+        if (!isDragging) {
+            return;
         }
-        else if (event.key === "Shift") {
-            setIsFocusedShiftKeyPressed(true);
+        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 committed = commitEditText(event.currentTarget.value);
+            if (committed !== undefined) {
+                inputRef.current?.blur();
+            }
+        }
+        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));
         }
         HandleKeyDown(event);
-    };
-    const handleKeyUp = (event) => {
-        event.stopPropagation(); // Prevent event propagation
-        if (event.key !== "Enter") {
-            if (event.key === "Alt") {
-                setIsFocusedAltKeyPressed(false);
-            }
-            else if (event.key === "Shift") {
-                setIsFocusedShiftKeyPressed(false);
-            }
-            // 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 currVal = ((val) => {
-                try {
-                    return Number(Function(`"use strict";return (${val})`)());
-                }
-                catch {
-                    return NaN;
-                }
-            })(event.target.value);
-            setValue(currVal);
-            tryCommitValue(currVal);
+    }, [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 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: precision, displayValue: `${value.toFixed(precision)}${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) => {
@@ -6792,7 +6913,7 @@ const StatsServiceDefinition = {
             horizontalLocation: "right",
             verticalLocation: "top",
             order: 300,
-            suppressTeachingMoment: true,
+            teachingMoment: false,
             content: () => {
                 const sections = useOrderedObservableCollection(sectionsCollection);
                 const sectionContent = useObservableCollection(sectionContentCollection);
@@ -6881,7 +7002,7 @@ const ToolsServiceDefinition = {
                     horizontalLocation: "right",
                     verticalLocation: "top",
                     order: 400,
-                    suppressTeachingMoment: true,
+                    teachingMoment: false,
                     content: () => {
                         const sections = useOrderedObservableCollection(sectionsCollection);
                         const sectionContent = useObservableCollection(sectionContentCollection);
@@ -6899,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") => {
@@ -7003,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;
         }
@@ -7159,146 +7603,40 @@ const GizmoServiceDefinition = {
                 sceneObserver.remove();
                 selectionObserver.remove();
                 destroyGizmoManager();
-                gizmoModeObservable.clear();
-                coordinatesModeObservable.clear();
-                cameraGizmoObservable.clear();
-            },
-        };
-    },
-};
-
-const BabylonWebResources = {
-    homepage: "https://www.babylonjs.com",
-    repository: "https://github.com/BabylonJS/Babylon.js",
-    bugs: "https://github.com/BabylonJS/Babylon.js/issues",
-};
-/**
- * Well-known default built in extensions for the Inspector.
- */
-const DefaultInspectorExtensionFeed = new BuiltInsExtensionFeed("Inspector", [
-    {
-        name: "Quick Creation Tools (Preview)",
-        description: "Adds a new panel for easy creation of various Babylon assets. This is a WIP extension...expect changes!",
-        keywords: ["creation", "tools"],
-        ...BabylonWebResources,
-        author: { name: "Babylon.js", forumUserName: "" },
-        getExtensionModuleAsync: async () => await import('./quickCreateToolsService-BuEys230.js'),
-    },
-    {
-        name: "Reflector",
-        description: "Connects to the Reflector Bridge for real-time scene synchronization with the Babylon.js Sandbox.",
-        keywords: ["reflector", "bridge", "sync", "sandbox", "tools"],
-        ...BabylonWebResources,
-        author: { name: "Babylon.js", forumUserName: "" },
-        getExtensionModuleAsync: async () => await import('./reflectorService-Dwsb8ijf.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 })] })] }));
+                gizmoModeObservable.clear();
+                coordinatesModeObservable.clear();
+                cameraGizmoObservable.clear();
+            },
+        };
+    },
 };
 
+const BabylonWebResources = {
+    homepage: "https://www.babylonjs.com",
+    repository: "https://github.com/BabylonJS/Babylon.js",
+    bugs: "https://github.com/BabylonJS/Babylon.js/issues",
+};
 /**
- * Renders a simple wrapper around the SyncedSliderInput
- * @param props
- * @returns
+ * Well-known default built in extensions for the Inspector.
  */
-const SyncedSliderPropertyLine = forwardRef((props, ref) => {
-    SyncedSliderPropertyLine.displayName = "SyncedSliderPropertyLine";
-    const { label, description, ...sliderProps } = props;
-    return (jsx(PropertyLine, { ref: ref, ...props, children: jsx(SyncedSliderInput, { ...sliderProps }) }));
-});
+const DefaultInspectorExtensionFeed = new BuiltInsExtensionFeed("Inspector", [
+    {
+        name: "Quick Creation Tools (Preview)",
+        description: "Adds a new panel for easy creation of various Babylon assets. This is a WIP extension...expect changes!",
+        keywords: ["creation", "tools"],
+        ...BabylonWebResources,
+        author: { name: "Babylon.js", forumUserName: "" },
+        getExtensionModuleAsync: async () => await import('./quickCreateToolsService-DHfs_EZ6.js'),
+    },
+    {
+        name: "Reflector",
+        description: "Connects to the Reflector Bridge for real-time scene synchronization with the Babylon.js Sandbox.",
+        keywords: ["reflector", "bridge", "sync", "sandbox", "tools"],
+        ...BabylonWebResources,
+        author: { name: "Babylon.js", forumUserName: "" },
+        getExtensionModuleAsync: async () => await import('./reflectorService-DEPuGTAZ.js'),
+    },
+]);
 
 /**
  * Reusable component which renders a color property line containing a label, colorPicker popout, and expandable RGBA values
@@ -7334,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
@@ -7402,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);
@@ -7431,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;
@@ -7946,7 +8260,7 @@ const ThemeSelectorServiceDefinition = {
             key: "ThemeSelector",
             horizontalLocation: "right",
             verticalLocation: "top",
-            suppressTeachingMoment: true,
+            teachingMoment: false,
             order: -300,
             component: () => {
                 const classes = useStyles$E();
@@ -8011,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 () => {
@@ -8022,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),
                         };
                     },
                 });
@@ -8044,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-Dj1XtRzF.js');
+                    const { ExtensionListServiceDefinition } = await import('./extensionsListService-Duej2zkq.js');
                     await serviceContainer.addServiceAsync(ExtensionListServiceDefinition);
                 }
                 // Register all external services (that make up a unique tool).
@@ -8111,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;
@@ -8195,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,
@@ -8215,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);
@@ -8245,8 +8661,7 @@ const CurveEditorProvider = (props) => {
     const [activeAnimations, setActiveAnimations] = useState([]);
     const [activeChannels, setActiveChannels] = useState({});
     const [activeKeyPoints, setActiveKeyPoints] = useState(null);
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const [mainKeyPoint, _setMainKeyPoint] = useState(null);
+    const [mainKeyPoint, setMainKeyPoint] = useState(null);
     const [activeFrame, setActiveFrame] = useState(0);
     const [fromKey, setFromKey] = useState(0);
     const [toKey, setToKey] = useState(100);
@@ -8498,6 +8913,7 @@ const CurveEditorProvider = (props) => {
         setReferenceMaxFrame,
         setFocusedInput,
         setActiveKeyPoints,
+        setMainKeyPoint,
         setActiveChannels,
         play,
         stop,
@@ -8616,12 +9032,16 @@ const TopBar = () => {
         });
         const onActiveKeyPointChangedObserver = observables.onActiveKeyPointChanged.add(() => {
             const numKeys = state.activeKeyPoints?.length || 0;
-            // TODO: Properly type KeyPointComponent to access curve.animation
-            const numAnims = numKeys;
-            const frameEnabled = (numKeys === 1 && numAnims === 1) || (numKeys > 1 && numAnims > 1);
+            const numAnims = state.activeKeyPoints ? new Set(state.activeKeyPoints.map((kp) => kp.curve.animation.uniqueId)).size : 0;
+            const hasActiveQuaternion = state.activeKeyPoints?.some((kp) => kp.curve.animation.dataType === Animation.ANIMATIONTYPE_QUATERNION) ?? false;
+            const frameEnabled = ((numKeys === 1 && numAnims === 1) || (numKeys > 1 && numAnims > 1)) && !hasActiveQuaternion;
             setFrameControlEnabled(frameEnabled);
-            setValueControlEnabled(numKeys > 0);
-            // Don't reset values here - they are set by onFrameSet/onValueSet observers
+            setValueControlEnabled(numKeys > 0 && !hasActiveQuaternion);
+            // Reset values when no keys are selected
+            if (numKeys === 0) {
+                setKeyFrameValue(null);
+                setKeyValue(null);
+            }
         });
         return () => {
             observables.onFrameSet.remove(onFrameSetObserver);
@@ -8938,6 +9358,7 @@ const useStyles$x = makeStyles({
         display: "flex",
         flexDirection: "column",
         gap: tokens.spacingVerticalM,
+        minWidth: "150px",
     },
     header: {
         display: "flex",
@@ -8973,13 +9394,16 @@ const useStyles$x = makeStyles({
 const ANIMATION_TYPES = ["Float", "Vector2", "Vector3", "Quaternion", "Color3", "Color4"];
 const LOOP_MODES = ["Cycle", "Relative", "Relative from current", "Constant"];
 const MODES = ["List", "Custom"];
+const ModeOptions = MODES.map((m) => ({ label: m, value: m }));
+const AnimationTypeOptions = ANIMATION_TYPES.map((t) => ({ label: t, value: t }));
+const LoopModeOptions = LOOP_MODES.map((lm) => ({ label: lm, value: lm }));
 /**
  * Panel for adding new animations
  * @returns The add animation panel component
  */
 const AddAnimationPanel = ({ onClose }) => {
     const styles = useStyles$x();
-    const { state, observables } = useCurveEditor();
+    const { state, actions, observables } = useCurveEditor();
     const [name, setName] = useState("");
     const [mode, setMode] = useState("List");
     const [customProperty, setCustomProperty] = useState("");
@@ -9184,11 +9608,15 @@ const AddAnimationPanel = ({ onClose }) => {
                 state.target.animations = [...state.target.animations, animation];
             }
         }
-        // Close first so AnimationList mounts, then notify
+        // Auto-select the newly created animation
+        actions.setActiveAnimations([animation]);
+        actions.resetAllActiveChannels();
+        // Close panel, then notify so listeners (e.g. AnimationList) can react
         onClose();
         observables.onAnimationsLoaded.notifyObservers();
-    }, [name, currentProperty, currentType, loopMode, fps, minFrame, maxFrame, state, observables, onClose]);
-    return (jsxs("div", { className: styles.root, children: [jsx("div", { className: styles.header, children: jsx("div", { className: styles.title, children: "Add Animation" }) }), jsxs("div", { className: styles.form, children: [jsxs("div", { className: styles.row, children: [jsx(Label, { children: "Display Name" }), jsx(Input, { value: name, onChange: (_, data) => setName(data.value), placeholder: "Animation name" })] }), jsxs("div", { className: styles.row, children: [jsx(Label, { children: "Mode" }), jsx(Dropdown$1, { value: mode, selectedOptions: [mode], onOptionSelect: (_, data) => setMode(data.optionValue), disabled: properties.length === 0, children: MODES.map((m) => (jsx(Option, { value: m, children: m }, m))) })] }), jsxs("div", { className: styles.row, children: [jsx(Label, { children: "Property" }), isCustomMode ? (jsx(Input, { value: customProperty, onChange: (_, data) => setCustomProperty(data.value), placeholder: "e.g., position, rotation, scaling" })) : (jsx(Dropdown$1, { value: selectedProperty, selectedOptions: [selectedProperty], onOptionSelect: (_, data) => setSelectedProperty(data.optionValue), children: properties.map((prop) => (jsx(Option, { value: prop, children: prop }, prop))) }))] }), jsxs("div", { className: styles.row, children: [jsx(Label, { children: "Type" }), isCustomMode ? (jsx(Dropdown$1, { value: animationType, selectedOptions: [animationType], onOptionSelect: (_, data) => setAnimationType(data.optionValue), children: ANIMATION_TYPES.map((type) => (jsx(Option, { value: type, children: type }, type))) })) : (jsx("div", { className: styles.typeDisplay, children: inferredType }))] }), jsxs("div", { className: styles.row, children: [jsx(Label, { children: "Loop Mode" }), jsx(Dropdown$1, { value: loopMode, selectedOptions: [loopMode], onOptionSelect: (_, data) => setLoopMode(data.optionValue), children: LOOP_MODES.map((lm) => (jsx(Option, { value: lm, children: lm }, lm))) })] })] }), jsxs("div", { className: styles.buttons, children: [jsx(Button, { appearance: "primary", onClick: createAnimation, disabled: !isValid, label: "Create" }), jsx(Button, { appearance: "subtle", onClick: onClose, label: "Cancel" })] })] }));
+        observables.onActiveAnimationChanged.notifyObservers({});
+    }, [name, currentProperty, currentType, loopMode, fps, minFrame, maxFrame, state.target, actions, observables, onClose]);
+    return (jsxs("div", { className: styles.root, children: [jsx("div", { className: styles.header, children: jsx("div", { className: styles.title, children: "Add Animation" }) }), jsxs("div", { className: styles.form, children: [jsxs("div", { className: styles.row, children: [jsx(Label, { children: "Display Name" }), jsx(TextInput, { value: name, onChange: setName })] }), jsx("div", { className: styles.row, children: jsx(StringDropdown, { value: mode, onChange: (val) => setMode(val), options: ModeOptions, disabled: properties.length === 0, infoLabel: { label: "Mode" } }) }), jsxs("div", { className: styles.row, children: [jsx(Label, { children: "Property" }), isCustomMode ? (jsx(TextInput, { value: customProperty, onChange: setCustomProperty })) : (jsx(StringDropdown, { value: selectedProperty, onChange: (val) => setSelectedProperty(val), options: properties.map((p) => ({ label: p, value: p })) }))] }), jsxs("div", { className: styles.row, children: [jsx(Label, { children: "Type" }), isCustomMode ? (jsx(StringDropdown, { value: animationType, onChange: (val) => setAnimationType(val), options: AnimationTypeOptions })) : (jsx("div", { className: styles.typeDisplay, children: inferredType }))] }), jsx("div", { className: styles.row, children: jsx(StringDropdown, { value: loopMode, onChange: (val) => setLoopMode(val), options: LoopModeOptions, infoLabel: { label: "Loop Mode" } }) })] }), jsxs("div", { className: styles.buttons, children: [jsx(Button, { appearance: "primary", onClick: createAnimation, disabled: !isValid, label: "Create" }), jsx(Button, { appearance: "subtle", onClick: onClose, label: "Cancel" })] })] }));
 };
 
 const useStyles$w = makeStyles({
@@ -9616,6 +10044,7 @@ class CurveData {
     constructor(color, animation, property, tangentBuilder, setDefaultInTangent, setDefaultOutTangent) {
         this.keys = [];
         this.onDataUpdatedObservable = new Observable();
+        this.siblings = [];
         this.color = color;
         this.animation = animation;
         this.property = property;
@@ -9809,6 +10238,13 @@ class CurveData {
         const originalKey = this.animation.getKeys()[keyId];
         originalKey.frame = frame;
         this.keys[keyId].frame = frame;
+        // Sync frame to all sibling curves (same animation, different property)
+        for (const sibling of this.siblings) {
+            if (sibling !== this && sibling.keys[keyId]) {
+                sibling.keys[keyId].frame = frame;
+                sibling.onDataUpdatedObservable.notifyObservers();
+            }
+        }
         this.onDataUpdatedObservable.notifyObservers();
     }
     updateKeyValue(keyId, value) {
@@ -9833,6 +10269,8 @@ CurveData.TangentLength = 50;
  */
 const Curve = ({ curve, convertX, convertY }) => {
     const isQuaternion = curve.animation.dataType === Animation.ANIMATIONTYPE_QUATERNION;
+    // Derive path data, recomputing whenever the curve's key data changes
+    const pathData = useObservableState(useCallback(() => curve.getPathData(convertX, convertY), [curve, convertX, convertY]), curve.onDataUpdatedObservable);
     // Path style - same as v1
     const pathStyle = {
         stroke: curve.color,
@@ -9843,7 +10281,7 @@ const Curve = ({ curve, convertX, convertY }) => {
         pathStyle["strokeDasharray"] = "5";
         pathStyle["strokeOpacity"] = "0.5";
     }
-    return (jsx("svg", { style: { cursor: "pointer", overflow: "auto" }, children: jsx("path", { d: curve.getPathData(convertX, convertY), style: pathStyle }) }));
+    return (jsx("svg", { style: { cursor: "pointer", overflow: "auto" }, children: jsx("path", { d: pathData, style: pathStyle }) }));
 };
 
 // Inline SVG data URIs for key point icons
@@ -9921,6 +10359,9 @@ const KeyPointComponent = (props) => {
         if (isSelected()) {
             // This keypoint is directly selected
             setSelectedState(SelectionState.Selected);
+            // Notify frame/value observers so the top bar displays correct values (like v1's _onActiveKeyPointChanged)
+            observables.onFrameSet.notifyObservers(invertX(currentXRef.current));
+            observables.onValueSet.notifyObservers(invertY(currentYRef.current));
         }
         else if (state.activeKeyPoints) {
             // Check if a sibling (same keyId, different curve, same animation) is selected
@@ -9943,8 +10384,8 @@ const KeyPointComponent = (props) => {
             setSelectedState(SelectionState.None);
             setTangentSelectedIndex(-1);
         }
-    }, [state.activeKeyPoints, state.mainKeyPoint, curve, keyId, isSelected, curvesMatch]);
-    // Extract slope from a tangent vector (matches v1's _extractSlope)
+    }, [state.activeKeyPoints, state.mainKeyPoint, curve, keyId, isSelected, curvesMatch, observables, invertX, invertY]);
+    // Extract slope from a tangent vector
     const extractSlope = useCallback((vec, storedLength, isIn) => {
         const keys = curve.keys;
         const keyValue = keys[keyId].value;
@@ -9960,10 +10401,13 @@ const KeyPointComponent = (props) => {
         const currentPosition = vec.clone();
         currentPosition.normalize();
         currentPosition.scaleInPlace(storedLength);
-        const value = isIn ? keyValue - invertY(currentPosition.y + currentY) : invertY(currentPosition.y + currentY) - keyValue;
-        const frame = isIn ? keyFrame - invertX(currentPosition.x + currentX) : invertX(currentPosition.x + currentX) - keyFrame;
+        // Use refs for current position to avoid stale closure during drag
+        const cx = currentXRef.current;
+        const cy = currentYRef.current;
+        const value = isIn ? keyValue - invertY(currentPosition.y + cy) : invertY(currentPosition.y + cy) - keyValue;
+        const frame = isIn ? keyFrame - invertX(currentPosition.x + cx) : invertX(currentPosition.x + cx) - keyFrame;
         return value / frame;
-    }, [curve, keyId, invertX, invertY, currentX, currentY]);
+    }, [curve, keyId, invertX, invertY]);
     // Tangent operations
     const flattenTangent = useCallback(() => {
         // First update the interpolation mode to NONE without triggering observers
@@ -9982,6 +10426,8 @@ const KeyPointComponent = (props) => {
                 curve.updateOutTangentFromControlPoint(keyId, 0);
             }
         }
+        // Notify curve to re-render path
+        curve.onDataUpdatedObservable.notifyObservers();
         setForceUpdate((v) => v + 1);
     }, [keyId, tangentSelectedIndex, curve]);
     const linearTangent = useCallback(() => {
@@ -10095,6 +10541,46 @@ const KeyPointComponent = (props) => {
             observables.onSelectionRectangleMoved.remove(observer);
         };
     }, [observables, curve, keyId, actions]);
+    // Handle frame manually entered from top bar
+    useEffect(() => {
+        const observer = observables.onFrameManuallyEntered.add((newValue) => {
+            if (selectedState === SelectionState.None) {
+                return;
+            }
+            let newX = convertX(newValue);
+            // Clamp to neighbors
+            const previousX = getPreviousX();
+            const nextX = getNextX();
+            if (previousX !== null) {
+                newX = Math.max(previousX, newX);
+            }
+            if (nextX !== null) {
+                newX = Math.min(nextX, newX);
+            }
+            const frame = invertX(newX);
+            currentXRef.current = newX;
+            setCurrentX(newX);
+            onFrameValueChanged(frame);
+        });
+        return () => {
+            observables.onFrameManuallyEntered.remove(observer);
+        };
+    }, [observables, selectedState, convertX, invertX, getPreviousX, getNextX, onFrameValueChanged]);
+    // Handle value manually entered from top bar
+    useEffect(() => {
+        const observer = observables.onValueManuallyEntered.add((newValue) => {
+            if (selectedState !== SelectionState.Selected) {
+                return;
+            }
+            const newY = convertY(newValue);
+            currentYRef.current = newY;
+            setCurrentY(newY);
+            onKeyValueChanged(newValue);
+        });
+        return () => {
+            observables.onValueManuallyEntered.remove(observer);
+        };
+    }, [observables, selectedState, convertY, onKeyValueChanged]);
     // Handle select all keys
     useEffect(() => {
         const observer = observables.onSelectAllKeys.add(() => {
@@ -10112,6 +10598,60 @@ const KeyPointComponent = (props) => {
             observables.onSelectAllKeys.remove(observer);
         };
     }, [observables, actions, curve, keyId]);
+    // Track active key points count in a ref to avoid stale closure in handlePointerMove
+    const activeKeyPointsRef = useRef(state.activeKeyPoints);
+    activeKeyPointsRef.current = state.activeKeyPoints;
+    // Multi-point movement: store offset from main key point
+    const offsetToMain = useRef({ x: 0, y: 0 });
+    const isMainKeyPoint = useRef(false);
+    // When a main key point is set (multi-selection), store offset from it
+    useEffect(() => {
+        const observer = observables.onMainKeyPointSet.add((info) => {
+            // Check if WE are the main key point
+            if (info.curve === curve && info.keyId === keyId) {
+                isMainKeyPoint.current = true;
+                return;
+            }
+            isMainKeyPoint.current = false;
+            // Store offset from the main key point position
+            offsetToMain.current = {
+                x: currentXRef.current - info.x,
+                y: currentYRef.current - info.y,
+            };
+        });
+        return () => {
+            observables.onMainKeyPointSet.remove(observer);
+        };
+    }, [observables, curve, keyId]);
+    // When the main key point moves, follow it with offset
+    useEffect(() => {
+        const observer = observables.onMainKeyPointMoved.add((pos) => {
+            // Skip if we ARE the main key point
+            if (isMainKeyPoint.current) {
+                return;
+            }
+            if (selectedState === SelectionState.None) {
+                return;
+            }
+            // Move frame for selected + siblings (but not first key)
+            if (keyId !== 0) {
+                const newX = pos.x + offsetToMain.current.x;
+                currentXRef.current = newX;
+                setCurrentX(newX);
+                onFrameValueChanged(invertX(newX));
+            }
+            // Move value only for directly selected points
+            if (selectedState === SelectionState.Selected) {
+                const newY = pos.y + offsetToMain.current.y;
+                currentYRef.current = newY;
+                setCurrentY(newY);
+                onKeyValueChanged(invertY(newY));
+            }
+        });
+        return () => {
+            observables.onMainKeyPointMoved.remove(observer);
+        };
+    }, [observables, curve, keyId, selectedState, invertX, invertY, onFrameValueChanged, onKeyValueChanged]);
     // Mouse/pointer handlers
     const handlePointerDown = useCallback((evt) => {
         const animationType = curve.animation.dataType;
@@ -10143,29 +10683,64 @@ const KeyPointComponent = (props) => {
         lockY.current = false;
         accumulatedX.current = 0;
         accumulatedY.current = 0;
-        // Handle selection
+        // Handle selection (matches v1's _select logic)
         if (!evt.ctrlKey) {
             if (!isSelected()) {
+                // Not in list, not multi-select: clear and add self
                 actions.setActiveKeyPoints([{ curve, keyId }]);
+                // Single selection → no mainKeyPoint (like v1)
+                actions.setMainKeyPoint(null);
+            }
+            else {
+                // Already in list, not multi-select:
+                // If >1 selected, promote this to mainKeyPoint (DON'T clear others — v1 behavior)
+                // If only 1, mainKeyPoint = null
+                if (state.activeKeyPoints && state.activeKeyPoints.length > 1) {
+                    const info = { x: currentXRef.current, y: currentYRef.current, curve, keyId };
+                    actions.setMainKeyPoint({ curve, keyId });
+                    queueMicrotask(() => {
+                        observables.onMainKeyPointSet.notifyObservers(info);
+                    });
+                }
+                else {
+                    actions.setMainKeyPoint(null);
+                }
             }
         }
         else {
-            actions.setActiveKeyPoints((prev) => {
-                const current = prev || [];
-                const matchesCurve = (kp) => kp.curve.animation.uniqueId === curve.animation.uniqueId && kp.curve.property === curve.property && kp.keyId === keyId;
-                const isCurrentlySelected = current.some(matchesCurve);
-                if (isCurrentlySelected) {
+            // Ctrl-click: toggle selection
+            if (isSelected()) {
+                // Remove from list
+                actions.setActiveKeyPoints((prev) => {
+                    const current = prev || [];
+                    const matchesCurve = (kp) => kp.curve.animation.uniqueId === curve.animation.uniqueId && kp.curve.property === curve.property && kp.keyId === keyId;
                     return current.filter((kp) => !matchesCurve(kp));
+                });
+                actions.setMainKeyPoint(null);
+            }
+            else {
+                // Add to list
+                actions.setActiveKeyPoints((prev) => {
+                    const current = prev || [];
+                    return [...current, { curve, keyId }];
+                });
+                // Multi selection is now engaged
+                if ((state.activeKeyPoints?.length ?? 0) + 1 > 1) {
+                    const info = { x: currentXRef.current, y: currentYRef.current, curve, keyId };
+                    actions.setMainKeyPoint({ curve, keyId });
+                    queueMicrotask(() => {
+                        observables.onMainKeyPointSet.notifyObservers(info);
+                    });
                 }
                 else {
-                    return [...current, { curve, keyId }];
+                    actions.setMainKeyPoint(null);
                 }
-            });
+            }
         }
         observables.onActiveKeyPointChanged.notifyObservers();
         // Capture pointer for drag
         evt.target.setPointerCapture(evt.pointerId);
-    }, [curve, keyId, actions, observables, isSelected]);
+    }, [curve, keyId, actions, observables, isSelected, state.activeKeyPoints]);
     const handlePointerMove = useCallback((evt) => {
         if (!pointerIsDown.current || selectedState !== SelectionState.Selected) {
             return;
@@ -10226,6 +10801,13 @@ const KeyPointComponent = (props) => {
             currentYRef.current = newY;
             setCurrentX(newX);
             setCurrentY(newY);
+            // Notify other selected key points to follow (multi-point movement)
+            const activeKeyPoints = activeKeyPointsRef.current;
+            if (activeKeyPoints && activeKeyPoints.length > 1) {
+                requestAnimationFrame(() => {
+                    observables.onMainKeyPointMoved.notifyObservers({ x: newX, y: newY });
+                });
+            }
         }
         else {
             // Tangent manipulation
@@ -10435,6 +11017,129 @@ const useStyles$t = makeStyles({
         pointerEvents: "none",
     },
 });
+/**
+ * Evaluates active animations and produces CurveData instances with extracted key values.
+ * @param activeAnimations - The currently active animations to evaluate
+ * @param activeChannels - The currently active channels to determine which curves to show for multi-channel animations
+ * @returns An array of CurveData instances representing the curves to display in the graph
+ */
+function EvaluateKeys(activeAnimations, activeChannels) {
+    const result = [];
+    // Helper to set default tangents across all curves
+    const setDefaultInTangent = (keyId) => {
+        for (const curve of result) {
+            curve.storeDefaultInTangent(keyId);
+        }
+    };
+    const setDefaultOutTangent = (keyId) => {
+        for (const curve of result) {
+            curve.storeDefaultOutTangent(keyId);
+        }
+    };
+    for (const animation of activeAnimations) {
+        const keys = animation.getKeys();
+        if (keys.length === 0) {
+            continue;
+        }
+        const channelColor = activeChannels[animation.uniqueId];
+        const curvesToAdd = [];
+        // Create curves based on data type
+        switch (animation.dataType) {
+            case Animation.ANIMATIONTYPE_FLOAT:
+                curvesToAdd.push(new CurveData(channelColor || DefaultCurveColor, animation));
+                break;
+            case Animation.ANIMATIONTYPE_VECTOR2:
+                if (!channelColor || channelColor === ChannelColors.X) {
+                    curvesToAdd.push(new CurveData(ChannelColors.X, animation, "x", () => Vector2.Zero(), setDefaultInTangent, setDefaultOutTangent));
+                }
+                if (!channelColor || channelColor === ChannelColors.Y) {
+                    curvesToAdd.push(new CurveData(ChannelColors.Y, animation, "y", () => Vector2.Zero(), setDefaultInTangent, setDefaultOutTangent));
+                }
+                break;
+            case Animation.ANIMATIONTYPE_VECTOR3:
+                if (!channelColor || channelColor === ChannelColors.X) {
+                    curvesToAdd.push(new CurveData(ChannelColors.X, animation, "x", () => Vector3.Zero(), setDefaultInTangent, setDefaultOutTangent));
+                }
+                if (!channelColor || channelColor === ChannelColors.Y) {
+                    curvesToAdd.push(new CurveData(ChannelColors.Y, animation, "y", () => Vector3.Zero(), setDefaultInTangent, setDefaultOutTangent));
+                }
+                if (!channelColor || channelColor === ChannelColors.Z) {
+                    curvesToAdd.push(new CurveData(ChannelColors.Z, animation, "z", () => Vector3.Zero(), setDefaultInTangent, setDefaultOutTangent));
+                }
+                break;
+            case Animation.ANIMATIONTYPE_COLOR3:
+                if (!channelColor || channelColor === ColorChannelColors.R) {
+                    curvesToAdd.push(new CurveData(ColorChannelColors.R, animation, "r", () => Color3.Black(), setDefaultInTangent, setDefaultOutTangent));
+                }
+                if (!channelColor || channelColor === ColorChannelColors.G) {
+                    curvesToAdd.push(new CurveData(ColorChannelColors.G, animation, "g", () => Color3.Black(), setDefaultInTangent, setDefaultOutTangent));
+                }
+                if (!channelColor || channelColor === ColorChannelColors.B) {
+                    curvesToAdd.push(new CurveData(ColorChannelColors.B, animation, "b", () => Color3.Black(), setDefaultInTangent, setDefaultOutTangent));
+                }
+                break;
+            case Animation.ANIMATIONTYPE_COLOR4:
+                if (!channelColor || channelColor === ColorChannelColors.R) {
+                    curvesToAdd.push(new CurveData(ColorChannelColors.R, animation, "r", () => new Color4(), setDefaultInTangent, setDefaultOutTangent));
+                }
+                if (!channelColor || channelColor === ColorChannelColors.G) {
+                    curvesToAdd.push(new CurveData(ColorChannelColors.G, animation, "g", () => new Color4(), setDefaultInTangent, setDefaultOutTangent));
+                }
+                if (!channelColor || channelColor === ColorChannelColors.B) {
+                    curvesToAdd.push(new CurveData(ColorChannelColors.B, animation, "b", () => new Color4(), setDefaultInTangent, setDefaultOutTangent));
+                }
+                if (!channelColor || channelColor === ColorChannelColors.A) {
+                    curvesToAdd.push(new CurveData(ColorChannelColors.A, animation, "a", () => new Color4(), setDefaultInTangent, setDefaultOutTangent));
+                }
+                break;
+            case Animation.ANIMATIONTYPE_QUATERNION:
+                if (!channelColor || channelColor === ChannelColors.X) {
+                    curvesToAdd.push(new CurveData(ChannelColors.X, animation, "x", () => new Quaternion(), setDefaultInTangent, setDefaultOutTangent));
+                }
+                if (!channelColor || channelColor === ChannelColors.Y) {
+                    curvesToAdd.push(new CurveData(ChannelColors.Y, animation, "y", () => new Quaternion(), setDefaultInTangent, setDefaultOutTangent));
+                }
+                if (!channelColor || channelColor === ChannelColors.Z) {
+                    curvesToAdd.push(new CurveData(ChannelColors.Z, animation, "z", () => new Quaternion(), setDefaultInTangent, setDefaultOutTangent));
+                }
+                if (!channelColor || channelColor === ChannelColors.W) {
+                    curvesToAdd.push(new CurveData(ChannelColors.W, animation, "w", () => new Quaternion(), setDefaultInTangent, setDefaultOutTangent));
+                }
+                break;
+        }
+        ExtractValuesFromKeys(keys, curvesToAdd);
+        // Wire up siblings so frame changes sync across all curves for the same animation
+        for (const curve of curvesToAdd) {
+            curve.siblings = curvesToAdd;
+        }
+        result.push(...curvesToAdd);
+    }
+    return result;
+}
+/**
+ * Extracts key values, tangents, and interpolation data from animation keys into CurveData instances.
+ * @param keys - The animation keys to extract data from
+ * @param curves - CurveData to push changes to
+ */
+function ExtractValuesFromKeys(keys, curves) {
+    for (const key of keys) {
+        const lockedTangent = key.lockedTangent ?? true;
+        for (const curve of curves) {
+            const prop = curve.property;
+            const value = prop ? key.value[prop] : key.value;
+            const inTangent = prop ? key.inTangent?.[prop] : key.inTangent;
+            const outTangent = prop ? key.outTangent?.[prop] : key.outTangent;
+            curve.keys.push({
+                frame: key.frame,
+                value,
+                inTangent,
+                outTangent,
+                lockedTangent,
+                interpolation: key.interpolation,
+            });
+        }
+    }
+}
 /**
  * Main graph area for displaying and editing animation curves
  * @returns The graph component
@@ -10498,6 +11203,33 @@ const Graph = ({ width, height }) => {
                         value: value,
                         lockedTangent: true,
                     };
+                    // Compute Hermite 1st-derivative tangents so the curve shape is preserved (like v1)
+                    if (leftKey?.outTangent !== undefined && rightKey?.inTangent !== undefined) {
+                        const invFrameDelta = 1.0 / (rightKey.frame - leftKey.frame);
+                        const cutTime = (currentFrame - leftKey.frame) * invFrameDelta;
+                        let derivative = null;
+                        switch (currentAnimation.dataType) {
+                            case Animation.ANIMATIONTYPE_FLOAT:
+                                derivative = Scalar.Hermite1stDerivative(leftKey.value * invFrameDelta, leftKey.outTangent, rightKey.value * invFrameDelta, rightKey.inTangent, cutTime);
+                                break;
+                            case Animation.ANIMATIONTYPE_VECTOR2:
+                                derivative = Vector2.Hermite1stDerivative(leftKey.value.scale(invFrameDelta), leftKey.outTangent, rightKey.value.scale(invFrameDelta), rightKey.inTangent, cutTime);
+                                break;
+                            case Animation.ANIMATIONTYPE_VECTOR3:
+                                derivative = Vector3.Hermite1stDerivative(leftKey.value.scale(invFrameDelta), leftKey.outTangent, rightKey.value.scale(invFrameDelta), rightKey.inTangent, cutTime);
+                                break;
+                            case Animation.ANIMATIONTYPE_COLOR3:
+                                derivative = Color3.Hermite1stDerivative(leftKey.value.scale(invFrameDelta), leftKey.outTangent, rightKey.value.scale(invFrameDelta), rightKey.inTangent, cutTime);
+                                break;
+                            case Animation.ANIMATIONTYPE_COLOR4:
+                                derivative = Color4.Hermite1stDerivative(leftKey.value.scale(invFrameDelta), leftKey.outTangent, rightKey.value.scale(invFrameDelta), rightKey.inTangent, cutTime);
+                                break;
+                        }
+                        if (derivative !== null) {
+                            newKey.inTangent = derivative;
+                            newKey.outTangent = derivative.clone ? derivative.clone() : derivative;
+                        }
+                    }
                     keys.splice(indexToAdd + 1, 0, newKey);
                 }
                 currentAnimation.setKeys(keys);
@@ -10532,6 +11264,9 @@ const Graph = ({ width, height }) => {
                 const keys = animation.getKeys();
                 const sortedIndices = Array.from(keyIndices).sort((a, b) => b - a); // Sort descending
                 for (const index of sortedIndices) {
+                    if (index === 0 || index === keys.length - 1) {
+                        continue; // Cannot delete first or last key
+                    }
                     if (index >= 0 && index < keys.length) {
                         keys.splice(index, 1);
                     }
@@ -10544,119 +11279,31 @@ const Graph = ({ width, height }) => {
             observables.onActiveAnimationChanged.notifyObservers({});
         });
         // Note: Tangent operations (flatten, linear, break, unify, step) are handled by KeyPointComponent
-        // Each selected keypoint subscribes to the observables and handles its own tangent updates (like v1)
+        // Each selected keypoint subscribes to the observables and handles its own tangent updates
         return () => {
             observables.onCreateOrUpdateKeyPointRequired.remove(onCreateOrUpdateKeyPointRequired);
             observables.onFrameRequired.remove(onFrameRequired);
             observables.onDeleteKeyActiveKeyPoints.remove(onDeleteKeyActiveKeyPoints);
         };
     }, [observables, state.activeAnimations, state.activeFrame, state.activeKeyPoints, actions]);
-    const curves = useMemo(() => {
-        const result = [];
-        // Helper to set default tangents across all curves (like v1)
-        const setDefaultInTangent = (keyId) => {
-            for (const curve of result) {
-                curve.storeDefaultInTangent(keyId);
-            }
+    // Invalidation counter — incremented when keys are added/deleted so curves recompute
+    const [curveVersion, invalidateCurves] = useReducer((c) => c + 1, 0);
+    useEffect(() => {
+        const observer = observables.onActiveAnimationChanged.add(() => invalidateCurves());
+        return () => {
+            observables.onActiveAnimationChanged.remove(observer);
         };
-        const setDefaultOutTangent = (keyId) => {
-            for (const curve of result) {
-                curve.storeDefaultOutTangent(keyId);
-            }
+    }, [observables]);
+    const curves = useMemo(() => EvaluateKeys(state.activeAnimations, state.activeChannels), [state.activeAnimations, state.activeChannels, curveVersion]);
+    // Re-render when any curve's key data is mutated (e.g. sibling frame sync)
+    // so key point positions stay in sync with their curve paths
+    const [, invalidateKeyPoints] = useReducer((c) => c + 1, 0);
+    useEffect(() => {
+        const observers = curves.map((curve) => curve.onDataUpdatedObservable.add(invalidateKeyPoints));
+        return () => {
+            curves.forEach((curve, i) => curve.onDataUpdatedObservable.remove(observers[i]));
         };
-        for (const animation of state.activeAnimations) {
-            const keys = animation.getKeys();
-            if (keys.length === 0) {
-                continue;
-            }
-            const channelColor = state.activeChannels[animation.uniqueId];
-            const curvesToAdd = [];
-            // Create curves based on data type (like v1's _evaluateKeys)
-            switch (animation.dataType) {
-                case Animation.ANIMATIONTYPE_FLOAT:
-                    curvesToAdd.push(new CurveData(channelColor || DefaultCurveColor, animation));
-                    break;
-                case Animation.ANIMATIONTYPE_VECTOR2:
-                    if (!channelColor || channelColor === ChannelColors.X) {
-                        curvesToAdd.push(new CurveData(ChannelColors.X, animation, "x", () => Vector2.Zero(), setDefaultInTangent, setDefaultOutTangent));
-                    }
-                    if (!channelColor || channelColor === ChannelColors.Y) {
-                        curvesToAdd.push(new CurveData(ChannelColors.Y, animation, "y", () => Vector2.Zero(), setDefaultInTangent, setDefaultOutTangent));
-                    }
-                    break;
-                case Animation.ANIMATIONTYPE_VECTOR3:
-                    if (!channelColor || channelColor === ChannelColors.X) {
-                        curvesToAdd.push(new CurveData(ChannelColors.X, animation, "x", () => Vector3.Zero(), setDefaultInTangent, setDefaultOutTangent));
-                    }
-                    if (!channelColor || channelColor === ChannelColors.Y) {
-                        curvesToAdd.push(new CurveData(ChannelColors.Y, animation, "y", () => Vector3.Zero(), setDefaultInTangent, setDefaultOutTangent));
-                    }
-                    if (!channelColor || channelColor === ChannelColors.Z) {
-                        curvesToAdd.push(new CurveData(ChannelColors.Z, animation, "z", () => Vector3.Zero(), setDefaultInTangent, setDefaultOutTangent));
-                    }
-                    break;
-                case Animation.ANIMATIONTYPE_COLOR3:
-                    if (!channelColor || channelColor === ColorChannelColors.R) {
-                        curvesToAdd.push(new CurveData(ColorChannelColors.R, animation, "r", () => Color3.Black(), setDefaultInTangent, setDefaultOutTangent));
-                    }
-                    if (!channelColor || channelColor === ColorChannelColors.G) {
-                        curvesToAdd.push(new CurveData(ColorChannelColors.G, animation, "g", () => Color3.Black(), setDefaultInTangent, setDefaultOutTangent));
-                    }
-                    if (!channelColor || channelColor === ColorChannelColors.B) {
-                        curvesToAdd.push(new CurveData(ColorChannelColors.B, animation, "b", () => Color3.Black(), setDefaultInTangent, setDefaultOutTangent));
-                    }
-                    break;
-                case Animation.ANIMATIONTYPE_COLOR4:
-                    if (!channelColor || channelColor === ColorChannelColors.R) {
-                        curvesToAdd.push(new CurveData(ColorChannelColors.R, animation, "r", () => new Color4(), setDefaultInTangent, setDefaultOutTangent));
-                    }
-                    if (!channelColor || channelColor === ColorChannelColors.G) {
-                        curvesToAdd.push(new CurveData(ColorChannelColors.G, animation, "g", () => new Color4(), setDefaultInTangent, setDefaultOutTangent));
-                    }
-                    if (!channelColor || channelColor === ColorChannelColors.B) {
-                        curvesToAdd.push(new CurveData(ColorChannelColors.B, animation, "b", () => new Color4(), setDefaultInTangent, setDefaultOutTangent));
-                    }
-                    if (!channelColor || channelColor === ColorChannelColors.A) {
-                        curvesToAdd.push(new CurveData(ColorChannelColors.A, animation, "a", () => new Color4(), setDefaultInTangent, setDefaultOutTangent));
-                    }
-                    break;
-                case Animation.ANIMATIONTYPE_QUATERNION:
-                    if (!channelColor || channelColor === ChannelColors.X) {
-                        curvesToAdd.push(new CurveData(ChannelColors.X, animation, "x", () => new Quaternion(), setDefaultInTangent, setDefaultOutTangent));
-                    }
-                    if (!channelColor || channelColor === ChannelColors.Y) {
-                        curvesToAdd.push(new CurveData(ChannelColors.Y, animation, "y", () => new Quaternion(), setDefaultInTangent, setDefaultOutTangent));
-                    }
-                    if (!channelColor || channelColor === ChannelColors.Z) {
-                        curvesToAdd.push(new CurveData(ChannelColors.Z, animation, "z", () => new Quaternion(), setDefaultInTangent, setDefaultOutTangent));
-                    }
-                    if (!channelColor || channelColor === ChannelColors.W) {
-                        curvesToAdd.push(new CurveData(ChannelColors.W, animation, "w", () => new Quaternion(), setDefaultInTangent, setDefaultOutTangent));
-                    }
-                    break;
-            }
-            // Populate keys for each curve (like v1's _extractValuesFromKeys)
-            for (const key of keys) {
-                const lockedTangent = key.lockedTangent ?? true;
-                for (const curve of curvesToAdd) {
-                    const prop = curve.property;
-                    const value = prop ? key.value[prop] : key.value;
-                    const inTangent = prop ? key.inTangent?.[prop] : key.inTangent;
-                    const outTangent = prop ? key.outTangent?.[prop] : key.outTangent;
-                    curve.keys.push({
-                        frame: key.frame,
-                        value,
-                        inTangent,
-                        outTangent,
-                        lockedTangent,
-                        interpolation: key.interpolation,
-                    });
-                }
-            }
-            result.push(...curvesToAdd);
-        }
-        return result;
-    }, [state.activeAnimations, state.activeChannels]);
+    }, [curves, invalidateKeyPoints]);
     // Calculate value range
     const valueRange = useMemo(() => {
         let minValue = 0;
@@ -11153,7 +11800,8 @@ const useStyles$q = makeStyles({
         backgroundColor: tokens.colorNeutralBackground2,
         overflow: "hidden",
         userSelect: "none",
-        pointerEvents: "none",
+        cursor: "pointer",
+        touchAction: "none",
     },
     svg: {
         width: "100%",
@@ -11186,10 +11834,11 @@ const OFFSET_X = 10;
  */
 const RangeFrameBar = ({ width }) => {
     const styles = useStyles$q();
-    const { state, observables } = useCurveEditor();
+    const { state, actions, observables } = useCurveEditor();
     const svgRef = useRef(null);
     const [viewWidth, setViewWidth] = useState(width);
     const [displayFrame, setDisplayFrame] = useState(state.activeFrame);
+    const pointerIsDown = useRef(false);
     // Re-render when range updates
     // useCallback stabilizes the accessor to prevent infinite re-render loops
     useObservableState(useCallback(() => ({}), []), observables.onRangeUpdated);
@@ -11215,6 +11864,26 @@ const RangeFrameBar = ({ width }) => {
             setDisplayFrame(state.activeFrame);
         }
     }, [state.activeFrame, state.isPlaying]);
+    // Playhead scrubbing — linear interpolation from pointer position to frame
+    const pointerToFrame = useCallback((offsetX) => {
+        const { fromKey, toKey } = state;
+        return Math.round(Math.max(fromKey, Math.min(toKey, (offsetX / viewWidth) * (toKey - fromKey) + fromKey)));
+    }, [state.fromKey, state.toKey, viewWidth]);
+    const handlePointerDown = useCallback((evt) => {
+        pointerIsDown.current = true;
+        evt.currentTarget.setPointerCapture(evt.pointerId);
+        actions.moveToFrame(pointerToFrame(evt.nativeEvent.offsetX));
+    }, [actions, pointerToFrame]);
+    const handlePointerMove = useCallback((evt) => {
+        if (!pointerIsDown.current) {
+            return;
+        }
+        actions.moveToFrame(pointerToFrame(evt.nativeEvent.offsetX));
+    }, [actions, pointerToFrame]);
+    const handlePointerUp = useCallback((evt) => {
+        pointerIsDown.current = false;
+        evt.currentTarget.releasePointerCapture(evt.pointerId);
+    }, []);
     // Compute frame ticks
     const frameTicks = useMemo(() => {
         if (state.activeAnimations.length === 0) {
@@ -11269,7 +11938,7 @@ const RangeFrameBar = ({ width }) => {
         return jsx("line", { className: styles.activeFrameLine, x1: x, y1: 0, x2: x, y2: 40 });
     }, [displayFrame, frameToX, styles.activeFrameLine]);
     const viewBox = `${ -10} 0 ${viewWidth + OFFSET_X * 4} 40`;
-    return (jsx("div", { className: styles.root, children: jsxs("svg", { ref: svgRef, className: styles.svg, viewBox: viewBox, children: [frameTicks.map((frame, i) => {
+    return (jsx("div", { className: styles.root, onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp, onPointerCancel: handlePointerUp, children: jsxs("svg", { ref: svgRef, className: styles.svg, viewBox: viewBox, children: [frameTicks.map((frame, i) => {
                     const x = frameToX(frame);
                     return (jsxs("g", { children: [jsx("line", { className: styles.tickLine, x1: x, y1: 22, x2: x, y2: 40 }), jsx("text", { className: styles.tickLabel, x: x, y: 14, children: Math.round(frame) })] }, `tick-${frame}-${i}`));
                 }), renderKeyframes, renderActiveFrame] }) }));
@@ -11528,6 +12197,22 @@ const RangeSelector = () => {
             }, onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp, onPointerCancel: handlePointerCancel, children: [jsx("div", { id: "left-handle", className: styles.handle, children: jsxs("div", { className: styles.handleIcon, children: [jsx("div", {}), jsx("div", {}), jsx("div", {})] }) }), jsx("div", { className: styles.label, children: Math.floor(state.fromKey) }), jsx("div", { className: styles.label, children: Math.floor(state.toKey) }), jsx("div", { id: "right-handle", className: styles.handle, children: jsxs("div", { className: styles.handleIcon, children: [jsx("div", {}), jsx("div", {}), jsx("div", {})] }) })] }) }));
 };
 
+/**
+ * Checks whether any of the given animations has a key at the specified frame.
+ * @param animations - The animations to check for keys
+ * @param frame - The frame index to check for keys at
+ * @returns True if a key exists at the frame, false otherwise.
+ */
+function GetKeyAtAnyFrameIndex(animations, frame) {
+    for (const animation of animations) {
+        for (const key of animation.getKeys()) {
+            if (Math.floor(frame - key.frame) === 0) {
+                return true;
+            }
+        }
+    }
+    return false;
+}
 const useStyles$n = makeStyles({
     root: {
         display: "flex",
@@ -11621,21 +12306,34 @@ const BottomBar = () => {
             setClipLength(newLength);
             actions.setClipLength(newLength);
             actions.setReferenceMaxFrame(newLength);
+            // Move playhead to new clip end
+            observables.onMoveToFrameRequired.notifyObservers(newLength);
+            // Create a key at the boundary if one doesn't exist
+            if (!GetKeyAtAnyFrameIndex(state.activeAnimations, newLength)) {
+                observables.onCreateOrUpdateKeyPointRequired.notifyObservers();
+            }
         });
         const onClipLengthDecreased = observables.onClipLengthDecreased.add((newLength) => {
             setClipLength(newLength);
             actions.setClipLength(newLength);
             actions.setReferenceMaxFrame(newLength);
+            // Move playhead to new clip end
+            observables.onMoveToFrameRequired.notifyObservers(newLength);
+            // Create a key at the boundary if one doesn't exist
+            if (!GetKeyAtAnyFrameIndex(state.activeAnimations, newLength)) {
+                observables.onCreateOrUpdateKeyPointRequired.notifyObservers();
+            }
             // Clamp toKey to new clip length
             if (toKeyRef.current > newLength) {
                 actions.setToKey(newLength);
             }
+            observables.onRangeUpdated.notifyObservers();
         });
         return () => {
             observables.onClipLengthIncreased.remove(onClipLengthIncreased);
             observables.onClipLengthDecreased.remove(onClipLengthDecreased);
         };
-    }, [observables, actions]);
+    }, [observables, actions, state.activeAnimations]);
     const handlePlayForward = useCallback(() => {
         actions.play(true);
     }, [actions]);
@@ -12119,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" })] }));
 };
@@ -12159,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;
@@ -12171,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;
@@ -12189,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;
@@ -12266,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) => {
@@ -12985,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;
@@ -13856,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) => {
@@ -17026,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;
@@ -18620,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 })] })] }));
             },
         };
     },
@@ -18842,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 })] }) }));
             },
         };
     },
@@ -19087,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 = {
@@ -19115,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;
@@ -19129,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;
@@ -19199,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;
@@ -19211,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;
@@ -19274,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;
@@ -19286,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;
@@ -19316,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;
@@ -19328,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;
@@ -19353,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",
@@ -19418,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;
@@ -19445,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)) {
@@ -19505,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() {
@@ -19563,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;
@@ -19575,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;
@@ -19619,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;
@@ -19659,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;
@@ -19729,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() {
@@ -19757,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() {
@@ -19911,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;
@@ -19923,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;
@@ -19967,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;
@@ -19979,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;
@@ -20041,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;
@@ -20055,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;
@@ -20092,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;
@@ -20119,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;
@@ -20145,7 +20791,6 @@ const SoundExplorerServiceDefinition = {
                     onChange: onChangeObservable,
                     dispose: () => {
                         nameHookToken.dispose();
-                        displayNameHookToken.dispose();
                         onChangeObservable.clear();
                     },
                 };
@@ -20169,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;
@@ -20182,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;
@@ -20242,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;
@@ -20254,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})`;
@@ -20813,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]);
@@ -21012,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), []);
@@ -21068,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") }) }));
             },
@@ -21259,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.
@@ -21493,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;
@@ -21537,7 +22083,7 @@ function ConvertOptions(v1Options) {
             consumes: [SceneExplorerServiceIdentity],
             factory: (sceneExplorerService) => {
                 const sceneExplorerCommandRegistrations = explorerExtensibility.flatMap((command) => command.entries.map((entry) => sceneExplorerService.addEntityCommand({
-                    predicate: (entity) => command.predicate(entity),
+                    predicate: (entity) => typeof entity === "object" && command.predicate(entity),
                     getCommand: (entity) => {
                         return {
                             displayName: entry.label,
@@ -22096,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-DrQrky1o.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