@babylonjs/inspector 9.29.0 → 9.31.0

package/lib/lite/{index-D8vFySa7.js → index-Cy8gzpYG.js}

@@ -2,7 +2,7 @@ import { Observable } from '@babylonjs/core/Misc/observable.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { createContext, forwardRef, useContext, useState, useCallback, Component, useEffect, useMemo, useReducer, useRef, Children, isValidElement, useLayoutEffect, useImperativeHandle, cloneElement, createElement, Suspense, lazy } from 'react';
 import { tokens, makeStyles, Tooltip as Tooltip$1, Button as Button$1, Spinner, useFluent, Accordion as Accordion$1, AccordionHeader, Subtitle2Stronger, AccordionPanel, Divider, MessageBar as MessageBar$1, MessageBarBody, AccordionItem, SearchBox as SearchBox$1, Portal, mergeClasses, createLightTheme, createDarkTheme, createDOMRenderer, FluentProvider, RendererProvider, TeachingPopover, TeachingPopoverSurface, TeachingPopoverHeader, TeachingPopoverBody, useId, useToastController, Toast, ToastTitle, Toaster, Menu, MenuTrigger, SplitButton, MenuPopover, MenuList, MenuItem, Toolbar as Toolbar$1, ToolbarRadioButton, MenuGroup, MenuGroupHeader, Link as Link$1, Caption1, Body1, ToggleButton as ToggleButton$1, InfoLabel as InfoLabel$1, Body1Strong, Checkbox as Checkbox$1, Switch as Switch$1, Dropdown as Dropdown$1, Option, useMergedRefs, Input, Slider as Slider$1, MenuItemRadio, Dialog, DialogSurface, DialogBody, DialogTitle, DialogContent, DialogActions, List as List$1, ListItem, useComboboxFilter, Combobox, MessageBarTitle, Popover as Popover$1, PopoverTrigger, PopoverSurface, Field, Textarea as Textarea$1, PresenceBadge, treeItemLevelToken, typographyStyles, FlatTree, FlatTreeItem, MenuDivider, TreeItemLayout, MenuItemCheckbox, ColorPicker, ColorArea, ColorSlider, AlphaSlider, ColorSwatch } from '@fluentui/react-components';
-import { ErrorCircleRegular, EyeFilled, EyeOffRegular, CheckmarkFilled, EditRegular, FilterRegular, PinFilled, PinRegular, ArrowCircleUpRegular, PanelLeftExpandRegular, PanelRightExpandRegular, PanelLeftContractRegular, PanelRightContractRegular, PictureInPictureEnterRegular, MoreHorizontalRegular, LayoutColumnTwoFocusLeftFilled, LayoutColumnTwoSplitLeftFocusTopLeftFilled, LayoutColumnTwoSplitLeftFocusBottomLeftFilled, LayoutColumnTwoFocusRightFilled, LayoutColumnTwoSplitRightFocusTopRightFilled, LayoutColumnTwoSplitRightFocusBottomRightFilled, SettingsRegular, ChevronCircleRight16Regular, ChevronCircleRight20Regular, ChevronCircleDown16Regular, ChevronCircleDown20Regular, Copy16Regular, CopyRegular, DocumentTextRegular, ArrowBidirectionalUpDownFilled, ArrowClockwiseRegular, WeatherSunnyRegular, WeatherMoonRegular, InfoRegular, WarningRegular, CheckmarkCircleRegular, DeleteFilled, LinkDismissRegular, LinkEditRegular, AddRegular, DeleteRegular, ArrowUploadRegular, createFluentIcon, TextSortAscendingRegular, GlobeRegular, ArrowExpandAllRegular, ArrowCollapseAllRegular, ChevronRightRegular, CubeTreeRegular, EngineRegular, WindowRegular, TextFieldRegular, PersonSquareRegular, SaveRegular, ArrowUndoRegular, BracesRegular, BracesDismiss16Regular, CameraRegular, LightbulbRegular, EyeRegular, MyLocationRegular, LayerDiagonalPersonRegular, TextTRegular, ImageRegular } from '@fluentui/react-icons';
+import { ErrorCircleRegular, EyeFilled, EyeOffRegular, CheckmarkFilled, EditRegular, FilterRegular, PinFilled, PinRegular, ArrowCircleUpRegular, PanelLeftExpandRegular, PanelRightExpandRegular, PanelLeftContractRegular, PanelRightContractRegular, PictureInPictureEnterRegular, MoreHorizontalRegular, LayoutColumnTwoFocusLeftFilled, LayoutColumnTwoSplitLeftFocusTopLeftFilled, LayoutColumnTwoSplitLeftFocusBottomLeftFilled, LayoutColumnTwoFocusRightFilled, LayoutColumnTwoSplitRightFocusTopRightFilled, LayoutColumnTwoSplitRightFocusBottomRightFilled, SettingsRegular, ChevronCircleRight16Regular, ChevronCircleRight20Regular, ChevronCircleDown16Regular, ChevronCircleDown20Regular, Copy16Regular, CopyRegular, DocumentTextRegular, ArrowBidirectionalUpDownFilled, ArrowClockwiseRegular, WeatherSunnyRegular, WeatherMoonRegular, InfoRegular, WarningRegular, CheckmarkCircleRegular, DeleteFilled, LinkDismissRegular, LinkEditRegular, AddRegular, DeleteRegular, ArrowUploadRegular, createFluentIcon, TextSortAscendingRegular, GlobeRegular, ArrowExpandAllRegular, ArrowCollapseAllRegular, ChevronRightRegular, CubeTreeRegular, EngineRegular, WindowRegular, TextFieldRegular, PersonSquareRegular, TargetRegular, SaveRegular, ArrowUndoRegular, BracesRegular, BracesDismiss16Regular, CameraRegular, PauseFilled, PlayFilled, StackRegular, FilmstripRegular, LightbulbRegular, EyeRegular, MyLocationRegular, LayerDiagonalPersonRegular, TextTRegular, ImageRegular } from '@fluentui/react-icons';
 import { DataStorage } from '@babylonjs/core/Misc/dataStorage.js';
 import { AsyncLock } from '@babylonjs/core/Misc/asyncLock.js';
 import { Deferred } from '@babylonjs/core/Misc/deferred.js';
@@ -10,7 +10,7 @@ import { useResizeHandle } from '@fluentui-contrib/react-resize-handle';
 import { Collapse as Collapse$1, Fade } from '@fluentui/react-motion-components-preview';
 import { Logger } from '@babylonjs/core/Misc/logger.js';
 import { createRoot } from 'react-dom/client';
-import { getRenderingContexts, getRenderingContextKind, quatToEulerXYZ, eulerToQuat, getMaterialFamily, setSubtreeVisible, spriteBlendOpaque, spriteBlendOneOne, spriteBlendMultiply, spriteBlendAdditive, spriteBlendPremultiplied, spriteBlendAlpha, removeFromScene, getMaterialTextures, setParent, resizeEngine } from '@babylonjs/lite';
+import { getRenderingContexts, getRenderingContextKind, disposePicker, createGpuPicker, pickAsync, goToFrame, playAnimation, quatToEulerXYZTuple, eulerXYZToQuatTuple, getMaterialSource, getMaterialFamily, getShaderTexture, getPbrMetallicReflectance, getPbrClearCoat, getPbrSheen, getPbrIridescence, getPbrAnisotropy, getPbrSubsurface, getPbrTransmission, getStandardEmissiveTexture, getStandardBumpTexture, getStandardSpecularTexture, getStandardAmbientTexture, getStandardLightmapTexture, getStandardOpacityTexture, getStandardReflectionTexture, getStandardReflectionCubeTexture, getTextureMetadata, getTextureCoordinateIndex, hasTextureTransform, getTextureTransform, isMaterialView, setSubtreeVisible, spriteBlendOpaque, spriteBlendOneOne, spriteBlendMultiply, spriteBlendAdditive, spriteBlendPremultiplied, spriteBlendAlpha, removeFromScene, pauseAnimation, setParent, resizeEngine } from '@babylonjs/lite';
 import { VirtualizerScrollView } from '@fluentui-contrib/react-virtualizer';
 import { UniqueIdGenerator } from '@babylonjs/core/Misc/uniqueIdGenerator.js';
 import { Color3, Color4 } from '@babylonjs/core/Maths/math.color.js';
