@babylonjs/inspector 8.45.4-preview → 8.45.5-preview

package/lib/{index-upm3WBf8.js → index-C7ey_J-r.js}

@@ -4,7 +4,7 @@ import { Color3, Color4 } from '@babylonjs/core/Maths/math.color.js';
 import { Vector3, Quaternion, Matrix, Vector2, Vector4, TmpVectors } from '@babylonjs/core/Maths/math.vector.js';
 import { Observable } from '@babylonjs/core/Misc/observable.js';
 import { makeStyles, Link as Link$1, Caption1, Body1, ToggleButton as ToggleButton$1, Button as Button$1, Spinner, tokens, InfoLabel as InfoLabel$1, Body1Strong, Tooltip, Checkbox as Checkbox$1, mergeClasses, Accordion as Accordion$1, AccordionItem, AccordionHeader, Subtitle2Stronger, AccordionPanel, Divider, createLightTheme, createDarkTheme, FluentProvider, TeachingPopover, TeachingPopoverSurface, TeachingPopoverHeader, TeachingPopoverBody, Portal, RendererProvider, createDOMRenderer, Menu, MenuTrigger, SplitButton, MenuPopover, MenuList, MenuItem, Toolbar as Toolbar$1, ToolbarRadioButton, MenuGroup, MenuGroupHeader, SearchBox as SearchBox$1, FlatTree, FlatTreeItem, TreeItemLayout, MenuDivider, treeItemLevelToken, MenuItemCheckbox, Switch as Switch$1, PresenceBadge, useId, SpinButton as SpinButton$1, Slider, Input, Dropdown as Dropdown$1, Option, Popover as Popover$1, PopoverTrigger, PopoverSurface, ColorPicker, ColorArea, ColorSlider, AlphaSlider, ColorSwatch, MenuItemRadio, Dialog, DialogSurface, DialogBody, DialogTitle, DialogContent, DialogActions, List as List$1, ListItem, Badge, MessageBar as MessageBar$1, MessageBarBody, MessageBarTitle, useComboboxFilter, Combobox, Textarea as Textarea$1, ToolbarButton, Label, ToolbarDivider, Field } from '@fluentui/react-components';
-import { ChevronCircleRight16Regular, ChevronCircleRight20Regular, ChevronCircleDown16Regular, ChevronCircleDown20Regular, Copy16Regular, Copy20Regular, PanelLeftExpandRegular, PanelRightExpandRegular, PanelLeftContractRegular, PanelRightContractRegular, PictureInPictureEnterRegular, MoreHorizontalRegular, LayoutColumnTwoFocusLeftFilled, LayoutColumnTwoSplitLeftFocusTopLeftFilled, LayoutColumnTwoSplitLeftFocusBottomLeftFilled, LayoutColumnTwoFocusRightFilled, LayoutColumnTwoSplitRightFocusTopRightFilled, LayoutColumnTwoSplitRightFocusBottomRightFilled, DocumentTextRegular, createFluentIcon, FilterRegular, GlobeRegular, ArrowExpandAllRegular, ArrowCollapseAllRegular, CubeTreeRegular, BugRegular, SettingsRegular, ArrowUploadRegular, DataBarHorizontalRegular, WrenchRegular, WeatherSunnyRegular, WeatherMoonRegular, ErrorCircleRegular, ArrowRotateClockwiseRegular, ArrowExpandRegular, SelectObjectRegular, CubeRegular, DeleteRegular, PlayRegular, EditRegular, LinkDismissRegular, LinkEditRegular, SaveRegular, ArrowUndoRegular, BracesRegular, BracesDismiss16Regular, CopyRegular, EyeOffFilled, EyeFilled, ArrowMoveFilled, EyeRegular, StopRegular, ArrowDownloadRegular, CloudArrowUpRegular, CloudArrowDownRegular, StopFilled, PlayFilled, EyeOffRegular, LockOpenRegular, LockClosedRegular, ResizeRegular, ChevronUpRegular, ChevronDownRegular, ArrowResetRegular, CircleHalfFillRegular, EyedropperRegular, PaintBucketRegular, InkStrokeRegular, StackRegular, FilmstripRegular, PauseFilled, WeatherSunnyLowFilled, LayerRegular, FrameRegular, AppGenericRegular, MyLocationRegular, CameraRegular, LightbulbRegular, BorderOutsideRegular, BorderNoneRegular, VideoFilled, VideoRegular, FlashlightRegular, FlashlightOffRegular, DropRegular, BlurRegular, PipelineRegular, PersonWalkingRegular, DataLineRegular, PersonSquareRegular, LayerDiagonalPersonRegular, ImageEditRegular, ImageRegular, TargetRegular, PersonFeedbackRegular, BranchRegular, DeleteFilled } from '@fluentui/react-icons';
+import { ChevronCircleRight16Regular, ChevronCircleRight20Regular, ChevronCircleDown16Regular, ChevronCircleDown20Regular, Copy16Regular, Copy20Regular, PanelLeftExpandRegular, PanelRightExpandRegular, PanelLeftContractRegular, PanelRightContractRegular, PictureInPictureEnterRegular, MoreHorizontalRegular, LayoutColumnTwoFocusLeftFilled, LayoutColumnTwoSplitLeftFocusTopLeftFilled, LayoutColumnTwoSplitLeftFocusBottomLeftFilled, LayoutColumnTwoFocusRightFilled, LayoutColumnTwoSplitRightFocusTopRightFilled, LayoutColumnTwoSplitRightFocusBottomRightFilled, DocumentTextRegular, createFluentIcon, FilterRegular, GlobeRegular, ArrowExpandAllRegular, ArrowCollapseAllRegular, CubeTreeRegular, BugRegular, SettingsRegular, ArrowUploadRegular, DataBarHorizontalRegular, WrenchRegular, WeatherSunnyRegular, WeatherMoonRegular, ErrorCircleRegular, ArrowRotateClockwiseRegular, ArrowExpandRegular, SelectObjectRegular, CubeRegular, DeleteRegular, PlayRegular, EditRegular, LinkDismissRegular, LinkEditRegular, SaveRegular, ArrowUndoRegular, BracesRegular, BracesDismiss16Regular, CopyRegular, EyeOffFilled, EyeFilled, ArrowMoveFilled, EyeRegular, StopRegular, ArrowDownloadRegular, CloudArrowUpRegular, CloudArrowDownRegular, StopFilled, PlayFilled, EyeOffRegular, LockOpenRegular, LockClosedRegular, ResizeRegular, ChevronUpRegular, ChevronDownRegular, ArrowResetRegular, CircleHalfFillRegular, EyedropperRegular, PaintBucketRegular, InkStrokeRegular, StackRegular, FilmstripRegular, PauseFilled, WeatherSunnyLowFilled, LayerRegular, FrameRegular, AppGenericRegular, RectangleLandscapeRegular, BorderOutsideRegular, BorderNoneRegular, MyLocationRegular, CameraRegular, LightbulbRegular, VideoFilled, VideoRegular, FlashlightRegular, FlashlightOffRegular, DropRegular, BlurRegular, PipelineRegular, PersonWalkingRegular, DataLineRegular, PersonSquareRegular, LayerDiagonalPersonRegular, ImageEditRegular, ImageRegular, TargetRegular, PersonFeedbackRegular, BranchRegular, DeleteFilled } from '@fluentui/react-icons';
 import { Collapse as Collapse$1, Fade } from '@fluentui/react-motion-components-preview';
 import '@babylonjs/core/Misc/typeStore.js';
 import { useLocalStorage, useTernaryDarkMode } from 'usehooks-ts';
