@babylonjs/inspector 8.50.2 → 8.50.4

package/lib/{index-xdZE0cq5.js → index-DNdlSwwf.js}

@@ -145,6 +145,7 @@ import { ImportAnimationsAsync, SceneLoader } from '@babylonjs/core/Loading/scen
 import { FilesInput } from '@babylonjs/core/Misc/filesInput.js';
 import { GLTFLoaderAnimationStartMode, GLTFLoaderCoordinateSystemMode, GLTFLoaderDefaultOptions } from '@babylonjs/loaders/glTF/glTFFileLoader.js';
 import { GLTFValidation } from '@babylonjs/loaders/glTF/glTFValidation.js';
+import { SelectionOutlineLayer } from '@babylonjs/core/Layers/selectionOutlineLayer.js';
 import { EngineStore } from '@babylonjs/core/Engines/engineStore.js';
 import { DebugLayer } from '@babylonjs/core/Debug/debugLayer.js';
 import { Lazy } from '@babylonjs/core/Misc/lazy.js';
@@ -1411,6 +1412,11 @@ const AccordionSectionItem = (props) => {
     const accordionCtx = useContext(AccordionContext);
     const itemState = useAccordionSectionItemState(props);
     const [ctrlMode, setCtrlMode] = useState(false);
+    const ctrlPressed = useKeyState("Control");
+    const [mouseOver, setMouseOver] = useState(false);
+    useEffect(() => {
+        setCtrlMode(ctrlPressed && mouseOver);
+    }, [ctrlPressed, mouseOver]);
     // If static item or no context, just render children
     if (staticItem || !accordionCtx || !itemState) {
         return jsx(Fragment, { children: children });
@@ -1427,11 +1433,6 @@ const AccordionSectionItem = (props) => {
     }
     const pinnedContainer = isPinned ? pinnedContainerRef.current : null;
     const showControls = inEditMode || ctrlMode;
-    const ctrlPressed = useKeyState("Control");
-    const [mouseOver, setMouseOver] = useState(false);
-    useEffect(() => {
-        setCtrlMode(ctrlPressed && mouseOver);
-    }, [ctrlPressed, mouseOver]);
     const itemElement = (jsxs("div", { className: classes.sectionItemContainer, style: isPinned ? { order: pinnedIndex } : undefined, onMouseMove: () => setMouseOver(true), onMouseLeave: () => setMouseOver(false), children: [showControls && (jsxs("div", { className: classes.sectionItemButtons, children: [features.hiding && (jsx(Button, { title: isHidden ? "Unhide" : "Hide", icon: isHidden ? EyeOffRegular : EyeFilled, appearance: "transparent", onClick: actions.toggleHidden })), features.pinning && (jsxs(Fragment, { children: [jsx(Button, { title: isPinned ? "Unpin" : "Pin", icon: isPinned ? PinFilled : PinRegular, appearance: "transparent", onClick: actions.togglePinned }), isPinned && (jsx(Button, { title: "Move up", icon: ArrowCircleUpRegular, appearance: "transparent", disabled: pinnedIndex === 0, onClick: actions.movePinnedUp }))] }))] })), jsx(AccordionItemDepthContext.Provider, { value: true, children: children })] }));
     return pinnedContainer ? jsx(Portal, { mountNode: pinnedContainer, children: itemElement }) : itemElement;
 };
@@ -2080,24 +2081,30 @@ const BabylonRamp = {
     160: "#C6D8FF",
 };
 /* eslint-enable @typescript-eslint/naming-convention */
+const BaseLightTheme = createLightTheme(BabylonRamp);
 const LightTheme = {
-    ...createLightTheme(BabylonRamp),
+    ...BaseLightTheme,
     // Reduce the max contrast between foreground and background by just replacing the most intense foreground color with the second most intense one.
-    colorNeutralForeground1: tokens.colorNeutralForeground2,
+    colorNeutralForeground1: BaseLightTheme.colorNeutralForeground2,
 };
+const BaseDarkTheme = createDarkTheme(BabylonRamp);
 const DarkTheme = {
-    ...createDarkTheme(BabylonRamp),
+    ...BaseDarkTheme,
     // Reduce the max contrast between foreground and background by just replacing the most intense foreground color with the second most intense one.
-    colorNeutralForeground1: tokens.colorNeutralForeground2,
+    colorNeutralForeground1: BaseDarkTheme.colorNeutralForeground2,
 };
 
+function useTheme(invert = false) {
+    const { isDarkMode } = useThemeMode();
+    return isDarkMode !== invert ? DarkTheme : LightTheme;
+}
 const Theme = (props) => {
     // NOTE: We do not want to applyStylesToPortals by default. If makes classes flow into portals
     // (like popovers), and if those styles do things like disable overflow, they can completely
     // break any UI within the portal. Therefore, default to false.
     const { invert = false, applyStylesToPortals = false, ...rest } = props;
-    const { isDarkMode } = useThemeMode();
-    return (jsx(FluentProvider, { theme: isDarkMode !== invert ? DarkTheme : LightTheme, applyStylesToPortals: applyStylesToPortals, ...rest, children: props.children }));
+    const theme = useTheme(invert);
+    return (jsx(FluentProvider, { theme: theme, applyStylesToPortals: applyStylesToPortals, ...rest, children: props.children }));
 };
 
 const useStyles$O = makeStyles({
@@ -2857,11 +2864,11 @@ const SidePaneTab = (props) => {
 // This hook provides a side pane container and the tab list.
 // In "compact" mode, the tab list is integrated into the pane itself.
 // In "full" mode, the returned tab list is later injected into the toolbar.
-function usePane(location, defaultWidth, minWidth, sidePanes, onSelectSidePane, dockOperations, toolbarMode, topBarItems, bottomBarItems) {
+function usePane(location, defaultWidth, minWidth, sidePanes, onSelectSidePane, dockOperations, toolbarMode, topBarItems, bottomBarItems, initialCollapsed) {
     const classes = useStyles$M();
     const [topSelectedTab, setTopSelectedTab] = useState();
     const [bottomSelectedTab, setBottomSelectedTab] = useState();
-    const [collapsed, setCollapsed] = useState(false);
+    const [collapsed, setCollapsed] = useState(initialCollapsed);
     const childWindow = useRef(null);
     const [isChildWindowOpen, setIsChildWindowOpen] = useState(false);
     const paneContainerRef = useRef(null);
@@ -3024,9 +3031,10 @@ function usePane(location, defaultWidth, minWidth, sidePanes, onSelectSidePane,
     const pane = useMemo(() => {
         return (jsxs(Fragment, { children: [!isChildWindowOpen && (jsx("div", { ref: paneContainerRef, className: classes.paneContainer, children: (topPanes.length > 0 || bottomPanes.length > 0) && (jsxs("div", { className: `${classes.pane} ${location === "left" ? classes.paneLeft : classes.paneRight}`, children: [jsx(Collapse, { orientation: "horizontal", visible: !collapsed, children: jsx("div", { ref: paneHorizontalResizeElementRef, className: classes.paneContainer, style: { width: `clamp(${minWidth}px, calc(${defaultWidth}px + var(${paneWidthAdjustCSSVar}, 0px)), 1000px)` }, children: corePane }) }), jsx("div", { ref: paneHorizontalResizeHandleRef, className: `${classes.resizer} ${location === "left" ? classes.resizerLeft : classes.resizerRight}`, style: { pointerEvents: `${collapsed ? "none" : "auto"}` } })] })) })), jsx(ChildWindow, { imperativeRef: childWindow, onOpenChange: (isOpen) => setIsChildWindowOpen(isOpen), children: corePane })] }));
     }, [collapsed, corePane]);
-    return [topPaneTabList, pane, collapsed, setCollapsed, isChildWindowOpen, setUndocked];
+    const hasPanes = topPanes.length > 0 || bottomPanes.length > 0;
+    return [topPaneTabList, pane, collapsed, setCollapsed, isChildWindowOpen, setUndocked, hasPanes];
 }
-function MakeShellServiceDefinition({ leftPaneDefaultWidth = 350, leftPaneMinWidth = 350, rightPaneDefaultWidth = 350, rightPaneMinWidth = 350, toolbarMode = "full", sidePaneRemapper = undefined, } = {}) {
+function MakeShellServiceDefinition({ leftPaneDefaultWidth = 350, leftPaneMinWidth = 350, rightPaneDefaultWidth = 350, rightPaneMinWidth = 350, leftPaneDefaultCollapsed = false, rightPaneDefaultCollapsed = false, toolbarMode = "full", sidePaneRemapper = undefined, } = {}) {
     return {
         friendlyName: "MainView",
         produces: [ShellServiceIdentity, RootComponentServiceIdentity],
@@ -3036,17 +3044,24 @@ function MakeShellServiceDefinition({ leftPaneDefaultWidth = 350, leftPaneMinWid
             const centralContentCollection = new ObservableCollection();
             const onSelectSidePane = new Observable(undefined, true);
             const onDockChanged = new Observable(undefined, true);
+            const onCollapseChanged = new Observable();
             const leftSidePaneContainerState = {
                 isPresent: false,
                 isDocked: true,
                 dock: () => onDockChanged.notifyObservers({ location: "left", dock: true }),
                 undock: () => onDockChanged.notifyObservers({ location: "left", dock: false }),
+                isCollapsed: leftPaneDefaultCollapsed,
+                collapse: () => onCollapseChanged.notifyObservers({ location: "left", collapsed: true }),
+                expand: () => onCollapseChanged.notifyObservers({ location: "left", collapsed: false }),
             };
             const rightSidePaneContainerState = {
                 isPresent: false,
                 isDocked: true,
                 dock: () => onDockChanged.notifyObservers({ location: "right", dock: true }),
                 undock: () => onDockChanged.notifyObservers({ location: "right", dock: false }),
+                isCollapsed: rightPaneDefaultCollapsed,
+                collapse: () => onCollapseChanged.notifyObservers({ location: "right", collapsed: true }),
+                expand: () => onCollapseChanged.notifyObservers({ location: "right", collapsed: false }),
             };
             const rootComponent = () => {
                 const classes = useStyles$M();
@@ -3181,16 +3196,24 @@ function MakeShellServiceDefinition({ leftPaneDefaultWidth = 350, leftPaneMinWid
                 const bottomBarLeftItems = useMemo(() => bottomToolBarItems.filter((entry) => coerceToolBarItemHorizontalLocation(entry) === "left"), [bottomToolBarItems, coerceToolBarItemHorizontalLocation]);
                 const bottomBarRightItems = useMemo(() => bottomToolBarItems.filter((entry) => coerceToolBarItemHorizontalLocation(entry) === "right"), [bottomToolBarItems, coerceToolBarItemHorizontalLocation]);
                 const centralContents = useOrderedObservableCollection(centralContentCollection);
-                const [leftPaneTabList, leftPane, leftPaneCollapsed, setLeftPaneCollapsed, leftPaneUndocked, setLeftPaneUndocked] = usePane("left", leftPaneDefaultWidth, leftPaneMinWidth, coercedSidePanes, onSelectSidePane, sidePaneDockOperations, toolbarMode, topBarLeftItems, bottomBarLeftItems);
+                const [leftPaneTabList, leftPane, leftPaneCollapsed, setLeftPaneCollapsed, leftPaneUndocked, setLeftPaneUndocked, leftPaneHasPanes] = usePane("left", leftPaneDefaultWidth, leftPaneMinWidth, coercedSidePanes, onSelectSidePane, sidePaneDockOperations, toolbarMode, topBarLeftItems, bottomBarLeftItems, leftPaneDefaultCollapsed);
                 useEffect(() => {
                     // Propagate shorter lived React component state out to longer lived service state.
                     leftSidePaneContainerState.isDocked = !leftPaneUndocked;
                 }, [leftPaneUndocked]);
-                const [rightPaneTabList, rightPane, rightPaneCollapsed, setRightPaneCollapsed, rightPaneUndocked, setRightPaneUndocked] = usePane("right", rightPaneDefaultWidth, rightPaneMinWidth, coercedSidePanes, onSelectSidePane, sidePaneDockOperations, toolbarMode, topBarRightItems, bottomBarRightItems);
+                useEffect(() => {
+                    // Propagate shorter lived React component state out to longer lived service state.
+                    leftSidePaneContainerState.isCollapsed = leftPaneCollapsed;
+                }, [leftPaneCollapsed]);
+                const [rightPaneTabList, rightPane, rightPaneCollapsed, setRightPaneCollapsed, rightPaneUndocked, setRightPaneUndocked, rightPaneHasPanes] = usePane("right", rightPaneDefaultWidth, rightPaneMinWidth, coercedSidePanes, onSelectSidePane, sidePaneDockOperations, toolbarMode, topBarRightItems, bottomBarRightItems, rightPaneDefaultCollapsed);
                 useEffect(() => {
                     // Propagate shorter lived React component state out to longer lived service state.
                     rightSidePaneContainerState.isDocked = !rightPaneUndocked;
                 }, [rightPaneUndocked]);
+                useEffect(() => {
+                    // Propagate shorter lived React component state out to longer lived service state.
+                    rightSidePaneContainerState.isCollapsed = rightPaneCollapsed;
+                }, [rightPaneCollapsed]);
                 useEffect(() => {
                     // If at the service level dock state change is requested, propagate to the React component state.
                     const observer = onDockChanged.add(({ location, dock }) => {
@@ -3207,7 +3230,23 @@ function MakeShellServiceDefinition({ leftPaneDefaultWidth = 350, leftPaneMinWid
                         rightSidePaneContainerState.isDocked = true;
                     };
                 }, [setLeftPaneUndocked, setRightPaneUndocked]);
-                return (jsxs("div", { className: classes.mainView, children: [toolbarMode === "full" && (jsx(Fragment, { children: jsxs("div", { className: classes.barDiv, children: [leftPaneTabList, jsx(Toolbar, { location: "top", components: topToolBarItems }), rightPaneTabList] }) })), jsxs("div", { className: classes.verticallyCentralContent, children: [leftPane, jsxs("div", { className: classes.centralContent, children: [centralContents.map((entry) => (jsx(ErrorBoundary, { name: entry.key, children: jsx(entry.component, {}) }, entry.key))), toolbarMode === "compact" && (jsxs(Fragment, { children: [jsx(Fade, { visible: leftPaneCollapsed, delay: 50, duration: 100, unmountOnExit: true, children: jsx("div", { className: mergeClasses(classes.expandButtonContainer, classes.expandButtonContainerLeft), children: jsx(Tooltip, { content: "Show Side Pane", children: jsx(Button$1, { className: classes.expandButton, icon: jsx(PanelLeftExpandRegular, {}), onClick: () => setLeftPaneCollapsed(false) }) }) }) }), jsx(Fade, { visible: rightPaneCollapsed, delay: 50, duration: 100, unmountOnExit: true, children: jsx("div", { className: mergeClasses(classes.expandButtonContainer, classes.expandButtonContainerRight), children: jsx(Tooltip, { content: "Show Side Pane", children: jsx(Button$1, { className: classes.expandButton, icon: jsx(PanelRightExpandRegular, {}), onClick: () => setRightPaneCollapsed(false) }) }) }) })] }))] }), rightPane] }), toolbarMode === "full" && (jsx(Fragment, { children: jsx("div", { className: classes.barDiv, children: jsx(Toolbar, { location: "bottom", components: bottomToolBarItems }) }) }))] }));
+                useEffect(() => {
+                    // If at the service level collapse state change is requested, propagate to the React component state.
+                    const observer = onCollapseChanged.add(({ location, collapsed }) => {
+                        if (location === "left") {
+                            setLeftPaneCollapsed(collapsed);
+                        }
+                        else {
+                            setRightPaneCollapsed(collapsed);
+                        }
+                    });
+                    return () => {
+                        observer.remove();
+                        leftSidePaneContainerState.isCollapsed = false;
+                        rightSidePaneContainerState.isCollapsed = false;
+                    };
+                }, [setLeftPaneCollapsed, setRightPaneCollapsed]);
+                return (jsxs("div", { className: classes.mainView, children: [toolbarMode === "full" && (jsx(Fragment, { children: jsxs("div", { className: classes.barDiv, children: [leftPaneTabList, jsx(Toolbar, { location: "top", components: topToolBarItems }), rightPaneTabList] }) })), jsxs("div", { className: classes.verticallyCentralContent, children: [leftPane, jsxs("div", { className: classes.centralContent, children: [centralContents.map((entry) => (jsx(ErrorBoundary, { name: entry.key, children: jsx(entry.component, {}) }, entry.key))), toolbarMode === "compact" && (jsxs(Fragment, { children: [jsx(Fade, { visible: leftPaneCollapsed && leftPaneHasPanes, delay: 50, duration: 100, unmountOnExit: true, children: jsx("div", { className: mergeClasses(classes.expandButtonContainer, classes.expandButtonContainerLeft), children: jsx(Tooltip, { content: "Show Side Pane", children: jsx(Button$1, { className: classes.expandButton, icon: jsx(PanelLeftExpandRegular, {}), onClick: () => setLeftPaneCollapsed(false) }) }) }) }), jsx(Fade, { visible: rightPaneCollapsed && rightPaneHasPanes, delay: 50, duration: 100, unmountOnExit: true, children: jsx("div", { className: mergeClasses(classes.expandButtonContainer, classes.expandButtonContainerRight), children: jsx(Tooltip, { content: "Show Side Pane", children: jsx(Button$1, { className: classes.expandButton, icon: jsx(PanelRightExpandRegular, {}), onClick: () => setRightPaneCollapsed(false) }) }) }) })] }))] }), rightPane] }), toolbarMode === "full" && (jsx(Fragment, { children: jsx("div", { className: classes.barDiv, children: jsx(Toolbar, { location: "bottom", components: bottomToolBarItems }) }) }))] }));
             };
             rootComponent.displayName = "Shell Service Root";
             return {
@@ -4495,6 +4534,7 @@ const SettingsServiceDefinition = {
         let useEuler = DataStorage.ReadBoolean("Babylon/Settings/UseEuler", false);
         let ignoreBackfacesForPicking = DataStorage.ReadBoolean("Babylon/Settings/IgnoreBackfacesForPicking", false);
         let showPropertiesOnEntitySelection = DataStorage.ReadBoolean("Babylon/Settings/ShowPropertiesOnEntitySelection", true);
+        let highlightSelectedEntity = DataStorage.ReadBoolean("Babylon/Settings/HighlightSelectedEntity", true);
         const settings = {
             get useDegrees() {
                 return useDegrees;
@@ -4540,6 +4580,17 @@ const SettingsServiceDefinition = {
                 DataStorage.WriteBoolean("Babylon/Settings/ShowPropertiesOnEntitySelection", showPropertiesOnEntitySelection);
                 this.settingsChangedObservable.notifyObservers(this);
             },
+            get highlightSelectedEntity() {
+                return highlightSelectedEntity;
+            },
+            set highlightSelectedEntity(value) {
+                if (highlightSelectedEntity === value) {
+                    return; // No change, no need to notify
+                }
+                highlightSelectedEntity = value;
+                DataStorage.WriteBoolean("Babylon/Settings/HighlightSelectedEntity", highlightSelectedEntity);
+                this.settingsChangedObservable.notifyObservers(this);
+            },
             settingsChangedObservable: new Observable(),
             addSection: (section) => sectionsCollection.add(section),
             addSectionContent: (content) => sectionContentCollection.add(content),
@@ -4560,19 +4611,16 @@ const SettingsServiceDefinition = {
                 const [compactMode, setCompactMode] = useCompactMode();
                 const [disableCopy, setDisableCopy] = useDisableCopy();
                 const [, , resetSidePaneLayout] = useSidePaneDockOverrides();
-                return (jsx(Fragment, { children: scene && (jsx(ExtensibleAccordion, { sections: sections, sectionContent: sectionContent, context: scene, children: jsxs(AccordionSection, { title: "UI", children: [jsx(SwitchPropertyLine, { label: "Compact Mode", description: "Use a more compact UI with less spacing.", value: compactMode, onChange: (checked) => {
-                                        setCompactMode(checked);
-                                    } }), jsx(SwitchPropertyLine, { label: "Use Degrees", description: "Using degrees instead of radians.", value: settings.useDegrees, onChange: (checked) => {
-                                        settings.useDegrees = checked;
-                                    } }), jsx(SwitchPropertyLine, { label: "Only Show Euler Angles", description: "Only show Euler angles in rotation properties, rather than quaternions.", value: settings.useEuler, onChange: (checked) => {
-                                        settings.useEuler = checked;
-                                    } }), jsx(SwitchPropertyLine, { label: "Ignore Backfaces for Picking", description: "Ignore backfaces when picking.", value: settings.ignoreBackfacesForPicking, onChange: (checked) => {
-                                        settings.ignoreBackfacesForPicking = checked;
-                                    } }), jsx(SwitchPropertyLine, { label: "Show Properties on Selection", description: "Shows the Properties pane when an entity is selected.", value: settings.showPropertiesOnEntitySelection, onChange: (checked) => {
-                                        settings.showPropertiesOnEntitySelection = checked;
-                                    } }), jsx(SwitchPropertyLine, { label: "Disable Copy Button", description: "Disables the copy to clipboard button on property lines. You can still Ctrl+Click on the label to copy.", value: disableCopy, onChange: (checked) => {
-                                        setDisableCopy(checked);
-                                    } }), jsx(ButtonLine, { label: "Reset Layout", onClick: resetSidePaneLayout })] }) })) }));
+                const useDegrees = useProperty(settings, "useDegrees");
+                const useEuler = useProperty(settings, "useEuler");
+                const ignoreBackfacesForPicking = useProperty(settings, "ignoreBackfacesForPicking");
+                const showPropertiesOnEntitySelection = useProperty(settings, "showPropertiesOnEntitySelection");
+                const highlightSelectedEntity = useProperty(settings, "highlightSelectedEntity");
+                return (jsx(Fragment, { children: scene && (jsxs(ExtensibleAccordion, { sections: sections, sectionContent: sectionContent, context: scene, children: [jsxs(AccordionSection, { title: "UI", children: [jsx(SwitchPropertyLine, { label: "Compact Mode", description: "Use a more compact UI with less spacing.", value: compactMode, onChange: (checked) => {
+                                            setCompactMode(checked);
+                                        } }), jsx(SwitchPropertyLine, { label: "Use Degrees", description: "Using degrees instead of radians.", value: useDegrees, onChange: (checked) => (settings.useDegrees = checked) }), jsx(SwitchPropertyLine, { label: "Only Show Euler Angles", description: "Only show Euler angles in rotation properties, rather than quaternions.", value: useEuler, onChange: (checked) => (settings.useEuler = checked) }), jsx(SwitchPropertyLine, { label: "Ignore Backfaces for Picking", description: "Ignore backfaces when picking.", value: ignoreBackfacesForPicking, onChange: (checked) => (settings.ignoreBackfacesForPicking = checked) }), jsx(SwitchPropertyLine, { label: "Show Properties on Selection", description: "Shows the Properties pane when an entity is selected.", value: showPropertiesOnEntitySelection, onChange: (checked) => (settings.showPropertiesOnEntitySelection = checked) }), jsx(SwitchPropertyLine, { label: "Disable Copy Button", description: "Disables the copy to clipboard button on property lines. You can still Ctrl+Click on the label to copy.", value: disableCopy, onChange: (checked) => {
+                                            setDisableCopy(checked);
+                                        } }), jsx(ButtonLine, { label: "Reset Layout", onClick: resetSidePaneLayout })] }), jsx(AccordionSection, { title: "Scene", children: jsx(SwitchPropertyLine, { label: "Highlight Selected Entity", description: "Highlight the selected mesh in the scene. Enabling this setting may impact rendering performance.", value: highlightSelectedEntity, onChange: (value) => (settings.highlightSelectedEntity = value) }) })] })) }));
             },
         });
         settings.dispose = () => registration.dispose();
@@ -6683,7 +6731,7 @@ const DefaultInspectorExtensionFeed = new BuiltInsExtensionFeed("Inspector", [
         keywords: ["creation", "tools"],
         ...BabylonWebResources,
         author: { name: "Babylon.js", forumUserName: "" },
-        getExtensionModuleAsync: async () => await import('./quickCreateToolsService-BhUIP4Xi.js'),
+        getExtensionModuleAsync: async () => await import('./quickCreateToolsService-87Wg6d7G.js'),
     },
     {
         name: "Reflector",
@@ -6691,7 +6739,7 @@ const DefaultInspectorExtensionFeed = new BuiltInsExtensionFeed("Inspector", [
         keywords: ["reflector", "bridge", "sync", "sandbox", "tools"],
         ...BabylonWebResources,
         author: { name: "Babylon.js", forumUserName: "" },
-        getExtensionModuleAsync: async () => await import('./reflectorService-C9p7d-YK.js'),
+        getExtensionModuleAsync: async () => await import('./reflectorService-CUscktdu.js'),
     },
 ]);
 
@@ -7458,6 +7506,8 @@ const ThemeSelectorServiceDefinition = {
     },
 };
 
+const ThemeServiceIdentity = Symbol("ThemeService");
+
 const useStyles$D = makeStyles({
     app: {
         colorScheme: "light dark",
@@ -7494,6 +7544,8 @@ function MakeModularTool(options) {
     if (themeMode) {
         SetThemeMode(themeMode);
     }
+    let theme;
+    const themeChangedObservable = new Observable();
     const modularToolRootComponent = () => {
         const classes = useStyles$D();
         const [extensionManagerContext, setExtensionManagerContext] = useState();
@@ -7501,6 +7553,10 @@ function MakeModularTool(options) {
         const [requiredExtensionsDeferred, setRequiredExtensionsDeferred] = useState();
         const [extensionInstallError, setExtensionInstallError] = useState();
         const [rootComponent, setRootComponent] = useState();
+        theme = useTheme();
+        useEffect(() => {
+            themeChangedObservable.notifyObservers();
+        }, [theme]);
         // This is the main async initialization.
         useEffect(() => {
             const initializeExtensionManagerAsync = async () => {
@@ -7519,9 +7575,23 @@ function MakeModularTool(options) {
                         };
                     },
                 });
+                // Register a service that exposes the raw theme to other services outside the React tree.
+                // React components can access the raw theme via the useTheme hook, or theme tokens via Fluent's tokens object.
+                await serviceContainer.addServiceAsync({
+                    friendlyName: "Theme Service",
+                    produces: [ThemeServiceIdentity],
+                    factory: () => {
+                        return {
+                            get theme() {
+                                return theme;
+                            },
+                            onChanged: themeChangedObservable,
+                        };
+                    },
+                });
                 // Register the extension list service (for browsing/installing extensions) if extension feeds are provided.
                 if (extensionFeeds.length > 0) {
-                    const { ExtensionListServiceDefinition } = await import('./extensionsListService-mLeB6usr.js');
+                    const { ExtensionListServiceDefinition } = await import('./extensionsListService-CSNgtWE2.js');
                     await serviceContainer.addServiceAsync(ExtensionListServiceDefinition);
                 }
                 // Register the theme selector service (for selecting the theme) if theming is configured.
@@ -7608,6 +7678,7 @@ function MakeModularTool(options) {
             // Unmount and restore the original container element display.
             if (!disposed) {
                 disposed = true;
+                themeChangedObservable.clear();
                 reactRoot.unmount();
                 containerElement.style.display = originalContainerElementDisplay;
             }
@@ -11832,7 +11903,7 @@ const GeospatialCameraLimitsProperties = (props) => {
     if (!limits) {
         return null;
     }
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Pitch Min", description: "Minimum pitch angle (0 = looking straight down)", target: limits, propertyKey: "pitchMin", propertyPath: "limits.pitchMin" }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Pitch Max", description: "Maximum pitch angle (\u03C0/2 = horizon)", target: limits, propertyKey: "pitchMax", propertyPath: "limits.pitchMax" }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Yaw Min", description: "Minimum yaw angle", target: limits, propertyKey: "yawMin", propertyPath: "limits.yawMin" }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Yaw Max", description: "Maximum yaw angle", target: limits, propertyKey: "yawMax", propertyPath: "limits.yawMax" }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Radius Min", description: "Minimum distance from center", target: limits, propertyKey: "radiusMin", propertyPath: "limits.radiusMin" }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Radius Max", description: "Maximum distance from center", target: limits, propertyKey: "radiusMax", propertyPath: "limits.radiusMax" }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Pinch to Pan Max", description: "Distance threshold for pinch vs pan mode", target: limits, propertyKey: "pinchToPanMax", propertyPath: "limits.pinchToPanMax" })] }));
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Pitch Min", description: "Minimum pitch angle (0 = looking straight down)", target: limits, propertyKey: "pitchMin", propertyPath: "limits.pitchMin" }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Pitch Max", description: "Maximum pitch angle (\u03C0/2 = horizon)", target: limits, propertyKey: "pitchMax", propertyPath: "limits.pitchMax" }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Yaw Min", description: "Minimum yaw angle", target: limits, propertyKey: "yawMin", propertyPath: "limits.yawMin" }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Yaw Max", description: "Maximum yaw angle", target: limits, propertyKey: "yawMax", propertyPath: "limits.yawMax" }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Radius Min", description: "Minimum distance from center", target: limits, propertyKey: "radiusMin", propertyPath: "limits.radiusMin" }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Radius Max", description: "Maximum distance from center", target: limits, propertyKey: "radiusMax", propertyPath: "limits.radiusMax" })] }));
 };
 
 const MaskValidatorFn = (valueString) => {
@@ -12854,19 +12925,19 @@ const UpdateTexture = (file, material, textureSetter) => {
  */
 const OpenPBRMaterialBaseProperties = (props) => {
     const { material } = props;
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Base Weight", target: material, propertyKey: "baseWeight", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Base Weight", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Base Weight", target: material, propertyKey: "baseWeight", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Base Weight", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
                     if (files.length > 0) {
                         UpdateTexture(files[0], material, (texture) => (material.baseWeightTexture = texture));
                     }
-                } }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Base Color", target: material, propertyKey: "baseColor", isLinearMode: true }), jsx(FileUploadLine, { label: "Base Color", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
+                } }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Base Color", target: material, propertyKey: "baseColor", isLinearMode: true }), jsx(FileUploadLine, { label: "Base Color", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
                     if (files.length > 0) {
                         UpdateTexture(files[0], material, (texture) => (material.baseColorTexture = texture));
                     }
-                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Base Metalness", target: material, propertyKey: "baseMetalness", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Base Metalness", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
+                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Base Metalness", target: material, propertyKey: "baseMetalness", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Base Metalness", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
                     if (files.length > 0) {
                         UpdateTexture(files[0], material, (texture) => (material.baseMetalnessTexture = texture));
                     }
-                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Base Diffuse Roughness", target: material, propertyKey: "baseDiffuseRoughness", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Base Diffuse Roughness", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
+                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Base Diffuse Roughness", target: material, propertyKey: "baseDiffuseRoughness", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Base Diffuse Roughness", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
                     if (files.length > 0) {
                         UpdateTexture(files[0], material, (texture) => (material.baseDiffuseRoughnessTexture = texture));
                     }
@@ -12879,19 +12950,19 @@ const OpenPBRMaterialBaseProperties = (props) => {
  */
 const OpenPBRMaterialSpecularProperties = (props) => {
     const { material } = props;
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Specular Weight", target: material, propertyKey: "specularWeight", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Specular Weight", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Specular Weight", target: material, propertyKey: "specularWeight", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Specular Weight", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
                     if (files.length > 0) {
                         UpdateTexture(files[0], material, (texture) => (material.specularWeightTexture = texture));
                     }
-                } }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Specular Color", target: material, propertyKey: "specularColor", isLinearMode: true }), jsx(FileUploadLine, { label: "Specular Color", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
+                } }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Specular Color", target: material, propertyKey: "specularColor", isLinearMode: true }), jsx(FileUploadLine, { label: "Specular Color", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
                     if (files.length > 0) {
                         UpdateTexture(files[0], material, (texture) => (material.specularColorTexture = texture));
                     }
-                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Specular Roughness", target: material, propertyKey: "specularRoughness", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Specular Roughness", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
+                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Specular Roughness", target: material, propertyKey: "specularRoughness", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Specular Roughness", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
                     if (files.length > 0) {
                         UpdateTexture(files[0], material, (texture) => (material.specularRoughnessTexture = texture));
                     }
-                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Specular Roughness Anisotropy", target: material, propertyKey: "specularRoughnessAnisotropy", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Specular Roughness Anisotropy", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
+                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Specular Roughness Anisotropy", target: material, propertyKey: "specularRoughnessAnisotropy", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Specular Roughness Anisotropy", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
                     if (files.length > 0) {
                         UpdateTexture(files[0], material, (texture) => (material.specularRoughnessAnisotropyTexture = texture));
                     }
@@ -12899,23 +12970,23 @@ const OpenPBRMaterialSpecularProperties = (props) => {
 };
 const OpenPBRMaterialTransmissionProperties = (props) => {
     const { material } = props;
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Transmission Weight", target: material, propertyKey: "transmissionWeight", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Transmission Weight", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Transmission Weight", target: material, propertyKey: "transmissionWeight", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Transmission Weight", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
                     if (files.length > 0) {
                         UpdateTexture(files[0], material, (texture) => (material.transmissionWeightTexture = texture));
                     }
-                } }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Transmission Color", target: material, propertyKey: "transmissionColor", isLinearMode: true }), jsx(FileUploadLine, { label: "Transmission Color", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
+                } }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Transmission Color", target: material, propertyKey: "transmissionColor", isLinearMode: true }), jsx(FileUploadLine, { label: "Transmission Color", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
                     if (files.length > 0) {
                         UpdateTexture(files[0], material, (texture) => (material.transmissionColorTexture = texture));
                     }
-                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Transmission Depth", target: material, propertyKey: "transmissionDepth", min: 0, step: 0.01 }), jsx(FileUploadLine, { label: "Transmission Depth", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
+                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Transmission Depth", target: material, propertyKey: "transmissionDepth", min: 0, step: 0.01 }), jsx(FileUploadLine, { label: "Transmission Depth", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
                     if (files.length > 0) {
                         UpdateTexture(files[0], material, (texture) => (material.transmissionDepthTexture = texture));
                     }
-                } }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Transmission Scatter", target: material, propertyKey: "transmissionScatter", isLinearMode: true }), jsx(FileUploadLine, { label: "Transmission Scatter", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
+                } }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Transmission Scatter", target: material, propertyKey: "transmissionScatter", isLinearMode: true }), jsx(FileUploadLine, { label: "Transmission Scatter", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
                     if (files.length > 0) {
                         UpdateTexture(files[0], material, (texture) => (material.transmissionScatterTexture = texture));
                     }
-                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Transmission Scatter Anisotropy", target: material, propertyKey: "transmissionScatterAnisotropy", min: -1, max: 1, step: 0.01 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Transmission Dispersion Abbe Number", target: material, propertyKey: "transmissionDispersionAbbeNumber", min: 1, max: 100, step: 1 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Transmission Dispersion Scale", target: material, propertyKey: "transmissionDispersionScale", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Transmission Dispersion Scale", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
+                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Transmission Scatter Anisotropy", target: material, propertyKey: "transmissionScatterAnisotropy", min: -1, max: 1, step: 0.01 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Transmission Dispersion Abbe Number", target: material, propertyKey: "transmissionDispersionAbbeNumber", min: 1, max: 100, step: 1 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Transmission Dispersion Scale", target: material, propertyKey: "transmissionDispersionScale", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Transmission Dispersion Scale", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
                     if (files.length > 0) {
                         UpdateTexture(files[0], material, (texture) => (material.transmissionDispersionScaleTexture = texture));
                     }
@@ -12928,23 +12999,23 @@ const OpenPBRMaterialTransmissionProperties = (props) => {
  */
 const OpenPBRMaterialCoatProperties = (props) => {
     const { material } = props;
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Coat Weight", target: material, propertyKey: "coatWeight", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Coat Weight", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Coat Weight", target: material, propertyKey: "coatWeight", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Coat Weight", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
                     if (files.length > 0) {
                         UpdateTexture(files[0], material, (texture) => (material.coatWeightTexture = texture));
                     }
-                } }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Coat Color", target: material, propertyKey: "coatColor", isLinearMode: true }), jsx(FileUploadLine, { label: "Coat Color", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
+                } }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Coat Color", target: material, propertyKey: "coatColor", isLinearMode: true }), jsx(FileUploadLine, { label: "Coat Color", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
                     if (files.length > 0) {
                         UpdateTexture(files[0], material, (texture) => (material.coatColorTexture = texture));
                     }
-                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Coat Roughness", target: material, propertyKey: "coatRoughness", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Coat Roughness", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
+                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Coat Roughness", target: material, propertyKey: "coatRoughness", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Coat Roughness", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
                     if (files.length > 0) {
                         UpdateTexture(files[0], material, (texture) => (material.coatRoughnessTexture = texture));
                     }
-                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Coat Roughness Anisotropy", target: material, propertyKey: "coatRoughnessAnisotropy", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Coat Roughness Anisotropy", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
+                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Coat Roughness Anisotropy", target: material, propertyKey: "coatRoughnessAnisotropy", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Coat Roughness Anisotropy", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
                     if (files.length > 0) {
                         UpdateTexture(files[0], material, (texture) => (material.coatRoughnessAnisotropyTexture = texture));
                     }
-                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Coat IOR", target: material, propertyKey: "coatIor", min: 1, max: 3, step: 0.01 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Coat Darkening", target: material, propertyKey: "coatDarkening", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Coat Darkening", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
+                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Coat IOR", target: material, propertyKey: "coatIor", min: 1, max: 3, step: 0.01 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Coat Darkening", target: material, propertyKey: "coatDarkening", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Coat Darkening", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
                     if (files.length > 0) {
                         UpdateTexture(files[0], material, (texture) => (material.coatDarkeningTexture = texture));
                     }
@@ -12957,15 +13028,15 @@ const OpenPBRMaterialCoatProperties = (props) => {
  */
 const OpenPBRMaterialFuzzProperties = (props) => {
     const { material } = props;
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Fuzz Weight", target: material, propertyKey: "fuzzWeight", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Fuzz Weight", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Fuzz Weight", target: material, propertyKey: "fuzzWeight", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Fuzz Weight", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
                     if (files.length > 0) {
                         UpdateTexture(files[0], material, (texture) => (material.fuzzWeightTexture = texture));
                     }
-                } }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Fuzz Color", target: material, propertyKey: "fuzzColor", isLinearMode: true }), jsx(FileUploadLine, { label: "Fuzz Color", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
+                } }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Fuzz Color", target: material, propertyKey: "fuzzColor", isLinearMode: true }), jsx(FileUploadLine, { label: "Fuzz Color", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
                     if (files.length > 0) {
                         UpdateTexture(files[0], material, (texture) => (material.fuzzColorTexture = texture));
                     }
