@babylonjs/inspector 9.30.0 → 9.31.0

package/lib/{index-CZ1-Y-Rv.js → index-DbbhJJ1G.js}

@@ -108,6 +108,9 @@ import { MeshBlendingRadiusClass, UnpackMeshBlendingTag, PackMeshBlendingTag } f
 import { RenderingManager } from '@babylonjs/core/Rendering/renderingManager.js';
 import '@babylonjs/core/Rendering/edgesRenderer.js';
 import '@babylonjs/core/Rendering/outlineRenderer.js';
+import { GaussianSplattingMaterial } from '@babylonjs/core/Materials/GaussianSplatting/gaussianSplattingMaterial.js';
+import { GaussianSplattingSizeMaterialPlugin } from '@babylonjs/core/Materials/GaussianSplatting/gaussianSplattingSizeMaterialPlugin.js';
+import { GaussianSplattingOverdrawMaterialPlugin } from '@babylonjs/core/Materials/GaussianSplatting/gaussianSplattingOverdrawMaterialPlugin.js';
 import { GPUParticleSystem } from '@babylonjs/core/Particles/gpuParticleSystem.js';
 import { ConvertToNodeParticleSystemSetAsync } from '@babylonjs/core/Particles/Node/nodeParticleSystemSet.helper.js';
 import { ParticleHelper } from '@babylonjs/core/Particles/particleHelper.js';