@@ -90,6 +90,7 @@ import { MeshParticleEmitter } from '@babylonjs/core/Particles/EmitterTypes/mesh
 import { PointParticleEmitter } from '@babylonjs/core/Particles/EmitterTypes/pointParticleEmitter.js';
 import { SphereParticleEmitter } from '@babylonjs/core/Particles/EmitterTypes/sphereParticleEmitter.js';
 import { ConvertToNodeParticleSystemSetAsync } from '@babylonjs/core/Particles/Node/nodeParticleSystemSet.helper.js';
+import { GPUParticleSystem } from '@babylonjs/core/Particles/gpuParticleSystem.js';
 import { ParticleHelper } from '@babylonjs/core/Particles/particleHelper.js';
 import { FactorGradient, Color3Gradient, ColorGradient } from '@babylonjs/core/Misc/gradients.js';
 import { GradientBlockColorStep } from '@babylonjs/core/Materials/Node/Blocks/gradientBlock.js';
@@ -746,7 +747,6 @@ const CustomTokens = {
     dividerGapSmall: tokens.borderRadiusMedium, // 4px",
     labelMinWidth: "50px",
     sliderMinWidth: "30px",
-    sliderMaxWidth: "80px",
     rightAlignOffset: `-${tokens.borderRadiusXLarge}`, // -8px
 };
 const UniformWidthStyling = { width: CustomTokens.inputWidth, boxSizing: "border-box" };