-                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Fuzz Roughness", target: material, propertyKey: "fuzzRoughness", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Fuzz Roughness", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
+                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Fuzz Roughness", target: material, propertyKey: "fuzzRoughness", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Fuzz Roughness", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
                     if (files.length > 0) {
                         UpdateTexture(files[0], material, (texture) => (material.fuzzRoughnessTexture = texture));
                     }
@@ -12978,7 +13049,7 @@ const OpenPBRMaterialFuzzProperties = (props) => {
  */
 const OpenPBRMaterialEmissionProperties = (props) => {
     const { material } = props;
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: Color3PropertyLine, label: "Emission Color", target: material, propertyKey: "emissionColor", isLinearMode: true }), jsx(FileUploadLine, { label: "Emission Color", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: Color3PropertyLine, label: "Emission Color", target: material, propertyKey: "emissionColor", isLinearMode: true }), jsx(FileUploadLine, { label: "Emission Color", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
                     if (files.length > 0) {
                         UpdateTexture(files[0], material, (texture) => (material.emissionColorTexture = texture));
                     }
@@ -12991,11 +13062,11 @@ const OpenPBRMaterialEmissionProperties = (props) => {
  */
 const OpenPBRMaterialThinFilmProperties = (props) => {
     const { material } = props;
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Thin Film Weight", target: material, propertyKey: "thinFilmWeight", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Thin Film Weight", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Thin Film Weight", target: material, propertyKey: "thinFilmWeight", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Thin Film Weight", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
                     if (files.length > 0) {
                         UpdateTexture(files[0], material, (texture) => (material.thinFilmWeightTexture = texture));
                     }
-                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Thin Film Thickness", target: material, propertyKey: "thinFilmThickness", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Thin Film Thickness", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
+                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Thin Film Thickness", target: material, propertyKey: "thinFilmThickness", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Thin Film Thickness", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
                     if (files.length > 0) {
                         UpdateTexture(files[0], material, (texture) => (material.thinFilmThicknessTexture = texture));
                     }
@@ -13008,27 +13079,27 @@ const OpenPBRMaterialThinFilmProperties = (props) => {
  */
 const OpenPBRMaterialGeometryProperties = (props) => {
     const { material } = props;
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Opacity", target: material, propertyKey: "geometryOpacity", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Geometry Opacity", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Opacity", target: material, propertyKey: "geometryOpacity", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Geometry Opacity", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
                     if (files.length > 0) {
                         UpdateTexture(files[0], material, (texture) => (material.geometryOpacityTexture = texture));
                     }
-                } }), jsx(FileUploadLine, { label: "Geometry Normal", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
+                } }), jsx(FileUploadLine, { label: "Geometry Normal", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
                     if (files.length > 0) {
                         UpdateTexture(files[0], material, (texture) => (material.geometryNormalTexture = texture));
                     }
-                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Tangent Angle", target: material, propertyKey: "geometryTangentAngle", min: 0, max: Math.PI, step: 0.01 }), jsx(FileUploadLine, { label: "Geometry Tangent", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
+                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Tangent Angle", target: material, propertyKey: "geometryTangentAngle", min: 0, max: Math.PI, step: 0.01 }), jsx(FileUploadLine, { label: "Geometry Tangent", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
                     if (files.length > 0) {
                         UpdateTexture(files[0], material, (texture) => (material.geometryTangentTexture = texture));
                     }
-                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Coat Tangent Angle", target: material, propertyKey: "geometryCoatTangentAngle", min: 0, max: Math.PI, step: 0.01 }), jsx(FileUploadLine, { label: "Geometry Coat Normal", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
+                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Coat Tangent Angle", target: material, propertyKey: "geometryCoatTangentAngle", min: 0, max: Math.PI, step: 0.01 }), jsx(FileUploadLine, { label: "Geometry Coat Normal", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
                     if (files.length > 0) {
                         UpdateTexture(files[0], material, (texture) => (material.geometryCoatNormalTexture = texture));
                     }
-                } }), jsx(FileUploadLine, { label: "Geometry Coat Tangent", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
+                } }), jsx(FileUploadLine, { label: "Geometry Coat Tangent", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
                     if (files.length > 0) {
                         UpdateTexture(files[0], material, (texture) => (material.geometryCoatTangentTexture = texture));
                     }
-                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Geometry Thickness", target: material, propertyKey: "geometryThickness", min: 0, step: 0.1 }), jsx(FileUploadLine, { label: "Geometry Thickness", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
+                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Geometry Thickness", target: material, propertyKey: "geometryThickness", min: 0, step: 0.1 }), jsx(FileUploadLine, { label: "Geometry Thickness", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
                     if (files.length > 0) {
                         UpdateTexture(files[0], material, (texture) => (material.geometryThicknessTexture = texture));
                     }
@@ -20320,8 +20391,87 @@ const GLTFValidationServiceDefinition = {
     },
 };
 
+const HighlightServiceDefinition = {
+    friendlyName: "Highlight Service",
+    consumes: [SelectionServiceIdentity, SceneContextIdentity, SettingsContextIdentity, ThemeServiceIdentity],
+    factory: (selectionService, sceneContext, settingsContext, themeService) => {
+        let outlineLayer = null;
+        let currentScene = null;
+        let activeCameraObserver = null;
+        function disposeOutlineLayer() {
+            outlineLayer?.dispose();
+            outlineLayer = null;
+            currentScene = null;
+        }
+        function getOrCreateOutlineLayer(scene) {
+            if (!outlineLayer || currentScene !== scene) {
+                disposeOutlineLayer();
+                outlineLayer = new SelectionOutlineLayer("InspectorSelectionOutline", scene);
+                updateColor(outlineLayer);
+                currentScene = scene;
+            }
+            return outlineLayer;
+        }
+        function updateColor(outlineLayer) {
+            outlineLayer.outlineColor = Color3.FromHexString(themeService.theme.colorBrandForeground1);
+        }
+        function updateHighlight() {
+            const scene = sceneContext.currentScene;
+            const entity = selectionService.selectedEntity instanceof AbstractMesh && !(selectionService.selectedEntity instanceof GaussianSplattingMesh)
+                ? selectionService.selectedEntity
+                : null;
+            if (!entity || !settingsContext.highlightSelectedEntity || !scene || !scene.activeCamera) {
+                disposeOutlineLayer();
+                return;
+            }
+            const layer = getOrCreateOutlineLayer(scene);
+            layer.clearSelection();
+            layer.addSelection(entity);
+        }
+        function watchActiveCamera(scene) {
+            activeCameraObserver?.remove();
+            activeCameraObserver = null;
+            if (scene) {
+                activeCameraObserver = scene.onActiveCameraChanged.add(updateHighlight);
+            }
+        }
+        // React to theme changes.
+        const themeObserver = themeService.onChanged.add(() => {
+            if (outlineLayer) {
+                updateColor(outlineLayer);
+            }
+        });
+        // React to selection changes.
+        const selectionObserver = selectionService.onSelectedEntityChanged.add(updateHighlight);
+        // React to scene changes.
+        const sceneObserver = sceneContext.currentSceneObservable.add(() => {
+            // Dispose the old layer when the scene changes.
+            disposeOutlineLayer();
+            watchActiveCamera(sceneContext.currentScene);
+            updateHighlight();
+        });
+        // React to settings changes.
+        const settingsObserver = settingsContext.settingsChangedObservable.add(updateHighlight);
+        // Watch active camera on the initial scene.
+        watchActiveCamera(sceneContext.currentScene);
+        // Initial update.
+        updateHighlight();
+        return {
+            dispose: () => {
+                themeObserver.remove();
+                selectionObserver.remove();
+                sceneObserver.remove();
+                settingsObserver.remove();
+                activeCameraObserver?.remove();
+                activeCameraObserver = null;
+                disposeOutlineLayer();
+            },
+        };
+    },
+};
+
 const PickingToolbar = (props) => {
-    const { scene, selectEntity, gizmoService, ignoreBackfaces } = props;
+    const { scene, selectEntity, gizmoService, ignoreBackfaces, highlightSelectedEntity, onHighlightSelectedEntityChange } = props;
     const meshDataCache = useMemo(() => new WeakMap(), [scene]);
     // Not sure why changing the cursor on the canvas itself doesn't work, so change it on the parent.
     const sceneElement = scene.getEngine().getRenderingCanvas()?.parentElement;
@@ -20395,7 +20545,12 @@ const PickingToolbar = (props) => {
             /* No-op */
         };
     }, [pickingEnabled, sceneElement, ignoreBackfaces]);