@@ -3413,29 +3416,22 @@ const useStyles$W = 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$W();
-    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({
@@ -5296,7 +5292,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-DfE1ZOnF.js');
+                    const { ExtensionListServiceDefinition } = await import('./extensionsListService-O8zrOnmL.js');
                     serviceContainer.addService(ExtensionListServiceDefinition);
                 }
                 // Register all external services (that make up a unique tool).
@@ -5717,6 +5713,11 @@ const useStyles$P = 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.
@@ -5740,13 +5741,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({
@@ -5820,26 +5821,18 @@ const useStyles$O = 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$O();
     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(() => {
@@ -5847,28 +5840,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$2 = (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$2, filter: filterEntity, onSelect: onChange, onClear: onChange && defaultValue !== undefined ? () => onChange(defaultValue) : undefined, onLink: onLink, disabled: disabled, showEmptySelector: true }));
 }
 EntitySelector.displayName = "EntitySelector";
 
@@ -7428,10 +7430,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
@@ -10434,14 +10445,14 @@ const DefaultInspectorExtensionFeed = new BuiltInsExtensionFeed("Inspector", [
         description: "Adds a new panel for easy creation of various Babylon assets. This is a WIP extension...expect changes!",
         keywords: ["creation", "tools"],
         ...BabylonWebResources,
-        getExtensionModuleAsync: async () => await import('./quickCreateToolsService-owfaw163.js'),
+        getExtensionModuleAsync: async () => await import('./quickCreateToolsService-Cs46Amv7.js'),
     },
     {
         name: "Reflector",
         description: "Sends a serialized snapshot of the scene to the Babylon.js Sandbox through the Reflector Bridge. The snapshot is sent once and is read-only, so it does not stay in sync with this scene.",
         keywords: ["reflector", "bridge", "snapshot", "sync", "sandbox", "tools"],
         ...BabylonWebResources,
-        getExtensionModuleAsync: async () => await import('./reflectorService-oIAxxpQt.js'),
+        getExtensionModuleAsync: async () => await import('./reflectorService-C43FgOiC.js'),
     },
 ]);
 
@@ -11380,7 +11391,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,
@@ -11391,8 +11402,8 @@ 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 Picker = (props) => jsx(ColorPickerPopup, { ...props });
@@ -11441,11 +11452,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,
@@ -14436,6 +14447,39 @@ const TopBar = () => {
     return (jsxs("div", { className: styles.root, children: [jsx("div", { className: styles.title, children: state.title }), jsx(Divider, { vertical: true, className: styles.divider }), jsxs("div", { className: styles.inputGroup, children: [jsx("div", { className: styles.inputLabel, children: "Frame:" }), jsx(SpinButton, { className: styles.spinButton, value: keyFrameValue ?? 0, onChange: handleFrameChange, disabled: !hasActiveAnimations || !frameControlEnabled })] }), jsxs("div", { className: styles.inputGroup, children: [jsx("div", { className: styles.inputLabel, children: "Value:" }), jsx(SpinButton, { className: styles.spinButton, value: keyValue ?? 0, onChange: handleValueChange, disabled: !hasActiveAnimations || !valueControlEnabled, step: 0.1 })] }), jsx(Divider, { vertical: true, className: styles.divider }), jsxs("div", { className: styles.buttonGroup, children: [jsx(Button, { icon: AddRegular, appearance: "subtle", disabled: !hasActiveAnimations, onClick: () => observables.onCreateOrUpdateKeyPointRequired.notifyObservers(), title: "New key" }), jsx(Button, { icon: DeleteRegular, appearance: "subtle", disabled: !hasActiveKeyPoints, onClick: () => observables.onDeleteKeyActiveKeyPoints.notifyObservers(), title: "Delete key" }), jsx(Button, { icon: FullScreenMaximizeRegular, appearance: "subtle", onClick: () => observables.onFrameRequired.notifyObservers(), title: "Frame canvas" })] }), jsx(Divider, { vertical: true, className: styles.divider }), jsxs("div", { className: styles.buttonGroup, children: [jsx(Button, { icon: FlatTangentIcon, appearance: "subtle", disabled: !hasActiveKeyPoints, onClick: () => observables.onFlattenTangentRequired.notifyObservers(), title: "Flatten tangent" }), jsx(Button, { icon: LinearTangentIcon, appearance: "subtle", disabled: !hasActiveKeyPoints, onClick: () => observables.onLinearTangentRequired.notifyObservers(), title: "Linear tangent" }), jsx(Button, { icon: BreakTangentIcon, appearance: "subtle", disabled: !hasActiveKeyPoints, onClick: () => observables.onBreakTangentRequired.notifyObservers(), title: "Break tangent" }), jsx(Button, { icon: UnifyTangentIcon, appearance: "subtle", disabled: !hasActiveKeyPoints, onClick: () => observables.onUnifyTangentRequired.notifyObservers(), title: "Unify tangent" }), jsx(Button, { icon: StepTangentIcon, appearance: "subtle", disabled: !hasActiveKeyPoints, onClick: () => observables.onStepTangentRequired.notifyObservers(), title: "Step tangent" })] })] }));
 };
 
+/**
+ * Gets the animations owned by the child animatables of a target.
+ * @param target - The animatable whose children are read
+ * @returns The animations of all child animatables, in order
+ */
+function GetChildAnimations(target) {
+    return target.getAnimatables?.().flatMap((animatable) => animatable.animations ?? []) ?? [];
+}
+/**
+ * Gets the animations owned by a target followed by the animations of its child animatables.
+ * @param target - The animatable to read
+ * @returns The target's own animations, then its children's
+ */
+function GetAnimationsWithChildren(target) {
+    return (target.animations ?? []).concat(GetChildAnimations(target));
+}
+/**
+ * Removes an animation from the animatable that owns it: the target itself or one of its child animatables.
+ * @param target - The animatable shown in the editor
+ * @param animation - The animation to remove
+ * @returns true if an owner was found and the animation was removed
+ */
+function RemoveAnimationFromOwner(target, animation) {
+    const owners = [target, ...(target.getAnimatables?.() ?? [])];
+    for (const owner of owners) {
+        if (owner.animations?.includes(animation)) {
+            owner.animations = owner.animations.filter((a) => a !== animation);
+            return true;
+        }
+    }
+    return false;
+}
+
 /**
  * Color constants for the curve editor
  * These colors are used consistently across the curve editor UI for
@@ -14720,8 +14764,9 @@ const AnimationList = () => {
     // Re-render when animations are loaded or changed (e.g. animation deleted)
     // useCallback stabilizes the accessor to prevent infinite re-render loops
     useObservableState(useCallback(() => ({}), []), observables.onAnimationsLoaded, observables.onActiveAnimationChanged);
-    // Get animations from target if available (for dynamically added animations), otherwise from state
-    const animations = state.target?.animations ?? state.animations;
+    // Read from the target if available (for dynamically added animations), including its child animatables'
+    // animations (e.g. a skeleton's bones), so the list matches the animations pane. Otherwise use state.
+    const animations = state.target && !state.useTargetAnimations ? GetAnimationsWithChildren(state.target) : state.animations;
     return (jsx("div", { className: styles.root, children: animations?.map((a, i) => {
             const animation = state.useTargetAnimations ? a.animation : a;
             return jsx(AnimationEntry, { animation: animation }, animation.uniqueId ?? i);
@@ -15368,27 +15413,33 @@ const SideBar = () => {
             observables.onAnimationsLoaded.remove(observer);
         };
     }, [observables]);
-    // Subscribe to delete animation request - use ref to access current state.target
+    // Subscribe to delete animation request - use refs to access the current state.target and state.animations.
+    // The animations pane passes a new aggregate array on every render, so the mount-time array goes stale.
     const targetRef = useRef(state.target);
     targetRef.current = state.target;
+    const animationsRef = useRef(state.animations);
+    animationsRef.current = state.animations;
+    const useTargetAnimationsRef = useRef(state.useTargetAnimations);
+    useTargetAnimationsRef.current = state.useTargetAnimations;
     useEffect(() => {
         const observer = observables.onDeleteAnimation.add((animation) => {
             // Remove from active animations
             actions.setActiveAnimations((prev) => prev.filter((a) => a !== animation));
-            // Update target if exists
+            // Remove from whichever animatable owns it: the target or one of its child animatables (e.g. a bone of a skeleton)
             const target = targetRef.current;
-            if (target && target.animations) {
-                target.animations = target.animations.filter((a) => a !== animation);
+            if (target) {
+                RemoveAnimationFromOwner(target, animation);
             }
             // Also update state.animations if it's an array we can filter
             // This mutates the array in place since we can't setState on a prop
-            if (state.animations) {
-                const index = state.animations.findIndex((a) => {
-                    const anim = state.useTargetAnimations ? a.animation : a;
+            const animations = animationsRef.current;
+            if (animations) {
+                const index = animations.findIndex((a) => {
+                    const anim = useTargetAnimationsRef.current ? a.animation : a;
                     return anim === animation;
                 });
                 if (index !== -1) {
-                    state.animations.splice(index, 1);
+                    animations.splice(index, 1);
                 }
             }
             observables.onAnimationsLoaded.notifyObservers();
@@ -17990,10 +18041,8 @@ const AnimationsProperties = (props) => {
     const { scene, entity } = props;
     // Track animations array changes via property interception
     const trackedAnimations = useProperty(entity, "animations");
-    const animations = trackedAnimations ?? [];
     const ranges = entity.getAnimationRanges?.()?.filter((range) => !!range) ?? [];
-    const childAnimatablesAnimations = entity.getAnimatables?.().flatMap((animatable) => animatable.animations ?? []) ?? [];
-    animations.concat(childAnimatablesAnimations);
+    const animations = (trackedAnimations ?? []).concat(GetChildAnimations(entity));
     const lastFrom = useRef(0);
     const lastTo = useRef(0);
     const lastLoop = useRef(false);
@@ -20909,10 +20958,41 @@ const GaussianSplattingStreamDiagnostics = (props) => {
     const { stream } = props;
     return (jsxs(Fragment, { children: [jsx(ComputedProperty, { component: StringifiedPropertyLine, label: "Visible Splats", description: RenderedSplatCountDescription, target: stream, getValue: GetRenderedSplatCount }), jsx(ComputedProperty, { component: SplatBudgetPropertyLine, target: stream, getValue: GetResidentSplatBudget }), jsx(ComputedProperty, { component: Lod0SplatCountPropertyLine, target: stream, getValue: GetLod0SplatCount })] }));
 };
+const DebugModeOptions = [
+    { label: "Normal", value: "normal" },
+    { label: "Projected size", value: "size" },
+    { label: "Overdraw", value: "overdraw" },
+];
+/**
+ * Displays Gaussian mesh diagnostics and per-mesh debug rendering controls.
+ * @param props Selected mesh and Inspector-owned debug controller
+ * @returns Gaussian splat property lines
+ */
 const GaussianSplattingDisplayProperties = (props) => {
-    const { mesh } = props;
+    const { mesh, debugController } = props;
+    const [mode, setMode] = useState(() => debugController.getMode(mesh));
+    useEffect(() => {
+        const observer = debugController.onModeChangedObservable.add((changedMesh) => {
+            if (changedMesh === mesh) {
+                setMode(debugController.getMode(mesh));
+            }
+        });
+        setMode(debugController.getMode(mesh));
+        return () => {
+            debugController.onModeChangedObservable.remove(observer);
+        };
+    }, [mesh, debugController]);
+    const plugins = debugController.getPlugins(mesh);
     const stream = mesh.getClassName() === "GaussianSplattingStream" ? mesh : null;
-    return (jsxs(Fragment, { children: [jsx(ComputedProperty, { component: StringifiedPropertyLine, label: "Splat Count", description: SplatCountDescription, target: mesh, getValue: GetSplatCount }), jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "SH Degree", options: ShDegreeOptions, target: mesh, propertyKey: "shDegree" }), jsx(StringifiedPropertyLine, { label: "Max SH Degree", value: mesh.maxShDegree }), jsx(BooleanBadgePropertyLine, { label: "Has Compensation", value: mesh.compensation }), jsx(StringifiedPropertyLine, { label: "Kernel Size", value: mesh.kernelSize }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Min Pixel Size", description: "Discard splats projected smaller than this many pixels. 0 = disabled.", target: mesh, propertyKey: "minPixelSize", min: 0, max: 20, step: 0.5 }), stream && (jsxs(Fragment, { children: [jsx(GaussianSplattingStreamDiagnostics, { stream: stream }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Max Detail LOD", description: "Finest LOD level any node may render. 0 = full detail; higher values force a coarser maximum detail.", target: stream, propertyKey: "maxDetailLod", min: 0, max: stream.maxLodLevel, step: 1 })] }))] }));
+    return (jsxs(Fragment, { children: [jsx(StringDropdownPropertyLine, { label: "Debug Rendering", description: debugController.canDebug(mesh)
+                    ? "Per-mesh visualization; Normal restores the original material unless it was disposed."
+                    : "Unavailable: this mesh uses a non-Gaussian material.", options: DebugModeOptions, value: mode, disabled: !debugController.canDebug(mesh), onChange: (value) => {
+                    debugController.setMode(mesh, value);
+                    setMode(debugController.getMode(mesh));
+                } }), jsx(Collapse, { visible: mode === "size" && !!plugins, children: plugins && (jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Size Scale (pixels)", target: plugins.size, propertyKey: "sizeScale", min: 0.5, max: 128, step: 0.5 })) }), jsx(Collapse, { visible: mode === "overdraw" && !!plugins, children: plugins && (jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Overdraw Intensity", target: plugins.overdraw, propertyKey: "intensity", min: 0.001, max: 0.25, step: 0.001 })) }), jsx(ComputedProperty, { component: StringifiedPropertyLine, label: "Splat Count", description: SplatCountDescription, target: mesh, getValue: GetSplatCount }), jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "SH Degree", options: ShDegreeOptions, target: mesh, propertyKey: "shDegree" }), jsx(StringifiedPropertyLine, { label: "Max SH Degree", value: mesh.maxShDegree }), jsx(BooleanBadgePropertyLine, { label: "Has Compensation", value: mesh.compensation }), jsx(StringifiedPropertyLine, { label: "Kernel Size", value: mesh.kernelSize }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Min Pixel Size", description: "Discard splats projected smaller than this many pixels. 0 = disabled.", target: mesh, propertyKey: "minPixelSize", convertFrom: (value) => {
+                    debugController.setMinPixelSize(mesh, value);
+                    return value;
+                }, min: 0, max: 20, step: 0.5 }), stream && (jsxs(Fragment, { children: [jsx(GaussianSplattingStreamDiagnostics, { stream: stream }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Max Detail LOD", description: "Finest LOD level any node may render. 0 = full detail; higher values force a coarser maximum detail.", target: stream, propertyKey: "maxDetailLod", min: 0, max: stream.maxLodLevel, step: 1 })] }))] }));
 };
 
 function GetNodeGeometry(mesh) {
@@ -20962,10 +21042,165 @@ const NodeGeneralProperties = (props) => {
     return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NodeSelectorPropertyLine, label: "Parent", target: node, propertyKey: "parent", scene: node.getScene(), defaultValue: null, onLink: (parentNode) => (selectionService.selectedEntity = parentNode) }), jsx(Property, { component: SwitchPropertyLine, label: "Is Enabled", description: "Whether the node is enabled or not.", value: isEnabled, onChange: (checked) => node.setEnabled(checked), functionPath: "setEnabled" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Inherit Visibility", description: "Whether the node inherits visibility from its parent.", target: node, propertyKey: "inheritVisibility" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Is Visible", description: "Whether the node is visible or not.", target: node, propertyKey: "isVisible" })] }));
 };
 
