@babylonjs/inspector 8.38.0-preview → 8.39.0-preview

package/lib/{index-DE0QdD6v.js → index-DUdNW7K3.js}

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useMemo, useEffect, useState, useRef, useCallback, forwardRef, createContext, useContext, isValidElement, cloneElement, Children, useLayoutEffect, createElement, Suspense, useReducer, lazy } from 'react';
+import { createContext, useContext, useMemo, useEffect, useState, useRef, useCallback, forwardRef, isValidElement, cloneElement, Children, useLayoutEffect, useImperativeHandle, createElement, Suspense, useReducer, lazy } from 'react';
 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';
@@ -107,6 +107,14 @@ import { PointerEventTypes } from '@babylonjs/core/Events/pointerEvents.js';
 import { EngineStore } from '@babylonjs/core/Engines/engineStore.js';
 import { UniqueIdGenerator } from '@babylonjs/core/Misc/uniqueIdGenerator.js';
 
+const PropertyContext = createContext(undefined);
+function usePropertyChangedNotifier() {
+    const propertyContext = useContext(PropertyContext);
+    return (entity, propertyKey, oldValue, newValue) => {
+        propertyContext?.onPropertyChanged.notifyObservers({ entity, propertyKey, oldValue, newValue });
+    };
+}
+
 const InterceptorHooksMaps$1 = new WeakMap();
 /**
  * Intercepts a function on an object and allows you to add hooks that will be called during function execution.
@@ -541,6 +549,7 @@ function BoundPropertyCoreImpl(props, ref) {
     const value = useProperty(target, propertyKey);
     // Determine which specific property hook to use based on the value's type.
     const useSpecificProperty = useMemo(() => MakePropertyHook(value), [value]);
+    const notifyPropertyChanged = usePropertyChangedNotifier();
     // Create an inline nested component that changes when the desired specific hook type changes (since hooks can't be conditional).
     // eslint-disable-next-line @typescript-eslint/naming-convention
     const SpecificComponent = useMemo(() => {
@@ -555,8 +564,10 @@ function BoundPropertyCoreImpl(props, ref) {
                 ref,
                 value: convertedValue,
                 onChange: (val) => {
+                    const oldValue = target[propertyKey];
                     const newValue = convertFrom ? convertFrom(val) : val;
                     target[propertyKey] = newValue;
+                    notifyPropertyChanged(target, propertyKey, oldValue, newValue);
                 },
             };
             return jsx(Component, { ...propsToSend });
@@ -893,17 +904,37 @@ const useStyles$h = makeStyles({
         flexDirection: "column",
         overflow: "hidden",
     },
+    highlightDiv: {
+        borderRadius: tokens.borderRadiusLarge,
+        animationDuration: "1s",
+        animationTimingFunction: "ease-in-out",
+        animationIterationCount: "5",
+        animationFillMode: "forwards",
+        animationName: {
+            from: {
+                boxShadow: `inset 0 0 4px ${tokens.colorTransparentBackground}`,
+            },
+            // eslint-disable-next-line @typescript-eslint/naming-convention
+            "50%": {
+                boxShadow: `inset 0 0 12px ${tokens.colorBrandBackground}`,
+            },
+            to: {
+                boxShadow: `inset 0 0 4px ${tokens.colorTransparentBackground}`,
+            },
+        },
+    },
 });
 const AccordionSection = (props) => {
     AccordionSection.displayName = "AccordionSection";
     const classes = useStyles$h();
     return jsx("div", { className: classes.panelDiv, children: props.children });
 };
-const Accordion = (props) => {
+const StringAccordion = Accordion$1;
+const Accordion = forwardRef((props, ref) => {
     Accordion.displayName = "Accordion";
     const classes = useStyles$h();
     const { size } = useContext(ToolContext);
-    const { children, ...rest } = props;
+    const { children, highlightSections, ...rest } = props;
     const validChildren = useMemo(() => {
         return (Children.map(children, (child) => {
             if (isValidElement(child)) {
@@ -924,6 +955,19 @@ const Accordion = (props) => {
     // Tracks closed items, which is needed so that when the children change, we only update the open/closed state
     // (depending on the collapseByDefault prop) for items that have not been explicitly opened or closed.
     const [closedItems, setClosedItems] = useState(validChildren.filter((child) => child.collapseByDefault).map((child) => child.title));
+    const internalOpenItemsRef = useRef(openItems);
+    // When highlight sections is requested, we temporarily override the open items, but if highlight sections is cleared,
+    // then we revert back to the normal open items tracking.
+    useLayoutEffect(() => {
+        if (highlightSections) {
+            internalOpenItemsRef.current = [...openItems];
+            setOpenItems([...highlightSections]);
+        }
+        else {
+            setOpenItems([...(internalOpenItemsRef.current ?? [])]);
+            internalOpenItemsRef.current = undefined;
+        }
+    }, [highlightSections]);
     useEffect(() => {
         for (const defaultOpenItem of validChildren.filter((child) => !child.collapseByDefault).map((child) => child.title)) {
             // If a child is not marked as collapseByDefault, then it should be opened by default, and
@@ -943,10 +987,11 @@ const Accordion = (props) => {
             setOpenItems((prev) => prev.filter((item) => item !== data.value));
         }
     }, []);
-    return (jsx(Accordion$1, { className: classes.accordion, collapsible: true, multiple: true, onToggle: onToggle, openItems: openItems, ...rest, children: validChildren.map((child, index) => {
-            return (jsxs(AccordionItem, { value: child.title, children: [jsx(AccordionHeader, { size: size, children: jsx(Subtitle2Stronger, { children: child.title }) }), jsx(AccordionPanel, { children: jsx("div", { className: classes.panelDiv, children: child.content }) }), index < validChildren.length - 1 && jsx(Divider, { inset: true, className: size === "small" ? classes.dividerSmall : classes.divider })] }, child.content.key));
+    return (jsx(StringAccordion, { ref: ref, className: classes.accordion, collapsible: true, multiple: true, onToggle: onToggle, openItems: openItems, ...rest, children: validChildren.map((child, index) => {
+            const isHighlighted = highlightSections?.includes(child.title);
+            return (jsxs(AccordionItem, { value: child.title, children: [jsxs("div", { className: isHighlighted ? classes.highlightDiv : undefined, children: [jsx(AccordionHeader, { size: size, children: jsx(Subtitle2Stronger, { children: child.title }) }), jsx(AccordionPanel, { children: jsx("div", { className: classes.panelDiv, children: child.content }) })] }), index < validChildren.length - 1 && jsx(Divider, { inset: true, className: size === "small" ? classes.dividerSmall : classes.divider })] }, child.content.key));
         }) }));
-};
+});
 
 const CompactModeStorageKey = "Babylon/Settings/IsCompactMode";
 const SidePaneDockOverridesStorageKey = "Babylon/Settings/SidePaneDockOverrides";
@@ -1029,7 +1074,7 @@ const useStyles$g = makeStyles({
 });
 function ExtensibleAccordion(props) {
     const classes = useStyles$g();
-    const { children, sections, sectionContent, context } = props;
+    const { children, sections, sectionContent, context, sectionsRef } = props;
     const defaultSections = useMemo(() => {
         const defaultSections = [];
         if (children) {
@@ -1111,7 +1156,24 @@ function ExtensibleAccordion(props) {
         })
             .filter((section) => section !== null);
     }, [mergedSections, mergedSectionContent, context]);
-    return (jsx("div", { className: classes.rootDiv, children: visibleSections.length > -1 && (jsx(CompactModeContextProvider, { children: jsxs(Accordion, { children: [...visibleSections.map((section) => {
+    const [highlightSections, setHighlightSections] = useState();
+    // When the context changes, clear any existing highlights.
+    useLayoutEffect(() => {
+        setHighlightSections(undefined);
+    }, [context]);
+    // This just assigns the returned object to any type of React ref, whether it is
+    // a mutable ref with a 'current' property or whether it is a callback, useImperativeHandle
+    // will deal with it.
+    useImperativeHandle(sectionsRef, () => {
+        return {
+            highlightSections: (sectionsToHighlight) => {
+                if (sectionsToHighlight.length > 0) {
+                    setHighlightSections(sectionsToHighlight);
+                }
+            },
+        };
+    }, []);
+    return (jsx("div", { className: classes.rootDiv, children: visibleSections.length > -1 && (jsx(CompactModeContextProvider, { children: jsxs(Accordion, { highlightSections: highlightSections, children: [...visibleSections.map((section) => {
                         return (jsx(AccordionSection, { title: section.identity, collapseByDefault: section.collapseByDefault, children: section.components }, section.identity));
                     })] }) })) }));
 }
@@ -1940,6 +2002,10 @@ function usePane(location, layoutMode, defaultWidth, minWidth, sidePanes, onSele
                     window.addEventListener("unload", onParentWindowUnload);
                     disposeActions.push(() => window.removeEventListener("unload", onParentWindowUnload));
                 }
+                else {
+                    // If creating a child window failed (e.g. popup blocked), then just revert to docked mode.
+                    setUndocked(false);
+                }
                 disposeActions.push(() => childWindow?.close());
             }
         }
@@ -1983,7 +2049,7 @@ function usePane(location, layoutMode, defaultWidth, minWidth, sidePanes, onSele
             jsx(Portal, { mountNode: mountNode, children: jsx(RendererProvider, { renderer: renderer, targetDocument: mountNode.ownerDocument, children: jsx(Theme, { className: classes.paneContent, style: { minWidth }, targetDocument: mountNode.ownerDocument, children: corePane }) }) }));
         }
     }, [collapsed, corePane, windowState]);
-    return [topPaneTabList, pane, collapsed, setCollapsed];
+    return [topPaneTabList, pane, collapsed, setCollapsed, undocked, setUndocked];
 }
 function MakeShellServiceDefinition({ leftPaneDefaultWidth = 350, leftPaneMinWidth = 350, rightPaneDefaultWidth = 350, rightPaneMinWidth = 350, toolbarMode = "full", sidePaneRemapper = undefined, layoutMode = "inline", } = {}) {
     return {
@@ -1994,6 +2060,17 @@ function MakeShellServiceDefinition({ leftPaneDefaultWidth = 350, leftPaneMinWid
             const sidePaneCollection = new ObservableCollection();
             const centralContentCollection = new ObservableCollection();
             const onSelectSidePane = new Observable(undefined, true);
+            const onDockChanged = new Observable(undefined, true);
+            const leftSidePaneContainerState = {
+                isDocked: true,
+                dock: () => onDockChanged.notifyObservers({ location: "left", dock: true }),
+                undock: () => onDockChanged.notifyObservers({ location: "left", dock: false }),
+            };
+            const rightSidePaneContainerState = {
+                isDocked: true,
+                dock: () => onDockChanged.notifyObservers({ location: "right", dock: true }),
+                undock: () => onDockChanged.notifyObservers({ location: "right", dock: false }),
+            };
             const rootComponent = () => {
                 const classes = useStyles$c();
                 const [sidePaneDockOverrides, setSidePaneDockOverrides] = useSidePaneDockOverrides();
@@ -2119,8 +2196,32 @@ function MakeShellServiceDefinition({ leftPaneDefaultWidth = 350, leftPaneMinWid
                 const bottomBarLeftItems = useMemo(() => bottomToolBarItems.filter((entry) => coerceToolBarItemHorizontalLocation(entry) === "left"), [bottomToolBarItems, coerceToolBarItemHorizontalLocation]);
                 const bottomBarRightItems = useMemo(() => bottomToolBarItems.filter((entry) => coerceToolBarItemHorizontalLocation(entry) === "right"), [bottomToolBarItems, coerceToolBarItemHorizontalLocation]);
                 const centralContents = useOrderedObservableCollection(centralContentCollection);
-                const [leftPaneTabList, leftPane, leftPaneCollapsed, setLeftPaneCollapsed] = usePane("left", layoutMode, leftPaneDefaultWidth, leftPaneMinWidth, coercedSidePanes, onSelectSidePane, sidePaneDockOperations, toolbarMode, topBarLeftItems, bottomBarLeftItems);
-                const [rightPaneTabList, rightPane, rightPaneCollapsed, setRightPaneCollapsed] = usePane("right", layoutMode, rightPaneDefaultWidth, rightPaneMinWidth, coercedSidePanes, onSelectSidePane, sidePaneDockOperations, toolbarMode, topBarRightItems, bottomBarRightItems);
+                const [leftPaneTabList, leftPane, leftPaneCollapsed, setLeftPaneCollapsed, leftPaneUndocked, setLeftPaneUndocked] = usePane("left", layoutMode, leftPaneDefaultWidth, leftPaneMinWidth, coercedSidePanes, onSelectSidePane, sidePaneDockOperations, toolbarMode, topBarLeftItems, bottomBarLeftItems);
+                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", layoutMode, rightPaneDefaultWidth, rightPaneMinWidth, coercedSidePanes, onSelectSidePane, sidePaneDockOperations, toolbarMode, topBarRightItems, bottomBarRightItems);
+                useEffect(() => {
+                    // Propagate shorter lived React component state out to longer lived service state.
+                    rightSidePaneContainerState.isDocked = !rightPaneUndocked;
+                }, [rightPaneUndocked]);
+                useEffect(() => {
+                    // If at the service level dock state change is requested, propagate to the React component state.
+                    const observer = onDockChanged.add(({ location, dock }) => {
+                        if (location === "left") {
+                            setLeftPaneUndocked(!dock);
+                        }
+                        else {
+                            setRightPaneUndocked(!dock);
+                        }
+                    });
+                    return () => {
+                        observer.remove();
+                        leftSidePaneContainerState.isDocked = true;
+                        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(entry.component, {}, entry.key))), toolbarMode === "compact" && (jsxs(Fragment, { children: [jsx(Fade, { visible: leftPaneCollapsed, delay: 50, children: jsx("div", { className: mergeClasses(classes.expandButtonContainer, classes.expandButtonContainerLeft), children: jsx(Tooltip, { content: "Show Side Pane", relationship: "label", children: jsx(Button$1, { className: classes.expandButton, icon: jsx(PanelLeftExpandRegular, {}), onClick: () => setLeftPaneCollapsed(false) }) }) }) }), jsx(Fade, { visible: rightPaneCollapsed, delay: 50, children: jsx("div", { className: mergeClasses(classes.expandButtonContainer, classes.expandButtonContainerRight), children: jsx(Tooltip, { content: "Show Side Pane", relationship: "label", children: jsx(Button$1, { className: classes.expandButton, icon: jsx(PanelRightExpandRegular, {}), onClick: () => setRightPaneCollapsed(false) }) }) }) })] }))] }), rightPane] }), toolbarMode === "full" && (jsx(Fragment, { children: jsx("div", { className: classes.barDiv, children: jsx(Toolbar, { location: "bottom", components: bottomToolBarItems }) }) }))] }));
             };
             rootComponent.displayName = "Shell Service Root";
@@ -2139,6 +2240,9 @@ function MakeShellServiceDefinition({ leftPaneDefaultWidth = 350, leftPaneMinWid
                 },
                 addCentralContent: (entry) => centralContentCollection.add(entry),
                 resetSidePaneLayout: () => localStorage.removeItem("Babylon/Settings/SidePaneDockOverrides"),
+                leftSidePaneContainer: leftSidePaneContainerState,
+                rightSidePaneContainer: rightSidePaneContainerState,
+                onDockChanged,
                 get sidePanes() {
                     return [...sidePaneCollection.items].map((sidePaneDefinition) => {
                         return {
@@ -2206,6 +2310,8 @@ const PropertiesServiceDefinition = {
     factory: (shellService, selectionService) => {
         const sectionsCollection = new ObservableCollection();
         const sectionContentCollection = new ObservableCollection();
+        const onPropertyChanged = new Observable();
+        const onHighlightSectionsRequested = new Observable();
         const registration = shellService.addSidePane({
             key: "Properties",
             title: "Properties",
@@ -2232,12 +2338,29 @@ const PropertiesServiceDefinition = {
                         });
                     })
                     : [], [sectionContent, entity]);
-                return jsx(PropertiesPane, { sections: sections, sectionContent: applicableContent, context: entity });
+                const sectionsRef = useRef(null);
+                // The selected entity may be set at the same time as a highlight is requested.
+                // To account for this, we need to wait for one React render to complete before
+                // requesting the section highlight.
+                const [pendingHighlight, setPendingHighlight] = useState();
+                useEffect(() => {
+                    const observer = onHighlightSectionsRequested.add(setPendingHighlight);
+                    return () => observer.remove();
+                }, []);
+                useEffect(() => {
+                    if (pendingHighlight && sectionsRef.current) {
+                        sectionsRef.current.highlightSections(pendingHighlight);
+                        setPendingHighlight(undefined);
+                    }
+                }, [pendingHighlight]);
+                return (jsx(PropertyContext.Provider, { value: { onPropertyChanged }, children: jsx(PropertiesPane, { sections: sections, sectionContent: applicableContent, context: entity, sectionsRef: sectionsRef }) }));
             },
         });
         return {
             addSection: (section) => sectionsCollection.add(section),
             addSectionContent: (content) => sectionContentCollection.add(content),
+            onPropertyChanged,
+            highlightSections: (sectionIds) => onHighlightSectionsRequested.notifyObservers(sectionIds),
             dispose: () => registration.dispose(),
         };
     },
@@ -3523,7 +3646,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-B2rCoOC_.js'),
+        getExtensionModuleAsync: async () => await import('./exportService-BqnzQ5KY.js'),
     },
     {
         name: "Capture Tools",
@@ -3531,7 +3654,7 @@ const DefaultInspectorExtensionFeed = new BuiltInsExtensionFeed("Inspector", [
         keywords: ["capture", "screenshot", "gif", "video", "tools"],
         ...BabylonWebResources,
         author: { name: "Alex Chuber", forumUserName: "alexchuber" },
-        getExtensionModuleAsync: async () => await import('./captureService-CS2uW-yq.js'),
+        getExtensionModuleAsync: async () => await import('./captureService-BNAvQLVs.js'),
     },
     {
         name: "Import Tools",
@@ -3539,7 +3662,7 @@ const DefaultInspectorExtensionFeed = new BuiltInsExtensionFeed("Inspector", [
         keywords: ["import", "tools"],
         ...BabylonWebResources,
         author: { name: "Alex Chuber", forumUserName: "alexchuber" },
-        getExtensionModuleAsync: async () => await import('./importService-BSl7VIci.js'),
+        getExtensionModuleAsync: async () => await import('./importService-Bv9STG4_.js'),
     },
 ]);
 
@@ -4647,7 +4770,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-CyDEpF1t.js');
+                    const { ExtensionListServiceDefinition } = await import('./extensionsListService-CvofHYEa.js');
                     await serviceContainer.addServiceAsync(ExtensionListServiceDefinition);
                 }
                 // Register the theme selector service (for selecting the theme) if theming is configured.
@@ -5469,14 +5592,23 @@ const CameraPropertiesServiceDefinition = {
     },
 };
 
+function IsEntityWithProperty(entity, property) {
+    return !!entity && typeof entity === "object" && property in entity && entity[property] !== undefined;
+}
+function IsCommonEntity(entity) {
+    return (IsEntityWithProperty(entity, "id") ||
+        IsEntityWithProperty(entity, "uniqueId") ||
+        IsEntityWithProperty(entity, "name") ||
+        IsEntityWithProperty(entity, "getClassName"));
+}
 const CommonGeneralProperties = (props) => {
     const { commonEntity } = props;
     const name = useProperty(commonEntity, "name");
     const namePropertyDescriptor = useMemo(() => GetPropertyDescriptor(commonEntity, "name")?.[1], [commonEntity]);
     const isNameReadonly = !namePropertyDescriptor || IsPropertyReadonly(namePropertyDescriptor);
     const className = commonEntity.getClassName?.();
-    return (jsxs(Fragment, { children: [commonEntity.id !== undefined && jsx(StringifiedPropertyLine, { label: "ID", description: "The id of the node.", value: commonEntity.id }, "EntityId"), name !== undefined &&
-                (isNameReadonly ? (jsx(TextPropertyLine, { label: "Name", description: "The name of the node.", value: name }, "EntityName")) : (jsx(TextInputPropertyLine, { label: "Name", description: "The name of the node.", value: name, onChange: (newName) => (commonEntity.name = newName) }, "EntityName"))), commonEntity.uniqueId !== undefined && (jsx(StringifiedPropertyLine, { label: "Unique ID", description: "The unique id of the node.", value: commonEntity.uniqueId }, "EntityUniqueId")), className !== undefined && jsx(TextPropertyLine, { label: "Class", description: "The class of the node.", value: className }, "EntityClassName")] }));
+    return (jsxs(Fragment, { children: [IsEntityWithProperty(commonEntity, "id") && jsx(StringifiedPropertyLine, { label: "ID", description: "The id of the node.", value: commonEntity.id }, "EntityId"), IsEntityWithProperty(commonEntity, "name") &&
+                (isNameReadonly ? (jsx(TextPropertyLine, { label: "Name", description: "The name of the node.", value: name ?? "" }, "EntityName")) : (jsx(BoundProperty, { component: TextInputPropertyLine, label: "Name", description: "The name of the node.", target: commonEntity, propertyKey: "name" }, "EntityName"))), IsEntityWithProperty(commonEntity, "uniqueId") && (jsx(StringifiedPropertyLine, { label: "Unique ID", description: "The unique id of the node.", value: commonEntity.uniqueId }, "EntityUniqueId")), className !== undefined && jsx(TextPropertyLine, { label: "Class", description: "The class of the node.", value: className }, "EntityClassName")] }));
 };
 const DisposableGeneralProperties = (props) => {
     const { disposableEntity } = props;
@@ -5494,8 +5626,7 @@ const CommonPropertiesServiceDefinition = {
                 if (entity instanceof Scene) {
                     return false;
                 }
-                const commonEntity = entity;
-                return commonEntity.id !== undefined || commonEntity.name !== undefined || commonEntity.uniqueId !== undefined || commonEntity.getClassName !== undefined;
+                return IsCommonEntity(entity);
             },
             content: [
                 {
@@ -8119,10 +8250,11 @@ const BaseTextureCharacteristicProperties = (props) => {
     const type = useProperty(internalTexture, "type") ?? NaN;
     const depth = useProperty(internalTexture, "depth");
     const useSRGBBuffer = useProperty(internalTexture, "_useSRGBBuffer");
+    const samples = useProperty(internalTexture, "samples") ?? "?";
     const displayFormat = FindTextureFormat(format === -1 ? Constants.TEXTUREFORMAT_RGBA : format);
     const displayType = FindTextureType(type === -1 ? Constants.TEXTURETYPE_UNSIGNED_BYTE : type);
     const maxAnisotropy = texture.getScene()?.getEngine().getCaps().maxAnisotropy ?? 1;
-    return (jsxs(Fragment, { children: [texture.is2DArray && jsx(TextPropertyLine, { label: "Layers", value: depth?.toString() ?? "?" }), texture.is3D && jsx(TextPropertyLine, { label: "Depth", value: depth?.toString() ?? "?" }), jsx(TextPropertyLine, { label: "Format", value: displayFormat?.label ?? "unknown" }), !displayFormat?.hideType && !displayFormat?.compressed && jsx(TextPropertyLine, { label: "Type", value: displayType?.label ?? "unknown" }), !!displayFormat?.normalizable && !displayFormat?.compressed && displayType?.normalizable != undefined && (jsx(BooleanBadgePropertyLine, { label: "Normalized", value: displayType.normalizable })), jsx(BooleanBadgePropertyLine, { label: "Compressed", value: displayFormat?.compressed ?? false }), jsx(BooleanBadgePropertyLine, { label: "sRGB Buffers", value: useSRGBBuffer ?? false }), jsx(BoundProperty, { component: BooleanBadgePropertyLine, label: "Gamma Space", target: texture, propertyKey: "gammaSpace" }), jsx(BoundProperty, { component: BooleanBadgePropertyLine, label: "Has Alpha", target: texture, propertyKey: "hasAlpha" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Alpha from RGB", target: texture, propertyKey: "getAlphaFromRGB" }), jsx(BooleanBadgePropertyLine, { label: "3D", value: texture.is3D }), jsx(BooleanBadgePropertyLine, { label: "2D Array", value: texture.is2DArray }), jsx(BooleanBadgePropertyLine, { label: "Cube", value: texture.isCube }), jsx(BooleanBadgePropertyLine, { label: "Render Target", value: texture.isRenderTarget }), jsx(BooleanBadgePropertyLine, { label: "Mipmaps", value: !texture.noMipmap }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "UV Set", target: texture, propertyKey: "coordinatesIndex", min: 0, max: 3, step: 1 }), jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "Mode", target: texture, propertyKey: "coordinatesMode", options: CoordinatesMode }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Level", target: texture, propertyKey: "level", min: 0, max: 2, step: 0.01 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Anisotropy", target: texture, propertyKey: "anisotropicFilteringLevel", min: 1, max: maxAnisotropy, step: 1 })] }));
+    return (jsxs(Fragment, { children: [texture.is2DArray && jsx(TextPropertyLine, { label: "Layers", value: depth?.toString() ?? "?" }), texture.is3D && jsx(TextPropertyLine, { label: "Depth", value: depth?.toString() ?? "?" }), jsx(TextPropertyLine, { label: "Format", value: displayFormat?.label ?? "unknown" }), !displayFormat?.hideType && !displayFormat?.compressed && jsx(TextPropertyLine, { label: "Type", value: displayType?.label ?? "unknown" }), !!displayFormat?.normalizable && !displayFormat?.compressed && displayType?.normalizable != undefined && (jsx(BooleanBadgePropertyLine, { label: "Normalized", value: displayType.normalizable })), jsx(BooleanBadgePropertyLine, { label: "Compressed", value: displayFormat?.compressed ?? false }), jsx(BooleanBadgePropertyLine, { label: "sRGB Buffers", value: useSRGBBuffer ?? false }), jsx(BoundProperty, { component: BooleanBadgePropertyLine, label: "Gamma Space", target: texture, propertyKey: "gammaSpace" }), jsx(BoundProperty, { component: BooleanBadgePropertyLine, label: "Has Alpha", target: texture, propertyKey: "hasAlpha" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Alpha from RGB", target: texture, propertyKey: "getAlphaFromRGB" }), jsx(BooleanBadgePropertyLine, { label: "3D", value: texture.is3D }), jsx(BooleanBadgePropertyLine, { label: "2D Array", value: texture.is2DArray }), jsx(BooleanBadgePropertyLine, { label: "Cube", value: texture.isCube }), jsx(BooleanBadgePropertyLine, { label: "Render Target", value: texture.isRenderTarget }), jsx(BooleanBadgePropertyLine, { label: "Mipmaps", value: !texture.noMipmap }), jsx(TextPropertyLine, { label: "Samples", value: samples.toString() }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "UV Set", target: texture, propertyKey: "coordinatesIndex", min: 0, max: 3, step: 1 }), jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "Mode", target: texture, propertyKey: "coordinatesMode", options: CoordinatesMode }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Level", target: texture, propertyKey: "level", min: 0, max: 2, step: 0.01 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Anisotropy", target: texture, propertyKey: "anisotropicFilteringLevel", min: 1, max: maxAnisotropy, step: 1 })] }));
 };
 const BaseTextureTransformProperties = (props) => {
     const { texture } = props;
@@ -9480,15 +9612,136 @@ function ShowInspector(scene, options = {}) {
     return inspectorToken;
 }
 
+// Mappings for Inspector v1 property section names to Inspector v2 section names.
+const LegacyPropertiesSectionMapping = {
+    // Common sections
+    ["GENERAL"]: "General",
+    ["CUSTOM"]: "Custom",
+    ["COMMANDS"]: "Commands",
+    ["DEBUG"]: "Debug",
+    ["ADVANCED"]: "Advanced",
+    ["PROPERTIES"]: "Properties",
+    // Transform sections
+    ["TRANSFORMATIONS"]: "Transform",
+    ["TRANSFORMS"]: "Transform",
+    ["TRANSFORM"]: "Transform",
+    // Animation sections
+    ["ANIMATION"]: "Animation",
+    ["ANIMATION RANGES"]: "Animation Ranges",
+    ["ANIMATIONS"]: "Animation",
+    ["ANIMATION GENERAL CONTROL"]: "Animation Control",
+    ["CONTROLS"]: "Control",
+    ["INFOS"]: "Info",
+    // Camera sections
+    ["COLLISIONS"]: "Collision",
+    ["LIMITS"]: "Limits",
+    ["BEHAVIORS"]: "Behaviors",
+    // Material sections
+    ["TRANSPARENCY"]: "Transparency",
+    ["STENCIL"]: "Stencil",
+    ["STENCIL - FRONT"]: "Stencil Front",
+    ["STENCIL - BACK"]: "Stencil Back",
+    ["TEXTURES"]: "Textures",
+    ["LIGHTING & COLORS"]: "Lighting & Colors",
+    ["LEVELS"]: "Levels",
+    ["NORMAL MAP"]: "Normal Map",
+    ["RENDERING"]: "Rendering",
+    ["CHANNELS"]: "Channels",
+    // PBR Material sections
+    ["METALLIC WORKFLOW"]: "Metallic Workflow",
+    ["CLEAR COAT"]: "Clear Coat",
+    ["IRIDESCENCE"]: "Iridescence",
+    ["ANISOTROPIC"]: "Anisotropic",
+    ["SHEEN"]: "Sheen",
+    ["SUBSURFACE"]: "Subsurface",
+    // OpenPBR Material sections
+    ["BASE"]: "Base",
+    ["SPECULAR"]: "Specular",
+    ["COAT"]: "Coat",
+    ["FUZZ"]: "Fuzz",
+    ["EMISSION"]: "Emission",
+    ["THIN FILM"]: "Thin Film",
+    ["GEOMETRY"]: "Geometry",
+    // Sky Material
+    ["SKY"]: "Sky",
+    // Multi Material
+    ["CHILDREN"]: "Children",
+    // Mesh sections
+    ["DISPLAY"]: "Display",
+    ["DISPLAY OPTIONS"]: "Display Options",
+    ["NODE GEOMETRY"]: "Node Geometry",
+    ["MORPH TARGETS"]: "Morph Targets",
+    ["PHYSICS"]: "Physics",
+    ["OCCLUSIONS"]: "Occlusions",
+    ["EDGE RENDERING"]: "Edge Rendering",
+    ["OUTLINE & OVERLAY"]: "Outlines & Overlays",
+    // Light sections
+    ["SETUP"]: "Setup",
+    ["SHADOWS"]: "Shadows",
+    ["SHADOW GENERATOR"]: "Shadow Generator",
+    // Particle System sections
+    ["NODE PARTICLE EDITOR"]: "Node Particle Editor",
+    ["FILE"]: "File",
+    ["SNIPPET"]: "Snippet",
+    ["ATTRACTORS"]: "Attractors",
+    ["IMPOSTORS"]: "Impostors",
+    ["EMITTER"]: "Emitter",
+    ["SIZE"]: "Size",
+    ["LIFETIME"]: "Lifetime",
+    ["COLORS"]: "Color",
+    ["ROTATION"]: "Rotation",
+    ["SPRITESHEET"]: "Spritesheet",
+    // Sprite sections
+    ["CELLS"]: "Cells",
+    ["CELL"]: "Cell",
+    ["SCALE"]: "Scale",
+    // Post Process sections
+    ["CONFIGURATION"]: "Configuration",
+    ["BLOOM"]: "Bloom",
+    ["CHROMATIC ABERRATION"]: "Chromatic Aberration",
+    ["DEPTH OF FIELD"]: "Depth of Field",
+    ["FXAA"]: "FXAA",
+    ["GLOW LAYER"]: "Glow Layer",
+    ["GRAIN"]: "Grain",
+    ["IMAGE PROCESSING"]: "Image Processing",
+    ["SHARPEN"]: "Sharpen",
+    ["OPTIONS"]: "Options",
+    ["SSAO"]: "SSAO",
+    ["Denoiser"]: "Denoiser",
+    ["SSR"]: "SSR",
+    ["Voxel Shadows"]: "Voxel Shadows",
+    ["Screenspace Shadows"]: "Screenspace Shadows",
+    ["Automatic thickness computation"]: "Automatic Thickness Computation",
+    ["Blur"]: "Blur",
+    ["Attenuations"]: "Attenuations",
+    ["Color space"]: "Color Space",
+    // Scene sections
+    ["RENDERING MODE"]: "Rendering",
+    ["ENVIRONMENT"]: "Environment",
+    ["MATERIAL IMAGE PROCESSING"]: "Material Image Processing",
+    // Texture sections
+    ["PREVIEW"]: "Preview",
+    ["ADVANCED TEXTURE PROPERTIES"]: "Advanced Texture Properties",
+    // Frame Graph sections
+    ["TASKS"]: "Tasks",
+    // Metadata
+    ["METADATA"]: "Metadata",
+    ["XMP METADATA"]: "XMP Metadata",
+    // Variants
+    ["VARIANTS"]: "Variants",
+    // Node Material
+    ["INPUTS"]: "Inputs",
+};
+
 function ConvertOptions(v1Options) {
     // Options not currently handled:
     // • enablePopup: Do users care about this one?
     // • enableClose: Currently Inspector v2 does not allow panes/tabs to be closed.
-    // • gizmoCamera: Do users care about this one?
     // • skipDefaultFontLoading: Probably doesn't make sense for Inspector v2 using Fluent.
-    // TODO:
-    // • contextMenu
-    // • contextMenuOverride
+    // • contextMenuOverride: Currently there are no default section context menu items to override.
+    //                        If the create extension ends up adding context menu items to match v1
+    //                        behavior, then it should only enable that feature if contextMenuOverride
+    //                        is not set to true.
     v1Options = {
         overlay: false,
         showExplorer: true,
@@ -9523,6 +9776,23 @@ function ConvertOptions(v1Options) {
         };
         serviceDefinitions.push(initialTabServiceDefinition);
     }
+    if (v1Options.gizmoCamera) {
+        const { gizmoCamera } = v1Options;
+        const gizmoCameraServiceDefinition = {
+            friendlyName: "Gizmo Camera (Backward Compatibility)",
+            consumes: [GizmoServiceIdentity],
+            factory: (gizmoService) => {
+                // As a simple back compat solution, just keep the utility layer alive until Inspector is unloaded.
+                // This way we don't need to keep re-assigning the gizmo camera to the utility layer if it is recreated.
+                const utilityLayerRef = gizmoService.getUtilityLayer(gizmoCamera.getScene());
+                utilityLayerRef.value.setRenderCamera(gizmoCamera);
+                return {
+                    dispose: () => utilityLayerRef.dispose(),
+                };
+            },
+        };
+        serviceDefinitions.push(gizmoCameraServiceDefinition);
+    }
     if (v1Options.additionalNodes && v1Options.additionalNodes.length > 0) {
         const { additionalNodes } = v1Options;
         const additionalNodesServiceDefinition = {
@@ -9675,22 +9945,19 @@ function ConvertOptions(v1Options) {
  */
 class Inspector {
     static MarkLineContainerTitleForHighlighting(title) {
-        throw new Error("Not Implemented");
+        this.MarkMultipleLineContainerTitlesForHighlighting([title]);
     }
     static MarkMultipleLineContainerTitlesForHighlighting(titles) {
-        throw new Error("Not Implemented");
+        this._SectionHighlighter?.(titles);
     }
     static PopupEmbed() {
-        // Show with embed mode on (stacked right panes) and undocked?
-        throw new Error("Not Implemented");
+        this._PopupToggler?.("right");
     }
     static PopupSceneExplorer() {
-        // Show with all right panes (not stacked), scene explorer tab selected, and undocked?
-        throw new Error("Not Implemented");
+        this._PopupToggler?.("left");
     }
     static PopupInspector() {
-        // Show with all right panes (not stacked), properties tab selected, and undocked?
-        throw new Error("Not Implemented");
+        this._PopupToggler?.("right");
     }
     static get IsVisible() {
         return !!this._CurrentInspectorToken;
@@ -9705,7 +9972,86 @@ class Inspector {
         if (!scene || scene.isDisposed) {
             return;
         }
-        this._CurrentInspectorToken = ShowInspector(scene, ConvertOptions(userOptions));
+        let options = ConvertOptions(userOptions);
+        const serviceDefinitions = [];
+        const popupServiceDefinition = {
+            friendlyName: "Popup Service (Backward Compatibility)",
+            consumes: [ShellServiceIdentity],
+            factory: (shellService) => {
+                this._PopupToggler = (side) => {
+                    const sidePaneContainer = side === "left" ? shellService.leftSidePaneContainer : shellService.rightSidePaneContainer;
+                    if (sidePaneContainer.isDocked) {
+                        sidePaneContainer.undock();
+                    }
+                    else {
+                        sidePaneContainer.dock();
+                    }
+                };
+                return {
+                    dispose: () => (this._PopupToggler = null),
+                };
+            },
+        };
+        serviceDefinitions.push(popupServiceDefinition);
+        const selectionChangedServiceDefinition = {
+            friendlyName: "Selection Changed Service (Backward Compatibility)",
+            consumes: [SelectionServiceIdentity],
+            factory: (selectionService) => {
+                const selectionServiceObserver = selectionService.onSelectedEntityChanged.add(() => {
+                    this.OnSelectionChangeObservable.notifyObservers(selectionService.selectedEntity);
+                });
+                const legacyObserver = this.OnSelectionChangeObservable.add((entity) => {
+                    selectionService.selectedEntity = entity;
+                });
+                return {
+                    dispose: () => {
+                        selectionServiceObserver.remove();
+                        legacyObserver.remove();
+                    },
+                };
+            },
+        };
+        serviceDefinitions.push(selectionChangedServiceDefinition);
+        const propertyChangedServiceDefinition = {
+            friendlyName: "Property Changed Service (Backward Compatibility)",
+            consumes: [PropertiesServiceIdentity],
+            factory: (propertiesService) => {
+                const observer = propertiesService.onPropertyChanged.add((changeInfo) => {
+                    this.OnPropertyChangedObservable.notifyObservers({
+                        object: changeInfo.entity,
+                        property: changeInfo.propertyKey.toString(),
+                        value: changeInfo.newValue,
+                        initialValue: changeInfo.oldValue,
+                    });
+                });
+                return {
+                    dispose: () => {
+                        observer.remove();
+                    },
+                };
+            },
+        };
+        serviceDefinitions.push(propertyChangedServiceDefinition);
+        const sectionHighlighterServiceDefinition = {
+            friendlyName: "Section Highlighter Service (Backward Compatibility)",
+            consumes: [PropertiesServiceIdentity],
+            factory: (propertiesService) => {
+                this._SectionHighlighter = (sectionIds) => {
+                    propertiesService.highlightSections(sectionIds.map((id) => LegacyPropertiesSectionMapping[id] ?? id));
+                };
+                return {
+                    dispose: () => {
+                        this._SectionHighlighter = null;
+                    },
+                };
+            },
+        };
+        serviceDefinitions.push(sectionHighlighterServiceDefinition);
+        options = {
+            ...options,
+            serviceDefinitions: [...(options.serviceDefinitions ?? []), ...serviceDefinitions],
+        };
+        this._CurrentInspectorToken = ShowInspector(scene, options);
     }
     static Hide() {
         this._CurrentInspectorToken?.dispose();
@@ -9713,6 +10059,8 @@ class Inspector {
     }
 }
 Inspector._CurrentInspectorToken = null;
+Inspector._PopupToggler = null;
+Inspector._SectionHighlighter = null;
 Inspector.OnSelectionChangeObservable = new Observable();
 Inspector.OnPropertyChangedObservable = new Observable();
 
@@ -9972,4 +10320,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-DE0QdD6v.js.map
+//# sourceMappingURL=index-DUdNW7K3.js.map