-    return (sceneElement && jsx(ToggleButton, { title: `${pickingEnabled ? "Disable" : "Enable"} Picking`, checkedIcon: TargetRegular, value: pickingEnabled, onChange: setPickingEnabled }));
+    const togglePicking = useCallback(() => {
+        setPickingEnabled((prev) => !prev);
+    }, []);
+    return (sceneElement && (jsxs(Menu, { positioning: "below-end", checkedValues: { selectionHighlight: highlightSelectedEntity ? ["on"] : [] }, onCheckedValueChange: (_e, data) => {
+            onHighlightSelectedEntityChange?.(data.checkedItems.includes("on"));
+        }, children: [jsx(MenuTrigger, { disableButtonEnhancement: true, children: (triggerProps) => (jsx(Tooltip$1, { content: `${pickingEnabled ? "Disable" : "Enable"} Picking`, relationship: "label", children: jsx(SplitButton, { menuButton: triggerProps, primaryActionButton: { onClick: togglePicking }, size: "small", appearance: "transparent", icon: jsx(TargetRegular, { color: pickingEnabled ? tokens.colorBrandForeground1 : undefined }) }) })) }), jsx(MenuPopover, { children: jsx(MenuList, { children: jsx(MenuItemCheckbox, { name: "selectionHighlight", value: "on", children: "Highlight Selected Entity" }) }) })] })));
 };
 
 const PickingServiceDefinition = {
@@ -20411,7 +20566,9 @@ const PickingServiceDefinition = {
                 const scene = useObservableState(() => sceneContext.currentScene, sceneContext.currentSceneObservable);
                 const selectEntity = useCallback((entity) => (selectionService.selectedEntity = entity), []);
                 const ignoreBackfacesForPicking = useObservableState(() => settingsContext.ignoreBackfacesForPicking, settingsContext.settingsChangedObservable);
-                return scene ? jsx(PickingToolbar, { scene: scene, selectEntity: selectEntity, gizmoService: gizmoService, ignoreBackfaces: ignoreBackfacesForPicking }) : null;
+                const highlightSelectedEntity = useObservableState(() => settingsContext.highlightSelectedEntity, settingsContext.settingsChangedObservable);
+                const onHighlightSelectedEntityChange = useCallback((value) => (settingsContext.highlightSelectedEntity = value), []);
+                return scene ? (jsx(PickingToolbar, { scene: scene, selectEntity: selectEntity, gizmoService: gizmoService, ignoreBackfaces: ignoreBackfacesForPicking, highlightSelectedEntity: highlightSelectedEntity, onHighlightSelectedEntityChange: onHighlightSelectedEntityChange })) : null;
             },
         });
     },