@@ -3888,7 +3888,7 @@ const DefaultInspectorExtensionFeed = new BuiltInsExtensionFeed("Inspector", [
         keywords: ["export", "gltf", "glb", "babylon", "exporter", "tools"],
         ...BabylonWebResources,
         author: { name: "Alex Chuber", forumUserName: "alexchuber" },
-        getExtensionModuleAsync: async () => await import('./exportService-D19rsLCQ.js'),
+        getExtensionModuleAsync: async () => await import('./exportService-BvQmBhyv.js'),
     },
     {
         name: "Capture Tools",
@@ -3896,7 +3896,7 @@ const DefaultInspectorExtensionFeed = new BuiltInsExtensionFeed("Inspector", [
         keywords: ["capture", "screenshot", "gif", "video", "tools"],
         ...BabylonWebResources,
         author: { name: "Alex Chuber", forumUserName: "alexchuber" },
-        getExtensionModuleAsync: async () => await import('./captureService-C4KzF-3L.js'),
+        getExtensionModuleAsync: async () => await import('./captureService-c_Nc-JkH.js'),
     },
     {
         name: "Import Tools",
@@ -3904,7 +3904,7 @@ const DefaultInspectorExtensionFeed = new BuiltInsExtensionFeed("Inspector", [
         keywords: ["import", "tools"],
         ...BabylonWebResources,
         author: { name: "Alex Chuber", forumUserName: "alexchuber" },
-        getExtensionModuleAsync: async () => await import('./importService-xoACJHME.js'),
+        getExtensionModuleAsync: async () => await import('./importService-DxFxT2li.js'),
     },
     {
         name: "Quick Creation Tools (Preview)",
@@ -3912,7 +3912,7 @@ const DefaultInspectorExtensionFeed = new BuiltInsExtensionFeed("Inspector", [
         keywords: ["creation", "tools"],
         ...BabylonWebResources,
         author: { name: "Babylon.js", forumUserName: "" },
-        getExtensionModuleAsync: async () => await import('./quickCreateToolsService-ROfMXsQm.js'),
+        getExtensionModuleAsync: async () => await import('./quickCreateToolsService-Cu0BSIWb.js'),
     },
 ]);
 
@@ -3975,8 +3975,13 @@ const useSyncedSliderStyles = makeStyles({
         alignItems: "center",
     },
     slider: {
-        minWidth: CustomTokens.sliderMinWidth, // Minimum width for slider to remain usable
-        maxWidth: CustomTokens.sliderMaxWidth,
+        flex: "1 1 auto", // Grow to fill available space
+        minWidth: CustomTokens.sliderMinWidth,
+        maxWidth: "none", // Allow slider to grow
+    },
+    compactSpinButton: {
+        width: "70px",
+        flex: "0 0 auto", // Don't grow, stay fixed
     },
 });
 /**
@@ -4027,7 +4032,7 @@ const SyncedSliderInput = (props) => {
         setValue(value);
         props.onChange(value); // Input always updates immediately
     };
-    return (jsxs("div", { className: classes.container, children: [infoLabel && jsx(InfoLabel, { ...infoLabel, htmlFor: "syncedSlider" }), jsxs("div", { id: "syncedSlider", className: classes.syncedSlider, children: [props.min !== undefined && props.max !== undefined && (jsx(Slider, { ...passthroughProps, className: classes.slider, size: size, min: min / step, max: max / step, step: undefined, value: value / step, onChange: handleSliderChange, onPointerDown: handleSliderPointerDown, onPointerUp: handleSliderPointerUp })), jsx(SpinButton, { ...passthroughProps, value: value, onChange: handleInputChange, step: props.step })] })] }));
+    return (jsxs("div", { className: classes.container, children: [infoLabel && jsx(InfoLabel, { ...infoLabel, htmlFor: "syncedSlider" }), jsxs("div", { id: "syncedSlider", className: classes.syncedSlider, children: [props.min !== undefined && props.max !== undefined && (jsx(Slider, { ...passthroughProps, className: classes.slider, size: size, min: min / step, max: max / step, step: undefined, value: value / step, onChange: handleSliderChange, onPointerDown: handleSliderPointerDown, onPointerUp: handleSliderPointerUp })), jsx(SpinButton, { ...passthroughProps, className: props.compact ? classes.compactSpinButton : undefined, value: value, onChange: handleInputChange, step: props.step })] })] }));
 };
 
 /**
@@ -5044,7 +5049,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-BPIryMmP.js');
+                    const { ExtensionListServiceDefinition } = await import('./extensionsListService-DxjhVAwt.js');
                     await serviceContainer.addServiceAsync(ExtensionListServiceDefinition);
                 }
                 // Register the theme selector service (for selecting the theme) if theming is configured.
@@ -6125,7 +6130,7 @@ const ShadowGeneratorSetupProperties = ({ context: shadowLight }) => {
     const useKernelBlur = useProperty(shadowGenerator, "useKernelBlur");
     const blurModeOptions = isCascaded ? CSMBlurModeOptions : BlurModeOptions;
     const near = camera?.minZ ?? 0;
-    const far = camera?.maxZ ?? 500000;
+    const far = camera?.maxZ ?? 10000;
     const isPCFOrPCSS = filter === ShadowGenerator.FILTER_PCF || filter === ShadowGenerator.FILTER_PCSS;
     const isPCSS = filter === ShadowGenerator.FILTER_PCSS;
     const isBlurExponential = filter === ShadowGenerator.FILTER_BLUREXPONENTIALSHADOWMAP || filter === ShadowGenerator.FILTER_BLURCLOSEEXPONENTIALSHADOWMAP;
@@ -7837,22 +7842,19 @@ const useGradientStyles = makeStyles({
         gap: tokens.spacingHorizontalS,
         width: "100%",
     },
-    // Wrapper for each slider to control its size
+    // Wrapper for factor spin buttons - fixed size
     valueWrapper: {
-        flex: "0 1 auto", // Don't grow, can shrink, size based on content
-        alignContent: "center",
-        minWidth: "80px", // Minimum width to keep usable
-        maxWidth: "100px", // Maximum width to prevent them from getting too wide
+        flex: "0 0 auto", // Don't grow, natural size
     },
-    // Wrapper for color pickers - much smaller since they're just swatches
+    // Wrapper for color pickers - fixed size since they're just swatches
     colorWrapper: {
+        flex: "0 0 auto",
         alignContent: "center",
-        // No flex properties - just take natural size
     },
-    // Wrapper for the step slider to take remaining space
+    // Wrapper for the step slider - grows to fill remaining space
     stepSliderWrapper: {
-        flex: "1 0 auto", // Can grow, don't shrink, size based on content
-        minWidth: "100px",
+        flex: "1 1 0", // Grow to fill available space
+        minWidth: 0,
     },
 });
 /**
@@ -7871,7 +7873,10 @@ const Gradient = (props) => {
         setGradient(newGradient);
         props.onChange(newGradient);
     };
-    return (jsxs("div", { id: "gradientContainer", className: classes.container, children: [jsx("div", { className: gradient.value1 instanceof Color3 || gradient.value1 instanceof Color4 ? classes.colorWrapper : classes.valueWrapper, children: gradient.value1 instanceof Color3 || gradient.value1 instanceof Color4 ? (jsx(ColorPickerPopup, { value: gradient.value1, onChange: (color) => gradientChange({ ...gradient, value1: color }) })) : (jsx(SyncedSliderInput, { step: 0.01, value: gradient.value1, onChange: (val) => gradientChange({ ...gradient, value1: val }) })) }), gradient.value2 !== undefined && (jsx("div", { className: gradient.value2 instanceof Color3 || gradient.value2 instanceof Color4 ? classes.colorWrapper : classes.valueWrapper, children: gradient.value2 instanceof Color3 || gradient.value2 instanceof Color4 ? (jsx(ColorPickerPopup, { value: gradient.value2, onChange: (color) => gradientChange({ ...gradient, value2: color }) })) : (jsx(SyncedSliderInput, { step: 0.01, value: gradient.value2, onChange: (val) => gradientChange({ ...gradient, value2: val }) })) })), jsx("div", { className: classes.stepSliderWrapper, children: jsx(SyncedSliderInput, { notifyOnlyOnRelease: true, min: 0, max: 1, step: 0.01, value: gradient.step, onChange: (val) => gradientChange({ ...gradient, step: val }) }) })] }));
+    // Only use compact mode when there are numeric values (spinbuttons) taking up space
+    const hasNumericValues = !(gradient.value1 instanceof Color3 || gradient.value1 instanceof Color4) ||
+        (gradient.value2 !== undefined && !(gradient.value2 instanceof Color3 || gradient.value2 instanceof Color4));
+    return (jsxs("div", { id: "gradientContainer", className: classes.container, children: [jsx("div", { className: gradient.value1 instanceof Color3 || gradient.value1 instanceof Color4 ? classes.colorWrapper : classes.valueWrapper, children: gradient.value1 instanceof Color3 || gradient.value1 instanceof Color4 ? (jsx(ColorPickerPopup, { value: gradient.value1, onChange: (color) => gradientChange({ ...gradient, value1: color }) })) : (jsx(SyncedSliderInput, { step: 0.01, value: gradient.value1, onChange: (val) => gradientChange({ ...gradient, value1: val }), compact: true })) }), gradient.value2 !== undefined && (jsx("div", { className: gradient.value2 instanceof Color3 || gradient.value2 instanceof Color4 ? classes.colorWrapper : classes.valueWrapper, children: gradient.value2 instanceof Color3 || gradient.value2 instanceof Color4 ? (jsx(ColorPickerPopup, { value: gradient.value2, onChange: (color) => gradientChange({ ...gradient, value2: color }) })) : (jsx(SyncedSliderInput, { step: 0.01, value: gradient.value2, onChange: (val) => gradientChange({ ...gradient, value2: val }), compact: true })) })), jsx("div", { className: classes.stepSliderWrapper, children: jsx(SyncedSliderInput, { notifyOnlyOnRelease: true, min: 0, max: 1, step: 0.01, value: gradient.step, onChange: (val) => gradientChange({ ...gradient, step: val }), compact: hasNumericValues }) })] }));
 };
 const FactorGradientCast = Gradient;
 const Color3GradientCast = Gradient;
@@ -7977,6 +7982,112 @@ const Color4GradientList = (props) => {
         } }, "Color4"));
 };
 
+/**
+ * Shared utilities for snippet server operations (save/load).
+ */
+/**
+ * Persist a snippet ID to local storage for quick reuse.
+ * @param storageKey The local storage key to use.
+ * @param snippetId The snippet ID to persist.
+ * @param maxItems Maximum number of items to store (default 50).
+ */
+function PersistSnippetId(storageKey, snippetId, maxItems = 50) {
+    try {
+        const existing = JSON.parse(localStorage.getItem(storageKey) || "[]");
+        const list = Array.isArray(existing) ? existing : [];
+        if (!list.includes(snippetId)) {
+            list.unshift(snippetId);
+        }
+        localStorage.setItem(storageKey, JSON.stringify(list.slice(0, maxItems)));
+    }
+    catch {
+        // Ignore storage failures.
+    }
+}
+/**
+ * Save content to the snippet server.
+ * @param config Configuration for the save operation.
+ * @returns Promise resolving to the save result.
+ */
+async function SaveToSnippetServer(config) {
+    const { snippetUrl, currentSnippetId, content, payloadKey, storageKey, entityName } = config;
+    const dataToSend = {
+        payload: JSON.stringify({
+            [payloadKey]: content,
+        }),
+        name: "",
+        description: "",
+        tags: "",
+    };
+    const headers = new Headers();
+    headers.append("Content-Type", "application/json");
+    let response;
+    try {
+        response = await fetch(snippetUrl + (currentSnippetId ? "/" + currentSnippetId : ""), {
+            method: "POST",
+            headers,
+            body: JSON.stringify(dataToSend),
+        });
+    }
+    catch (e) {
+        const errorMsg = `Unable to save your ${entityName ?? "content"}: ${e}`;
+        alert(errorMsg);
+        throw new Error(errorMsg);
+    }
+    if (!response.ok) {
+        const errorMsg = `Unable to save your ${entityName ?? "content"}`;
+        alert(errorMsg);
+        throw new Error(errorMsg);
+    }
+    const snippet = await response.json();
+    const oldSnippetId = currentSnippetId || "_BLANK";
+    let newSnippetId = snippet.id;
+    if (snippet.version && snippet.version !== "0") {
+        newSnippetId += "#" + snippet.version;
+    }
+    // Copy to clipboard when available.
+    if (navigator.clipboard) {
+        await navigator.clipboard.writeText(newSnippetId);
+    }
+    // Persist to local storage if configured.
+    if (storageKey) {
+        PersistSnippetId(storageKey, newSnippetId);
+    }
+    // Show success alert
+    alert(`${entityName ?? "Content"} saved with ID: ${newSnippetId} (the id was also saved to your clipboard)`);
+    return {
+        snippetId: newSnippetId,
+        oldSnippetId,
+    };
+}
+/**
+ * Prompt the user for a snippet ID.
+ * @param message The prompt message.
+ * @returns The trimmed snippet ID, or null if cancelled/empty.
+ */
+function PromptForSnippetId(message = "Please enter the snippet ID to use") {
+    const requestedSnippetId = window.prompt(message);
+    const trimmed = requestedSnippetId?.trim();
+    return trimmed || null;
+}
+/**
+ * Notify the playground about a snippet ID change (for code replacement).
+ * NOTE this is an anti-pattern, instead playground should hook in and observe changes / update its own code
+ * This is a legacy approach and should not be copied elsewhere
+ * @param oldSnippetId The previous snippet ID.
+ * @param newSnippetId The new snippet ID.
+ * @param parseMethodName The name of the parse method (e.g., "SpriteManager.ParseFromSnippetAsync").
+ */
+function NotifyPlaygroundOfSnippetChange(oldSnippetId, newSnippetId, parseMethodName) {
+    const windowAsAny = window;
+    if (windowAsAny.Playground && oldSnippetId) {
+        windowAsAny.Playground.onRequestCodeChangeObservable.notifyObservers({
+            regex: new RegExp(`${parseMethodName}\\("${oldSnippetId}`, "g"),
+            replace: `${parseMethodName}("${newSnippetId}`,
+        });
+    }
+}
+
 const useAttractorStyles = makeStyles({
     container: {
         // top-level div used for lineContainer, in UI overhaul update to just use linecontainer
@@ -8091,7 +8202,7 @@ const AttractorList = (props) => {
                 } })] }));
 };
 
