@babylonjs/inspector 8.36.1-preview → 8.37.0-preview

package/lib/{index-CmULGJMc.js → index-B-XOu4uI.js}

@@ -3,8 +3,8 @@ import { useMemo, useEffect, useState, useRef, useCallback, forwardRef, createCo
 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';
-import { makeStyles, Link as Link$1, Body1, ToggleButton as ToggleButton$1, Button as Button$1, tokens, InfoLabel as InfoLabel$1, Body1Strong, Checkbox as Checkbox$1, mergeClasses, Accordion as Accordion$1, AccordionItem, AccordionHeader, Subtitle2Stronger, AccordionPanel, Divider, TeachingPopover, TeachingPopoverSurface, TeachingPopoverHeader, TeachingPopoverBody, createLightTheme, createDarkTheme, FluentProvider, Tooltip, Menu, MenuTrigger, SplitButton, MenuPopover, MenuList, MenuItem, Toolbar as Toolbar$1, Portal, RendererProvider, ToolbarRadioButton, createDOMRenderer, MenuGroup, MenuGroupHeader, SearchBox as SearchBox$1, FlatTree, FlatTreeItem, TreeItemLayout, treeItemLevelToken, Switch as Switch$1, PresenceBadge, MenuItemRadio, Dialog, DialogSurface, DialogBody, DialogTitle, DialogContent, DialogActions, List as List$1, ListItem, Spinner, Badge, useId, Input, SpinButton as SpinButton$1, Slider, MessageBar as MessageBar$1, MessageBarBody, MessageBarTitle, Dropdown as Dropdown$1, Option, Popover, PopoverTrigger, ColorSwatch, PopoverSurface, ColorPicker, ColorArea, ColorSlider, AlphaSlider, Textarea as Textarea$1, ToolbarButton, useComboboxFilter, Combobox, Field } from '@fluentui/react-components';
-import { ChevronCircleRight16Regular, ChevronCircleRight20Regular, ChevronCircleDown16Regular, ChevronCircleDown20Regular, Copy16Regular, Copy20Regular, PanelLeftExpandRegular, PanelRightExpandRegular, PanelLeftContractRegular, PanelRightContractRegular, PictureInPictureEnterRegular, MoreHorizontalRegular, LayoutColumnTwoFocusLeftFilled, LayoutColumnTwoSplitLeftFocusTopLeftFilled, LayoutColumnTwoSplitLeftFocusBottomLeftFilled, LayoutColumnTwoFocusRightFilled, LayoutColumnTwoSplitRightFocusTopRightFilled, LayoutColumnTwoSplitRightFocusBottomRightFilled, DocumentTextRegular, createFluentIcon, FilterRegular, GlobeRegular, ArrowExpandAllRegular, CubeTreeRegular, BugRegular, SettingsRegular, ArrowUploadRegular, DataBarHorizontalRegular, WrenchRegular, WeatherSunnyRegular, WeatherMoonRegular, ErrorCircleRegular, ArrowRotateClockwiseRegular, ArrowExpandRegular, SelectObjectRegular, CubeRegular, SaveRegular, ArrowUndoRegular, BracesRegular, BracesDismiss16Regular, CopyRegular, DeleteRegular, EyeOffFilled, EyeFilled, ArrowMoveFilled, StopFilled, PlayFilled, StackRegular, FilmstripRegular, PauseFilled, WeatherSunnyLowFilled, LayerRegular, FrameRegular, PlayRegular, AppGenericRegular, MyLocationRegular, CameraRegular, LightbulbRegular, BorderOutsideRegular, BorderNoneRegular, EyeRegular, EyeOffRegular, VideoFilled, VideoRegular, FlashlightRegular, FlashlightOffRegular, DropRegular, BlurRegular, PipelineRegular, PersonWalkingRegular, DataLineRegular, PersonSquareRegular, LayerDiagonalPersonRegular, ImageEditRegular, ImageRegular, TargetRegular, PersonFeedbackRegular, DeleteFilled } from '@fluentui/react-icons';
+import { makeStyles, Link as Link$1, Body1, ToggleButton as ToggleButton$1, Button as Button$1, tokens, InfoLabel as InfoLabel$1, Body1Strong, Checkbox as Checkbox$1, mergeClasses, Accordion as Accordion$1, AccordionItem, AccordionHeader, Subtitle2Stronger, AccordionPanel, Divider, TeachingPopover, TeachingPopoverSurface, TeachingPopoverHeader, TeachingPopoverBody, createLightTheme, createDarkTheme, FluentProvider, Tooltip, Menu, MenuTrigger, SplitButton, MenuPopover, MenuList, MenuItem, Toolbar as Toolbar$1, Portal, RendererProvider, ToolbarRadioButton, createDOMRenderer, MenuGroup, MenuGroupHeader, SearchBox as SearchBox$1, FlatTree, FlatTreeItem, TreeItemLayout, treeItemLevelToken, Switch as Switch$1, PresenceBadge, useId, SpinButton as SpinButton$1, Slider, Input, Dropdown as Dropdown$1, Option, Popover, PopoverTrigger, ColorSwatch, PopoverSurface, ColorPicker, ColorArea, ColorSlider, AlphaSlider, MenuItemRadio, Dialog, DialogSurface, DialogBody, DialogTitle, DialogContent, DialogActions, List as List$1, ListItem, Spinner, Badge, MessageBar as MessageBar$1, MessageBarBody, MessageBarTitle, Textarea as Textarea$1, ToolbarButton, useComboboxFilter, Combobox, Field } from '@fluentui/react-components';
+import { ChevronCircleRight16Regular, ChevronCircleRight20Regular, ChevronCircleDown16Regular, ChevronCircleDown20Regular, Copy16Regular, Copy20Regular, PanelLeftExpandRegular, PanelRightExpandRegular, PanelLeftContractRegular, PanelRightContractRegular, PictureInPictureEnterRegular, MoreHorizontalRegular, LayoutColumnTwoFocusLeftFilled, LayoutColumnTwoSplitLeftFocusTopLeftFilled, LayoutColumnTwoSplitLeftFocusBottomLeftFilled, LayoutColumnTwoFocusRightFilled, LayoutColumnTwoSplitRightFocusTopRightFilled, LayoutColumnTwoSplitRightFocusBottomRightFilled, DocumentTextRegular, createFluentIcon, FilterRegular, GlobeRegular, ArrowExpandAllRegular, CubeTreeRegular, BugRegular, SettingsRegular, ArrowUploadRegular, DataBarHorizontalRegular, WrenchRegular, WeatherSunnyRegular, WeatherMoonRegular, ErrorCircleRegular, ArrowRotateClockwiseRegular, ArrowExpandRegular, SelectObjectRegular, CubeRegular, SaveRegular, ArrowUndoRegular, BracesRegular, BracesDismiss16Regular, CopyRegular, DeleteRegular, EyeOffFilled, EyeFilled, ArrowMoveFilled, StopFilled, PlayFilled, StackRegular, FilmstripRegular, PauseFilled, WeatherSunnyLowFilled, LayerRegular, FrameRegular, PlayRegular, AppGenericRegular, MyLocationRegular, CameraRegular, LightbulbRegular, BorderOutsideRegular, BorderNoneRegular, EyeRegular, EyeOffRegular, VideoFilled, VideoRegular, FlashlightRegular, FlashlightOffRegular, DropRegular, BlurRegular, PipelineRegular, PersonWalkingRegular, DataLineRegular, PersonSquareRegular, LayerDiagonalPersonRegular, ImageEditRegular, ImageRegular, TargetRegular, PersonFeedbackRegular, BranchRegular, DeleteFilled } from '@fluentui/react-icons';
 import { Collapse as Collapse$1, Fade } from '@fluentui/react-motion-components-preview';
 import '@babylonjs/core/Misc/typeStore.js';
 import { useLocalStorage, useTernaryDarkMode } from 'usehooks-ts';
@@ -32,7 +32,6 @@ import { PerfCollectionStrategy } from '@babylonjs/core/Misc/PerformanceViewer/p
 import '@babylonjs/core/Misc/PerformanceViewer/performanceViewerSceneExtension.js';
 import { PressureObserverWrapper } from '@babylonjs/core/Misc/pressureObserverWrapper.js';
 import { AbstractEngine } from '@babylonjs/core/Engines/abstractEngine.js';
-import { EngineStore } from '@babylonjs/core/Engines/engineStore.js';
 import { createRoot } from 'react-dom/client';
 import { Logger } from '@babylonjs/core/Misc/logger.js';
 import { FrameGraphUtils } from '@babylonjs/core/FrameGraph/frameGraphUtils.js';
@@ -105,6 +104,8 @@ import '@babylonjs/core/PostProcesses/RenderPipeline/postProcessRenderPipelineMa
 import '@babylonjs/core/Sprites/spriteSceneComponent.js';
 import { DynamicTexture } from '@babylonjs/core/Materials/Textures/dynamicTexture.js';
 import { PointerEventTypes } from '@babylonjs/core/Events/pointerEvents.js';
+import { EngineStore } from '@babylonjs/core/Engines/engineStore.js';
+import { UniqueIdGenerator } from '@babylonjs/core/Misc/uniqueIdGenerator.js';
 
 const InterceptorHooksMaps$1 = new WeakMap();
 /**
@@ -1631,6 +1632,17 @@ const useStyles$c = makeStyles({
         flexDirection: "column",
         overflowX: "hidden",
         overflowY: "hidden",
+        zIndex: 1,
+    },
+    paneContainerOverlay: {
+        position: "absolute",
+        height: "100%",
+    },
+    paneContainerOverlayLeft: {
+        left: 0,
+    },
+    paneContainerOverlayRight: {
+        right: 0,
     },
     paneContent: {
         display: "flex",
@@ -1759,7 +1771,7 @@ const SidePaneTab = (props) => {
 // This hook provides a side pane container and the tab list.
 // 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) {
+function usePane(location, layoutMode, defaultWidth, minWidth, sidePanes, onSelectSidePane, dockOperations, toolbarMode, topBarItems, bottomBarItems) {
     const classes = useStyles$c();
     const [topSelectedTab, setTopSelectedTab] = useState();
     const [bottomSelectedTab, setBottomSelectedTab] = useState();
@@ -1959,7 +1971,9 @@ function usePane(location, defaultWidth, minWidth, sidePanes, onSelectSidePane,
     const pane = useMemo(() => {
         if (!windowState) {
             // If there is no window state, then we are docked, so render the resizable div and the collapse container.
-            return (jsx("div", { ref: paneContainerRef, className: classes.paneContainer, children: (topPanes.length > 0 || bottomPanes.length > 0) && (jsxs("div", { className: `${classes.pane} ${location === "left" ? classes.paneLeft : classes.paneRight}`, children: [jsx(Collapse, { orientation: "horizontal", visible: !collapsed, children: jsx("div", { ref: paneHorizontalResizeElementRef, className: classes.paneContainer, style: { width: `clamp(${minWidth}px, calc(${defaultWidth}px + var(${paneWidthAdjustCSSVar}, 0px)), 1000px)` }, children: corePane }) }), jsx("div", { ref: paneHorizontalResizeHandleRef, className: `${classes.resizer} ${location === "left" ? classes.resizerLeft : classes.resizerRight}`, style: { pointerEvents: `${collapsed ? "none" : "auto"}` } })] })) }));
+            return (jsx("div", { ref: paneContainerRef, className: mergeClasses(classes.paneContainer, layoutMode === "inline"
+                    ? undefined
+                    : mergeClasses(classes.paneContainerOverlay, location === "left" ? classes.paneContainerOverlayLeft : classes.paneContainerOverlayRight)), children: (topPanes.length > 0 || bottomPanes.length > 0) && (jsxs("div", { className: `${classes.pane} ${location === "left" ? classes.paneLeft : classes.paneRight}`, children: [jsx(Collapse, { orientation: "horizontal", visible: !collapsed, children: jsx("div", { ref: paneHorizontalResizeElementRef, className: classes.paneContainer, style: { width: `clamp(${minWidth}px, calc(${defaultWidth}px + var(${paneWidthAdjustCSSVar}, 0px)), 1000px)` }, children: corePane }) }), jsx("div", { ref: paneHorizontalResizeHandleRef, className: `${classes.resizer} ${location === "left" ? classes.resizerLeft : classes.resizerRight}`, style: { pointerEvents: `${collapsed ? "none" : "auto"}` } })] })) }));
         }
         else {
             // Otherwise we are undocked, so render into the portal that targets the body of the child window.
@@ -1971,7 +1985,7 @@ function usePane(location, defaultWidth, minWidth, sidePanes, onSelectSidePane,
     }, [collapsed, corePane, windowState]);
     return [topPaneTabList, pane, collapsed, setCollapsed];
 }
-function MakeShellServiceDefinition({ leftPaneDefaultWidth = 350, leftPaneMinWidth = 350, rightPaneDefaultWidth = 350, rightPaneMinWidth = 350, toolbarMode = "full", sidePaneRemapper = undefined, } = {}) {
+function MakeShellServiceDefinition({ leftPaneDefaultWidth = 350, leftPaneMinWidth = 350, rightPaneDefaultWidth = 350, rightPaneMinWidth = 350, toolbarMode = "full", sidePaneRemapper = undefined, layoutMode = "inline", } = {}) {
     return {
         friendlyName: "MainView",
         produces: [ShellServiceIdentity, RootComponentServiceIdentity],
@@ -1998,7 +2012,8 @@ function MakeShellServiceDefinition({ leftPaneDefaultWidth = 350, leftPaneMinWid
                 const coercedSidePaneCache = useRef(new Map());
                 const coercedSidePanes = useMemo(() => {
                     // First pass - apply overrides and respect the side pane mode.
-                    const coercedSidePanes = sidePanes.map((sidePaneDefinition) => {
+                    const coercedSidePanes = sidePanes
+                        .map((sidePaneDefinition) => {
                         let coercedSidePane = coercedSidePaneCache.current.get(sidePaneDefinition.key);
                         if (!coercedSidePane) {
                             coercedSidePane = { ...sidePaneDefinition };
@@ -2012,9 +2027,14 @@ function MakeShellServiceDefinition({ leftPaneDefaultWidth = 350, leftPaneMinWid
                         }
                         else if (sidePaneRemapper) {
                             // A side pane remapper has the next highest priority.
-                            const { horizontalLocation, verticalLocation } = sidePaneRemapper(sidePaneDefinition);
-                            coercedSidePane.horizontalLocation = horizontalLocation;
-                            coercedSidePane.verticalLocation = verticalLocation;
+                            const remapping = sidePaneRemapper(sidePaneDefinition);
+                            if (!remapping) {
+                                coercedSidePane = undefined;
+                            }
+                            else {
+                                coercedSidePane.horizontalLocation = remapping.horizontalLocation;
+                                coercedSidePane.verticalLocation = remapping.verticalLocation;
+                            }
                         }
                         else {
                             // Otherwise use the default defined location.
@@ -2022,7 +2042,8 @@ function MakeShellServiceDefinition({ leftPaneDefaultWidth = 350, leftPaneMinWid
                             coercedSidePane.verticalLocation = sidePaneDefinition.verticalLocation;
                         }
                         return coercedSidePane;
-                    });
+                    })
+                        .filter((sidePane) => !!sidePane);
                     // Second pass - correct any invalid state, specifically if there are only bottom panes, force them to be top panes.
                     for (const side of ["left", "right"]) {
                         const topPanes = coercedSidePanes.filter((entry) => entry.horizontalLocation === side && entry.verticalLocation === "top");
@@ -2098,8 +2119,8 @@ function MakeShellServiceDefinition({ leftPaneDefaultWidth = 350, leftPaneMinWid
                 const bottomBarLeftItems = useMemo(() => bottomToolBarItems.filter((entry) => coerceToolBarItemHorizontalLocation(entry) === "left"), [bottomToolBarItems, coerceToolBarItemHorizontalLocation]);
                 const bottomBarRightItems = useMemo(() => bottomToolBarItems.filter((entry) => coerceToolBarItemHorizontalLocation(entry) === "right"), [bottomToolBarItems, coerceToolBarItemHorizontalLocation]);
                 const centralContents = useOrderedObservableCollection(centralContentCollection);
-                const [leftPaneTabList, leftPane, leftPaneCollapsed, setLeftPaneCollapsed] = usePane("left", leftPaneDefaultWidth, leftPaneMinWidth, coercedSidePanes, onSelectSidePane, sidePaneDockOperations, toolbarMode, topBarLeftItems, bottomBarLeftItems);
-                const [rightPaneTabList, rightPane, rightPaneCollapsed, setRightPaneCollapsed] = usePane("right", rightPaneDefaultWidth, rightPaneMinWidth, coercedSidePanes, onSelectSidePane, sidePaneDockOperations, toolbarMode, topBarRightItems, bottomBarRightItems);
+                const [leftPaneTabList, leftPane, leftPaneCollapsed, setLeftPaneCollapsed] = usePane("left", layoutMode, leftPaneDefaultWidth, leftPaneMinWidth, coercedSidePanes, onSelectSidePane, sidePaneDockOperations, toolbarMode, topBarLeftItems, bottomBarLeftItems);
+                const [rightPaneTabList, rightPane, rightPaneCollapsed, setRightPaneCollapsed] = usePane("right", layoutMode, rightPaneDefaultWidth, rightPaneMinWidth, coercedSidePanes, onSelectSidePane, sidePaneDockOperations, toolbarMode, topBarRightItems, bottomBarRightItems);
                 return (jsxs("div", { className: classes.mainView, children: [toolbarMode === "full" && (jsx(Fragment, { children: jsxs("div", { className: classes.barDiv, children: [leftPaneTabList, jsx(Toolbar, { location: "top", components: topToolBarItems }), rightPaneTabList] }) })), jsxs("div", { className: classes.verticallyCentralContent, children: [leftPane, jsxs("div", { className: classes.centralContent, children: [centralContents.map((entry) => (jsx(entry.component, {}, entry.key))), toolbarMode === "compact" && (jsxs(Fragment, { children: [jsx(Fade, { visible: leftPaneCollapsed, delay: 50, children: jsx("div", { className: mergeClasses(classes.expandButtonContainer, classes.expandButtonContainerLeft), children: jsx(Tooltip, { content: "Show Side Pane", relationship: "label", children: jsx(Button$1, { className: classes.expandButton, icon: jsx(PanelLeftExpandRegular, {}), onClick: () => setLeftPaneCollapsed(false) }) }) }) }), jsx(Fade, { visible: rightPaneCollapsed, delay: 50, children: jsx("div", { className: mergeClasses(classes.expandButtonContainer, classes.expandButtonContainerRight), children: jsx(Tooltip, { content: "Show Side Pane", relationship: "label", children: jsx(Button$1, { className: classes.expandButton, icon: jsx(PanelRightExpandRegular, {}), onClick: () => setRightPaneCollapsed(false) }) }) }) })] }))] }), rightPane] }), toolbarMode === "full" && (jsx(Fragment, { children: jsx("div", { className: classes.barDiv, children: jsx(Toolbar, { location: "bottom", components: bottomToolBarItems }) }) }))] }));
             };
             rootComponent.displayName = "Shell Service Root";
@@ -3452,7 +3473,7 @@ const DefaultInspectorExtensionFeed = new BuiltInsExtensionFeed("Inspector", [
         keywords: ["export", "gltf", "glb", "babylon", "exporter", "tools"],
         ...BabylonWebResources,
         author: { name: "Alex Chuber", forumUserName: "alexchuber" },
-        getExtensionModuleAsync: async () => await import('./exportService-B6ej2VVA.js'),
+        getExtensionModuleAsync: async () => await import('./exportService-BB4L49R4.js'),
     },
     {
         name: "Capture Tools",
@@ -3460,7 +3481,7 @@ const DefaultInspectorExtensionFeed = new BuiltInsExtensionFeed("Inspector", [
         keywords: ["capture", "screenshot", "gif", "video", "tools"],
         ...BabylonWebResources,
         author: { name: "Alex Chuber", forumUserName: "alexchuber" },
-        getExtensionModuleAsync: async () => await import('./captureService-Blk4cfMr.js'),
+        getExtensionModuleAsync: async () => await import('./captureService-DF30oxR-.js'),
     },
     {
         name: "Import Tools",
@@ -3468,164 +3489,753 @@ const DefaultInspectorExtensionFeed = new BuiltInsExtensionFeed("Inspector", [
         keywords: ["import", "tools"],
         ...BabylonWebResources,
         author: { name: "Alex Chuber", forumUserName: "alexchuber" },
-        getExtensionModuleAsync: async () => await import('./importService-ClQU2IkW.js'),
+        getExtensionModuleAsync: async () => await import('./importService-DEe18q7F.js'),
     },
 ]);
 
-const ExtensionManagerContext = createContext(undefined);
-function useExtensionManager() {
-    return useContext(ExtensionManagerContext)?.extensionManager;
-}
-
-const InstalledExtensionsKey = "Babylon/Extensions/InstalledExtensions";
-const ExtensionInstalledKeyPrefix = "Babylon/Extensions/IsExtensionInstalled";
-function GetExtensionInstalledKey(name) {
-    return `${ExtensionInstalledKeyPrefix}/${name}`;
-}
-function GetExtensionIdentity(feed, name) {
-    return `${feed}|${name}`;
-}
 /**
- * Manages the installation, uninstallation, enabling, and disabling of extensions.
+ * Renders a label with an optional popup containing more info
+ * @param props
+ * @returns
  */
-class ExtensionManager {
-    constructor(_serviceContainer, _feeds, _onInstallFailed) {
-        this._serviceContainer = _serviceContainer;
-        this._feeds = _feeds;
-        this._onInstallFailed = _onInstallFailed;
-        this._installedExtensions = new Map();
-        this._stateChangedHandlers = new Map();
-    }
-    /**
-     * Creates a new instance of the ExtensionManager.
-     * This will automatically rehydrate previously installed and enabled extensions.
-     * @param serviceContainer The service container to use.
-     * @param feeds The extension feeds to include.
-     * @param onInstallFailed A callback that is called when an extension installation fails.
-     * @returns A promise that resolves to the new instance of the ExtensionManager.
-     */
-    static async CreateAsync(serviceContainer, feeds, onInstallFailed) {
-        const extensionManager = new ExtensionManager(serviceContainer, feeds, onInstallFailed);
-        // Rehydrate installed extensions.
-        const installedExtensionNames = JSON.parse(localStorage.getItem(InstalledExtensionsKey) ?? "[]");
-        for (const installedExtensionName of installedExtensionNames) {
-            const installedExtensionRaw = localStorage.getItem(GetExtensionInstalledKey(installedExtensionName));
-            if (installedExtensionRaw) {
-                const installedExtensionData = JSON.parse(installedExtensionRaw);
-                const feed = feeds.find((feed) => feed.name === installedExtensionData.feed);
-                if (feed) {
-                    const installedExtension = extensionManager._createInstalledExtension(installedExtensionData.metadata, feed);
-                    extensionManager._installedExtensions.set(installedExtension.metadata.name, installedExtension);
-                }
-            }
+const InfoLabel = (props) => {
+    InfoLabel.displayName = "InfoLabel";
+    return (jsx(InfoLabel$1, { htmlFor: props.htmlFor, info: props.info, children: jsx(Body1, { children: props.label }) }));
+};
+
+const SpinButton = (props) => {
+    SpinButton.displayName = "SpinButton";
+    const classes = useInputStyles$1();
+    const { size } = useContext(ToolContext);
+    const { min, max } = props;
+    const [value, setValue] = useState(props.value);
+    const lastCommittedValue = useRef(props.value);
+    // 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 = props.step != undefined ? props.step : props.forceInt ? 1 : undefined;
+    const precision = Math.min(4, step !== undefined ? Math.max(0, CalculatePrecision(step)) : 2); // If no step, set precision to 2. Regardless, cap precision at 4 to avoid wild numbers
+    useEffect(() => {
+        if (props.value !== lastCommittedValue.current) {
+            lastCommittedValue.current = props.value;
+            setValue(props.value); // Update local state when props.value changes
         }
-        // Load installed and enabled extensions.
-        const enablePromises = [];
-        for (const extension of extensionManager._installedExtensions.values()) {
-            enablePromises.push((async () => {
-                try {
-                    await extensionManager._enableAsync(extension.metadata, false, false);
-                }
-                catch {
-                    // If enabling the extension fails, uninstall it. The extension install fail callback will still be called,
-                    // so the owner of the ExtensionManager instance can decide what to do with the error.
-                    await extensionManager._uninstallAsync(extension.metadata, false);
-                }
-            })());
+    }, [props.value]);
+    const validateValue = (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
+        if (validateValue(currVal) && currVal !== lastCommittedValue.current) {
+            lastCommittedValue.current = currVal;
+            props.onChange(currVal);
         }
-        await Promise.all(enablePromises);
-        return extensionManager;
-    }
-    /**
-     * Gets the names of the feeds that are included in the extension manager.
-     * @returns The names of the feeds.
-     */
-    get feedNames() {
-        return this._feeds.map((feed) => feed.name);
-    }
-    /**
-     * Queries the extension manager for extensions.
-     * @param filter The filter to apply to the query.
-     * @param feeds The feeds to include in the query.
-     * @param installedOnly Whether to only include installed extensions.
-     * @returns A promise that resolves to the extension query.
-     */
-    async queryExtensionsAsync(filter = "", feeds = this.feedNames, installedOnly = false) {
-        if (installedOnly) {
-            const installedExtensions = Array.from(this._installedExtensions.values()).filter((installedExtension) => feeds.includes(installedExtension.feed.name));
-            return {
-                totalCount: installedExtensions.length,
-                getExtensionsAsync: async (index, count) => {
-                    return installedExtensions.slice(index, index + count).map((installedExtension) => this._createExtension(installedExtension.metadata, installedExtension.feed));
-                },
-            };
+    };
+    const handleChange = (event, data) => {
+        event.stopPropagation(); // Prevent event propagation
+        if (data.value != null && !Number.isNaN(data.value)) {
+            setValue(data.value);
+            tryCommitValue(data.value);
         }
-        const queries = await Promise.all(this._feeds.filter((feed) => feeds.includes(feed.name)).map(async (feed) => Object.assign(await feed.queryExtensionsAsync(filter), { feed })));
-        const totalCount = queries.reduce((sum, query) => sum + query.totalCount, 0);
-        return {
-            totalCount,
-            getExtensionsAsync: async (index, count) => {
-                const extensions = new Array();
-                let remaining = count;
-                for (const query of queries) {
-                    if (remaining <= 0) {
-                        break;
-                    }
-                    if (index >= query.totalCount) {
-                        index -= query.totalCount;
-                        continue;
-                    }
-                    // This is intentionally sequential as we are querying for results until the count of results is met.
-                    // eslint-disable-next-line no-await-in-loop
-                    const metadataSlice = await query.getExtensionMetadataAsync(index, remaining);
-                    extensions.push(...metadataSlice.map((metadata) => this._createExtension(metadata, query.feed)));
-                    remaining -= metadataSlice.length;
-                    index = 0;
-                }
-                return extensions;
-            },
-        };
-    }
-    /**
-     * Disposes the extension manager.
-     */
-    dispose() {
-        for (const installedExtension of this._installedExtensions.values()) {
-            // eslint-disable-next-line github/no-then
-            this._disableAsync(installedExtension.metadata, false).catch((error) => {
-                Logger.Warn(`Failed to disable extension ${installedExtension.metadata.name}: ${error}`);
-            });
+    };
+    const handleKeyUp = (event) => {
+        event.stopPropagation(); // Prevent event propagation
+        if (event.key !== "Enter") {
+            const currVal = parseFloat(event.target.value); // Cannot use currentTarget.value as it won't have the most recently typed value
+            setValue(currVal);
+            tryCommitValue(currVal);
         }
-        this._stateChangedHandlers.clear();
-    }
-    async _installAsync(metadata, feed, isNestedStateChange) {
-        let installedExtension = this._installedExtensions.get(metadata.name);
-        if (!installedExtension) {
-            installedExtension = this._createInstalledExtension(metadata, feed);
-            installedExtension.isStateChanging = true;
-            this._installedExtensions.set(metadata.name, installedExtension);
-            try {
-                // Enable the extension.
-                await this._enableAsync(metadata, true, true);
-            }
-            catch (error) {
-                this._installedExtensions.delete(metadata.name);
-                throw error;
-            }
-            finally {
-                !isNestedStateChange && (installedExtension.isStateChanging = false);
-            }
-            // Mark the extension as being installed.
-            localStorage.setItem(GetExtensionInstalledKey(GetExtensionIdentity(feed.name, metadata.name)), JSON.stringify({
-                feed: feed.name,
-                metadata,
-            }));
-            localStorage.setItem(InstalledExtensionsKey, JSON.stringify(Array.from(this._installedExtensions.values()).map((extension) => GetExtensionIdentity(extension.feed.name, extension.metadata.name))));
+    };
+    const id = useId("spin-button");
+    const mergedClassName = mergeClasses(classes.input, !validateValue(value) ? classes.invalid : "", props.className);
+    return (jsxs("div", { className: classes.container, children: [props.infoLabel && jsx(InfoLabel, { ...props.infoLabel, htmlFor: id }), jsx(SpinButton$1, { ...props, input: { className: classes.inputSlot }, step: step, id: id, size: size, precision: precision, displayValue: `${value.toFixed(precision)}${props.unit ? " " + props.unit : ""}`, value: value, onChange: handleChange, onKeyUp: handleKeyUp, onKeyDown: HandleKeyDown, onBlur: HandleOnBlur, className: mergedClassName })] }));
+};
+
+const useSyncedSliderStyles = makeStyles({
+    container: { display: "flex" },
+    syncedSlider: {
+        flex: "1 1 0",
+        flexDirection: "row",
+        display: "flex",
+        alignItems: "center",
+    },
+    slider: {
+        minWidth: CustomTokens.sliderMinWidth, // Minimum width for slider to remain usable
+        maxWidth: CustomTokens.sliderMaxWidth,
+    },
+});
+/**
+ * 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);
+    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 ?? ""); // 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;
         }
-        return installedExtension;
-    }
-    async _uninstallAsync(metadata, isNestedStateChange) {
-        const installedExtension = this._installedExtensions.get(metadata.name);
+        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
+    };
+    return (jsxs("div", { className: classes.container, children: [infoLabel && jsx(InfoLabel, { ...infoLabel, htmlFor: "syncedSlider" }), jsxs("div", { id: "syncedSlider", className: classes.syncedSlider, children: [props.min !== undefined && props.max !== undefined && (jsx(Slider, { ...passthroughProps, className: classes.slider, size: size, min: min / step, max: max / step, step: undefined, value: value / step, onChange: handleSliderChange, onPointerDown: handleSliderPointerDown, onPointerUp: handleSliderPointerUp })), jsx(SpinButton, { ...passthroughProps, value: value, onChange: handleInputChange, step: props.step })] })] }));
+};
+
+/**
+ * Renders a simple wrapper around the SyncedSliderInput
+ * @param props
+ * @returns
+ */
+const SyncedSliderPropertyLine = forwardRef((props, ref) => {
+    SyncedSliderPropertyLine.displayName = "SyncedSliderPropertyLine";
+    const { label, description, ...sliderProps } = props;
+    return (jsx(PropertyLine, { ref: ref, ...props, children: jsx(SyncedSliderInput, { ...sliderProps }) }));
+});
+
+const TextInput = (props) => {
+    TextInput.displayName = "TextInput";
+    const classes = useInputStyles$1();
+    const [value, setValue] = useState(props.value);
+    const lastCommittedValue = useRef(props.value);
+    const { size } = useContext(ToolContext);
+    useEffect(() => {
+        if (props.value !== lastCommittedValue.current) {
+            setValue(props.value); // Update local state when props.value changes
+            lastCommittedValue.current = props.value;
+        }
+    }, [props.value]);
+    const validateValue = (val) => {
+        const failsValidator = props.validator && !props.validator(val);
+        return !failsValidator;
+    };
+    const tryCommitValue = (currVal) => {
+        // Only commit if valid and different from last committed value
+        if (validateValue(currVal) && currVal !== lastCommittedValue.current) {
+            lastCommittedValue.current = currVal;
+            props.onChange(currVal);
+        }
+    };
+    const handleChange = (event, data) => {
+        event.stopPropagation();
+        setValue(data.value);
+        tryCommitValue(data.value);
+    };
+    const handleKeyUp = (event) => {
+        event.stopPropagation();
+        setValue(event.currentTarget.value);
+        tryCommitValue(event.currentTarget.value);
+    };
+    const mergedClassName = mergeClasses(classes.input, !validateValue(value) ? classes.invalid : "", props.className);
+    const id = useId("input-button");
+    return (jsxs("div", { className: classes.container, children: [props.infoLabel && jsx(InfoLabel, { ...props.infoLabel, htmlFor: id }), jsx(Input, { ...props, input: { className: classes.inputSlot }, id: id, size: size, value: value, onChange: handleChange, onKeyUp: handleKeyUp, onKeyDown: HandleKeyDown, onBlur: HandleOnBlur, className: mergedClassName })] }));
+};
+
+const useDropdownStyles = makeStyles({
+    dropdown: {
+        minWidth: 0,
+        width: "100%",
+    },
+    container: {
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center", // align items vertically
+    },
+    dropdownText: { textAlign: "end", textOverflow: "ellipsis", whiteSpace: "nowrap", overflowX: "hidden" },
+});
+/**
+ * Renders a fluent UI dropdown component for the options passed in, and an additional 'Not Defined' option if null is set to true
+ * This component can handle both null and undefined values
+ * @param props
+ * @returns dropdown component
+ */
+const Dropdown = (props) => {
+    Dropdown.displayName = "Dropdown";
+    const classes = useDropdownStyles();
+    const { options, value } = props;
+    const [defaultVal, setDefaultVal] = useState(props.value);
+    const { size } = useContext(ToolContext);
+    useEffect(() => {
+        setDefaultVal(value);
+    }, [props.value]);
+    const id = useId("dropdown");
+    const mergedClassName = mergeClasses(classes.container, props.className);
+    const optionLabel = options.find((o) => o.value === defaultVal)?.label;
+    return (jsxs("div", { className: mergedClassName, children: [props.infoLabel && jsx(InfoLabel, { ...props.infoLabel, htmlFor: id }), jsx(Dropdown$1, { id: id, disabled: props.disabled, size: size, className: classes.dropdown, button: jsx("span", { className: classes.dropdownText, children: optionLabel }), onOptionSelect: (evt, data) => {
+                    const value = typeof props.value === "number" ? Number(data.optionValue) : data.optionValue;
+                    if (value !== undefined) {
+                        setDefaultVal(value);
+                        props.onChange(value);
+                    }
+                }, selectedOptions: [defaultVal.toString()], value: optionLabel, children: options.map((option) => (jsx(Option, { value: option.value.toString(), disabled: false, children: option.label }, option.label))) })] }));
+};
+const NumberDropdown = Dropdown;
+const StringDropdown = Dropdown;
+
+const useColorPickerStyles = makeStyles({
+    container: {
+        width: "350px",
+        display: "flex", // becomes a flexbox
+        flexDirection: "column", // with children in a column
+        alignItems: "center", // centers children horizontally
+        justifyContent: "center", // centers children vertically (if height is set)
+        gap: tokens.spacingVerticalM,
+        overflow: "visible",
+    },
+    row: {
+        flex: 1, // is a row in the container's flex column
+        display: "flex", // becomes its own flexbox
+        flexDirection: "row", // with children in a row
+        gap: tokens.spacingHorizontalXL,
+        alignItems: "center", // align items vertically
+        width: "100%",
+    },
+    colorPicker: {
+        flex: 1,
+        width: "350px",
+        height: "350px",
+    },
+    previewColor: {
+        width: "60px",
+        height: "60px",
+        borderRadius: tokens.borderRadiusMedium, // 4px?
+        border: `${tokens.spacingVerticalXXS} solid ${tokens.colorNeutralShadowKeyLighter}`,
+        "@media (forced-colors: active)": {
+            forcedColorAdjust: "none", // ensures elmement maintains color in high constrast mode
+        },
+    },
+    inputRow: {
+        display: "flex",
+        flexDirection: "row",
+        flex: 1, // grow and fill available space
+        justifyContent: "center",
+        gap: "10px",
+        width: "100%",
+    },
+    inputField: {
+        flex: 1, // grow and fill available space
+        width: "auto",
+        minWidth: 0,
+        gap: tokens.spacingVerticalSNudge, // 6px
+    },
+});
+const ColorPickerPopup = (props) => {
+    ColorPickerPopup.displayName = "ColorPickerPopup";
+    const classes = useColorPickerStyles();
+    const [color, setColor] = useState(props.value);
+    const [popoverOpen, setPopoverOpen] = useState(false);
+    const [isLinear, setIsLinear] = useState(props.isLinearMode ?? false);
+    const [isFloat, setFloat] = useState(false);
+    const { size } = useContext(ToolContext);
+    useEffect(() => {
+        setColor(props.value); // Ensures the trigger color updates when props.value changes
+    }, [props.value]);
+    const handleColorPickerChange = (_, data) => {
+        let color = Color3.FromHSV(data.color.h, data.color.s, data.color.v);
+        if (props.value instanceof Color4) {
+            color = Color4.FromColor3(color, data.color.a ?? 1);
+        }
+        handleChange(color);
+    };
+    const handleChange = (newColor) => {
+        setColor(newColor);
+        props.onChange(newColor); // Ensures the parent is notified when color changes from within colorPicker
+    };
+    return (jsxs(Popover, { positioning: {
+            align: "start",
+            overflowBoundary: document.body,
+            autoSize: true,
+        }, open: popoverOpen, trapFocus: true, onOpenChange: (_, data) => setPopoverOpen(data.open), children: [jsx(PopoverTrigger, { disableButtonEnhancement: true, children: jsx(ColorSwatch, { borderColor: tokens.colorNeutralShadowKeyDarker, size: size === "small" ? "extra-small" : "small", shape: "rounded", color: color.toHexString(), value: color.toHexString().slice(1) }) }), jsx(PopoverSurface, { children: jsxs("div", { className: classes.container, children: [jsxs(ColorPicker, { className: classes.colorPicker, color: rgbaToHsv(color), onColorChange: handleColorPickerChange, children: [jsx(ColorArea, { inputX: { "aria-label": "Saturation" }, inputY: { "aria-label": "Brightness" } }), jsx(ColorSlider, { "aria-label": "Hue" }), color instanceof Color4 && jsx(AlphaSlider, { "aria-label": "Alpha" })] }), jsxs("div", { className: classes.row, children: [jsx("div", { className: classes.previewColor, style: { backgroundColor: color.toHexString() } }), jsx(NumberDropdown, { className: classes.inputField, infoLabel: {
+                                        label: "Color Space",
+                                        info: jsx(Body1, { children: "Today this is not mutable as the color space is determined by the entity. Soon we will allow swapping" }),
+                                    }, options: [
+                                        { label: "Gamma", value: 0 },
+                                        { label: "Linear", value: 1 },
+                                    ], disabled: true, value: isLinear ? 1 : 0, onChange: (val) => setIsLinear(val === 1) }), jsx(NumberDropdown, { className: classes.inputField, infoLabel: {
+                                        label: "Data Type",
+                                        info: jsx(Body1, { children: "We will introduce this functionality soon!" }),
+                                    }, options: [
+                                        { label: "Int", value: 0 },
+                                        { label: "Float", value: 1 },
+                                    ], disabled: true, value: isFloat ? 1 : 0, onChange: (val) => setFloat(val === 1) })] }), jsxs("div", { className: classes.inputRow, children: [jsx(InputRgbField, { title: "Red", value: color, rgbKey: "r", onChange: handleChange }), jsx(InputRgbField, { title: "Green", value: color, rgbKey: "g", onChange: handleChange }), jsx(InputRgbField, { title: "Blue", value: color, rgbKey: "b", onChange: handleChange }), jsx(InputAlphaField, { color: color, onChange: handleChange })] }), jsxs("div", { className: classes.inputRow, children: [jsx(InputHsvField, { title: "Hue", value: color, hsvKey: "h", max: 360, onChange: handleChange }), jsx(InputHsvField, { title: "Saturation", value: color, hsvKey: "s", max: 100, scale: 100, onChange: handleChange }), jsx(InputHsvField, { title: "Value", value: color, hsvKey: "v", max: 100, scale: 100, onChange: handleChange })] }), jsx("div", { className: classes.inputRow, children: jsx(InputHexField, { title: "Hexadecimal", linearHex: isLinear, isLinearMode: isLinear, value: color, onChange: handleChange }) })] }) })] }));
+};
+/**
+ * Component which displays the passed in color's HEX value, either in linearSpace (if linearHex is true) or in gamma space
+ * When the hex color is changed by user, component calculates the new Color3/4 value and calls onChange
+ *
+ * Component uses the isLinearMode boolean to display an informative label regarding linear / gamma space
+ * @param props - The properties for the InputHexField component.
+ * @returns
+ */
+const InputHexField = (props) => {
+    const classes = useColorPickerStyles();
+    const { title, value, onChange, linearHex, isLinearMode } = props;
+    return (jsx(TextInput, { disabled: linearHex ? !isLinearMode : false, className: classes.inputField, value: linearHex ? value.toLinearSpace().toHexString() : value.toHexString(), validator: ValidateColorHex, onChange: (val) => (linearHex ? onChange(Color3.FromHexString(val).toGammaSpace()) : onChange(Color3.FromHexString(val))), infoLabel: title
+            ? {
+                label: title,
+                // If not representing a linearHex, no info is needed.
+                info: !props.linearHex ? undefined : !isLinearMode ? ( // If representing a linear hex but we are in gammaMode, simple message explaining why linearHex is disabled
+                jsx(Fragment, { children: " This color picker is attached to an entity whose color is stored in gamma space, so we are showing linear hex in disabled view " })) : (
+                // If representing a linear hex and we are in linearMode, give information about how to use these hex values
+                jsxs(Fragment, { children: ["This color picker is attached to an entity whose color is stored in linear space (ex: PBR Material), and Babylon converts the color to gamma space before rendering on screen because the human eye is best at processing colors in gamma space. We thus also want to display the color picker in gamma space so that the color chosen here will match the color seen in your entity.", jsx("br", {}), "If you want to copy/paste the HEX into your code, you can either use", jsx(Body1Strong, { children: "Color3.FromHexString(LINEAR_HEX)" }), jsx("br", {}), "or", jsx("br", {}), jsx(Body1Strong, { children: "Color3.FromHexString(GAMMA_HEX).toLinearSpace()" }), jsx("br", {}), jsx("br", {}), jsx(Link, { url: "https://doc.babylonjs.com/preparingArtForBabylon/controllingColorSpace/", value: "Read more in our docs!" })] })),
+            }
+            : undefined }));
+};
+const InputRgbField = (props) => {
+    const { value, onChange, title, rgbKey } = props;
+    const classes = useColorPickerStyles();
+    const handleChange = useCallback((val) => {
+        const newColor = value.clone();
+        newColor[rgbKey] = val / 255.0; // Convert to 0-1 range
+        onChange(newColor);
+    }, [value, onChange, rgbKey]);
+    return (jsx(SpinButton, { title: title, infoLabel: title ? { label: title } : undefined, className: classes.inputField, min: 0, max: 255, value: Math.round(value[rgbKey] * 255), forceInt: true, onChange: handleChange }));
+};
+function rgbaToHsv(color) {
+    const c = new Color3(color.r, color.g, color.b);
+    const hsv = c.toHSV();
+    return { h: hsv.r, s: hsv.g, v: hsv.b, a: color.a };
+}
+/**
+ * In the HSV (Hue, Saturation, Value) color model, Hue (H) ranges from 0 to 360 degrees, representing the color's position on the color wheel.
+ * Saturation (S) ranges from 0 to 100%, indicating the intensity or purity of the color, with 0 being shades of gray and 100 being a fully saturated color.
+ * Value (V) ranges from 0 to 100%, representing the brightness of the color, with 0 being black and 100 being the brightest.
+ * @param props - The properties for the InputHsvField component.
+ */
+const InputHsvField = (props) => {
+    const { value, title, hsvKey, max, onChange, scale = 1 } = props;
+    const classes = useColorPickerStyles();
+    const handleChange = useCallback((val) => {
+        // Convert current color to HSV, update the new hsv value, then call onChange prop
+        const hsv = rgbaToHsv(value);
+        hsv[hsvKey] = val / scale;
+        let newColor = Color3.FromHSV(hsv.h, hsv.s, hsv.v);
+        if (value instanceof Color4) {
+            newColor = Color4.FromColor3(newColor, value.a ?? 1);
+        }
+        props.onChange(newColor);
+    }, [value, onChange, hsvKey, scale]);
+    return (jsx(SpinButton, { infoLabel: title ? { label: title } : undefined, title: title, className: classes.inputField, min: 0, max: max, value: Math.round(rgbaToHsv(value)[hsvKey] * scale), forceInt: true, onChange: handleChange }));
+};
+/**
+ * Displays the alpha value of a color, either in the disabled state (if color is Color3) or as a spin button (if color is Color4).
+ * @param props
+ * @returns
+ */
+const InputAlphaField = (props) => {
+    const classes = useColorPickerStyles();
+    const { color, onChange } = props;
+    const handleChange = useCallback((value) => {
+        if (Number.isNaN(value) || value < 0 || value > 1) {
+            return;
+        }
+        if (color instanceof Color4) {
+            const newColor = color.clone();
+            newColor.a = value;
+            return newColor;
+        }
+        else {
+            return Color4.FromColor3(color, value);
+        }
+    }, [onChange]);
+    return (jsx(SpinButton, { disabled: color instanceof Color3, min: 0, max: 1, className: classes.inputField, value: color instanceof Color3 ? 1 : color.a, step: 0.01, onChange: handleChange, infoLabel: {
+            label: "Alpha",
+            info: color instanceof Color3 ? (jsx(Fragment, { children: "Because this color picker is representing a Color3, we do not permit modifying alpha from the color picker. You can however modify the entity's alpha property directly, either in code via entity.alpha OR via inspector's transparency section." })) : undefined,
+        } }));
+};
+
+/**
+ * Reusable component which renders a color property line containing a label, colorPicker popout, and expandable RGBA values
+ * The expandable RGBA values are synced sliders that allow the user to modify the color's RGBA values directly
+ * @param props - PropertyLine props, replacing children with a color object so that we can properly display the color
+ * @returns Component wrapping a colorPicker component with a property line
+ */
+const ColorPropertyLine = forwardRef((props, ref) => {
+    ColorPropertyLine.displayName = "ColorPropertyLine";
+    const [color, setColor] = useState(props.value);
+    useEffect(() => {
+        setColor(props.value);
+    }, [props.value]);
+    const onSliderChange = (value, key) => {
+        let newColor;
+        if (key === "a") {
+            newColor = Color4.FromColor3(color, value);
+        }
+        else {
+            newColor = color.clone();
+            newColor[key] = value / 255;
+        }
+        setColor(newColor); // Create a new object to trigger re-render
+        props.onChange(newColor);
+    };
+    const onColorPickerChange = (newColor) => {
+        setColor(newColor);
+        props.onChange(newColor);
+    };
+    return (jsx(PropertyLine, { ref: ref, ...props, expandedContent: jsxs(Fragment, { children: [jsx(SyncedSliderPropertyLine, { label: "R", value: color.r * 255, min: 0, max: 255, onChange: (value) => onSliderChange(value, "r") }), jsx(SyncedSliderPropertyLine, { label: "G", value: color.g * 255, min: 0, max: 255, onChange: (value) => onSliderChange(value, "g") }), jsx(SyncedSliderPropertyLine, { label: "B", value: color.b * 255, min: 0, max: 255, onChange: (value) => onSliderChange(value, "b") }), color instanceof Color4 && jsx(SyncedSliderPropertyLine, { label: "A", value: color.a, min: 0, max: 1, step: 0.01, onChange: (value) => onSliderChange(value, "a") })] }), children: jsx(ColorPickerPopup, { ...props, onChange: onColorPickerChange, value: color }) }));
+});
+const Color3PropertyLine = ColorPropertyLine;
+const Color4PropertyLine = ColorPropertyLine;
+
+const useStyles$9 = 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$9();
+    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
+ * @returns property-line wrapped input component
+ */
+const TextInputPropertyLine = (props) => {
+    TextInputPropertyLine.displayName = "TextInputPropertyLine";
+    return (jsx(PropertyLine, { ...props, children: jsx(TextInput, { ...props }) }));
+};
+/**
+ * Wraps a number input in a property line
+ * To force integer values, use forceInt param (this is distinct from the 'step' param, which will still allow submitting an integer value. forceInt will not)
+ * @param props - PropertyLineProps and InputProps
+ * @returns property-line wrapped input component
+ */
+const NumberInputPropertyLine = (props) => {
+    NumberInputPropertyLine.displayName = "NumberInputPropertyLine";
+    return (jsx(PropertyLine, { ...props, children: jsx(SpinButton, { ...props }) }));
+};
+
+const HasZ = (vector) => !(vector instanceof Vector2);
+const HasW = (vector) => vector instanceof Vector4 || vector instanceof Quaternion;
+/**
+ * Reusable component which renders a vector property line containing a label, vector value, and expandable XYZW values
+ * The expanded section contains a slider/input box for each component of the vector (x, y, z, w)
+ * @param props
+ * @returns
+ */
+const TensorPropertyLine = (props) => {
+    TensorPropertyLine.displayName = "TensorPropertyLine";
+    const converted = (val) => (props.valueConverter ? props.valueConverter.from(val) : val);
+    const formatted = (val) => converted(val).toFixed(props.step !== undefined ? Math.max(0, CalculatePrecision(props.step)) : 2);
+    const [vector, setVector] = useState(props.value);
+    const { min, max } = props;
+    const onChange = (val, key) => {
+        const value = props.valueConverter ? props.valueConverter.to(val) : val;
+        const newVector = vector.clone();
+        newVector[key] = value; // The syncedSlider for 'w' is only rendered when vector is a Vector4, so this is safe
+        setVector(newVector);
+        props.onChange(newVector);
+    };
+    useEffect(() => {
+        setVector(props.value);
+    }, [props.value, props.expandedContent]);
+    return (jsx(PropertyLine, { ...props, onCopy: () => `new ${props.value.getClassName()}(${vector.x},${vector.y}${HasZ(vector) ? `,${vector.z}` : ""}${HasW(vector) ? `,${vector.w}` : ""})`, expandedContent: jsxs(Fragment, { children: [jsx(SyncedSliderPropertyLine, { label: "X", value: converted(vector.x), min: min, max: max, onChange: (val) => onChange(val, "x"), unit: props.unit, step: props.step }), jsx(SyncedSliderPropertyLine, { label: "Y", value: converted(vector.y), min: min, max: max, onChange: (val) => onChange(val, "y"), unit: props.unit, step: props.step }), HasZ(vector) && (jsx(SyncedSliderPropertyLine, { label: "Z", value: converted(vector.z), min: min, max: max, onChange: (val) => onChange(val, "z"), unit: props.unit, step: props.step })), HasW(vector) && (jsx(SyncedSliderPropertyLine, { label: "W", value: converted(vector.w), min: min, max: max, onChange: (val) => onChange(val, "w"), unit: props.unit, step: props.step }))] }), 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 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 QuaternionPropertyLineInternal = TensorPropertyLine;
+const QuaternionPropertyLine = (props) => {
+    QuaternionPropertyLine.displayName = "QuaternionPropertyLine";
+    const min = props.useDegrees ? 0 : undefined;
+    const max = props.useDegrees ? 360 : undefined;
+    const [quat, setQuat] = useState(props.value);
+    useEffect(() => {
+        setQuat(props.value);
+    }, [props.value]);
+    // Extract only the properties that exist on QuaternionPropertyLineProps
+    const { useDegrees, ...restProps } = props;
+    const onQuatChange = (val) => {
+        setQuat(val);
+        props.onChange(val);
+    };
+    const onEulerChange = (val) => {
+        const quat = Quaternion.FromEulerAngles(val.x, val.y, val.z);
+        onQuatChange(quat);
+    };
+    return useDegrees ? (jsx(Vector3PropertyLine, { ...restProps, nullable: false, ignoreNullable: false, value: quat.toEulerAngles(), valueConverter: ToDegreesConverter, min: min, max: max, onChange: onEulerChange, unit: "deg" })) : (jsx(QuaternionPropertyLineInternal, { ...props, nullable: false, value: quat, min: min, max: max, onChange: onQuatChange }));
+};
+const Vector2PropertyLine = TensorPropertyLine;
+const Vector3PropertyLine = TensorPropertyLine;
+const Vector4PropertyLine = TensorPropertyLine;
+
+function IsInspectableObject(entity) {
+    return !!entity.inspectableCustomProperties;
+}
+const LegacyInspectableObjectPropertiesServiceDefinition = {
+    friendlyName: "Additional Nodes",
+    consumes: [PropertiesServiceIdentity],
+    factory: (propertiesService) => {
+        const propertiesSectionRegistration = propertiesService.addSection({
+            identity: "Custom",
+            order: Number.MAX_SAFE_INTEGER,
+        });
+        const propertiesContentRegistration = propertiesService.addSectionContent({
+            key: "Additional Nodes Properties",
+            predicate: (entity) => IsInspectableObject(entity),
+            content: [
+                {
+                    section: "Custom",
+                    component: ({ context }) => {
+                        return (jsx(Fragment, { children: (context.inspectableCustomProperties ?? []).map((prop) => {
+                                const commonProps = {
+                                    target: context,
+                                    propertyKey: prop.propertyName,
+                                    label: prop.label,
+                                    ignoreNullable: true,
+                                    defaultValue: undefined,
+                                };
+                                switch (prop.type) {
+                                    case 0 /* InspectableType.Checkbox */:
+                                        return jsx(BoundProperty, { ...commonProps, component: SwitchPropertyLine }, prop.propertyName);
+                                    case 1 /* InspectableType.Slider */:
+                                        return (jsx(BoundProperty, { ...commonProps, min: prop.min, max: prop.max, step: prop.step, component: SyncedSliderPropertyLine }, prop.propertyName));
+                                    case 2 /* InspectableType.Vector3 */:
+                                        return jsx(BoundProperty, { ...commonProps, component: Vector3PropertyLine }, prop.propertyName);
+                                    case 3 /* InspectableType.Quaternion */:
+                                        return jsx(BoundProperty, { ...commonProps, component: QuaternionPropertyLine }, prop.propertyName);
+                                    case 4 /* InspectableType.Color3 */:
+                                        return jsx(BoundProperty, { ...commonProps, component: Color3PropertyLine }, prop.propertyName);
+                                    case 5 /* InspectableType.String */:
+                                        return jsx(BoundProperty, { ...commonProps, component: TextInputPropertyLine }, prop.propertyName);
+                                    case 6 /* InspectableType.Button */:
+                                        return jsx(ButtonLine, { label: prop.label, onClick: () => prop.callback?.() }, prop.propertyName);
+                                    case 7 /* InspectableType.Options */:
+                                        return jsx(BoundProperty, { ...commonProps, component: DropdownPropertyLine, options: prop.options ?? [] }, prop.propertyName);
+                                    case 8 /* InspectableType.Tab */:
+                                        return jsx(BoundProperty, { ...commonProps, component: TextPropertyLine }, prop.propertyName);
+                                    case 9 /* InspectableType.FileButton */:
+                                        return (jsx(FileUploadLine, { label: prop.label, accept: prop.accept ?? "", onClick: (files) => {
+                                                if (files.length > 0 && prop.fileCallback) {
+                                                    prop.fileCallback(files[0]);
+                                                }
+                                            } }, prop.propertyName));
+                                    case 10 /* InspectableType.Vector2 */:
+                                        return jsx(BoundProperty, { ...commonProps, component: Vector2PropertyLine }, prop.propertyName);
+                                }
+                            }) }));
+                    },
+                },
+            ],
+        });
+        return {
+            dispose: () => {
+                propertiesSectionRegistration.dispose();
+                propertiesContentRegistration.dispose();
+            },
+        };
+    },
+};
+
+const ExtensionManagerContext = createContext(undefined);
+function useExtensionManager() {
+    return useContext(ExtensionManagerContext)?.extensionManager;
+}
+
+const InstalledExtensionsKey = "Babylon/Extensions/InstalledExtensions";
+const ExtensionInstalledKeyPrefix = "Babylon/Extensions/IsExtensionInstalled";
+function GetExtensionInstalledKey(name) {
+    return `${ExtensionInstalledKeyPrefix}/${name}`;
+}
+function GetExtensionIdentity(feed, name) {
+    return `${feed}|${name}`;
+}
+/**
+ * Manages the installation, uninstallation, enabling, and disabling of extensions.
+ */
+class ExtensionManager {
+    constructor(_serviceContainer, _feeds, _onInstallFailed) {
+        this._serviceContainer = _serviceContainer;
+        this._feeds = _feeds;
+        this._onInstallFailed = _onInstallFailed;
+        this._installedExtensions = new Map();
+        this._stateChangedHandlers = new Map();
+    }
+    /**
+     * Creates a new instance of the ExtensionManager.
+     * This will automatically rehydrate previously installed and enabled extensions.
+     * @param serviceContainer The service container to use.
+     * @param feeds The extension feeds to include.
+     * @param onInstallFailed A callback that is called when an extension installation fails.
+     * @returns A promise that resolves to the new instance of the ExtensionManager.
+     */
+    static async CreateAsync(serviceContainer, feeds, onInstallFailed) {
+        const extensionManager = new ExtensionManager(serviceContainer, feeds, onInstallFailed);
+        // Rehydrate installed extensions.
+        const installedExtensionNames = JSON.parse(localStorage.getItem(InstalledExtensionsKey) ?? "[]");
+        for (const installedExtensionName of installedExtensionNames) {
+            const installedExtensionRaw = localStorage.getItem(GetExtensionInstalledKey(installedExtensionName));
+            if (installedExtensionRaw) {
+                const installedExtensionData = JSON.parse(installedExtensionRaw);
+                const feed = feeds.find((feed) => feed.name === installedExtensionData.feed);
+                if (feed) {
+                    const installedExtension = extensionManager._createInstalledExtension(installedExtensionData.metadata, feed);
+                    extensionManager._installedExtensions.set(installedExtension.metadata.name, installedExtension);
+                }
+            }
+        }
+        // Load installed and enabled extensions.
+        const enablePromises = [];
+        for (const extension of extensionManager._installedExtensions.values()) {
+            enablePromises.push((async () => {
+                try {
+                    await extensionManager._enableAsync(extension.metadata, false, false);
+                }
+                catch {
+                    // If enabling the extension fails, uninstall it. The extension install fail callback will still be called,
+                    // so the owner of the ExtensionManager instance can decide what to do with the error.
+                    await extensionManager._uninstallAsync(extension.metadata, false);
+                }
+            })());
+        }
+        await Promise.all(enablePromises);
+        return extensionManager;
+    }
+    /**
+     * Gets the names of the feeds that are included in the extension manager.
+     * @returns The names of the feeds.
+     */
+    get feedNames() {
+        return this._feeds.map((feed) => feed.name);
+    }
+    /**
+     * Queries the extension manager for extensions.
+     * @param filter The filter to apply to the query.
+     * @param feeds The feeds to include in the query.
+     * @param installedOnly Whether to only include installed extensions.
+     * @returns A promise that resolves to the extension query.
+     */
+    async queryExtensionsAsync(filter = "", feeds = this.feedNames, installedOnly = false) {
+        if (installedOnly) {
+            const installedExtensions = Array.from(this._installedExtensions.values()).filter((installedExtension) => feeds.includes(installedExtension.feed.name));
+            return {
+                totalCount: installedExtensions.length,
+                getExtensionsAsync: async (index, count) => {
+                    return installedExtensions.slice(index, index + count).map((installedExtension) => this._createExtension(installedExtension.metadata, installedExtension.feed));
+                },
+            };
+        }
+        const queries = await Promise.all(this._feeds.filter((feed) => feeds.includes(feed.name)).map(async (feed) => Object.assign(await feed.queryExtensionsAsync(filter), { feed })));
+        const totalCount = queries.reduce((sum, query) => sum + query.totalCount, 0);
+        return {
+            totalCount,
+            getExtensionsAsync: async (index, count) => {
+                const extensions = new Array();
+                let remaining = count;
+                for (const query of queries) {
+                    if (remaining <= 0) {
+                        break;
+                    }
+                    if (index >= query.totalCount) {
+                        index -= query.totalCount;
+                        continue;
+                    }
+                    // This is intentionally sequential as we are querying for results until the count of results is met.
+                    // eslint-disable-next-line no-await-in-loop
+                    const metadataSlice = await query.getExtensionMetadataAsync(index, remaining);
+                    extensions.push(...metadataSlice.map((metadata) => this._createExtension(metadata, query.feed)));
+                    remaining -= metadataSlice.length;
+                    index = 0;
+                }
+                return extensions;
+            },
+        };
+    }
+    /**
+     * Disposes the extension manager.
+     */
+    dispose() {
+        for (const installedExtension of this._installedExtensions.values()) {
+            // eslint-disable-next-line github/no-then
+            this._disableAsync(installedExtension.metadata, false).catch((error) => {
+                Logger.Warn(`Failed to disable extension ${installedExtension.metadata.name}: ${error}`);
+            });
+        }
+        this._stateChangedHandlers.clear();
+    }
+    async _installAsync(metadata, feed, isNestedStateChange) {
+        let installedExtension = this._installedExtensions.get(metadata.name);
+        if (!installedExtension) {
+            installedExtension = this._createInstalledExtension(metadata, feed);
+            installedExtension.isStateChanging = true;
+            this._installedExtensions.set(metadata.name, installedExtension);
+            try {
+                // Enable the extension.
+                await this._enableAsync(metadata, true, true);
+            }
+            catch (error) {
+                this._installedExtensions.delete(metadata.name);
+                throw error;
+            }
+            finally {
+                !isNestedStateChange && (installedExtension.isStateChanging = false);
+            }
+            // Mark the extension as being installed.
+            localStorage.setItem(GetExtensionInstalledKey(GetExtensionIdentity(feed.name, metadata.name)), JSON.stringify({
+                feed: feed.name,
+                metadata,
+            }));
+            localStorage.setItem(InstalledExtensionsKey, JSON.stringify(Array.from(this._installedExtensions.values()).map((extension) => GetExtensionIdentity(extension.feed.name, extension.metadata.name))));
+        }
+        return installedExtension;
+    }
+    async _uninstallAsync(metadata, isNestedStateChange) {
+        const installedExtension = this._installedExtensions.get(metadata.name);
         if (installedExtension && (isNestedStateChange || !installedExtension.isStateChanging)) {
             try {
                 !isNestedStateChange && (installedExtension.isStateChanging = true);
@@ -3888,7 +4498,7 @@ class ServiceContainer {
     }
 }
 
-const useStyles$9 = makeStyles({
+const useStyles$8 = makeStyles({
     themeButton: {
         margin: 0,
     },
@@ -3907,7 +4517,7 @@ const ThemeSelectorServiceDefinition = {
             suppressTeachingMoment: true,
             order: -300,
             component: () => {
-                const classes = useStyles$9();
+                const classes = useStyles$8();
                 const { isDarkMode, themeMode, setThemeMode } = useThemeMode();
                 const onSelectedThemeChange = useCallback((e, data) => {
                     setThemeMode(data.checkedItems.includes("System") ? "system" : data.checkedItems[0].toLocaleLowerCase());
@@ -3925,7 +4535,7 @@ const ThemeSelectorServiceDefinition = {
 };
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
-const useStyles$8 = makeStyles({
+const useStyles$7 = makeStyles({
     app: {
         colorScheme: "light dark",
         flexGrow: 1,
@@ -3961,7 +4571,7 @@ function MakeModularTool(options) {
         SetThemeMode(themeMode);
     }
     const modularToolRootComponent = () => {
-        const classes = useStyles$8();
+        const classes = useStyles$7();
         const [extensionManagerContext, setExtensionManagerContext] = useState();
         const [requiredExtensions, setRequiredExtensions] = useState();
         const [requiredExtensionsDeferred, setRequiredExtensionsDeferred] = useState();
@@ -3987,7 +4597,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-D9hRcNXP.js');
+                    const { ExtensionListServiceDefinition } = await import('./extensionsListService-DcpjIM_c.js');
                     await serviceContainer.addServiceAsync(ExtensionListServiceDefinition);
                 }
                 // Register the theme selector service (for selecting the theme) if theming is configured.
@@ -4165,7 +4775,7 @@ const MeshIcon = createFluentIcon("Mesh", "16", '<path d="M14.03,3.54l-5.11-2.07
 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 useStyles$7 = makeStyles({
+const useStyles$6 = makeStyles({
     coordinatesModeButton: {
         margin: `0 0 0 ${tokens.spacingHorizontalXS}`,
     },
@@ -4175,7 +4785,7 @@ const useStyles$7 = makeStyles({
 });
 const GizmoToolbar = (props) => {
     const { scene, entity, gizmoService } = props;
-    const classes = useStyles$7();
+    const classes = useStyles$6();
     const gizmoManager = useResource(useCallback(() => {
         const utilityLayerRef = gizmoService.getUtilityLayer(scene);
         const keepDepthUtilityLayerRef = gizmoService.getUtilityLayer(scene, "keepDepth");
@@ -4259,260 +4869,67 @@ const GizmoToolbar = (props) => {
         };
     }, [gizmoManager, gizmoMode, entity]);
     const updateGizmoMode = useCallback((mode) => {
-        setGizmoMode((currentMode) => (currentMode === mode ? undefined : mode));
-    }, []);
-    const onCoordinatesModeChange = useCallback((e, data) => {
-        gizmoManager.coordinatesMode = Number(data.checkedItems[0]);
-    }, []);
-    const toggleCoordinatesMode = useCallback(() => {
-        gizmoManager.coordinatesMode = coordinatesMode === 1 /* GizmoCoordinatesMode.Local */ ? 0 /* GizmoCoordinatesMode.World */ : 1 /* GizmoCoordinatesMode.Local */;
-    }, [gizmoManager, coordinatesMode]);
-    return (jsxs(Fragment, { children: [jsx(ToggleButton, { title: "Translate", checkedIcon: TranslateIcon, value: gizmoMode === "translate", onChange: () => updateGizmoMode("translate") }), jsx(ToggleButton, { title: "Rotate", checkedIcon: ArrowRotateClockwiseRegular, value: gizmoMode === "rotate", onChange: () => updateGizmoMode("rotate") }), jsx(ToggleButton, { title: "Scale", checkedIcon: ArrowExpandRegular, value: gizmoMode === "scale", onChange: () => updateGizmoMode("scale") }), jsx(ToggleButton, { title: "Bounding Box", checkedIcon: SelectObjectRegular, value: gizmoMode === "boundingBox", onChange: () => updateGizmoMode("boundingBox") }), jsx(Collapse, { visible: !!gizmoMode, orientation: "horizontal", children: jsxs(Menu, { positioning: "below-end", checkedValues: { coordinatesMode: [coordinatesMode.toString()] }, onCheckedValueChange: onCoordinatesModeChange, children: [jsx(MenuTrigger, { disableButtonEnhancement: true, children: (triggerProps) => (jsx(Tooltip, { content: "Coordinates Mode", relationship: "label", children: jsx(SplitButton, { className: classes.coordinatesModeButton, menuButton: triggerProps, primaryActionButton: {
-                                        onClick: toggleCoordinatesMode,
-                                    }, size: "small", appearance: "transparent", shape: "rounded", icon: coordinatesMode === 1 /* GizmoCoordinatesMode.Local */ ? jsx(CubeRegular, {}) : jsx(GlobeRegular, {}) }) })) }), jsx(MenuPopover, { className: classes.coordinatesModeMenu, children: jsxs(MenuList, { children: [jsx(MenuItemRadio, { name: "coordinatesMode", value: 1 /* GizmoCoordinatesMode.Local */.toString(), children: "Local" }), jsx(MenuItemRadio, { name: "coordinatesMode", value: 0 /* GizmoCoordinatesMode.World */.toString(), children: "World" })] }) })] }) })] }));
-};
-
-const GizmoToolbarServiceDefinition = {
-    friendlyName: "Gizmo Toolbar",
-    consumes: [SceneContextIdentity, ShellServiceIdentity, SelectionServiceIdentity, GizmoServiceIdentity],
-    factory: (sceneContext, shellService, selectionService, gizmoService) => {
-        shellService.addToolbarItem({
-            key: "Gizmo Toolbar",
-            verticalLocation: "top",
-            horizontalLocation: "left",
-            suppressTeachingMoment: true,
-            component: () => {
-                const scene = useObservableState(() => sceneContext.currentScene, sceneContext.currentSceneObservable);
-                const selectedEntity = useObservableState(() => selectionService.selectedEntity, selectionService.onSelectedEntityChanged);
-                return scene ? jsx(GizmoToolbar, { scene: scene, entity: selectedEntity, gizmoService: gizmoService }) : null;
-            },
-        });
-    },
-};
-
-const useStyles$6 = makeStyles({
-    badge: {
-        margin: tokens.spacingHorizontalXXS,
-        fontFamily: "monospace",
-    },
-});
-const MiniStatsServiceDefinition = {
-    friendlyName: "Mini Stats",
-    consumes: [SceneContextIdentity, ShellServiceIdentity],
-    factory: (sceneContext, shellService) => {
-        shellService.addToolbarItem({
-            key: "Mini Stats",
-            verticalLocation: "bottom",
-            horizontalLocation: "right",
-            suppressTeachingMoment: true,
-            component: () => {
-                const classes = useStyles$6();
-                const scene = useObservableState(useCallback(() => sceneContext.currentScene, [sceneContext.currentScene]), sceneContext.currentSceneObservable);
-                const engine = scene?.getEngine();
-                const fps = useObservableState(useCallback(() => (engine ? Math.round(engine.getFps()) : null), [engine]), engine?.onBeginFrameObservable);
-                return fps != null ? jsx(Badge, { appearance: "outline", className: classes.badge, children: `${fps} fps` }) : null;
-            },
-        });
-    },
-};
-
-const TargetedAnimationGeneralProperties = (props) => {
-    const { selectionService } = props;
-    return (jsx(Fragment, { children: jsx(LinkToEntityPropertyLine, { label: "Target", description: "The entity animated by this animation.", entity: props.targetedAnimation.target, selectionService: selectionService }) }));
-};
-
-/**
- * Renders a label with an optional popup containing more info
- * @param props
- * @returns
- */
-const InfoLabel = (props) => {
-    InfoLabel.displayName = "InfoLabel";
-    return (jsx(InfoLabel$1, { htmlFor: props.htmlFor, info: props.info, children: jsx(Body1, { children: props.label }) }));
-};
-
-const TextInput = (props) => {
-    TextInput.displayName = "TextInput";
-    const classes = useInputStyles$1();
-    const [value, setValue] = useState(props.value);
-    const lastCommittedValue = useRef(props.value);
-    const { size } = useContext(ToolContext);
-    useEffect(() => {
-        if (props.value !== lastCommittedValue.current) {
-            setValue(props.value); // Update local state when props.value changes
-            lastCommittedValue.current = props.value;
-        }
-    }, [props.value]);
-    const validateValue = (val) => {
-        const failsValidator = props.validator && !props.validator(val);
-        return !failsValidator;
-    };
-    const tryCommitValue = (currVal) => {
-        // Only commit if valid and different from last committed value
-        if (validateValue(currVal) && currVal !== lastCommittedValue.current) {
-            lastCommittedValue.current = currVal;
-            props.onChange(currVal);
-        }
-    };
-    const handleChange = (event, data) => {
-        event.stopPropagation();
-        setValue(data.value);
-        tryCommitValue(data.value);
-    };
-    const handleKeyUp = (event) => {
-        event.stopPropagation();
-        setValue(event.currentTarget.value);
-        tryCommitValue(event.currentTarget.value);
-    };
-    const mergedClassName = mergeClasses(classes.input, !validateValue(value) ? classes.invalid : "", props.className);
-    const id = useId("input-button");
-    return (jsxs("div", { className: classes.container, children: [props.infoLabel && jsx(InfoLabel, { ...props.infoLabel, htmlFor: id }), jsx(Input, { ...props, input: { className: classes.inputSlot }, id: id, size: size, value: value, onChange: handleChange, onKeyUp: handleKeyUp, onKeyDown: HandleKeyDown, onBlur: HandleOnBlur, className: mergedClassName })] }));
-};
-
-const SpinButton = (props) => {
-    SpinButton.displayName = "SpinButton";
-    const classes = useInputStyles$1();
-    const { size } = useContext(ToolContext);
-    const { min, max } = props;
-    const [value, setValue] = useState(props.value);
-    const lastCommittedValue = useRef(props.value);
-    // 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 = props.step != undefined ? props.step : props.forceInt ? 1 : undefined;
-    const precision = Math.min(4, step !== undefined ? Math.max(0, CalculatePrecision(step)) : 2); // If no step, set precision to 2. Regardless, cap precision at 4 to avoid wild numbers
-    useEffect(() => {
-        if (props.value !== lastCommittedValue.current) {
-            lastCommittedValue.current = props.value;
-            setValue(props.value); // Update local state when props.value changes
-        }
-    }, [props.value]);
-    const validateValue = (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
-        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);
-        }
-    };
-    const handleKeyUp = (event) => {
-        event.stopPropagation(); // Prevent event propagation
-        if (event.key !== "Enter") {
-            const currVal = parseFloat(event.target.value); // Cannot use currentTarget.value as it won't have the most recently typed value
-            setValue(currVal);
-            tryCommitValue(currVal);
-        }
-    };
-    const id = useId("spin-button");
-    const mergedClassName = mergeClasses(classes.input, !validateValue(value) ? classes.invalid : "", props.className);
-    return (jsxs("div", { className: classes.container, children: [props.infoLabel && jsx(InfoLabel, { ...props.infoLabel, htmlFor: id }), jsx(SpinButton$1, { ...props, input: { className: classes.inputSlot }, step: step, id: id, size: size, precision: precision, displayValue: `${value.toFixed(precision)}${props.unit ? " " + props.unit : ""}`, value: value, onChange: handleChange, onKeyUp: handleKeyUp, onKeyDown: HandleKeyDown, onBlur: HandleOnBlur, className: mergedClassName })] }));
+        setGizmoMode((currentMode) => (currentMode === mode ? undefined : mode));
+    }, []);
+    const onCoordinatesModeChange = useCallback((e, data) => {
+        gizmoManager.coordinatesMode = Number(data.checkedItems[0]);
+    }, []);
+    const toggleCoordinatesMode = useCallback(() => {
+        gizmoManager.coordinatesMode = coordinatesMode === 1 /* GizmoCoordinatesMode.Local */ ? 0 /* GizmoCoordinatesMode.World */ : 1 /* GizmoCoordinatesMode.Local */;
+    }, [gizmoManager, coordinatesMode]);
+    return (jsxs(Fragment, { children: [jsx(ToggleButton, { title: "Translate", checkedIcon: TranslateIcon, value: gizmoMode === "translate", onChange: () => updateGizmoMode("translate") }), jsx(ToggleButton, { title: "Rotate", checkedIcon: ArrowRotateClockwiseRegular, value: gizmoMode === "rotate", onChange: () => updateGizmoMode("rotate") }), jsx(ToggleButton, { title: "Scale", checkedIcon: ArrowExpandRegular, value: gizmoMode === "scale", onChange: () => updateGizmoMode("scale") }), jsx(ToggleButton, { title: "Bounding Box", checkedIcon: SelectObjectRegular, value: gizmoMode === "boundingBox", onChange: () => updateGizmoMode("boundingBox") }), jsx(Collapse, { visible: !!gizmoMode, orientation: "horizontal", children: jsxs(Menu, { positioning: "below-end", checkedValues: { coordinatesMode: [coordinatesMode.toString()] }, onCheckedValueChange: onCoordinatesModeChange, children: [jsx(MenuTrigger, { disableButtonEnhancement: true, children: (triggerProps) => (jsx(Tooltip, { content: "Coordinates Mode", relationship: "label", children: jsx(SplitButton, { className: classes.coordinatesModeButton, menuButton: triggerProps, primaryActionButton: {
+                                        onClick: toggleCoordinatesMode,
+                                    }, size: "small", appearance: "transparent", shape: "rounded", icon: coordinatesMode === 1 /* GizmoCoordinatesMode.Local */ ? jsx(CubeRegular, {}) : jsx(GlobeRegular, {}) }) })) }), jsx(MenuPopover, { className: classes.coordinatesModeMenu, children: jsxs(MenuList, { children: [jsx(MenuItemRadio, { name: "coordinatesMode", value: 1 /* GizmoCoordinatesMode.Local */.toString(), children: "Local" }), jsx(MenuItemRadio, { name: "coordinatesMode", value: 0 /* GizmoCoordinatesMode.World */.toString(), children: "World" })] }) })] }) })] }));
 };
 
-/**
- * Wraps a text input in a property line
- * @param props - PropertyLineProps and InputProps
- * @returns property-line wrapped input component
- */
-const TextInputPropertyLine = (props) => {
-    TextInputPropertyLine.displayName = "TextInputPropertyLine";
-    return (jsx(PropertyLine, { ...props, children: jsx(TextInput, { ...props }) }));
-};
-/**
- * Wraps a number input in a property line
- * To force integer values, use forceInt param (this is distinct from the 'step' param, which will still allow submitting an integer value. forceInt will not)
- * @param props - PropertyLineProps and InputProps
- * @returns property-line wrapped input component
- */
-const NumberInputPropertyLine = (props) => {
-    NumberInputPropertyLine.displayName = "NumberInputPropertyLine";
-    return (jsx(PropertyLine, { ...props, children: jsx(SpinButton, { ...props }) }));
+const GizmoToolbarServiceDefinition = {
+    friendlyName: "Gizmo Toolbar",
+    consumes: [SceneContextIdentity, ShellServiceIdentity, SelectionServiceIdentity, GizmoServiceIdentity],
+    factory: (sceneContext, shellService, selectionService, gizmoService) => {
+        shellService.addToolbarItem({
+            key: "Gizmo Toolbar",
+            verticalLocation: "top",
+            horizontalLocation: "left",
+            suppressTeachingMoment: true,
+            component: () => {
+                const scene = useObservableState(() => sceneContext.currentScene, sceneContext.currentSceneObservable);
+                const selectedEntity = useObservableState(() => selectionService.selectedEntity, selectionService.onSelectedEntityChanged);
+                return scene ? jsx(GizmoToolbar, { scene: scene, entity: selectedEntity, gizmoService: gizmoService }) : null;
+            },
+        });
+    },
 };
 
-const useSyncedSliderStyles = makeStyles({
-    container: { display: "flex" },
-    syncedSlider: {
-        flex: "1 1 0",
-        flexDirection: "row",
-        display: "flex",
-        alignItems: "center",
-    },
-    slider: {
-        minWidth: CustomTokens.sliderMinWidth, // Minimum width for slider to remain usable
-        maxWidth: CustomTokens.sliderMaxWidth,
+const useStyles$5 = makeStyles({
+    badge: {
+        margin: tokens.spacingHorizontalXXS,
+        fontFamily: "monospace",
     },
 });
-/**
- * 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);
-    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 ?? ""); // 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
-    };
-    return (jsxs("div", { className: classes.container, children: [infoLabel && jsx(InfoLabel, { ...infoLabel, htmlFor: "syncedSlider" }), jsxs("div", { id: "syncedSlider", className: classes.syncedSlider, children: [props.min !== undefined && props.max !== undefined && (jsx(Slider, { ...passthroughProps, className: classes.slider, size: size, min: min / step, max: max / step, step: undefined, value: value / step, onChange: handleSliderChange, onPointerDown: handleSliderPointerDown, onPointerUp: handleSliderPointerUp })), jsx(SpinButton, { ...passthroughProps, value: value, onChange: handleInputChange, step: props.step })] })] }));
+const MiniStatsServiceDefinition = {
+    friendlyName: "Mini Stats",
+    consumes: [SceneContextIdentity, ShellServiceIdentity],
+    factory: (sceneContext, shellService) => {
+        shellService.addToolbarItem({
+            key: "Mini Stats",
+            verticalLocation: "bottom",
+            horizontalLocation: "right",
+            suppressTeachingMoment: true,
+            component: () => {
+                const classes = useStyles$5();
+                const scene = useObservableState(useCallback(() => sceneContext.currentScene, [sceneContext.currentScene]), sceneContext.currentSceneObservable);
+                const engine = scene?.getEngine();
+                const fps = useObservableState(useCallback(() => (engine ? Math.round(engine.getFps()) : null), [engine]), engine?.onBeginFrameObservable);
+                return fps != null ? jsx(Badge, { appearance: "outline", className: classes.badge, children: `${fps} fps` }) : null;
+            },
+        });
+    },
 };
 
-/**
- * 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 TargetedAnimationGeneralProperties = (props) => {
+    const { selectionService } = props;
+    return (jsx(Fragment, { children: jsx(LinkToEntityPropertyLine, { label: "Target", description: "The entity animated by this animation.", entity: props.targetedAnimation.target, selectionService: selectionService }) }));
+};
 
 const AnimationGroupControlProperties = (props) => {
     const { animationGroup } = props;
@@ -4557,440 +4974,136 @@ const AnimationGroupPropertiesServiceDefinition = {
                     component: ({ context }) => jsx(AnimationGroupControlProperties, { animationGroup: context }),
                 },
                 {
-                    section: "Info",
-                    component: ({ context }) => jsx(AnimationGroupInfoProperties, { animationGroup: context }),
-                },
-            ],
-        });
-        const targetedAnimationContentRegistration = propertiesService.addSectionContent({
-            key: "Targeted Animation Properties",
-            predicate: (entity) => entity instanceof TargetedAnimation,
-            content: [
-                {
-                    section: "General",
-                    component: ({ context }) => jsx(TargetedAnimationGeneralProperties, { targetedAnimation: context, selectionService: selectionService }),
-                },
-            ],
-        });
-        return {
-            dispose: () => {
-                animationGroupContentRegistration.dispose();
-                targetedAnimationContentRegistration.dispose();
-            },
-        };
-    },
-};
-
-const useClasses = makeStyles({
-    container: {
-        display: "flex",
-        flexDirection: "column",
-        gap: tokens.spacingVerticalS, // 8px
-    },
-});
-const MessageBar = (props) => {
-    MessageBar.displayName = "MessageBar";
-    const { message, title: header, intent, docLink } = props;
-    const classes = useClasses();
-    return (jsx("div", { className: classes.container, children: jsx(MessageBar$1, { intent: intent, layout: "multiline", children: jsxs(MessageBarBody, { children: [jsx(MessageBarTitle, { children: header }), message, docLink && (jsxs(Fragment, { children: [" - ", jsx(Link, { url: docLink, value: "Learn More" })] }))] }) }) }));
-};
-
-const AnimationsProperties = (props) => {
-    const { scene, entity } = props;
-    const animations = entity.animations ?? [];
-    const ranges = entity.getAnimationRanges?.()?.filter((range) => !!range) ?? [];
-    const childAnimatablesAnimations = entity.getAnimatables?.().flatMap((animatable) => animatable.animations ?? []) ?? [];
-    animations.concat(childAnimatablesAnimations);
-    const lastFrom = useRef(0);
-    const lastTo = useRef(0);
-    const lastLoop = useRef(false);
-    const animatablesForTarget = scene.getAllAnimatablesByTarget(entity);
-    const isPlaying = animatablesForTarget.length > 0;
-    const mainAnimatable = isPlaying ? animatablesForTarget[0] : undefined;
-    const animationPropertiesOverride = useProperty(mainAnimatable, "animationPropertiesOverride");
-    if (mainAnimatable) {
-        lastFrom.current = mainAnimatable.fromFrame;
-        lastTo.current = mainAnimatable.toFrame;
-        lastLoop.current = mainAnimatable.loopAnimation;
-    }
-    const hasAnimations = animations.length > 0 || ranges.length > 0;
-    const currentFrame = useObservableState(useCallback(() => {
-        return mainAnimatable ? mainAnimatable.masterFrame : (scene.getAllAnimatablesByTarget(entity)[0]?.masterFrame ?? 0);
-    }, [scene, entity, mainAnimatable]), hasAnimations ? scene.onAfterAnimationsObservable : undefined);
-    return (jsx(Fragment, { children: !hasAnimations ? (jsx(MessageBar, { intent: "info", title: "No Animations", message: "To modify animations, attach an animation to this node.", docLink: "https://doc.babylonjs.com/features/featuresDeepDive/animation/" })) : (jsxs(Fragment, { children: [ranges.length > 0 && (jsx(PropertyLine, { label: "Ranges", expandedContent: jsx(Fragment, { children: ranges.map((range) => {
-                            return (jsx(ButtonLine, { label: range.name, onClick: () => {
-                                    scene.beginAnimation(entity, range.from, range.to, true);
-                                } }, range.name));
-                        }) }), children: jsx(Badge, { appearance: "filled", children: ranges.length }) })), animations.length > 0 && (jsxs(Fragment, { children: [jsx(PropertyLine, { label: "Animations", expandedContent: jsx(Fragment, { children: animations.map((animation, index) => {
-                                    return jsx(TextPropertyLine, { label: `${index}: ${animation.name}`, value: animation.targetProperty }, animation.uniqueId);
-                                }) }), children: jsx(Badge, { appearance: "filled", children: animations.length }) }), mainAnimatable && (jsx(Fragment, { children: jsx(PropertyLine, { label: "Animation Controls", expandedContent: jsxs(Fragment, { children: [jsx(NumberInputPropertyLine, { label: "From", value: mainAnimatable.fromFrame, onChange: (value) => {
-                                                scene.stopAnimation(entity);
-                                                scene.beginAnimation(entity, value, mainAnimatable.toFrame, true);
-                                            } }), jsx(NumberInputPropertyLine, { label: "To", value: mainAnimatable.toFrame, onChange: (value) => {
-                                                scene.stopAnimation(entity);
-                                                scene.beginAnimation(entity, mainAnimatable.fromFrame, value, true);
-                                            } }), jsx(SwitchPropertyLine, { label: "Loop", value: mainAnimatable.loopAnimation, onChange: (value) => {
-                                                for (const animatable of animatablesForTarget) {
-                                                    animatable.loopAnimation = value;
-                                                }
-                                            } }), jsx(SyncedSliderPropertyLine, { label: "Current Frame", value: currentFrame, min: mainAnimatable.fromFrame, max: mainAnimatable.toFrame, step: (mainAnimatable.toFrame - mainAnimatable.fromFrame) / 1000, onChange: (value) => {
-                                                mainAnimatable.goToFrame(value);
-                                            } })] }), expandByDefault: true }) })), jsx(ButtonLine, { label: isPlaying ? "Stop Animation" : "Play Animation", onClick: () => {
-                                if (isPlaying) {
-                                    scene.stopAnimation(entity);
-                                }
-                                else {
-                                    scene.beginAnimation(entity, lastFrom.current, lastTo.current, lastLoop.current);
-                                }
-                            } }), mainAnimatable && (ranges.length > 0 || animations.length > 0) ? (jsxs(Fragment, { children: [jsx(SwitchPropertyLine, { label: "Enable Override", value: animationPropertiesOverride != null, onChange: (value) => {
-                                        if (value) {
-                                            mainAnimatable.animationPropertiesOverride = new AnimationPropertiesOverride();
-                                            mainAnimatable.animationPropertiesOverride.blendingSpeed = 0.05;
-                                        }
-                                        else {
-                                            mainAnimatable.animationPropertiesOverride = undefined;
-                                        }
-                                    } }), jsx(Collapse, { visible: animationPropertiesOverride != null, children: jsxs("div", { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Enable Blending", target: animationPropertiesOverride, propertyKey: "enableBlending" }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Blending Speed", target: animationPropertiesOverride, propertyKey: "blendingSpeed", min: 0, max: 0.1, step: 0.01 })] }) })] })) : null] }))] })) }));
-};
-
-function IsAnimatable(entity) {
-    return entity.animations !== undefined;
-}
-function IsAnimationRangeContainer(entity) {
-    return entity.getAnimationRanges !== undefined;
-}
-function IsAnimatableContainer(entity) {
-    return entity.getAnimatables !== undefined;
-}
-const AnimationPropertiesServiceDefinition = {
-    friendlyName: "Animation Properties",
-    consumes: [PropertiesServiceIdentity, SelectionServiceIdentity, SceneContextIdentity],
-    factory: (propertiesService, selectionService, sceneContext) => {
-        const scene = sceneContext.currentScene;
-        if (!scene) {
-            return undefined;
-        }
-        const animationContentRegistration = propertiesService.addSectionContent({
-            key: "Animation Properties",
-            predicate: (entity) => IsAnimatable(entity) || IsAnimationRangeContainer(entity) || IsAnimatableContainer(entity),
+                    section: "Info",
+                    component: ({ context }) => jsx(AnimationGroupInfoProperties, { animationGroup: context }),
+                },
+            ],
+        });
+        const targetedAnimationContentRegistration = propertiesService.addSectionContent({
+            key: "Targeted Animation Properties",
+            predicate: (entity) => entity instanceof TargetedAnimation,
             content: [
                 {
-                    section: "Animation",
-                    component: ({ context }) => jsx(AnimationsProperties, { scene: scene, entity: context }),
+                    section: "General",
+                    component: ({ context }) => jsx(TargetedAnimationGeneralProperties, { targetedAnimation: context, selectionService: selectionService }),
                 },
             ],
         });
         return {
             dispose: () => {
-                animationContentRegistration.dispose();
+                animationGroupContentRegistration.dispose();
+                targetedAnimationContentRegistration.dispose();
             },
         };
     },
 };
 
-const HasZ = (vector) => !(vector instanceof Vector2);
-const HasW = (vector) => vector instanceof Vector4 || vector instanceof Quaternion;
-/**
- * Reusable component which renders a vector property line containing a label, vector value, and expandable XYZW values
- * The expanded section contains a slider/input box for each component of the vector (x, y, z, w)
- * @param props
- * @returns
- */
-const TensorPropertyLine = (props) => {
-    TensorPropertyLine.displayName = "TensorPropertyLine";
-    const converted = (val) => (props.valueConverter ? props.valueConverter.from(val) : val);
-    const formatted = (val) => converted(val).toFixed(props.step !== undefined ? Math.max(0, CalculatePrecision(props.step)) : 2);
-    const [vector, setVector] = useState(props.value);
-    const { min, max } = props;
-    const onChange = (val, key) => {
-        const value = props.valueConverter ? props.valueConverter.to(val) : val;
-        const newVector = vector.clone();
-        newVector[key] = value; // The syncedSlider for 'w' is only rendered when vector is a Vector4, so this is safe
-        setVector(newVector);
-        props.onChange(newVector);
-    };
-    useEffect(() => {
-        setVector(props.value);
-    }, [props.value, props.expandedContent]);
-    return (jsx(PropertyLine, { ...props, onCopy: () => `new ${props.value.getClassName()}(${vector.x},${vector.y}${HasZ(vector) ? `,${vector.z}` : ""}${HasW(vector) ? `,${vector.w}` : ""})`, expandedContent: jsxs(Fragment, { children: [jsx(SyncedSliderPropertyLine, { label: "X", value: converted(vector.x), min: min, max: max, onChange: (val) => onChange(val, "x"), unit: props.unit, step: props.step }), jsx(SyncedSliderPropertyLine, { label: "Y", value: converted(vector.y), min: min, max: max, onChange: (val) => onChange(val, "y"), unit: props.unit, step: props.step }), HasZ(vector) && (jsx(SyncedSliderPropertyLine, { label: "Z", value: converted(vector.z), min: min, max: max, onChange: (val) => onChange(val, "z"), unit: props.unit, step: props.step })), HasW(vector) && (jsx(SyncedSliderPropertyLine, { label: "W", value: converted(vector.w), min: min, max: max, onChange: (val) => onChange(val, "w"), unit: props.unit, step: props.step }))] }), 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 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 QuaternionPropertyLineInternal = TensorPropertyLine;
-const QuaternionPropertyLine = (props) => {
-    QuaternionPropertyLine.displayName = "QuaternionPropertyLine";
-    const min = props.useDegrees ? 0 : undefined;
-    const max = props.useDegrees ? 360 : undefined;
-    const [quat, setQuat] = useState(props.value);
-    useEffect(() => {
-        setQuat(props.value);
-    }, [props.value]);
-    // Extract only the properties that exist on QuaternionPropertyLineProps
-    const { useDegrees, ...restProps } = props;
-    const onQuatChange = (val) => {
-        setQuat(val);
-        props.onChange(val);
-    };
-    const onEulerChange = (val) => {
-        const quat = Quaternion.FromEulerAngles(val.x, val.y, val.z);
-        onQuatChange(quat);
-    };
-    return useDegrees ? (jsx(Vector3PropertyLine, { ...restProps, nullable: false, ignoreNullable: false, value: quat.toEulerAngles(), valueConverter: ToDegreesConverter, min: min, max: max, onChange: onEulerChange, unit: "deg" })) : (jsx(QuaternionPropertyLineInternal, { ...props, nullable: false, value: quat, min: min, max: max, onChange: onQuatChange }));
-};
-const Vector2PropertyLine = TensorPropertyLine;
-const Vector3PropertyLine = TensorPropertyLine;
-const Vector4PropertyLine = TensorPropertyLine;
-
-const useDropdownStyles = makeStyles({
-    dropdown: {
-        minWidth: 0,
-        width: "100%",
-    },
+const useClasses = makeStyles({
     container: {
         display: "flex",
         flexDirection: "column",
-        justifyContent: "center", // align items vertically
-    },
-    dropdownText: { textAlign: "end", textOverflow: "ellipsis", whiteSpace: "nowrap", overflowX: "hidden" },
-});
-/**
- * Renders a fluent UI dropdown component for the options passed in, and an additional 'Not Defined' option if null is set to true
- * This component can handle both null and undefined values
- * @param props
- * @returns dropdown component
- */
-const Dropdown = (props) => {
-    Dropdown.displayName = "Dropdown";
-    const classes = useDropdownStyles();
-    const { options, value } = props;
-    const [defaultVal, setDefaultVal] = useState(props.value);
-    const { size } = useContext(ToolContext);
-    useEffect(() => {
-        setDefaultVal(value);
-    }, [props.value]);
-    const id = useId("dropdown");
-    const mergedClassName = mergeClasses(classes.container, props.className);
-    const optionLabel = options.find((o) => o.value === defaultVal)?.label;
-    return (jsxs("div", { className: mergedClassName, children: [props.infoLabel && jsx(InfoLabel, { ...props.infoLabel, htmlFor: id }), jsx(Dropdown$1, { id: id, disabled: props.disabled, size: size, className: classes.dropdown, button: jsx("span", { className: classes.dropdownText, children: optionLabel }), onOptionSelect: (evt, data) => {
-                    const value = typeof props.value === "number" ? Number(data.optionValue) : data.optionValue;
-                    if (value !== undefined) {
-                        setDefaultVal(value);
-                        props.onChange(value);
-                    }
-                }, selectedOptions: [defaultVal.toString()], value: optionLabel, children: options.map((option) => (jsx(Option, { value: option.value.toString(), disabled: false, children: option.label }, option.label))) })] }));
-};
-const NumberDropdown = Dropdown;
-const StringDropdown = Dropdown;
-
-const useColorPickerStyles = makeStyles({
-    container: {
-        width: "350px",
-        display: "flex", // becomes a flexbox
-        flexDirection: "column", // with children in a column
-        alignItems: "center", // centers children horizontally
-        justifyContent: "center", // centers children vertically (if height is set)
-        gap: tokens.spacingVerticalM,
-        overflow: "visible",
-    },
-    row: {
-        flex: 1, // is a row in the container's flex column
-        display: "flex", // becomes its own flexbox
-        flexDirection: "row", // with children in a row
-        gap: tokens.spacingHorizontalXL,
-        alignItems: "center", // align items vertically
-        width: "100%",
-    },
-    colorPicker: {
-        flex: 1,
-        width: "350px",
-        height: "350px",
-    },
-    previewColor: {
-        width: "60px",
-        height: "60px",
-        borderRadius: tokens.borderRadiusMedium, // 4px?
-        border: `${tokens.spacingVerticalXXS} solid ${tokens.colorNeutralShadowKeyLighter}`,
-        "@media (forced-colors: active)": {
-            forcedColorAdjust: "none", // ensures elmement maintains color in high constrast mode
-        },
-    },
-    inputRow: {
-        display: "flex",
-        flexDirection: "row",
-        flex: 1, // grow and fill available space
-        justifyContent: "center",
-        gap: "10px",
-        width: "100%",
-    },
-    inputField: {
-        flex: 1, // grow and fill available space
-        width: "auto",
-        minWidth: 0,
-        gap: tokens.spacingVerticalSNudge, // 6px
+        gap: tokens.spacingVerticalS, // 8px
     },
-});
-const ColorPickerPopup = (props) => {
-    ColorPickerPopup.displayName = "ColorPickerPopup";
-    const classes = useColorPickerStyles();
-    const [color, setColor] = useState(props.value);
-    const [popoverOpen, setPopoverOpen] = useState(false);
-    const [isLinear, setIsLinear] = useState(props.isLinearMode ?? false);
-    const [isFloat, setFloat] = useState(false);
-    const { size } = useContext(ToolContext);
-    useEffect(() => {
-        setColor(props.value); // Ensures the trigger color updates when props.value changes
-    }, [props.value]);
-    const handleColorPickerChange = (_, data) => {
-        let color = Color3.FromHSV(data.color.h, data.color.s, data.color.v);
-        if (props.value instanceof Color4) {
-            color = Color4.FromColor3(color, data.color.a ?? 1);
-        }
-        handleChange(color);
-    };
-    const handleChange = (newColor) => {
-        setColor(newColor);
-        props.onChange(newColor); // Ensures the parent is notified when color changes from within colorPicker
-    };
-    return (jsxs(Popover, { positioning: {
-            align: "start",
-            overflowBoundary: document.body,
-            autoSize: true,
-        }, open: popoverOpen, trapFocus: true, onOpenChange: (_, data) => setPopoverOpen(data.open), children: [jsx(PopoverTrigger, { disableButtonEnhancement: true, children: jsx(ColorSwatch, { borderColor: tokens.colorNeutralShadowKeyDarker, size: size === "small" ? "extra-small" : "small", shape: "rounded", color: color.toHexString(), value: color.toHexString().slice(1) }) }), jsx(PopoverSurface, { children: jsxs("div", { className: classes.container, children: [jsxs(ColorPicker, { className: classes.colorPicker, color: rgbaToHsv(color), onColorChange: handleColorPickerChange, children: [jsx(ColorArea, { inputX: { "aria-label": "Saturation" }, inputY: { "aria-label": "Brightness" } }), jsx(ColorSlider, { "aria-label": "Hue" }), color instanceof Color4 && jsx(AlphaSlider, { "aria-label": "Alpha" })] }), jsxs("div", { className: classes.row, children: [jsx("div", { className: classes.previewColor, style: { backgroundColor: color.toHexString() } }), jsx(NumberDropdown, { className: classes.inputField, infoLabel: {
-                                        label: "Color Space",
-                                        info: jsx(Body1, { children: "Today this is not mutable as the color space is determined by the entity. Soon we will allow swapping" }),
-                                    }, options: [
-                                        { label: "Gamma", value: 0 },
-                                        { label: "Linear", value: 1 },
-                                    ], disabled: true, value: isLinear ? 1 : 0, onChange: (val) => setIsLinear(val === 1) }), jsx(NumberDropdown, { className: classes.inputField, infoLabel: {
-                                        label: "Data Type",
-                                        info: jsx(Body1, { children: "We will introduce this functionality soon!" }),
-                                    }, options: [
-                                        { label: "Int", value: 0 },
-                                        { label: "Float", value: 1 },
-                                    ], disabled: true, value: isFloat ? 1 : 0, onChange: (val) => setFloat(val === 1) })] }), jsxs("div", { className: classes.inputRow, children: [jsx(InputRgbField, { title: "Red", value: color, rgbKey: "r", onChange: handleChange }), jsx(InputRgbField, { title: "Green", value: color, rgbKey: "g", onChange: handleChange }), jsx(InputRgbField, { title: "Blue", value: color, rgbKey: "b", onChange: handleChange }), jsx(InputAlphaField, { color: color, onChange: handleChange })] }), jsxs("div", { className: classes.inputRow, children: [jsx(InputHsvField, { title: "Hue", value: color, hsvKey: "h", max: 360, onChange: handleChange }), jsx(InputHsvField, { title: "Saturation", value: color, hsvKey: "s", max: 100, scale: 100, onChange: handleChange }), jsx(InputHsvField, { title: "Value", value: color, hsvKey: "v", max: 100, scale: 100, onChange: handleChange })] }), jsx("div", { className: classes.inputRow, children: jsx(InputHexField, { title: "Hexadecimal", linearHex: isLinear, isLinearMode: isLinear, value: color, onChange: handleChange }) })] }) })] }));
-};
-/**
- * Component which displays the passed in color's HEX value, either in linearSpace (if linearHex is true) or in gamma space
- * When the hex color is changed by user, component calculates the new Color3/4 value and calls onChange
- *
- * Component uses the isLinearMode boolean to display an informative label regarding linear / gamma space
- * @param props - The properties for the InputHexField component.
- * @returns
- */
-const InputHexField = (props) => {
-    const classes = useColorPickerStyles();
-    const { title, value, onChange, linearHex, isLinearMode } = props;
-    return (jsx(TextInput, { disabled: linearHex ? !isLinearMode : false, className: classes.inputField, value: linearHex ? value.toLinearSpace().toHexString() : value.toHexString(), validator: ValidateColorHex, onChange: (val) => (linearHex ? onChange(Color3.FromHexString(val).toGammaSpace()) : onChange(Color3.FromHexString(val))), infoLabel: title
-            ? {
-                label: title,
-                // If not representing a linearHex, no info is needed.
-                info: !props.linearHex ? undefined : !isLinearMode ? ( // If representing a linear hex but we are in gammaMode, simple message explaining why linearHex is disabled
-                jsx(Fragment, { children: " This color picker is attached to an entity whose color is stored in gamma space, so we are showing linear hex in disabled view " })) : (
-                // If representing a linear hex and we are in linearMode, give information about how to use these hex values
-                jsxs(Fragment, { children: ["This color picker is attached to an entity whose color is stored in linear space (ex: PBR Material), and Babylon converts the color to gamma space before rendering on screen because the human eye is best at processing colors in gamma space. We thus also want to display the color picker in gamma space so that the color chosen here will match the color seen in your entity.", jsx("br", {}), "If you want to copy/paste the HEX into your code, you can either use", jsx(Body1Strong, { children: "Color3.FromHexString(LINEAR_HEX)" }), jsx("br", {}), "or", jsx("br", {}), jsx(Body1Strong, { children: "Color3.FromHexString(GAMMA_HEX).toLinearSpace()" }), jsx("br", {}), jsx("br", {}), jsx(Link, { url: "https://doc.babylonjs.com/preparingArtForBabylon/controllingColorSpace/", value: "Read more in our docs!" })] })),
-            }
-            : undefined }));
-};
-const InputRgbField = (props) => {
-    const { value, onChange, title, rgbKey } = props;
-    const classes = useColorPickerStyles();
-    const handleChange = useCallback((val) => {
-        const newColor = value.clone();
-        newColor[rgbKey] = val / 255.0; // Convert to 0-1 range
-        onChange(newColor);
-    }, [value, onChange, rgbKey]);
-    return (jsx(SpinButton, { title: title, infoLabel: title ? { label: title } : undefined, className: classes.inputField, min: 0, max: 255, value: Math.round(value[rgbKey] * 255), forceInt: true, onChange: handleChange }));
-};
-function rgbaToHsv(color) {
-    const c = new Color3(color.r, color.g, color.b);
-    const hsv = c.toHSV();
-    return { h: hsv.r, s: hsv.g, v: hsv.b, a: color.a };
-}
-/**
- * In the HSV (Hue, Saturation, Value) color model, Hue (H) ranges from 0 to 360 degrees, representing the color's position on the color wheel.
- * Saturation (S) ranges from 0 to 100%, indicating the intensity or purity of the color, with 0 being shades of gray and 100 being a fully saturated color.
- * Value (V) ranges from 0 to 100%, representing the brightness of the color, with 0 being black and 100 being the brightest.
- * @param props - The properties for the InputHsvField component.
- */
-const InputHsvField = (props) => {
-    const { value, title, hsvKey, max, onChange, scale = 1 } = props;
-    const classes = useColorPickerStyles();
-    const handleChange = useCallback((val) => {
-        // Convert current color to HSV, update the new hsv value, then call onChange prop
-        const hsv = rgbaToHsv(value);
-        hsv[hsvKey] = val / scale;
-        let newColor = Color3.FromHSV(hsv.h, hsv.s, hsv.v);
-        if (value instanceof Color4) {
-            newColor = Color4.FromColor3(newColor, value.a ?? 1);
-        }
-        props.onChange(newColor);
-    }, [value, onChange, hsvKey, scale]);
-    return (jsx(SpinButton, { infoLabel: title ? { label: title } : undefined, title: title, className: classes.inputField, min: 0, max: max, value: Math.round(rgbaToHsv(value)[hsvKey] * scale), forceInt: true, onChange: handleChange }));
+});
+const MessageBar = (props) => {
+    MessageBar.displayName = "MessageBar";
+    const { message, title: header, intent, docLink } = props;
+    const classes = useClasses();
+    return (jsx("div", { className: classes.container, children: jsx(MessageBar$1, { intent: intent, layout: "multiline", children: jsxs(MessageBarBody, { children: [jsx(MessageBarTitle, { children: header }), message, docLink && (jsxs(Fragment, { children: [" - ", jsx(Link, { url: docLink, value: "Learn More" })] }))] }) }) }));
 };
-/**
- * Displays the alpha value of a color, either in the disabled state (if color is Color3) or as a spin button (if color is Color4).
- * @param props
- * @returns
- */
-const InputAlphaField = (props) => {
-    const classes = useColorPickerStyles();
-    const { color, onChange } = props;
-    const handleChange = useCallback((value) => {
-        if (Number.isNaN(value) || value < 0 || value > 1) {
-            return;
-        }
-        if (color instanceof Color4) {
-            const newColor = color.clone();
-            newColor.a = value;
-            return newColor;
-        }
-        else {
-            return Color4.FromColor3(color, value);
-        }
-    }, [onChange]);
-    return (jsx(SpinButton, { disabled: color instanceof Color3, min: 0, max: 1, className: classes.inputField, value: color instanceof Color3 ? 1 : color.a, step: 0.01, onChange: handleChange, infoLabel: {
-            label: "Alpha",
-            info: color instanceof Color3 ? (jsx(Fragment, { children: "Because this color picker is representing a Color3, we do not permit modifying alpha from the color picker. You can however modify the entity's alpha property directly, either in code via entity.alpha OR via inspector's transparency section." })) : undefined,
-        } }));
+
+const AnimationsProperties = (props) => {
+    const { scene, entity } = props;
+    const animations = entity.animations ?? [];
+    const ranges = entity.getAnimationRanges?.()?.filter((range) => !!range) ?? [];
+    const childAnimatablesAnimations = entity.getAnimatables?.().flatMap((animatable) => animatable.animations ?? []) ?? [];
+    animations.concat(childAnimatablesAnimations);
+    const lastFrom = useRef(0);
+    const lastTo = useRef(0);
+    const lastLoop = useRef(false);
+    const animatablesForTarget = scene.getAllAnimatablesByTarget(entity);
+    const isPlaying = animatablesForTarget.length > 0;
+    const mainAnimatable = isPlaying ? animatablesForTarget[0] : undefined;
+    const animationPropertiesOverride = useProperty(mainAnimatable, "animationPropertiesOverride");
+    if (mainAnimatable) {
+        lastFrom.current = mainAnimatable.fromFrame;
+        lastTo.current = mainAnimatable.toFrame;
+        lastLoop.current = mainAnimatable.loopAnimation;
+    }
+    const hasAnimations = animations.length > 0 || ranges.length > 0;
+    const currentFrame = useObservableState(useCallback(() => {
+        return mainAnimatable ? mainAnimatable.masterFrame : (scene.getAllAnimatablesByTarget(entity)[0]?.masterFrame ?? 0);
+    }, [scene, entity, mainAnimatable]), hasAnimations ? scene.onAfterAnimationsObservable : undefined);
+    return (jsx(Fragment, { children: !hasAnimations ? (jsx(MessageBar, { intent: "info", title: "No Animations", message: "To modify animations, attach an animation to this node.", docLink: "https://doc.babylonjs.com/features/featuresDeepDive/animation/" })) : (jsxs(Fragment, { children: [ranges.length > 0 && (jsx(PropertyLine, { label: "Ranges", expandedContent: jsx(Fragment, { children: ranges.map((range) => {
+                            return (jsx(ButtonLine, { label: range.name, onClick: () => {
+                                    scene.beginAnimation(entity, range.from, range.to, true);
+                                } }, range.name));
+                        }) }), children: jsx(Badge, { appearance: "filled", children: ranges.length }) })), animations.length > 0 && (jsxs(Fragment, { children: [jsx(PropertyLine, { label: "Animations", expandedContent: jsx(Fragment, { children: animations.map((animation, index) => {
+                                    return jsx(TextPropertyLine, { label: `${index}: ${animation.name}`, value: animation.targetProperty }, animation.uniqueId);
+                                }) }), children: jsx(Badge, { appearance: "filled", children: animations.length }) }), mainAnimatable && (jsx(Fragment, { children: jsx(PropertyLine, { label: "Animation Controls", expandedContent: jsxs(Fragment, { children: [jsx(NumberInputPropertyLine, { label: "From", value: mainAnimatable.fromFrame, onChange: (value) => {
+                                                scene.stopAnimation(entity);
+                                                scene.beginAnimation(entity, value, mainAnimatable.toFrame, true);
+                                            } }), jsx(NumberInputPropertyLine, { label: "To", value: mainAnimatable.toFrame, onChange: (value) => {
+                                                scene.stopAnimation(entity);
+                                                scene.beginAnimation(entity, mainAnimatable.fromFrame, value, true);
+                                            } }), jsx(SwitchPropertyLine, { label: "Loop", value: mainAnimatable.loopAnimation, onChange: (value) => {
+                                                for (const animatable of animatablesForTarget) {
+                                                    animatable.loopAnimation = value;
+                                                }
+                                            } }), jsx(SyncedSliderPropertyLine, { label: "Current Frame", value: currentFrame, min: mainAnimatable.fromFrame, max: mainAnimatable.toFrame, step: (mainAnimatable.toFrame - mainAnimatable.fromFrame) / 1000, onChange: (value) => {
+                                                mainAnimatable.goToFrame(value);
+                                            } })] }), expandByDefault: true }) })), jsx(ButtonLine, { label: isPlaying ? "Stop Animation" : "Play Animation", onClick: () => {
+                                if (isPlaying) {
+                                    scene.stopAnimation(entity);
+                                }
+                                else {
+                                    scene.beginAnimation(entity, lastFrom.current, lastTo.current, lastLoop.current);
+                                }
+                            } }), mainAnimatable && (ranges.length > 0 || animations.length > 0) ? (jsxs(Fragment, { children: [jsx(SwitchPropertyLine, { label: "Enable Override", value: animationPropertiesOverride != null, onChange: (value) => {
+                                        if (value) {
+                                            mainAnimatable.animationPropertiesOverride = new AnimationPropertiesOverride();
+                                            mainAnimatable.animationPropertiesOverride.blendingSpeed = 0.05;
+                                        }
+                                        else {
+                                            mainAnimatable.animationPropertiesOverride = undefined;
+                                        }
+                                    } }), jsx(Collapse, { visible: animationPropertiesOverride != null, children: jsxs("div", { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Enable Blending", target: animationPropertiesOverride, propertyKey: "enableBlending" }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Blending Speed", target: animationPropertiesOverride, propertyKey: "blendingSpeed", min: 0, max: 0.1, step: 0.01 })] }) })] })) : null] }))] })) }));
 };
 
-/**
- * Reusable component which renders a color property line containing a label, colorPicker popout, and expandable RGBA values
- * The expandable RGBA values are synced sliders that allow the user to modify the color's RGBA values directly
- * @param props - PropertyLine props, replacing children with a color object so that we can properly display the color
- * @returns Component wrapping a colorPicker component with a property line
- */
-const ColorPropertyLine = forwardRef((props, ref) => {
-    ColorPropertyLine.displayName = "ColorPropertyLine";
-    const [color, setColor] = useState(props.value);
-    useEffect(() => {
-        setColor(props.value);
-    }, [props.value]);
-    const onSliderChange = (value, key) => {
-        let newColor;
-        if (key === "a") {
-            newColor = Color4.FromColor3(color, value);
-        }
-        else {
-            newColor = color.clone();
-            newColor[key] = value / 255;
+function IsAnimatable(entity) {
+    return entity.animations !== undefined;
+}
+function IsAnimationRangeContainer(entity) {
+    return entity.getAnimationRanges !== undefined;
+}
+function IsAnimatableContainer(entity) {
+    return entity.getAnimatables !== undefined;
+}
+const AnimationPropertiesServiceDefinition = {
+    friendlyName: "Animation Properties",
+    consumes: [PropertiesServiceIdentity, SelectionServiceIdentity, SceneContextIdentity],
+    factory: (propertiesService, selectionService, sceneContext) => {
+        const scene = sceneContext.currentScene;
+        if (!scene) {
+            return undefined;
         }
-        setColor(newColor); // Create a new object to trigger re-render
-        props.onChange(newColor);
-    };
-    const onColorPickerChange = (newColor) => {
-        setColor(newColor);
-        props.onChange(newColor);
-    };
-    return (jsx(PropertyLine, { ref: ref, ...props, expandedContent: jsxs(Fragment, { children: [jsx(SyncedSliderPropertyLine, { label: "R", value: color.r * 255, min: 0, max: 255, onChange: (value) => onSliderChange(value, "r") }), jsx(SyncedSliderPropertyLine, { label: "G", value: color.g * 255, min: 0, max: 255, onChange: (value) => onSliderChange(value, "g") }), jsx(SyncedSliderPropertyLine, { label: "B", value: color.b * 255, min: 0, max: 255, onChange: (value) => onSliderChange(value, "b") }), color instanceof Color4 && jsx(SyncedSliderPropertyLine, { label: "A", value: color.a, min: 0, max: 1, step: 0.01, onChange: (value) => onSliderChange(value, "a") })] }), children: jsx(ColorPickerPopup, { ...props, onChange: onColorPickerChange, value: color }) }));
-});
-const Color3PropertyLine = ColorPropertyLine;
-const Color4PropertyLine = ColorPropertyLine;
+        const animationContentRegistration = propertiesService.addSectionContent({
+            key: "Animation Properties",
+            predicate: (entity) => IsAnimatable(entity) || IsAnimationRangeContainer(entity) || IsAnimatableContainer(entity),
+            content: [
+                {
+                    section: "Animation",
+                    component: ({ context }) => jsx(AnimationsProperties, { scene: scene, entity: context }),
+                },
+            ],
+        });
+        return {
+            dispose: () => {
+                animationContentRegistration.dispose();
+            },
+        };
+    },
+};
 
 const GeneralAtmosphereProperties = (props) => {
     const { entity: atmosphere } = props;
@@ -5093,30 +5206,6 @@ const ArcRotateCameraBehaviorsProperties = (props) => {
     return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Auto Rotation", target: camera, propertyKey: "useAutoRotationBehavior" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Bouncing", target: camera, propertyKey: "useBouncingBehavior" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Framing", target: camera, propertyKey: "useFramingBehavior" })] }));
 };
 
-const useStyles$5 = 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$5();
-    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;
-
 // The below conversion functions are taken from old HexLineComponent and can likely be simplified
 const ConvertToHexString = (valueString) => {
     while (valueString.length < 10) {
@@ -9154,32 +9243,19 @@ const UserFeedbackServiceDefinition = {
     },
 };
 
-let CurrentInspectorToken = null;
-function IsInspectorVisible() {
-    return CurrentInspectorToken != null;
-}
-function ShowInspector(scene, options) {
-    _ShowInspector(scene, options ?? {});
-}
-function _ShowInspector(scene, options) {
-    // TODO: Lots more work to do to respect all the Inspector v1 options.
+// TODO: The key should probably be the Canvas, because we only want to show one inspector instance per canvas.
+//       If it is called for a different scene that is rendering to the same canvas, then we should probably
+//       switch the inspector instance to that scene (once this is supported).
+const InspectorTokens = new WeakMap();
+function ShowInspector(scene, options = {}) {
     options = {
-        overlay: false,
-        showExplorer: true,
-        showInspector: true,
-        embedMode: false,
-        enableClose: true,
-        handleResize: true,
-        enablePopup: true,
+        autoResizeEngine: true,
         ...options,
     };
-    if (!scene) {
-        scene = EngineStore.LastCreatedScene;
-    }
-    if (!scene || scene.isDisposed) {
-        return;
-    }
-    let parentElement = options.globalRoot ?? null;
+    const inspectorToken = {
+        dispose: () => { },
+    };
+    let parentElement = options.containerElement ?? null;
     if (!parentElement) {
         parentElement = scene.getEngine().getRenderingCanvas()?.parentElement ?? null;
         while (parentElement) {
@@ -9192,10 +9268,12 @@ function _ShowInspector(scene, options) {
         }
     }
     if (!parentElement) {
-        return;
+        return inspectorToken;
     }
-    if (IsInspectorVisible()) {
-        HideInspector();
+    const existingToken = InspectorTokens.get(scene);
+    if (existingToken) {
+        existingToken.dispose();
+        InspectorTokens.delete(scene);
     }
     const disposeActions = [];
     const canvasContainerDisplay = parentElement.style.display;
@@ -9249,11 +9327,10 @@ function _ShowInspector(scene, options) {
             };
         },
     };
-    if (options.handleResize) {
+    if (options.autoResizeEngine) {
         const observer = scene.onBeforeRenderObservable.add(() => scene.getEngine().resize());
         disposeActions.push(() => observer.remove());
     }
-    if (options.showExplorer) ;
     const modularTool = MakeModularTool({
         containerElement: parentElement,
         serviceDefinitions: [
@@ -9318,15 +9395,147 @@ function _ShowInspector(scene, options) {
             UserFeedbackServiceDefinition,
             // Adds always present "mini stats" (like fps) to the toolbar, etc.
             MiniStatsServiceDefinition,
+            // Legacy service to support custom inspectable properties on objects.
+            LegacyInspectableObjectPropertiesServiceDefinition,
             // Additional services passed in to the Inspector.
             ...(options.serviceDefinitions ?? []),
         ],
         themeMode: options.themeMode,
         showThemeSelector: options.showThemeSelector,
         extensionFeeds: [DefaultInspectorExtensionFeed, ...(options.extensionFeeds ?? [])],
+        layoutMode: options.layoutMode,
         toolbarMode: "compact",
-        sidePaneRemapper: options.embedMode
-            ? (sidePane) => {
+        sidePaneRemapper: options.sidePaneRemapper,
+    });
+    disposeActions.push(() => modularTool.dispose());
+    let disposed = false;
+    inspectorToken.dispose = () => {
+        if (disposed) {
+            return;
+        }
+        disposeActions.reverse().forEach((dispose) => dispose());
+        if (options.autoResizeEngine) {
+            scene.getEngine().resize();
+        }
+        disposed = true;
+    };
+    const sceneDisposedObserver = scene.onDisposeObservable.addOnce(() => {
+        inspectorToken.dispose();
+    });
+    disposeActions.push(() => sceneDisposedObserver.remove());
+    disposeActions.push(() => {
+        InspectorTokens.delete(scene);
+    });
+    return inspectorToken;
+}
+
+function ConvertOptions(v1Options) {
+    // Options not currently handled:
+    // • enablePopup: Do users care about this one?
+    // • enableClose: Currently Inspector v2 does not allow panes/tabs to be closed.
+    // • gizmoCamera: Do users care about this one?
+    // • skipDefaultFontLoading: Probably doesn't make sense for Inspector v2 using Fluent.
+    // TODO:
+    // • explorerExtensibility
+    // • contextMenu
+    // • contextMenuOverride
+    v1Options = {
+        overlay: false,
+        showExplorer: true,
+        showInspector: true,
+        embedMode: false,
+        enableClose: true,
+        handleResize: true,
+        enablePopup: true,
+        ...v1Options,
+    };
+    const serviceDefinitions = [];
+    if (v1Options.initialTab) {
+        const paneKey = (() => {
+            switch (v1Options.initialTab) {
+                case 1 /* DebugLayerTab.Debug */:
+                    return "Debug";
+                case 2 /* DebugLayerTab.Statistics */:
+                    return "Statistics";
+                case 4 /* DebugLayerTab.Settings */:
+                    return "Settings";
+                case 3 /* DebugLayerTab.Tools */:
+                    return "Tools";
+            }
+        })();
+        const initialTabServiceDefinition = {
+            friendlyName: "Initial Tab Selector",
+            consumes: [ShellServiceIdentity],
+            factory: (shellService) => {
+                // Just find and select the requested initial tab.
+                shellService.sidePanes.find((pane) => pane.key === paneKey)?.select();
+            },
+        };
+        serviceDefinitions.push(initialTabServiceDefinition);
+    }
+    if (v1Options.additionalNodes && v1Options.additionalNodes.length > 0) {
+        const { additionalNodes } = v1Options;
+        const additionalNodesServiceDefinition = {
+            friendlyName: "Additional Nodes",
+            consumes: [SceneExplorerServiceIdentity],
+            factory: (sceneExplorerService) => {
+                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;
+                    },
+                    getEntityDisplayInfo: (entity) => {
+                        const onChangeObservable = new Observable();
+                        const nameHookToken = InterceptProperty(entity, "name", {
+                            afterSet: () => {
+                                onChangeObservable.notifyObservers();
+                            },
+                        });
+                        return {
+                            get name() {
+                                return entity.name;
+                            },
+                            onChange: onChangeObservable,
+                            dispose: () => {
+                                nameHookToken.dispose();
+                                onChangeObservable.clear();
+                            },
+                        };
+                    },
+                    entityIcon: () => jsx(BranchRegular, {}),
+                    getEntityAddedObservables: () => [],
+                    getEntityRemovedObservables: () => [],
+                }));
+                return {
+                    dispose: () => {
+                        sceneExplorerSectionRegistrations.forEach((registration) => registration.dispose());
+                    },
+                };
+            },
+        };
+        serviceDefinitions.push(additionalNodesServiceDefinition);
+    }
+    const v2Options = {
+        containerElement: v1Options.globalRoot,
+        layoutMode: v1Options.overlay ? "overlay" : "inline",
+        autoResizeEngine: v1Options.handleResize,
+        sidePaneRemapper: (sidePane) => {
+            if (v1Options.showExplorer === false && sidePane.key === "Scene Explorer") {
+                return null;
+            }
+            if (v1Options.showInspector === false &&
+                (sidePane.key === "Properties" || sidePane.key === "Debug" || sidePane.key === "Statistics" || sidePane.key === "Settings" || sidePane.key === "Tools")) {
+                return null;
+            }
+            if (v1Options.embedMode) {
                 if (sidePane.horizontalLocation === "right") {
                     // All right panes go to right bottom.
                     return {
@@ -9342,42 +9551,57 @@ function _ShowInspector(scene, options) {
                     };
                 }
             }
-            : undefined,
-    });
-    disposeActions.push(() => modularTool.dispose());
-    let disposed = false;
-    CurrentInspectorToken = {
-        dispose: () => {
-            if (disposed) {
-                return;
-            }
-            disposeActions.reverse().forEach((dispose) => dispose());
-            if (options.handleResize) {
-                scene.getEngine().resize();
-            }
-            disposed = true;
+            return sidePane;
         },
+        serviceDefinitions,
     };
-    const sceneDisposedObserver = scene.onDisposeObservable.addOnce(() => {
-        HideInspector();
-    });
-    disposeActions.push(() => sceneDisposedObserver.remove());
-}
-function HideInspector() {
-    CurrentInspectorToken?.dispose();
-    CurrentInspectorToken = null;
+    return v2Options;
 }
+/**
+ * @deprecated This class only exists for backward compatibility. Use the module-level ShowInspector function instead.
+ */
 class Inspector {
+    static MarkLineContainerTitleForHighlighting(title) {
+        throw new Error("Not Implemented");
+    }
+    static MarkMultipleLineContainerTitlesForHighlighting(titles) {
+        throw new Error("Not Implemented");
+    }
+    static PopupEmbed() {
+        // Show with embed mode on (stacked right panes) and undocked?
+        throw new Error("Not Implemented");
+    }
+    static PopupSceneExplorer() {
+        // Show with all right panes (not stacked), scene explorer tab selected, and undocked?
+        throw new Error("Not Implemented");
+    }
+    static PopupInspector() {
+        // Show with all right panes (not stacked), properties tab selected, and undocked?
+        throw new Error("Not Implemented");
+    }
     static get IsVisible() {
-        return IsInspectorVisible();
+        return !!this._CurrentInspectorToken;
     }
     static Show(scene, userOptions) {
-        _ShowInspector(scene, userOptions);
+        this._Show(scene, userOptions);
+    }
+    static _Show(scene, userOptions) {
+        if (!scene) {
+            scene = EngineStore.LastCreatedScene;
+        }
+        if (!scene || scene.isDisposed) {
+            return;
+        }
+        this._CurrentInspectorToken = ShowInspector(scene, ConvertOptions(userOptions));
     }
     static Hide() {
-        HideInspector();
+        this._CurrentInspectorToken?.dispose();
+        this._CurrentInspectorToken = null;
     }
 }
+Inspector._CurrentInspectorToken = null;
+Inspector.OnSelectionChangeObservable = new Observable();
+Inspector.OnPropertyChangedObservable = new Observable();
 
 const useStyles$2 = makeStyles({
     root: {
@@ -9634,5 +9858,5 @@ const TextAreaPropertyLine = (props) => {
     return (jsx(PropertyLine, { ...props, children: jsx(Textarea, { ...props }) }));
 };
 
-export { ShowInspector as $, useCompactMode as A, ButtonLine as B, Collapse as C, DebugServiceIdentity as D, ExtensibleAccordion as E, FileUploadLine as F, useSidePaneDockOverrides as G, useAngleConverters as H, MakeTeachingMoment as I, MakeDialogTeachingMoment as J, InterceptFunction as K, Link as L, MakeLazyComponent as M, NumberDropdownPropertyLine as N, GetPropertyDescriptor as O, PropertiesServiceIdentity as P, IsPropertyReadonly as Q, InterceptProperty as R, SwitchPropertyLine as S, ToolsServiceIdentity as T, ObservableCollection as U, ConstructorFactory as V, SceneContextIdentity as W, SelectionServiceIdentity as X, SelectionServiceDefinition as Y, SettingsContextIdentity as Z, IsInspectorVisible as _, SyncedSliderPropertyLine as a, HideInspector as a0, Inspector as a1, AccordionSection as a2, Accordion as a3, Button as a4, Checkbox as a5, ColorPickerPopup as a6, InputHexField as a7, InputHsvField as a8, ComboBox as a9, Color3PropertyLine as aA, Color4PropertyLine as aB, StringDropdownPropertyLine as aC, HexPropertyLine as aD, TextInputPropertyLine as aE, NumberInputPropertyLine as aF, LinkPropertyLine as aG, PropertyLine as aH, LineContainer as aI, PlaceholderPropertyLine as aJ, SpinButtonPropertyLine as aK, StringifiedPropertyLine as aL, TextAreaPropertyLine as aM, TextPropertyLine as aN, RotationVectorPropertyLine as aO, QuaternionPropertyLine as aP, Vector2PropertyLine as aQ, Vector3PropertyLine as aR, Vector4PropertyLine as aS, DraggableLine as aa, Dropdown as ab, NumberDropdown as ac, StringDropdown as ad, FactorGradientComponent as ae, Color3GradientComponent as af, Color4GradientComponent as ag, ColorStepGradientComponent as ah, InfoLabel as ai, List as aj, MessageBar as ak, PositionedPopover as al, SearchBar as am, SearchBox as an, SpinButton as ao, Switch as ap, SyncedSliderInput as aq, Textarea as ar, TextInput as as, ToggleButton as at, FactorGradientList as au, Color3GradientList as av, Color4GradientList as aw, Pane as ax, BooleanBadgePropertyLine as ay, CheckboxPropertyLine as az, ShellServiceIdentity as b, MakePopoverTeachingMoment as c, TeachingMoment as d, SidePaneContainer as e, SceneExplorerServiceIdentity as f, SettingsServiceIdentity as g, StatsServiceIdentity as h, BoundProperty as i, LinkToEntityPropertyLine as j, BuiltInsExtensionFeed as k, useProperty as l, useVector3Property as m, useColor3Property as n, useColor4Property as o, useQuaternionProperty as p, MakePropertyHook as q, useInterceptObservable as r, useEventfulState as s, useObservableState as t, useExtensionManager as u, useObservableCollection as v, useOrderedObservableCollection as w, usePollingObservable as x, useResource as y, useAsyncResource as z };
-//# sourceMappingURL=index-CmULGJMc.js.map
+export { SettingsContextIdentity as $, useAsyncResource as A, ButtonLine as B, Collapse as C, DebugServiceIdentity as D, ExtensibleAccordion as E, FileUploadLine as F, useCompactMode as G, useSidePaneDockOverrides as H, Inspector as I, useAngleConverters as J, MakeTeachingMoment as K, Link as L, MakeLazyComponent as M, NumberDropdownPropertyLine as N, MakeDialogTeachingMoment as O, PropertiesServiceIdentity as P, InterceptFunction as Q, GetPropertyDescriptor as R, SwitchPropertyLine as S, ToolsServiceIdentity as T, IsPropertyReadonly as U, InterceptProperty as V, ObservableCollection as W, ConstructorFactory as X, SceneContextIdentity as Y, SelectionServiceIdentity as Z, SelectionServiceDefinition as _, SyncedSliderPropertyLine as a, ShowInspector as a0, AccordionSection as a1, Accordion as a2, Button as a3, Checkbox as a4, ColorPickerPopup as a5, InputHexField as a6, InputHsvField as a7, ComboBox as a8, DraggableLine as a9, Color4PropertyLine as aA, HexPropertyLine as aB, TextInputPropertyLine as aC, NumberInputPropertyLine as aD, LinkPropertyLine as aE, PropertyLine as aF, LineContainer as aG, PlaceholderPropertyLine as aH, SpinButtonPropertyLine as aI, StringifiedPropertyLine as aJ, TextAreaPropertyLine as aK, TextPropertyLine as aL, RotationVectorPropertyLine as aM, QuaternionPropertyLine as aN, Vector2PropertyLine as aO, Vector3PropertyLine as aP, Vector4PropertyLine as aQ, Dropdown as aa, NumberDropdown as ab, StringDropdown as ac, FactorGradientComponent as ad, Color3GradientComponent as ae, Color4GradientComponent as af, ColorStepGradientComponent as ag, InfoLabel as ah, List as ai, MessageBar as aj, PositionedPopover as ak, SearchBar as al, SearchBox as am, SpinButton as an, Switch as ao, SyncedSliderInput as ap, Textarea as aq, TextInput as ar, ToggleButton as as, FactorGradientList as at, Color3GradientList as au, Color4GradientList as av, Pane as aw, BooleanBadgePropertyLine as ax, CheckboxPropertyLine as ay, Color3PropertyLine as az, ShellServiceIdentity as b, MakePopoverTeachingMoment as c, TeachingMoment as d, SidePaneContainer as e, SceneExplorerServiceIdentity as f, SettingsServiceIdentity as g, StatsServiceIdentity as h, StringDropdownPropertyLine as i, BoundProperty as j, LinkToEntityPropertyLine as k, BuiltInsExtensionFeed as l, useProperty as m, useVector3Property as n, useColor3Property as o, useColor4Property as p, useQuaternionProperty as q, MakePropertyHook as r, useInterceptObservable as s, useEventfulState as t, useExtensionManager as u, useObservableState as v, useObservableCollection as w, useOrderedObservableCollection as x, usePollingObservable as y, useResource as z };
+//# sourceMappingURL=index-B-XOu4uI.js.map