@babylonjs/inspector 8.49.2 → 8.49.4

package/lib/{index-DB8sTGSM.js → index-CyX6FYTL.js}

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { createContext, forwardRef, useContext, useState, useCallback, Component, useMemo, useEffect, useRef, isValidElement, cloneElement, Children, useLayoutEffect, useImperativeHandle, createElement, Suspense, memo, Fragment as Fragment$1, useReducer, lazy } from 'react';
-import { tokens, makeStyles, Button as Button$1, Spinner, Link as Link$1, Caption1, Body1, Tooltip as Tooltip$1, ToggleButton as ToggleButton$1, InfoLabel as InfoLabel$1, Body1Strong, Checkbox as Checkbox$1, mergeClasses, Accordion as Accordion$1, AccordionItem, AccordionHeader, Subtitle2Stronger, AccordionPanel, Divider, createLightTheme, createDarkTheme, FluentProvider, TeachingPopover, TeachingPopoverSurface, TeachingPopoverHeader, TeachingPopoverBody, Portal, RendererProvider, createDOMRenderer, Menu, MenuTrigger, SplitButton, MenuPopover, MenuList, MenuItem, Toolbar as Toolbar$1, ToolbarRadioButton, MenuGroup, MenuGroupHeader, treeItemLevelToken, SearchBox as SearchBox$1, FlatTree, FlatTreeItem, TreeItemLayout, MenuDivider, MenuItemCheckbox, Switch as Switch$1, useId, 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, webDarkTheme, MessageBar as MessageBar$1, MessageBarBody, MessageBarTitle, Subtitle2, useComboboxFilter, Combobox, Textarea as Textarea$1, ToolbarButton, ToolbarDivider, Field } from '@fluentui/react-components';
-import { ErrorCircleRegular, ChevronCircleRight16Regular, ChevronCircleRight20Regular, ChevronCircleDown16Regular, ChevronCircleDown20Regular, Copy16Regular, CopyRegular, PanelLeftExpandRegular, PanelRightExpandRegular, PanelLeftContractRegular, PanelRightContractRegular, PictureInPictureEnterRegular, MoreHorizontalRegular, LayoutColumnTwoFocusLeftFilled, LayoutColumnTwoSplitLeftFocusTopLeftFilled, LayoutColumnTwoSplitLeftFocusBottomLeftFilled, LayoutColumnTwoFocusRightFilled, LayoutColumnTwoSplitRightFocusTopRightFilled, LayoutColumnTwoSplitRightFocusBottomRightFilled, DocumentTextRegular, createFluentIcon, FilterRegular, TextSortAscendingRegular, GlobeRegular, ArrowExpandAllRegular, ArrowCollapseAllRegular, CubeTreeRegular, BugRegular, SettingsRegular, ArrowUploadRegular, ArrowDownloadRegular, StopRegular, RecordRegular, DataBarHorizontalRegular, WrenchRegular, WeatherSunnyRegular, WeatherMoonRegular, ArrowRotateClockwiseRegular, ArrowExpandRegular, SelectObjectRegular, CubeRegular, AddRegular, DeleteRegular, FullScreenMaximizeRegular, ArrowMinimizeRegular, LineHorizontal1Regular, ChevronDoubleLeftRegular, ChevronDoubleRightRegular, StepsRegular, ChevronDownRegular, ChevronRightRegular, CircleSmallFilled, SaveRegular, PreviousRegular, ArrowPreviousRegular, TriangleLeftRegular, RecordStopRegular, PlayRegular, ArrowNextRegular, NextRegular, EditRegular, LinkDismissRegular, LinkEditRegular, ArrowUndoRegular, BracesRegular, BracesDismiss16Regular, EyeRegular, CloudArrowUpRegular, CloudArrowDownRegular, EyeOffFilled, EyeFilled, ArrowMoveFilled, StopFilled, PlayFilled, EyeOffRegular, LockOpenRegular, LockClosedRegular, ResizeRegular, ChevronUpRegular, ArrowResetRegular, CircleHalfFillRegular, EyedropperRegular, PaintBucketRegular, InkStrokeRegular, StackRegular, FilmstripRegular, PauseFilled, WeatherSunnyLowFilled, LayerRegular, FrameRegular, AppGenericRegular, RectangleLandscapeRegular, BorderOutsideRegular, BorderNoneRegular, MyLocationRegular, CameraRegular, LightbulbRegular, VideoFilled, VideoRegular, FlashlightRegular, FlashlightOffRegular, DropRegular, BlurRegular, PipelineRegular, PersonWalkingRegular, DataLineRegular, 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, ToggleButton as ToggleButton$1, InfoLabel as InfoLabel$1, Body1Strong, Checkbox as Checkbox$1, mergeClasses, Accordion as Accordion$1, AccordionItem, AccordionHeader, Subtitle2Stronger, AccordionPanel, Divider, createLightTheme, createDarkTheme, FluentProvider, TeachingPopover, TeachingPopoverSurface, TeachingPopoverHeader, TeachingPopoverBody, Portal, RendererProvider, createDOMRenderer, Menu, MenuTrigger, SplitButton, MenuPopover, MenuList, MenuItem, Toolbar as Toolbar$1, ToolbarRadioButton, MenuGroup, MenuGroupHeader, treeItemLevelToken, SearchBox as SearchBox$1, FlatTree, FlatTreeItem, TreeItemLayout, MenuDivider, MenuItemCheckbox, Switch as Switch$1, useId, 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, MessageBar as MessageBar$1, MessageBarBody, MessageBarTitle, Subtitle2, useComboboxFilter, Combobox, Textarea as Textarea$1, ToolbarButton, ToolbarDivider, Field } from '@fluentui/react-components';
+import { ErrorCircleRegular, ChevronCircleRight16Regular, ChevronCircleRight20Regular, ChevronCircleDown16Regular, ChevronCircleDown20Regular, Copy16Regular, CopyRegular, PanelLeftExpandRegular, PanelRightExpandRegular, PanelLeftContractRegular, PanelRightContractRegular, PictureInPictureEnterRegular, MoreHorizontalRegular, LayoutColumnTwoFocusLeftFilled, LayoutColumnTwoSplitLeftFocusTopLeftFilled, LayoutColumnTwoSplitLeftFocusBottomLeftFilled, LayoutColumnTwoFocusRightFilled, LayoutColumnTwoSplitRightFocusTopRightFilled, LayoutColumnTwoSplitRightFocusBottomRightFilled, DocumentTextRegular, createFluentIcon, FilterRegular, TextSortAscendingRegular, GlobeRegular, ArrowExpandAllRegular, ArrowCollapseAllRegular, CubeTreeRegular, BugRegular, SettingsRegular, ArrowUploadRegular, ArrowDownloadRegular, StopRegular, RecordRegular, DataBarHorizontalRegular, WrenchRegular, WeatherSunnyRegular, WeatherMoonRegular, ArrowRotateClockwiseRegular, ArrowExpandRegular, SelectObjectRegular, CubeRegular, AddRegular, DeleteRegular, FullScreenMaximizeRegular, ChevronDownRegular, ChevronRightRegular, CircleSmallFilled, SaveRegular, PreviousRegular, ArrowPreviousRegular, TriangleLeftRegular, RecordStopRegular, PlayRegular, ArrowNextRegular, NextRegular, EditRegular, PauseRegular, LinkDismissRegular, LinkEditRegular, ArrowUndoRegular, BracesRegular, BracesDismiss16Regular, EyeRegular, CloudArrowUpRegular, CloudArrowDownRegular, EyeOffFilled, EyeFilled, ArrowMoveFilled, StopFilled, PlayFilled, EyeOffRegular, LockOpenRegular, LockClosedRegular, ResizeRegular, ChevronUpRegular, ArrowResetRegular, CircleHalfFillRegular, EyedropperRegular, PaintBucketRegular, InkStrokeRegular, StackRegular, FilmstripRegular, PauseFilled, WeatherSunnyLowFilled, LayerRegular, FrameRegular, AppGenericRegular, RectangleLandscapeRegular, BorderOutsideRegular, BorderNoneRegular, MyLocationRegular, CameraRegular, 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';
@@ -13,6 +13,7 @@ import { Deferred } from '@babylonjs/core/Misc/deferred.js';
 import { Logger } from '@babylonjs/core/Misc/logger.js';
 import { Clamp } from '@babylonjs/core/Maths/math.scalar.functions.js';
 import { VirtualizerScrollView } from '@fluentui-contrib/react-virtualizer';
+import { UniqueIdGenerator } from '@babylonjs/core/Misc/uniqueIdGenerator.js';
 import { FontAsset } from '@babylonjs/addons/msdfText/fontAsset.js';
 import { TextRenderer } from '@babylonjs/addons/msdfText/textRenderer.js';
 import { PhysicsViewer } from '@babylonjs/core/Debug/physicsViewer.js';
@@ -48,7 +49,7 @@ import { Node } from '@babylonjs/core/node.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';
-import { Atmosphere } from '@babylonjs/addons/atmosphere/atmosphere.js';
+import { Sound } from '@babylonjs/core/Audio/sound.js';
 import { ArcRotateCamera } from '@babylonjs/core/Cameras/arcRotateCamera.js';
 import { FollowCamera } from '@babylonjs/core/Cameras/followCamera.js';
 import { FreeCamera } from '@babylonjs/core/Cameras/freeCamera.js';
@@ -145,7 +146,6 @@ 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 { EngineStore } from '@babylonjs/core/Engines/engineStore.js';
-import { UniqueIdGenerator } from '@babylonjs/core/Misc/uniqueIdGenerator.js';
 import { DebugLayer } from '@babylonjs/core/Debug/debugLayer.js';
 import { Lazy } from '@babylonjs/core/Misc/lazy.js';
 
@@ -234,7 +234,14 @@ function ValidateColorHex(val) {
     return val != "" && HEX_REGEX.test(val);
 }
 
-// import { Tooltip } from "./tooltip";
+const Tooltip = (props) => {
+    const { content, children } = props;
+    if (!content) {
+        return children;
+    }
+    return (jsx(Tooltip$1, { relationship: "description", content: content, children: children }));
+};
+
 const useButtonStyles = makeStyles({
     smallIcon: {
         fontSize: TokenMap.px16,
@@ -262,12 +269,7 @@ const Button = forwardRef((props, ref) => {
         }
     }, [onClick]);
     const iconClass = size === "small" ? classes.smallIcon : classes.mediumIcon;
-    return (
-    // TODO: Somehow wrapping Button in a Tooltip completely breaks rendering CurveEditor. Need to figure out why.
-    // <Tooltip content={title}>
-    jsx(Button$1, { ref: ref, title: title, iconPosition: "after", ...buttonProps, className: className, size: size, icon: isOnClickBusy ? jsx(Spinner, { size: "extra-tiny" }) : Icon && jsx(Icon, { className: iconClass }), onClick: handleOnClick, disabled: disabled || isOnClickBusy, children: label && props.label })
-    // </Tooltip>
-    );
+    return (jsx(Tooltip, { content: title ?? "", children: jsx(Button$1, { ref: ref, iconPosition: "after", ...buttonProps, className: className, size: size, icon: isOnClickBusy ? jsx(Spinner, { size: "extra-tiny" }) : Icon && jsx(Icon, { className: iconClass }), onClick: handleOnClick, disabled: disabled || isOnClickBusy, children: label && props.label }) }));
 });
 Button.displayName = "Button";
 
@@ -365,13 +367,7 @@ function usePropertyChangedNotifier() {
 }
 
 const InterceptorHooksMaps$1 = new WeakMap();
-/**
- * Intercepts a function on an object and allows you to add hooks that will be called during function execution.
- * @param target The object containing the function to intercept.
- * @param propertyKey The key of the property that is a function (this is the function that will be intercepted).
- * @param hooks The hooks to call during the function execution.
- * @returns A disposable that removes the hooks when disposed and returns the object to its original state.
- */
+/** @internal */
 function InterceptFunction(target, propertyKey, hooks) {
     if (!hooks.afterCall) {
         throw new Error("At least one hook must be provided.");
@@ -404,7 +400,7 @@ function InterceptFunction(target, propertyKey, hooks) {
         !Reflect.set(target, propertyKey, (...args) => {
             const result = Reflect.apply(originalFunction, target, args);
             for (const { afterCall } of hooksForKey) {
-                afterCall?.();
+                afterCall?.(...args);
             }
             return result;
         })) {
@@ -476,13 +472,7 @@ function IsPropertyReadonly(propertyDescriptor) {
     return propertyDescriptor.writable === false || (propertyDescriptor.writable === undefined && !propertyDescriptor.set);
 }
 const InterceptorHooksMaps = new WeakMap();
-/**
- * Intercepts a property on an object and allows you to add hooks that will be called when the property is get or set.
- * @param target The object containing the property to intercept.
- * @param propertyKey The key of the property to intercept.
- * @param hooks The hooks to call when the property is get or set.
- * @returns A disposable that removes the hooks when disposed and returns the object to its original state.
- */
+/** @internal */
 function InterceptProperty(target, propertyKey, hooks) {
     // Find the property descriptor and note the owning object (might be inherited through the prototype chain).
     const ownerAndDescriptor = GetPropertyDescriptor(target, propertyKey);
@@ -535,7 +525,7 @@ function InterceptProperty(target, propertyKey, hooks) {
             set: (newValue) => {
                 setValue.call(target, newValue);
                 for (const { afterSet } of hooksForKey) {
-                    afterSet?.();
+                    afterSet?.(newValue);
                 }
             },
         })) {
@@ -1057,14 +1047,6 @@ const Link = forwardRef((props, ref) => {
 });
 Link.displayName = "Link";
 
-const Tooltip = (props) => {
-    const { content, children } = props;
-    if (!content) {
-        return children;
-    }
-    return (jsx(Tooltip$1, { relationship: "description", content: content, children: children }));
-};
-
 const useStyles$S = makeStyles({
     button: {
         display: "flex",
@@ -2983,9 +2965,20 @@ class GraphUtils {
     }
 }
 
+const SyntheticUniqueIds = new WeakMap();
+function GetEntityId(entity) {
+    if (entity.uniqueId !== undefined) {
+        return entity.uniqueId;
+    }
+    let id = SyntheticUniqueIds.get(entity);
+    if (!id) {
+        SyntheticUniqueIds.set(entity, (id = UniqueIdGenerator.UniqueId));
+    }
+    return id;
+}
 function ExpandOrCollapseAll(treeItem, open, openItems) {
     const addOrRemove = open ? openItems.add.bind(openItems) : openItems.delete.bind(openItems);
-    TraverseGraph([treeItem], (treeItem) => treeItem.children, (treeItem) => addOrRemove(treeItem.type === "entity" ? treeItem.entity.uniqueId : treeItem.sectionName));
+    TraverseGraph([treeItem], (treeItem) => treeItem.children, (treeItem) => addOrRemove(treeItem.type === "entity" ? GetEntityId(treeItem.entity) : treeItem.sectionName));
 }
 function useCommandContextMenuState(commands) {
     const [checkedContextMenuItems, setCheckedContextMenuItems] = useState({ toggleCommands: [] });
@@ -3240,16 +3233,16 @@ const EntityTreeItem = (props) => {
     }, [inlineCommands]);
     const contextMenuCommands = useMemo(() => commands.filter((command) => command.mode === "contextMenu"), [commands]);
     const [checkedContextMenuItems, onContextMenuCheckedValueChange, contextMenuItems] = useCommandContextMenuState(contextMenuCommands);
-    return (jsxs(Menu, { openOnContext: true, checkedValues: checkedContextMenuItems, onCheckedValueChange: onContextMenuCheckedValueChange, children: [jsx(MenuTrigger, { disableButtonEnhancement: true, children: jsx(FlatTreeItem, { className: classes.treeItem, value: entityItem.entity.uniqueId, 
+    return (jsxs(Menu, { openOnContext: true, checkedValues: checkedContextMenuItems, onCheckedValueChange: onContextMenuCheckedValueChange, children: [jsx(MenuTrigger, { disableButtonEnhancement: true, children: jsx(FlatTreeItem, { className: classes.treeItem, value: GetEntityId(entityItem.entity), 
                     // Disable manual expand/collapse when a filter is active.
-                    itemType: !isFiltering && hasChildren ? "branch" : "leaf", parentValue: entityItem.parent.type === "section" ? entityItem.parent.sectionName : entityItem.entity.uniqueId, "aria-level": entityItem.depth, "aria-setsize": 1, "aria-posinset": 1, onClick: select, style: { [treeItemLevelToken]: entityItem.depth }, children: jsx(TreeItemLayout, { iconBefore: entityItem.icon ? jsx(entityItem.icon, { entity: entityItem.entity }) : null, className: mergeClasses(hasChildren ? classes.treeItemLayoutBranch : classes.treeItemLayoutLeaf, compactMode ? classes.treeItemLayoutCompact : undefined), style: isSelected ? { backgroundColor: tokens.colorNeutralBackground1Selected } : undefined, actions: actions, aside: {
+                    itemType: !isFiltering && hasChildren ? "branch" : "leaf", parentValue: entityItem.parent.type === "section" ? entityItem.parent.sectionName : GetEntityId(entityItem.entity), "aria-level": entityItem.depth, "aria-setsize": 1, "aria-posinset": 1, onClick: select, style: { [treeItemLevelToken]: entityItem.depth }, children: jsx(TreeItemLayout, { iconBefore: entityItem.icon ? jsx(entityItem.icon, { entity: entityItem.entity }) : null, className: mergeClasses(hasChildren ? classes.treeItemLayoutBranch : classes.treeItemLayoutLeaf, compactMode ? classes.treeItemLayoutCompact : undefined), style: isSelected ? { backgroundColor: tokens.colorNeutralBackground1Selected } : undefined, actions: actions, aside: {
                             // Match the gap and padding of the actions.
                             className: classes.treeItemLayoutAside,
                             children: aside,
                         }, main: {
                             // Prevent the "main" content (the Body1 below) from growing too large and pushing the actions/aside out of view.
                             className: classes.treeItemLayoutMain,
-                        }, children: jsx(Body1, { wrap: false, truncate: true, children: name }) }) }, entityItem.entity.uniqueId) }), jsx(MenuPopover, { hidden: !hasChildren && contextMenuCommands.length === 0, children: jsxs(MenuList, { children: [hasChildren && (jsxs(Fragment, { children: [jsx(MenuItem, { icon: jsx(ArrowExpandAllRegular, {}), onClick: expandAll, children: jsx(Body1, { children: "Expand All" }) }), jsx(MenuItem, { icon: jsx(ArrowCollapseAllRegular, {}), onClick: collapseAll, children: jsx(Body1, { children: "Collapse All" }) })] })), hasChildren && contextMenuCommands.length > 0 && jsx(MenuDivider, {}), contextMenuItems] }) })] }));
+                        }, children: jsx(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();
@@ -3274,7 +3267,7 @@ const SceneExplorer = (props) => {
         };
         const onSceneItemRemoved = (item) => {
             setSceneVersion((version) => version + 1);
-            if (openItems.delete(item.uniqueId)) {
+            if (openItems.delete(GetEntityId(item))) {
                 setOpenItems(new Set(openItems));
             }
             if (item === selectedEntity) {
@@ -3329,7 +3322,7 @@ const SceneExplorer = (props) => {
                     parent.children = [];
                 }
                 parent.children.push(treeItemData);
-                allTreeItems.set(entity.uniqueId, treeItemData);
+                allTreeItems.set(GetEntityId(entity), treeItemData);
                 return treeItemData;
             };
             const rootEntityTreeItems = rootEntities.map((entity) => createEntityTreeItemData(entity, sectionTreeItem));
@@ -3377,7 +3370,7 @@ const SceneExplorer = (props) => {
                 TraverseGraph(children, 
                 // Get children
                 (treeItem) => {
-                    if (filter || openItems.has(treeItem.entity.uniqueId)) {
+                    if (filter || openItems.has(GetEntityId(treeItem.entity))) {
                         if (!treeItem.children) {
                             return null;
                         }
@@ -3428,8 +3421,8 @@ const SceneExplorer = (props) => {
     }, [sceneTreeItem, sectionTreeItems, allTreeItems, openItems, itemsFilter, isSorted]);
     const getParentStack = useCallback((entity) => {
         const parentStack = [];
-        for (let treeItem = allTreeItems.get(entity.uniqueId); treeItem; treeItem = treeItem?.type === "entity" ? treeItem.parent : undefined) {
-            parentStack.push(treeItem.type === "entity" ? treeItem.entity.uniqueId : treeItem.sectionName);
+        for (let treeItem = allTreeItems.get(GetEntityId(entity)); treeItem; treeItem = treeItem?.type === "entity" ? treeItem.parent : undefined) {
+            parentStack.push(treeItem.type === "entity" ? GetEntityId(treeItem.entity) : treeItem.sectionName);
         }
         // The first item will be the entity itself, so just remove it.
         parentStack.shift();
@@ -5912,7 +5905,7 @@ const DefaultInspectorExtensionFeed = new BuiltInsExtensionFeed("Inspector", [
         keywords: ["creation", "tools"],
         ...BabylonWebResources,
         author: { name: "Babylon.js", forumUserName: "" },
-        getExtensionModuleAsync: async () => await import('./quickCreateToolsService-CIYZ626Q.js'),
+        getExtensionModuleAsync: async () => await import('./quickCreateToolsService-BljTQeJt.js'),
     },
     {
         name: "Reflector",
@@ -5920,7 +5913,7 @@ const DefaultInspectorExtensionFeed = new BuiltInsExtensionFeed("Inspector", [
         keywords: ["reflector", "bridge", "sync", "sandbox", "tools"],
         ...BabylonWebResources,
         author: { name: "Babylon.js", forumUserName: "" },
-        getExtensionModuleAsync: async () => await import('./reflectorService-Ck6IfTV-.js'),
+        getExtensionModuleAsync: async () => await import('./reflectorService-8_EDaWNz.js'),
     },
 ]);
 
@@ -6750,7 +6743,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-BdUP4DIf.js');
+                    const { ExtensionListServiceDefinition } = await import('./extensionsListService-DJfDekFP.js');
                     await serviceContainer.addServiceAsync(ExtensionListServiceDefinition);
                 }
                 // Register the theme selector service (for selecting the theme) if theming is configured.
@@ -6931,6 +6924,11 @@ const GizmoServiceDefinition = {
 const MeshIcon = createFluentIcon("Mesh", "16", '<path d="M14.03,3.54l-5.11-2.07c-.61-.25-1.27-.25-1.88,0L1.93,3.54c-.57.23-.94.78-.94,1.39v6.15c0,.61.37,1.16.94,1.39l5.11,2.07c.3.12.62.18.94.18s.64-.06.94-.18l5.12-2.07c.57-.23.94-.78.94-1.39v-6.15c0-.61-.37-1.16-.94-1.39ZM13.97,7.71l-2.11.86v-2.71l2.11-.86v2.71ZM1.99,5l2.11.86v2.71l-2.11-.86v-2.71ZM11.35,4.98l-2.04-.83,1.78-.72,2.04.83-1.78.72ZM10.02,5.52l-2.04.83-2.04-.83,2.04-.83,2.04.83ZM4.6,4.98l-1.78-.72,2.04-.83,1.78.72-2.04.83ZM5.1,6.26l2.38.96v2.71l-2.38-.96v-2.71ZM8.48,7.22l2.38-.96v2.71l-2.38.96v-2.71ZM7.41,2.39c.18-.07.37-.11.56-.11s.38.04.56.11l1.22.49-1.78.72-1.79-.72,1.22-.49ZM1.99,11.07v-2.29l2.11.86v2.62l-1.8-.73c-.19-.08-.31-.26-.31-.46ZM5.1,12.67v-2.62l2.38.96v2.61s-.04,0-.06-.01l-2.31-.94ZM8.54,13.61s-.04,0-.06.01v-2.61l2.38-.96v2.62l-2.31.94ZM13.66,11.54l-1.8.73v-2.62l2.11-.86v2.29c0,.2-.12.39-.31.46Z"/>');
 const TranslateIcon = createFluentIcon("Translate", "24", '<path d="M20.16,12.98l-2.75-2.75c-.29-.29-.77-.29-1.06,0-.29.29-.29.77,0,1.06l1.47,1.47h-6.69v-6.69l1.47,1.47c.29.29.77.29,1.06,0,.29-.29.29-.77,0-1.06l-2.75-2.75c-.14-.14-.33-.22-.53-.22s-.39.08-.53.22l-2.75,2.75c-.29.29-.29.77,0,1.06.29.29.77.29,1.06,0l1.47-1.47v7.13l-3.52,3.52v-2.08c0-.41-.34-.75-.75-.75s-.75.34-.75.75v3.89c0,.2.08.39.22.53.14.14.33.22.53.22h3.89c.41,0,.75-.34.75-.75s-.34-.75-.75-.75h-2.08s3.52-3.52,3.52-3.52h7.13l-1.47,1.47c-.29.29-.29.77,0,1.06s.77.29,1.06,0l2.75-2.75c.14-.14.22-.33.22-.53s-.08-.39-.22-.53Z" />');
 const MaterialIcon = createFluentIcon("Material", "16", '<path d="M14.74,6.3c-.09-.36-.38-.64-.75-.72-.04-.09-.08-.18-.12-.27.1-.15.16-.32.16-.51,0-.18-.05-.34-.13-.48-1.23-1.97-3.41-3.28-5.9-3.28C4.16,1.04,1.04,4.16,1.04,7.99c0,.39.23.72.57.88.02.12.03.25.06.37-.18.18-.3.42-.3.7,0,.11.02.21.06.31.94,2.74,3.53,4.71,6.58,4.71,3.84,0,6.96-3.12,6.96-6.96,0-.59-.08-1.16-.22-1.7ZM2.07,8.58c-.02-.19-.03-.39-.03-.58,0-3.29,2.67-5.96,5.96-5.96,2.23,0,4.17,1.23,5.2,3.05.05.18-.07.45-.3.75-.57-.73-1.45-1.21-2.45-1.21-1.72,0-3.12,1.4-3.12,3.11,0,.33.07.65.16.95-3.05.82-5.17.52-5.42-.11ZM12.56,7.75c0,1.17-.95,2.11-2.11,2.11s-2.12-.95-2.12-2.11.95-2.11,2.12-2.11,2.11.95,2.11,2.11ZM8,13.96c-2.6,0-4.81-1.68-5.62-4.01.5.16,1.11.24,1.79.24,1.15,0,2.49-.22,3.79-.59.57.76,1.47,1.26,2.49,1.26,1.72,0,3.11-1.4,3.11-3.11,0-.34-.07-.65-.17-.96.13-.13.24-.26.34-.39.14.51.22,1.04.22,1.6,0,3.29-2.67,5.96-5.96,5.96Z"/>');
+const FlatTangentIcon = createFluentIcon("FlatTangent", "20", '<g transform="scale(0.5)"><path d="M28,18.5a1.51,1.51,0,0,0-1.41,1H11.5v1H26.59a1.5,1.5,0,1,0,1.41-2Z"/></g>');
+const LinearTangentIcon = createFluentIcon("LinearTangent", "20", '<g transform="scale(0.5)"><path d="M26,14a1.49,1.49,0,0,0-2.4,1.69l-10,10,.71.71,10-10A1.49,1.49,0,0,0,26,14Z"/></g>');
+const BreakTangentIcon = createFluentIcon("BreakTangent", "20", '<g transform="scale(0.5)"><path d="M27.11,13.05a1.49,1.49,0,0,0-2.05.53,1.47,1.47,0,0,0,.14,1.72l-4.78,8L20,22.92l-.42.42-4.78-8a1.47,1.47,0,0,0,.14-1.72,1.49,1.49,0,0,0-2-.53,1.5,1.5,0,0,0,1,2.76l4.91,8.26-1,1L20,27.16,22.12,25l-1-1,4.91-8.26a1.5,1.5,0,0,0,1.05-2.76Z"/></g>');
+const UnifyTangentIcon = createFluentIcon("UnifyTangent", "20", '<g transform="scale(0.5)"><path d="M27.94,18.28a1.49,1.49,0,0,0-1.41,1h-5l-1.62-1.63-1.62,1.63h-5a1.5,1.5,0,1,0,0,1h5l1.62,1.62,1.62-1.62h5a1.5,1.5,0,1,0,1.41-2Z"/></g>');
+const StepTangentIcon = createFluentIcon("StepTangent", "20", '<g transform="scale(0.5)"><path d="M29,16.71a1.5,1.5,0,1,0-2,1.41v5.67H11v1H28V18.12A1.51,1.51,0,0,0,29,16.71Z"/></g>');
 
 const useStyles$C = makeStyles({
     coordinatesModeButton: {
@@ -7493,7 +7491,7 @@ const TopBar = () => {
     const handleValueChange = useCallback((value) => {
         observables.onValueManuallyEntered.notifyObservers(value);
     }, [observables]);
-    return (jsxs("div", { className: styles.root, children: [jsx("span", { className: styles.title, children: state.title }), jsx(Divider, { vertical: true, className: styles.divider }), jsxs("div", { className: styles.inputGroup, children: [jsx("span", { className: styles.inputLabel, children: "Frame:" }), jsx(SpinButton, { className: styles.spinButton, value: keyFrameValue ?? 0, onChange: handleFrameChange, disabled: !hasActiveAnimations || !frameControlEnabled })] }), jsxs("div", { className: styles.inputGroup, children: [jsx("span", { className: styles.inputLabel, children: "Value:" }), jsx(SpinButton, { className: styles.spinButton, value: keyValue ?? 0, onChange: handleValueChange, disabled: !hasActiveAnimations || !valueControlEnabled, step: 0.1 })] }), jsx(Divider, { vertical: true, className: styles.divider }), jsxs("div", { className: styles.buttonGroup, children: [jsx(Button, { icon: AddRegular, appearance: "subtle", disabled: !hasActiveAnimations, onClick: () => observables.onCreateOrUpdateKeyPointRequired.notifyObservers(), title: "New key" }), jsx(Button, { icon: DeleteRegular, appearance: "subtle", disabled: !hasActiveKeyPoints, onClick: () => observables.onDeleteKeyActiveKeyPoints.notifyObservers(), title: "Delete key" }), jsx(Button, { icon: FullScreenMaximizeRegular, appearance: "subtle", onClick: () => observables.onFrameRequired.notifyObservers(), title: "Frame canvas" })] }), jsx(Divider, { vertical: true, className: styles.divider }), jsxs("div", { className: styles.buttonGroup, children: [jsx(Button, { icon: ArrowMinimizeRegular, appearance: "subtle", disabled: !hasActiveKeyPoints, onClick: () => observables.onFlattenTangentRequired.notifyObservers(), title: "Flatten tangent" }), jsx(Button, { icon: LineHorizontal1Regular, appearance: "subtle", disabled: !hasActiveKeyPoints, onClick: () => observables.onLinearTangentRequired.notifyObservers(), title: "Linear tangent" }), jsx(Button, { icon: ChevronDoubleLeftRegular, appearance: "subtle", disabled: !hasActiveKeyPoints, onClick: () => observables.onBreakTangentRequired.notifyObservers(), title: "Break tangent" }), jsx(Button, { icon: ChevronDoubleRightRegular, appearance: "subtle", disabled: !hasActiveKeyPoints, onClick: () => observables.onUnifyTangentRequired.notifyObservers(), title: "Unify tangent" }), jsx(Button, { icon: StepsRegular, appearance: "subtle", disabled: !hasActiveKeyPoints, onClick: () => observables.onStepTangentRequired.notifyObservers(), title: "Step tangent" })] })] }));
+    return (jsxs("div", { className: styles.root, children: [jsx("div", { className: styles.title, children: state.title }), jsx(Divider, { vertical: true, className: styles.divider }), jsxs("div", { className: styles.inputGroup, children: [jsx("div", { className: styles.inputLabel, children: "Frame:" }), jsx(SpinButton, { className: styles.spinButton, value: keyFrameValue ?? 0, onChange: handleFrameChange, disabled: !hasActiveAnimations || !frameControlEnabled })] }), jsxs("div", { className: styles.inputGroup, children: [jsx("div", { className: styles.inputLabel, children: "Value:" }), jsx(SpinButton, { className: styles.spinButton, value: keyValue ?? 0, onChange: handleValueChange, disabled: !hasActiveAnimations || !valueControlEnabled, step: 0.1 })] }), jsx(Divider, { vertical: true, className: styles.divider }), jsxs("div", { className: styles.buttonGroup, children: [jsx(Button, { icon: AddRegular, appearance: "subtle", disabled: !hasActiveAnimations, onClick: () => observables.onCreateOrUpdateKeyPointRequired.notifyObservers(), title: "New key" }), jsx(Button, { icon: DeleteRegular, appearance: "subtle", disabled: !hasActiveKeyPoints, onClick: () => observables.onDeleteKeyActiveKeyPoints.notifyObservers(), title: "Delete key" }), jsx(Button, { icon: FullScreenMaximizeRegular, appearance: "subtle", onClick: () => observables.onFrameRequired.notifyObservers(), title: "Frame canvas" })] }), jsx(Divider, { vertical: true, className: styles.divider }), jsxs("div", { className: styles.buttonGroup, children: [jsx(Button, { icon: FlatTangentIcon, appearance: "subtle", disabled: !hasActiveKeyPoints, onClick: () => observables.onFlattenTangentRequired.notifyObservers(), title: "Flatten tangent" }), jsx(Button, { icon: LinearTangentIcon, appearance: "subtle", disabled: !hasActiveKeyPoints, onClick: () => observables.onLinearTangentRequired.notifyObservers(), title: "Linear tangent" }), jsx(Button, { icon: BreakTangentIcon, appearance: "subtle", disabled: !hasActiveKeyPoints, onClick: () => observables.onBreakTangentRequired.notifyObservers(), title: "Break tangent" }), jsx(Button, { icon: UnifyTangentIcon, appearance: "subtle", disabled: !hasActiveKeyPoints, onClick: () => observables.onUnifyTangentRequired.notifyObservers(), title: "Unify tangent" }), jsx(Button, { icon: StepTangentIcon, appearance: "subtle", disabled: !hasActiveKeyPoints, onClick: () => observables.onStepTangentRequired.notifyObservers(), title: "Step tangent" })] })] }));
 };
 
 /**
@@ -7533,18 +7531,6 @@ const ColorChannelColors = {
  * Default curve color for single-component (float) animations
  */
 const DefaultCurveColor = "#ffffff";
-/**
- * Graph UI colors
- */
-const GraphColors = {
-    /** Zero line color */
-    zeroLine: "#666666",
-    /** Selection rectangle stroke */
-    selectionStroke: "#ffffff",
-    /** Value axis label color */
-    valueAxisLabel: "#555555",
-    /** Value axis background */
-    valueAxisBackground: "#111111"};
 
 const useStyles$z = makeStyles({
     root: {
@@ -7757,7 +7743,7 @@ const AnimationEntry = ({ animation }) => {
                 return [];
         }
     };
-    return (jsxs("div", { className: styles.root, children: [jsxs("div", { className: `${styles.entry} ${isActive ? styles.entryActive : ""}`, onClick: handleClick, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [jsx("div", { className: styles.chevron, children: isExpandable ? (jsx(Button, { icon: isExpanded ? ChevronDownRegular : ChevronRightRegular, appearance: "transparent", onClick: handleExpandClick })) : (jsx(CircleSmallFilled, {})) }), jsx("span", { className: styles.name, title: animation.name, children: animation.name }), jsxs("div", { className: `${styles.actions} ${isHovered || isEditOpen ? styles.actionsVisible : ""}`, children: [jsx(Popover, { open: isEditOpen, onOpenChange: handleEditOpenChange, positioning: "after", trigger: jsx(Button, { icon: SettingsRegular, appearance: "transparent", title: "Edit animation" }), children: jsx(EditAnimationPanel, { animation: animation, onClose: () => setIsEditOpen(false) }) }), jsx(Button, { icon: DeleteRegular, appearance: "transparent", onClick: handleDelete, title: "Delete animation" })] })] }), isExpanded && getSubEntries().map((sub) => jsx(AnimationSubEntry, { animation: animation, subName: sub.name, color: sub.color }, sub.name))] }));
+    return (jsxs("div", { className: styles.root, children: [jsxs("div", { className: `${styles.entry} ${isActive ? styles.entryActive : ""}`, onClick: handleClick, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [jsx("div", { className: styles.chevron, children: isExpandable ? (jsx(Button, { icon: isExpanded ? ChevronDownRegular : ChevronRightRegular, appearance: "transparent", onClick: handleExpandClick })) : (jsx(CircleSmallFilled, {})) }), jsx("div", { className: styles.name, title: animation.name, children: animation.name }), jsxs("div", { className: `${styles.actions} ${isHovered || isEditOpen ? styles.actionsVisible : ""}`, children: [jsx(Popover, { open: isEditOpen, onOpenChange: handleEditOpenChange, positioning: "after", trigger: jsx(Button, { icon: SettingsRegular, appearance: "transparent", title: "Edit animation" }), children: jsx(EditAnimationPanel, { animation: animation, onClose: () => setIsEditOpen(false) }) }), jsx(Button, { icon: DeleteRegular, appearance: "transparent", onClick: handleDelete, title: "Delete animation" })] })] }), isExpanded && getSubEntries().map((sub) => jsx(AnimationSubEntry, { animation: animation, subName: sub.name, color: sub.color }, sub.name))] }));
 };
 /**
  * Sub-entry for vector/color animations (X, Y, Z, R, G, B, etc.)
@@ -7780,7 +7766,7 @@ const AnimationSubEntry = ({ animation, subName, color }) => {
         }
         observables.onActiveAnimationChanged.notifyObservers({});
     }, [animation, color, isThisChannelActive, actions, observables]);
-    return (jsxs("div", { className: `${styles.entry} ${styles.subEntry} ${!isEnabled ? styles.subEntryDisabled : ""}`, onClick: handleClick, children: [jsx("div", { className: styles.colorDot, style: { backgroundColor: color } }), jsx("span", { className: styles.name, children: subName })] }));
+    return (jsxs("div", { className: `${styles.entry} ${styles.subEntry} ${!isEnabled ? styles.subEntryDisabled : ""}`, onClick: handleClick, children: [jsx("div", { className: styles.colorDot, style: { backgroundColor: color } }), jsx("div", { className: styles.name, children: subName })] }));
 };
 /**
  * Animation list component showing all animations
@@ -8054,7 +8040,7 @@ const AddAnimationPanel = ({ onClose }) => {
         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("span", { 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" })] })] }));
+    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" })] })] }));
 };
 
 const useStyles$w = makeStyles({
@@ -8147,7 +8133,7 @@ const LoadAnimationPanel = ({ onClose }) => {
             setLoadError("Unable to load animations: " + err);
         }
     }, [snippetIdInput, loadAnimations]);
-    return (jsxs("div", { className: styles.root, children: [jsx("div", { className: styles.header, children: jsx("span", { className: styles.title, children: "Load Animations" }) }), jsxs("div", { className: styles.section, children: [jsx(Label, { children: "From Snippet Server" }), jsxs("div", { className: styles.row, children: [jsx(Input, { className: styles.input, placeholder: "Snippet ID", value: snippetIdInput, onChange: (_, data) => setSnippetIdInput(data.value) }), jsx(Button, { appearance: "primary", onClick: loadFromSnippetServer, disabled: !snippetIdInput.trim(), label: "Load" })] }), loadError && jsx("span", { className: styles.errorText, children: loadError })] }), jsxs("div", { className: styles.section, children: [jsx(Label, { children: "From File" }), jsx(UploadButton, { appearance: "subtle", onUpload: loadFromFile, accept: ".json", label: "Browse..." })] }), loadedSnippetId && jsxs("div", { className: styles.snippetId, children: ["Loaded Snippet ID: ", loadedSnippetId] })] }));
+    return (jsxs("div", { className: styles.root, children: [jsx("div", { className: styles.header, children: jsx("div", { className: styles.title, children: "Load Animations" }) }), jsxs("div", { className: styles.section, children: [jsx(Label, { children: "From Snippet Server" }), jsxs("div", { className: styles.row, children: [jsx(Input, { className: styles.input, placeholder: "Snippet ID", value: snippetIdInput, onChange: (_, data) => setSnippetIdInput(data.value) }), jsx(Button, { appearance: "primary", onClick: loadFromSnippetServer, disabled: !snippetIdInput.trim(), label: "Load" })] }), loadError && jsx("div", { className: styles.errorText, children: loadError })] }), jsxs("div", { className: styles.section, children: [jsx(Label, { children: "From File" }), jsx(UploadButton, { appearance: "subtle", onUpload: loadFromFile, accept: ".json", label: "Browse..." })] }), loadedSnippetId && jsxs("div", { className: styles.snippetId, children: ["Loaded Snippet ID: ", loadedSnippetId] })] }));
 };
 
 class StringTools {
@@ -8350,11 +8336,11 @@ const SaveAnimationPanel = ({ onClose: _onClose }) => {
         };
         xmlHttp.send(JSON.stringify(dataToSend));
     }, [getJson, snippetId]);
-    return (jsxs("div", { className: styles.root, children: [jsx("div", { className: styles.header, children: jsx("span", { className: styles.title, children: "Save Animations" }) }), jsx("div", { className: styles.list, children: state.animations?.map((anim, i) => {
+    return (jsxs("div", { className: styles.root, children: [jsx("div", { className: styles.header, children: jsx("div", { className: styles.title, children: "Save Animations" }) }), jsx("div", { className: styles.list, children: state.animations?.map((anim, i) => {
                     const animation = getAnimation(anim);
                     const isChecked = selectedAnimations.includes(animation);
                     return jsx(Checkbox$1, { label: animation.name, checked: isChecked, onChange: (_, data) => toggleAnimation(animation, !!data.checked) }, i);
-                }) }), jsxs("div", { className: styles.buttons, children: [jsx(Button, { appearance: "primary", onClick: saveToSnippetServer, disabled: selectedAnimations.length === 0 || isSaving, label: isSaving ? "Saving..." : "Save to Snippet Server" }), jsx(Button, { appearance: "secondary", onClick: saveToFile, disabled: selectedAnimations.length === 0, label: "Save to File" })] }), saveError && jsx("span", { className: styles.errorText, children: saveError }), snippetId && jsxs("div", { className: styles.snippetId, children: ["Saved! Snippet ID: ", snippetId] })] }));
+                }) }), jsxs("div", { className: styles.buttons, children: [jsx(Button, { appearance: "primary", onClick: saveToSnippetServer, disabled: selectedAnimations.length === 0 || isSaving, label: isSaving ? "Saving..." : "Save to Snippet Server" }), jsx(Button, { appearance: "secondary", onClick: saveToFile, disabled: selectedAnimations.length === 0, label: "Save to File" })] }), saveError && jsx("div", { className: styles.errorText, children: saveError }), snippetId && jsxs("div", { className: styles.snippetId, children: ["Saved! Snippet ID: ", snippetId] })] }));
 };
 
 const useStyles$u = makeStyles({
@@ -8475,7 +8461,7 @@ const SideBar = () => {
             }
         }
     }, [state.animations, state.useTargetAnimations]);
-    return (jsxs("div", { className: styles.root, children: [jsxs("div", { className: styles.menuBar, children: [!state.useTargetAnimations && (jsxs(Fragment, { children: [jsx(Popover, { open: openPopover === "add", onOpenChange: (open) => setOpenPopover(open ? "add" : null), positioning: "below-start", trigger: jsx(Button, { icon: AddRegular, appearance: openPopover === "add" ? "primary" : "subtle", title: "Add new animation" }), children: jsx(AddAnimationPanel, { onClose: () => setOpenPopover(null) }) }), jsx(Popover, { open: openPopover === "load", onOpenChange: (open) => setOpenPopover(open ? "load" : null), positioning: "below-start", trigger: jsx(Button, { icon: ArrowDownloadRegular, appearance: openPopover === "load" ? "primary" : "subtle", title: "Load animations" }), children: jsx(LoadAnimationPanel, { onClose: () => setOpenPopover(null) }) })] })), jsx(Popover, { open: openPopover === "save", onOpenChange: (open) => setOpenPopover(open ? "save" : null), positioning: "below-start", trigger: jsx(Button, { icon: SaveRegular, appearance: openPopover === "save" ? "primary" : "subtle", title: "Save current animations" }), children: jsx(SaveAnimationPanel, { onClose: () => setOpenPopover(null) }) }), jsxs("div", { className: styles.fpsInput, children: [jsx(SpinButton, { className: styles.spinButton, value: fps, onChange: handleFpsChange, min: 1, max: 120 }), jsx("span", { className: styles.fpsLabel, children: "fps" })] })] }), jsx("div", { className: styles.content, children: jsx(AnimationList, {}) })] }));
+    return (jsxs("div", { className: styles.root, children: [jsxs("div", { className: styles.menuBar, children: [!state.useTargetAnimations && (jsxs(Fragment, { children: [jsx(Popover, { open: openPopover === "add", onOpenChange: (open) => setOpenPopover(open ? "add" : null), positioning: "below-start", trigger: jsx(Button, { icon: AddRegular, appearance: openPopover === "add" ? "primary" : "subtle", title: "Add new animation" }), children: jsx(AddAnimationPanel, { onClose: () => setOpenPopover(null) }) }), jsx(Popover, { open: openPopover === "load", onOpenChange: (open) => setOpenPopover(open ? "load" : null), positioning: "below-start", trigger: jsx(Button, { icon: ArrowDownloadRegular, appearance: openPopover === "load" ? "primary" : "subtle", title: "Load animations" }), children: jsx(LoadAnimationPanel, { onClose: () => setOpenPopover(null) }) })] })), jsx(Popover, { open: openPopover === "save", onOpenChange: (open) => setOpenPopover(open ? "save" : null), positioning: "below-start", trigger: jsx(Button, { icon: SaveRegular, appearance: openPopover === "save" ? "primary" : "subtle", title: "Save current animations" }), children: jsx(SaveAnimationPanel, { onClose: () => setOpenPopover(null) }) }), jsxs("div", { className: styles.fpsInput, children: [jsx(SpinButton, { className: styles.spinButton, value: fps, onChange: handleFpsChange, min: 1, max: 120 }), jsx("div", { className: styles.fpsLabel, children: "fps" })] })] }), jsx("div", { className: styles.content, children: jsx(AnimationList, {}) })] }));
 };
 
 class CurveData {
@@ -8762,10 +8748,15 @@ const KeyPointComponent = (props) => {
     const outVec = useRef(new Vector2());
     const storedLengthIn = useRef(0);
     const storedLengthOut = useRef(0);
+    // Track current position in refs to avoid stale closure issues during drag
+    const currentXRef = useRef(initialX);
+    const currentYRef = useRef(initialY);
     // Update position when props change
     useEffect(() => {
         setCurrentX(initialX);
         setCurrentY(initialY);
+        currentXRef.current = initialX;
+        currentYRef.current = initialY;
     }, [initialX, initialY]);
     // Helper to compare curves by identity (animation + property) rather than reference
     const curvesMatch = useCallback((c1, c2) => {
@@ -8810,16 +8801,15 @@ const KeyPointComponent = (props) => {
         const keys = curve.keys;
         const keyValue = keys[keyId].value;
         const keyFrame = keys[keyId].frame;
-        // Work with a clone to avoid mutating the original vector
-        const workVec = vec.clone();
-        // Ensure vector points in the correct direction
-        if (isIn && workVec.x >= 0) {
-            workVec.x = -0.01;
+        // Ensure vector points in the correct direction (modifies vec directly like v1)
+        if (isIn && vec.x >= 0) {
+            vec.x = -0.01;
         }
-        else if (!isIn && workVec.x <= 0) {
-            workVec.x = 0.01;
+        else if (!isIn && vec.x <= 0) {
+            vec.x = 0.01;
         }
-        const currentPosition = workVec.clone();
+        // Clone AFTER direction correction (like v1)
+        const currentPosition = vec.clone();
         currentPosition.normalize();
         currentPosition.scaleInPlace(storedLength);
         const value = isIn ? keyValue - invertY(currentPosition.y + currentY) : invertY(currentPosition.y + currentY) - keyValue;
@@ -9054,9 +9044,9 @@ const KeyPointComponent = (props) => {
                 lockX.current = false;
                 lockY.current = false;
             }
-            // Calculate new position
-            let newX = currentX + (lockX.current ? 0 : diffX * scale);
-            let newY = currentY + (lockY.current ? 0 : diffY * scale);
+            // Calculate new position using refs to avoid stale closure
+            let newX = currentXRef.current + (lockX.current ? 0 : diffX * scale);
+            let newY = currentYRef.current + (lockY.current ? 0 : diffY * scale);
             // Constrain to valid frame range
             const previousX = getPreviousX();
             const nextX = getNextX();
@@ -9074,15 +9064,18 @@ const KeyPointComponent = (props) => {
                 observables.onFrameSet.notifyObservers(frame);
             }
             else {
-                newX = currentX;
+                newX = currentXRef.current;
             }
             // Check value lock constraints
             if (state.lockLastFrameValue && keyId === curve.keys.length - 1) {
-                newY = currentY;
+                newY = currentYRef.current;
             }
             const value = invertY(newY);
             onKeyValueChanged(value);
             observables.onValueSet.notifyObservers(value);
+            // Update both ref and state
+            currentXRef.current = newX;
+            currentYRef.current = newY;
             setCurrentX(newX);
             setCurrentY(newY);
         }
@@ -9104,35 +9097,41 @@ const KeyPointComponent = (props) => {
                 }
             }
             if (controlMode.current === ControlMode.TangentLeft) {
-                // Calculate the moved vector position
-                const movedInVec = inVec.current.clone();
-                movedInVec.x += diffX * scale;
-                movedInVec.y += diffY * scale;
-                const newSlope = extractSlope(movedInVec, storedLengthIn.current, true);
+                // Update the vector in place - multiply by scale to match v1 behavior
+                inVec.current.x += diffX * scale;
+                inVec.current.y += diffY * scale;
+                const newSlope = extractSlope(inVec.current, storedLengthIn.current, true);
                 curve.updateInTangentFromControlPoint(keyId, newSlope);
                 if (isLockedTangent) {
                     // Rotate the moved inVec by -angleDiff to get the outVec direction
                     const tmpVector = new Vector2();
-                    movedInVec.rotateToRef(-angleDiff, tmpVector);
+                    inVec.current.rotateToRef(-angleDiff, tmpVector);
                     tmpVector.x = Math.abs(tmpVector.x); // Ensure out tangent points right
                     const outSlope = extractSlope(tmpVector, storedLengthOut.current, false);
                     curve.updateOutTangentFromControlPoint(keyId, outSlope);
+                    // Update outVec visually to match the rotated position
+                    outVec.current.copyFrom(tmpVector);
+                    outVec.current.normalize();
+                    outVec.current.scaleInPlace(100 * scale);
                 }
             }
             else if (controlMode.current === ControlMode.TangentRight) {
-                // Calculate the moved vector position
-                const movedOutVec = outVec.current.clone();
-                movedOutVec.x += diffX * scale;
-                movedOutVec.y += diffY * scale;
-                const newSlope = extractSlope(movedOutVec, storedLengthOut.current, false);
+                // Update the vector in place - multiply by scale to match v1 behavior
+                outVec.current.x += diffX * scale;
+                outVec.current.y += diffY * scale;
+                const newSlope = extractSlope(outVec.current, storedLengthOut.current, false);
                 curve.updateOutTangentFromControlPoint(keyId, newSlope);
                 if (isLockedTangent) {
                     // Rotate the moved outVec by angleDiff to get the inVec direction
                     const tmpVector = new Vector2();
-                    movedOutVec.rotateToRef(angleDiff, tmpVector);
+                    outVec.current.rotateToRef(angleDiff, tmpVector);
                     tmpVector.x = -Math.abs(tmpVector.x); // Ensure in tangent points left
                     const inSlope = extractSlope(tmpVector, storedLengthIn.current, true);
                     curve.updateInTangentFromControlPoint(keyId, inSlope);
+                    // Update inVec visually to match the rotated position
+                    inVec.current.copyFrom(tmpVector);
+                    inVec.current.normalize();
+                    inVec.current.scaleInPlace(100 * scale);
                 }
             }
             actions.refreshTarget();
@@ -9142,8 +9141,6 @@ const KeyPointComponent = (props) => {
         sourcePointerX.current = evt.nativeEvent.offsetX;
         sourcePointerY.current = evt.nativeEvent.offsetY;
     }, [
-        currentX,
-        currentY,
         selectedState,
         getPreviousX,
         getNextX,
@@ -9195,6 +9192,7 @@ const KeyPointComponent = (props) => {
     const hasDefinedInTangent = curve.hasDefinedInTangent(keyId);
     const hasDefinedOutTangent = curve.hasDefinedOutTangent(keyId);
     // Calculate tangent vectors from curve data (like v1's render method)
+    // This recalculates on every render, including after tangent updates
     const convertedX = invertX(currentX);
     const convertedY = invertY(currentY);
     if (hasDefinedInTangent) {
@@ -9254,30 +9252,38 @@ const useStyles$t = makeStyles({
         strokeDasharray: "4 4",
     },
     zeroLine: {
-        stroke: GraphColors.zeroLine,
+        stroke: tokens.colorNeutralStroke1,
         strokeWidth: "1px",
     },
     selectionRect: {
         fill: "rgba(255, 255, 255, 0.1)",
-        stroke: GraphColors.selectionStroke,
+        stroke: tokens.colorNeutralForeground1,
         strokeWidth: "1px",
         strokeDasharray: "4 4",
     },
     valueAxisLabel: {
-        fill: GraphColors.valueAxisLabel,
+        fill: tokens.colorNeutralForeground3,
         fontSize: "10px",
         fontFamily: "acumin-pro-condensed, sans-serif",
         userSelect: "none",
     },
     valueAxisBackground: {
-        fill: GraphColors.valueAxisBackground,
+        fill: tokens.colorNeutralBackground1,
     },
     activeRangeOverlay: {
         position: "absolute",
         top: 0,
         height: "100%",
-        backgroundColor: "rgba(38, 82, 128, 0.3)",
-        border: "1px solid rgba(78, 140, 206, 0.5)",
+        backgroundColor: tokens.colorBrandBackground2,
+        opacity: 0.3,
+        pointerEvents: "none",
+    },
+    inactiveRangeOverlay: {
+        position: "absolute",
+        top: 0,
+        height: "100%",
+        backgroundColor: tokens.colorNeutralBackgroundStatic,
+        opacity: 0.6,
         pointerEvents: "none",
     },
 });
@@ -9671,7 +9677,17 @@ const Graph = ({ width, height }) => {
     const activeRangeLeft = frameToX(state.fromKey);
     const activeRangeRight = frameToX(state.toKey);
     const activeRangeWidth = activeRangeRight - activeRangeLeft;
-    return (jsxs("div", { className: styles.root, children: [state.activeAnimations.length > 0 && activeRangeWidth > 0 && (jsx("div", { className: styles.activeRangeOverlay, style: {
+    // Calculate inactive (outside range) overlay positions
+    const leftInactiveWidth = Math.max(0, activeRangeLeft - graphOffsetX);
+    const rightInactiveLeft = Math.min(activeRangeRight, safeWidth);
+    const rightInactiveWidth = Math.max(0, safeWidth - rightInactiveLeft);
+    return (jsxs("div", { className: styles.root, children: [state.activeAnimations.length > 0 && leftInactiveWidth > 0 && (jsx("div", { className: styles.inactiveRangeOverlay, style: {
+                    left: graphOffsetX,
+                    width: leftInactiveWidth,
+                } })), state.activeAnimations.length > 0 && rightInactiveWidth > 0 && (jsx("div", { className: styles.inactiveRangeOverlay, style: {
+                    left: rightInactiveLeft,
+                    width: rightInactiveWidth,
+                } })), state.activeAnimations.length > 0 && activeRangeWidth > 0 && (jsx("div", { className: styles.activeRangeOverlay, style: {
                     left: Math.max(graphOffsetX, activeRangeLeft),
                     width: Math.min(activeRangeWidth, safeWidth - Math.max(graphOffsetX, activeRangeLeft)),
                 } })), jsxs("svg", { ref: svgRef, className: styles.svg, width: safeWidth, height: safeHeight, onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp, onWheel: handleWheel, children: [renderGrid(), curves.map((curve) => {
@@ -9709,7 +9725,7 @@ const useStyles$s = makeStyles({
         position: "absolute",
         width: "2px",
         height: "100%",
-        backgroundColor: tokens.colorNeutralForegroundOnBrand,
+        backgroundColor: tokens.colorBrandForeground1,
         pointerEvents: "auto",
         cursor: "ew-resize",
     },
@@ -9718,7 +9734,7 @@ const useStyles$s = makeStyles({
         top: 0,
         width: "20px",
         height: "20px",
-        backgroundColor: tokens.colorNeutralForegroundOnBrand,
+        backgroundColor: tokens.colorBrandBackground,
         borderRadius: "50%",
         border: `2px solid ${tokens.colorNeutralBackground1}`,
         pointerEvents: "auto",
@@ -9726,7 +9742,7 @@ const useStyles$s = makeStyles({
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
-        color: tokens.colorNeutralBackground1,
+        color: tokens.colorNeutralForegroundOnBrand,
         fontSize: "9px",
         fontWeight: "bold",
         userSelect: "none",
@@ -9972,7 +9988,7 @@ const FrameBar = ({ width }) => {
         for (let frame = startFrame; frame <= endFrame; frame += tickSpacing) {
             const x = graphOffsetX + ((frame - referenceMinFrame) / range) * viewWidth * scale + offsetX;
             if (x >= graphOffsetX && x <= width) {
-                ticks.push(jsx("div", { className: styles.tick, style: { left: x } }, `tick-${frame}`), jsx("span", { className: styles.label, style: { left: x - 10 }, children: frame }, `label-${frame}`));
+                ticks.push(jsx("div", { className: styles.tick, style: { left: x } }, `tick-${frame}`), jsx("div", { className: styles.label, style: { left: x - 10 }, children: frame }, `label-${frame}`));
             }
         }
         return ticks;
@@ -9985,7 +10001,7 @@ const useStyles$q = makeStyles({
         display: "flex",
         flexDirection: "column",
         height: "100%",
-        backgroundColor: "#222222",
+        backgroundColor: tokens.colorNeutralBackground2,
         overflow: "hidden",
         userSelect: "none",
         pointerEvents: "none",
@@ -9995,13 +10011,13 @@ const useStyles$q = makeStyles({
         height: "100%",
     },
     tickLabel: {
-        fill: "#555555",
+        fill: tokens.colorNeutralForeground3,
         fontSize: "12px",
         fontFamily: "acumin-pro-condensed, sans-serif",
         textAnchor: "middle",
     },
     tickLine: {
-        stroke: "#333333",
+        stroke: tokens.colorNeutralStroke2,
         strokeWidth: "0.5px",
     },
     keyframeLine: {
@@ -10009,8 +10025,8 @@ const useStyles$q = makeStyles({
         strokeWidth: "0.5px",
     },
     activeFrameLine: {
-        stroke: "#ffffff",
-        strokeWidth: "0.5px",
+        stroke: tokens.colorBrandForeground1,
+        strokeWidth: "1px",
     },
 });
 const TICK_DISTANCE = 25;
@@ -10212,7 +10228,7 @@ const useStyles$o = makeStyles({
         display: "flex",
         flexDirection: "column",
         justifyContent: "space-between",
-        "& span": {
+        "& div": {
             height: "2px",
             width: "100%",
             backgroundColor: tokens.colorNeutralForeground3,
@@ -10359,7 +10375,7 @@ const RangeSelector = () => {
     return (jsx("div", { ref: containerRef, className: styles.root, children: jsxs("div", { ref: scrollbarRef, className: styles.scrollbar, style: {
                 left: `${leftPos}px`,
                 right: `${rightPos}px`,
-            }, 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("span", {}), jsx("span", {}), jsx("span", {})] }) }), 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("span", {}), jsx("span", {}), jsx("span", {})] }) })] }) }));
+            }, 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", {})] }) })] }) }));
 };
 
 const useStyles$n = makeStyles({
@@ -10518,16 +10534,10 @@ const BottomBar = () => {
         }
     }, [state.clipLength, observables]);
     const hasActiveAnimations = state.activeAnimations.length > 0;
-    return (jsxs("div", { className: styles.root, children: [jsx("div", { className: styles.mediaControls, children: jsx(MediaControls, { hasActiveAnimations: hasActiveAnimations, isPlaying: state.isPlaying, forwardAnimation: state.forwardAnimation, onPlayForward: handlePlayForward, onPlayBackward: handlePlayBackward, onStop: handleStop, onPrevKey: handlePrevKey, onNextKey: handleNextKey, onFirstFrame: handleFirstFrame, onLastFrame: handleLastFrame }) }), jsxs("div", { className: styles.frameDisplay, children: [jsx("span", { className: styles.frameLabel, children: "Frame:" }), jsx(SpinButton, { className: styles.spinButton, value: displayFrame, onChange: handleFrameChange, min: state.fromKey, max: state.toKey, disabled: !hasActiveAnimations })] }), jsx(RangeSelector, {}), jsxs("div", { className: styles.clipLengthSection, children: [jsx("span", { className: styles.frameLabel, children: "Clip Length:" }), jsx(SpinButton, { className: styles.spinButton, value: clipLength, onChange: handleClipLengthChange, min: 1, disabled: !hasActiveAnimations })] })] }));
+    return (jsxs("div", { className: styles.root, children: [jsx("div", { className: styles.mediaControls, children: jsx(MediaControls, { hasActiveAnimations: hasActiveAnimations, isPlaying: state.isPlaying, forwardAnimation: state.forwardAnimation, onPlayForward: handlePlayForward, onPlayBackward: handlePlayBackward, onStop: handleStop, onPrevKey: handlePrevKey, onNextKey: handleNextKey, onFirstFrame: handleFirstFrame, onLastFrame: handleLastFrame }) }), jsxs("div", { className: styles.frameDisplay, children: [jsx("div", { className: styles.frameLabel, children: "Frame:" }), jsx(SpinButton, { className: styles.spinButton, value: displayFrame, onChange: handleFrameChange, min: state.fromKey, max: state.toKey, disabled: !hasActiveAnimations })] }), jsx(RangeSelector, {}), jsxs("div", { className: styles.clipLengthSection, children: [jsx("div", { className: styles.frameLabel, children: "Clip Length:" }), jsx(SpinButton, { className: styles.spinButton, value: clipLength, onChange: handleClipLengthChange, min: 1, disabled: !hasActiveAnimations })] })] }));
 };
 
 const useStyles$m = makeStyles({
-    fluentProvider: {
-        width: "100%",
-        height: "100%",
-        display: "flex",
-        flexDirection: "column",
-    },
     root: {
         display: "flex",
         flexDirection: "column",
@@ -10667,8 +10677,7 @@ const CurveEditorContent = () => {
  */
 const CurveEditor = (props) => {
     const { scene, target, animations, rootAnimationGroup, title, useTargetAnimations } = props;
-    const styles = useStyles$m();
-    return (jsx(FluentProvider, { theme: webDarkTheme, className: styles.fluentProvider, children: jsx(CurveEditorProvider, { scene: scene, target: target, animations: animations, rootAnimationGroup: rootAnimationGroup, title: title, useTargetAnimations: useTargetAnimations, children: jsx(CurveEditorContent, {}) }) }));
+    return (jsx(CurveEditorProvider, { scene: scene, target: target, animations: animations, rootAnimationGroup: rootAnimationGroup, title: title, useTargetAnimations: useTargetAnimations, children: jsx(CurveEditorContent, {}) }));
 };
 
 /**
@@ -10896,7 +10905,7 @@ const AtmospherePropertiesServiceDefinition = {
         }
         const atmosphereContentRegistration = propertiesService.addSectionContent({
             key: "Atmosphere Properties",
-            predicate: (entity) => entity instanceof Atmosphere,
+            predicate: (entity) => entity.getClassName?.() === "Atmosphere",
             content: [
                 {
                     section: "General",
@@ -10932,6 +10941,63 @@ const AtmospherePropertiesServiceDefinition = {
     },
 };
 
+function useSoundState(sound) {
+    const stateChangedObservables = [
+        useInterceptObservable("function", sound, "play"),
+        useInterceptObservable("function", sound, "pause"),
+        useInterceptObservable("function", sound, "stop"),
+    ];
+    const isPaused = useObservableState(useCallback(() => sound.isPaused, [sound]), ...stateChangedObservables);
+    const isPlaying = useObservableState(useCallback(() => sound.isPlaying, [sound]), ...stateChangedObservables);
+    return isPaused ? "Paused" : isPlaying ? "Playing" : "Stopped";
+}
+const SoundGeneralProperties = (props) => {
+    const { sound } = props;
+    const soundState = useSoundState(sound);
+    return (jsx(Fragment, { children: jsx(TextPropertyLine, { label: "Status", value: soundState }) }));
+};
+const SoundCommandProperties = (props) => {
+    const { sound } = props;
+    const soundState = useSoundState(sound);
+    const volume = useObservableState(useCallback(() => sound.getVolume(), [sound]), useInterceptObservable("function", sound, "setVolume"));
+    return (jsxs(Fragment, { children: [jsx(ButtonLine, { label: soundState === "Playing" ? "Pause" : "Play", icon: soundState === "Playing" ? PauseRegular : PlayRegular, onClick: () => {
+                    if (soundState === "Playing") {
+                        sound.pause();
+                    }
+                    else {
+                        sound.play();
+                    }
+                } }), jsx(Property, { component: SyncedSliderPropertyLine, label: "Volume", functionPath: "setVolume", value: volume, min: 0, max: 5, step: 0.1, onChange: (value) => {
+                    sound.setVolume(value);
+                } }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Loop", target: sound, propertyKey: "loop" })] }));
+};
+
+const AudioPropertiesServiceDefinition = {
+    friendlyName: "Audio Properties",
+    consumes: [PropertiesServiceIdentity],
+    factory: (propertiesService) => {
+        const soundContentRegistration = propertiesService.addSectionContent({
+            key: "Sound General Properties",
+            predicate: (entity) => entity instanceof Sound,
+            content: [
+                {
+                    section: "General",
+                    component: ({ context }) => jsx(SoundGeneralProperties, { sound: context }),
+                },
+                {
+                    section: "Commands",
+                    component: ({ context }) => jsx(SoundCommandProperties, { sound: context }),
+                },
+            ],
+        });
+        return {
+            dispose: () => {
+                soundContentRegistration.dispose();
+            },
+        };
+    },
+};
+
 const ArcRotateCameraTransformProperties = (props) => {
     const { camera, settings } = props;
     const [toDisplayAngle, fromDisplayAngle, useDegrees] = useAngleConverters(settings);
@@ -13350,6 +13416,23 @@ const MeshDisplayProperties = (props) => {
                     { value: Constants.MATERIAL_CounterClockWiseSideOrientation, label: "CounterClockwise" },
                 ] })] }));
 };
+const MeshMorphTargetsProperties = (props) => {
+    const { mesh } = props;
+    if (!mesh.morphTargetManager) {
+        return null;
+    }
+    const morphTargets = [];
+    for (let index = 0; index < mesh.morphTargetManager.numTargets; index++) {
+        const target = mesh.morphTargetManager.getTarget(index);
+        if (target.hasPositions) {
+            morphTargets.push(target);
+        }
+    }
+    if (morphTargets.length === 0) {
+        return null;
+    }
+    return (jsx(Fragment, { children: morphTargets.map((target, index) => (jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: target.name || `Target ${index}`, description: `Influence of morph target "${target.name || `Target ${index}`}"`, target: target, propertyKey: "influence", min: 0, max: 1, step: 0.01 }, index))) }));
+};
 
 const NodeGeneralProperties = (props) => {
     const { node, selectionService } = props;
@@ -13418,6 +13501,10 @@ const NodePropertiesServiceDefinition = {
                     section: "Display",
                     component: ({ context }) => jsx(MeshDisplayProperties, { mesh: context }),
                 },
+                {
+                    section: "Morph Targets",
+                    component: ({ context }) => jsx(MeshMorphTargetsProperties, { mesh: context }),
+                },
             ],
         });
         const gaussianSplattingContentRegistration = propertiesService.addSectionContent({
@@ -18626,6 +18713,66 @@ const SkeletonExplorerServiceDefinition = {
     },
 };
 
+const SoundExplorerServiceDefinition = {
+    friendlyName: "Sound Explorer",
+    consumes: [SceneExplorerServiceIdentity, SceneContextIdentity],
+    factory: (sceneExplorerService, sceneContext) => {
+        const scene = sceneContext.currentScene;
+        if (!scene) {
+            return undefined;
+        }
+        const soundAddedObservable = new Observable();
+        const soundRemovedObservable = new Observable();
+        const addSoundHook = InterceptFunction(scene.mainSoundTrack, "addSound", {
+            afterCall: (sound) => soundAddedObservable.notifyObservers(sound),
+        });
+        const removeSoundHook = InterceptFunction(scene.mainSoundTrack, "removeSound", {
+            afterCall: (sound) => soundRemovedObservable.notifyObservers(sound),
+        });
+        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();
+                    },
+                });
+                return {
+                    get name() {
+                        return sound.name;
+                    },
+                    onChange: onChangeObservable,
+                    dispose: () => {
+                        nameHookToken.dispose();
+                        displayNameHookToken.dispose();
+                        onChangeObservable.clear();
+                    },
+                };
+            },
+            entityIcon: () => jsx(SoundWaveCircleRegular, {}),
+            getEntityAddedObservables: () => [soundAddedObservable],
+            getEntityRemovedObservables: () => [soundRemovedObservable],
+        });
+        return {
+            dispose: () => {
+                addSoundHook.dispose();
+                removeSoundHook.dispose();
+                soundAddedObservable.clear();
+                soundRemovedObservable.clear();
+                sectionRegistration.dispose();
+            },
+        };
+    },
+};
+
 const SpriteManagerExplorerServiceDefinition = {
     friendlyName: "Sprite Manager Explorer",
     consumes: [SceneExplorerServiceIdentity, SceneContextIdentity],
@@ -19554,9 +19701,9 @@ function ShowInspector(scene, options = {}) {
         // Helps with managing gizmos and a shared utility layer.
         GizmoServiceDefinition, 
         // Scene explorer tab and related services.
-        SceneExplorerServiceDefinition, NodeExplorerServiceDefinition, SkeletonExplorerServiceDefinition, MaterialExplorerServiceDefinition, TextureExplorerServiceDefinition, PostProcessExplorerServiceDefinition, RenderingPipelineExplorerServiceDefinition, EffectLayerExplorerServiceDefinition, ParticleSystemExplorerServiceDefinition, SpriteManagerExplorerServiceDefinition, AnimationGroupExplorerServiceDefinition, GuiExplorerServiceDefinition, FrameGraphExplorerServiceDefinition, AtmosphereExplorerServiceDefinition, 
+        SceneExplorerServiceDefinition, NodeExplorerServiceDefinition, SkeletonExplorerServiceDefinition, MaterialExplorerServiceDefinition, TextureExplorerServiceDefinition, PostProcessExplorerServiceDefinition, RenderingPipelineExplorerServiceDefinition, EffectLayerExplorerServiceDefinition, ParticleSystemExplorerServiceDefinition, SpriteManagerExplorerServiceDefinition, AnimationGroupExplorerServiceDefinition, GuiExplorerServiceDefinition, FrameGraphExplorerServiceDefinition, AtmosphereExplorerServiceDefinition, SoundExplorerServiceDefinition, 
         // Properties pane tab and related services.
-        ScenePropertiesServiceDefinition, PropertiesServiceDefinition, TexturePropertiesServiceDefinition, CommonPropertiesServiceDefinition, TransformPropertiesServiceDefinition, AnimationPropertiesServiceDefinition, NodePropertiesServiceDefinition, PhysicsPropertiesServiceDefinition, SkeletonPropertiesServiceDefinition, MaterialPropertiesServiceDefinition, LightPropertiesServiceDefinition, SpritePropertiesServiceDefinition, ParticleSystemPropertiesServiceDefinition, CameraPropertiesServiceDefinition, PostProcessPropertiesServiceDefinition, RenderingPipelinePropertiesServiceDefinition, EffectLayerPropertiesServiceDefinition, FrameGraphPropertiesServiceDefinition, AnimationGroupPropertiesServiceDefinition, MetadataPropertiesServiceDefinition, AtmospherePropertiesServiceDefinition, 
+        ScenePropertiesServiceDefinition, PropertiesServiceDefinition, TexturePropertiesServiceDefinition, CommonPropertiesServiceDefinition, TransformPropertiesServiceDefinition, AnimationPropertiesServiceDefinition, NodePropertiesServiceDefinition, PhysicsPropertiesServiceDefinition, SkeletonPropertiesServiceDefinition, MaterialPropertiesServiceDefinition, LightPropertiesServiceDefinition, SpritePropertiesServiceDefinition, ParticleSystemPropertiesServiceDefinition, CameraPropertiesServiceDefinition, PostProcessPropertiesServiceDefinition, RenderingPipelinePropertiesServiceDefinition, EffectLayerPropertiesServiceDefinition, FrameGraphPropertiesServiceDefinition, AnimationGroupPropertiesServiceDefinition, MetadataPropertiesServiceDefinition, AtmospherePropertiesServiceDefinition, AudioPropertiesServiceDefinition, 
         // Texture editor and related services.
         TextureEditorServiceDefinition, 
         // Debug pane tab and related services.
@@ -19800,16 +19947,7 @@ function ConvertOptions(v1Options) {
                 const sceneExplorerSectionRegistrations = additionalNodes.map((node) => sceneExplorerService.addSection({
                     displayName: node.name,
                     order: Number.MAX_SAFE_INTEGER,
-                    getRootEntities: () => {
-                        const children = node.getContent();
-                        for (const child of children) {
-                            const entity = child;
-                            if (!entity.uniqueId) {
-                                entity.uniqueId = UniqueIdGenerator.UniqueId;
-                            }
-                        }
-                        return children;
-                    },
+                    getRootEntities: () => node.getContent(),
                     getEntityDisplayInfo: (entity) => {
                         const onChangeObservable = new Observable();
                         const nameHookToken = InterceptProperty(entity, "name", {
@@ -20398,4 +20536,4 @@ const TextAreaPropertyLine = (props) => {
 AttachDebugLayer();
 
 export { MakeTeachingMoment as $, Accordion as A, Button as B, CheckboxPropertyLine as C, DebugServiceIdentity as D, ExtensibleAccordion as E, useColor3Property as F, useColor4Property as G, useQuaternionProperty as H, Inspector as I, MakePropertyHook as J, useInterceptObservable as K, Link as L, MessageBar as M, NumberInputPropertyLine as N, useEventfulState as O, Popover as P, useObservableCollection as Q, useOrderedObservableCollection as R, SpinButtonPropertyLine as S, TextInputPropertyLine as T, usePollingObservable as U, Vector3PropertyLine as V, useResource as W, useAsyncResource as X, useCompactMode as Y, useSidePaneDockOverrides as Z, useAngleConverters as _, ShellServiceIdentity as a, MakeDialogTeachingMoment as a0, InterceptFunction as a1, GetPropertyDescriptor as a2, IsPropertyReadonly as a3, InterceptProperty as a4, ObservableCollection as a5, ConstructorFactory as a6, SelectionServiceIdentity as a7, SelectionServiceDefinition as a8, SettingsContextIdentity as a9, ToggleButton as aA, ChildWindow as aB, FileUploadLine as aC, FactorGradientList as aD, Color3GradientList as aE, Color4GradientList as aF, Pane as aG, BooleanBadgePropertyLine as aH, Color3PropertyLine as aI, Color4PropertyLine as aJ, HexPropertyLine as aK, LinkPropertyLine as aL, PropertyLine as aM, LineContainer as aN, PlaceholderPropertyLine as aO, StringifiedPropertyLine as aP, SwitchPropertyLine as aQ, SyncedSliderPropertyLine as aR, TextAreaPropertyLine as aS, TextPropertyLine as aT, RotationVectorPropertyLine as aU, QuaternionPropertyLine as aV, Vector2PropertyLine as aW, Vector4PropertyLine as aX, ShowInspector as aa, Checkbox as ab, Collapse as ac, ColorPickerPopup as ad, InputHexField as ae, InputHsvField as af, ComboBox as ag, DraggableLine as ah, Dropdown as ai, NumberDropdown as aj, StringDropdown as ak, FactorGradientComponent as al, Color3GradientComponent as am, Color4GradientComponent as an, ColorStepGradientComponent as ao, InfoLabel as ap, MakeLazyComponent as aq, List as ar, PositionedPopover as as, SearchBar as at, SearchBox as au, SpinButton as av, Switch as aw, SyncedSliderInput as ax, Textarea as ay, TextInput as az, SceneContextIdentity as b, useObservableState as c, AccordionSection as d, ButtonLine as e, ToolsServiceIdentity as f, useExtensionManager as g, MakePopoverTeachingMoment as h, TeachingMoment as i, SidePaneContainer as j, PropertiesServiceIdentity as k, SceneExplorerServiceIdentity as l, SettingsServiceIdentity as m, StatsServiceIdentity as n, ConvertOptions as o, AttachDebugLayer as p, DetachDebugLayer as q, NumberDropdownPropertyLine as r, StringDropdownPropertyLine as s, BoundProperty as t, useProperty as u, Property as v, LinkToEntityPropertyLine as w, Theme as x, BuiltInsExtensionFeed as y, useVector3Property as z };
-//# sourceMappingURL=index-DB8sTGSM.js.map
+//# sourceMappingURL=index-CyX6FYTL.js.map