-const SnippetDashboardStorageKey = "Babylon/InspectorV2/SnippetDashboard/ParticleSystems";
+const SnippetDashboardStorageKey$1 = "Babylon/InspectorV2/SnippetDashboard/ParticleSystems";
 function TryParseJsonString(value) {
     if (!value) {
         return undefined;
@@ -8118,27 +8229,13 @@ function NormalizeParticleSystemSerialization(rawData) {
     const particleSystem = TryParseJsonString(jsonPayload?.particleSystem);
     return particleSystem ?? rawData;
 }
-function PersistSnippetId(snippetId) {
-    // Persist snippet IDs locally for quick reuse.
-    try {
-        const existing = JSON.parse(localStorage.getItem(SnippetDashboardStorageKey) || "[]");
-        const list = Array.isArray(existing) ? existing : [];
-        if (!list.includes(snippetId)) {
-            list.unshift(snippetId);
-        }
-        localStorage.setItem(SnippetDashboardStorageKey, JSON.stringify(list.slice(0, 50)));
-    }
-    catch {
-        // Ignore storage failures.
-    }
-}
 /**
  * Display general (high-level) information about a particle system.
  * @param props Component props.
  * @returns Render property lines.
  */
 const ParticleSystemGeneralProperties = (props) => {
-    const { particleSystem: system } = props;
+    const { particleSystem: system, selectionService } = props;
     const scene = system.getScene();
     const isBillboardBased = useProperty(system, "isBillboardBased");
     const capacity = useObservableState(() => system.getCapacity());
@@ -8170,87 +8267,50 @@ const ParticleSystemGeneralProperties = (props) => {
             alert("Failed to load particle system: " + e);
         }
     }, [scene, system]);
-    const loadFromSnippetServer = useCallback(() => {
+    const loadFromSnippetServer = useCallback(async () => {
         if (!scene) {
             alert("No scene available.");
             return;
         }
-        // Prompt for a snippet id (minimal UX).
-        const requestedSnippetId = window.prompt("Please enter the snippet ID to use");
-        const trimmed = requestedSnippetId?.trim();
-        if (!trimmed) {
+        const snippetId = PromptForSnippetId();
+        if (!snippetId) {
             return;
         }
-        const request = new XMLHttpRequest();
-        request.onreadystatechange = () => {
-            if (request.readyState !== 4) {
-                return;
-            }
-            if (request.status !== 200) {
-                alert("Unable to load your particle system");
-                return;
-            }
-            try {
-                const responseObject = ParseJsonLoadContents(request.responseText);
-                if (!responseObject) {
-                    alert("Unable to load your particle system");
-                    return;
-                }
-                applyParticleSystemJsonToSystem(responseObject);
-                system.snippetId = trimmed;
-            }
-            catch (e) {
-                alert("Unable to load your particle system: " + e);
-            }
-        };
-        request.open("GET", ParticleHelper.SnippetUrl + "/" + trimmed.replace(/#/g, "/"), true);
-        request.send();
-    }, [applyParticleSystemJsonToSystem, scene, system]);
+        const isGpu = system instanceof GPUParticleSystem;
+        const oldSnippetId = system.snippetId;
+        // Dispose the old system and clear selection (v1 behavior)
+        system.dispose();
+        selectionService.selectedEntity = null;
+        try {
+            const newSystem = await ParticleHelper.ParseFromSnippetAsync(snippetId, scene, isGpu);
+            selectionService.selectedEntity = newSystem;
+            // Notify the playground to update its code with the new snippet ID.
+            NotifyPlaygroundOfSnippetChange(oldSnippetId, snippetId, "ParticleHelper.ParseFromSnippetAsync");
+        }
+        catch (err) {
+            alert("Unable to load your particle system: " + err);
+        }
+    }, [scene, selectionService, system]);
     const saveToSnippetServer = useCallback(async () => {
-        const deferred = new Deferred();
-        // Serialize once and post as snippet payload.
-        const content = JSON.stringify(system.serialize(true));
-        const xmlHttp = new XMLHttpRequest();
-        xmlHttp.onreadystatechange = () => {
-            if (xmlHttp.readyState !== 4) {
-                return;
-            }
-            if (xmlHttp.status !== 200) {
-                deferred.reject();
-                alert("Unable to save your particle system");
-                return;
-            }
-            try {
-                const snippet = JSON.parse(xmlHttp.responseText);
-                system.snippetId = snippet.id;
-                if (snippet.version && snippet.version !== "0") {
-                    system.snippetId += "#" + snippet.version;
-                }
-                // Copy to clipboard when available.
-                if (navigator.clipboard) {
-                    void navigator.clipboard.writeText(system.snippetId);
-                }
-                PersistSnippetId(system.snippetId);
-                deferred.resolve();
-                alert("Particle system saved with ID: " + system.snippetId + " (the id was also saved to your clipboard)");
-            }
-            catch (e) {
-                deferred.reject(e);
-                alert("Unable to save your particle system: " + e);
-            }
-        };
-        xmlHttp.open("POST", ParticleHelper.SnippetUrl + (system.snippetId ? "/" + system.snippetId : ""), true);
-        xmlHttp.setRequestHeader("Content-Type", "application/json");
-        const dataToSend = {
-            payload: JSON.stringify({
-                particleSystem: content,
-            }),
-            name: "",
-            description: "",
-            tags: "",
-        };
-        xmlHttp.send(JSON.stringify(dataToSend));
-        await deferred.promise;
+        try {
+            const content = JSON.stringify(system.serialize(true));
+            const currentSnippetId = system.snippetId;
+            const result = await SaveToSnippetServer({
+                snippetUrl: ParticleHelper.SnippetUrl,
+                currentSnippetId,
+                content,
+                payloadKey: "particleSystem",
+                storageKey: SnippetDashboardStorageKey$1,
+                entityName: "particle system",
+            });
+            // eslint-disable-next-line require-atomic-updates
+            system.snippetId = result.snippetId;
+            PersistSnippetId(SnippetDashboardStorageKey$1, result.snippetId);
+            NotifyPlaygroundOfSnippetChange(result.oldSnippetId, result.snippetId, "ParticleSystem.ParseFromSnippetAsync");
+        }
+        catch {
+            // Alert already shown by SaveToSnippetServer
+        }
     }, [system]);
     return (jsxs(Fragment, { children: [jsx(StringifiedPropertyLine, { label: "Capacity", description: "Maximum number of particles in the system.", value: capacity }), jsx(StringifiedPropertyLine, { label: "Active Particles", description: "Current number of active particles.", value: activeCount }), jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "Blend Mode", target: system, propertyKey: "blendMode", options: BlendModeOptions }), jsx(BoundProperty, { component: Vector3PropertyLine, label: "World Offset", target: system, propertyKey: "worldOffset" }), !system.isNodeGenerated && jsx(BoundProperty, { component: Vector3PropertyLine, label: "Gravity", target: system, propertyKey: "gravity" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Is Billboard", target: system, propertyKey: "isBillboardBased" }), isBillboardBased && (jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "Billboard Mode", target: system, propertyKey: "billboardMode", options: ParticleBillboardModeOptions })), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Is Local", target: system, propertyKey: "isLocal" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Force Depth Write", target: system, propertyKey: "forceDepthWrite" }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Update Speed", target: system, propertyKey: "updateSpeed", min: 0, step: 0.01 }), jsx(ButtonLine, { label: system.isNodeGenerated ? "Edit" : "View", icon: system.isNodeGenerated ? EditRegular : EyeRegular, onClick: async () => {
                     const scene = system.getScene();
@@ -8768,7 +8828,7 @@ const ParticleSystemPropertiesServiceDefinition = {
                 {
                     section: "General",
                     order: 1,
-                    component: ({ context }) => jsx(ParticleSystemGeneralProperties, { particleSystem: context }),
+                    component: ({ context }) => jsx(ParticleSystemGeneralProperties, { particleSystem: context, selectionService: selectionService }),
                 },
             ],
         });
@@ -8892,6 +8952,33 @@ const PrestepOptions = [
     { label: "Teleport", value: PhysicsPrestepType.TELEPORT },
     { label: "Action", value: PhysicsPrestepType.ACTION },
 ];
+/**
+ * Convert physics shape type to a human-readable string.
+ * @param type The physics shape type.
+ * @returns The human-readable string.
+ */
+function GetShapeTypeString(type) {
+    switch (type) {
+        case 3 /* PhysicsShapeType.BOX */:
+            return "Box";
+        case 0 /* PhysicsShapeType.SPHERE */:
+            return "Sphere";
+        case 2 /* PhysicsShapeType.CYLINDER */:
+            return "Cylinder";
+        case 1 /* PhysicsShapeType.CAPSULE */:
+            return "Capsule";
+        case 5 /* PhysicsShapeType.CONTAINER */:
+            return "Container";
+        case 4 /* PhysicsShapeType.CONVEX_HULL */:
+            return "Convex Hull";
+        case 6 /* PhysicsShapeType.MESH */:
+            return "Mesh";
+        case 7 /* PhysicsShapeType.HEIGHTFIELD */:
+            return "Heightfield";
+        default:
+            return "Unknown";
+    }
+}
 const TransformNodePhysicsProperties = (props) => {
     const { node } = props;
     const physicsBody = useProperty(node, "physicsBody");
@@ -8919,15 +9006,19 @@ const PhysicsBodyProperties = (props) => {
     // Get current velocities
     const linearVelocity = useObservableState(useCallback(() => physicsBody.getLinearVelocity(), [physicsBody]), useInterceptObservable("function", physicsBody, "setLinearVelocity"));
     const angularVelocity = useObservableState(useCallback(() => physicsBody.getAngularVelocity(), [physicsBody]), useInterceptObservable("function", physicsBody, "setAngularVelocity"));
+    // Get shape and material properties
+    const shape = useProperty(physicsBody, "shape");
+    const type = useProperty(shape, "type");
+    const material = useProperty(shape, "material");
     return (jsxs(Fragment, { children: [jsx(NumberDropdownPropertyLine, { label: "Motion Type", options: MotionOptions, value: motionType, onChange: (value) => {
                     return physicsBody.setMotionType(value);
                 } }, "MotionType"), jsx(NumberDropdownPropertyLine, { label: "Prestep Type", options: PrestepOptions, value: prestepType, onChange: (value) => {
                     return physicsBody.setPrestepType(value);
-                } }), jsx(NumberInputPropertyLine, { label: "Linear Damping", min: 0, max: 1, step: 0.01, value: linearDamping, onChange: (e) => {
+                } }), shape && jsx(TextPropertyLine, { label: "Shape Type", value: GetShapeTypeString(type) }), jsx(NumberInputPropertyLine, { label: "Linear Damping", min: 0, max: 1, step: 0.01, value: linearDamping, onChange: (e) => {
                     physicsBody.setLinearDamping(e);
                 } }), jsx(NumberInputPropertyLine, { label: "Angular Damping", min: 0, max: 1, step: 0.01, value: angularDamping, onChange: (e) => {
                     physicsBody.setAngularDamping(e);
-                } }), jsx(Vector3PropertyLine, { label: "Linear Velocity", value: linearVelocity, onChange: (value) => physicsBody.setLinearVelocity(value) }), jsx(Vector3PropertyLine, { label: "Angular Velocity", value: angularVelocity, onChange: (value) => physicsBody.setAngularVelocity(value) }), massProperties && (jsxs(Fragment, { children: [jsx(NumberInputPropertyLine, { label: "Mass", value: massProperties.mass ?? 0, min: 0, step: 0.01, onChange: (value) => {
+                } }), shape && (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Dynamic Friction", min: 0, max: 1, step: 0.01, target: material, propertyKey: "friction", nullable: true, defaultValue: 0.5 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Static Friction", min: 0, max: 1, step: 0.01, target: material, propertyKey: "staticFriction", nullable: true, defaultValue: material?.friction ?? 0.5 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Restitution", min: 0, max: 1, step: 0.01, target: material, propertyKey: "restitution", nullable: true, defaultValue: 0 })] })), jsx(Vector3PropertyLine, { label: "Linear Velocity", value: linearVelocity, onChange: (value) => physicsBody.setLinearVelocity(value) }), jsx(Vector3PropertyLine, { label: "Angular Velocity", value: angularVelocity, onChange: (value) => physicsBody.setAngularVelocity(value) }), massProperties && (jsxs(Fragment, { children: [jsx(NumberInputPropertyLine, { label: "Mass", value: massProperties.mass ?? 0, min: 0, step: 0.01, onChange: (value) => {
                             physicsBody.setMassProperties({ ...massProperties, mass: value });
                         } }), jsx(Vector3PropertyLine, { label: "Center of Mass", value: centerOfMass, onChange: (value) => {
                             physicsBody.setMassProperties({ ...massProperties, centerOfMass: value });
@@ -9300,6 +9391,7 @@ const SpinButtonPropertyLine = (props) => {
     return (jsx(PropertyLine, { ...props, children: jsx(SpinButton, { ...props }) }));
 };
 
+const SnippetDashboardStorageKey = "Babylon/InspectorV2/SnippetDashboard/SpriteManagers";
 const SpriteManagerGeneralProperties = (props) => {
     const { spriteManager, selectionService } = props;
     return (jsxs(Fragment, { children: [jsx(TextPropertyLine, { label: "Capacity", value: spriteManager.capacity.toString() }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Texture", target: spriteManager, propertyKey: "texture", scene: spriteManager.scene, onLink: (texture) => (selectionService.selectedEntity = texture) })] }));
@@ -9312,6 +9404,84 @@ const SpriteManagerCellProperties = (props) => {
     const { spriteManager } = props;
     return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SpinButtonPropertyLine, label: "Cell Width", target: spriteManager, propertyKey: "cellWidth", min: 1, step: 1 }, "CellWidth"), jsx(BoundProperty, { component: SpinButtonPropertyLine, label: "Cell Height", target: spriteManager, propertyKey: "cellHeight", min: 1, step: 1 }, "CellHeight")] }));
 };
+const SpriteManagerFileProperties = (props) => {
+    const { spriteManager, selectionService } = props;
+    const scene = spriteManager.scene;
+    const loadFromFile = useCallback((files) => {
+        const file = files[0];
+        if (!file) {
+            return;
+        }
+        Tools.ReadFile(file, (data) => {
+            const decoder = new TextDecoder("utf-8");
+            const jsonObject = JSON.parse(decoder.decode(data));
+            spriteManager.dispose();
+            selectionService.selectedEntity = null;
+            const newManager = SpriteManager.Parse(jsonObject, scene, "");
+            selectionService.selectedEntity = newManager;
+        }, undefined, true);
+    }, [spriteManager, scene, selectionService]);
+    const saveToFile = useCallback(() => {
+        const content = JSON.stringify(spriteManager.serialize(true));
+        Tools.Download(new Blob([content]), "spriteManager.json");
+    }, [spriteManager]);
+    return (jsxs(Fragment, { children: [jsx(FileUploadLine, { label: "Load", onClick: loadFromFile, accept: ".json" }), jsx(ButtonLine, { label: "Save", onClick: saveToFile })] }));
+};
+const SpriteManagerSnippetProperties = (props) => {
+    const { spriteManager, selectionService } = props;
+    const scene = spriteManager.scene;
+    const snippetUrl = Constants.SnippetUrl;
+    const snippetId = useProperty(spriteManager, "snippetId");
+    const loadFromSnippet = useCallback(async () => {
+        const requestedSnippetId = PromptForSnippetId();
+        if (!requestedSnippetId) {
+            return;
+        }
+        spriteManager.dispose();
+        selectionService.selectedEntity = null;
+        try {
+            const newManager = await SpriteManager.ParseFromSnippetAsync(requestedSnippetId, scene);
+            selectionService.selectedEntity = newManager;
+        }
+        catch (err) {
+            alert("Unable to load your sprite manager: " + err);
+        }
+    }, [spriteManager, scene, selectionService]);
+    const saveToSnippet = useCallback(async () => {
+        try {
+            const content = JSON.stringify(spriteManager.serialize(true));
+            const currentSnippetId = spriteManager.snippetId;
+            const result = await SaveToSnippetServer({
+                snippetUrl,
+                currentSnippetId,
+                content,
+                payloadKey: "spriteManager",
+                storageKey: SnippetDashboardStorageKey,
+                entityName: "sprite manager",
+            });
+            // eslint-disable-next-line require-atomic-updates
+            spriteManager.snippetId = result.snippetId;
+            PersistSnippetId(SnippetDashboardStorageKey, result.snippetId);
+            NotifyPlaygroundOfSnippetChange(result.oldSnippetId, result.snippetId, "SpriteManager.ParseFromSnippetAsync");
+        }
+        catch {
+            // Alert already shown by SaveToSnippetServer
+        }
+    }, [spriteManager, snippetUrl]);
+    return (jsxs(Fragment, { children: [snippetId && jsx(TextPropertyLine, { label: "Snippet ID", value: snippetId }), jsx(ButtonLine, { label: "Load from Snippet Server", onClick: loadFromSnippet, icon: CloudArrowUpRegular }), jsx(ButtonLine, { label: "Save to Snippet Server", onClick: saveToSnippet, icon: CloudArrowDownRegular })] }));
+};
+const SpriteManagerActionsProperties = (props) => {
+    const { spriteManager, selectionService } = props;
+    const addNewSprite = useCallback(() => {
+        const newSprite = new Sprite("new sprite", spriteManager);
+        selectionService.selectedEntity = newSprite;
+    }, [spriteManager, selectionService]);
+    const disposeManager = useCallback(() => {
+        spriteManager.dispose();
+        selectionService.selectedEntity = null;
+    }, [spriteManager, selectionService]);
+    return (jsxs(Fragment, { children: [spriteManager.sprites.length < spriteManager.capacity && jsx(ButtonLine, { label: "Add New Sprite", onClick: addNewSprite }), jsx(ButtonLine, { label: "Dispose", onClick: disposeManager })] }));
+};
 
 /**
  * Gets the data of the specified texture by rendering it to an intermediate RGBA texture and retrieving the bytes from it.
@@ -9427,6 +9597,8 @@ const useStyles$9 = makeStyles({
         marginTop: tokens.spacingVerticalXS,
         marginBottom: tokens.spacingVerticalS,
         width: "100%",
+        // Checkerboard background to show transparency
+        background: "repeating-conic-gradient(#B2B2B2 0% 25%, white 25% 50%) 50% / 32px 32px",
     },
 });
 // This method of holding TextureChannels was brought over from inspectorv1 and can likely be refactored/simplified
@@ -9551,6 +9723,18 @@ const SpritePropertiesServiceDefinition = {
                     section: "General",
                     component: ({ context }) => jsx(SpriteManagerGeneralProperties, { spriteManager: context, selectionService: selectionService }),
                 },
+                {
+                    section: "Actions",
+                    component: ({ context }) => jsx(SpriteManagerActionsProperties, { spriteManager: context, selectionService: selectionService }),
+                },
+                {
+                    section: "File",
+                    component: ({ context }) => jsx(SpriteManagerFileProperties, { spriteManager: context, selectionService: selectionService }),
+                },
+                {
+                    section: "Snippet",
+                    component: ({ context }) => jsx(SpriteManagerSnippetProperties, { spriteManager: context, selectionService: selectionService }),
+                },
                 {
                     section: "Cells",
                     component: ({ context }) => jsx(SpriteManagerCellProperties, { spriteManager: context }),
@@ -9632,6 +9816,13 @@ const AdvancedDynamicTextureGeneralProperties = MakeLazyComponent(async () => {
         return (jsxs(Fragment, { children: [jsx(StringifiedPropertyLine, { label: "Last Layout Time", value: layoutTime, precision: 2, units: "ms" }), jsx(StringifiedPropertyLine, { label: "Last Render Time", value: renderTime, precision: 2, units: "ms" }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Render Scale", target: texture, propertyKey: "renderScale", min: 0.1, max: 5, step: 0.1 }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Premultiply Alpha", target: texture, propertyKey: "premulAlpha" }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Ideal Width", target: texture, propertyKey: "idealWidth" }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Ideal Height", target: texture, propertyKey: "idealHeight" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use Smallest Ideal", target: texture, propertyKey: "useSmallestIdeal" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Render at Ideal Size", target: texture, propertyKey: "renderAtIdealSize" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Invalidate Rect Optimization", target: texture, propertyKey: "useInvalidateRectOptimization" })] }));
     };
 }, { spinnerSize: "extra-tiny", spinnerLabel: "Loading..." });
+const AdvancedDynamicTexturePreviewProperties = (props) => {
+    const { texture } = props;
+    return (jsx(Fragment, { children: jsx(ButtonLine, { label: "Edit GUI", icon: EditRegular, onClick: async () => {
+                const { GUIEditor } = await import('@babylonjs/gui-editor');
+                await GUIEditor.Show({ liveGuiTexture: texture });
+            } }) }));
+};
 
 const TextureFormat = [
     { label: "Alpha", normalizable: false, value: Constants.TEXTUREFORMAT_ALPHA },
@@ -9701,7 +9892,7 @@ const BaseTexturePreviewProperties = (props) => {
     const { texture, textureEditor: TextureEditor } = props;
     const texturePreviewImperativeRef = useRef(null);
     const childWindow = useRef(null);
-    return (jsxs(Fragment, { children: [jsx(TexturePreview, { imperativeRef: texturePreviewImperativeRef, texture: texture }), jsx(TextureUpload, { texture: texture }), jsx(ButtonLine, { label: "Edit Texture", onClick: () => childWindow.current?.open() }), jsx(ChildWindow, { id: "Texture Editor", imperativeRef: childWindow, children: jsx(TextureEditor, { texture: texture, onUpdate: async () => await texturePreviewImperativeRef.current?.refresh() }) })] }));
+    return (jsxs(Fragment, { children: [jsx(TexturePreview, { imperativeRef: texturePreviewImperativeRef, texture: texture }), jsx(TextureUpload, { texture: texture }), jsx(ButtonLine, { label: "Edit Texture", onClick: () => childWindow.current?.open(), icon: EditRegular }), jsx(ChildWindow, { id: "Texture Editor", imperativeRef: childWindow, children: jsx(TextureEditor, { texture: texture, onUpdate: async () => await texturePreviewImperativeRef.current?.refresh() }) })] }));
 };
 const BaseTextureGeneralProperties = (props) => {
     const { texture } = props;
@@ -11458,6 +11649,7 @@ const TexturePropertiesServiceDefinition = {
                 {
                     section: "Preview",
                     component: ({ context }) => jsx(TexturePreviewProperties, { texture: context }),
+                    order: 200,
                 },
                 {
                     section: "General",
@@ -11516,6 +11708,11 @@ const TexturePropertiesServiceDefinition = {
                     order: 100,
                     component: ({ context }) => jsx(AdvancedDynamicTextureGeneralProperties, { texture: context }),
                 },
+                {
+                    section: "Preview",
+                    order: 100,
+                    component: ({ context }) => jsx(AdvancedDynamicTexturePreviewProperties, { texture: context }),
+                },
             ],
         });
         return {
@@ -11804,6 +12001,14 @@ const FrameGraphExplorerServiceDefinition = {
 function IsAdvancedDynamicTexture(entity) {
     return entity?.getClassName?.() === "AdvancedDynamicTexture";
 }
+function IsContainer(entity) {
+    // Check for Container-specific properties without using instanceof to avoid importing the concrete type
+    return entity?.children !== undefined && entity?.onControlAddedObservable !== undefined;
+}
+function IsControl(entity) {
+    // Check for Control-specific properties without using instanceof to avoid importing the concrete type
+    return entity?._currentMeasure !== undefined && entity?.onPointerDownObservable !== undefined;
+}
 const GuiExplorerServiceDefinition = {
     friendlyName: "GUI Explorer",
     consumes: [SceneExplorerServiceIdentity, SceneContextIdentity],
@@ -11812,35 +12017,121 @@ const GuiExplorerServiceDefinition = {
         if (!scene) {
             return undefined;
         }
+        const guiEntityAddedObservable = new Observable();
+        const guiEntityRemovedObservable = new Observable();
+        const textureAddedObserver = scene.onNewTextureAddedObservable.add((texture) => {
+            if (IsAdvancedDynamicTexture(texture)) {
+                guiEntityAddedObservable.notifyObservers(texture);
+            }
+        });
+        const textureRemovedObserver = scene.onTextureRemovedObservable.add((texture) => {
+            if (IsAdvancedDynamicTexture(texture)) {
+                guiEntityRemovedObservable.notifyObservers(texture);
+            }
+        });
         const sectionRegistration = sceneExplorerService.addSection({
             displayName: "GUI",
             order: 1100 /* DefaultSectionsOrder.GUIs */,
             getRootEntities: () => scene.textures.filter(IsAdvancedDynamicTexture),
-            getEntityDisplayInfo: (texture) => {
+            getEntityChildren: (entity) => (IsAdvancedDynamicTexture(entity) ? entity.getChildren() : IsContainer(entity) ? entity.children : []),
+            getEntityDisplayInfo: (entity) => {
+                const disposeActions = [];
                 const onChangeObservable = new Observable();
-                const nameHookToken = InterceptProperty(texture, "name", {
+                disposeActions.push(() => onChangeObservable.clear());
+                const nameHookToken = InterceptProperty(entity, "name", {
                     afterSet: () => {
                         onChangeObservable.notifyObservers();
                     },
                 });
+                disposeActions.push(() => nameHookToken.dispose());
+                if (!IsAdvancedDynamicTexture(entity) && IsContainer(entity)) {
+                    const controlAddedObserver = entity.onControlAddedObservable.add((control) => {
+                        if (control) {
+                            guiEntityAddedObservable.notifyObservers(control);
+                        }
+                    });
+                    disposeActions.push(() => entity.onControlAddedObservable.remove(controlAddedObserver));
+                    const controlRemovedObserver = entity.onControlRemovedObservable.add((control) => {
+                        if (control) {
+                            guiEntityRemovedObservable.notifyObservers(control);
+                        }
+                    });
+                    disposeActions.push(() => entity.onControlRemovedObservable.remove(controlRemovedObserver));
+                }
                 return {
                     get name() {
-                        return texture.name;
+                        if (IsAdvancedDynamicTexture(entity)) {
+                            return entity.name;
+                        }
+                        else {
+                            return `${entity.name ?? "No name"} [${entity.getClassName()}]`;
+                        }
                     },
                     onChange: onChangeObservable,
                     dispose: () => {
-                        nameHookToken.dispose();
+                        disposeActions.reverse().forEach((disposeAction) => disposeAction());
+                    },
+                };
+            },
+            entityIcon: ({ entity }) => (IsAdvancedDynamicTexture(entity) ? jsx(AppGenericRegular, {}) : jsx(RectangleLandscapeRegular, {})),
+            getEntityAddedObservables: () => [guiEntityAddedObservable],
+            getEntityRemovedObservables: () => [guiEntityRemovedObservable],
+        });
+        const highlightControlCommandRegistration = sceneExplorerService.addEntityCommand({
+            predicate: (entity) => IsControl(entity),
+            order: 1000 /* DefaultCommandsOrder.GuiHighlight */,
+            getCommand: (control) => {
+                const onChangeObservable = new Observable();
+                const showBoundingBoxHook = InterceptProperty(control, "isHighlighted", {
+                    afterSet: () => onChangeObservable.notifyObservers(),
+                });
+                return {
+                    type: "toggle",
+                    get displayName() {
+                        return `${control.isHighlighted ? "Hide" : "Show"} Bounding Box`;
+                    },
+                    icon: () => (control.isHighlighted ? jsx(BorderOutsideRegular, {}) : jsx(BorderNoneRegular, {})),
+                    get isEnabled() {
+                        return control.isHighlighted;
+                    },
+                    set isEnabled(enabled) {
+                        control.isHighlighted = enabled;
+                    },
+                    onChange: onChangeObservable,
+                    dispose: () => {
+                        showBoundingBoxHook.dispose();
                         onChangeObservable.clear();
                     },
                 };
             },
-            entityIcon: () => jsx(AppGenericRegular, {}),
-            getEntityAddedObservables: () => [scene.onNewTextureAddedObservable],
-            getEntityRemovedObservables: () => [scene.onTextureRemovedObservable],
+        });
+        const controlVisibilityCommandRegistration = sceneExplorerService.addEntityCommand({
+            predicate: (entity) => IsControl(entity),
+            order: 1100 /* DefaultCommandsOrder.GuiVisibility */,
+            getCommand: (control) => {
+                return {
+                    type: "toggle",
+                    get displayName() {
+                        return `${control.isVisible ? "Hide" : "Show"} Mesh`;
+                    },
+                    icon: () => (control.isVisible ? jsx(EyeRegular, {}) : jsx(EyeOffRegular, {})),
+                    get isEnabled() {
+                        return !control.isVisible;
+                    },
+                    set isEnabled(enabled) {
+                        control.isVisible = !enabled;
+                    },
+                    onChange: control.onIsVisibleChangedObservable,
+                };
+            },
         });
         return {
             dispose: () => {
+                textureAddedObserver.remove();
+                textureRemovedObserver.remove();
                 sectionRegistration.dispose();
+                highlightControlCommandRegistration.dispose();
+                controlVisibilityCommandRegistration.dispose();
             },
         };
     },
@@ -13536,4 +13827,4 @@ const TextAreaPropertyLine = (props) => {
 AttachDebugLayer();
 
 export { useSidePaneDockOverrides as $, Accordion as A, ButtonLine as B, Collapse as C, DebugServiceIdentity as D, ExtensibleAccordion as E, FileUploadLine as F, useVector3Property as G, useColor3Property as H, Inspector as I, useColor4Property as J, useQuaternionProperty as K, Link as L, MakeLazyComponent as M, NumberDropdownPropertyLine as N, MakePropertyHook as O, Popover as P, useInterceptObservable as Q, useEventfulState as R, SwitchPropertyLine as S, ToolsServiceIdentity as T, useObservableCollection as U, Vector3PropertyLine as V, useOrderedObservableCollection as W, usePollingObservable as X, useResource as Y, useAsyncResource as Z, useCompactMode as _, SyncedSliderPropertyLine as a, useAngleConverters as a0, MakeTeachingMoment as a1, MakeDialogTeachingMoment as a2, InterceptFunction as a3, GetPropertyDescriptor as a4, IsPropertyReadonly as a5, InterceptProperty as a6, ObservableCollection as a7, ConstructorFactory as a8, SelectionServiceIdentity as a9, TextInput as aA, ToggleButton as aB, ChildWindow as aC, FactorGradientList as aD, Color3GradientList as aE, Color4GradientList as aF, Pane as aG, BooleanBadgePropertyLine as aH, Color3PropertyLine as aI, Color4PropertyLine as aJ, HexPropertyLine as aK, NumberInputPropertyLine as aL, LinkPropertyLine as aM, PropertyLine as aN, LineContainer as aO, PlaceholderPropertyLine as aP, StringifiedPropertyLine as aQ, TextAreaPropertyLine as aR, TextPropertyLine as aS, RotationVectorPropertyLine as aT, QuaternionPropertyLine as aU, Vector2PropertyLine as aV, Vector4PropertyLine as aW, SelectionServiceDefinition as aa, SettingsContextIdentity as ab, ShowInspector as ac, Checkbox as ad, ColorPickerPopup as ae, InputHexField as af, InputHsvField as ag, ComboBox as ah, DraggableLine as ai, Dropdown as aj, NumberDropdown as ak, StringDropdown as al, FactorGradientComponent as am, Color3GradientComponent as an, Color4GradientComponent as ao, ColorStepGradientComponent as ap, InfoLabel as aq, List as ar, MessageBar as as, PositionedPopover as at, SearchBar as au, SearchBox as av, SpinButton as aw, Switch as ax, SyncedSliderInput as ay, Textarea as az, Button as b, TextInputPropertyLine as c, SpinButtonPropertyLine as d, CheckboxPropertyLine as e, ShellServiceIdentity as f, SceneContextIdentity as g, AccordionSection as h, useExtensionManager as i, MakePopoverTeachingMoment as j, TeachingMoment as k, SidePaneContainer as l, PropertiesServiceIdentity as m, SceneExplorerServiceIdentity as n, SettingsServiceIdentity as o, StatsServiceIdentity as p, ConvertOptions as q, AttachDebugLayer as r, DetachDebugLayer as s, StringDropdownPropertyLine as t, useObservableState as u, BoundProperty as v, LinkToEntityPropertyLine as w, Theme as x, BuiltInsExtensionFeed as y, useProperty as z };
-//# sourceMappingURL=index-upm3WBf8.js.map
+//# sourceMappingURL=index-C7ey_J-r.js.map