@@ -3254,29 +3254,22 @@ const useStyles$g = makeStyles({
     },
 });
 /**
- * Toggles between two states using a button with icons.
- * If no disabledIcon is provided, the button will toggle between visual enabled/disabled states without an icon change
+ * Displays a controlled toggle button with icons.
+ * The parent supplies the checked state through value; clicks request the opposite value through onChange.
+ * If no uncheckedIcon is provided, the same icon is used for both states.
  *
- * @param props
- * @returns
+ * @param props The controlled state, change callback, icons, and button presentation.
+ * @returns The toggle button.
  */
 const ToggleButton = (props) => {
     ToggleButton.displayName = "ToggleButton";
     const { value, onChange, title, appearance = "subtle", ariaLabel } = props;
     const { size } = useContext(ToolContext);
     const classes = useStyles$g();
-    const [checked, setChecked] = useState(value);
     const toggle = useCallback(() => {
-        setChecked((prevChecked) => {
-            const enabled = !prevChecked;
-            onChange(enabled);
-            return enabled;
-        });
-    }, [onChange]);
-    useEffect(() => {
-        setChecked(props.value);
-    }, [props.value]);
-    return (jsx(Tooltip, { content: title ?? "", positioning: props.titlePositioning, children: jsx(ToggleButton$1, { className: classes.button, size: size, "aria-label": ariaLabel ?? title, icon: checked ? jsx(props.checkedIcon, {}) : props.uncheckedIcon ? jsx(props.uncheckedIcon, {}) : jsx(props.checkedIcon, {}), appearance: appearance, checked: checked, onClick: toggle }) }));
+        onChange(!value);
+    }, [value, onChange]);
+    return (jsx(Tooltip, { content: title ?? "", positioning: props.titlePositioning, children: jsx(ToggleButton$1, { className: classes.button, size: size, "aria-label": ariaLabel ?? title, icon: value ? jsx(props.checkedIcon, {}) : props.uncheckedIcon ? jsx(props.uncheckedIcon, {}) : jsx(props.checkedIcon, {}), appearance: appearance, checked: value, onClick: toggle }) }));
 };
 
 const useInfoLabelStyles = makeStyles({
@@ -5137,7 +5130,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-D1JivcAu.js');
+                    const { ExtensionListServiceDefinition } = await import('./extensionsListService-Bl1rTNl1.js');
                     serviceContainer.addService(ExtensionListServiceDefinition);
                 }
                 // Register all external services (that make up a unique tool).
@@ -5558,6 +5551,11 @@ const useStyles$9 = makeStyles({
         minWidth: "fit-content",
         maxWidth: "350px",
     },
+    compactOption: {
+        fontSize: tokens.fontSizeBase200,
+        lineHeight: tokens.lineHeightBase200,
+        padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalS}`,
+    },
 });
 /**
  * Wrapper around a Fluent ComboBox that allows for filtering options.
@@ -5581,13 +5579,13 @@ const ComboBox = forwardRef((props, ref) => {
         noOptionsMessage: "No items match your search.",
         optionToReactKey: (option) => option.value,
         optionToText: (option) => option.children,
-        renderOption: (option) => (jsx(Option, { value: option.value, text: option.children, children: option.children }, option.value)),
+        renderOption: (option) => (jsx(Option, { value: option.value, text: option.children, className: size === "small" ? styles.compactOption : undefined, children: option.children }, option.value)),
     });
     const onOptionSelect = (_e, data) => {
         setQuery(data.optionText ?? "");
         data.optionValue && props.onChange(data.optionValue);
     };
-    return (jsxs("div", { className: styles.root, children: [jsx("label", { id: comboId, children: props.label }), jsx(Combobox, { ref: ref, defaultOpen: props.defaultOpen, size: size, root: { className: styles.comboBox }, input: { className: styles.input }, listbox: { className: styles.listbox }, onOptionSelect: onOptionSelect, "aria-labelledby": comboId, placeholder: "Search..", onChange: (ev) => setQuery(ev.target.value), value: query, children: children })] }));
+    return (jsxs("div", { className: styles.root, children: [jsx("label", { id: comboId, children: props.label }), jsx(Combobox, { ref: ref, defaultOpen: props.defaultOpen, disabled: props.disabled, size: size, root: { className: styles.comboBox }, input: { className: styles.input }, listbox: { className: styles.listbox }, onOptionSelect: onOptionSelect, "aria-label": props.ariaLabel, "aria-labelledby": props.ariaLabel ? undefined : comboId, placeholder: "Search..", onChange: (ev) => setQuery(ev.target.value), value: query, children: children })] }));
 });
 
 const useDraggableStyles = makeStyles({
@@ -5661,26 +5659,18 @@ const useStyles$8 = makeStyles({
     },
 });
 /**
- * A generic primitive component with a ComboBox for selecting from a list of entities.
- * Supports entities with duplicate names by using uniqueId for identity.
- * @param props ChooseEntityProps
- * @returns EntitySelector component
+ * Displays a linked resource with one unlink-or-edit action, or a selector when unlinked.
+ * @param props Resource identity, selection, navigation, and supported actions.
+ * @returns The linked value or its replacement selector.
  */
-function EntitySelector(props) {
-    const { value, onLink, getEntities, getName, filter, defaultValue } = props;
-    const onChange = props.onChange;
+function ResourceSelector(props) {
+    const { value, getEntities, getName, getId, filter, onSelect, onClear, onLink, disabled, ariaLabel, showEmptySelector } = props;
     const classes = useStyles$8();
     const comboBoxRef = useRef(null);
-    // Build options with uniqueId as key
-    const options = useMemo(() => {
-        return getEntities()
-            .filter((e) => e.uniqueId !== undefined && (!filter || filter(e)))
-            .map((entity) => ({
-            label: getName(entity)?.toString() || "",
-            value: entity.uniqueId.toString(),
-        }))
-            .sort((a, b) => a.label.localeCompare(b.label));
-    }, [getEntities, getName, filter]);
+    const options = useMemo(() => getEntities()
+        .filter((entity) => !filter || filter(entity))
+        .map((entity) => ({ label: getName(entity)?.toString() || "", value: getId(entity) }))
+        .sort((a, b) => a.label.localeCompare(b.label)), [getEntities, getName, getId, filter]);
     const [isEditing, setIsEditing] = useState(false);
     const [enteringEditMode, pulseEnteringEditMode] = useImpulse();
     useEffect(() => {
@@ -5688,28 +5678,37 @@ function EntitySelector(props) {
             comboBoxRef.current?.focus();
         }
     }, [enteringEditMode]);
-    const handleEntitySelect = (key) => {
-        const entity = getEntities().find((e) => e.uniqueId.toString() === key);
-        onChange?.(entity ?? null);
-        setIsEditing(false);
-    };
-    // Get current entity key for display
-    const currentKey = value ? value.uniqueId.toString() : "";
-    if (value && !isEditing) {
-        // If there is a value and we are not editing, show the link view
-        return (jsxs("div", { className: classes.linkDiv, children: [jsx(Tooltip$1, { content: getName(value), relationship: "label", children: jsx(Link, { className: classes.link, value: getName(value), onLink: () => onLink(value) }) }), onChange &&
-                    (defaultValue !== undefined ? (jsx(Tooltip$1, { content: "Unlink", relationship: "label", children: jsx(Button, { icon: LinkDismissRegular, onClick: () => {
-                                pulseEnteringEditMode(true);
-                                onChange(defaultValue);
-                            } }) })) : (jsx(Tooltip$1, { content: "Edit Link", relationship: "label", children: jsx(Button, { icon: LinkEditRegular, onClick: () => {
-                                pulseEnteringEditMode(true);
-                                setIsEditing(true);
-                            } }) })))] }));
-    }
-    else {
-        // Otherwise, show the ComboBox for selection
-        return jsx(ComboBox, { ref: comboBoxRef, defaultOpen: enteringEditMode, label: "", options: options, value: currentKey, onChange: handleEntitySelect });
-    }
+    if (value !== null && !isEditing) {
+        return (jsxs("div", { className: classes.linkDiv, children: [jsx(Tooltip$1, { content: getName(value), relationship: "label", children: jsx(Link, { className: classes.link, value: getName(value), onLink: onLink ? () => onLink(value) : undefined, "aria-label": onLink && ariaLabel ? `${ariaLabel}: open ${getName(value)}` : undefined }) }), onClear ? (jsx(Tooltip$1, { content: "Unlink", relationship: "label", children: jsx(Button, { icon: LinkDismissRegular, ariaLabel: ariaLabel ? `Clear ${ariaLabel}` : "Unlink", disabled: disabled, onClick: () => {
+                            pulseEnteringEditMode(true);
+                            onClear();
+                        } }) })) : onSelect ? (jsx(Tooltip$1, { content: "Edit Link", relationship: "label", children: jsx(Button, { icon: LinkEditRegular, ariaLabel: ariaLabel ? `Change ${ariaLabel}` : "Edit Link", disabled: disabled, onClick: () => {
+                            pulseEnteringEditMode(true);
+                            setIsEditing(true);
+                        } }) })) : undefined] }));
+    }
+    if (!onSelect && !showEmptySelector) {
+        return jsx(Link, { value: "None" });
+    }
+    return (jsx(ComboBox, { ref: comboBoxRef, defaultOpen: enteringEditMode, label: "", ariaLabel: ariaLabel, disabled: disabled, options: options, value: value !== null ? getId(value) : "", onChange: (id) => {
+            onSelect?.(getEntities().find((entity) => getId(entity) === id) ?? null);
+            setIsEditing(false);
+        } }));
+}
+ResourceSelector.displayName = "ResourceSelector";
+
+const GetEntityId$1 = (entity) => entity.uniqueId.toString();
+/**
+ * A generic primitive component with a ComboBox for selecting from a list of entities.
+ * Supports entities with duplicate names by using uniqueId for identity.
+ * @param props ChooseEntityProps
+ * @returns EntitySelector component
+ */
+function EntitySelector(props) {
+    const { value, onLink, getEntities, getName, filter, defaultValue, disabled } = props;
+    const onChange = props.onChange;
+    const filterEntity = useCallback((entity) => entity.uniqueId !== undefined && (!filter || filter(entity)), [filter]);
+    return (jsx(ResourceSelector, { value: value, getEntities: getEntities, getName: getName, getId: GetEntityId$1, filter: filterEntity, onSelect: onChange, onClear: onChange && defaultValue !== undefined ? () => onChange(defaultValue) : undefined, onLink: onLink, disabled: disabled, showEmptySelector: true }));
 }
 EntitySelector.displayName = "EntitySelector";
 
@@ -7101,10 +7100,19 @@ const ActionCommand = (props) => {
 };
 const ToggleCommand = (props) => {
     const { command } = props;
+    const readCommandState = useCallback(() => [command.icon, command.isEnabled], [command]);
     // eslint-disable-next-line @typescript-eslint/naming-convention
-    const [Icon, isEnabled] = useObservableState(useCallback(() => [command.icon, command.isEnabled], [command]), command.onChange);
+    const [[Icon, isEnabled], setCommandState] = useState(readCommandState);
+    useEffect(() => {
+        const observer = command.onChange?.add(() => setCommandState(readCommandState()));
+        setCommandState(readCommandState());
+        return () => observer?.remove();
+    }, [command, readCommandState]);
     // TODO-iv2: Consolidate icon prop passing approach for inspector and shared components
-    return (jsx(ToggleButton, { appearance: "transparent", title: GetCommandDescription(command), titlePositioning: "after", checkedIcon: Icon, value: isEnabled, onChange: (val) => (command.isEnabled = val) }));
+    return (jsx(ToggleButton, { appearance: "transparent", title: GetCommandDescription(command), titlePositioning: "after", checkedIcon: Icon, value: isEnabled, onChange: (value) => {
+            command.isEnabled = value;
+            setCommandState(readCommandState());
+        } }));
 };
 // This "placeholder" command has a blank icon and is a no-op. It is used for aside
 // alignment when some toggle commands are enabled. See more details on the commands
@@ -7587,6 +7595,7 @@ function UntypeRenderingContextNodeProvider(provider) {
         predicate: (context) => provider.predicate(context),
         getNodes: (context) => (provider.predicate(context) ? provider.getNodes(context) : []),
         getSnapshot: (context) => (provider.predicate(context) ? provider.getSnapshot(context) : []),
+        onChanged: provider.onChanged,
     };
 }
 // The predicate validates the subtype before the presentation is requested. Wrapping the icon then
@@ -7793,6 +7802,7 @@ const EngineExplorerServiceDefinition = {
                     order: provider.order,
                     predicate: (parent) => typeof parent === "object" && parent !== null && isRenderingContext(parent) && untypedProvider.predicate(parent),
                     getNodes: untypedProvider.getNodes,
+                    onChanged: untypedProvider.onChanged,
                 });
                 let isRegistered = true;
                 return {
@@ -7842,6 +7852,337 @@ const EngineSelectionServiceDefinition = {
     },
 };
 
+function GetSceneContexts(engine) {
+    return engine.surfaces.flatMap((surface) => getRenderingContexts(surface).filter((context) => getRenderingContextKind(context) === "scene"));
+}
+function IsSceneNode(entity) {
+    return (typeof entity === "object" &&
+        entity !== null &&
+        "name" in entity &&
+        "children" in entity &&
+        "position" in entity &&
+        "rotationQuaternion" in entity &&
+        "scaling" in entity &&
+        "parent" in entity);
+}
+function IsMesh(entity) {
+    return IsSceneNode(entity) && "material" in entity && "receiveShadows" in entity;
+}
+function IsCamera(entity) {
+    return typeof entity === "object" && entity !== null && "fov" in entity && "nearPlane" in entity && "farPlane" in entity && "children" in entity && "worldMatrix" in entity;
+}
+function IsArcRotateCamera(entity) {
+    return IsCamera(entity) && "alpha" in entity && "beta" in entity && "radius" in entity && "target" in entity;
+}
+function IsFreeCamera(entity) {
+    return IsCamera(entity) && "position" in entity && "target" in entity && "speed" in entity;
+}
+function IsLight(entity) {
+    return typeof entity === "object" && entity !== null && "lightType" in entity && "children" in entity && "parent" in entity && "worldMatrix" in entity;
+}
+function IsDirectionalLight(entity) {
+    return IsLight(entity) && entity.lightType === "directional";
+}
+function IsPointLight(entity) {
+    return IsLight(entity) && entity.lightType === "point";
+}
+function IsSpotLight(entity) {
+    return IsLight(entity) && entity.lightType === "spot";
+}
+function IsHemisphericLight(entity) {
+    return IsLight(entity) && entity.lightType === "hemispheric";
+}
+function GetSceneNodes(scene) {
+    const nodes = new Set();
+    const addNode = (node) => {
+        if (nodes.has(node)) {
+            return;
+        }
+        nodes.add(node);
+        for (const child of node.children) {
+            addNode(child);
+        }
+    };
+    for (const mesh of scene.meshes) {
+        let root = mesh;
+        while (IsSceneNode(root.parent)) {
+            root = root.parent;
+        }
+        addNode(root);
+    }
+    return [...nodes];
+}
+function GetSceneNodeRoots(scene) {
+    const nodes = GetSceneNodes(scene);
+    const nodeSet = new Set(nodes);
+    return nodes.filter((node) => !IsSceneNode(node.parent) || !nodeSet.has(node.parent));
+}
+function IsSceneNodeDescendantOf(node, ancestor) {
+    let parent = node.parent;
+    while (typeof parent === "object" && parent !== null) {
+        if (parent === ancestor) {
+            return true;
+        }
+        if (!IsSceneNode(parent)) {
+            return false;
+        }
+        parent = parent.parent;
+    }
+    return false;
+}
+function SetVector3Value(target, value) {
+    const x = "x" in value ? value.x : value[0];
+    const y = "x" in value ? value.y : value[1];
+    const z = "x" in value ? value.z : value[2];
+    const observableTarget = target;
+    if (typeof observableTarget.set === "function") {
+        observableTarget.set(x, y, z);
+    }
+    else {
+        target.x = x;
+        target.y = y;
+        target.z = z;
+    }
+}
+function SetQuaternionValue(target, value) {
+    const x = "x" in value ? value.x : value[0];
+    const y = "x" in value ? value.y : value[1];
+    const z = "x" in value ? value.z : value[2];
+    const w = "x" in value ? value.w : value[3];
+    const observableTarget = target;
+    if (typeof observableTarget.set === "function") {
+        observableTarget.set(x, y, z, w);
+    }
+    else {
+        target.x = x;
+        target.y = y;
+        target.z = z;
+        target.w = w;
+    }
+}
+function GetLightDisplayName(light, index) {
+    const typeName = `${light.lightType.charAt(0).toUpperCase()}${light.lightType.slice(1)}`;
+    return `${typeName} Light ${index + 1}`;
+}
+function GetShadowGeneratorDisplayName(scene, shadowGenerator) {
+    const lightIndex = scene.lights.findIndex((light) => light.shadowGenerator === shadowGenerator);
+    return lightIndex === -1 ? `Shadow Generator ${scene.shadowGenerators.indexOf(shadowGenerator) + 1}` : `${GetLightDisplayName(scene.lights[lightIndex], lightIndex)} Shadows`;
+}
+
+/**
+ * Adds opt-in mesh picking to the canvases hosting Babylon Lite scenes.
+ * Picking uses CSS canvas coordinates and updates the shared Inspector selection.
+ */
+const PickingServiceDefinition = {
+    friendlyName: "Babylon Lite Picking",
+    consumes: [EngineContextIdentity, ShellServiceIdentity, SelectionServiceIdentity, WatcherServiceIdentity],
+    factory: (engineContext, shellService, selectionService, watcherService) => {
+        const onChanged = new Observable();
+        const pickers = new Map();
+        const canvasBindings = new Map();
+        const documentBindings = new Map();
+        let toolbarRegistration;
+        let enabled = false;
+        let disposed = false;
+        let generation = 0;
+        const retirePicker = (scene, state) => {
+            pickers.delete(scene);
+            state.retired = true;
+            // GPU readback cannot be cancelled. Keep its buffers alive until all outstanding picks finish.
+            if (state.pending === 0) {
+                disposePicker(state.picker);
+            }
+        };
+        const pickCanvasAsync = async (canvas, x, y) => {
+            const requestGeneration = ++generation;
+            const scenes = GetSceneContexts(engineContext.engine).filter((scene) => scene.surface.canvas === canvas);
+            const isCurrent = () => !disposed && enabled && generation === requestGeneration;
+            try {
+                // Later scenes render over earlier ones on the same surface.
+                for (const scene of scenes.reverse()) {
+                    if (!isCurrent()) {
+                        return;
+                    }
+                    const camera = scene.camera;
+                    if (!camera || scene.meshes.length === 0) {
+                        continue;
+                    }
+                    let state = pickers.get(scene);
+                    if (!state) {
+                        state = { picker: createGpuPicker(scene), pending: 0, retired: false };
+                        pickers.set(scene, state);
+                    }
+                    state.pending++;
+                    let result;
+                    try {
+                        // Lite serializes overlapping requests on each picker. A mesh filter also excludes
+                        // contributors (such as billboards) that do not yet have Inspector selection support.
+                        // eslint-disable-next-line no-await-in-loop
+                        result = await pickAsync(state.picker, x, y, { filter: (mesh) => mesh.visible !== false });
+                    }
+                    finally {
+                        state.pending--;
+                        if (state.retired && state.pending === 0) {
+                            disposePicker(state.picker);
+                        }
+                    }
+                    if (!isCurrent() || state.retired || scene.camera !== camera || !GetSceneContexts(engineContext.engine).includes(scene)) {
+                        return;
+                    }
+                    if (result.hit && result.pickedMesh && scene.meshes.some((mesh) => mesh === result.pickedMesh && mesh.visible !== false && mesh.pickable !== false)) {
+                        selectionService.selectedEntity = result.pickedMesh;
+                        return;
+                    }
+                }
+            }
+            catch (error) {
+                Logger.Warn(`Babylon Lite GPU picking failed: ${error}`);
+            }
+        };
+        const bindCanvas = (canvas) => {
+            const originalCursor = canvas.style.cursor;
+            canvas.style.cursor = "crosshair";
+            let pointer;
+            const isDragged = (event) => !!pointer && Math.hypot(event.clientX - pointer.x, event.clientY - pointer.y) > 5;
+            const onPointerDown = (event) => {
+                pointer = event.isPrimary && event.button === 0 ? { id: event.pointerId, x: event.clientX, y: event.clientY, dragged: false } : undefined;
+            };
+            const onPointerMove = (event) => {
+                if (pointer?.id === event.pointerId && isDragged(event)) {
+                    pointer.dragged = true;
+                }
+            };
+            const onPointerCancel = () => {
+                pointer = undefined;
+            };
+            const onPointerUp = (event) => {
+                const tap = pointer?.id === event.pointerId && event.button === 0 && !pointer.dragged && !isDragged(event);
+                pointer = undefined;
+                if (!tap) {
+                    return;
+                }
+                const rect = canvas.getBoundingClientRect();
+                if (rect.width <= 0 || rect.height <= 0) {
+                    return;
+                }
+                // Account for CSS scaling without applying DPR; Lite's picker handles backing-store scaling.
+                const x = ((event.clientX - rect.left) * (canvas.offsetWidth || canvas.clientWidth)) / rect.width - canvas.clientLeft;
+                const y = ((event.clientY - rect.top) * (canvas.offsetHeight || canvas.clientHeight)) / rect.height - canvas.clientTop;
+                if (x < 0 || y < 0 || x >= canvas.clientWidth || y >= canvas.clientHeight) {
+                    return;
+                }
+                void pickCanvasAsync(canvas, x, y);
+            };
+            canvas.addEventListener("pointerdown", onPointerDown);
+            canvas.addEventListener("pointermove", onPointerMove);
+            canvas.addEventListener("pointerup", onPointerUp);
+            canvas.addEventListener("pointercancel", onPointerCancel);
+            canvas.addEventListener("pointerleave", onPointerCancel);
+            return () => {
+                canvas.removeEventListener("pointerdown", onPointerDown);
+                canvas.removeEventListener("pointermove", onPointerMove);
+                canvas.removeEventListener("pointerup", onPointerUp);
+                canvas.removeEventListener("pointercancel", onPointerCancel);
+                canvas.removeEventListener("pointerleave", onPointerCancel);
+                canvas.style.cursor = originalCursor;
+            };
+        };
+        const refresh = () => {
+            const scenes = disposed ? [] : GetSceneContexts(engineContext.engine);
+            if (scenes.length === 0) {
+                enabled = false;
+                toolbarRegistration?.dispose();
+                toolbarRegistration = undefined;
+            }
+            else if (!toolbarRegistration) {
+                toolbarRegistration = shellService.addToolbarItem({
+                    key: "Picking Service",
+                    verticalLocation: "top",
+                    horizontalLocation: "left",
+                    teachingMoment: false,
+                    component: pickingToolbar,
+                });
+            }
+            const activeScenes = enabled ? scenes : [];
+            // DOM canvas constructors differ across windows; offscreen canvases have no ownerDocument.
+            const canvases = new Set(activeScenes.map((scene) => scene.surface.canvas).filter((canvas) => "ownerDocument" in canvas));
+            const documents = new Set([...canvases].map((canvas) => canvas.ownerDocument));
+            for (const [canvas, unbind] of canvasBindings) {
+                if (!canvases.has(canvas)) {
+                    unbind();
+                    canvasBindings.delete(canvas);
+                }
+            }
+            for (const canvas of canvases) {
+                if (!canvasBindings.has(canvas)) {
+                    canvasBindings.set(canvas, bindCanvas(canvas));
+                }
+            }
+            for (const [document, unbind] of documentBindings) {
+                if (!documents.has(document)) {
+                    unbind();
+                    documentBindings.delete(document);
+                }
+            }
+            for (const document of documents) {
+                if (!documentBindings.has(document)) {
+                    const onKeyDown = (event) => {
+                        if (event.key === "Escape") {
+                            setEnabled(false);
+                        }
+                    };
+                    document.addEventListener("keydown", onKeyDown);
+                    documentBindings.set(document, () => document.removeEventListener("keydown", onKeyDown));
+                }
+            }
+            for (const [scene, state] of pickers) {
+                if (!activeScenes.includes(scene)) {
+                    retirePicker(scene, state);
+                }
+            }
+        };
+        const setEnabled = (value) => {
+            if (disposed || enabled === value) {
+                return;
+            }
+            enabled = value;
+            generation++;
+            refresh();
+            onChanged.notifyObservers();
+        };
+        const pickingToolbar = () => {
+            const pickingEnabled = useObservableState(() => enabled, onChanged);
+            useKeyListener({
+                onKeyDown: (event) => {
+                    if (event.key === "Escape") {
+                        setEnabled(false);
+                    }
+                },
+            });
+            return (jsx(ToggleButton, { title: `${pickingEnabled ? "Disable" : "Enable"} Picking`, appearance: "transparent", checkedIcon: TargetRegular, value: pickingEnabled, onChange: setEnabled }));
+        };
+        const selectionObserver = selectionService.onSelectedEntityChanged.add(() => generation++);
+        const topologyWatcher = watcherService.watchValue(() => GetSceneContexts(engineContext.engine), () => {
+            generation++;
+            refresh();
+        }, (left, right) => left.length === right.length && left.every((scene, index) => scene === right[index]));
+        refresh();
+        return {
+            dispose: () => {
+                if (disposed) {
+                    return;
+                }
+                disposed = true;
+                generation++;
+                refresh();
+                topologyWatcher.dispose();
+                selectionObserver.remove();
+                onChanged.clear();
+            },
+        };
+    },
+};
+
 /**
  * Translates a property value to react state, updating the state whenever the property changes.
  * @param target The object containing the property to observe.
@@ -8226,123 +8567,291 @@ const EnginePropertiesServiceDefinition = {
     },
 };
 
-function GetSceneContexts(engine) {
-    return engine.surfaces.flatMap((surface) => getRenderingContexts(surface).filter((context) => getRenderingContextKind(context) === "scene"));
-}
-function IsSceneNode(entity) {
-    return (typeof entity === "object" &&
-        entity !== null &&
-        "name" in entity &&
-        "children" in entity &&
-        "position" in entity &&
-        "rotationQuaternion" in entity &&
-        "scaling" in entity &&
-        "parent" in entity);
-}
-function IsMesh(entity) {
-    return IsSceneNode(entity) && "material" in entity && "receiveShadows" in entity;
-}
-function IsCamera(entity) {
-    return typeof entity === "object" && entity !== null && "fov" in entity && "nearPlane" in entity && "farPlane" in entity && "children" in entity && "worldMatrix" in entity;
+const PrettyJSONIndent = 2;
+function IsParsable(metadata) {
+    try {
+        const parsed = JSON.parse(metadata);
+        return !!parsed && !IsString(parsed);
+    }
+    catch {
+        return false;
+    }
 }
-function IsArcRotateCamera(entity) {
-    return IsCamera(entity) && "alpha" in entity && "beta" in entity && "radius" in entity && "target" in entity;
+/**
+ * Checks if the input is a string.
+ * @param input - any input to check
+ * @returns boolean - true if the input is a string, false otherwise
+ */
+function IsString(input) {
+    return typeof input === "string" || input instanceof String;
 }
-function IsFreeCamera(entity) {
-    return IsCamera(entity) && "position" in entity && "target" in entity && "speed" in entity;
-}
-function IsLight(entity) {
-    return typeof entity === "object" && entity !== null && "lightType" in entity && "children" in entity && "parent" in entity && "worldMatrix" in entity;
-}
-function IsDirectionalLight(entity) {
-    return IsLight(entity) && entity.lightType === "directional";
-}
-function IsPointLight(entity) {
-    return IsLight(entity) && entity.lightType === "point";
+/**
+ * Checks recursively for functions on an object and returns `false` if any are found.
+ * @param o any object, string or number
+ * @returns boolean
+ */
+function ObjectCanSafelyStringify(o) {
+    if (typeof o === "function") {
+        return false;
+    }
+    if (o === null || o === true || o === false || typeof o === "number" || IsString(o)) {
+        return true;
+    }
+    if (typeof o === "object") {
+        if (Object.values(o).length === 0) {
+            return true;
+        }
+        return Object.values(o).every((value) => ObjectCanSafelyStringify(value));
+    }
+    if (Array.isArray(o)) {
+        return o.every((value) => ObjectCanSafelyStringify(value));
+    }
+    return false;
 }
-function IsSpotLight(entity) {
-    return IsLight(entity) && entity.lightType === "spot";
+function GetMetadataEntityType(metadata) {
+    if (metadata == null) {
+        return "null";
+    }
+    else if (IsString(metadata)) {
+        return "string";
+    }
+    else if (!ObjectCanSafelyStringify(metadata)) {
+        return "object";
+    }
+    else {
+        return "JSON";
+    }
 }
-function IsHemisphericLight(entity) {
-    return IsLight(entity) && entity.lightType === "hemispheric";
+function HasGltfExtras(metadata) {
+    return IsParsable(metadata) && !!JSON.parse(metadata).gltf;
 }
-function GetSceneNodes(scene) {
-    const nodes = new Set();
-    const addNode = (node) => {
-        if (nodes.has(node)) {
-            return;
-        }
-        nodes.add(node);
-        for (const child of node.children) {
-            addNode(child);
+function StringifyMetadata(metadata, format) {
+    if (IsString(metadata)) {
+        return metadata;
+    }
+    if (metadata) {
+        // Try JSON.stringify even for objects with functions — it safely omits
+        // function-valued and undefined properties. Only fall back to String()
+        // for cases that actually throw (e.g. circular references).
+        try {
+            return JSON.stringify(metadata, undefined, format ? PrettyJSONIndent : undefined);
         }
-    };
-    for (const mesh of scene.meshes) {
-        let root = mesh;
-        while (IsSceneNode(root.parent)) {
-            root = root.parent;
+        catch {
+            return String(metadata);
         }
-        addNode(root);
     }
-    return [...nodes];
+    return null;
 }
-function GetSceneNodeRoots(scene) {
-    const nodes = GetSceneNodes(scene);
-    const nodeSet = new Set(nodes);
-    return nodes.filter((node) => !IsSceneNode(node.parent) || !nodeSet.has(node.parent));
+function Restringify(value, format) {
+    return IsParsable(value) ? JSON.stringify(JSON.parse(value), undefined, format ? PrettyJSONIndent : undefined) : value;
 }
-function IsSceneNodeDescendantOf(node, ancestor) {
-    let parent = node.parent;
-    while (typeof parent === "object" && parent !== null) {
-        if (parent === ancestor) {
-            return true;
-        }
-        if (!IsSceneNode(parent)) {
-            return false;
-        }
-        parent = parent.parent;
+function PopulateGLTFExtras(metadata) {
+    if (!metadata) {
+        metadata = "{}";
     }
-    return false;
-}
-function SetVector3Value(target, value) {
-    const x = "x" in value ? value.x : value[0];
-    const y = "x" in value ? value.y : value[1];
-    const z = "x" in value ? value.z : value[2];
-    const observableTarget = target;
-    if (typeof observableTarget.set === "function") {
-        observableTarget.set(x, y, z);
+    if (!IsParsable(metadata)) {
+        return metadata;
     }
-    else {
-        target.x = x;
-        target.y = y;
-        target.z = z;
+    try {
+        const parsedJson = JSON.parse(metadata);
+        if (parsedJson) {
+            if (Reflect.has(parsedJson, "gltf")) {
+                if (!Reflect.has(parsedJson.gltf, "extras")) {
+                    parsedJson.gltf.extras = {};
+                }
+            }
+            else {
+                parsedJson.gltf = { extras: {} };
+            }
+        }
+        return JSON.stringify(parsedJson);
+    }
+    catch {
+        return metadata;
     }
 }
-function SetQuaternionValue(target, value) {
-    const x = "x" in value ? value.x : value[0];
-    const y = "x" in value ? value.y : value[1];
-    const z = "x" in value ? value.z : value[2];
-    const w = "x" in value ? value.w : value[3];
-    const observableTarget = target;
-    if (typeof observableTarget.set === "function") {
-        observableTarget.set(x, y, z, w);
+function SaveMetadata(entity, metadata) {
+    if (IsParsable(metadata)) {
+        entity.metadata = JSON.parse(metadata);
     }
     else {
-        target.x = x;
-        target.y = y;
-        target.z = z;
-        target.w = w;
+        entity.metadata = metadata;
     }
 }
-function GetLightDisplayName(light, index) {
-    const typeName = `${light.lightType.charAt(0).toUpperCase()}${light.lightType.slice(1)}`;
-    return `${typeName} Light ${index + 1}`;
+const useStyles$1 = makeStyles({
+    mainDiv: {
+        display: "flex",
+        flexDirection: "column",
+        gap: tokens.spacingVerticalXS,
+    },
+    buttonDiv: {
+        display: "grid",
+        gridAutoFlow: "column",
+        gridTemplateColumns: "1fr auto auto auto",
+        gap: tokens.spacingHorizontalXS,
+    },
+});
+/**
+ * Component to display metadata properties of an entity.
+ * @param props - The properties for the component.
+ * @returns A React component that displays metadata properties.
+ */
+const MetadataProperties = (props) => {
+    const { entity } = props;
+    const classes = useStyles$1();
+    const { size } = useContext(ToolContext);
+    const metadata = useProperty(entity, "metadata");
+    const stringifiedMetadata = useMemo(() => StringifyMetadata(metadata, false) ?? "", [metadata]);
+    const metadataType = useMemo(() => GetMetadataEntityType(metadata), [metadata]);
+    const canPreventObjectCorruption = metadataType === "object";
+    const [preventObjectCorruption, setPreventObjectCorruption] = useState(false);
+    const isReadonly = canPreventObjectCorruption && preventObjectCorruption;
+    const [editedMetadata, setEditedMetadata] = useState(stringifiedMetadata);
+    useEffect(() => {
+        setEditedMetadata(stringifiedMetadata);
+    }, [stringifiedMetadata]);
+    const isEditedMetadataJSON = useMemo(() => IsParsable(editedMetadata), [editedMetadata]);
+    const unformattedEditedMetadata = useMemo(() => Restringify(editedMetadata, false), [editedMetadata]);
+    return (jsxs(Fragment, { children: [jsx(TextPropertyLine, { label: "Property Type", value: metadataType }), jsx(Collapse, { visible: canPreventObjectCorruption, children: jsx(SwitchPropertyLine, { label: "Prevent Object Corruption", value: isReadonly, onChange: setPreventObjectCorruption }) }), jsx(LineContainer, { uniqueId: "MetadataTextarea", children: jsx(Textarea, { disabled: isReadonly, value: editedMetadata, onChange: setEditedMetadata }) }), jsx(ButtonLine, { label: "Populate glTF extras", disabled: !!editedMetadata && (!IsParsable(editedMetadata) || HasGltfExtras(editedMetadata)), onClick: () => {
+                    const isFormatted = Restringify(editedMetadata, true) === editedMetadata;
+                    let withGLTFExtras = PopulateGLTFExtras(editedMetadata);
+                    if (isFormatted) {
+                        withGLTFExtras = Restringify(withGLTFExtras, true);
+                    }
+                    setEditedMetadata(withGLTFExtras);
+                } }), jsx(LineContainer, { uniqueId: "MetadataButtonDiv", children: jsxs("div", { className: classes.buttonDiv, children: [jsx(Button$1, { size: size, icon: jsx(SaveRegular, {}), disabled: stringifiedMetadata === unformattedEditedMetadata, onClick: () => SaveMetadata(entity, editedMetadata), children: jsx(Body1, { children: "Save" }) }), jsx(Tooltip$1, { content: "Undo Changes", relationship: "label", children: jsx(Button$1, { size: size, icon: jsx(ArrowUndoRegular, {}), disabled: stringifiedMetadata === unformattedEditedMetadata, onClick: () => setEditedMetadata(stringifiedMetadata) }) }), jsx(Tooltip$1, { content: "Format (Pretty Print)", relationship: "label", children: jsx(Button$1, { size: size, icon: jsx(BracesRegular, {}), disabled: !isEditedMetadataJSON, onClick: () => setEditedMetadata(Restringify(editedMetadata, true)) }) }), jsx(Tooltip$1, { content: "Clear Formatting (Undo Pretty Print)", relationship: "label", children: jsx(Button$1, { size: size, icon: jsx(BracesDismiss16Regular, {}), disabled: !isEditedMetadataJSON, onClick: () => setEditedMetadata(Restringify(editedMetadata, false)) }) })] }) })] }));
+};
+
+/**
+ * Gets the distinct animation groups exposed by the inspected engine's registered scenes.
+ * @param engine The engine to inspect.
+ * @returns The animation groups in scene order, without duplicates.
+ */
+function GetSceneAnimationGroups(engine) {
+    return [...new Set(GetSceneContexts(engine).flatMap((scene) => scene.animationGroups))];
 }
-function GetShadowGeneratorDisplayName(scene, shadowGenerator) {
-    const lightIndex = scene.lights.findIndex((light) => light.shadowGenerator === shadowGenerator);
-    return lightIndex === -1 ? `Shadow Generator ${scene.shadowGenerators.indexOf(shadowGenerator) + 1}` : `${GetLightDisplayName(scene.lights[lightIndex], lightIndex)} Shadows`;
+/**
+ * Tests whether an entity is an animation group in a registered scene.
+ * @param engine The inspected engine.
+ * @param entity The entity to test.
+ * @returns Whether the entity is a reachable animation group.
+ */
+function IsAnimationGroup(engine, entity) {
+    return GetSceneAnimationGroups(engine).some((group) => group === entity);
+}
+/**
+ * Tests whether an entity is a public target description in a registered scene's animation group.
+ * @param engine The inspected engine.
+ * @param entity The entity to test.
+ * @returns Whether the entity is a reachable targeted animation.
+ */
+function IsTargetedAnimation(engine, entity) {
+    return GetSceneAnimationGroups(engine).some((group) => group.targetedAnimations.some((animation) => animation === entity));
+}
+/**
+ * Gets animation groups that directly animate an entity or one of a scene node's transform values.
+ * @param engine The inspected engine.
+ * @param entity The entity whose animations should be listed.
+ * @returns Reachable groups with matching public runtime targets.
+ */
+function GetEntityAnimationGroups(engine, entity) {
+    return GetSceneAnimationGroups(engine).filter((group) => group.targetedAnimations.some((animation) => animation.target === entity ||
+        (IsSceneNode(entity) &&
+            (animation.target === entity.position ||
+                animation.target === entity.rotationQuaternion ||
+                animation.target === entity.rotation ||
+                animation.target === entity.scaling))));
+}
+/**
+ * Gets a display name using the live runtime name when available, without requiring a runtime target.
+ * @param animation The targeted animation.
+ * @returns The target name or node identity and its animated path.
+ */
+function GetTargetedAnimationDisplayName(animation) {
+    const target = animation.target;
+    const name = target && "name" in target && typeof target.name === "string" ? target.name : undefined;
+    const targetName = name || animation.targetName || (animation.nodeIndex !== undefined ? `Node ${animation.nodeIndex}` : "Target");
+    return `${targetName}: ${animation.path}`;
+}
+/**
+ * Gets the frame rate used by Lite's goToFrame API.
+ * @param group The animation group.
+ * @returns The authored frame rate, or Lite's default of 60 frames per second.
+ */
+function GetAnimationFrameRate(group) {
+    return group.frameRate || 60;
+}
+/**
+ * Seeks through Lite's public API while preserving whether playback was active.
+ * @param engine The engine used to apply GPU-backed animation poses.
+ * @param group The animation group to seek.
+ * @param frame The requested frame.
+ */
+function SeekAnimationFrame(engine, group, frame) {
+    const wasPlaying = group.isPlaying;
+    goToFrame(group, frame, engine);
+    if (wasPlaying) {
+        playAnimation(group);
+    }
 }
 
+const AnimationGroupControlProperties = MakeLazyComponent(async () => (await import('./animationProperties-BKVw6_ls.js')).AnimationGroupControlProperties);
+const AnimationGroupInfoProperties = MakeLazyComponent(async () => (await import('./animationProperties-BKVw6_ls.js')).AnimationGroupInfoProperties);
+const TargetedAnimationProperties = MakeLazyComponent(async () => (await import('./animationProperties-BKVw6_ls.js')).TargetedAnimationProperties);
+const EntityAnimationProperties = MakeLazyComponent(async () => (await import('./animationProperties-BKVw6_ls.js')).EntityAnimationProperties);
+const AnimationPropertiesServiceDefinition = {
+    friendlyName: "Babylon Lite Animation Properties",
+    consumes: [PropertiesServiceIdentity, EngineContextIdentity, SelectionServiceIdentity],
+    factory: (propertiesService, engineContext, selectionService) => {
+        const engine = engineContext.engine;
+        const groupRegistration = propertiesService.addSectionContent({
+            key: "Babylon Lite Animation Group Properties",
+            predicate: (entity) => IsAnimationGroup(engine, entity),
+            content: [
+                {
+                    section: "Control",
+                    component: ({ context }) => jsx(AnimationGroupControlProperties, { engine: engine, group: context }),
+                },
+                {
+                    section: "Info",
+                    component: ({ context }) => jsx(AnimationGroupInfoProperties, { group: context }),
+                },
+                {
+                    section: "Metadata",
+                    component: ({ context }) => jsx(MetadataProperties, { entity: context }),
+                },
+            ],
+        });
+        const targetedAnimationRegistration = propertiesService.addSectionContent({
+            key: "Babylon Lite Targeted Animation Properties",
+            predicate: (entity) => IsTargetedAnimation(engine, entity),
+            content: [
+                {
+                    section: "General",
+                    component: ({ context }) => jsx(TargetedAnimationProperties, { animation: context, selectionService: selectionService }),
+                },
+            ],
+        });
+        const entityRegistration = propertiesService.addSectionContent({
+            key: "Babylon Lite Entity Animation Properties",
+            predicate: (entity) => typeof entity === "object" && entity !== null && !IsAnimationGroup(engine, entity) && !IsTargetedAnimation(engine, entity),
+            content: [
+                {
+                    section: "Animation",
+                    component: ({ context }) => jsx(EntityAnimationProperties, { engine: engine, entity: context, selectionService: selectionService }),
+                },
+            ],
+        });
+        return {
+            dispose: () => {
+                entityRegistration.dispose();
+                targetedAnimationRegistration.dispose();
+                groupRegistration.dispose();
+            },
+        };
+    },
+};
+
 /**
  * Runtime-neutral controlled editor for two-, three-, and four-component numeric values.
  * @param props The value, change callback, component adapter, and property-line presentation.
@@ -8363,11 +8872,11 @@ const ControlledTensorPropertyLine = (props) => {
         props.onChange(newValue);
     };
     const summary = adapter.components.map((component) => formatted(adapter.getComponent(props.value, component))).join(", ");
-    return (jsx(PropertyLine, { ...props, expandedContent: jsxs(Fragment, { children: [props.expandedContent, jsx(TensorSliders, { value: value, adapter: adapter, min: min, max: max, unit: unit, step: step, precision: precision, converted: converted, onChange: onComponentChange })] }), children: jsx(Body1, { children: `[${summary}]` }) }));
+    return (jsx(PropertyLine, { ...props, expandedContent: jsxs(Fragment, { children: [props.expandedContent, jsx(TensorSliders, { value: value, adapter: adapter, min: min, max: max, unit: unit, step: step, precision: precision, disabled: props.disabled, converted: converted, onChange: onComponentChange })] }), children: jsx(Body1, { children: `[${summary}]` }) }));
 };
 const TensorSliders = (props) => {
-    const { value, adapter, min, max, unit, step, precision, converted, onChange } = props;
-    return (jsx(Fragment, { children: adapter.components.map((component) => (jsx(NumberInputPropertyLine, { label: component.toUpperCase(), value: converted(adapter.getComponent(value, component)), min: min, max: max, onChange: (componentValue) => onChange(componentValue, component), unit: unit, step: step, precision: precision }, component))) }));
+    const { value, adapter, min, max, unit, step, precision, disabled, converted, onChange } = props;
+    return (jsx(Fragment, { children: adapter.components.map((component) => (jsx(NumberInputPropertyLine, { label: component.toUpperCase(), value: converted(adapter.getComponent(value, component)), min: min, max: max, onChange: (componentValue) => onChange(componentValue, component), unit: unit, step: step, precision: precision, disabled: disabled }, component))) }));
 };
 const RadiansToDegreesConverter = {
     from: (value) => (value * 180) / Math.PI,
@@ -8419,6 +8928,11 @@ function GetComponent(value, component) {
             return "w" in value ? value.w : 0;
     }
 }
+const Vector2Adapter = {
+    components: ["x", "y"],
+    getComponent: GetComponent,
+    withComponent: (value, component, componentValue) => IsNumberTuple(value) ? [component === "x" ? componentValue : value[0], component === "y" ? componentValue : value[1]] : { ...value, [component]: componentValue },
+};
 const Vector3Adapter = {
     components: ["x", "y", "z"],
     getComponent: GetComponent,
@@ -8426,6 +8940,18 @@ const Vector3Adapter = {
         ? [component === "x" ? componentValue : value[0], component === "y" ? componentValue : value[1], component === "z" ? componentValue : value[2]]
         : { ...value, [component]: componentValue },
 };
+const Vector4Adapter = {
+    components: ["x", "y", "z", "w"],
+    getComponent: GetComponent,
+    withComponent: (value, component, componentValue) => IsNumberTuple(value)
+        ? [
+            component === "x" ? componentValue : value[0],
+            component === "y" ? componentValue : value[1],
+            component === "z" ? componentValue : value[2],
+            component === "w" ? componentValue : value[3],
+        ]
+        : { ...value, [component]: componentValue },
+};
 const QuaternionTensorAdapter = {
     components: ["x", "y", "z", "w"],
     getComponent: GetComponent,
@@ -8446,7 +8972,7 @@ const QuaternionTensorAdapter = {
  */
 function CreateQuaternionFromEuler(value, source) {
     const [x, y, z] = "x" in value ? [value.x, value.y, value.z] : value;
-    const quaternion = eulerToQuat(x, y, z);
+    const quaternion = eulerXYZToQuatTuple(x, y, z);
     return "x" in source ? { x: quaternion[0], y: quaternion[1], z: quaternion[2], w: quaternion[3] } : quaternion;
 }
 const QuaternionAdapter = {
@@ -8455,10 +8981,12 @@ const QuaternionAdapter = {
     fromEuler: CreateQuaternionFromEuler,
     toEuler: (value) => {
         const [x, y, z, w] = "x" in value ? [value.x, value.y, value.z, value.w] : value;
-        return quatToEulerXYZ(x, y, z, w);
+        return quatToEulerXYZTuple(x, y, z, w);
     },
 };
+const Vector2PropertyLine = (props) => jsx(ControlledTensorPropertyLine, { ...props, adapter: Vector2Adapter });
 const Vector3PropertyLine = (props) => jsx(ControlledTensorPropertyLine, { ...props, adapter: Vector3Adapter });
+const Vector4PropertyLine = (props) => jsx(ControlledTensorPropertyLine, { ...props, adapter: Vector4Adapter });
 const QuaternionPropertyLine = (props) => jsx(ControlledQuaternionPropertyLine, { ...props, adapter: QuaternionAdapter });
 
 function GetPosition$2(camera) {
@@ -8555,7 +9083,7 @@ const ControlledColorPropertyLine = (props) => {
         }, currentValue));
     };
     const color = adapter.getColor(currentValue);
-    return (jsx(PropertyLine, { ref: propertyLineRef, ...props, expandedContent: jsx(ColorSliders, { color: color, onSliderChange: onSliderChange }), children: createElement(adapter.picker, {
+    return (jsx(PropertyLine, { ref: propertyLineRef, ...props, expandedContent: jsx(ColorSliders, { color: color, onSliderChange: onSliderChange, disabled: props.disabled }), children: createElement(adapter.picker, {
             value: currentValue,
             onChange: handleChange,
             isLinearMode: props.isLinearMode,
@@ -8566,11 +9094,11 @@ const ControlledColorPropertyLine = (props) => {
         }) }));
 };
 const ColorSliders = (props) => {
-    const { color, onSliderChange } = props;
-    return (jsxs(Fragment, { children: [jsx(SyncedSliderPropertyLine, { label: "R", value: color.r * 255, min: 0, max: 255, onChange: (value) => onSliderChange(value, "r") }), jsx(SyncedSliderPropertyLine, { label: "G", value: color.g * 255, min: 0, max: 255, onChange: (value) => onSliderChange(value, "g") }), jsx(SyncedSliderPropertyLine, { label: "B", value: color.b * 255, min: 0, max: 255, onChange: (value) => onSliderChange(value, "b") }), color.a === undefined ? undefined : (jsx(SyncedSliderPropertyLine, { label: "A", value: color.a, min: 0, max: 1, step: 0.01, onChange: (value) => onSliderChange(value, "a") }))] }));
+    const { color, disabled, onSliderChange } = props;
+    return (jsxs(Fragment, { children: [jsx(SyncedSliderPropertyLine, { label: "R", value: color.r * 255, min: 0, max: 255, disabled: disabled, onChange: (value) => onSliderChange(value, "r") }), jsx(SyncedSliderPropertyLine, { label: "G", value: color.g * 255, min: 0, max: 255, disabled: disabled, onChange: (value) => onSliderChange(value, "g") }), jsx(SyncedSliderPropertyLine, { label: "B", value: color.b * 255, min: 0, max: 255, disabled: disabled, onChange: (value) => onSliderChange(value, "b") }), color.a === undefined ? undefined : (jsx(SyncedSliderPropertyLine, { label: "A", value: color.a, min: 0, max: 1, step: 0.01, disabled: disabled, onChange: (value) => onSliderChange(value, "a") }))] }));
 };
 
-const useStyles$1 = makeStyles({
+const useStyles = makeStyles({
     picker: {
         width: "350px",
         height: "350px",
@@ -8669,7 +9197,7 @@ function ColorToHex(color) {
  */
 const StructuralColorPickerPopup = (props) => {
     const { value, onChange, adapter, isLinearMode, ...rest } = props;
-    const classes = useStyles$1();
+    const classes = useStyles();
     const { size } = useContext(ToolContext);
     const [currentValue, setCurrentValue] = useState(value);
     useEffect(() => {
@@ -8733,6 +9261,7 @@ const Adapter = {
     createColor: (color, source) => (IsColor4Value(source) ? CreateColor4Value(color, source) : CreateColor3Value(color, source)),
 };
 const Color3PropertyLine = (props) => (jsx(ControlledColorPropertyLine, { ...props, adapter: Adapter }));
+const Color4PropertyLine = (props) => (jsx(ControlledColorPropertyLine, { ...props, adapter: Adapter }));
 
 function GetVector3(value) {
     return [value.x, value.y, value.z];
@@ -8857,28 +9386,598 @@ const LightPropertiesServiceDefinition = {
     },
 };
 
-function IsMaterial(entity) {
-    return typeof entity === "object" && entity !== null && getMaterialFamily(entity) !== undefined;
-}
-const MaterialProperties = (props) => {
-    const { material } = props;
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: TextInputPropertyLine, label: "Name", target: material, propertyKey: "name", ignoreNullable: true, defaultValue: "" }), jsx(TextPropertyLine, { label: "Family", value: getMaterialFamily(material) ?? "Unknown" })] }));
-};
-const MaterialPropertiesServiceDefinition = {
-    friendlyName: "Babylon Lite Material Properties",
-    consumes: [PropertiesServiceIdentity],
-    factory: (propertiesService) => propertiesService.addSectionContent({
-        key: "Babylon Lite Material Properties",
-        predicate: IsMaterial,
-        content: [
-            {
-                section: "General",
-                component: ({ context }) => jsx(MaterialProperties, { material: context }),
-            },
-        ],
-    }),
-};
-
+/**
+ * Returns scenes that still contain the selected material, rather than just another view of its source.
+ * @param record The indexed source record.
+ * @param material The selected source or view.
+ * @returns Scenes with a live mesh referencing the selected material.
+ */
+function GetMaterialOwningScenes(record, material) {
+    return record.scenes.filter((scene) => Array.isArray(scene.meshes) &&
+        scene.meshes.some((mesh) => mesh?.material && (material === record.source ? getMaterialSource(mesh.material) === record.source : mesh.material === material)));
+}
+
+function Add(bindings, id, entity) {
+    if (entity) {
+        bindings.push({ id, entity });
+    }
+}
+function GetStandardBindings(material) {
+    const bindings = [];
+    Add(bindings, "standard.diffuse", material.diffuseTexture);
+    Add(bindings, "standard.emissive", getStandardEmissiveTexture(material));
+    Add(bindings, "standard.bump", getStandardBumpTexture(material));
+    Add(bindings, "standard.specular", getStandardSpecularTexture(material));
+    Add(bindings, "standard.ambient", getStandardAmbientTexture(material));
+    Add(bindings, "standard.lightmap", getStandardLightmapTexture(material));
+    Add(bindings, "standard.opacity", getStandardOpacityTexture(material));
+    Add(bindings, "standard.reflection2d", getStandardReflectionTexture(material));
+    Add(bindings, "standard.reflectionCube", getStandardReflectionCubeTexture(material));
+    return bindings;
+}
+function GetPbrBindings(material) {
+    const bindings = [];
+    Add(bindings, "pbr.baseColor", material.baseColorTexture);
+    Add(bindings, "pbr.normal", material.normalTexture);
+    Add(bindings, "pbr.orm", material.ormTexture);
+    Add(bindings, "pbr.occlusion", material.occlusionTexture);
+    Add(bindings, "pbr.emissive", material.emissiveTexture);
+    Add(bindings, "pbr.specGloss", material.specGlossTexture);
+    Add(bindings, "pbr.lightmap", material.lightmapTexture);
+    const metallicReflectance = getPbrMetallicReflectance(material);
+    Add(bindings, "pbr.metallicReflectance", metallicReflectance?.texture);
+    Add(bindings, "pbr.reflectance", metallicReflectance?.reflectanceTexture);
+    const clearCoat = getPbrClearCoat(material);
+    Add(bindings, "pbr.clearCoat", clearCoat?.texture);
+    Add(bindings, "pbr.clearCoatRoughness", clearCoat?.roughnessTexture);
+    Add(bindings, "pbr.clearCoatBump", clearCoat?.bumpTexture);
+    const sheen = getPbrSheen(material);
+    Add(bindings, "pbr.sheen", sheen?.texture);
+    Add(bindings, "pbr.sheenRoughness", sheen?.roughnessTexture);
+    const iridescence = getPbrIridescence(material);
+    Add(bindings, "pbr.iridescence", iridescence?.texture);
+    Add(bindings, "pbr.iridescenceThickness", iridescence?.thicknessTexture);
+    Add(bindings, "pbr.anisotropy", getPbrAnisotropy(material)?.texture);
+    const subsurface = getPbrSubsurface(material);
+    Add(bindings, "pbr.translucencyColor", subsurface?.translucency?.colorTexture);
+    Add(bindings, "pbr.translucencyIntensity", subsurface?.translucency?.intensityTexture);
+    Add(bindings, "pbr.thickness", subsurface?.thickness?.texture);
+    Add(bindings, "pbr.transmission", getPbrTransmission(material)?.texture);
+    return bindings;
+}
+function GetShaderBindings(material) {
+    const bindings = [];
+    for (const declaration of material.samplerDecls) {
+        Add(bindings, `shader.sampler:${declaration.name}`, getShaderTexture(material, declaration.name));
+    }
+    return bindings;
+}
+function GetNodeBindings(material) {
+    const bindings = [];
+    for (const [name, input] of Object.entries(material.inputs)) {
+        if (input.type === "texture2d") {
+            Add(bindings, `node.texture:${name}`, input.texture);
+        }
+    }
+    return bindings;
+}
+/**
+ * Builds canonical topology edges without retaining any UI descriptor implementation.
+ * @param material The exact source material.
+ * @returns Texture edges in canonical family order.
+ * @internal
+ */
+function GetMaterialTopologyBindings(material) {
+    switch (getMaterialFamily(material)) {
+        case "standard":
+            return GetStandardBindings(material);
+        case "pbr":
+            return GetPbrBindings(material);
+        case "shader":
+            return GetShaderBindings(material);
+        case "node":
+            return GetNodeBindings(material);
+        default:
+            return [];
+    }
+}
+
+function IsObject(value) {
+    return typeof value === "object" && value !== null;
+}
+function GetSceneMaterials(scene) {
+    const sources = new Set();
+    const materials = [];
+    const views = new Set();
+    if (!Array.isArray(scene.meshes)) {
+        return { sources: materials, views: [] };
+    }
+    for (const mesh of scene.meshes) {
+        if (!IsObject(mesh) || !IsObject(mesh.material)) {
+            continue;
+        }
+        try {
+            const source = getMaterialSource(mesh.material);
+            if (!sources.has(source)) {
+                sources.add(source);
+                materials.push(source);
+            }
+            if (mesh.material !== source) {
+                views.add(mesh.material);
+            }
+        }
+        catch {
+            // Stale or malformed materials are omitted until a later topology update.
+        }
+    }
+    return { sources: materials, views: [...views] };
+}
+function AppendTextureState(snapshot, texture) {
+    try {
+        const metadata = getTextureMetadata(texture);
+        if (!metadata) {
+            snapshot.push("stale-texture");
+            return;
+        }
+        const texture2d = texture;
+        snapshot.push(metadata.kind, metadata.name, metadata.origin, metadata.width, metadata.height, metadata.layers, metadata.depth, metadata.format, metadata.mipLevelCount, metadata.sampleType, metadata.colorSpace, metadata.invertY, metadata.sampler?.addressModeU, metadata.sampler?.addressModeV, metadata.sampler?.addressModeW, metadata.sampler?.minFilter, metadata.sampler?.magFilter, metadata.sampler?.mipmapFilter, metadata.sampler?.maxAnisotropy, metadata.capabilities.renderAttachment, metadata.capabilities.dynamicUpdate, metadata.capabilities.sampledDepth, getTextureCoordinateIndex(texture2d), hasTextureTransform(texture2d));
+        if (hasTextureTransform(texture2d)) {
+            const transform = getTextureTransform(texture2d);
+            snapshot.push(transform?.uOffset, transform?.vOffset, transform?.uScale, transform?.vScale, transform?.uAng);
+        }
+    }
+    catch {
+        snapshot.push("stale-texture");
+    }
+}
+function AppendMaterialStructure(snapshot, material, family) {
+    if (family === "node") {
+        const inputs = Object.entries(material.inputs);
+        snapshot.push(inputs.length);
+        for (const [name, input] of inputs) {
+            snapshot.push(name, input.type);
+        }
+    }
+    else if (family === "shader") {
+        const shader = material;
+        snapshot.push(shader.attributes.length, ...shader.attributes, shader.uniformDecls.length);
+        for (const declaration of shader.uniformDecls) {
+            snapshot.push(declaration.name, declaration.type);
+        }
+        snapshot.push(shader.samplerDecls.length);
+        for (const declaration of shader.samplerDecls) {
+            snapshot.push(declaration.name, declaration.sampleType, declaration.viewDimension, declaration.comparison);
+        }
+        snapshot.push(shader.storageBufferDecls.length);
+        for (const declaration of shader.storageBufferDecls) {
+            snapshot.push(declaration.name, declaration.type);
+        }
+        snapshot.push(shader.defines.length);
+        for (const define of shader.defines) {
+            snapshot.push(define.name, define.value);
+        }
+    }
+    else if (family === "pbr") {
+        const pbr = material;
+        const subsurface = getPbrSubsurface(pbr);
+        snapshot.push(!!getPbrMetallicReflectance(pbr), !!getPbrClearCoat(pbr), !!getPbrSheen(pbr), !!getPbrIridescence(pbr), !!getPbrAnisotropy(pbr), !!subsurface, !!subsurface?.translucency, !!subsurface?.thickness, !!getPbrTransmission(pbr));
+    }
+}
+/**
+ * Maintains deterministic, Inspector-owned resource records for one Lite engine.
+ * @internal
+ */
+class SceneResourceIndex {
+    constructor(_engine) {
+        this._engine = _engine;
+        this._sceneSnapshots = new Map();
+        this._materialRecords = new Map();
+        this._textureRecords = new Map();
+        this._textureOrdinals = new WeakMap();
+        this._nextTextureOrdinal = 1;
+        this.refresh();
+    }
+    /** Rebuilds the resource topology from current public scene and binding state. */
+    refresh() {
+        const scenes = this._getScenes();
+        const sceneMaterials = new Map();
+        const sceneViews = new Map();
+        const materialDrafts = new Map();
+        for (const scene of scenes) {
+            const { sources, views } = GetSceneMaterials(scene);
+            sceneMaterials.set(scene, sources);
+            sceneViews.set(scene, views);
+            for (const source of sources) {
+                let draft = materialDrafts.get(source);
+                if (!draft) {
+                    draft = {
+                        source,
+                        family: getMaterialFamily(source),
+                        displayName: source.name || "Material",
+                        scenes: [],
+                        bindings: GetMaterialTopologyBindings(source),
+                    };
+                    materialDrafts.set(source, draft);
+                }
+                draft.scenes.push(scene);
+            }
+        }
+        const materialRecords = new Map();
+        for (const draft of materialDrafts.values()) {
+            materialRecords.set(draft.source, draft);
+        }
+        const viewBindings = new Map();
+        for (const views of sceneViews.values()) {
+            for (const view of views) {
+                if (viewBindings.has(view)) {
+                    continue;
+                }
+                const sourceBindings = materialRecords.get(getMaterialSource(view))?.bindings ?? [];
+                viewBindings.set(view, GetMaterialTopologyBindings(view).filter((binding) => sourceBindings.find((candidate) => candidate.id === binding.id)?.entity !== binding.entity));
+            }
+        }
+        const textureDrafts = new Map();
+        const addBindings = (material, bindings) => {
+            for (const binding of bindings) {
+                let texture = textureDrafts.get(binding.entity);
+                if (!texture) {
+                    try {
+                        const metadata = getTextureMetadata(binding.entity);
+                        if (!metadata) {
+                            continue;
+                        }
+                        texture = {
+                            entity: binding.entity,
+                            metadata,
+                            ordinal: this._getTextureOrdinal(binding.entity),
+                            consumers: [],
+                        };
+                    }
+                    catch {
+                        continue;
+                    }
+                    textureDrafts.set(binding.entity, texture);
+                }
+                texture.consumers.push({ material, bindingId: binding.id });
+            }
+        };
+        for (const material of materialRecords.values()) {
+            addBindings(material.source, material.bindings);
+        }
+        for (const [view, bindings] of viewBindings) {
+            addBindings(view, bindings);
+        }
+        const textureRecords = new Map();
+        for (const draft of textureDrafts.values()) {
+            textureRecords.set(draft.entity, draft);
+        }
+        const sceneSnapshots = new Map();
+        for (const scene of scenes) {
+            const materials = (sceneMaterials.get(scene) ?? []).flatMap((source) => {
+                const record = materialRecords.get(source);
+                return record ? [record] : [];
+            });
+            const seenTextures = new Set();
+            const textures = [];
+            for (const material of materials) {
+                for (const binding of material.bindings) {
+                    const record = textureRecords.get(binding.entity);
+                    if (record && !seenTextures.has(binding.entity)) {
+                        seenTextures.add(binding.entity);
+                        textures.push(record);
+                    }
+                }
+            }
+            for (const view of sceneViews.get(scene) ?? []) {
+                for (const binding of viewBindings.get(view) ?? []) {
+                    const record = textureRecords.get(binding.entity);
+                    if (record && !seenTextures.has(binding.entity)) {
+                        seenTextures.add(binding.entity);
+                        textures.push(record);
+                    }
+                }
+            }
+            sceneSnapshots.set(scene, { scene, materials, textures });
+        }
+        this._sceneSnapshots = sceneSnapshots;
+        this._materialRecords = materialRecords;
+        this._textureRecords = textureRecords;
+    }
+    /**
+     * Captures the public identities and values that drive index and Properties refresh.
+     * @returns A deterministic topology snapshot.
+     */
+    getTopologySnapshot() {
+        const snapshot = [];
+        const seenMaterials = new Set();
+        const seenTextures = new Set();
+        const appendMaterial = (material) => {
+            if (seenMaterials.has(material)) {
+                return;
+            }
+            seenMaterials.add(material);
+            const family = getMaterialFamily(material);
+            const bindings = GetMaterialTopologyBindings(material);
+            snapshot.push(family, material.name, bindings.length);
+            AppendMaterialStructure(snapshot, material, family);
+            for (const binding of bindings) {
+                snapshot.push(binding.id, binding.entity);
+                if (!seenTextures.has(binding.entity)) {
+                    seenTextures.add(binding.entity);
+                    AppendTextureState(snapshot, binding.entity);
+                }
+            }
+        };
+        for (const surface of this._engine.surfaces) {
+            snapshot.push(surface);
+            for (const context of getRenderingContexts(surface)) {
+                snapshot.push(context);
+                if (getRenderingContextKind(context) !== "scene") {
+                    continue;
+                }
+                const scene = context;
+                if (!Array.isArray(scene.meshes)) {
+                    snapshot.push("invalid-meshes");
+                    continue;
+                }
+                snapshot.push(scene.meshes.length);
+                for (const mesh of scene.meshes) {
+                    snapshot.push(mesh);
+                    if (!IsObject(mesh) || !IsObject(mesh.material)) {
+                        snapshot.push(mesh?.material);
+                        continue;
+                    }
+                    try {
+                        const source = getMaterialSource(mesh.material);
+                        snapshot.push(mesh.material, source);
+                        appendMaterial(source);
+                        if (mesh.material !== source) {
+                            appendMaterial(mesh.material);
+                        }
+                    }
+                    catch {
+                        snapshot.push("stale-material");
+                    }
+                }
+            }
+        }
+        return snapshot;
+    }
+    static AreTopologySnapshotsEqual(left, right) {
+        return left.length === right.length && left.every((value, index) => Object.is(value, right[index]));
+    }
+    getSceneSnapshot(scene) {
+        return this._sceneSnapshots.get(scene) ?? { scene, materials: [], textures: [] };
+    }
+    getMaterialRecord(material) {
+        return this._materialRecords.get(material);
+    }
+    getTextureRecord(texture) {
+        return this._textureRecords.get(texture);
+    }
+    dispose() {
+        this._sceneSnapshots.clear();
+        this._materialRecords.clear();
+        this._textureRecords.clear();
+        this._textureOrdinals = new WeakMap();
+    }
+    _getTextureOrdinal(texture) {
+        let ordinal = this._textureOrdinals.get(texture);
+        if (ordinal === undefined) {
+            ordinal = this._nextTextureOrdinal++;
+            this._textureOrdinals.set(texture, ordinal);
+        }
+        return ordinal;
+    }
+    _getScenes() {
+        const scenes = [];
+        const seen = new Set();
+        for (const surface of this._engine.surfaces) {
+            for (const context of getRenderingContexts(surface)) {
+                if (getRenderingContextKind(context) === "scene" && !seen.has(context)) {
+                    const scene = context;
+                    seen.add(scene);
+                    scenes.push(scene);
+                }
+            }
+        }
+        return scenes;
+    }
+}
+
+/**
+ * The unique identity for the Inspector-owned Lite scene resource index.
+ * @internal
+ */
+const SceneResourceIndexServiceIdentity = Symbol("SceneResourceIndex");
+/**
+ * Creates one disposable Lite scene resource index per Inspector service container.
+ * @internal
+ */
+const SceneResourceIndexServiceDefinition = {
+    friendlyName: "Babylon Lite Scene Resource Index",
+    produces: [SceneResourceIndexServiceIdentity],
+    consumes: [EngineContextIdentity, WatcherServiceIdentity],
+    factory: (engineContext, watcherService) => {
+        const index = new SceneResourceIndex(engineContext.engine);
+        const onChanged = new Observable();
+        const onDisposed = new Observable();
+        let refreshPending = false;
+        let isDisposed = false;
+        const topologyWatcher = watcherService.watchValue(() => index.getTopologySnapshot(), () => {
+            if (refreshPending || isDisposed) {
+                return;
+            }
+            refreshPending = true;
+            queueMicrotask(() => {
+                refreshPending = false;
+                if (!isDisposed) {
+                    index.refresh();
+                    onChanged.notifyObservers();
+                }
+            });
+        }, SceneResourceIndex.AreTopologySnapshotsEqual);
+        return {
+            getSceneSnapshot: (scene) => index.getSceneSnapshot(scene),
+            getMaterialRecord: (material) => index.getMaterialRecord(material),
+            getTextureRecord: (texture) => index.getTextureRecord(texture),
+            onChanged,
+            onDisposed,
+            get isDisposed() {
+                return isDisposed;
+            },
+            refresh: () => {
+                if (!isDisposed) {
+                    index.refresh();
+                    onChanged.notifyObservers();
+                }
+            },
+            dispose: () => {
+                if (isDisposed) {
+                    return;
+                }
+                isDisposed = true;
+                topologyWatcher.dispose();
+                onDisposed.notifyObservers();
+                onDisposed.clear();
+                index.dispose();
+                onChanged.clear();
+            },
+        };
+    },
+};
+
+const StandardMaterialAdapter = MakeLazyComponent(async () => (await import('./standardMaterialProperties-BbYdFX86.js')).StandardMaterialAdapter, {
+    spinnerLabel: "Loading Standard material properties",
+});
+const PbrMaterialAdapter = MakeLazyComponent(async () => (await import('./pbrMaterialProperties-jfJddBxY.js')).PbrMaterialAdapter, {
+    spinnerLabel: "Loading PBR material properties",
+});
+const ShaderMaterialAdapter = MakeLazyComponent(async () => (await import('./shaderMaterialProperties-CTH_KfBK.js')).ShaderMaterialAdapter, {
+    spinnerLabel: "Loading Shader material properties",
+});
+const NodeMaterialAdapter = MakeLazyComponent(async () => (await import('./nodeMaterialProperties-ELFMlzS1.js')).NodeMaterialAdapter, {
+    spinnerLabel: "Loading Node material properties",
+});
+const FamilyConfigurations = {
+    standard: {
+        component: StandardMaterialAdapter,
+        sections: ["general", "transparency", "lighting-colors", "textures", "texture-settings", "transform", "stencil"],
+    },
+    pbr: {
+        component: PbrMaterialAdapter,
+        sections: [
+            "general",
+            "transparency",
+            "lighting-colors",
+            "textures",
+            "occlusion",
+            "lightmap",
+            "metallic-reflectance",
+            "clear-coat",
+            "sheen",
+            "iridescence",
+            "anisotropy",
+            "subsurface-translucency",
+            "subsurface-thickness",
+            "subsurface-tint",
+            "transmission",
+            "special-modes",
+            "transform",
+            "stencil",
+        ],
+    },
+    shader: {
+        component: ShaderMaterialAdapter,
+        sections: ["general", "inputs", "textures", "configuration"],
+    },
+    node: {
+        component: NodeMaterialAdapter,
+        sections: ["general", "inputs"],
+    },
+};
+function GetSectionLabel(section) {
+    return section
+        .split("-")
+        .map((part) => part[0].toUpperCase() + part.slice(1))
+        .join(" ")
+        .replace("Lighting Colors", "Lighting & Colors")
+        .replace("Subsurface ", "Subsurface / ");
+}
+function TryDescribeMaterial(entity, resourceIndexService) {
+    if (typeof entity !== "object" || entity === null) {
+        return undefined;
+    }
+    try {
+        const material = entity;
+        const source = getMaterialSource(material);
+        const record = typeof source === "object" && source !== null ? resourceIndexService.getMaterialRecord(source) : undefined;
+        if (!record || !GetMaterialOwningScenes(record, material).length) {
+            return undefined;
+        }
+        const family = getMaterialFamily(source);
+        const name = material.name;
+        const displayName = typeof name === "string" && name.length > 0 ? name : family ? `${family[0].toUpperCase()}${family.slice(1)} Material` : "Material";
+        return { source, family, displayName, isView: isMaterialView(material) };
+    }
+    catch {
+        return undefined;
+    }
+}
+function IsSupportedFamily(family) {
+    return family === "standard" || family === "pbr" || family === "shader" || family === "node";
+}
+const UnknownMaterialProperties = (props) => {
+    const { material, resourceIndexService } = props;
+    const getMaterialIdentity = useCallback(() => {
+        const identity = TryDescribeMaterial(material, resourceIndexService);
+        const record = identity && resourceIndexService.getMaterialRecord(identity.source);
+        return record && identity ? identity : undefined;
+    }, [material, resourceIndexService]);
+    const identity = useObservableState(getMaterialIdentity, resourceIndexService.onChanged);
+    if (!identity) {
+        return jsx(TextPropertyLine, { label: "Error", value: "This material is unavailable." });
+    }
+    return (jsxs(Fragment, { children: [jsx(TextPropertyLine, { label: "Name", value: identity.displayName }), jsx(TextPropertyLine, { label: "Family", value: identity.family ?? "Unknown" }), jsx(TextPropertyLine, { label: "Selection", value: identity.isView ? "MaterialView" : "Material" }), identity.isView ? jsx(TextPropertyLine, { label: "Source", value: resourceIndexService.getMaterialRecord(identity.source)?.displayName ?? "Unavailable" }) : undefined] }));
+};
+const MaterialPropertiesServiceDefinition = {
+    friendlyName: "Babylon Lite Material Properties",
+    consumes: [PropertiesServiceIdentity, SceneResourceIndexServiceIdentity, SelectionServiceIdentity],
+    factory: (propertiesService, resourceIndexService, selectionService) => {
+        const registrations = Object.entries(FamilyConfigurations).map(([family, configuration]) => propertiesService.addSectionContent({
+            key: `Babylon Lite ${family} Material Properties`,
+            predicate: (entity) => TryDescribeMaterial(entity, resourceIndexService)?.family === family,
+            content: configuration.sections.map((section) => {
+                const component = configuration.component;
+                const sectionContent = (props) => {
+                    const { context } = props;
+                    return createElement(component, { material: context, section, resourceIndexService, selectionService });
+                };
+                return {
+                    section: GetSectionLabel(section),
+                    component: sectionContent,
+                };
+            }),
+        }));
+        registrations.push(propertiesService.addSectionContent({
+            key: "Babylon Lite Unknown Material Properties",
+            predicate: (entity) => {
+                const identity = TryDescribeMaterial(entity, resourceIndexService);
+                return identity !== undefined && !IsSupportedFamily(identity.family);
+            },
+            content: [
+                {
+                    section: "General",
+                    component: ({ context }) => jsx(UnknownMaterialProperties, { material: context, resourceIndexService: resourceIndexService }),
+                },
+            ],
+        }));
+        return {
+            dispose: () => registrations.forEach((registration) => registration.dispose()),
+        };
+    },
+};
+
 const MeshGeneralProperties = (props) => {
     const { mesh } = props;
     return jsx(BoundProperty, { component: SwitchPropertyLine, label: "Receive Shadows", target: mesh, propertyKey: "receiveShadows" });
@@ -8969,161 +10068,6 @@ const RenderingContextPropertiesServiceDefinition = {
     },
 };
 
-const PrettyJSONIndent = 2;
-function IsParsable(metadata) {
-    try {
-        const parsed = JSON.parse(metadata);
-        return !!parsed && !IsString(parsed);
-    }
-    catch {
-        return false;
-    }
-}
-/**
- * Checks if the input is a string.
- * @param input - any input to check
- * @returns boolean - true if the input is a string, false otherwise
- */
-function IsString(input) {
-    return typeof input === "string" || input instanceof String;
-}
-/**
- * Checks recursively for functions on an object and returns `false` if any are found.
- * @param o any object, string or number
- * @returns boolean
- */
-function ObjectCanSafelyStringify(o) {
-    if (typeof o === "function") {
-        return false;
-    }
-    if (o === null || o === true || o === false || typeof o === "number" || IsString(o)) {
-        return true;
-    }
-    if (typeof o === "object") {
-        if (Object.values(o).length === 0) {
-            return true;
-        }
-        return Object.values(o).every((value) => ObjectCanSafelyStringify(value));
-    }
-    if (Array.isArray(o)) {
-        return o.every((value) => ObjectCanSafelyStringify(value));
-    }
-    return false;
-}
-function GetMetadataEntityType(metadata) {
-    if (metadata == null) {
-        return "null";
-    }
-    else if (IsString(metadata)) {
-        return "string";
-    }
-    else if (!ObjectCanSafelyStringify(metadata)) {
-        return "object";
-    }
-    else {
-        return "JSON";
-    }
-}
-function HasGltfExtras(metadata) {
-    return IsParsable(metadata) && !!JSON.parse(metadata).gltf;
-}
-function StringifyMetadata(metadata, format) {
-    if (IsString(metadata)) {
-        return metadata;
-    }
-    if (metadata) {
-        // Try JSON.stringify even for objects with functions — it safely omits
-        // function-valued and undefined properties. Only fall back to String()
-        // for cases that actually throw (e.g. circular references).
-        try {
-            return JSON.stringify(metadata, undefined, format ? PrettyJSONIndent : undefined);
-        }
-        catch {
-            return String(metadata);
-        }
-    }
-    return null;
-}
-function Restringify(value, format) {
-    return IsParsable(value) ? JSON.stringify(JSON.parse(value), undefined, format ? PrettyJSONIndent : undefined) : value;
-}
-function PopulateGLTFExtras(metadata) {
-    if (!metadata) {
-        metadata = "{}";
-    }
-    if (!IsParsable(metadata)) {
-        return metadata;
-    }
-    try {
-        const parsedJson = JSON.parse(metadata);
-        if (parsedJson) {
-            if (Reflect.has(parsedJson, "gltf")) {
-                if (!Reflect.has(parsedJson.gltf, "extras")) {
-                    parsedJson.gltf.extras = {};
-                }
-            }
-            else {
-                parsedJson.gltf = { extras: {} };
-            }
-        }
-        return JSON.stringify(parsedJson);
-    }
-    catch {
-        return metadata;
-    }
-}
-function SaveMetadata(entity, metadata) {
-    if (IsParsable(metadata)) {
-        entity.metadata = JSON.parse(metadata);
-    }
-    else {
-        entity.metadata = metadata;
-    }
-}
-const useStyles = makeStyles({
-    mainDiv: {
-        display: "flex",
-        flexDirection: "column",
-        gap: tokens.spacingVerticalXS,
-    },
-    buttonDiv: {
-        display: "grid",
-        gridAutoFlow: "column",
-        gridTemplateColumns: "1fr auto auto auto",
-        gap: tokens.spacingHorizontalXS,
-    },
-});
-/**
- * Component to display metadata properties of an entity.
- * @param props - The properties for the component.
- * @returns A React component that displays metadata properties.
- */
-const MetadataProperties = (props) => {
-    const { entity } = props;
-    const classes = useStyles();
-    const { size } = useContext(ToolContext);
-    const metadata = useProperty(entity, "metadata");
-    const stringifiedMetadata = useMemo(() => StringifyMetadata(metadata, false) ?? "", [metadata]);
-    const metadataType = useMemo(() => GetMetadataEntityType(metadata), [metadata]);
-    const canPreventObjectCorruption = metadataType === "object";
-    const [preventObjectCorruption, setPreventObjectCorruption] = useState(false);
-    const isReadonly = canPreventObjectCorruption && preventObjectCorruption;
-    const [editedMetadata, setEditedMetadata] = useState(stringifiedMetadata);
-    useEffect(() => {
-        setEditedMetadata(stringifiedMetadata);
-    }, [stringifiedMetadata]);
-    const isEditedMetadataJSON = useMemo(() => IsParsable(editedMetadata), [editedMetadata]);
-    const unformattedEditedMetadata = useMemo(() => Restringify(editedMetadata, false), [editedMetadata]);
-    return (jsxs(Fragment, { children: [jsx(TextPropertyLine, { label: "Property Type", value: metadataType }), jsx(Collapse, { visible: canPreventObjectCorruption, children: jsx(SwitchPropertyLine, { label: "Prevent Object Corruption", value: isReadonly, onChange: setPreventObjectCorruption }) }), jsx(LineContainer, { uniqueId: "MetadataTextarea", children: jsx(Textarea, { disabled: isReadonly, value: editedMetadata, onChange: setEditedMetadata }) }), jsx(ButtonLine, { label: "Populate glTF extras", disabled: !!editedMetadata && (!IsParsable(editedMetadata) || HasGltfExtras(editedMetadata)), onClick: () => {
-                    const isFormatted = Restringify(editedMetadata, true) === editedMetadata;
-                    let withGLTFExtras = PopulateGLTFExtras(editedMetadata);
-                    if (isFormatted) {
-                        withGLTFExtras = Restringify(withGLTFExtras, true);
-                    }
-                    setEditedMetadata(withGLTFExtras);
-                } }), jsx(LineContainer, { uniqueId: "MetadataButtonDiv", children: jsxs("div", { className: classes.buttonDiv, children: [jsx(Button$1, { size: size, icon: jsx(SaveRegular, {}), disabled: stringifiedMetadata === unformattedEditedMetadata, onClick: () => SaveMetadata(entity, editedMetadata), children: jsx(Body1, { children: "Save" }) }), jsx(Tooltip$1, { content: "Undo Changes", relationship: "label", children: jsx(Button$1, { size: size, icon: jsx(ArrowUndoRegular, {}), disabled: stringifiedMetadata === unformattedEditedMetadata, onClick: () => setEditedMetadata(stringifiedMetadata) }) }), jsx(Tooltip$1, { content: "Format (Pretty Print)", relationship: "label", children: jsx(Button$1, { size: size, icon: jsx(BracesRegular, {}), disabled: !isEditedMetadataJSON, onClick: () => setEditedMetadata(Restringify(editedMetadata, true)) }) }), jsx(Tooltip$1, { content: "Clear Formatting (Undo Pretty Print)", relationship: "label", children: jsx(Button$1, { size: size, icon: jsx(BracesDismiss16Regular, {}), disabled: !isEditedMetadataJSON, onClick: () => setEditedMetadata(Restringify(editedMetadata, false)) }) })] }) })] }));
-};
-
 function GetPosition$1(node) {
     return [node.position.x, node.position.y, node.position.z];
 }
@@ -9421,30 +10365,48 @@ const TextLayerPropertiesServiceDefinition = {
     }),
 };
 
-function IsTexture2D(entity) {
+const TextureMetadataProperties = MakeLazyComponent(async () => (await import('./textureMetadataProperties-BdNmp0Pk.js')).TextureMetadataProperties, {
+    spinnerLabel: "Loading texture metadata",
+});
+function TryGetTextureMetadata(entity) {
     if (typeof entity !== "object" || entity === null) {
         return false;
     }
-    const texture = entity;
-    return typeof texture.width === "number" && typeof texture.height === "number" && texture.texture !== undefined && texture.view !== undefined && texture.sampler !== undefined;
+    try {
+        return getTextureMetadata(entity) !== undefined;
+    }
+    catch {
+        return false;
+    }
 }
-const TextureProperties = (props) => {
-    const { texture } = props;
-    return (jsxs(Fragment, { children: [jsx(StringifiedPropertyLine, { label: "Width", value: texture.width, units: "px" }), jsx(StringifiedPropertyLine, { label: "Height", value: texture.height, units: "px" }), jsx(BooleanBadgePropertyLine, { label: "Invert Y", value: texture.invertY ?? false })] }));
-};
 const TexturePropertiesServiceDefinition = {
     friendlyName: "Babylon Lite Texture Properties",
-    consumes: [PropertiesServiceIdentity],
-    factory: (propertiesService) => propertiesService.addSectionContent({
-        key: "Babylon Lite Texture Properties",
-        predicate: IsTexture2D,
-        content: [
-            {
-                section: "General",
-                component: ({ context }) => jsx(TextureProperties, { texture: context }),
+    consumes: [PropertiesServiceIdentity, SceneResourceIndexServiceIdentity, SelectionServiceIdentity],
+    factory: (propertiesService, resourceIndexService, selectionService) => {
+        const recognizedTextures = new WeakSet();
+        return propertiesService.addSectionContent({
+            key: "Babylon Lite Texture Properties",
+            predicate: (entity) => {
+                if (typeof entity !== "object" || entity === null) {
+                    return false;
+                }
+                if (TryGetTextureMetadata(entity) || resourceIndexService.getTextureRecord(entity)) {
+                    recognizedTextures.add(entity);
+                    return true;
+                }
+                return recognizedTextures.has(entity);
             },
-        ],
-    }),
+            content: [
+                {
+                    section: "General",
+                    component: ((props) => {
+                        const { context } = props;
+                        return createElement(TextureMetadataProperties, { texture: context, resourceIndexService, selectionService });
+                    }),
+                },
+            ],
+        });
+    },
 };
 
 function ClearRemovedSelection(selectionService, engineContext, selectionWasRemoved) {
@@ -9499,6 +10461,103 @@ const CameraExplorerServiceDefinition = {
     },
 };
 
+const AnimationGroupIcon = () => jsx(StackRegular, { color: tokens.colorPaletteBlueForeground2 });
+const TargetedAnimationIcon = () => jsx(FilmstripRegular, { color: tokens.colorPaletteBlueForeground2 });
+const AnimationGroupExplorerServiceDefinition = {
+    friendlyName: "Babylon Lite Animation Group Explorer",
+    consumes: [EngineExplorerServiceIdentity, ExplorerServiceIdentity, WatcherServiceIdentity, EngineContextIdentity, SelectionServiceIdentity],
+    factory: (engineExplorerService, explorerService, watcherService, engineContext, selectionService) => {
+        const engine = engineContext.engine;
+        const providerRegistration = engineExplorerService.addRenderingContextNodeProvider({
+            order: 300,
+            predicate: IsSceneContext,
+            getNodes: (scene) => [
+                {
+                    id: "animation-groups",
+                    kind: "group",
+                    getDisplayInfo: () => ({ name: "Animation Groups" }),
+                    getChildren: () => scene.animationGroups.map((group) => ({
+                        id: GetEntityId(group).toString(),
+                        kind: "item",
+                        entity: group,
+                        icon: AnimationGroupIcon,
+                        getDisplayInfo: () => CreateWatchedNameDisplayInfo(watcherService, group, () => group.name || "Unnamed Animation Group"),
+                        getChildren: () => group.targetedAnimations.map((animation) => ({
+                            id: GetEntityId(animation).toString(),
+                            kind: "item",
+                            entity: animation,
+                            icon: TargetedAnimationIcon,
+                            getDisplayInfo: () => {
+                                const onChange = new Observable();
+                                const watcher = watcherService.watchValue(() => GetTargetedAnimationDisplayName(animation), () => onChange.notifyObservers());
+                                return {
+                                    get name() {
+                                        return GetTargetedAnimationDisplayName(animation);
+                                    },
+                                    onChange,
+                                    dispose: () => {
+                                        watcher.dispose();
+                                        onChange.clear();
+                                    },
+                                };
+                            },
+                        })),
+                    })),
+                },
+            ],
+            getSnapshot: (scene) => scene.animationGroups.flatMap((group) => [group, ...group.targetedAnimations]),
+        });
+        const playPauseRegistration = explorerService.addItemCommand({
+            predicate: (entity) => IsAnimationGroup(engine, entity),
+            order: 1100,
+            getCommand: (group) => {
+                const onChange = new Observable();
+                const watcher = watcherService.watchProperty(group, "isPlaying", () => onChange.notifyObservers());
+                return {
+                    type: "toggle",
+                    get displayName() {
+                        return `${group.isPlaying ? "Pause" : "Play"} Animation`;
+                    },
+                    icon: () => (group.isPlaying ? jsx(PauseFilled, {}) : jsx(PlayFilled, {})),
+                    hotKey: { keyCode: "Space", control: true },
+                    get isEnabled() {
+                        return group.isPlaying;
+                    },
+                    set isEnabled(enabled) {
+                        if (enabled) {
+                            playAnimation(group);
+                        }
+                        else {
+                            pauseAnimation(group);
+                        }
+                        watcherService.refresh();
+                    },
+                    onChange,
+                    dispose: () => {
+                        watcher.dispose();
+                        onChange.clear();
+                    },
+                };
+            },
+        });
+        const getAnimationEntities = () => GetSceneAnimationGroups(engine).flatMap((group) => [group, ...group.targetedAnimations]);
+        let previousEntities = getAnimationEntities();
+        const selectionWatcher = watcherService.watchValue(getAnimationEntities, (entities) => {
+            if (selectionService.selectedEntity && previousEntities.includes(selectionService.selectedEntity) && !entities.includes(selectionService.selectedEntity)) {
+                selectionService.selectedEntity = null;
+            }
+            previousEntities = entities;
+        }, (left, right) => left.length === right.length && left.every((entity, index) => entity === right[index]));
+        return {
+            dispose: () => {
+                selectionWatcher.dispose();
+                playPauseRegistration.dispose();
+                providerRegistration.dispose();
+            },
+        };
+    },
+};
+
 const LightIcon = () => jsx(LightbulbRegular, { color: tokens.colorPaletteYellowForeground2 });
 const LightExplorerServiceDefinition = {
     friendlyName: "Babylon Lite Light Explorer",
@@ -9550,37 +10609,23 @@ createFluentIcon("BreakTangent", "20", '<g transform="scale(0.5)"><path d="M27.1
 createFluentIcon("UnifyTangent", "20", '<g transform="scale(0.5)"><path d="M27.94,18.28a1.49,1.49,0,0,0-1.41,1h-5l-1.62-1.63-1.62,1.63h-5a1.5,1.5,0,1,0,0,1h5l1.62,1.62,1.62-1.62h5a1.5,1.5,0,1,0,1.41-2Z"/></g>');
 createFluentIcon("StepTangent", "20", '<g transform="scale(0.5)"><path d="M29,16.71a1.5,1.5,0,1,0-2,1.41v5.67H11v1H28V18.12A1.51,1.51,0,0,0,29,16.71Z"/></g>');
 
-/**
- * Gets the unique materials referenced by a scene's meshes.
- * @param scene The scene to inspect.
- * @returns The referenced materials in mesh order.
- */
-function GetSceneMaterials(scene) {
-    return [...new Set(scene.meshes.map((mesh) => mesh.material))];
-}
-/**
- * Gets the unique textures referenced by a scene's materials.
- * @param scene The scene to inspect.
- * @returns The referenced textures in material order.
- */
-function GetSceneTextures(scene) {
-    return [...new Set(GetSceneMaterials(scene).flatMap((material) => getMaterialTextures(material)))];
-}
-
 function GetMaterialDisplayName(material) {
     const family = getMaterialFamily(material);
     return material.name ?? (family ? `${family.charAt(0).toUpperCase()}${family.slice(1)} Material` : "Material");
 }
 const MaterialExplorerServiceDefinition = {
     friendlyName: "Babylon Lite Material Explorer",
-    consumes: [EngineExplorerServiceIdentity, WatcherServiceIdentity],
-    factory: (engineExplorerService, watcherService) => engineExplorerService.addRenderingContextNodeProvider({
+    consumes: [EngineExplorerServiceIdentity, WatcherServiceIdentity, SceneResourceIndexServiceIdentity],
+    factory: (engineExplorerService, watcherService, resourceIndexService) => engineExplorerService.addRenderingContextNodeProvider({
         order: 100,
         predicate: IsSceneContext,
-        getNodes: (scene) => [
-            CreateSceneExplorerSectionNode("materials", "Materials", GetSceneMaterials(scene), (material) => CreateWatchedNameDisplayInfo(watcherService, material, () => GetMaterialDisplayName(material)), () => jsx(MaterialIcon, { color: tokens.colorPaletteMarigoldForeground2 })),
-        ],
-        getSnapshot: GetSceneMaterials,
+        getNodes: (scene) => {
+            return [
+                CreateSceneExplorerSectionNode("materials", "Materials", resourceIndexService.getSceneSnapshot(scene).materials.map((record) => record.source), (material) => CreateWatchedNameDisplayInfo(watcherService, material, () => GetMaterialDisplayName(material)), () => jsx(MaterialIcon, { color: tokens.colorPaletteMarigoldForeground2 })),
+            ];
+        },
+        getSnapshot: (scene) => resourceIndexService.getSceneSnapshot(scene).materials.map((record) => record.source),
+        onChanged: resourceIndexService.onChanged,
     }),
 };
 
@@ -9829,19 +10874,29 @@ const TextLayerExplorerServiceDefinition = CreateRenderingLayerExplorerServiceDe
     icon: TextLayerIcon,
 });
 
-function GetTextureDisplayName(texture, index) {
-    return `Texture ${index + 1} (${texture.width} x ${texture.height})`;
+function GetTextureDisplayName(record) {
+    if (record.metadata.kind === "cube") {
+        return `Texture ${record.ordinal} (Cube)`;
+    }
+    return typeof record.metadata.width === "number" && typeof record.metadata.height === "number"
+        ? `Texture ${record.ordinal} (${record.metadata.width} x ${record.metadata.height})`
+        : `Texture ${record.ordinal}`;
 }
 const TextureExplorerServiceDefinition = {
     friendlyName: "Babylon Lite Texture Explorer",
-    consumes: [EngineExplorerServiceIdentity],
-    factory: (engineExplorerService) => engineExplorerService.addRenderingContextNodeProvider({
+    consumes: [EngineExplorerServiceIdentity, SceneResourceIndexServiceIdentity],
+    factory: (engineExplorerService, resourceIndexService) => engineExplorerService.addRenderingContextNodeProvider({
         order: 200,
         predicate: IsSceneContext,
-        getNodes: (scene) => [
-            CreateSceneExplorerSectionNode("textures", "Textures", GetSceneTextures(scene), (texture, index) => ({ name: GetTextureDisplayName(texture, index) }), () => jsx(ImageRegular, { color: tokens.colorPaletteGrapeForeground2 })),
-        ],
-        getSnapshot: GetSceneTextures,
+        getNodes: (scene) => {
+            const records = resourceIndexService.getSceneSnapshot(scene).textures;
+            const recordsByEntity = new Map(records.map((record) => [record.entity, record]));
+            return [
+                CreateSceneExplorerSectionNode("textures", "Textures", records.map((record) => record.entity), (texture) => ({ name: GetTextureDisplayName(recordsByEntity.get(texture)) }), () => jsx(ImageRegular, { color: tokens.colorPaletteGrapeForeground2 })),
+            ];
+        },
+        getSnapshot: (scene) => resourceIndexService.getSceneSnapshot(scene).textures.map((record) => record.entity),
+        onChanged: resourceIndexService.onChanged,
     }),
 };
 
@@ -9882,6 +10937,7 @@ function ShowInspector(engine, options = {}) {
                 engineContextServiceDefinition,
                 watcherServiceDefinition,
                 EngineExplorerServiceDefinition,
+                SceneResourceIndexServiceDefinition,
                 MeshExplorerServiceDefinition,
                 CameraExplorerServiceDefinition,
                 LightExplorerServiceDefinition,
@@ -9890,6 +10946,7 @@ function ShowInspector(engine, options = {}) {
                 TextureExplorerServiceDefinition,
                 TextLayerExplorerServiceDefinition,
                 SpriteLayerExplorerServiceDefinition,
+                AnimationGroupExplorerServiceDefinition,
                 PropertiesServiceDefinition,
                 EnginePropertiesServiceDefinition,
                 RenderingContextPropertiesServiceDefinition,
@@ -9902,12 +10959,14 @@ function ShowInspector(engine, options = {}) {
                 TexturePropertiesServiceDefinition,
                 TextLayerPropertiesServiceDefinition,
                 SpriteLayerPropertiesServiceDefinition,
+                AnimationPropertiesServiceDefinition,
                 SettingsServiceDefinition,
                 watcherSettingsServiceDefinition,
                 ShellSettingsServiceDefinition,
                 watcherRefreshToolbarServiceDefinition,
                 SelectionServiceDefinition,
                 EngineSelectionServiceDefinition,
+                PickingServiceDefinition,
             ];
             return {
                 serviceDefinitions,
@@ -9917,5 +10976,5 @@ function ShowInspector(engine, options = {}) {
     });
 }
 
-export { PropertyLine as $, Accordion as A, BooleanBadgePropertyLine as B, Checkbox as C, DraggableLine as D, EngineContextIdentity as E, FileUploadLine as F, GetPropertyDescriptor as G, HexPropertyLine as H, InfoLabel as I, MakeModularBridge as J, MakeModularTool as K, Link as L, MakeDialogTeachingMoment as M, MakePopoverTeachingMoment as N, MakeTeachingMoment as O, MessageBar as P, NumberDropdown as Q, NumberDropdownPropertyLine as R, ShellServiceIdentity as S, NumberInputPropertyLine as T, ObservableCollection as U, Pane as V, PlaceholderPropertyLine as W, Popover as X, PositionedPopover as Y, PropertiesServiceIdentity as Z, PropertyContext as _, AccordionSection as a, SearchBar as a0, SearchBox as a1, SelectionServiceDefinition as a2, SelectionServiceIdentity as a3, SettingsServiceIdentity as a4, SettingsStore as a5, SettingsStoreIdentity as a6, ShowInspector as a7, SidePaneContainer as a8, Slider as a9, useInterceptObservable as aA, useKeyListener as aB, useKeyState as aC, useObservableCollection as aD, useObservableState as aE, useOrderedObservableCollection as aF, usePollingObservable as aG, usePropertyChangedNotifier as aH, useResource as aI, useTheme as aJ, useThemeMode as aK, useToast as aL, SpinButton as aa, SpinButtonPropertyLine as ab, StringDropdown as ac, StringDropdownPropertyLine as ad, StringifiedPropertyLine as ae, Switch as af, SwitchPropertyLine as ag, SyncedSliderInput as ah, SyncedSliderPropertyLine as ai, TeachingMoment as aj, TextAreaPropertyLine as ak, TextInput as al, TextInputPropertyLine as am, TextPropertyLine as an, Textarea as ao, Theme as ap, ThemeServiceIdentity as aq, ToastProvider as ar, ToggleButton as as, Tooltip as at, UploadButton as au, WatcherServiceIdentity as av, useAngleConverters as aw, useAsyncResource as ax, useEventListener as ay, useEventfulState as az, AccordionSectionItem as b, BridgeCommandRegistryIdentity as c, BuiltInsExtensionFeed as d, Button as e, ButtonLine as f, CheckboxPropertyLine as g, ChildWindow as h, Collapse as i, ComboBox as j, ComboBoxPropertyLine as k, ConstructorFactory as l, Dropdown as m, EngineExplorerServiceIdentity as n, EntitySelector as o, ErrorBoundary as p, ExplorerServiceIdentity as q, ExtensibleAccordion as r, InterceptFunction as s, InterceptProperty as t, useExtensionManager as u, IsPropertyReadonly as v, LineContainer as w, LinkPropertyLine as x, List as y, MakeLazyComponent as z };
-//# sourceMappingURL=index-D8vFySa7.js.map
+export { EntitySelector as $, Accordion as A, ButtonLine as B, ComputedProperty as C, DerivedProperty as D, BridgeCommandRegistryIdentity as E, BuiltInsExtensionFeed as F, GetAnimationFrameRate as G, Button as H, Checkbox as I, CheckboxPropertyLine as J, ChildWindow as K, Link as L, MessageBar as M, NumberInputPropertyLine as N, Collapse as O, PropertyLine as P, ComboBox as Q, ResourceSelector as R, ShellServiceIdentity as S, TextPropertyLine as T, ComboBoxPropertyLine as U, Vector2PropertyLine as V, ConstructorFactory as W, DraggableLine as X, Dropdown as Y, EngineContextIdentity as Z, EngineExplorerServiceIdentity as _, useWatcher as a, useTheme as a$, ErrorBoundary as a0, ExplorerServiceIdentity as a1, ExtensibleAccordion as a2, FileUploadLine as a3, GetPropertyDescriptor as a4, HexPropertyLine as a5, InfoLabel as a6, InterceptFunction as a7, InterceptProperty as a8, IsPropertyReadonly as a9, SpinButton as aA, SpinButtonPropertyLine as aB, StringDropdown as aC, Switch as aD, SyncedSliderInput as aE, TeachingMoment as aF, TextAreaPropertyLine as aG, TextInput as aH, Textarea as aI, Theme as aJ, ThemeServiceIdentity as aK, ToastProvider as aL, ToggleButton as aM, Tooltip as aN, UploadButton as aO, WatcherServiceIdentity as aP, useAngleConverters as aQ, useAsyncResource as aR, useEventListener as aS, useEventfulState as aT, useInterceptObservable as aU, useKeyListener as aV, useKeyState as aW, useObservableCollection as aX, useOrderedObservableCollection as aY, usePollingObservable as aZ, useResource as a_, LineContainer as aa, List as ab, MakeDialogTeachingMoment as ac, MakeLazyComponent as ad, MakeModularBridge as ae, MakeModularTool as af, MakePopoverTeachingMoment as ag, MakeTeachingMoment as ah, NumberDropdown as ai, ObservableCollection as aj, Pane as ak, PlaceholderPropertyLine as al, Popover as am, PositionedPopover as an, PropertiesServiceIdentity as ao, PropertyContext as ap, SearchBar as aq, SearchBox as ar, SelectionServiceDefinition as as, SelectionServiceIdentity as at, SettingsServiceIdentity as au, SettingsStore as av, SettingsStoreIdentity as aw, ShowInspector as ax, SidePaneContainer as ay, Slider as az, useWatchedValue as b, useThemeMode as b0, useToast as b1, SeekAnimationFrame as c, BoundProperty as d, SyncedSliderPropertyLine as e, SwitchPropertyLine as f, StringifiedPropertyLine as g, GetTargetedAnimationDisplayName as h, GetEntityAnimationGroups as i, GetEntityId as j, TextInputPropertyLine as k, Color3PropertyLine as l, NumberDropdownPropertyLine as m, StringDropdownPropertyLine as n, useObservableState as o, usePropertyChangedNotifier as p, GetMaterialOwningScenes as q, Color4PropertyLine as r, Vector4PropertyLine as s, Vector3PropertyLine as t, useExtensionManager as u, BooleanBadgePropertyLine as v, LinkPropertyLine as w, GetMaterialTopologyBindings as x, AccordionSection as y, AccordionSectionItem as z };
+//# sourceMappingURL=index-Cy8gzpYG.js.map