@@ -20623,6 +20780,8 @@ function ShowInspector(scene, options = {}) {
         GizmoToolbarServiceDefinition, 
         // Allows picking objects from the scene to select them.
         PickingServiceDefinition, 
+        // Highlights the selected mesh in the scene.
+        HighlightServiceDefinition, 
         // Adds entry points for user feedback on Inspector v2 (probably eventually will be removed).
         UserFeedbackServiceDefinition, 
         // Adds always present "mini stats" (like fps) to the toolbar, etc.
@@ -20642,6 +20801,8 @@ function ShowInspector(scene, options = {}) {
             extensionFeeds: [DefaultInspectorExtensionFeed, ...(options.extensionFeeds ?? [])],
             toolbarMode: "compact",
             sidePaneRemapper: options.sidePaneRemapper,
+            leftPaneDefaultCollapsed: options.leftPaneDefaultCollapsed,
+            rightPaneDefaultCollapsed: options.rightPaneDefaultCollapsed,
         });
         disposeActions.push(() => modularTool.dispose());
         const sceneDisposedObserver = scene.onDisposeObservable.addOnce(() => {
@@ -21448,5 +21609,5 @@ const TextAreaPropertyLine = (props) => {
 // Attach Inspector v2 to Scene.debugLayer as a side effect for back compat.
 AttachDebugLayer();
 
-export { useCompactMode as $, Accordion as A, Button as B, CheckboxPropertyLine as C, DebugServiceIdentity as D, ErrorBoundary as E, usePropertyChangedNotifier as F, BuiltInsExtensionFeed as G, useVector3Property as H, Inspector as I, useColor3Property as J, useColor4Property as K, Link as L, MessageBar as M, NumberInputPropertyLine as N, useQuaternionProperty as O, Popover as P, MakePropertyHook as Q, useInterceptObservable as R, SpinButtonPropertyLine as S, TextInputPropertyLine as T, useEventfulState as U, Vector3PropertyLine as V, useObservableCollection as W, useOrderedObservableCollection as X, usePollingObservable as Y, useResource as Z, useAsyncResource as _, ShellServiceIdentity as a, Color4PropertyLine as a$, useDisableCopy as a0, useSidePaneDockOverrides as a1, useAngleConverters as a2, MakeTeachingMoment as a3, MakeDialogTeachingMoment as a4, InterceptFunction as a5, GetPropertyDescriptor as a6, IsPropertyReadonly as a7, InterceptProperty as a8, ObservableCollection as a9, List as aA, MaterialSelector as aB, NodeSelector as aC, PositionedPopover as aD, SearchBar as aE, SearchBox as aF, SkeletonSelector as aG, SpinButton as aH, Switch as aI, SyncedSliderInput as aJ, Textarea as aK, TextInput as aL, TextureSelector as aM, ToastProvider as aN, useToast as aO, ToggleButton as aP, Tooltip as aQ, UploadButton as aR, ChildWindow as aS, FileUploadLine as aT, FactorGradientList as aU, Color3GradientList as aV, Color4GradientList as aW, Pane as aX, TextureUpload as aY, BooleanBadgePropertyLine as aZ, Color3PropertyLine as a_, ConstructorFactory as aa, SelectionServiceIdentity as ab, SelectionServiceDefinition as ac, SettingsContextIdentity as ad, ShowInspector as ae, useKeyListener as af, useKeyState as ag, useEventListener as ah, AccordionSectionItem as ai, Checkbox as aj, Collapse as ak, ColorPickerPopup as al, InputHexField as am, InputHsvField as an, ComboBox as ao, DraggableLine as ap, Dropdown as aq, NumberDropdown as ar, StringDropdown as as, EntitySelector as at, FactorGradientComponent as au, Color3GradientComponent as av, Color4GradientComponent as aw, ColorStepGradientComponent as ax, InfoLabel as ay, MakeLazyComponent as az, SceneContextIdentity as b, ComboBoxPropertyLine as b0, HexPropertyLine as b1, LinkPropertyLine as b2, PropertyLine as b3, LineContainer as b4, PlaceholderPropertyLine as b5, StringifiedPropertyLine as b6, SwitchPropertyLine as b7, SyncedSliderPropertyLine as b8, TextAreaPropertyLine as b9, TextPropertyLine as ba, RotationVectorPropertyLine as bb, QuaternionPropertyLine as bc, Vector2PropertyLine as bd, Vector4PropertyLine as be, useObservableState as c, AccordionSection as d, ButtonLine as e, ToolsServiceIdentity as f, useExtensionManager as g, MakePopoverTeachingMoment as h, TeachingMoment as i, SidePaneContainer as j, PropertiesServiceIdentity as k, SceneExplorerServiceIdentity as l, SettingsServiceIdentity as m, StatsServiceIdentity as n, ConvertOptions as o, AttachDebugLayer as p, DetachDebugLayer as q, NumberDropdownPropertyLine as r, StringDropdownPropertyLine as s, BoundProperty as t, useProperty as u, Property as v, LinkToEntityPropertyLine as w, ExtensibleAccordion as x, Theme as y, PropertyContext as z };
-//# sourceMappingURL=index-xdZE0cq5.js.map
+export { useAsyncResource as $, Accordion as A, Button as B, CheckboxPropertyLine as C, DebugServiceIdentity as D, ErrorBoundary as E, PropertyContext as F, usePropertyChangedNotifier as G, BuiltInsExtensionFeed as H, Inspector as I, useVector3Property as J, useColor3Property as K, Link as L, MessageBar as M, NumberInputPropertyLine as N, useColor4Property as O, Popover as P, useQuaternionProperty as Q, MakePropertyHook as R, SpinButtonPropertyLine as S, TextInputPropertyLine as T, useInterceptObservable as U, Vector3PropertyLine as V, useEventfulState as W, useObservableCollection as X, useOrderedObservableCollection as Y, usePollingObservable as Z, useResource as _, ShellServiceIdentity as a, Color3PropertyLine as a$, useCompactMode as a0, useDisableCopy as a1, useSidePaneDockOverrides as a2, useAngleConverters as a3, MakeTeachingMoment as a4, MakeDialogTeachingMoment as a5, InterceptFunction as a6, GetPropertyDescriptor as a7, IsPropertyReadonly as a8, InterceptProperty as a9, MakeLazyComponent as aA, List as aB, MaterialSelector as aC, NodeSelector as aD, PositionedPopover as aE, SearchBar as aF, SearchBox as aG, SkeletonSelector as aH, SpinButton as aI, Switch as aJ, SyncedSliderInput as aK, Textarea as aL, TextInput as aM, TextureSelector as aN, ToastProvider as aO, useToast as aP, ToggleButton as aQ, Tooltip as aR, UploadButton as aS, ChildWindow as aT, FileUploadLine as aU, FactorGradientList as aV, Color3GradientList as aW, Color4GradientList as aX, Pane as aY, TextureUpload as aZ, BooleanBadgePropertyLine as a_, ObservableCollection as aa, ConstructorFactory as ab, SelectionServiceIdentity as ac, SelectionServiceDefinition as ad, SettingsContextIdentity as ae, ShowInspector as af, useKeyListener as ag, useKeyState as ah, useEventListener as ai, AccordionSectionItem as aj, Checkbox as ak, Collapse as al, ColorPickerPopup as am, InputHexField as an, InputHsvField as ao, ComboBox as ap, DraggableLine as aq, Dropdown as ar, NumberDropdown as as, StringDropdown as at, EntitySelector as au, FactorGradientComponent as av, Color3GradientComponent as aw, Color4GradientComponent as ax, ColorStepGradientComponent as ay, InfoLabel as az, SceneContextIdentity as b, Color4PropertyLine as b0, ComboBoxPropertyLine as b1, HexPropertyLine as b2, LinkPropertyLine as b3, PropertyLine as b4, LineContainer as b5, PlaceholderPropertyLine as b6, StringifiedPropertyLine as b7, SwitchPropertyLine as b8, SyncedSliderPropertyLine as b9, TextAreaPropertyLine as ba, TextPropertyLine as bb, RotationVectorPropertyLine as bc, QuaternionPropertyLine as bd, Vector2PropertyLine as be, Vector4PropertyLine as bf, useObservableState as c, AccordionSection as d, ButtonLine as e, ToolsServiceIdentity as f, useExtensionManager as g, MakePopoverTeachingMoment as h, TeachingMoment as i, SidePaneContainer as j, PropertiesServiceIdentity as k, SceneExplorerServiceIdentity as l, SettingsServiceIdentity as m, StatsServiceIdentity as n, ConvertOptions as o, AttachDebugLayer as p, DetachDebugLayer as q, NumberDropdownPropertyLine as r, StringDropdownPropertyLine as s, BoundProperty as t, useProperty as u, Property as v, LinkToEntityPropertyLine as w, ExtensibleAccordion as x, useTheme as y, Theme as z };
+//# sourceMappingURL=index-DNdlSwwf.js.map