@babylonjs/inspector 8.30.5-preview → 8.31.0-preview

package/lib/index.js

@@ -3,9 +3,9 @@ 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, ToggleButton as ToggleButton$1, Button as Button$1, tokens, Link, InfoLabel as InfoLabel$1, Body1Stronger, Checkbox as Checkbox$1, Body1, Accordion as Accordion$1, AccordionItem, AccordionHeader, Subtitle2Stronger, AccordionPanel, Divider, mergeClasses, TeachingPopover, TeachingPopoverSurface, TeachingPopoverHeader, TeachingPopoverBody, Body1Strong, TabList, Tooltip, Title3, Tab, SearchBox as SearchBox$1, FlatTree, FlatTreeItem, TreeItemLayout, Menu, MenuTrigger, MenuPopover, MenuList, MenuItem, Switch as Switch$1, PresenceBadge, Spinner, Dialog, DialogTrigger, DialogSurface, DialogBody, DialogTitle, DialogContent, SplitButton, MenuItemRadio, createLightTheme, createDarkTheme, FluentProvider, DialogActions, List as List$1, ListItem, useId, Input, SpinButton as SpinButton$1, Slider, MessageBar as MessageBar$1, MessageBarBody, MessageBarTitle, Badge, Dropdown as Dropdown$1, Option, Popover, PopoverTrigger, ColorSwatch, PopoverSurface, ColorPicker, ColorArea, ColorSlider, AlphaSlider, Textarea as Textarea$1, Toolbar as Toolbar$1, ToolbarButton, useComboboxFilter, Combobox, Field } from '@fluentui/react-components';
+import { makeStyles, ToggleButton as ToggleButton$1, Button as Button$1, tokens, Link, InfoLabel as InfoLabel$1, Body1Strong, Checkbox as Checkbox$1, Body1, Accordion as Accordion$1, AccordionItem, AccordionHeader, Subtitle2Stronger, AccordionPanel, Divider, mergeClasses, TeachingPopover, TeachingPopoverSurface, TeachingPopoverHeader, TeachingPopoverBody, createLightTheme, createDarkTheme, FluentProvider, Toolbar as Toolbar$1, Tooltip, ToolbarRadioButton, SearchBox as SearchBox$1, FlatTree, FlatTreeItem, TreeItemLayout, Menu, MenuTrigger, MenuPopover, MenuList, MenuItem, Switch as Switch$1, PresenceBadge, Spinner, Dialog, DialogTrigger, DialogSurface, DialogBody, DialogTitle, TabList, Tab, DialogContent, SplitButton, MenuItemRadio, DialogActions, List as List$1, ListItem, useId, Input, SpinButton as SpinButton$1, Slider, MessageBar as MessageBar$1, MessageBarBody, MessageBarTitle, Badge, 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';
 export { Link } from '@fluentui/react-components';
-import { ChevronCircleRight20Regular, ChevronCircleDown20Regular, CopyRegular, PanelLeftExpandRegular, PanelLeftContractRegular, PanelRightExpandRegular, PanelRightContractRegular, DocumentTextRegular, FilterRegular, MoviesAndTvRegular, CubeTreeRegular, BugRegular, SettingsRegular, ArrowUploadRegular, DataBarHorizontalRegular, WrenchRegular, AppsAddInRegular, DismissRegular, WeatherSunnyRegular, WeatherMoonRegular, ErrorCircleRegular, ArrowMoveRegular, ArrowRotateClockwiseRegular, ArrowExpandRegular, SelectObjectRegular, CubeRegular, GlobeRegular, SaveRegular, ArrowUndoRegular, ClearFormattingRegular, DeleteRegular, EyeOffFilled, EyeFilled, ArrowMoveFilled, StopFilled, PlayFilled, StackRegular, FilmstripRegular, PauseFilled, WeatherSunnyLowFilled, LayerRegular, FrameRegular, PlayRegular, AppGenericRegular, PaintBrushRegular, BoxRegular, BranchRegular, CameraRegular, LightbulbRegular, EyeRegular, EyeOffRegular, VideoFilled, VideoRegular, FlashlightRegular, FlashlightOffRegular, Cone16Filled, Cone16Regular, DropRegular, BlurRegular, PipelineRegular, PersonWalkingRegular, DataLineRegular, PersonSquareRegular, LayerDiagonalPersonRegular, ImageEditRegular, ImageRegular, TargetRegular, DeleteFilled } from '@fluentui/react-icons';
+import { ChevronCircleRight20Regular, ChevronCircleDown20Regular, CopyRegular, PanelLeftExpandRegular, PanelLeftContractRegular, PanelRightExpandRegular, PanelRightContractRegular, DocumentTextRegular, createFluentIcon, FilterRegular, GlobeRegular, ArrowExpandAllRegular, CubeTreeRegular, BugRegular, SettingsRegular, ArrowUploadRegular, DataBarHorizontalRegular, WrenchRegular, AppsAddInRegular, DismissRegular, WeatherSunnyRegular, WeatherMoonRegular, ErrorCircleRegular, ArrowRotateClockwiseRegular, ArrowExpandRegular, SelectObjectRegular, CubeRegular, SaveRegular, ArrowUndoRegular, BracesRegular, BracesDismiss16Regular, 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, DeleteFilled } from '@fluentui/react-icons';
 import { Collapse as Collapse$1 } from '@fluentui/react-motion-components-preview';
 import '@babylonjs/core/Misc/typeStore.js';
 import { useLocalStorage, useTernaryDarkMode } from 'usehooks-ts';
@@ -99,6 +99,7 @@ import { MultiRenderTarget } from '@babylonjs/core/Materials/Textures/multiRende
 import { RenderTargetTexture } from '@babylonjs/core/Materials/Textures/renderTargetTexture.js';
 import { ThinTexture } from '@babylonjs/core/Materials/Textures/thinTexture.js';
 import { WhenTextureReadyAsync, GetTextureDataAsync } from '@babylonjs/core/Misc/textureTools.js';
+import '@babylonjs/core/Rendering/boundingBoxRenderer.js';
 import '@babylonjs/core/PostProcesses/RenderPipeline/postProcessRenderPipelineManagerSceneComponent.js';
 import '@babylonjs/core/Sprites/spriteSceneComponent.js';
 import { DynamicTexture } from '@babylonjs/core/Materials/Textures/dynamicTexture.js';
@@ -674,9 +675,10 @@ const CustomTokens = {
     sliderMaxWidth: "80px",
     rightAlignOffset: "-8px",
 };
-const UniformWidthStyling = { width: CustomTokens.inputWidth, textAlign: "right", boxSizing: "border-box" };
+const UniformWidthStyling = { width: CustomTokens.inputWidth, boxSizing: "border-box" };
 const useInputStyles$1 = makeStyles({
     input: UniformWidthStyling,
+    inputSlot: { textAlign: "right" },
     invalid: { backgroundColor: tokens.colorPaletteRedBackground2 },
     container: {
         flex: 1,
@@ -711,22 +713,26 @@ const usePropertyLineStyles = makeStyles({
         justifyContent: "flex-start",
         width: "100%",
     },
-    label: {
+    infoLabel: {
+        display: "flex",
         flex: "1 1 0", // grow=1, shrink =1, basis = 0 initial size before
         minWidth: CustomTokens.labelMinWidth,
         textAlign: "left",
-        overflow: "hidden",
-        textOverflow: "ellipsis",
+    },
+    labelSlot: {
+        display: "flex",
+        minWidth: 0,
     },
     labelText: {
         whiteSpace: "nowrap",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
     },
     rightContent: {
         flex: "0 1 auto",
         display: "flex",
         alignItems: "center",
         justifyContent: "flex-end",
-        minWidth: "50%",
     },
     infoPopup: {
         whiteSpace: "normal",
@@ -760,7 +766,7 @@ const PropertyLine = forwardRef((props, ref) => {
             defaultValue: undefined, // Don't pass defaultValue to children as there is no guarantee how this will be used and we can't mix controlled + uncontrolled state
         })
         : children;
-    return (jsxs(LineContainer, { ref: ref, children: [jsxs("div", { className: classes.baseLine, children: [jsx(InfoLabel$1, { className: classes.label, info: description ? jsx("div", { className: classes.infoPopup, children: description }) : undefined, title: label, children: jsx(Body1Stronger, { className: classes.labelText, children: label }) }), jsxs("div", { className: classes.rightContent, children: [expandedContent && (jsx(ToggleButton, { title: "Expand/Collapse property", appearance: "transparent", checkedIcon: ChevronCircleDown20Regular, uncheckedIcon: ChevronCircleRight20Regular, value: expanded === true, onChange: setExpanded })), nullable && !ignoreNullable && (
+    return (jsxs(LineContainer, { ref: ref, children: [jsxs("div", { className: classes.baseLine, children: [jsx(InfoLabel$1, { className: classes.infoLabel, label: { className: classes.labelSlot }, info: description ? jsx("div", { className: classes.infoPopup, children: description }) : undefined, title: label, children: jsx(Body1Strong, { className: classes.labelText, children: label }) }), jsxs("div", { className: classes.rightContent, children: [expandedContent && (jsx(ToggleButton, { title: "Expand/Collapse property", appearance: "transparent", checkedIcon: ChevronCircleDown20Regular, uncheckedIcon: ChevronCircleRight20Regular, value: expanded === true, onChange: setExpanded })), nullable && !ignoreNullable && (
                             // If this is a nullableProperty and ignoreNullable was not sent, display a checkbox used to toggle null ('checked' means 'non null')
                             jsx(Checkbox$1, { checked: !(props.value == null), onChange: (_, data) => {
                                     if (data.checked) {
@@ -1342,6 +1348,64 @@ const SelectionServiceDefinition = {
     },
 };
 
+const ThemeModeStorageKey = `Babylon/Settings/ThemeMode`;
+/**
+ * Custom hook to manage the theme mode (system/dark/light).
+ * @returns An object containing the theme mode state and helper functions.
+ */
+function useThemeMode() {
+    const { isDarkMode, ternaryDarkMode, setTernaryDarkMode } = useTernaryDarkMode({
+        localStorageKey: ThemeModeStorageKey,
+    });
+    // Make sure there is a stored value initially, even before changing the theme.
+    // This way, other usages of this hook will get the correct initial value.
+    if (!localStorage.getItem(ThemeModeStorageKey)) {
+        SetThemeMode(ternaryDarkMode);
+    }
+    return { isDarkMode, themeMode: ternaryDarkMode, setThemeMode: setTernaryDarkMode };
+}
+/**
+ * Sets the theme mode.
+ * @param mode The desired theme mode (system/dark/light).
+ */
+function SetThemeMode(mode) {
+    localStorage.setItem(ThemeModeStorageKey, JSON.stringify(mode));
+}
+
+/* eslint-disable @typescript-eslint/naming-convention */
+// Generated from https://react.fluentui.dev/?path=/docs/theme-theme-designer--docs
+// Key color: #3A94FC
+const babylonRamp = {
+    10: "#020305",
+    20: "#121721",
+    30: "#1A263A",
+    40: "#1F314F",
+    50: "#243E64",
+    60: "#294B7B",
+    70: "#2D5892",
+    80: "#3166AA",
+    90: "#3473C3",
+    100: "#3782DC",
+    110: "#3990F6",
+    120: "#5A9EFD",
+    130: "#7BACFE",
+    140: "#96BAFF",
+    150: "#AFC9FF",
+    160: "#C6D8FF",
+};
+const LightTheme = {
+    ...createLightTheme(babylonRamp),
+};
+const DarkTheme = {
+    ...createDarkTheme(babylonRamp),
+};
+
+const Theme = (props) => {
+    const { invert = false, ...rest } = props;
+    const { isDarkMode } = useThemeMode();
+    return (jsx(FluentProvider, { theme: isDarkMode !== invert ? DarkTheme : LightTheme, ...rest, children: props.children }));
+};
+
 const RootComponentServiceIdentity = Symbol("RootComponent");
 const ShellServiceIdentity = Symbol("ShellService");
 // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -1361,6 +1425,7 @@ const useStyles$b = makeStyles({
         display: "flex",
         flexDirection: "row",
         flex: "0 0 auto",
+        height: "36px",
         backgroundColor: tokens.colorNeutralBackground2,
     },
     bar: {
@@ -1368,16 +1433,14 @@ const useStyles$b = makeStyles({
         flex: "1",
         height: "32px",
         overflow: "hidden",
-        padding: `${tokens.spacingVerticalSNudge} ${tokens.spacingHorizontalSNudge}`,
+        padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalXXS}`,
         border: `1px solid ${tokens.colorNeutralStroke2}`,
+        borderBottomWidth: 0,
         backgroundColor: tokens.colorNeutralBackground1,
     },
     barTop: {
         borderTopWidth: 0,
     },
-    barBottom: {
-        borderBottomWidth: 0,
-    },
     barLeft: {
         marginRight: "auto",
         display: "flex",
@@ -1429,22 +1492,46 @@ const useStyles$b = makeStyles({
         display: "flex",
         flexGrow: 1,
         flexDirection: "column",
-        paddingTop: tokens.spacingVerticalS,
         overflow: "hidden",
     },
-    paneHeader: {
+    paneHeaderDiv: {
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        backgroundColor: tokens.colorNeutralBackgroundInverted,
+        height: "36px",
+    },
+    paneHeaderText: {
         marginLeft: tokens.spacingHorizontalM,
+        color: tokens.colorNeutralForegroundInverted,
     },
-    headerDivider: {
+    paneDivider: {
         flex: "0 0 auto",
         marginTop: tokens.spacingVerticalM,
+        margin: "0",
+        minHeight: tokens.spacingVerticalM,
+        cursor: "ns-resize",
+        alignItems: "end",
+    },
+    tabToolbar: {
+        padding: 0,
     },
     tab: {
-        paddingTop: tokens.spacingVerticalXS,
-        paddingBottom: tokens.spacingVerticalXS,
-        paddingLeft: tokens.spacingHorizontalS,
-        paddingRight: tokens.spacingHorizontalS,
-        alignSelf: "center",
+        display: "flex",
+        height: "100%",
+        width: "36px",
+        justifyContent: "center",
+        borderTopLeftRadius: tokens.borderRadiusMedium,
+        borderTopRightRadius: tokens.borderRadiusMedium,
+    },
+    unselectedTab: {
+        backgroundColor: "transparent",
+    },
+    tabRadioButton: {
+        backgroundColor: "transparent",
+    },
+    selectedTabIcon: {
+        color: tokens.colorNeutralForeground1,
     },
     resizer: {
         width: "8px",
@@ -1466,6 +1553,13 @@ const useStyles$b = makeStyles({
         overflow: "hidden",
     },
 });
+const PaneHeader = ({ title }) => {
+    const classes = useStyles$b();
+    if (!title) {
+        return null;
+    }
+    return (jsx("div", { className: classes.paneHeaderDiv, children: jsx(Subtitle2Stronger, { className: classes.paneHeaderText, children: title }) }));
+};
 // This is a wrapper for an item in a toolbar that simply adds a teaching moment, which is useful for dynamically added items, possibly from extensions.
 const ToolbarItem = ({ location, alignment, id, component: Component, displayName: displayName, suppressTeachingMoment }) => {
     const classes = useStyles$b();
@@ -1479,16 +1573,21 @@ const Toolbar = ({ location, components }) => {
     const classes = useStyles$b();
     const leftComponents = useMemo(() => components.filter((entry) => entry.horizontalLocation === "left"), [components]);
     const rightComponents = useMemo(() => components.filter((entry) => entry.horizontalLocation === "right"), [components]);
-    return (jsx(Fragment, { children: components.length > 0 && (jsxs("div", { className: `${classes.bar} ${location === "top" ? classes.barTop : classes.barBottom}`, children: [jsx("div", { className: classes.barLeft, children: leftComponents.map((entry) => (jsx(ToolbarItem, { location: location, alignment: entry.horizontalLocation, id: entry.key, component: entry.component, displayName: entry.displayName, suppressTeachingMoment: entry.suppressTeachingMoment }, entry.key))) }), jsx("div", { className: classes.barRight, children: rightComponents.map((entry) => (jsx(ToolbarItem, { location: location, alignment: entry.horizontalLocation, id: entry.key, component: entry.component, displayName: entry.displayName, suppressTeachingMoment: entry.suppressTeachingMoment }, entry.key))) })] })) }));
+    return (jsx(Fragment, { children: components.length > 0 && (jsxs("div", { className: `${classes.bar} ${location === "top" ? classes.barTop : null}`, children: [jsx("div", { className: classes.barLeft, children: leftComponents.map((entry) => (jsx(ToolbarItem, { location: location, alignment: entry.horizontalLocation, id: entry.key, component: entry.component, displayName: entry.displayName, suppressTeachingMoment: entry.suppressTeachingMoment }, entry.key))) }), jsx("div", { className: classes.barRight, children: rightComponents.map((entry) => (jsx(ToolbarItem, { location: location, alignment: entry.horizontalLocation, id: entry.key, component: entry.component, displayName: entry.displayName, suppressTeachingMoment: entry.suppressTeachingMoment }, entry.key))) })] })) }));
 };
 // This is a wrapper for a tab in a side pane that simply adds a teaching moment, which is useful for dynamically added items, possibly from extensions.
-const SidePaneTab = ({ alignment, id, 
-// eslint-disable-next-line @typescript-eslint/naming-convention
-icon: Icon, title, suppressTeachingMoment, }) => {
+const SidePaneTab = (props) => {
+    const { alignment, id, isSelected, 
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    icon: Icon, title, suppressTeachingMoment, } = props;
     const classes = useStyles$b();
     const useTeachingMoment = useMemo(() => MakePopoverTeachingMoment(`Pane/${alignment}/${title ?? id}`), [title, id]);
     const teachingMoment = useTeachingMoment(suppressTeachingMoment);
-    return (jsxs(Fragment, { children: [jsx(TeachingMoment, { ...teachingMoment, shouldDisplay: teachingMoment.shouldDisplay && !suppressTeachingMoment, title: title ?? "Extension", description: `The "${title ?? id}" extension can be accessed here.` }), jsx(Tab, { ref: teachingMoment.targetRef, className: classes.tab, value: id, icon: jsx(Tooltip, { content: title ?? id, relationship: "description", children: jsx(Icon, {}) }) }, id)] }));
+    const tabClass = mergeClasses(classes.tab, isSelected ? undefined : classes.unselectedTab);
+    return (jsxs(Fragment, { children: [jsx(TeachingMoment, { ...teachingMoment, shouldDisplay: teachingMoment.shouldDisplay && !suppressTeachingMoment, title: title ?? "Extension", description: `The "${title ?? id}" extension can be accessed here.` }), jsx(Theme, { className: tabClass, invert: isSelected, children: jsx(ToolbarRadioButton, { ref: teachingMoment.targetRef, title: title ?? id, appearance: "transparent", className: classes.tabRadioButton, name: "selectedTab", value: id, icon: {
+                        className: isSelected ? classes.selectedTabIcon : undefined,
+                        children: jsx(Icon, {}),
+                    } }) })] }));
 };
 // This hook provides a side pane container and the tab list.
 // In "compact" mode, the tab list is integrated into the pane itself.
@@ -1559,15 +1658,18 @@ function usePane(alignment, defaultWidth, minWidth, topPanes, bottomPanes, toolb
         }, { once: true });
     }, [resizing]);
     const createPaneTabList = useCallback((paneComponents, toolbarMode, selectedTab, setSelectedTab) => {
-        return (jsx(Fragment, { children: paneComponents.length > 0 && (jsxs("div", { className: `${classes.paneTabListDiv} ${alignment === "left" || toolbarMode === "compact" ? classes.paneTabListDivLeft : classes.paneTabListDivRight}`, children: [paneComponents.length > 1 && (jsx(Fragment, { children: jsx(TabList, { selectedValue: selectedTab?.key ?? "", onTabSelect: (event, data) => {
-                                const tab = paneComponents.find((entry) => entry.key === data.value);
+        return (jsx(Fragment, { children: paneComponents.length > 0 && (jsxs("div", { className: `${classes.paneTabListDiv} ${alignment === "left" || toolbarMode === "compact" ? classes.paneTabListDivLeft : classes.paneTabListDivRight}`, children: [paneComponents.length > 1 && (jsx(Fragment, { children: jsx(Toolbar$1, { className: classes.tabToolbar, checkedValues: { selectedTab: [selectedTab?.key ?? ""] }, onCheckedValueChange: (event, data) => {
+                                const tab = paneComponents.find((entry) => entry.key === data.checkedItems[0]);
                                 setSelectedTab(tab);
                                 setCollapsed(false);
-                            }, children: paneComponents.map((entry) => (jsx(SidePaneTab, { alignment: alignment, id: entry.key, title: entry.title, icon: entry.icon, suppressTeachingMoment: entry.suppressTeachingMoment }, entry.key))) }) })), toolbarMode === "full" && (jsxs(Fragment, { children: [jsx(Divider, { vertical: true, inset: true }), jsx(Tooltip, { content: collapsed ? "Show Side Pane" : "Hide Side Pane", relationship: "label", children: jsx(Button$1, { className: classes.paneCollapseButton, appearance: "subtle", icon: expandCollapseIcon, onClick: onExpandCollapseClick }) })] }))] })) }));
+                            }, children: paneComponents.map((entry) => {
+                                const isSelected = selectedTab?.key === entry.key;
+                                return (jsx(SidePaneTab, { alignment: alignment, id: entry.key, title: entry.title, icon: entry.icon, suppressTeachingMoment: entry.suppressTeachingMoment, isSelected: isSelected && !collapsed }, entry.key));
+                            }) }) })), toolbarMode === "full" && (jsxs(Fragment, { children: [paneComponents.length > 1 && (jsxs(Fragment, { children: [jsx(Divider, { vertical: true, inset: true, style: { minHeight: 0 } }), " "] })), jsx(Tooltip, { content: collapsed ? "Show Side Pane" : "Hide Side Pane", relationship: "label", children: jsx(Button$1, { className: classes.paneCollapseButton, appearance: "subtle", icon: expandCollapseIcon, onClick: onExpandCollapseClick }) })] }))] })) }));
     }, [alignment, collapsed]);
     // This memos the TabList to make it easy for the JSX to be inserted at the top of the pane (in "compact" mode) or returned to the caller to be used in the toolbar (in "full" mode).
-    const topPaneTabList = useMemo(() => createPaneTabList(topPanes, toolbarMode, topSelectedTab, setTopSelectedTab), [topPanes, toolbarMode, topSelectedTab]);
-    const bottomPaneTabList = useMemo(() => createPaneTabList(bottomPanes, "compact", bottomSelectedTab, setBottomSelectedTab), [bottomPanes, bottomSelectedTab]);
+    const topPaneTabList = useMemo(() => createPaneTabList(topPanes, toolbarMode, topSelectedTab, setTopSelectedTab), [createPaneTabList, topPanes, toolbarMode, topSelectedTab]);
+    const bottomPaneTabList = useMemo(() => createPaneTabList(bottomPanes, "compact", bottomSelectedTab, setBottomSelectedTab), [createPaneTabList, bottomPanes, bottomSelectedTab]);
     // This manages the CSS variable that controls the height of the bottom pane.
     const paneHeightAdjustCSSVar = "--pane-height-adjust";
     const { elementRef: paneVerticalResizeElementRef, handleRef: paneVerticalResizeHandleRef, setValue: setPaneHeightAdjust, } = useResizeHandle({
@@ -1589,8 +1691,8 @@ function usePane(alignment, defaultWidth, minWidth, topPanes, bottomPanes, toolb
     });
     // This memoizes the pane itself, which may or may not include the tab list, depending on the toolbar mode.
     const pane = useMemo(() => {
-        return (jsx(Fragment, { children: (topPanes.length > 0 || bottomPanes.length > 0) && (jsxs("div", { className: `${classes.pane} ${alignment === "left" ? classes.paneLeft : classes.paneRight}`, children: [jsx(Collapse, { orientation: "horizontal", visible: !collapsed, children: jsxs("div", { className: classes.paneContainer, style: { width: `${width}px` }, children: [toolbarMode === "compact" && (topPanes.length > 1 || topBarItems.length > 0) && (jsx(Fragment, { children: jsxs("div", { className: classes.barDiv, children: [topPaneTabList, jsx(Toolbar, { location: "top", components: topBarItems })] }) })), jsxs("div", { className: classes.paneContent, children: [topSelectedTab?.title ? (jsxs(Fragment, { children: [jsx(Title3, { className: classes.paneHeader, children: topSelectedTab.title }), jsx(Divider, { inset: true, className: classes.headerDivider, appearance: "brand" })] })) : null, topSelectedTab?.content && jsx(topSelectedTab.content, {})] }), topPanes.length > 0 && bottomPanes.length > 0 && (jsx(Divider, { ref: paneVerticalResizeHandleRef, className: classes.headerDivider, style: { margin: "0", minHeight: tokens.spacingVerticalM, cursor: "ns-resize" } })), bottomPanes.length > 1 && (jsx(Fragment, { children: jsx("div", { className: classes.barDiv, children: bottomPaneTabList }) })), bottomPanes.length > 0 && (jsxs("div", { ref: paneVerticalResizeElementRef, className: classes.paneContent, style: { height: `clamp(200px,calc(45% + var(${paneHeightAdjustCSSVar}, 0px)), 100% - 300px)`, flex: "0 0 auto" }, children: [bottomSelectedTab?.title ? (jsxs(Fragment, { children: [jsx(Title3, { className: classes.paneHeader, children: bottomSelectedTab.title }), jsx(Divider, { inset: true, className: classes.headerDivider, appearance: "brand" })] })) : null, bottomSelectedTab?.content && jsx(bottomSelectedTab.content, {})] })), toolbarMode === "compact" && bottomBarItems.length > 0 && (jsx(Fragment, { children: jsx("div", { className: classes.barDiv, children: jsx(Toolbar, { location: "bottom", components: bottomBarItems }) }) }))] }) }), jsx("div", { className: `${classes.resizer} ${alignment === "left" ? classes.resizerLeft : classes.resizerRight}`, style: { pointerEvents: `${collapsed ? "none" : "auto"}` }, onPointerDown: onResizerPointerDown })] })) }));
-    }, [topPanes, topSelectedTab, bottomPanes, bottomSelectedTab, topBarItems, bottomBarItems, collapsed, width, resizing]);
+        return (jsx(Fragment, { children: (topPanes.length > 0 || bottomPanes.length > 0) && (jsxs("div", { className: `${classes.pane} ${alignment === "left" ? classes.paneLeft : classes.paneRight}`, children: [jsx(Collapse, { orientation: "horizontal", visible: !collapsed, children: jsxs("div", { className: classes.paneContainer, style: { width: `${width}px` }, children: [toolbarMode === "compact" && (topPanes.length > 1 || topBarItems.length > 0) && (jsx(Fragment, { children: jsxs("div", { className: classes.barDiv, children: [topPaneTabList, jsx(Toolbar, { location: "top", components: topBarItems })] }) })), jsxs("div", { className: classes.paneContent, children: [jsx(PaneHeader, { title: topSelectedTab?.title }), topSelectedTab?.content && jsx(topSelectedTab.content, {})] }), topPanes.length > 0 && bottomPanes.length > 0 && jsx(Divider, { ref: paneVerticalResizeHandleRef, className: classes.paneDivider }), bottomPanes.length > 1 && (jsx(Fragment, { children: jsx("div", { className: classes.barDiv, children: bottomPaneTabList }) })), bottomPanes.length > 0 && (jsxs("div", { ref: paneVerticalResizeElementRef, className: classes.paneContent, style: { height: `clamp(200px,calc(45% + var(${paneHeightAdjustCSSVar}, 0px)), 100% - 300px)`, flex: "0 0 auto" }, children: [jsx(PaneHeader, { title: bottomSelectedTab?.title }), bottomSelectedTab?.content && jsx(bottomSelectedTab.content, {})] })), toolbarMode === "compact" && bottomBarItems.length > 0 && (jsx(Fragment, { children: jsx("div", { className: classes.barDiv, children: jsx(Toolbar, { location: "bottom", components: bottomBarItems }) }) }))] }) }), jsx("div", { className: `${classes.resizer} ${alignment === "left" ? classes.resizerLeft : classes.resizerRight}`, style: { pointerEvents: `${collapsed ? "none" : "auto"}` }, onPointerDown: onResizerPointerDown })] })) }));
+    }, [topPanes, topSelectedTab, bottomPanes, bottomSelectedTab, topBarItems, bottomBarItems, topPaneTabList, bottomPaneTabList, collapsed, width, resizing]);
     return [topPaneTabList, pane];
 }
 function MakeShellServiceDefinition({ leftPaneDefaultWidth = 350, leftPaneMinWidth = 350, rightPaneDefaultWidth = 350, rightPaneMinWidth = 350, toolbarMode = "full", sidePaneMode = "both", } = {}) {
@@ -1873,10 +1975,29 @@ const ToggleCommand = (props) => {
     // TODO-iv2: Consolidate icon prop passing approach for inspector and shared components
     return jsx(ToggleButton, { appearance: "transparent", title: displayName, checkedIcon: Icon, value: isEnabled, onChange: (val) => (command.isEnabled = val) });
 };
+// This "placeholder" command has a blank icon and is a no-op. It is used for aside
+// alignment when some toggle commands are enabled. See more details on the commands
+// for setting the aside state.
+const PlaceHolderCommand = {
+    type: "action",
+    displayName: "",
+    icon: createFluentIcon("Placeholder", "1em", ""),
+    execute: () => {
+        /* No-op */
+    },
+};
+function MakeCommandElement(command, isPlaceholder) {
+    if (isPlaceholder) {
+        // Placeholders are not visible and not interacted with, so they are always ActionCommand
+        // components, just to ensure the exact right amount of space is taken up.
+        return jsx(ActionCommand, { command: PlaceHolderCommand }, command.displayName);
+    }
+    return command.type === "action" ? jsx(ActionCommand, { command: command }, command.displayName) : jsx(ToggleCommand, { command: command }, command.displayName);
+}
 const SceneTreeItem = (props) => {
     const { isSelected, select } = props;
     const classes = useStyles$a();
-    return (jsx(FlatTreeItem, { value: "scene", itemType: "leaf", parentValue: undefined, "aria-level": 1, "aria-setsize": 1, "aria-posinset": 1, onClick: select, children: jsx(TreeItemLayout, { iconBefore: jsx(MoviesAndTvRegular, {}), className: classes.sceneTreeItemLayout, style: isSelected ? { backgroundColor: tokens.colorNeutralBackground1Selected } : undefined, children: jsx(Body1Strong, { wrap: false, truncate: true, children: "Scene" }) }) }, "scene"));
+    return (jsx(FlatTreeItem, { value: "scene", itemType: "leaf", parentValue: undefined, "aria-level": 1, "aria-setsize": 1, "aria-posinset": 1, onClick: select, children: jsx(TreeItemLayout, { iconBefore: jsx(GlobeRegular, {}), className: classes.sceneTreeItemLayout, style: isSelected ? { backgroundColor: tokens.colorNeutralBackground1Selected } : undefined, children: jsx(Body1Strong, { wrap: false, truncate: true, children: "Scene" }) }) }, "scene"));
 };
 const SectionTreeItem = (props) => {
     const { section, isFiltering, expandAll, collapseAll } = props;
@@ -1886,6 +2007,7 @@ const SectionTreeItem = (props) => {
 };
 const EntityTreeItem = (props) => {
     const { entityItem, isSelected, select, isFiltering, commandProviders, expandAll, collapseAll } = props;
+    const hasChildren = !!entityItem.children?.length;
     const displayInfo = useResource(useCallback(() => {
         const displayInfo = entityItem.getDisplayInfo();
         if (!displayInfo.dispose) {
@@ -1898,25 +2020,63 @@ const EntityTreeItem = (props) => {
     const name = useObservableState(() => displayInfo.name, displayInfo.onChange);
     // Get the commands that apply to this entity.
     const commands = useResource(useCallback(() => {
-        const commands = commandProviders
+        const commands = [...commandProviders]
             .filter((provider) => provider.predicate(entityItem.entity))
-            .map((provider) => provider.getCommand(entityItem.entity));
+            .map((provider) => {
+            return {
+                order: provider.order,
+                command: provider.getCommand(entityItem.entity),
+            };
+        })
+            .sort((a, b) => {
+            // Action commands always come before toggle commands, because toggle commands will remain
+            // visible when they are enabled, even when the pointer is not hovering the item, and we
+            // don't want a bunch of blank space.
+            if (a.command.type !== b.command.type) {
+                return a.command.type === "action" ? -1 : 1;
+            }
+            // Within each group of command types, sort by order (default 0) ascending.
+            return (a.order ?? 0) - (b.order ?? 0);
+        })
+            .map((entry) => entry.command);
         return Object.assign(commands, {
             dispose: () => commands.forEach((command) => command.dispose?.()),
         });
     }, [entityItem.entity, commandProviders]));
-    const [enabledToggleCommands, setEnabledToggleCommands] = useState([]);
-    // For enabled/active toggle commands, we should always show them so the user knows this command is toggled on.
+    // TreeItemLayout actions (totally unrelated to "Action" type commands) are only visible when the item is focused or has pointer hover.
+    const actions = useMemo(() => {
+        const defaultCommands = [];
+        if (hasChildren) {
+            defaultCommands.push({
+                type: "action",
+                displayName: "Expand All",
+                icon: () => jsx(ArrowExpandAllRegular, {}),
+                execute: () => expandAll(),
+            });
+        }
+        return [...defaultCommands, ...commands].map((command) => MakeCommandElement(command, false));
+    }, [commands, hasChildren, expandAll]);
+    // TreeItemLayout asides are always visible.
+    const [aside, setAside] = useState([]);
+    // This useEffect keeps the aside up-to-date. What should always show is any enabled toggle command, along with
+    // placeholders to the right to keep the position of the actions consistent.
     useEffect(() => {
-        const toggleCommands = commands.filter((command) => command.type === "toggle");
-        const updateEnabledToggleCommands = () => {
-            setEnabledToggleCommands(toggleCommands.filter((command) => command.isEnabled));
+        const updateAside = () => {
+            let isAnyCommandEnabled = false;
+            const aside = [];
+            for (const command of commands) {
+                isAnyCommandEnabled || (isAnyCommandEnabled = command.type === "toggle" && command.isEnabled);
+                if (isAnyCommandEnabled) {
+                    aside.push(MakeCommandElement(command, command.type !== "toggle" || !command.isEnabled));
+                }
+            }
+            setAside(aside);
         };
-        updateEnabledToggleCommands();
-        const observers = toggleCommands
+        updateAside();
+        const observers = commands
             .map((command) => command.onChange)
             .filter((onChange) => !!onChange)
-            .map((onChange) => onChange.add(updateEnabledToggleCommands));
+            .map((onChange) => onChange.add(updateAside));
         return () => {
             for (const observer of observers) {
                 observer.remove();
@@ -1925,15 +2085,14 @@ const EntityTreeItem = (props) => {
     }, [commands]);
     return (jsxs(Menu, { openOnContext: true, children: [jsx(MenuTrigger, { disableButtonEnhancement: true, children: jsx(FlatTreeItem, { value: entityItem.entity.uniqueId, 
                     // Disable manual expand/collapse when a filter is active.
-                    itemType: !isFiltering && (entityItem.children?.length ?? 0) > 0 ? "branch" : "leaf", parentValue: entityItem.parent.type === "section" ? entityItem.parent.sectionName : entityItem.entity.uniqueId, "aria-level": entityItem.depth, "aria-setsize": 1, "aria-posinset": 1, onClick: select, children: jsx(TreeItemLayout, { iconBefore: entityItem.icon ? jsx(entityItem.icon, { entity: entityItem.entity }) : null, style: isSelected ? { backgroundColor: tokens.colorNeutralBackground1Selected } : undefined, 
-                        // Actions are only visible when the item is focused or has pointer hover.
-                        actions: commands.map((command) => command.type === "action" ? (jsx(ActionCommand, { command: command }, command.displayName)) : (jsx(ToggleCommand, { command: command }, command.displayName))), 
-                        // Asides are always visible.
-                        aside: {
+                    itemType: !isFiltering && hasChildren ? "branch" : "leaf", parentValue: entityItem.parent.type === "section" ? entityItem.parent.sectionName : entityItem.entity.uniqueId, "aria-level": entityItem.depth, "aria-setsize": 1, "aria-posinset": 1, onClick: select, children: jsx(TreeItemLayout, { iconBefore: entityItem.icon ? jsx(entityItem.icon, { entity: entityItem.entity }) : null, style: isSelected ? { backgroundColor: tokens.colorNeutralBackground1Selected } : undefined, actions: actions, aside: {
                             // Match the gap and padding of the actions.
-                            style: { gap: 0, paddingRight: tokens.spacingHorizontalS },
-                            children: enabledToggleCommands.map((command) => jsx(ToggleCommand, { command: command }, command.displayName)),
-                        }, children: jsx(Body1, { wrap: false, truncate: true, children: name.substring(0, 100) }) }) }, entityItem.entity.uniqueId) }), jsx(MenuPopover, { hidden: !entityItem.children?.length, children: jsxs(MenuList, { children: [jsx(MenuItem, { onClick: expandAll, children: jsx(Body1, { children: "Expand All" }) }), jsx(MenuItem, { onClick: collapseAll, children: jsx(Body1, { children: "Collapse All" }) })] }) })] }));
+                            style: { gap: 0, paddingLeft: tokens.spacingHorizontalS, paddingRight: tokens.spacingHorizontalS },
+                            children: aside,
+                        }, main: {
+                            // Prevent the "main" content (the Body1 below) from growing too large and pushing the actions/aside out of view.
+                            style: { flex: "1 1 0", overflow: "hidden", textOverflow: "ellipsis" },
+                        }, children: jsx(Body1, { wrap: false, truncate: true, children: name }) }) }, entityItem.entity.uniqueId) }), jsx(MenuPopover, { hidden: !hasChildren, children: jsxs(MenuList, { children: [jsx(MenuItem, { onClick: expandAll, children: jsx(Body1, { children: "Expand All" }) }), jsx(MenuItem, { onClick: collapseAll, children: jsx(Body1, { children: "Collapse All" }) })] }) })] }));
 };
 const SceneExplorer = (props) => {
     const classes = useStyles$a();
@@ -2859,19 +3018,19 @@ const DefaultInspectorExtensionFeed = new BuiltInsExtensionFeed("Inspector", [
         name: "Export Tools",
         description: "Adds new features to enable exporting Babylon assets such as .gltf, .glb, .babylon, and more.",
         keywords: ["export", "gltf", "glb", "babylon", "exporter", "tools"],
-        getExtensionModuleAsync: async () => await import('./exportService-D-dQNOY7.js'),
+        getExtensionModuleAsync: async () => await import('./exportService-Cu9CXW_A.js'),
     },
     {
         name: "Capture Tools",
         description: "Adds new features to enable capturing screenshots, GIFs, videos, and more.",
         keywords: ["capture", "screenshot", "gif", "video", "tools"],
-        getExtensionModuleAsync: async () => await import('./captureService-BApVw0DN.js'),
+        getExtensionModuleAsync: async () => await import('./captureService-CuhjVz1y.js'),
     },
     {
         name: "Import Tools",
         description: "Adds new features related to importing Babylon assets.",
         keywords: ["import", "tools"],
-        getExtensionModuleAsync: async () => await import('./importService-Bnx5hsFQ.js'),
+        getExtensionModuleAsync: async () => await import('./importService-BETG4FuQ.js'),
     },
 ]);
 
@@ -3147,27 +3306,6 @@ class ExtensionManager {
     }
 }
 
-const ThemeModeStorageKey = `Babylon/Settings/ThemeMode`;
-/**
- * Custom hook to manage the theme mode (light/dark/auto).
- * @param modeOverride If specified, any previously stored theme mode will be replaced with this mode.
- * @returns An object containing the theme mode state and helper functions.
- */
-function useThemeMode(modeOverride) {
-    const { isDarkMode, ternaryDarkMode, setTernaryDarkMode } = useTernaryDarkMode({
-        defaultValue: modeOverride,
-        initializeWithValue: !modeOverride,
-        localStorageKey: ThemeModeStorageKey,
-    });
-    // If a modeOverride is provided, replace any previously stored mode.
-    // Also make sure there is a stored value initially, even before changing the theme.
-    // This way, other usages of this hook will get the correct initial value.
-    if (modeOverride || !localStorage.getItem(ThemeModeStorageKey)) {
-        localStorage.setItem(ThemeModeStorageKey, JSON.stringify(ternaryDarkMode));
-    }
-    return { isDarkMode, themeMode: ternaryDarkMode, setThemeMode: setTernaryDarkMode };
-}
-
 // This sorts a set of service definitions based on their dependencies (e.g. a topological sort).
 function SortServiceDefinitions(serviceDefinitions) {
     const sortedServiceDefinitions = [];
@@ -3458,7 +3596,7 @@ const ThemeSelectorServiceDefinition = {
                 const toggleTheme = useCallback(() => {
                     setThemeMode(isDarkMode ? "light" : "dark");
                 }, [isDarkMode]);
-                return (jsxs(Menu, { positioning: "below-end", checkedValues: { theme: [themeMode] }, onCheckedValueChange: onSelectedThemeChange, children: [jsx(MenuTrigger, { disableButtonEnhancement: true, children: (triggerProps) => (jsx(Tooltip, { content: "Select Theme", relationship: "label", children: jsx(SplitButton, { className: classes.themeButton, menuButton: triggerProps, primaryActionButton: { onClick: toggleTheme }, size: "small", appearance: "secondary", shape: "circular", icon: isDarkMode ? jsx(WeatherSunnyRegular, {}) : jsx(WeatherMoonRegular, {}) }) })) }), jsx(MenuPopover, { className: classes.themeMenuPopover, children: jsxs(MenuList, { children: [jsx(MenuItemRadio, { name: "theme", value: "system", children: "System" }), jsx(MenuItemRadio, { name: "theme", value: "light", children: "Light" }), jsx(MenuItemRadio, { name: "theme", value: "dark", children: "Dark" })] }) })] }));
+                return (jsxs(Menu, { positioning: "below-end", checkedValues: { theme: [themeMode] }, onCheckedValueChange: onSelectedThemeChange, children: [jsx(MenuTrigger, { disableButtonEnhancement: true, children: (triggerProps) => (jsx(Tooltip, { content: "Select Theme", relationship: "label", children: jsx(SplitButton, { className: classes.themeButton, menuButton: triggerProps, primaryActionButton: { onClick: toggleTheme }, size: "small", appearance: "transparent", shape: "circular", icon: isDarkMode ? jsx(WeatherSunnyRegular, {}) : jsx(WeatherMoonRegular, {}) }) })) }), jsx(MenuPopover, { className: classes.themeMenuPopover, children: jsxs(MenuList, { children: [jsx(MenuItemRadio, { name: "theme", value: "system", children: "System" }), jsx(MenuItemRadio, { name: "theme", value: "light", children: "Light" }), jsx(MenuItemRadio, { name: "theme", value: "dark", children: "Dark" })] }) })] }));
             },
         });
         return {
@@ -3467,34 +3605,6 @@ const ThemeSelectorServiceDefinition = {
     },
 };
 
-/* eslint-disable @typescript-eslint/naming-convention */
-// Generated from https://react.fluentui.dev/?path=/docs/theme-theme-designer--docs
-// Key color: #3A94FC
-const babylonRamp = {
-    10: "#020305",
-    20: "#121721",
-    30: "#1A263A",
-    40: "#1F314F",
-    50: "#243E64",
-    60: "#294B7B",
-    70: "#2D5892",
-    80: "#3166AA",
-    90: "#3473C3",
-    100: "#3782DC",
-    110: "#3990F6",
-    120: "#5A9EFD",
-    130: "#7BACFE",
-    140: "#96BAFF",
-    150: "#AFC9FF",
-    160: "#C6D8FF",
-};
-const LightTheme = {
-    ...createLightTheme(babylonRamp),
-};
-const DarkTheme = {
-    ...createDarkTheme(babylonRamp),
-};
-
 // eslint-disable-next-line @typescript-eslint/naming-convention
 const useStyles$6 = makeStyles({
     app: {
@@ -3528,10 +3638,12 @@ const useStyles$6 = makeStyles({
  */
 function MakeModularTool(options) {
     const { containerElement, serviceDefinitions, themeMode, showThemeSelector = true, extensionFeeds = [] } = options;
+    if (themeMode) {
+        SetThemeMode(themeMode);
+    }
     const modularToolRootComponent = () => {
         const classes = useStyles$6();
         const [extensionManagerContext, setExtensionManagerContext] = useState();
-        const { isDarkMode } = useThemeMode(themeMode);
         const [requiredExtensions, setRequiredExtensions] = useState();
         const [requiredExtensionsDeferred, setRequiredExtensionsDeferred] = useState();
         const [extensionInstallError, setExtensionInstallError] = useState();
@@ -3628,7 +3740,7 @@ function MakeModularTool(options) {
         // Show a spinner until a main view has been set.
         // eslint-disable-next-line @typescript-eslint/naming-convention
         const Content = rootComponent ?? (() => jsx(Spinner, { className: classes.spinner }));
-        return (jsx(ExtensionManagerContext.Provider, { value: extensionManagerContext, children: jsx(FluentProvider, { className: classes.app, theme: isDarkMode ? DarkTheme : LightTheme, children: jsxs(Fragment, { children: [jsx(Dialog, { open: !!requiredExtensions, modalType: "alert", children: jsx(DialogSurface, { children: jsxs(DialogBody, { children: [jsx(DialogTitle, { children: "Required Extensions" }), jsxs(DialogContent, { children: ["Opening this URL requires the following extensions to be installed and enabled:", jsx("ul", { children: requiredExtensions?.map((name) => jsx("li", { children: name }, name)) })] }), jsxs(DialogActions, { children: [jsx(Button$1, { appearance: "primary", onClick: onAcceptRequiredExtensions, children: "Install & Enable" }), jsx(Button$1, { appearance: "secondary", onClick: onRejectRequiredExtensions, children: "No Thanks" })] })] }) }) }), jsx(Dialog, { open: !!extensionInstallError, modalType: "alert", children: jsx(DialogSurface, { children: jsxs(DialogBody, { children: [jsx(DialogTitle, { children: jsxs("div", { className: classes.extensionErrorTitleDiv, children: ["Extension Install Error", jsx(ErrorCircleRegular, { className: classes.extensionErrorIcon })] }) }), jsx(DialogContent, { children: jsxs(List$1, { children: [jsx(ListItem, { children: jsx(Body1, { children: `Extension "${extensionInstallError?.extension.name}" failed to install and was removed.` }) }), jsx(ListItem, { children: jsx(Body1, { children: `${extensionInstallError?.error}` }) })] }) }), jsx(DialogActions, { children: jsx(Button$1, { appearance: "primary", onClick: onAcknowledgedExtensionInstallError, children: "Close" }) })] }) }) }), jsx(Suspense, { fallback: jsx(Spinner, { className: classes.spinner }), children: jsx(Content, {}) })] }) }) }));
+        return (jsx(ExtensionManagerContext.Provider, { value: extensionManagerContext, children: jsx(Theme, { className: classes.app, children: jsxs(Fragment, { children: [jsx(Dialog, { open: !!requiredExtensions, modalType: "alert", children: jsx(DialogSurface, { children: jsxs(DialogBody, { children: [jsx(DialogTitle, { children: "Required Extensions" }), jsxs(DialogContent, { children: ["Opening this URL requires the following extensions to be installed and enabled:", jsx("ul", { children: requiredExtensions?.map((name) => jsx("li", { children: name }, name)) })] }), jsxs(DialogActions, { children: [jsx(Button$1, { appearance: "primary", onClick: onAcceptRequiredExtensions, children: "Install & Enable" }), jsx(Button$1, { appearance: "secondary", onClick: onRejectRequiredExtensions, children: "No Thanks" })] })] }) }) }), jsx(Dialog, { open: !!extensionInstallError, modalType: "alert", children: jsx(DialogSurface, { children: jsxs(DialogBody, { children: [jsx(DialogTitle, { children: jsxs("div", { className: classes.extensionErrorTitleDiv, children: ["Extension Install Error", jsx(ErrorCircleRegular, { className: classes.extensionErrorIcon })] }) }), jsx(DialogContent, { children: jsxs(List$1, { children: [jsx(ListItem, { children: jsx(Body1, { children: `Extension "${extensionInstallError?.extension.name}" failed to install and was removed.` }) }), jsx(ListItem, { children: jsx(Body1, { children: `${extensionInstallError?.error}` }) })] }) }), jsx(DialogActions, { children: jsx(Button$1, { appearance: "primary", onClick: onAcknowledgedExtensionInstallError, children: "Close" }) })] }) }) }), jsx(Suspense, { fallback: jsx(Spinner, { className: classes.spinner }), children: jsx(Content, {}) })] }) }) }));
     };
     // Set the container element to be a flex container so that the tool can be displayed properly.
     const originalContainerElementDisplay = containerElement.style.display;
@@ -3729,6 +3841,10 @@ const GizmoServiceDefinition = {
     },
 };
 
+const MeshIcon = createFluentIcon("Mesh", "16", '<path d="M14.03,3.54l-5.11-2.07c-.61-.25-1.27-.25-1.88,0L1.93,3.54c-.57.23-.94.78-.94,1.39v6.15c0,.61.37,1.16.94,1.39l5.11,2.07c.3.12.62.18.94.18s.64-.06.94-.18l5.12-2.07c.57-.23.94-.78.94-1.39v-6.15c0-.61-.37-1.16-.94-1.39ZM13.97,7.71l-2.11.86v-2.71l2.11-.86v2.71ZM1.99,5l2.11.86v2.71l-2.11-.86v-2.71ZM11.35,4.98l-2.04-.83,1.78-.72,2.04.83-1.78.72ZM10.02,5.52l-2.04.83-2.04-.83,2.04-.83,2.04.83ZM4.6,4.98l-1.78-.72,2.04-.83,1.78.72-2.04.83ZM5.1,6.26l2.38.96v2.71l-2.38-.96v-2.71ZM8.48,7.22l2.38-.96v2.71l-2.38.96v-2.71ZM7.41,2.39c.18-.07.37-.11.56-.11s.38.04.56.11l1.22.49-1.78.72-1.79-.72,1.22-.49ZM1.99,11.07v-2.29l2.11.86v2.62l-1.8-.73c-.19-.08-.31-.26-.31-.46ZM5.1,12.67v-2.62l2.38.96v2.61s-.04,0-.06-.01l-2.31-.94ZM8.54,13.61s-.04,0-.06.01v-2.61l2.38-.96v2.62l-2.31.94ZM13.66,11.54l-1.8.73v-2.62l2.11-.86v2.29c0,.2-.12.39-.31.46Z"/>');
+const TranslateIcon = createFluentIcon("Translate", "24", '<path d="M20.16,12.98l-2.75-2.75c-.29-.29-.77-.29-1.06,0-.29.29-.29.77,0,1.06l1.47,1.47h-6.69v-6.69l1.47,1.47c.29.29.77.29,1.06,0,.29-.29.29-.77,0-1.06l-2.75-2.75c-.14-.14-.33-.22-.53-.22s-.39.08-.53.22l-2.75,2.75c-.29.29-.29.77,0,1.06.29.29.77.29,1.06,0l1.47-1.47v7.13l-3.52,3.52v-2.08c0-.41-.34-.75-.75-.75s-.75.34-.75.75v3.89c0,.2.08.39.22.53.14.14.33.22.53.22h3.89c.41,0,.75-.34.75-.75s-.34-.75-.75-.75h-2.08s3.52-3.52,3.52-3.52h7.13l-1.47,1.47c-.29.29-.29.77,0,1.06s.77.29,1.06,0l2.75-2.75c.14-.14.22-.33.22-.53s-.08-.39-.22-.53Z" />');
+const MaterialIcon = createFluentIcon("Material", "16", '<path d="M14.74,6.3c-.09-.36-.38-.64-.75-.72-.04-.09-.08-.18-.12-.27.1-.15.16-.32.16-.51,0-.18-.05-.34-.13-.48-1.23-1.97-3.41-3.28-5.9-3.28C4.16,1.04,1.04,4.16,1.04,7.99c0,.39.23.72.57.88.02.12.03.25.06.37-.18.18-.3.42-.3.7,0,.11.02.21.06.31.94,2.74,3.53,4.71,6.58,4.71,3.84,0,6.96-3.12,6.96-6.96,0-.59-.08-1.16-.22-1.7ZM2.07,8.58c-.02-.19-.03-.39-.03-.58,0-3.29,2.67-5.96,5.96-5.96,2.23,0,4.17,1.23,5.2,3.05.05.18-.07.45-.3.75-.57-.73-1.45-1.21-2.45-1.21-1.72,0-3.12,1.4-3.12,3.11,0,.33.07.65.16.95-3.05.82-5.17.52-5.42-.11ZM12.56,7.75c0,1.17-.95,2.11-2.11,2.11s-2.12-.95-2.12-2.11.95-2.11,2.12-2.11,2.11.95,2.11,2.11ZM8,13.96c-2.6,0-4.81-1.68-5.62-4.01.5.16,1.11.24,1.79.24,1.15,0,2.49-.22,3.79-.59.57.76,1.47,1.26,2.49,1.26,1.72,0,3.11-1.4,3.11-3.11,0-.34-.07-.65-.17-.96.13-.13.24-.26.34-.39.14.51.22,1.04.22,1.6,0,3.29-2.67,5.96-5.96,5.96Z"/>');
+
 const useStyles$5 = makeStyles({
     coordinatesModeButton: {
         margin: `0 ${tokens.spacingVerticalXS}`,
@@ -3831,9 +3947,9 @@ const GizmoToolbar = (props) => {
     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: ArrowMoveRegular, 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: {
+    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: "secondary", 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" })] }) })] }) })] }));
+                                    }, 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 = {
@@ -3903,7 +4019,7 @@ const TextInput = (props) => {
     };
     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, id: id, size: "medium", value: value, onChange: handleChange, onKeyUp: handleKeyUp, onKeyDown: HandleKeyDown, onBlur: HandleOnBlur, className: mergedClassName })] }));
+    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: "medium", value: value, onChange: handleChange, onKeyUp: handleKeyUp, onKeyDown: HandleKeyDown, onBlur: HandleOnBlur, className: mergedClassName })] }));
 };
 
 const SpinButton = (props) => {
@@ -3951,7 +4067,7 @@ const SpinButton = (props) => {
     };
     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, step: step, id: id, size: "medium", precision: CalculatePrecision(step ?? 1.01), displayValue: props.unit ? `${PrecisionRound(value, CalculatePrecision(step ?? 1.01))} ${props.unit}` : undefined, value: value, onChange: handleChange, onKeyUp: handleKeyUp, onKeyDown: HandleKeyDown, onBlur: HandleOnBlur, className: mergedClassName })] }));
+    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: "medium", precision: CalculatePrecision(step ?? 1.01), displayValue: props.unit ? `${PrecisionRound(value, CalculatePrecision(step ?? 1.01))} ${props.unit}` : undefined, value: value, onChange: handleChange, onKeyUp: handleKeyUp, onKeyDown: HandleKeyDown, onBlur: HandleOnBlur, className: mergedClassName })] }));
 };
 /**
  * Fluent's CalculatePrecision function
@@ -4326,6 +4442,7 @@ const useDropdownStyles = makeStyles({
         justifyContent: "center", // align items vertically
         gap: "4px",
     },
+    button: { textAlign: "end" },
 });
 /**
  * Renders a fluent UI dropdown component for the options passed in, and an additional 'Not Defined' option if null is set to true
@@ -4343,7 +4460,7 @@ const Dropdown = (props) => {
     }, [props.value]);
     const id = useId("dropdown");
     const mergedClassName = mergeClasses(classes.dropdown, props.className);
-    return (jsxs("div", { className: classes.container, children: [props.infoLabel && jsx(InfoLabel, { ...props.infoLabel, htmlFor: id }), jsx(Dropdown$1, { id: id, disabled: props.disabled, size: "medium", className: mergedClassName, onOptionSelect: (evt, data) => {
+    return (jsxs("div", { className: classes.container, children: [props.infoLabel && jsx(InfoLabel, { ...props.infoLabel, htmlFor: id }), jsx(Dropdown$1, { id: id, disabled: props.disabled, size: "medium", className: mergedClassName, button: { className: classes.button }, onOptionSelect: (evt, data) => {
                     const value = typeof props.value === "number" ? Number(data.optionValue) : data.optionValue;
                     if (value !== undefined) {
                         setDefaultVal(value);
@@ -5577,6 +5694,11 @@ function SaveMetadata(entity, metadata) {
     }
 }
 const useStyles$4 = makeStyles({
+    mainDiv: {
+        display: "flex",
+        flexDirection: "column",
+        gap: tokens.spacingVerticalXS,
+    },
     buttonDiv: {
         display: "grid",
         gridAutoFlow: "column",
@@ -5601,14 +5723,14 @@ const MetadataProperties = (props) => {
     const [editedMetadata, setEditedMetadata] = useState(stringifiedMetadata);
     const isEditedMetadataJSON = useMemo(() => IsParsable(editedMetadata), [editedMetadata]);
     const unformattedEditedMetadata = useMemo(() => Restringify(editedMetadata, false), [editedMetadata]);
-    return (jsxs(Fragment, { children: [jsx(TextPropertyLine, { label: "Property Type", value: metadataType }), jsx(Collapse, { visible: canPreventObjectCorruption, children: jsx(SwitchPropertyLine, { label: "Prevent Object Corruption", value: isReadonly, onChange: setPreventObjectCorruption }) }), jsx(Textarea, { disabled: isReadonly, value: editedMetadata, onChange: setEditedMetadata }), jsx(ButtonLine, { label: "Populate glTF extras", disabled: !IsParsable(editedMetadata) || HasGltfExtras(editedMetadata), onClick: () => {
-                    const isFormatted = Restringify(editedMetadata, true) === editedMetadata;
-                    let withGLTFExtras = PopulateGLTFExtras(editedMetadata);
-                    if (isFormatted) {
-                        withGLTFExtras = Restringify(withGLTFExtras, true);
-                    }
-                    setEditedMetadata(withGLTFExtras);
-                } }), jsx(LineContainer, { children: jsxs("div", { className: classes.buttonDiv, children: [jsx(Button$1, { icon: jsx(SaveRegular, {}), disabled: stringifiedMetadata === unformattedEditedMetadata, onClick: () => SaveMetadata(entity, editedMetadata), children: jsx(Body1, { children: "Save" }) }), jsx(Tooltip, { content: "Undo Changes", relationship: "label", children: jsx(Button$1, { icon: jsx(ArrowUndoRegular, {}), disabled: stringifiedMetadata === unformattedEditedMetadata, onClick: () => setEditedMetadata(stringifiedMetadata) }) }), jsx(Tooltip, { content: "Format (Pretty Print)", relationship: "label", children: jsx(Button$1, { icon: jsx("svg", { ...props, viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", children: jsx("text", { x: "3", y: "14", fontSize: "14", fill: "currentColor", children: "{ }" }) }), disabled: !isEditedMetadataJSON, onClick: () => setEditedMetadata(Restringify(editedMetadata, true)) }) }), jsx(Tooltip, { content: "Clear Formatting", relationship: "label", children: jsx(Button$1, { icon: jsx(ClearFormattingRegular, {}), disabled: !isEditedMetadataJSON, onClick: () => setEditedMetadata(Restringify(editedMetadata, false)) }) })] }) })] }));
+    return (jsxs(Fragment, { children: [jsx(TextPropertyLine, { label: "Property Type", value: metadataType }), jsx(Collapse, { visible: canPreventObjectCorruption, children: jsx(SwitchPropertyLine, { label: "Prevent Object Corruption", value: isReadonly, onChange: setPreventObjectCorruption }) }), jsxs("div", { className: classes.mainDiv, children: [jsx(Textarea, { disabled: isReadonly, value: editedMetadata, onChange: setEditedMetadata }), jsx(ButtonLine, { label: "Populate glTF extras", disabled: !!editedMetadata && (!IsParsable(editedMetadata) || HasGltfExtras(editedMetadata)), onClick: () => {
+                            const isFormatted = Restringify(editedMetadata, true) === editedMetadata;
+                            let withGLTFExtras = PopulateGLTFExtras(editedMetadata);
+                            if (isFormatted) {
+                                withGLTFExtras = Restringify(withGLTFExtras, true);
+                            }
+                            setEditedMetadata(withGLTFExtras);
+                        } }), jsx(LineContainer, { children: jsxs("div", { className: classes.buttonDiv, children: [jsx(Button$1, { icon: jsx(SaveRegular, {}), disabled: stringifiedMetadata === unformattedEditedMetadata, onClick: () => SaveMetadata(entity, editedMetadata), children: jsx(Body1, { children: "Save" }) }), jsx(Tooltip, { content: "Undo Changes", relationship: "label", children: jsx(Button$1, { icon: jsx(ArrowUndoRegular, {}), disabled: stringifiedMetadata === unformattedEditedMetadata, onClick: () => setEditedMetadata(stringifiedMetadata) }) }), jsx(Tooltip, { content: "Format (Pretty Print)", relationship: "label", children: jsx(Button$1, { icon: jsx(BracesRegular, {}), disabled: !isEditedMetadataJSON, onClick: () => setEditedMetadata(Restringify(editedMetadata, true)) }) }), jsx(Tooltip, { content: "Clear Formatting (Undo Pretty Print)", relationship: "label", children: jsx(Button$1, { icon: jsx(BracesDismiss16Regular, {}), disabled: !isEditedMetadataJSON, onClick: () => setEditedMetadata(Restringify(editedMetadata, false)) }) })] }) })] })] }));
 };
 
 function IsMetadataContainer(entity) {
@@ -7476,6 +7598,7 @@ const AnimationGroupExplorerServiceDefinition = {
         });
         const animationPlayPauseCommandRegistration = sceneExplorerService.addCommand({
             predicate: (entity) => entity instanceof AnimationGroup,
+            order: 900 /* DefaultCommandsOrder.AnimationGroupPlay */,
             getCommand: (animationGroup) => {
                 const onChangeObservable = new Observable();
                 const playObserver = animationGroup.onAnimationGroupPlayObservable.add(() => onChangeObservable.notifyObservers());
@@ -7638,6 +7761,7 @@ const FrameGraphExplorerServiceDefinition = {
         });
         const activeFrameGraphCommandRegistration = sceneExplorerService.addCommand({
             predicate: (entity) => entity instanceof FrameGraph,
+            order: 900 /* DefaultCommandsOrder.FrameGraphPlay */,
             getCommand: (frameGraph) => {
                 const onChangeObservable = new Observable();
                 const frameGraphHook = InterceptProperty(scene, "frameGraph", {
@@ -7748,7 +7872,7 @@ const MaterialExplorerServiceDefinition = {
                     },
                 };
             },
-            entityIcon: () => jsx(PaintBrushRegular, {}),
+            entityIcon: () => jsx(MaterialIcon, {}),
             getEntityAddedObservables: () => [scene.onNewMaterialAddedObservable],
             getEntityRemovedObservables: () => [scene.onMaterialRemovedObservable],
         });
@@ -7796,7 +7920,7 @@ const NodeExplorerServiceDefinition = {
                     },
                 };
             },
-            entityIcon: ({ entity: node }) => node instanceof AbstractMesh ? (jsx(BoxRegular, {})) : node instanceof TransformNode ? (jsx(BranchRegular, {})) : node instanceof Camera ? (jsx(CameraRegular, {})) : node instanceof Light ? (jsx(LightbulbRegular, {})) : (jsx(Fragment, {})),
+            entityIcon: ({ entity: node }) => node instanceof AbstractMesh ? (jsx(MeshIcon, {})) : node instanceof TransformNode ? (jsx(MyLocationRegular, {})) : node instanceof Camera ? (jsx(CameraRegular, {})) : node instanceof Light ? (jsx(LightbulbRegular, {})) : (jsx(Fragment, {})),
             getEntityAddedObservables: () => [
                 scene.onNewMeshAddedObservable,
                 scene.onNewTransformNodeAddedObservable,
@@ -7811,8 +7935,37 @@ const NodeExplorerServiceDefinition = {
             ],
             getEntityMovedObservables: () => [nodeMovedObservable],
         });
+        const abstractMeshBoundingBoxCommandRegistration = sceneExplorerService.addCommand({
+            predicate: (entity) => entity instanceof AbstractMesh && entity.getTotalVertices() > 0,
+            order: 1000 /* DefaultCommandsOrder.MeshBoundingBox */,
+            getCommand: (mesh) => {
+                const onChangeObservable = new Observable();
+                const showBoundingBoxHook = InterceptProperty(mesh, "showBoundingBox", {
+                    afterSet: () => onChangeObservable.notifyObservers(),
+                });
+                return {
+                    type: "toggle",
+                    get displayName() {
+                        return `${mesh.showBoundingBox ? "Hide" : "Show"} Bounding Box`;
+                    },
+                    icon: () => (mesh.showBoundingBox ? jsx(BorderOutsideRegular, {}) : jsx(BorderNoneRegular, {})),
+                    get isEnabled() {
+                        return mesh.showBoundingBox;
+                    },
+                    set isEnabled(enabled) {
+                        mesh.showBoundingBox = enabled;
+                    },
+                    onChange: onChangeObservable,
+                    dispose: () => {
+                        showBoundingBoxHook.dispose();
+                        onChangeObservable.clear();
+                    },
+                };
+            },
+        });
         const abstractMeshVisibilityCommandRegistration = sceneExplorerService.addCommand({
             predicate: (entity) => entity instanceof AbstractMesh && entity.getTotalVertices() > 0,
+            order: 1100 /* DefaultCommandsOrder.MeshVisibility */,
             getCommand: (mesh) => {
                 const onChangeObservable = new Observable();
                 const isVisibleHook = InterceptProperty(mesh, "isVisible", {
@@ -7840,6 +7993,7 @@ const NodeExplorerServiceDefinition = {
         });
         const activeCameraCommandRegistration = sceneExplorerService.addCommand({
             predicate: (entity) => entity instanceof Camera,
+            order: 700 /* DefaultCommandsOrder.CameraActive */,
             getCommand: (camera) => {
                 const scene = camera.getScene();
                 const onChangeObservable = new Observable();
@@ -7871,6 +8025,7 @@ const NodeExplorerServiceDefinition = {
         function addGizmoCommand(nodeClass, getGizmoRef) {
             return sceneExplorerService.addCommand({
                 predicate: (entity) => entity instanceof nodeClass,
+                order: 800 /* DefaultCommandsOrder.GizmoActive */,
                 getCommand: (node) => {
                     const onChangeObservable = new Observable();
                     let gizmoRef = null;
@@ -7879,7 +8034,7 @@ const NodeExplorerServiceDefinition = {
                         get displayName() {
                             return `Turn ${gizmoRef ? "Off" : "On"} Gizmo`;
                         },
-                        icon: () => (gizmoRef ? jsx(Cone16Filled, {}) : jsx(Cone16Regular, {})),
+                        icon: () => (gizmoRef ? jsx(EyeRegular, {}) : jsx(EyeOffRegular, {})),
                         get isEnabled() {
                             return !!gizmoRef;
                         },
@@ -7909,6 +8064,7 @@ const NodeExplorerServiceDefinition = {
         const cameraGizmoCommandRegistration = addGizmoCommand(Camera, gizmoService.getCameraGizmo.bind(gizmoService));
         const lightEnabledCommandRegistration = sceneExplorerService.addCommand({
             predicate: (entity) => entity instanceof Light,
+            order: 700 /* DefaultCommandsOrder.LightActive */,
             getCommand: (light) => {
                 return {
                     type: "toggle",
@@ -7930,6 +8086,7 @@ const NodeExplorerServiceDefinition = {
         return {
             dispose: () => {
                 sectionRegistration.dispose();
+                abstractMeshBoundingBoxCommandRegistration.dispose();
                 abstractMeshVisibilityCommandRegistration.dispose();
                 activeCameraCommandRegistration.dispose();
                 cameraGizmoCommandRegistration.dispose();
@@ -8142,6 +8299,7 @@ const SpriteManagerExplorerServiceDefinition = {
         });
         const spritePlayStopCommandRegistration = sceneExplorerService.addCommand({
             predicate: (entity) => entity instanceof Sprite,
+            order: 600 /* DefaultCommandsOrder.SpritePlay */,
             getCommand: (sprite) => {
                 const onChangeObservable = new Observable();
                 const playHook = InterceptFunction(sprite, "playAnimation", {