@babylonjs/inspector 8.37.1-preview → 8.37.2-preview

package/lib/{index-ByzP7-y_.js → index-DE0QdD6v.js}

@@ -3,7 +3,7 @@ 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, MenuDivider, MenuItemCheckbox, 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 { 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, MenuDivider, treeItemLevelToken, MenuItemCheckbox, 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, ArrowCollapseAllRegular, 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';
@@ -2337,6 +2337,41 @@ function ExpandOrCollapseAll(treeItem, open, openItems) {
     const addOrRemove = open ? openItems.add.bind(openItems) : openItems.delete.bind(openItems);
     TraverseGraph([treeItem], (treeItem) => treeItem.children, (treeItem) => addOrRemove(treeItem.type === "entity" ? treeItem.entity.uniqueId : treeItem.sectionName));
 }
+function useCommandContextMenuState(commands) {
+    const [checkedContextMenuItems, setCheckedContextMenuItems] = useState({ toggleCommands: [] });
+    useEffect(() => {
+        const updateCheckedItems = () => {
+            const checkedItems = [];
+            for (const command of commands) {
+                if (command.type === "toggle" && command.isEnabled) {
+                    checkedItems.push(command.displayName);
+                }
+            }
+            setCheckedContextMenuItems({ toggleCommands: checkedItems });
+        };
+        updateCheckedItems();
+        const observers = commands
+            .map((command) => command.onChange)
+            .filter((onChange) => !!onChange)
+            .map((onChange) => onChange.add(updateCheckedItems));
+        return () => {
+            for (const observer of observers) {
+                observer.remove();
+            }
+        };
+    }, [commands]);
+    const onContextMenuCheckedValueChange = useCallback((e, data) => {
+        for (const command of commands) {
+            if (command.type === "toggle") {
+                command.isEnabled = data.checkedItems.includes(command.displayName);
+            }
+        }
+    }, [commands]);
+    const contextMenuItems = commands.map((command) => command.type === "action" ? (jsx(MenuItem, { icon: command.icon ? jsx(command.icon, {}) : undefined, onClick: () => command.execute(), children: command.displayName }, command.displayName)) : (jsx(MenuItemCheckbox, { 
+        // Don't show both a checkmark and an icon. null means no checkmark, undefined means default (checkmark).
+        checkmark: command.icon ? null : undefined, icon: command.icon ? jsx(command.icon, {}) : undefined, name: "toggleCommands", value: command.displayName, children: command.displayName }, command.displayName)));
+    return [checkedContextMenuItems, onContextMenuCheckedValueChange, contextMenuItems];
+}
 // eslint-disable-next-line @typescript-eslint/naming-convention
 const useStyles$b = makeStyles({
     rootDiv: {
@@ -2412,12 +2447,21 @@ const SceneTreeItem = (props) => {
     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: treeItemLayoutClass, 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;
+    const { section, isFiltering, commandProviders, expandAll, collapseAll } = props;
     const classes = useStyles$b();
     const [compactMode] = useCompactMode();
-    return (jsxs(Menu, { openOnContext: true, children: [jsx(MenuTrigger, { disableButtonEnhancement: true, children: jsx(FlatTreeItem, { value: section.sectionName, 
+    // Get the commands that apply to this section.
+    const commands = useResource(useCallback(() => {
+        const commands = [...commandProviders].filter((provider) => provider.predicate(section.sectionName)).map((provider) => provider.getCommand(section.sectionName));
+        return Object.assign(commands, {
+            dispose: () => commands.forEach((command) => command.dispose?.()),
+        });
+    }, [section.sectionName, commandProviders]));
+    const hasChildren = section.children.length > 0;
+    const [checkedContextMenuItems, onContextMenuCheckedValueChange, contextMenuItems] = useCommandContextMenuState(commands);
+    return (jsxs(Menu, { openOnContext: true, checkedValues: checkedContextMenuItems, onCheckedValueChange: onContextMenuCheckedValueChange, children: [jsx(MenuTrigger, { disableButtonEnhancement: true, children: jsx(FlatTreeItem, { value: section.sectionName, 
                     // Disable manual expand/collapse when a filter is active.
-                    itemType: !isFiltering && section.children.length > 0 ? "branch" : "leaf", parentValue: undefined, "aria-level": 1, "aria-setsize": 1, "aria-posinset": 1, children: jsx(TreeItemLayout, { className: compactMode ? classes.treeItemLayoutCompact : undefined, children: jsx(Body1Strong, { wrap: false, truncate: true, children: section.sectionName.substring(0, 100) }) }) }, section.sectionName) }), jsx(MenuPopover, { hidden: !section.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" }) })] }) })] }));
+                    itemType: !isFiltering && section.children.length > 0 ? "branch" : "leaf", parentValue: undefined, "aria-level": 1, "aria-setsize": 1, "aria-posinset": 1, children: jsx(TreeItemLayout, { className: compactMode ? classes.treeItemLayoutCompact : undefined, children: jsx(Body1Strong, { wrap: false, truncate: true, children: section.sectionName.substring(0, 100) }) }) }, section.sectionName) }), jsx(MenuPopover, { hidden: !hasChildren && commands.length === 0, children: jsxs(MenuList, { children: [hasChildren && (jsxs(Fragment, { children: [jsx(MenuItem, { onClick: expandAll, children: jsx(Body1, { children: "Expand All" }) }), jsx(MenuItem, { onClick: collapseAll, children: jsx(Body1, { children: "Collapse All" }) })] })), hasChildren && commands.length > 0 && jsx(MenuDivider, {}), contextMenuItems] }) })] }));
 };
 const EntityTreeItem = (props) => {
     const { entityItem, isSelected, select, isFiltering, commandProviders, expandAll, collapseAll } = props;
@@ -2501,35 +2545,7 @@ const EntityTreeItem = (props) => {
         };
     }, [inlineCommands]);
     const contextMenuCommands = useMemo(() => commands.filter((command) => command.mode === "contextMenu"), [commands]);
-    const [checkedContextMenuItems, setCheckedContextMenuItems] = useState({ toggleCommands: [] });
-    useEffect(() => {
-        const updateCheckedItems = () => {
-            const checkedItems = [];
-            for (const command of contextMenuCommands) {
-                if (command.type === "toggle" && command.isEnabled) {
-                    checkedItems.push(command.displayName);
-                }
-            }
-            setCheckedContextMenuItems({ toggleCommands: checkedItems });
-        };
-        updateCheckedItems();
-        const observers = contextMenuCommands
-            .map((command) => command.onChange)
-            .filter((onChange) => !!onChange)
-            .map((onChange) => onChange.add(updateCheckedItems));
-        return () => {
-            for (const observer of observers) {
-                observer.remove();
-            }
-        };
-    }, [contextMenuCommands]);
-    const onContextMenuCheckedValueChange = useCallback((e, data) => {
-        for (const command of contextMenuCommands) {
-            if (command.type === "toggle") {
-                command.isEnabled = data.checkedItems.includes(command.displayName);
-            }
-        }
-    }, [contextMenuCommands]);
+    const [checkedContextMenuItems, onContextMenuCheckedValueChange, contextMenuItems] = useCommandContextMenuState(contextMenuCommands);
     return (jsxs(Menu, { openOnContext: true, checkedValues: checkedContextMenuItems, onCheckedValueChange: onContextMenuCheckedValueChange, children: [jsx(MenuTrigger, { disableButtonEnhancement: true, children: jsx(FlatTreeItem, { value: entityItem.entity.uniqueId, 
                     // Disable manual expand/collapse when a filter is active.
                     itemType: !isFiltering && hasChildren ? "branch" : "leaf", parentValue: entityItem.parent.type === "section" ? entityItem.parent.sectionName : entityItem.entity.uniqueId, "aria-level": entityItem.depth, "aria-setsize": 1, "aria-posinset": 1, onClick: select, style: { [treeItemLevelToken]: entityItem.depth }, children: jsx(TreeItemLayout, { iconBefore: entityItem.icon ? jsx(entityItem.icon, { entity: entityItem.entity }) : null, className: compactMode ? classes.treeItemLayoutCompact : undefined, style: isSelected ? { backgroundColor: tokens.colorNeutralBackground1Selected } : undefined, actions: actions, aside: {
@@ -2539,13 +2555,11 @@ const EntityTreeItem = (props) => {
                         }, main: {
                             // Prevent the "main" content (the Body1 below) from growing too large and pushing the actions/aside out of view.
                             className: classes.treeItemLayoutMain,
-                        }, children: jsx(Body1, { wrap: false, truncate: true, children: name }) }) }, entityItem.entity.uniqueId) }), jsx(MenuPopover, { hidden: !hasChildren && contextMenuCommands.length === 0, children: jsxs(MenuList, { children: [hasChildren && (jsxs(Fragment, { children: [jsx(MenuItem, { icon: jsx(ArrowExpandAllRegular, {}), onClick: expandAll, children: jsx(Body1, { children: "Expand All" }) }), jsx(MenuItem, { icon: jsx(ArrowCollapseAllRegular, {}), onClick: collapseAll, children: jsx(Body1, { children: "Collapse All" }) })] })), hasChildren && contextMenuCommands.length > 0 && jsx(MenuDivider, {}), contextMenuCommands.map((command) => command.type === "action" ? (jsx(MenuItem, { icon: command.icon ? jsx(command.icon, {}) : undefined, onClick: () => command.execute(), children: command.displayName }, command.displayName)) : (jsx(MenuItemCheckbox, { 
-                            // Don't show both a checkmark and an icon. null means no checkmark, undefined means default (checkmark).
-                            checkmark: command.icon ? null : undefined, icon: command.icon ? jsx(command.icon, {}) : undefined, name: "toggleCommands", value: command.displayName, children: command.displayName }, command.displayName)))] }) })] }));
+                        }, children: jsx(Body1, { wrap: false, truncate: true, children: name }) }) }, entityItem.entity.uniqueId) }), jsx(MenuPopover, { hidden: !hasChildren && contextMenuCommands.length === 0, children: jsxs(MenuList, { children: [hasChildren && (jsxs(Fragment, { children: [jsx(MenuItem, { icon: jsx(ArrowExpandAllRegular, {}), onClick: expandAll, children: jsx(Body1, { children: "Expand All" }) }), jsx(MenuItem, { icon: jsx(ArrowCollapseAllRegular, {}), onClick: collapseAll, children: jsx(Body1, { children: "Collapse All" }) })] })), hasChildren && contextMenuCommands.length > 0 && jsx(MenuDivider, {}), contextMenuItems] }) })] }));
 };
 const SceneExplorer = (props) => {
     const classes = useStyles$b();
-    const { sections, commandProviders, scene, selectedEntity } = props;
+    const { sections, entityCommandProviders, sectionCommandProviders, scene, selectedEntity } = props;
     const [openItems, setOpenItems] = useState(new Set());
     const [sceneVersion, setSceneVersion] = useState(0);
     const scrollViewRef = useRef(null);
@@ -2787,10 +2801,10 @@ const SceneExplorer = (props) => {
                             return (jsx(SceneTreeItem, { scene: scene, isSelected: selectedEntity === scene, select: () => setSelectedEntity?.(scene), isFiltering: !!itemsFilter }, "scene"));
                         }
                         else if (item.type === "section") {
-                            return (jsx(SectionTreeItem, { scene: scene, section: item, isFiltering: !!itemsFilter, expandAll: () => expandAll(item), collapseAll: () => collapseAll(item) }, item.sectionName));
+                            return (jsx(SectionTreeItem, { scene: scene, section: item, isFiltering: !!itemsFilter, commandProviders: sectionCommandProviders, expandAll: () => expandAll(item), collapseAll: () => collapseAll(item) }, item.sectionName));
                         }
                         else {
-                            return (jsx(EntityTreeItem, { scene: scene, entityItem: item, isSelected: selectedEntity === item.entity, select: () => setSelectedEntity?.(item.entity), isFiltering: !!itemsFilter, commandProviders: commandProviders, expandAll: () => expandAll(item), collapseAll: () => collapseAll(item) }, item.entity.uniqueId));
+                            return (jsx(EntityTreeItem, { scene: scene, entityItem: item, isSelected: selectedEntity === item.entity, select: () => setSelectedEntity?.(item.entity), isFiltering: !!itemsFilter, commandProviders: entityCommandProviders, expandAll: () => expandAll(item), collapseAll: () => collapseAll(item) }, item.entity.uniqueId));
                         }
                     } }) })] }));
 };