+/** Owns Inspector-only per-mesh visualization materials for the lifetime of the properties service. */
+class GaussianSplattingDebugController {
+    constructor() {
+        this._entries = new Map();
+        /** Notifies controls when a mesh's debug mode changes, including external material replacement. */
+        this.onModeChangedObservable = new Observable();
+    }
+    /**
+     * Gets the active per-mesh mode, releasing a material replaced by the application.
+     * @param mesh Selected Gaussian mesh
+     * @returns Active mode
+     */
+    getMode(mesh) {
+        const entry = this._entries.get(mesh);
+        if (entry && mesh.material !== entry.temporary) {
+            this._release(mesh, false);
+            return "normal";
+        }
+        return entry?.mode ?? "normal";
+    }
+    /**
+     * Gets the two plugins on an Inspector-owned material.
+     * @param mesh Selected Gaussian mesh
+     * @returns Plugins when the mesh is being debugged
+     */
+    getPlugins(mesh) {
+        return this._entries.get(mesh);
+    }
+    /**
+     * @param mesh Selected Gaussian mesh
+     * @returns Whether its current material supports debugging
+     */
+    canDebug(mesh) {
+        return this._entries.has(mesh) || mesh.material instanceof GaussianSplattingMaterial;
+    }
+    /**
+     * Keeps Inspector edits to minimum pixel size on the source material while a visualization is active.
+     * @param mesh Selected Gaussian mesh
+     * @param value Minimum projected pixel size
+     */
+    setMinPixelSize(mesh, value) {
+        const entry = this._entries.get(mesh);
+        if (entry && !entry.originalDisposed && entry.original instanceof GaussianSplattingMaterial) {
+            entry.original.minPixelSize = Math.max(0, value);
+        }
+    }
+    /**
+     * Selects the rendering mode without changing the application's source material.
+     * @param mesh Gaussian mesh to visualize
+     * @param mode Rendering mode
+     */
+    setMode(mesh, mode) {
+        const current = this.getMode(mesh);
+        if (mode === "normal") {
+            if (current !== "normal") {
+                this._release(mesh, true);
+            }
+            return;
+        }
+        let entry = this._entries.get(mesh);
+        if (!entry) {
+            const original = mesh.material;
+            if (!(original instanceof GaussianSplattingMaterial) || mesh.isDisposed()) {
+                return;
+            }
+            const scene = mesh.getScene();
+            const temporary = new GaussianSplattingMaterial(`${mesh.name}_inspectorDebug`, scene);
+            const shadow = temporary.shadowDepthWrapper;
+            temporary.doNotSerialize = true;
+            temporary.reservedDataStore = { hidden: true };
+            shadow.baseMaterial.reservedDataStore = { hidden: true };
+            temporary.setSourceMesh(mesh);
+            temporary.kernelSize = original.kernelSize;
+            temporary.minPixelSize = original.minPixelSize;
+            temporary.compensation = original.compensation;
+            temporary.alpha = original.alpha;
+            temporary.alphaMode = original.alphaMode;
+            temporary.depthFunction = original.depthFunction;
+            temporary.disableDepthWrite = original.disableDepthWrite;
+            temporary.forceDepthWrite = original.forceDepthWrite;
+            temporary.clipPlane = original.clipPlane;
+            temporary.clipPlane2 = original.clipPlane2;
+            temporary.clipPlane3 = original.clipPlane3;
+            temporary.clipPlane4 = original.clipPlane4;
+            temporary.clipPlane5 = original.clipPlane5;
+            temporary.clipPlane6 = original.clipPlane6;
+            temporary.useLogarithmicDepth = original.useLogarithmicDepth;
+            const size = new GaussianSplattingSizeMaterialPlugin(temporary);
+            const overdraw = new GaussianSplattingOverdrawMaterialPlugin(temporary);
+            size.isEnabled = false;
+            overdraw.isEnabled = false;
+            entry = {
+                original,
+                originalDisposed: false,
+                originalObserver: original.onDisposeObservable.add(() => {
+                    const current = this._entries.get(mesh);
+                    if (current) {
+                        current.originalDisposed = true;
+                    }
+                }),
+                temporary,
+                shadow,
+                size,
+                overdraw,
+                mode: "normal",
+                meshObserver: mesh.onDisposeObservable.add(() => this._release(mesh, false)),
+                sceneObserver: scene.onDisposeObservable.add(() => this._release(mesh, false)),
+                materialObserver: mesh.onMaterialChangedObservable.add(() => {
+                    if (mesh.material !== temporary) {
+                        this._release(mesh, false);
+                    }
+                }),
+            };
+            this._entries.set(mesh, entry);
+            mesh.material = temporary;
+            if (this._entries.get(mesh) !== entry) {
+                return;
+            }
+        }
+        entry.size.isEnabled = mode === "size";
+        entry.overdraw.isEnabled = mode === "overdraw";
+        entry.mode = mode;
+        if (current !== mode) {
+            this.onModeChangedObservable.notifyObservers(mesh);
+        }
+    }
+    _release(mesh, restore) {
+        const entry = this._entries.get(mesh);
+        if (!entry) {
+            return;
+        }
+        this._entries.delete(mesh);
+        mesh.onDisposeObservable.remove(entry.meshObserver);
+        entry.original.onDisposeObservable.remove(entry.originalObserver);
+        const scene = mesh.getScene();
+        scene.onDisposeObservable.remove(entry.sceneObserver);
+        mesh.onMaterialChangedObservable.remove(entry.materialObserver);
+        if (restore && !mesh.isDisposed() && mesh.material === entry.temporary) {
+            mesh.material = entry.originalDisposed ? null : entry.original;
+        }
+        entry.shadow.dispose();
+        entry.shadow.baseMaterial.dispose(false, false);
+        entry.temporary.dispose(false, false);
+        this.onModeChangedObservable.notifyObservers(mesh);
+    }
+    /** Releases Inspector-owned materials, restoring a source material only if it remains alive. */
+    dispose() {
+        for (const mesh of this._entries.keys()) {
+            this._release(mesh, true);
+        }
+        this.onModeChangedObservable.clear();
+    }
+}
+
 const NodePropertiesServiceDefinition = {
     friendlyName: "Mesh Properties",
     consumes: [PropertiesServiceIdentity, SelectionServiceIdentity],
     factory: (propertiesService, selectionService) => {
+        const gaussianDebugController = new GaussianSplattingDebugController();
         const nodeContentRegistration = propertiesService.addSectionContent({
             key: "Node Properties",
             predicate: (entity) => entity instanceof Node$1,
@@ -21035,12 +21270,13 @@ const NodePropertiesServiceDefinition = {
             content: [
                 {
                     section: "Gaussian Splatting",
-                    component: ({ context }) => jsx(GaussianSplattingDisplayProperties, { mesh: context }),
+                    component: ({ context }) => jsx(GaussianSplattingDisplayProperties, { mesh: context, debugController: gaussianDebugController }),
                 },
             ],
         });
         return {
             dispose: () => {
+                gaussianDebugController.dispose();
                 nodeContentRegistration.dispose();
                 abstractMeshContentRegistration.dispose();
                 meshContentRegistration.dispose();
@@ -27199,7 +27435,7 @@ const EquirectangularCaptureTool = ({ scene }) => {
 };
 
 const GIFCaptureTool = MakeLazyComponent(async () => {
-    const gif = (await import('./gif-5DieAkSF.js').then(function (n) { return n.g; })).default;
+    const gif = (await import('./gif-ut7hgn9U.js').then(function (n) { return n.g; })).default;
     // TODO: Figure out how to grab this from NPM package instead of CDN
     const workerContent = await Tools.LoadFileAsync("https://cdn.jsdelivr.net/gh/terikon/gif.js.optimized@0.1.6/dist/gif.worker.js");
     const workerBlob = new Blob([workerContent], { type: "application/javascript" });
@@ -28774,4 +29010,4 @@ function DetachDebugLayer() {
 AttachDebugLayer();
 
 export { FactorGradientComponent as $, Accordion as A, Button as B, CheckboxPropertyLine as C, Color4PropertyLine as D, ColorPickerPopup as E, ColorStepGradientComponent as F, ComboBox as G, ComboBoxPropertyLine as H, ComputedProperty as I, ConstructorFactory as J, ConvertOptions as K, Link as L, MessageBar as M, NumberInputPropertyLine as N, DebugServiceIdentity as O, Popover as P, DerivedProperty as Q, DetachDebugLayer as R, ShellServiceIdentity as S, TextInputPropertyLine as T, DraggableLine as U, Vector3PropertyLine as V, Dropdown as W, EntitySelector as X, ErrorBoundary as Y, ExplorerServiceIdentity as Z, ExtensibleAccordion as _, useToast as a, TextureSelector as a$, FactorGradientList as a0, FileUploadLine as a1, GetPropertyDescriptor as a2, GizmoServiceIdentity as a3, HexPropertyLine as a4, InfoLabel as a5, InputHexField as a6, InputHsvField as a7, Inspector as a8, InterceptFunction as a9, RotationVectorPropertyLine as aA, SceneExplorerServiceIdentity as aB, SearchBar as aC, SearchBox as aD, SelectionServiceDefinition as aE, SettingsServiceIdentity as aF, SettingsStore as aG, SettingsStoreIdentity as aH, ShowInspector as aI, SidePaneContainer as aJ, SkeletonSelector as aK, Slider as aL, SpinButton as aM, StartInspectable as aN, StatsServiceIdentity as aO, StringDropdown as aP, StringDropdownPropertyLine as aQ, StringifiedPropertyLine as aR, Switch as aS, SwitchPropertyLine as aT, SyncedSliderInput as aU, SyncedSliderPropertyLine as aV, TeachingMoment as aW, TextAreaPropertyLine as aX, TextInput as aY, TextPropertyLine as aZ, Textarea as a_, InterceptProperty as aa, IsPropertyReadonly as ab, LineContainer as ac, LinkPropertyLine as ad, LinkToEntityPropertyLine as ae, List as af, MakeDialogTeachingMoment as ag, MakeLazyComponent as ah, MakeModularBridge as ai, MakeModularTool as aj, MakePopoverTeachingMoment as ak, MakePropertyHook as al, MakeTeachingMoment as am, MaterialSelector as an, NodeSelector as ao, NumberDropdown as ap, NumberDropdownPropertyLine as aq, ObservableCollection as ar, Pane as as, PlaceholderPropertyLine as at, PositionedPopover as au, PropertiesServiceIdentity as av, Property as aw, PropertyContext as ax, PropertyLine as ay, QuaternionPropertyLine as az, useInterceptObservable as b, TextureUpload as b0, Theme as b1, ThemeServiceIdentity as b2, ToastProvider as b3, ToggleButton as b4, Tooltip as b5, UploadButton as b6, Vector2PropertyLine as b7, Vector4PropertyLine as b8, WatcherServiceIdentity as b9, inspectorAssetNotFoundHandler as ba, useAngleConverters as bb, useAsyncResource as bc, useColor3Property as bd, useColor4Property as be, useEventListener as bf, useEventfulState as bg, useKeyListener as bh, useKeyState as bi, useObservableCollection as bj, useOrderedObservableCollection as bk, usePollingObservable as bl, usePropertyChangedNotifier as bm, useQuaternionProperty as bn, useResource as bo, useTheme as bp, useThemeMode as bq, useVector3Property as br, LinkToEntity as c, SpinButtonPropertyLine as d, useProperty as e, SceneContextIdentity as f, SelectionServiceIdentity as g, useObservableState as h, AccordionSection as i, ButtonLine as j, ToolsServiceIdentity as k, AccordionSectionItem as l, AttachDebugLayer as m, BooleanBadgePropertyLine as n, BoundProperty as o, BridgeCommandRegistryIdentity as p, BuiltInsExtensionFeed as q, Checkbox as r, ChildWindow as s, Collapse as t, useExtensionManager as u, Color3GradientComponent as v, Color3GradientList as w, Color3PropertyLine as x, Color4GradientComponent as y, Color4GradientList as z };
-//# sourceMappingURL=index-CZ1-Y-Rv.js.map
+//# sourceMappingURL=index-DbbhJJ1G.js.map