@@ -2807,7 +2821,8 @@ const SceneExplorerServiceDefinition = {
     consumes: [SceneContextIdentity, ShellServiceIdentity, SelectionServiceIdentity],
     factory: (sceneContext, shellService, selectionService) => {
         const sectionsCollection = new ObservableCollection();
-        const commandsCollection = new ObservableCollection();
+        const entityCommandsCollection = new ObservableCollection();
+        const sectionCommandsCollection = new ObservableCollection();
         const registration = shellService.addSidePane({
             key: "Scene Explorer",
             title: "Scene Explorer",
@@ -2817,15 +2832,17 @@ const SceneExplorerServiceDefinition = {
             suppressTeachingMoment: true,
             content: () => {
                 const sections = useOrderedObservableCollection(sectionsCollection);
-                const commands = useOrderedObservableCollection(commandsCollection);
+                const entityCommands = useOrderedObservableCollection(entityCommandsCollection);
+                const sectionCommands = useOrderedObservableCollection(sectionCommandsCollection);
                 const scene = useObservableState(() => sceneContext.currentScene, sceneContext.currentSceneObservable);
                 const entity = useObservableState(() => selectionService.selectedEntity, selectionService.onSelectedEntityChanged);
-                return (jsx(Fragment, { children: scene && (jsx(SceneExplorer, { sections: sections, commandProviders: commands, scene: scene, selectedEntity: entity, setSelectedEntity: (entity) => (selectionService.selectedEntity = entity) })) }));
+                return (jsx(Fragment, { children: scene && (jsx(SceneExplorer, { sections: sections, entityCommandProviders: entityCommands, sectionCommandProviders: sectionCommands, scene: scene, selectedEntity: entity, setSelectedEntity: (entity) => (selectionService.selectedEntity = entity) })) }));
             },
         });
         return {
             addSection: (section) => sectionsCollection.add(section),
-            addCommand: (command) => commandsCollection.add(command),
+            addEntityCommand: (command) => entityCommandsCollection.add(command),
+            addSectionCommand: (command) => sectionCommandsCollection.add(command),
             dispose: () => registration.dispose(),
         };
     },
@@ -3506,7 +3523,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-BGS52fVw.js'),
+        getExtensionModuleAsync: async () => await import('./exportService-B2rCoOC_.js'),
     },
     {
         name: "Capture Tools",
@@ -3514,7 +3531,7 @@ const DefaultInspectorExtensionFeed = new BuiltInsExtensionFeed("Inspector", [
         keywords: ["capture", "screenshot", "gif", "video", "tools"],
         ...BabylonWebResources,
         author: { name: "Alex Chuber", forumUserName: "alexchuber" },
-        getExtensionModuleAsync: async () => await import('./captureService-DlzvwY4k.js'),
+        getExtensionModuleAsync: async () => await import('./captureService-CS2uW-yq.js'),
     },
     {
         name: "Import Tools",
@@ -3522,7 +3539,7 @@ const DefaultInspectorExtensionFeed = new BuiltInsExtensionFeed("Inspector", [
         keywords: ["import", "tools"],
         ...BabylonWebResources,
         author: { name: "Alex Chuber", forumUserName: "alexchuber" },
-        getExtensionModuleAsync: async () => await import('./importService-nyYXNIoV.js'),
+        getExtensionModuleAsync: async () => await import('./importService-BSl7VIci.js'),
     },
 ]);
 
@@ -4630,7 +4647,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-Ch91ejP8.js');
+                    const { ExtensionListServiceDefinition } = await import('./extensionsListService-CyDEpF1t.js');
                     await serviceContainer.addServiceAsync(ExtensionListServiceDefinition);
                 }
                 // Register the theme selector service (for selecting the theme) if theming is configured.
@@ -8374,7 +8391,7 @@ const AnimationGroupExplorerServiceDefinition = {
             getEntityAddedObservables: () => [scene.onNewAnimationGroupAddedObservable],
             getEntityRemovedObservables: () => [scene.onAnimationGroupRemovedObservable],
         });
-        const animationPlayPauseCommandRegistration = sceneExplorerService.addCommand({
+        const animationPlayPauseCommandRegistration = sceneExplorerService.addEntityCommand({
             predicate: (entity) => entity instanceof AnimationGroup,
             order: 900 /* DefaultCommandsOrder.AnimationGroupPlay */,
             getCommand: (animationGroup) => {
@@ -8512,7 +8529,7 @@ const FrameGraphExplorerServiceDefinition = {
             return undefined;
         }
         const sectionRegistration = sceneExplorerService.addSection({
-            displayName: "Frame Graph",
+            displayName: "Frame Graphs",
             order: 1200 /* DefaultSectionsOrder.FrameGraphs */,
             getRootEntities: () => scene.frameGraphs,
             getEntityDisplayInfo: (frameGraph) => {
@@ -8537,7 +8554,7 @@ const FrameGraphExplorerServiceDefinition = {
             getEntityAddedObservables: () => [scene.onNewFrameGraphAddedObservable],
             getEntityRemovedObservables: () => [scene.onFrameGraphRemovedObservable],
         });
-        const activeFrameGraphCommandRegistration = sceneExplorerService.addCommand({
+        const activeFrameGraphCommandRegistration = sceneExplorerService.addEntityCommand({
             predicate: (entity) => entity instanceof FrameGraph,
             order: 900 /* DefaultCommandsOrder.FrameGraphPlay */,
             getCommand: (frameGraph) => {
@@ -8713,7 +8730,7 @@ const NodeExplorerServiceDefinition = {
             ],
             getEntityMovedObservables: () => [nodeMovedObservable],
         });
-        const abstractMeshBoundingBoxCommandRegistration = sceneExplorerService.addCommand({
+        const abstractMeshBoundingBoxCommandRegistration = sceneExplorerService.addEntityCommand({
             predicate: (entity) => entity instanceof AbstractMesh && entity.getTotalVertices() > 0,
             order: 1000 /* DefaultCommandsOrder.MeshBoundingBox */,
             getCommand: (mesh) => {
@@ -8741,7 +8758,7 @@ const NodeExplorerServiceDefinition = {
                 };
             },
         });
-        const abstractMeshVisibilityCommandRegistration = sceneExplorerService.addCommand({
+        const abstractMeshVisibilityCommandRegistration = sceneExplorerService.addEntityCommand({
             predicate: (entity) => entity instanceof AbstractMesh && entity.getTotalVertices() > 0,
             order: 1100 /* DefaultCommandsOrder.MeshVisibility */,
             getCommand: (mesh) => {
@@ -8769,7 +8786,7 @@ const NodeExplorerServiceDefinition = {
                 };
             },
         });
-        const activeCameraCommandRegistration = sceneExplorerService.addCommand({
+        const activeCameraCommandRegistration = sceneExplorerService.addEntityCommand({
             predicate: (entity) => entity instanceof Camera,
             order: 700 /* DefaultCommandsOrder.CameraActive */,
             getCommand: (camera) => {
@@ -8801,7 +8818,7 @@ const NodeExplorerServiceDefinition = {
             },
         });
         function addGizmoCommand(nodeClass, getGizmoRef) {
-            return sceneExplorerService.addCommand({
+            return sceneExplorerService.addEntityCommand({
                 predicate: (entity) => entity instanceof nodeClass,
                 order: 800 /* DefaultCommandsOrder.GizmoActive */,
                 getCommand: (node) => {
@@ -8840,7 +8857,7 @@ const NodeExplorerServiceDefinition = {
             });
         }
         const cameraGizmoCommandRegistration = addGizmoCommand(Camera, gizmoService.getCameraGizmo.bind(gizmoService));
-        const lightEnabledCommandRegistration = sceneExplorerService.addCommand({
+        const lightEnabledCommandRegistration = sceneExplorerService.addEntityCommand({
             predicate: (entity) => entity instanceof Light,
             order: 700 /* DefaultCommandsOrder.LightActive */,
             getCommand: (light) => {
@@ -9075,7 +9092,7 @@ const SpriteManagerExplorerServiceDefinition = {
             getEntityAddedObservables: () => [scene.onNewSpriteManagerAddedObservable],
             getEntityRemovedObservables: () => [scene.onSpriteManagerRemovedObservable],
         });
-        const spritePlayStopCommandRegistration = sceneExplorerService.addCommand({
+        const spritePlayStopCommandRegistration = sceneExplorerService.addEntityCommand({
             predicate: (entity) => entity instanceof Sprite,
             order: 600 /* DefaultCommandsOrder.SpritePlay */,
             getCommand: (sprite) => {
@@ -9497,7 +9514,7 @@ function ConvertOptions(v1Options) {
             }
         })();
         const initialTabServiceDefinition = {
-            friendlyName: "Initial Tab Selector",
+            friendlyName: "Initial Tab Selector (Backward Compatibility)",
             consumes: [ShellServiceIdentity],
             factory: (shellService) => {
                 // Just find and select the requested initial tab.
@@ -9509,7 +9526,7 @@ function ConvertOptions(v1Options) {
     if (v1Options.additionalNodes && v1Options.additionalNodes.length > 0) {
         const { additionalNodes } = v1Options;
         const additionalNodesServiceDefinition = {
-            friendlyName: "Additional Nodes",
+            friendlyName: "Additional Nodes (Backward Compatibility)",
             consumes: [SceneExplorerServiceIdentity],
             factory: (sceneExplorerService) => {
                 const sceneExplorerSectionRegistrations = additionalNodes.map((node) => sceneExplorerService.addSection({
@@ -9559,10 +9576,10 @@ function ConvertOptions(v1Options) {
     if (v1Options.explorerExtensibility && v1Options.explorerExtensibility.length > 0) {
         const { explorerExtensibility } = v1Options;
         const explorerExtensibilityServiceDefinition = {
-            friendlyName: "Explorer Extensibility",
+            friendlyName: "Explorer Extensibility (Backward Compatibility)",
             consumes: [SceneExplorerServiceIdentity],
             factory: (sceneExplorerService) => {
-                const sceneExplorerCommandRegistrations = explorerExtensibility.flatMap((command) => command.entries.map((entry) => sceneExplorerService.addCommand({
+                const sceneExplorerCommandRegistrations = explorerExtensibility.flatMap((command) => command.entries.map((entry) => sceneExplorerService.addEntityCommand({
                     predicate: (entity) => command.predicate(entity),
                     getCommand: (entity) => {
                         return {
@@ -9582,6 +9599,43 @@ function ConvertOptions(v1Options) {
         };
         serviceDefinitions.push(explorerExtensibilityServiceDefinition);
     }
+    if (v1Options.contextMenu) {
+        const { contextMenu } = v1Options;
+        const sections = Object.entries(contextMenu);
+        if (sections.length > 0) {
+            const legacySectionMapping = {
+                pipeline: "Rendering Pipelines",
+                node: "Nodes",
+                materials: "Materials",
+                spriteManagers: "Sprite Managers",
+                particleSystems: "Particle Systems",
+                frameGraphs: "Frame Graphs",
+            };
+            const sectionContextMenuServiceDefinition = {
+                friendlyName: "Context Menu (Backward Compatibility)",
+                consumes: [SceneExplorerServiceIdentity],
+                factory: (sceneExplorerService) => {
+                    const sceneExlplorerCommandRegistrations = sections.flatMap(([sectionName, entries]) => entries.map((entry) => sceneExplorerService.addSectionCommand({
+                        predicate: (section) => legacySectionMapping[sectionName] === section,
+                        getCommand: () => {
+                            return {
+                                displayName: entry.label,
+                                type: "action",
+                                mode: "contextMenu",
+                                execute: () => entry.action(),
+                            };
+                        },
+                    })));
+                    return {
+                        dispose: () => {
+                            sceneExlplorerCommandRegistrations.forEach((registration) => registration.dispose());
+                        },
+                    };
+                },
+            };
+            serviceDefinitions.push(sectionContextMenuServiceDefinition);
+        }
+    }
     const v2Options = {
         containerElement: v1Options.globalRoot,
         layoutMode: v1Options.overlay ? "overlay" : "inline",
@@ -9918,4 +9972,4 @@ const TextAreaPropertyLine = (props) => {
 };
 
 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-ByzP7-y_.js.map
+//# sourceMappingURL=index-DE0QdD6v.js.map