@babylonjs/inspector 9.1.0 → 9.2.1

package/lib/{index-BCbXjPTn.js → index-DmfAhsIm.js}

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { createContext, forwardRef, useContext, useState, useCallback, Component, useMemo, useEffect, useRef, useReducer, Children, isValidElement, useLayoutEffect, cloneElement, useImperativeHandle, createElement, Suspense, memo, Fragment as Fragment$1, lazy } from 'react';
+import { createContext, forwardRef, useContext, useState, useCallback, Component, useMemo, useEffect, useRef, useReducer, Children, isValidElement, useLayoutEffect, useImperativeHandle, cloneElement, createElement, Suspense, memo, Fragment as Fragment$1, lazy } from 'react';
 import { tokens, makeStyles, Tooltip as Tooltip$1, Button as Button$1, Spinner, Link as Link$1, Caption1, Body1, useFluent, Accordion as Accordion$1, AccordionHeader, Subtitle2Stronger, AccordionPanel, Divider, MessageBar as MessageBar$1, MessageBarBody, AccordionItem, SearchBox as SearchBox$1, Portal, ToggleButton as ToggleButton$1, InfoLabel as InfoLabel$1, Body1Strong, mergeClasses, useId, useToastController, Toast, ToastTitle, FluentProvider, Toaster, Checkbox as Checkbox$1, createLightTheme, createDarkTheme, TeachingPopover, TeachingPopoverSurface, TeachingPopoverHeader, TeachingPopoverBody, createDOMRenderer, RendererProvider, Menu, MenuTrigger, SplitButton, MenuPopover, MenuList, MenuItem, Toolbar as Toolbar$1, ToolbarRadioButton, MenuGroup, MenuGroupHeader, Switch as Switch$1, treeItemLevelToken, FlatTree, FlatTreeItem, TreeItemLayout, MenuDivider, MenuItemCheckbox, useMergedRefs, Input, Dropdown as Dropdown$1, Option, Popover as Popover$1, PopoverTrigger, PopoverSurface, ColorPicker, ColorArea, ColorSlider, AlphaSlider, ColorSwatch, PresenceBadge, Slider as Slider$1, MenuItemRadio, Dialog, DialogSurface, DialogBody, DialogTitle, DialogContent, DialogActions, List as List$1, ListItem, Badge, Label, MessageBarTitle, useComboboxFilter, Combobox, Subtitle2, Textarea as Textarea$1, ToolbarButton, ToolbarDivider, Field } from '@fluentui/react-components';
-import { ErrorCircleRegular, EyeFilled, EyeOffRegular, CheckmarkFilled, EditRegular, FilterRegular, PinFilled, PinRegular, ArrowCircleUpRegular, ChevronCircleRight16Regular, ChevronCircleRight20Regular, ChevronCircleDown16Regular, ChevronCircleDown20Regular, Copy16Regular, CopyRegular, PanelLeftExpandRegular, PanelRightExpandRegular, PanelLeftContractRegular, PanelRightContractRegular, PictureInPictureEnterRegular, MoreHorizontalRegular, LayoutColumnTwoFocusLeftFilled, LayoutColumnTwoSplitLeftFocusTopLeftFilled, LayoutColumnTwoSplitLeftFocusBottomLeftFilled, LayoutColumnTwoFocusRightFilled, LayoutColumnTwoSplitRightFocusTopRightFilled, LayoutColumnTwoSplitRightFocusBottomRightFilled, SettingsRegular, DocumentTextRegular, createFluentIcon, TextSortAscendingRegular, GlobeRegular, ArrowExpandAllRegular, ArrowCollapseAllRegular, CubeTreeRegular, BugRegular, ArrowUploadRegular, ArrowBidirectionalUpDownFilled, ArrowDownloadRegular, StopRegular, RecordRegular, DataBarHorizontalRegular, WrenchRegular, ArrowClockwiseRegular, WeatherSunnyRegular, WeatherMoonRegular, ArrowRotateClockwiseRegular, ArrowExpandRegular, SelectObjectRegular, CubeRegular, CameraRegular, AddRegular, DeleteRegular, FullScreenMaximizeRegular, ChevronDownRegular, ChevronRightRegular, CircleSmallFilled, SaveRegular, PreviousRegular, ArrowPreviousRegular, TriangleLeftRegular, RecordStopRegular, PlayRegular, ArrowNextRegular, NextRegular, PauseRegular, LinkDismissRegular, LinkEditRegular, ArrowUndoRegular, BracesRegular, BracesDismiss16Regular, EyeRegular, CloudArrowUpRegular, CloudArrowDownRegular, EyeOffFilled, ArrowMoveFilled, StopFilled, PlayFilled, LockOpenRegular, LockClosedRegular, ResizeRegular, ChevronUpRegular, ArrowResetRegular, CircleHalfFillRegular, EyedropperRegular, PaintBucketRegular, InkStrokeRegular, StackRegular, FilmstripRegular, PauseFilled, WeatherSunnyLowFilled, LayerRegular, FrameRegular, AppGenericRegular, RectangleLandscapeRegular, BorderOutsideRegular, BorderNoneRegular, MyLocationRegular, BubbleMultipleRegular, LightbulbRegular, VideoFilled, VideoRegular, FlashlightRegular, FlashlightOffRegular, DropRegular, BlurRegular, PipelineRegular, PersonWalkingRegular, DataLineRegular, SoundWaveCircleRegular, PersonSquareRegular, LayerDiagonalPersonRegular, ImageEditRegular, ImageRegular, TargetRegular, PersonFeedbackRegular, BranchRegular, DeleteFilled } from '@fluentui/react-icons';
+import { ErrorCircleRegular, EyeFilled, EyeOffRegular, CheckmarkFilled, EditRegular, FilterRegular, PinFilled, PinRegular, ArrowCircleUpRegular, ChevronCircleRight16Regular, ChevronCircleRight20Regular, ChevronCircleDown16Regular, ChevronCircleDown20Regular, Copy16Regular, CopyRegular, PanelLeftExpandRegular, PanelRightExpandRegular, PanelLeftContractRegular, PanelRightContractRegular, PictureInPictureEnterRegular, MoreHorizontalRegular, LayoutColumnTwoFocusLeftFilled, LayoutColumnTwoSplitLeftFocusTopLeftFilled, LayoutColumnTwoSplitLeftFocusBottomLeftFilled, LayoutColumnTwoFocusRightFilled, LayoutColumnTwoSplitRightFocusTopRightFilled, LayoutColumnTwoSplitRightFocusBottomRightFilled, SettingsRegular, DocumentTextRegular, createFluentIcon, TextSortAscendingRegular, GlobeRegular, WarningRegular, ArrowExpandAllRegular, ArrowCollapseAllRegular, CubeTreeRegular, BugRegular, ArrowUploadRegular, ArrowBidirectionalUpDownFilled, ArrowDownloadRegular, StopRegular, RecordRegular, DataBarHorizontalRegular, WrenchRegular, ArrowClockwiseRegular, WeatherSunnyRegular, WeatherMoonRegular, PlugConnectedRegular, PlugDisconnectedRegular, ArrowRotateClockwiseRegular, ArrowExpandRegular, SelectObjectRegular, CubeRegular, CameraRegular, AddRegular, DeleteRegular, FullScreenMaximizeRegular, ChevronDownRegular, ChevronRightRegular, CircleSmallFilled, SaveRegular, PreviousRegular, ArrowPreviousRegular, TriangleLeftRegular, RecordStopRegular, PlayRegular, ArrowNextRegular, NextRegular, PauseRegular, LinkDismissRegular, LinkEditRegular, ArrowUndoRegular, BracesRegular, BracesDismiss16Regular, EyeRegular, CloudArrowUpRegular, CloudArrowDownRegular, EyeOffFilled, ArrowMoveFilled, StopFilled, PlayFilled, LockOpenRegular, LockClosedRegular, ResizeRegular, ChevronUpRegular, ArrowResetRegular, CircleHalfFillRegular, EyedropperRegular, PaintBucketRegular, InkStrokeRegular, StackRegular, FilmstripRegular, PauseFilled, WeatherSunnyLowFilled, LayerRegular, FrameRegular, AppGenericRegular, RectangleLandscapeRegular, BorderOutsideRegular, BorderNoneRegular, MyLocationRegular, BubbleMultipleRegular, LightbulbRegular, VideoFilled, VideoRegular, FlashlightRegular, FlashlightOffRegular, DropRegular, BlurRegular, PipelineRegular, PersonWalkingRegular, DataLineRegular, SoundWaveCircleRegular, PersonSquareRegular, LayerDiagonalPersonRegular, ImageEditRegular, ImageRegular, TargetRegular, PersonFeedbackRegular, BranchRegular, DeleteFilled } from '@fluentui/react-icons';
 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';
@@ -45,6 +45,7 @@ import { Light } from '@babylonjs/core/Lights/light.js';
 import { AbstractMesh } from '@babylonjs/core/Meshes/abstractMesh.js';
 import { Node as Node$1 } from '@babylonjs/core/node.js';
 import { createRoot } from 'react-dom/client';
+import { CreateScreenshotUsingRenderTargetAsync } from '@babylonjs/core/Misc/screenshotTools.js';
 import { SelectionOutlineLayer } from '@babylonjs/core/Layers/selectionOutlineLayer.js';
 import { GaussianSplattingMesh } from '@babylonjs/core/Meshes/GaussianSplatting/gaussianSplattingMesh.js';
 import { AnimationGroup, TargetedAnimation } from '@babylonjs/core/Animations/animationGroup.js';
@@ -138,7 +139,6 @@ import '@babylonjs/core/Sprites/spriteSceneComponent.js';
 import { DynamicTexture } from '@babylonjs/core/Materials/Textures/dynamicTexture.js';
 import { captureEquirectangularFromScene } from '@babylonjs/core/Misc/equirectangularCapture.js';
 import { SceneRecorder } from '@babylonjs/core/Misc/sceneRecorder.js';
-import { CreateScreenshotUsingRenderTargetAsync } from '@babylonjs/core/Misc/screenshotTools.js';
 import { VideoRecorder } from '@babylonjs/core/Misc/videoRecorder.js';
 import { SceneSerializer } from '@babylonjs/core/Misc/sceneSerializer.js';
 import { EnvironmentTextureTools } from '@babylonjs/core/Misc/environmentTextureTools.js';
@@ -1743,13 +1743,18 @@ const InfoLabel = (props) => {
 };
 
 const ToastContext = createContext({ showToast: () => { } });
-const ToastProvider = ({ children }) => {
+/**
+ * Provides toast notification functionality to child components via context and an optional imperative ref.
+ * @returns The toast provider component tree.
+ */
+const ToastProvider = ({ children, imperativeRef }) => {
     const toasterId = useId("toaster");
     const { dispatchToast } = useToastController(toasterId);
     const { targetDocument } = useFluent();
-    const showToast = useCallback((message) => {
-        dispatchToast(jsx(Toast, { children: jsx(ToastTitle, { children: message }) }), { intent: "info", timeout: 2000 });
+    const showToast = useCallback((message, options) => {
+        dispatchToast(jsx(Toast, { children: jsx(ToastTitle, { children: message }) }), { intent: options?.intent ?? "info", timeout: 2000 });
     }, [dispatchToast]);
+    useImperativeHandle(imperativeRef, () => ({ showToast }), [showToast]);
     return (jsxs(ToastContext.Provider, { value: { showToast }, children: [children, jsx(FluentProvider, { applyStylesToPortals: true, targetDocument: targetDocument, children: jsx(Toaster, { toasterId: toasterId, position: "bottom" }) })] }));
 };
 /**
@@ -1931,25 +1936,6 @@ function useSettingsStore() {
     return useContext(SettingsStoreContext);
 }
 
-// These are all "global" settings that aren't produced/owned by a specific service,
-// so we just add them by default directly in the SettingsService.
-const CompactModeSettingDescriptor = {
-    key: "CompactMode",
-    defaultValue: !matchMedia("(pointer: coarse)").matches,
-};
-const UseDegreesSettingDescriptor = {
-    key: "UseDegrees",
-    defaultValue: true,
-};
-const UseEulerSettingDescriptor = {
-    key: "UseEuler",
-    defaultValue: true,
-};
-const DisableCopySettingDescriptor = {
-    key: "DisableCopy",
-    defaultValue: false,
-};
-
 /**
  * Hook that reads and writes a setting from the settings store.
  * @param descriptor The setting descriptor that identifies the setting and its default value.
@@ -1985,35 +1971,15 @@ function useSetting(descriptor) {
     }
     return [value, setValue, resetValue];
 }
-const RadiansToDegrees = 180 / Math.PI;
-function WrapAngle(angle) {
-    angle %= Math.PI * 2;
-    if (angle < 0) {
-        angle += Math.PI * 2;
-    }
-    return angle;
-}
-/**
- * Gets functions used to convert to/from display values for angles based on the current settings.
- * @returns A tuple containing the functions to convert to and from display values.
- */
-function useAngleConverters() {
-    const [useDegrees] = useSetting(UseDegreesSettingDescriptor);
-    const toDisplayValue = useCallback((angle, wrap = false) => {
-        if (wrap) {
-            angle = WrapAngle(angle);
-        }
-        return useDegrees ? angle * RadiansToDegrees : angle;
-    }, [useDegrees]);
-    const fromDisplayValue = useCallback((angle, wrap = false) => {
-        angle = useDegrees ? angle / RadiansToDegrees : angle;
-        if (wrap) {
-            angle = WrapAngle(angle);
-        }
-        return angle;
-    }, [useDegrees]);
-    return [toDisplayValue, fromDisplayValue, useDegrees];
-}
+
+const CompactModeSettingDescriptor = {
+    key: "CompactMode",
+    defaultValue: !matchMedia("(pointer: coarse)").matches,
+};
+const DisableCopySettingDescriptor = {
+    key: "DisableCopy",
+    defaultValue: false,
+};
 
 const UXContextProvider = (props) => {
     const [compactMode] = useSetting(CompactModeSettingDescriptor);
@@ -2535,6 +2501,47 @@ function usePollingObservable(delay) {
     return observable;
 }
 
+// These are all "global" settings that aren't produced/owned by a specific service,
+// so we just add them by default directly in the SettingsService.
+const UseDegreesSettingDescriptor = {
+    key: "UseDegrees",
+    defaultValue: true,
+};
+const UseEulerSettingDescriptor = {
+    key: "UseEuler",
+    defaultValue: true,
+};
+
+const RadiansToDegrees = 180 / Math.PI;
+function WrapAngle(angle) {
+    angle %= Math.PI * 2;
+    if (angle < 0) {
+        angle += Math.PI * 2;
+    }
+    return angle;
+}
+/**
+ * Gets functions used to convert to/from display values for angles based on the current settings.
+ * @returns A tuple containing the functions to convert to and from display values.
+ */
+function useAngleConverters() {
+    const [useDegrees] = useSetting(UseDegreesSettingDescriptor);
+    const toDisplayValue = useCallback((angle, wrap = false) => {
+        if (wrap) {
+            angle = WrapAngle(angle);
+        }
+        return useDegrees ? angle * RadiansToDegrees : angle;
+    }, [useDegrees]);
+    const fromDisplayValue = useCallback((angle, wrap = false) => {
+        angle = useDegrees ? angle / RadiansToDegrees : angle;
+        if (wrap) {
+            angle = WrapAngle(angle);
+        }
+        return angle;
+    }, [useDegrees]);
+    return [toDisplayValue, fromDisplayValue, useDegrees];
+}
+
 const SequencerLock = new AsyncLock();
 /**
  * Creates a hook for managing teaching moment state.
@@ -2671,11 +2678,6 @@ function ConstructorFactory(constructor) {
     return (...args) => new constructor(...args);
 }
 
-/**
- * The unique identity symbol for the scene context service.
- */
-const SceneContextIdentity = Symbol("SceneContext");
-
 function ToFeaturesString(options) {
     const { defaultWidth, defaultHeight, defaultLeft, defaultTop } = options;
     const features = [];
@@ -3612,6 +3614,46 @@ function MakeShellServiceDefinition({ leftPaneDefaultWidth = 350, leftPaneMinWid
     };
 }
 
+/**
+ * The unique identity symbol for the settings service.
+ */
+const SettingsServiceIdentity = Symbol("SettingsService");
+const SettingsServiceDefinition = {
+    friendlyName: "Settings",
+    consumes: [ShellServiceIdentity],
+    produces: [SettingsServiceIdentity],
+    factory: (shellService) => {
+        const sectionsCollection = new ObservableCollection();
+        const sectionContentCollection = new ObservableCollection();
+        const registration = shellService.addSidePane({
+            key: "Settings",
+            title: "Settings",
+            icon: SettingsRegular,
+            horizontalLocation: "right",
+            verticalLocation: "top",
+            order: 500,
+            teachingMoment: false,
+            content: () => {
+                const sections = useOrderedObservableCollection(sectionsCollection);
+                const sectionContent = useObservableCollection(sectionContentCollection);
+                return jsx(ExtensibleAccordion, { sections: sections, sectionContent: sectionContent, context: true });
+            },
+        });
+        return {
+            addSection: (section) => sectionsCollection.add(section),
+            addSectionContent: (content) => sectionContentCollection.add(content),
+            dispose: () => {
+                registration.dispose();
+            },
+        };
+    },
+};
+
+/**
+ * The unique identity symbol for the scene context service.
+ */
+const SceneContextIdentity = Symbol("SceneContext");
+
 const useSwitchStyles = makeStyles({
     switch: {
         marginLeft: "auto",
@@ -3659,54 +3701,6 @@ const SwitchPropertyLine = (props) => {
     return (jsx(PropertyLine, { ...props, children: jsx(Switch, { ...switchProps }) }));
 };
 
-/**
- * The unique identity symbol for the settings service.
- */
-const SettingsServiceIdentity = Symbol("SettingsService");
-const SettingsServiceDefinition = {
-    friendlyName: "Settings",
-    consumes: [ShellServiceIdentity, SceneContextIdentity],
-    produces: [SettingsServiceIdentity],
-    factory: (shellService, sceneContext) => {
-        const sectionsCollection = new ObservableCollection();
-        const sectionContentCollection = new ObservableCollection();
-        const registration = shellService.addSidePane({
-            key: "Settings",
-            title: "Settings",
-            icon: SettingsRegular,
-            horizontalLocation: "right",
-            verticalLocation: "top",
-            order: 500,
-            teachingMoment: false,
-            content: () => {
-                const sections = useOrderedObservableCollection(sectionsCollection);
-                const sectionContent = useObservableCollection(sectionContentCollection);
-                const scene = useObservableState(() => sceneContext.currentScene, sceneContext.currentSceneObservable);
-                const [compactMode, setCompactMode] = useSetting(CompactModeSettingDescriptor);
-                const [useDegrees, setUseDegrees] = useSetting(UseDegreesSettingDescriptor);
-                const [useEuler, setUseEuler] = useSetting(UseEulerSettingDescriptor);
-                const [disableCopy, setDisableCopy] = useSetting(DisableCopySettingDescriptor);
-                return (jsx(Fragment, { children: scene && (jsx(ExtensibleAccordion, { sections: sections, sectionContent: sectionContent, context: scene, children: jsxs(AccordionSection, { title: "UI", children: [jsx(SwitchPropertyLine, { label: "Compact Mode", description: "Use a more compact UI with less spacing.", value: compactMode, onChange: (checked) => {
-                                        setCompactMode(checked);
-                                    } }), jsx(SwitchPropertyLine, { label: "Use Degrees", description: "Using degrees instead of radians.", value: useDegrees, onChange: (checked) => {
-                                        setUseDegrees(checked);
-                                    } }), jsx(SwitchPropertyLine, { label: "Only Show Euler Angles", description: "Only show Euler angles in rotation properties, rather than quaternions.", value: useEuler, onChange: (checked) => {
-                                        setUseEuler(checked);
-                                    } }), jsx(SwitchPropertyLine, { label: "Disable Copy Button", description: "Disables the copy to clipboard button on property lines. You can still Ctrl+Click on the label to copy.", value: disableCopy, onChange: (checked) => {
-                                        setDisableCopy(checked);
-                                    } })] }) })) }));
-            },
-        });
-        return {
-            addSection: (section) => sectionsCollection.add(section),
-            addSectionContent: (content) => sectionContentCollection.add(content),
-            dispose: () => {
-                registration.dispose();
-            },
-        };
-    },
-};
-
 /**
  * The unique identity symbol for the selection service.
  */
@@ -4147,14 +4141,14 @@ class GraphUtils {
     }
 }
 
-const SyntheticUniqueIds = new WeakMap();
-function GetEntityId(entity) {
+const SyntheticUniqueIds$1 = new WeakMap();
+function GetEntityId$1(entity) {
     if ("uniqueId" in entity && typeof entity.uniqueId === "number") {
         return entity.uniqueId;
     }
-    let id = SyntheticUniqueIds.get(entity);
+    let id = SyntheticUniqueIds$1.get(entity);
     if (!id) {
-        SyntheticUniqueIds.set(entity, (id = UniqueIdGenerator.UniqueId));
+        SyntheticUniqueIds$1.set(entity, (id = UniqueIdGenerator.UniqueId));
     }
     return id;
 }
@@ -4174,7 +4168,7 @@ function GetEntitySection(entityItem) {
 }
 function ExpandOrCollapseAll(treeItem, open, openItems) {
     const addOrRemove = open ? openItems.add.bind(openItems) : openItems.delete.bind(openItems);
-    TraverseGraph([treeItem], (treeItem) => treeItem.children, (treeItem) => addOrRemove(treeItem.type === "entity" ? GetEntityId(treeItem.entity) : treeItem.sectionName));
+    TraverseGraph([treeItem], (treeItem) => treeItem.children, (treeItem) => addOrRemove(treeItem.type === "entity" ? GetEntityId$1(treeItem.entity) : treeItem.sectionName));
 }
 function GetCommandHotKeyDescription(command) {
     if (!command.hotKey) {
@@ -4470,16 +4464,16 @@ const EntityTreeItem = (props) => {
             }
         }
     }, [commands]);
-    return (jsxs(Menu, { openOnContext: true, checkedValues: checkedContextMenuItems, onCheckedValueChange: onContextMenuCheckedValueChange, children: [jsx(MenuTrigger, { disableButtonEnhancement: true, children: jsx(FlatTreeItem, { className: mergeClasses(classes.treeItem, isDragging && classes.treeItemDragging, isDropTarget && classes.treeItemDropTarget), value: GetEntityId(entityItem.entity), 
+    return (jsxs(Menu, { openOnContext: true, checkedValues: checkedContextMenuItems, onCheckedValueChange: onContextMenuCheckedValueChange, children: [jsx(MenuTrigger, { disableButtonEnhancement: true, children: jsx(FlatTreeItem, { className: mergeClasses(classes.treeItem, isDragging && classes.treeItemDragging, isDropTarget && classes.treeItemDropTarget), value: GetEntityId$1(entityItem.entity), 
                     // Disable manual expand/collapse when a filter is active.
-                    itemType: !isFiltering && hasChildren ? "branch" : "leaf", parentValue: entityItem.parent.type === "section" ? entityItem.parent.sectionName : GetEntityId(entityItem.parent.entity), "aria-level": entityItem.depth, "aria-setsize": 1, "aria-posinset": 1, onClick: select, onKeyDown: onKeyDown, style: { [treeItemLevelToken]: entityItem.depth }, ...dragProps, children: jsx(TreeItemLayout, { iconBefore: entityItem.icon ? jsx(entityItem.icon, { entity: entityItem.entity }) : null, className: mergeClasses(hasChildren ? classes.treeItemLayoutBranch : classes.treeItemLayoutLeaf, compactMode ? classes.treeItemLayoutCompact : undefined, isDropTarget && classes.treeItemDropTarget), style: isSelected ? { backgroundColor: tokens.colorNeutralBackground1Selected } : undefined, actions: actions, aside: {
+                    itemType: !isFiltering && hasChildren ? "branch" : "leaf", parentValue: entityItem.parent.type === "section" ? entityItem.parent.sectionName : GetEntityId$1(entityItem.parent.entity), "aria-level": entityItem.depth, "aria-setsize": 1, "aria-posinset": 1, onClick: select, onKeyDown: onKeyDown, style: { [treeItemLevelToken]: entityItem.depth }, ...dragProps, children: jsx(TreeItemLayout, { iconBefore: displayInfo.validationError ? (jsx(Tooltip$1, { content: displayInfo.validationError, relationship: "description", children: jsx(WarningRegular, {}) })) : entityItem.icon ? (jsx(entityItem.icon, { entity: entityItem.entity })) : null, className: mergeClasses(hasChildren ? classes.treeItemLayoutBranch : classes.treeItemLayoutLeaf, compactMode ? classes.treeItemLayoutCompact : undefined, isDropTarget && classes.treeItemDropTarget), style: isSelected ? { backgroundColor: tokens.colorNeutralBackground1Selected } : undefined, actions: actions, aside: {
                             // Match the gap and padding of the actions.
                             className: classes.treeItemLayoutAside,
                             children: aside,
                         }, main: {
                             // Prevent the "main" content (the Body1 below) from growing too large and pushing the actions/aside out of view.
                             className: classes.treeItemLayoutMain,
-                        }, children: jsx(Tooltip$1, { content: name, relationship: "description", children: jsx(Body1, { wrap: false, truncate: true, children: name }) }) }) }, GetEntityId(entityItem.entity)) }), jsx(MenuPopover, { hidden: !hasChildren && contextMenuCommands.length === 0, children: jsxs(MenuList, { children: [hasChildren && (jsxs(Fragment, { children: [jsx(MenuItem, { icon: jsx(ArrowExpandAllRegular, {}), onClick: expandAll, children: jsx(Body1, { children: "Expand All" }) }), jsx(MenuItem, { icon: jsx(ArrowCollapseAllRegular, {}), onClick: collapseAll, children: jsx(Body1, { children: "Collapse All" }) })] })), hasChildren && contextMenuCommands.length > 0 && jsx(MenuDivider, {}), contextMenuItems] }) })] }));
+                        }, children: jsx(Tooltip$1, { content: name, relationship: "description", children: jsx(Body1, { wrap: false, truncate: true, children: name }) }) }) }, GetEntityId$1(entityItem.entity)) }), jsx(MenuPopover, { hidden: !hasChildren && contextMenuCommands.length === 0, children: jsxs(MenuList, { children: [hasChildren && (jsxs(Fragment, { children: [jsx(MenuItem, { icon: jsx(ArrowExpandAllRegular, {}), onClick: expandAll, children: jsx(Body1, { children: "Expand All" }) }), jsx(MenuItem, { icon: jsx(ArrowCollapseAllRegular, {}), onClick: collapseAll, children: jsx(Body1, { children: "Collapse All" }) })] })), hasChildren && contextMenuCommands.length > 0 && jsx(MenuDivider, {}), contextMenuItems] }) })] }));
 };
 const SceneExplorer = (props) => {
     const classes = useStyles$Q();
@@ -4502,7 +4496,7 @@ const SceneExplorer = (props) => {
             if (targetEntity) {
                 setOpenItems((prev) => {
                     const next = new Set(prev);
-                    next.add(GetEntityId(targetEntity));
+                    next.add(GetEntityId$1(targetEntity));
                     return next;
                 });
             }
@@ -4519,7 +4513,7 @@ const SceneExplorer = (props) => {
         };
         const onSceneItemRemoved = (item) => {
             setSceneVersion((version) => version + 1);
-            if (openItems.delete(GetEntityId(item))) {
+            if (openItems.delete(GetEntityId$1(item))) {
                 setOpenItems(new Set(openItems));
             }
             if (item === selectedEntity) {
@@ -4575,7 +4569,7 @@ const SceneExplorer = (props) => {
                     parent.children = [];
                 }
                 parent.children.push(treeItemData);
-                allTreeItems.set(GetEntityId(entity), treeItemData);
+                allTreeItems.set(GetEntityId$1(entity), treeItemData);
                 return treeItemData;
             };
             const rootEntityTreeItems = rootEntities.map((entity) => createEntityTreeItemData(entity, sectionTreeItem));
@@ -4623,7 +4617,7 @@ const SceneExplorer = (props) => {
                 TraverseGraph(children, 
                 // Get children
                 (treeItem) => {
-                    if (filter || openItems.has(GetEntityId(treeItem.entity))) {
+                    if (filter || openItems.has(GetEntityId$1(treeItem.entity))) {
                         if (!treeItem.children) {
                             return null;
                         }
@@ -4671,8 +4665,8 @@ const SceneExplorer = (props) => {
     }, [sceneTreeItem, sectionTreeItems, allTreeItems, openItems, itemsFilter, isSorted]);
     const getParentStack = useCallback((entity) => {
         const parentStack = [];
-        for (let treeItem = allTreeItems.get(GetEntityId(entity)); treeItem; treeItem = treeItem?.type === "entity" ? treeItem.parent : undefined) {
-            parentStack.push(treeItem.type === "entity" ? GetEntityId(treeItem.entity) : treeItem.sectionName);
+        for (let treeItem = allTreeItems.get(GetEntityId$1(entity)); treeItem; treeItem = treeItem?.type === "entity" ? treeItem.parent : undefined) {
+            parentStack.push(treeItem.type === "entity" ? GetEntityId$1(treeItem.entity) : treeItem.sectionName);
         }
         // The first item will be the entity itself, so just remove it.
         parentStack.shift();
@@ -4680,7 +4674,7 @@ const SceneExplorer = (props) => {
     }, [allTreeItems]);
     const selectEntity = useCallback((selectedEntity) => {
         const entity = selectedEntity;
-        if (entity && GetEntityId(entity) != undefined) {
+        if (entity && GetEntityId$1(entity) != undefined) {
             const parentStack = getParentStack(entity);
             if (parentStack.length > 0) {
                 const newOpenItems = new Set(openItems);
@@ -4752,7 +4746,7 @@ const SceneExplorer = (props) => {
                                 return name;
                             };
                             const dragProps = createDragProps(item.entity, getName, section.dragDropConfig);
-                            return (jsx(EntityTreeItem, { scene: scene, entityItem: item, isSelected: selectedEntity === item.entity, select: () => setSelectedEntity?.(item.entity), isFiltering: !!itemsFilter, commandProviders: entityCommandProviders, expandAll: () => expandAll(item), collapseAll: () => collapseAll(item), isDragging: draggedEntity === item.entity, isDropTarget: dropTarget === item.entity, ...dragProps }, GetEntityId(item.entity)));
+                            return (jsx(EntityTreeItem, { scene: scene, entityItem: item, isSelected: selectedEntity === item.entity, select: () => setSelectedEntity?.(item.entity), isFiltering: !!itemsFilter, commandProviders: entityCommandProviders, expandAll: () => expandAll(item), collapseAll: () => collapseAll(item), isDragging: draggedEntity === item.entity, isDropTarget: dropTarget === item.entity, ...dragProps }, GetEntityId$1(item.entity)));
                         }
                     } }) })] }));
 };
@@ -5032,7 +5026,8 @@ const FrameStepsStats = ({ context: scene }) => {
  */
 const ButtonLine = (props) => {
     ButtonLine.displayName = "ButtonLine";
-    return (jsx(LineContainer, { uniqueId: props.uniqueId ?? props.label, children: jsx(Button, { ...props }) }));
+    const { uniqueId, ...buttonProps } = props;
+    return (jsx(LineContainer, { uniqueId: uniqueId ?? props.label, children: jsx(Button, { ...buttonProps }) }));
 };
 
 /**
@@ -6343,7 +6338,10 @@ const SpinButton = forwardRef((props, ref) => {
             // Update edit text to reflect the new value so the user sees the change
             setEditText(formatValue(newValue));
         }
-        HandleKeyDown(event);
+        // Ignore modifier keys so the useKeyState calls above can still observe them.
+        if (event.key !== "Alt" && event.key !== "Shift") {
+            HandleKeyDown(event);
+        }
     }, [value, step, constrainValue, tryCommitValue, commitEditText, formatValue]);
     const id = useId("spin-button2");
     // Real-time validation: when editing, validate the expression; otherwise validate the committed value.
@@ -6904,35 +6902,18 @@ const PerformanceViewer = (props) => {
     return (jsxs("div", { className: classes.container, children: [jsx(Button, { className: classes.returnButton, onClick: onReturnToPlayheadClick, label: "Return", title: "Return to Playhead" }), jsx("div", { className: classes.sidebar, children: jsx(PerformanceSidebar, { collector: performanceCollector, onVisibleRangeChangedObservable: onVisibleRangeChangedObservable }) }), jsx("div", { className: classes.graph, children: jsx(CanvasGraph, { returnToPlayheadObservable: returnToLiveObservable, layoutObservable: layoutObservable, scene: scene, collector: performanceCollector, onVisibleRangeChangedObservable: onVisibleRangeChangedObservable, initialGraphSize: initialGraphSize }) })] }));
 };
 
-function AddStrategies(perfCollector) {
-    perfCollector.addCollectionStrategies(...DefaultStrategiesList);
-    if (PressureObserverWrapper.IsAvailable) {
-        // Do not enable for now as the Pressure API does not
-        // report factors at the moment.
-        // perfCollector.addCollectionStrategies({
-        //     strategyCallback: PerfCollectionStrategy.ThermalStrategy(),
-        //     category: IPerfMetadataCategory.FrameSteps,
-        //     hidden: true,
-        // });
-        // perfCollector.addCollectionStrategies({
-        //     strategyCallback: PerfCollectionStrategy.PowerSupplyStrategy(),
-        //     category: IPerfMetadataCategory.FrameSteps,
-        //     hidden: true,
-        // });
-        perfCollector.addCollectionStrategies({
-            strategyCallback: PerfCollectionStrategy.PressureStrategy(),
-            category: "Frame Steps Duration" /* PerfMetadataCategory.FrameSteps */,
-            hidden: true,
-        });
-    }
-}
+/**
+ * Performance metadata categories for grouping strategies.
+ */
 var PerfMetadataCategory;
 (function (PerfMetadataCategory) {
     PerfMetadataCategory["Count"] = "Count";
     PerfMetadataCategory["FrameSteps"] = "Frame Steps Duration";
 })(PerfMetadataCategory || (PerfMetadataCategory = {}));
-// list of strategies to add to perf graph automatically.
-const DefaultStrategiesList = [
+/**
+ * Default list of performance collection strategies used by the performance viewer and CLI perf trace.
+ */
+const DefaultPerfStrategies = [
     { strategyCallback: PerfCollectionStrategy.FpsStrategy() },
     { strategyCallback: PerfCollectionStrategy.TotalMeshesStrategy(), category: "Count" /* PerfMetadataCategory.Count */, hidden: true },
     { strategyCallback: PerfCollectionStrategy.ActiveMeshesStrategy(), category: "Count" /* PerfMetadataCategory.Count */, hidden: true },
@@ -6956,6 +6937,21 @@ const DefaultStrategiesList = [
     { strategyCallback: PerfCollectionStrategy.InterFrameStrategy(), category: "Frame Steps Duration" /* PerfMetadataCategory.FrameSteps */, hidden: true },
     { strategyCallback: PerfCollectionStrategy.GpuFrameTimeStrategy(), category: "Frame Steps Duration" /* PerfMetadataCategory.FrameSteps */, hidden: true },
 ];
+
+/**
+ * Adds default and platform-specific performance collection strategies to the collector.
+ * @param perfCollector - The performance viewer collector to add strategies to.
+ */
+function AddStrategies(perfCollector) {
+    perfCollector.addCollectionStrategies(...DefaultPerfStrategies);
+    if (PressureObserverWrapper.IsAvailable) {
+        perfCollector.addCollectionStrategies({
+            strategyCallback: PerfCollectionStrategy.PressureStrategy(),
+            category: "Frame Steps Duration" /* PerfMetadataCategory.FrameSteps */,
+            hidden: true,
+        });
+    }
+}
 // arbitrary window size
 const InitialWindowSize = { width: 1024, height: 512 };
 const InitialGraphSize = new Vector2(724, 512);
@@ -8143,12 +8139,20 @@ function SortServiceDefinitions(serviceDefinitions) {
  * passing dependencies through to services, and disposing of services when the container is disposed.
  */
 class ServiceContainer {
-    constructor(_friendlyName) {
+    /**
+     * Creates a new ServiceContainer.
+     * @param _friendlyName A human-readable name for debugging.
+     * @param _parent An optional parent container. Dependencies not found locally will be resolved from the parent.
+     */
+    constructor(_friendlyName, _parent) {
         this._friendlyName = _friendlyName;
+        this._parent = _parent;
         this._isDisposed = false;
         this._serviceDefinitions = new Map();
         this._serviceDependents = new Map();
         this._serviceInstances = new Map();
+        this._children = new Set();
+        _parent?._children.add(this);
     }
     /**
      * Adds a set of service definitions in the service container.
@@ -8209,30 +8213,61 @@ class ServiceContainer {
         service.produces?.forEach((contract) => {
             this._serviceDefinitions.set(contract, service);
         });
-        const dependencies = service.consumes?.map((dependency) => {
-            const dependencyDefinition = this._serviceDefinitions.get(dependency);
-            if (!dependencyDefinition) {
-                throw new Error(`Service '${dependency.toString()}' has not been registered in the '${this._friendlyName}' container.`);
-            }
-            let dependentDefinitions = this._serviceDependents.get(dependencyDefinition);
+        const dependencies = service.consumes?.map((contract) => this._resolveDependency(contract, service)) ?? [];
+        this._serviceInstances.set(service, await service.factory(...dependencies, abortSignal));
+    }
+    /**
+     * Resolves a dependency by contract identity for a consuming service.
+     * Checks local services first, then walks up the parent chain.
+     * Registers the consumer as a dependent in whichever container owns the dependency.
+     * @param contract The contract identity to resolve.
+     * @param consumer The service definition that consumes this dependency.
+     * @returns The resolved service instance.
+     */
+    _resolveDependency(contract, consumer) {
+        const definition = this._serviceDefinitions.get(contract);
+        if (definition) {
+            let dependentDefinitions = this._serviceDependents.get(definition);
             if (!dependentDefinitions) {
-                this._serviceDependents.set(dependencyDefinition, (dependentDefinitions = new Set()));
+                this._serviceDependents.set(definition, (dependentDefinitions = new Set()));
             }
-            dependentDefinitions.add(service);
-            const dependencyInstance = this._serviceInstances.get(dependencyDefinition);
-            if (!dependencyInstance) {
-                throw new Error(`Service '${dependency.toString()}' has not been instantiated in the '${this._friendlyName}' container.`);
+            dependentDefinitions.add(consumer);
+            const instance = this._serviceInstances.get(definition);
+            if (!instance) {
+                throw new Error(`Service '${contract.toString()}' has not been instantiated in the '${this._friendlyName}' container.`);
             }
-            return dependencyInstance;
-        }) ?? [];
-        this._serviceInstances.set(service, await service.factory(...dependencies, abortSignal));
+            return instance;
+        }
+        if (this._parent) {
+            return this._parent._resolveDependency(contract, consumer);
+        }
+        throw new Error(`Service '${contract.toString()}' has not been registered in the '${this._friendlyName}' container.`);
+    }
+    /**
+     * Removes a consumer from the dependent set for a given contract, checking locally first then the parent chain.
+     * @param contract The contract identity.
+     * @param consumer The service definition to remove as a dependent.
+     */
+    _removeDependentFromChain(contract, consumer) {
+        const definition = this._serviceDefinitions.get(contract);
+        if (definition) {
+            const dependentDefinitions = this._serviceDependents.get(definition);
+            if (dependentDefinitions) {
+                dependentDefinitions.delete(consumer);
+                if (dependentDefinitions.size === 0) {
+                    this._serviceDependents.delete(definition);
+                }
+            }
+            return;
+        }
+        this._parent?._removeDependentFromChain(contract, consumer);
     }
     _removeService(service) {
         if (this._isDisposed) {
             throw new Error(`'${this._friendlyName}' container is disposed.`);
         }
         const serviceDependents = this._serviceDependents.get(service);
-        if (serviceDependents) {
+        if (serviceDependents && serviceDependents.size > 0) {
             throw new Error(`Service '${service.friendlyName}' has dependents: ${Array.from(serviceDependents)
                 .map((dependent) => dependent.friendlyName)
                 .join(", ")}`);
@@ -8244,27 +8279,24 @@ class ServiceContainer {
         service.produces?.forEach((contract) => {
             this._serviceDefinitions.delete(contract);
         });
-        service.consumes?.forEach((dependency) => {
-            const dependencyDefinition = this._serviceDefinitions.get(dependency);
-            if (dependencyDefinition) {
-                const dependentDefinitions = this._serviceDependents.get(dependencyDefinition);
-                if (dependentDefinitions) {
-                    dependentDefinitions.delete(service);
-                    if (dependentDefinitions.size === 0) {
-                        this._serviceDependents.delete(dependencyDefinition);
-                    }
-                }
-            }
+        // Remove this service as a dependent from each of its consumed dependencies (local or in parent chain).
+        service.consumes?.forEach((contract) => {
+            this._removeDependentFromChain(contract, service);
         });
     }
     /**
      * Disposes the service container and all contained services.
+     * Throws if this container is still a parent of any live child containers.
      */
     dispose() {
+        if (this._children.size > 0) {
+            throw new Error(`'${this._friendlyName}' container cannot be disposed because it has ${this._children.size} active child container(s).`);
+        }
         Array.from(this._serviceInstances.keys()).reverse().forEach(this._removeService.bind(this));
         this._serviceInstances.clear();
         this._serviceDependents.clear();
         this._serviceDefinitions.clear();
+        this._parent?._children.delete(this);
         this._isDisposed = true;
     }
 }
@@ -8345,7 +8377,7 @@ const ReactContextsWrapper = ({ contexts, children }) => {
  * @returns A token that can be used to dispose of the tool.
  */
 function MakeModularTool(options) {
-    const { namespace, containerElement, serviceDefinitions, themeMode, showThemeSelector = true, extensionFeeds = [] } = options;
+    const { namespace, containerElement, serviceDefinitions, themeMode, showThemeSelector = true, extensionFeeds = [], parentContainer } = options;
     // Create the settings store immediately as it will be exposed to services and through React context.
     const settingsStore = new SettingsStore(namespace);
     // If a theme mode is provided, just write the setting so it is the active theme.
@@ -8372,7 +8404,7 @@ function MakeModularTool(options) {
         // This is the main async initialization.
         useEffect(() => {
             const initializeExtensionManagerAsync = async () => {
-                const serviceContainer = new ServiceContainer("ModularToolContainer");
+                const serviceContainer = new ServiceContainer("ModularToolContainer", parentContainer);
                 // Expose the settings store as a service so other services can read/write settings.
                 await serviceContainer.addServiceAsync({
                     friendlyName: "Settings Store",
@@ -8420,7 +8452,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-BmiNjZiw.js');
+                    const { ExtensionListServiceDefinition } = await import('./extensionsListService-CBQwBhYh.js');
                     await serviceContainer.addServiceAsync(ExtensionListServiceDefinition);
                 }
                 // Register all external services (that make up a unique tool).
@@ -8514,38 +8546,955 @@ function MakeModularTool(options) {
         },
     };
 }
-
-// Created by running the following command from the packages/dev/inspector-v2 directory:
-// npm run makeAvatar https://raw.githubusercontent.com/BabylonJS/Brand-Toolkit/master/babylon_logo/fullColor/babylon_logo_color.png 0.8
-const BabylonLogoBase64 = "iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAsSAAALEgHS3X78AAAFXElEQVR4nO2WbWwTdRzHu+EbYmLgpeILwcQXvvCFLwwGxthG1/Z6d33Ag22FDXAE98wixsCbSiS+4IUhxoQYoyiSGKcogsjaa9c9dw9sbdfrbevW611nYTDYliCRsbv7mrt2sPiGUTZf8Uua9P7/u9/383v4//MzGJ5bjgaDIQ8Ms66FYdYZ/m+D250PgyF/GUy+trb2wshEnfmPvKnG3fukJoZ+vI912vqapRsGg+481cy8I9RSbTONNkw32pXJatMvCcvmN7Q9t5ad1QSBJuzOpHvmo7JXkrX01zfq6Yd3mhxIHrHIQuUOee5EJR4MtN0D8Bnm5jbo37nd+c/UH1jmINXcvF6scxxL1VJ3Zo86kKol5UTVTlmsIXH3p68g35uXASgAoCqyCKBKy4Lup0UL4Bn6Q2piaKmWjM0etSNdTyvCoV2LwsES9daXbixMCZomoKpQFFkFsKg9aUtzv//QM7ln6zYdIlu6lUVuyLw8e7zsLbGGunqrXq8zhMMmOVFZqKQ/+QD3w8GMsB6xAmi/rN0PB+X0qQZ5psGGG/W0LNXT5/9x731tRSDubKquWJlN3H7H7N1GO1K1hDy5v1BJNe/BvPcilIUHj4TVxUWosqJnYMlmfz0H4X0jhANF8l915OJ8oxORCnv0vHHfi0+EcGcBBpwVW9hSaqGdIBSu0qrOXvgCyvzsUsgZ4WVR6zDKYxD59g3cPvspwuVmpZ2g4DPR0khNzcYVA3QwzGY/QT/wFpnBMuVqShKwsCSQDVZVVaQ9LG519z7qgyXAhwCmxnh4TJTSZiThM1NioKpqw4oBWKdzi89CLbDFZrSVudRIfzti0UFMpyXIioJ5fhSDH36Ma9uL0LrTiPDJU/hbSkFWZMxMpyGK4xjv64KPsCmBUit8ZlrqqqjYmBvAXpcaG+pFbGQA0egAOF8rfCZSF/dZaC06/Ll1B9qZciT5CIQED0mawMRg7+oBcEM9OgA/FsbQby1gjQS8JgreUiu8pSQ8Riv8tt2YHO6HKMbXEiCE0KWf4Skh0ElT4A+Q4CpJBAgrWGo3JkMDawzADyPcehlhFwnx0C5IdRRSdSSE/TsRqi5HIhqCmBxfA4DBbh0gFulHjLuO8bZLSJyqh3jIiGS1CeKZE0gNd0FMxiFOaj0Qx8RAT+4AHQyzmTUvAVSo2gngR0PgQkEdguND4LghxC9+A9F7EWI6iaQ0qYsnJ2JITUtIhAe1JtUB2Kc9hl3Oii1+M7XgNRIKW2pVe44fx0iXD6MTI/pxjA0HwUX6wcejSE4JEBM8knFOr3/qpoR4dzt6m4/BW2JW/CYSfgstjVQ8xUV0hWE2BQjb3SBh0zpe9hQUKz7Kif4zn4MbDoKfiIAL92E00p8RFsYwdVOCwIVw/fRp/WheKyjR4OVB0ok2whb17FvBVbz8hU6GeZMl6MudFhu6CJsWjezZXqwEXJUYuvA9eH4IY+MRSGlBb7zId+cQeK8MrduKFO8ui9xttaPDQi+yhO3bPlf1q8t9P5X5bU7Cb6EjQasdAQuteIpMi55Co9pZ14ARz1XwrX+g8/ARtBYUq57iUrmDsKk9hF2re0e7nXk3Z2FoA4khM5D0NjPrfVZ7k99E3Q6SDu0mVDwFJTJrpuE1EmgtKJHbzJTSp+2ZSYGlHS4Aejm1oWaptDlZiz6SZU+Hy/UyS9jOBsz0Qo/VDi3VPiMh95IO+M3UPdbqONnnanhpKYBVm5RhMOS5CwtfcGdH8Q7Hnre9FortJvQ6K6yF+tG/t/J1bU+LVofOJe1PMs3p8kHTRzvKtB7JPuatmfB/TU8vHgutarpz7Y/nZsjR/gUhEcwHmuaM9wAAAABJRU5ErkJggg==";
-const BabylonWebResources = {
-    homepage: "https://www.babylonjs.com",
-    repository: "https://github.com/BabylonJS/Babylon.js",
-    bugs: "https://github.com/BabylonJS/Babylon.js/issues",
-    author: {
-        name: "Babylon.js",
-        avatar: BabylonLogoBase64,
-    },
-};
+
+// Created by running the following command from the packages/dev/inspector-v2 directory:
+// npm run makeAvatar https://raw.githubusercontent.com/BabylonJS/Brand-Toolkit/master/babylon_logo/fullColor/babylon_logo_color.png 0.8
+const BabylonLogoBase64 = "iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAsSAAALEgHS3X78AAAFXElEQVR4nO2WbWwTdRzHu+EbYmLgpeILwcQXvvCFLwwGxthG1/Z6d33Ag22FDXAE98wixsCbSiS+4IUhxoQYoyiSGKcogsjaa9c9dw9sbdfrbevW611nYTDYliCRsbv7mrt2sPiGUTZf8Uua9P7/u9/383v4//MzGJ5bjgaDIQ8Ms66FYdYZ/m+D250PgyF/GUy+trb2wshEnfmPvKnG3fukJoZ+vI912vqapRsGg+481cy8I9RSbTONNkw32pXJatMvCcvmN7Q9t5ad1QSBJuzOpHvmo7JXkrX01zfq6Yd3mhxIHrHIQuUOee5EJR4MtN0D8Bnm5jbo37nd+c/UH1jmINXcvF6scxxL1VJ3Zo86kKol5UTVTlmsIXH3p68g35uXASgAoCqyCKBKy4Lup0UL4Bn6Q2piaKmWjM0etSNdTyvCoV2LwsES9daXbixMCZomoKpQFFkFsKg9aUtzv//QM7ln6zYdIlu6lUVuyLw8e7zsLbGGunqrXq8zhMMmOVFZqKQ/+QD3w8GMsB6xAmi/rN0PB+X0qQZ5psGGG/W0LNXT5/9x731tRSDubKquWJlN3H7H7N1GO1K1hDy5v1BJNe/BvPcilIUHj4TVxUWosqJnYMlmfz0H4X0jhANF8l915OJ8oxORCnv0vHHfi0+EcGcBBpwVW9hSaqGdIBSu0qrOXvgCyvzsUsgZ4WVR6zDKYxD59g3cPvspwuVmpZ2g4DPR0khNzcYVA3QwzGY/QT/wFpnBMuVqShKwsCSQDVZVVaQ9LG519z7qgyXAhwCmxnh4TJTSZiThM1NioKpqw4oBWKdzi89CLbDFZrSVudRIfzti0UFMpyXIioJ5fhSDH36Ma9uL0LrTiPDJU/hbSkFWZMxMpyGK4xjv64KPsCmBUit8ZlrqqqjYmBvAXpcaG+pFbGQA0egAOF8rfCZSF/dZaC06/Ll1B9qZciT5CIQED0mawMRg7+oBcEM9OgA/FsbQby1gjQS8JgreUiu8pSQ8Riv8tt2YHO6HKMbXEiCE0KWf4Skh0ElT4A+Q4CpJBAgrWGo3JkMDawzADyPcehlhFwnx0C5IdRRSdSSE/TsRqi5HIhqCmBxfA4DBbh0gFulHjLuO8bZLSJyqh3jIiGS1CeKZE0gNd0FMxiFOaj0Qx8RAT+4AHQyzmTUvAVSo2gngR0PgQkEdguND4LghxC9+A9F7EWI6iaQ0qYsnJ2JITUtIhAe1JtUB2Kc9hl3Oii1+M7XgNRIKW2pVe44fx0iXD6MTI/pxjA0HwUX6wcejSE4JEBM8knFOr3/qpoR4dzt6m4/BW2JW/CYSfgstjVQ8xUV0hWE2BQjb3SBh0zpe9hQUKz7Kif4zn4MbDoKfiIAL92E00p8RFsYwdVOCwIVw/fRp/WheKyjR4OVB0ok2whb17FvBVbz8hU6GeZMl6MudFhu6CJsWjezZXqwEXJUYuvA9eH4IY+MRSGlBb7zId+cQeK8MrduKFO8ui9xttaPDQi+yhO3bPlf1q8t9P5X5bU7Cb6EjQasdAQuteIpMi55Co9pZ14ARz1XwrX+g8/ARtBYUq57iUrmDsKk9hF2re0e7nXk3Z2FoA4khM5D0NjPrfVZ7k99E3Q6SDu0mVDwFJTJrpuE1EmgtKJHbzJTSp+2ZSYGlHS4Aejm1oWaptDlZiz6SZU+Hy/UyS9jOBsz0Qo/VDi3VPiMh95IO+M3UPdbqONnnanhpKYBVm5RhMOS5CwtfcGdH8Q7Hnre9FortJvQ6K6yF+tG/t/J1bU+LVofOJe1PMs3p8kHTRzvKtB7JPuatmfB/TU8vHgutarpz7Y/nZsjR/gUhEcwHmuaM9wAAAABJRU5ErkJggg==";
+const BabylonWebResources = {
+    homepage: "https://www.babylonjs.com",
+    repository: "https://github.com/BabylonJS/Babylon.js",
+    bugs: "https://github.com/BabylonJS/Babylon.js/issues",
+    author: {
+        name: "Babylon.js",
+        avatar: BabylonLogoBase64,
+    },
+};
+/**
+ * Well-known default built in extensions for the Inspector.
+ */
+const DefaultInspectorExtensionFeed = new BuiltInsExtensionFeed("Inspector", [
+    {
+        name: "Quick Creation Tools (Preview)",
+        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-C38aK2nP.js'),
+    },
+    {
+        name: "Reflector",
+        description: "Connects to the Reflector Bridge for real-time scene synchronization with the Babylon.js Sandbox.",
+        keywords: ["reflector", "bridge", "sync", "sandbox", "tools"],
+        ...BabylonWebResources,
+        getExtensionModuleAsync: async () => await import('./reflectorService-Bs9E2OMh.js'),
+    },
+]);
+
+/**
+ * The service identity for the inspectable command registry.
+ */
+const InspectableCommandRegistryIdentity = Symbol("InspectableCommandRegistry");
+
+const UniqueIdArg = {
+    name: "uniqueId",
+    description: "The uniqueId of the entity to query. Omit to list all entities of this type.",
+    required: false,
+};
+const SyntheticUniqueIds = new WeakMap();
+function GetEntityId(entity) {
+    if ("uniqueId" in entity && typeof entity.uniqueId === "number") {
+        return entity.uniqueId;
+    }
+    let id = SyntheticUniqueIds.get(entity);
+    if (!id) {
+        SyntheticUniqueIds.set(entity, (id = UniqueIdGenerator.UniqueId));
+    }
+    return id;
+}
+function NodeSummary(entity) {
+    return {
+        uniqueId: entity.uniqueId,
+        name: entity.name,
+        className: entity.getClassName(),
+        parentId: entity.parent?.uniqueId,
+    };
+}
+function NamedSummary(entity) {
+    return {
+        uniqueId: entity.uniqueId,
+        name: entity.name,
+        className: entity.getClassName(),
+    };
+}
+function MinimalSummary(entity) {
+    return {
+        uniqueId: entity.uniqueId,
+        name: entity.name,
+    };
+}
+function MakeQueryCommand(collection, sceneContext) {
+    return {
+        id: collection.id,
+        description: collection.description,
+        args: [UniqueIdArg],
+        executeAsync: async (args) => {
+            const scene = sceneContext.currentScene;
+            if (!scene) {
+                throw new Error("No active scene.");
+            }
+            const entities = collection.getEntities(scene);
+            if (!entities) {
+                return JSON.stringify([], null, 2);
+            }
+            if (!args.uniqueId) {
+                return JSON.stringify(entities.map((e) => collection.getSummary(e)), null, 2);
+            }
+            const id = parseInt(args.uniqueId, 10);
+            if (isNaN(id)) {
+                throw new Error("uniqueId must be a number.");
+            }
+            const entity = entities.find((e) => collection.getUniqueId(e) === id);
+            if (!entity) {
+                throw new Error(`No ${collection.id.replace("query-", "")} found with uniqueId ${id}.`);
+            }
+            return JSON.stringify(collection.serialize ? collection.serialize(entity) : collection.getSummary(entity), null, 2);
+        },
+    };
+}
+/**
+ * Service that registers CLI commands for querying scene entities by uniqueId.
+ * When uniqueId is omitted, returns a summary list of all entities of that type.
+ */
+const EntityQueryServiceDefinition = {
+    friendlyName: "Entity Query Service",
+    consumes: [InspectableCommandRegistryIdentity, SceneContextIdentity],
+    factory: (commandRegistry, sceneContext) => {
+        const collections = [
+            {
+                id: "query-mesh",
+                description: "List meshes, or query a specific mesh by uniqueId.",
+                getEntities: (scene) => scene.meshes,
+                getUniqueId: (e) => e.uniqueId,
+                getSummary: NodeSummary,
+                serialize: (e) => e.serialize(),
+            },
+            {
+                id: "query-light",
+                description: "List lights, or query a specific light by uniqueId.",
+                getEntities: (scene) => scene.lights,
+                getUniqueId: (e) => e.uniqueId,
+                getSummary: NodeSummary,
+                serialize: (e) => e.serialize(),
+            },
+            {
+                id: "query-camera",
+                description: "List cameras, or query a specific camera by uniqueId.",
+                getEntities: (scene) => scene.cameras,
+                getUniqueId: (e) => e.uniqueId,
+                getSummary: NodeSummary,
+                serialize: (e) => e.serialize(),
+            },
+            {
+                id: "query-transformNode",
+                description: "List transform nodes, or query a specific transform node by uniqueId.",
+                getEntities: (scene) => scene.transformNodes,
+                getUniqueId: (e) => e.uniqueId,
+                getSummary: NodeSummary,
+                serialize: (e) => e.serialize(),
+            },
+            {
+                id: "query-material",
+                description: "List materials, or query a specific material by uniqueId.",
+                getEntities: (scene) => scene.materials,
+                getUniqueId: (e) => e.uniqueId,
+                getSummary: NamedSummary,
+                serialize: (e) => e.serialize(),
+            },
+            {
+                id: "query-texture",
+                description: "List textures, or query a specific texture by uniqueId.",
+                getEntities: (scene) => scene.textures,
+                getUniqueId: (e) => e.uniqueId,
+                getSummary: NamedSummary,
+                serialize: (e) => e.serialize(),
+            },
+            {
+                id: "query-skeleton",
+                description: "List skeletons, or query a specific skeleton by uniqueId.",
+                getEntities: (scene) => scene.skeletons,
+                getUniqueId: (e) => e.uniqueId,
+                getSummary: NamedSummary,
+                serialize: (e) => e.serialize(),
+            },
+            {
+                id: "query-geometry",
+                description: "List geometries, or query a specific geometry by uniqueId.",
+                getEntities: (scene) => scene.geometries,
+                getUniqueId: (e) => e.uniqueId,
+                getSummary: MinimalSummary,
+                serialize: (e) => e.serialize(),
+            },
+            {
+                id: "query-animation",
+                description: "List animations, or query a specific animation by uniqueId.",
+                getEntities: (scene) => scene.animations,
+                getUniqueId: (e) => e.uniqueId,
+                getSummary: MinimalSummary,
+                serialize: (e) => e.serialize(),
+            },
+            {
+                id: "query-animationGroup",
+                description: "List animation groups, or query a specific animation group by uniqueId.",
+                getEntities: (scene) => scene.animationGroups,
+                getUniqueId: (e) => e.uniqueId,
+                getSummary: NamedSummary,
+                serialize: (e) => e.serialize(),
+            },
+            {
+                id: "query-particleSystem",
+                description: "List particle systems, or query a specific particle system by uniqueId.",
+                getEntities: (scene) => scene.particleSystems,
+                getUniqueId: (e) => e.uniqueId,
+                getSummary: NamedSummary,
+                serialize: (e) => e.serialize(false),
+            },
+            {
+                id: "query-morphTargetManager",
+                description: "List morph target managers, or query a specific morph target manager by uniqueId.",
+                getEntities: (scene) => scene.morphTargetManagers,
+                getUniqueId: (e) => e.uniqueId,
+                getSummary: MinimalSummary,
+                serialize: (e) => e.serialize(),
+            },
+            {
+                id: "query-multiMaterial",
+                description: "List multi-materials, or query a specific multi-material by uniqueId.",
+                getEntities: (scene) => scene.multiMaterials,
+                getUniqueId: (e) => e.uniqueId,
+                getSummary: NamedSummary,
+                serialize: (e) => e.serialize(),
+            },
+            {
+                id: "query-postProcess",
+                description: "List post-processes, or query a specific post-process by uniqueId.",
+                getEntities: (scene) => scene.postProcesses,
+                getUniqueId: (e) => e.uniqueId,
+                getSummary: NamedSummary,
+                serialize: (e) => e.serialize(),
+            },
+            {
+                id: "query-frameGraph",
+                description: "List frame graphs, or query a specific frame graph by uniqueId.",
+                getEntities: (scene) => scene.frameGraphs,
+                getUniqueId: (e) => e.uniqueId,
+                getSummary: NamedSummary,
+            },
+            {
+                id: "query-effectLayer",
+                description: "List effect layers, or query a specific effect layer by uniqueId.",
+                getEntities: (scene) => scene.effectLayers,
+                getUniqueId: (e) => e.uniqueId,
+                getSummary: NamedSummary,
+                serialize: (e) => e.serialize?.(),
+            },
+            {
+                id: "query-spriteManager",
+                description: "List sprite managers, or query a specific sprite manager by uniqueId.",
+                getEntities: (scene) => scene.spriteManagers,
+                getUniqueId: (e) => e.uniqueId,
+                getSummary: MinimalSummary,
+                serialize: (e) => e.serialize(false),
+            },
+            {
+                id: "query-sound",
+                description: "List sounds in the main sound track, or query a specific sound by uniqueId.",
+                getEntities: (scene) => scene.mainSoundTrack?.soundCollection ?? [],
+                getUniqueId: (e) => GetEntityId(e),
+                getSummary: (e) => ({ uniqueId: GetEntityId(e), name: e.name, className: e.getClassName() }),
+                serialize: (e) => e.serialize(),
+            },
+            {
+                id: "query-renderingPipeline",
+                description: "List rendering pipelines, or query a specific rendering pipeline by uniqueId.",
+                getEntities: (scene) => scene.postProcessRenderPipelineManager?.supportedPipelines ?? [],
+                getUniqueId: (e) => e.uniqueId,
+                getSummary: NamedSummary,
+            },
+        ];
+        const registrations = collections.map((col) => commandRegistry.addCommand(MakeQueryCommand(col, sceneContext)));
+        return {
+            dispose: () => {
+                for (const reg of registrations) {
+                    reg.dispose();
+                }
+            },
+        };
+    },
+};
+
+/**
+ * The service identity for the CLI connection status.
+ */
+const CliConnectionStatusIdentity = Symbol("CliConnectionStatus");
+
+/**
+ * Creates the service definition for the InspectableBridgeService.
+ * @param options The options for connecting to the bridge.
+ * @returns A service definition that produces an IInspectableCommandRegistry.
+ */
+function MakeInspectableBridgeServiceDefinition(options) {
+    return {
+        friendlyName: "Inspectable Bridge Service",
+        produces: [InspectableCommandRegistryIdentity, CliConnectionStatusIdentity],
+        factory: () => {
+            const commands = new Map();
+            let ws = null;
+            let reconnectTimer = null;
+            let disposed = false;
+            let connected = false;
+            const onConnectionStatusChanged = new Observable();
+            function setConnected(value) {
+                if (connected !== value) {
+                    connected = value;
+                    onConnectionStatusChanged.notifyObservers(value);
+                }
+            }
+            function sendToBridge(message) {
+                ws?.send(JSON.stringify(message));
+            }
+            function connect() {
+                if (disposed) {
+                    return;
+                }
+                try {
+                    ws = new WebSocket(`ws://127.0.0.1:${options.port}`);
+                }
+                catch {
+                    scheduleReconnect();
+                    return;
+                }
+                ws.onopen = () => {
+                    setConnected(true);
+                    sendToBridge({ type: "register", name: options.name });
+                };
+                ws.onmessage = (event) => {
+                    try {
+                        const message = JSON.parse(event.data);
+                        void handleMessage(message);
+                    }
+                    catch {
+                        Logger.Warn("InspectableBridgeService: Failed to parse message from bridge.");
+                    }
+                };
+                ws.onclose = () => {
+                    ws = null;
+                    setConnected(false);
+                    scheduleReconnect();
+                };
+                ws.onerror = () => {
+                    // onclose will fire after onerror, which handles reconnection.
+                };
+            }
+            function scheduleReconnect() {
+                if (disposed || reconnectTimer !== null) {
+                    return;
+                }
+                reconnectTimer = setTimeout(() => {
+                    reconnectTimer = null;
+                    connect();
+                }, 3000);
+            }
+            async function handleMessage(message) {
+                switch (message.type) {
+                    case "listCommands": {
+                        const commandList = Array.from(commands.values()).map((cmd) => ({
+                            id: cmd.id,
+                            description: cmd.description,
+                            args: cmd.args,
+                        }));
+                        sendToBridge({
+                            type: "commandListResponse",
+                            requestId: message.requestId,
+                            commands: commandList,
+                        });
+                        break;
+                    }
+                    case "execCommand": {
+                        const command = commands.get(message.commandId);
+                        if (!command) {
+                            sendToBridge({
+                                type: "commandResponse",
+                                requestId: message.requestId,
+                                error: `Unknown command: ${message.commandId}`,
+                            });
+                            break;
+                        }
+                        try {
+                            const result = await command.executeAsync(message.args);
+                            sendToBridge({
+                                type: "commandResponse",
+                                requestId: message.requestId,
+                                result,
+                            });
+                        }
+                        catch (error) {
+                            sendToBridge({
+                                type: "commandResponse",
+                                requestId: message.requestId,
+                                error: String(error),
+                            });
+                        }
+                        break;
+                    }
+                }
+            }
+            // Initiate connection.
+            connect();
+            const registry = {
+                addCommand(descriptor) {
+                    if (commands.has(descriptor.id)) {
+                        throw new Error(`Command '${descriptor.id}' is already registered.`);
+                    }
+                    commands.set(descriptor.id, descriptor);
+                    return {
+                        dispose: () => {
+                            commands.delete(descriptor.id);
+                        },
+                    };
+                },
+                get isConnected() {
+                    return connected;
+                },
+                onConnectionStatusChanged,
+                dispose: () => {
+                    disposed = true;
+                    if (reconnectTimer !== null) {
+                        clearTimeout(reconnectTimer);
+                        reconnectTimer = null;
+                    }
+                    commands.clear();
+                    setConnected(false);
+                    onConnectionStatusChanged.clear();
+                    if (ws) {
+                        ws.onclose = null;
+                        ws.close();
+                        ws = null;
+                    }
+                },
+            };
+            return registry;
+        },
+    };
+}
+
+/**
+ * Service that registers CLI commands for performance tracing using the PerformanceViewerCollector.
+ * start-perf-trace begins collecting data, stop-perf-trace stops and returns the collected data as JSON.
+ */
+const PerfTraceCommandServiceDefinition = {
+    friendlyName: "Perf Trace Command Service",
+    consumes: [InspectableCommandRegistryIdentity, SceneContextIdentity],
+    factory: (commandRegistry, sceneContext) => {
+        let perfCollector;
+        const startReg = commandRegistry.addCommand({
+            id: "start-perf-trace",
+            description: "Start collecting performance trace data.",
+            executeAsync: async () => {
+                const scene = sceneContext.currentScene;
+                if (!scene) {
+                    throw new Error("No active scene.");
+                }
+                if (perfCollector?.isStarted) {
+                    return "Performance trace is already running.";
+                }
+                perfCollector = scene.getPerfCollector();
+                perfCollector.stop();
+                perfCollector.clear(false);
+                perfCollector.addCollectionStrategies(...DefaultPerfStrategies);
+                perfCollector.start(true);
+                return "Performance trace started.";
+            },
+        });
+        const stopReg = commandRegistry.addCommand({
+            id: "stop-perf-trace",
+            description: "Stop collecting performance trace data and return the results as JSON.",
+            executeAsync: async () => {
+                if (!perfCollector || !perfCollector.isStarted) {
+                    throw new Error("Performance trace is not running. Run start-perf-trace first.");
+                }
+                perfCollector.stop();
+                const datasets = perfCollector.datasets;
+                const ids = datasets.ids;
+                const rawData = datasets.data.subarray(0, datasets.data.itemLength);
+                const sliceSize = ids.length + PerformanceViewerCollector.SliceDataOffset;
+                const samples = [];
+                for (let i = 0; i < rawData.length; i += sliceSize) {
+                    const timestamp = rawData[i];
+                    const sample = { timestamp };
+                    for (let j = 0; j < ids.length; j++) {
+                        sample[ids[j]] = rawData[i + PerformanceViewerCollector.SliceDataOffset + j];
+                    }
+                    samples.push(sample);
+                }
+                perfCollector.clear(false);
+                perfCollector = undefined;
+                return JSON.stringify({ strategies: ids, sampleCount: samples.length, samples }, null, 2);
+            },
+        });
+        return {
+            dispose: () => {
+                startReg.dispose();
+                stopReg.dispose();
+                if (perfCollector?.isStarted) {
+                    perfCollector.stop();
+                }
+                perfCollector = undefined;
+            },
+        };
+    },
+};
+
+/**
+ * Service that registers a CLI command for capturing a screenshot of the scene.
+ * Returns the image as a base64 data string, suitable for consumption by AI agents.
+ */
+const ScreenshotCommandServiceDefinition = {
+    friendlyName: "Screenshot Command Service",
+    consumes: [InspectableCommandRegistryIdentity, SceneContextIdentity],
+    factory: (commandRegistry, sceneContext) => {
+        const registration = commandRegistry.addCommand({
+            id: "take-screenshot",
+            description: "Capture a screenshot of the scene. Returns base64-encoded PNG data.",
+            args: [
+                {
+                    name: "cameraUniqueId",
+                    description: "The uniqueId of the camera to use. Defaults to the active camera.",
+                    required: false,
+                },
+                {
+                    name: "width",
+                    description: "Screenshot width in pixels. When set, uses custom size mode.",
+                    required: false,
+                },
+                {
+                    name: "height",
+                    description: "Screenshot height in pixels. When set, uses custom size mode.",
+                    required: false,
+                },
+                {
+                    name: "precision",
+                    description: "Resolution multiplier (e.g. 2 for double resolution). Defaults to 1.",
+                    required: false,
+                },
+            ],
+            executeAsync: async (args) => {
+                const scene = sceneContext.currentScene;
+                if (!scene) {
+                    throw new Error("No active scene.");
+                }
+                const engine = scene.getEngine();
+                // Resolve camera: explicit uniqueId, or active/frame-graph camera.
+                let camera;
+                if (args.cameraUniqueId) {
+                    const cameraId = parseInt(args.cameraUniqueId, 10);
+                    if (isNaN(cameraId)) {
+                        throw new Error("cameraUniqueId must be a number.");
+                    }
+                    camera = scene.cameras.find((c) => c.uniqueId === cameraId);
+                    if (!camera) {
+                        throw new Error(`No camera found with uniqueId ${cameraId}.`);
+                    }
+                }
+                else {
+                    camera = scene.frameGraph ? FrameGraphUtils.FindMainCamera(scene.frameGraph) : scene.activeCamera;
+                }
+                if (!camera) {
+                    throw new Error("No camera available for screenshot.");
+                }
+                const precision = args.precision !== undefined ? Number(args.precision) : 1;
+                if (!Number.isFinite(precision) || precision <= 0) {
+                    throw new Error("precision must be a finite number greater than 0.");
+                }
+                let width;
+                if (args.width !== undefined) {
+                    width = Number(args.width);
+                    if (!Number.isFinite(width) || width <= 0 || !Number.isInteger(width)) {
+                        throw new Error("width must be a finite positive integer.");
+                    }
+                }
+                let height;
+                if (args.height !== undefined) {
+                    height = Number(args.height);
+                    if (!Number.isFinite(height) || height <= 0 || !Number.isInteger(height)) {
+                        throw new Error("height must be a finite positive integer.");
+                    }
+                }
+                const screenshotSize = width !== undefined && height !== undefined ? { width, height, precision } : { precision };
+                // Omit fileName to get data URL back without triggering a download.
+                const dataUrl = await CreateScreenshotUsingRenderTargetAsync(engine, camera, screenshotSize, "image/png");
+                // Strip the data URI prefix to return raw base64, which is what AI agent APIs expect.
+                const commaIndex = dataUrl.indexOf(",");
+                return commaIndex !== -1 ? dataUrl.substring(commaIndex + 1) : dataUrl;
+            },
+        });
+        return {
+            dispose: () => {
+                registration.dispose();
+            },
+        };
+    },
+};
+
+/**
+ * Service that registers a CLI command for retrieving compiled shader code from a material.
+ */
+const ShaderCommandServiceDefinition = {
+    friendlyName: "Shader Command Service",
+    consumes: [InspectableCommandRegistryIdentity, SceneContextIdentity],
+    factory: (commandRegistry, sceneContext) => {
+        const registration = commandRegistry.addCommand({
+            id: "get-shader-code",
+            description: "Get the shader code for a material by uniqueId.",
+            args: [
+                {
+                    name: "uniqueId",
+                    description: "The uniqueId of the material.",
+                    required: true,
+                },
+                {
+                    name: "variant",
+                    description: "Which shader variant to return: compiled (default), raw, or beforeMigration.",
+                    required: false,
+                },
+            ],
+            executeAsync: async (args) => {
+                const scene = sceneContext.currentScene;
+                if (!scene) {
+                    throw new Error("No active scene.");
+                }
+                const id = parseInt(args.uniqueId, 10);
+                if (isNaN(id)) {
+                    throw new Error("uniqueId must be a number.");
+                }
+                const material = scene.materials.find((m) => m.uniqueId === id);
+                if (!material) {
+                    throw new Error(`No material found with uniqueId ${id}.`);
+                }
+                const effect = material.getEffect();
+                if (!effect) {
+                    throw new Error(`Material "${material.name}" has no effect. It may not have been rendered yet.`);
+                }
+                if (!effect.isReady()) {
+                    throw new Error(`Material "${material.name}" effect is not ready. Wait for it to be rendered.`);
+                }
+                const variant = args.variant ?? "compiled";
+                let vertexShader;
+                let fragmentShader;
+                switch (variant) {
+                    case "compiled":
+                        vertexShader = effect.vertexSourceCode;
+                        fragmentShader = effect.fragmentSourceCode;
+                        break;
+                    case "raw":
+                        vertexShader = effect.rawVertexSourceCode;
+                        fragmentShader = effect.rawFragmentSourceCode;
+                        break;
+                    case "beforeMigration":
+                        vertexShader = effect.vertexSourceCodeBeforeMigration;
+                        fragmentShader = effect.fragmentSourceCodeBeforeMigration;
+                        break;
+                    default:
+                        throw new Error(`Unknown variant "${variant}". Use: compiled, raw, or beforeMigration.`);
+                }
+                return JSON.stringify({ vertexShader, fragmentShader }, null, 2);
+            },
+        });
+        return {
+            dispose: () => {
+                registration.dispose();
+            },
+        };
+    },
+};
+
+/**
+ * Service that registers CLI commands for querying scene and engine statistics.
+ */
+const StatsCommandServiceDefinition = {
+    friendlyName: "Stats Command Service",
+    consumes: [InspectableCommandRegistryIdentity, SceneContextIdentity],
+    factory: (commandRegistry, sceneContext) => {
+        let sceneInstrumentation;
+        let engineInstrumentation;
+        function disposeInstrumentation() {
+            sceneInstrumentation?.dispose();
+            sceneInstrumentation = undefined;
+            engineInstrumentation?.dispose();
+            engineInstrumentation = undefined;
+        }
+        const startPerfReg = commandRegistry.addCommand({
+            id: "start-perf-instrumentation",
+            description: "Start scene and engine performance instrumentation for frame stats collection.",
+            executeAsync: async () => {
+                const scene = sceneContext.currentScene;
+                if (!scene) {
+                    throw new Error("No active scene.");
+                }
+                // Dispose any stale instrumentation (e.g. scene changed).
+                if (sceneInstrumentation && sceneInstrumentation.scene !== scene) {
+                    disposeInstrumentation();
+                }
+                if (sceneInstrumentation) {
+                    return "Performance instrumentation is already running.";
+                }
+                sceneInstrumentation = new SceneInstrumentation(scene);
+                sceneInstrumentation.captureActiveMeshesEvaluationTime = true;
+                sceneInstrumentation.captureRenderTargetsRenderTime = true;
+                sceneInstrumentation.captureFrameTime = true;
+                sceneInstrumentation.captureRenderTime = true;
+                sceneInstrumentation.captureInterFrameTime = true;
+                sceneInstrumentation.captureParticlesRenderTime = true;
+                sceneInstrumentation.captureSpritesRenderTime = true;
+                sceneInstrumentation.capturePhysicsTime = true;
+                sceneInstrumentation.captureAnimationsTime = true;
+                engineInstrumentation = new EngineInstrumentation(scene.getEngine());
+                engineInstrumentation.captureGPUFrameTime = true;
+                return "Performance instrumentation started.";
+            },
+        });
+        const stopPerfReg = commandRegistry.addCommand({
+            id: "stop-perf-instrumentation",
+            description: "Stop scene and engine performance instrumentation.",
+            executeAsync: async () => {
+                if (!sceneInstrumentation && !engineInstrumentation) {
+                    return "Performance instrumentation is not running.";
+                }
+                disposeInstrumentation();
+                return "Performance instrumentation stopped.";
+            },
+        });
+        const countStatsReg = commandRegistry.addCommand({
+            id: "get-count-stats",
+            description: "Get scene entity counts (meshes, lights, vertices, draw calls, etc.).",
+            executeAsync: async () => {
+                const scene = sceneContext.currentScene;
+                if (!scene) {
+                    throw new Error("No active scene.");
+                }
+                let activeMeshesCount = scene.getActiveMeshes().length;
+                for (const objectRenderer of scene.objectRenderers) {
+                    activeMeshesCount += objectRenderer.getActiveMeshes().length;
+                }
+                const activeIndices = scene.getActiveIndices();
+                return JSON.stringify({
+                    totalMeshes: scene.meshes.length,
+                    activeMeshes: activeMeshesCount,
+                    activeIndices,
+                    activeFaces: Math.floor(activeIndices / 3),
+                    activeBones: scene.getActiveBones(),
+                    activeParticles: scene.getActiveParticles(),
+                    drawCalls: scene.getEngine()._drawCalls.current,
+                    totalLights: scene.lights.length,
+                    totalVertices: scene.getTotalVertices(),
+                    totalMaterials: scene.materials.length,
+                    totalTextures: scene.textures.length,
+                }, null, 2);
+            },
+        });
+        const frameStatsReg = commandRegistry.addCommand({
+            id: "get-frame-stats",
+            description: "Get frame timing statistics. Requires start-perf-instrumentation to be run first.",
+            executeAsync: async () => {
+                if (!sceneInstrumentation || !engineInstrumentation) {
+                    throw new Error("Performance instrumentation is not running. Run start-perf-instrumentation first.");
+                }
+                const si = sceneInstrumentation;
+                const ei = engineInstrumentation;
+                const round = (v) => Math.round(v * 100) / 100;
+                return JSON.stringify({
+                    absoluteFPS: Math.floor(1000.0 / si.frameTimeCounter.lastSecAverage),
+                    meshesSelectionMs: round(si.activeMeshesEvaluationTimeCounter.lastSecAverage),
+                    renderTargetsMs: round(si.renderTargetsRenderTimeCounter.lastSecAverage),
+                    particlesMs: round(si.particlesRenderTimeCounter.lastSecAverage),
+                    spritesMs: round(si.spritesRenderTimeCounter.lastSecAverage),
+                    animationsMs: round(si.animationsTimeCounter.lastSecAverage),
+                    physicsMs: round(si.physicsTimeCounter.lastSecAverage),
+                    renderMs: round(si.renderTimeCounter.lastSecAverage),
+                    frameMs: round(si.frameTimeCounter.lastSecAverage),
+                    interFrameMs: round(si.interFrameTimeCounter.lastSecAverage),
+                    gpuFrameMs: round(ei.gpuFrameTimeCounter.lastSecAverage * 0.000001),
+                    gpuFrameAverageMs: round(ei.gpuFrameTimeCounter.average * 0.000001),
+                }, null, 2);
+            },
+        });
+        const systemStatsReg = commandRegistry.addCommand({
+            id: "get-system-stats",
+            description: "Get engine capabilities and system information.",
+            executeAsync: async () => {
+                const scene = sceneContext.currentScene;
+                if (!scene) {
+                    throw new Error("No active scene.");
+                }
+                const engine = scene.getEngine();
+                const caps = engine.getCaps();
+                return JSON.stringify({
+                    resolution: `${engine.getRenderWidth()} x ${engine.getRenderHeight()}`,
+                    hardwareScalingLevel: engine.getHardwareScalingLevel(),
+                    engine: engine.description,
+                    driver: engine.extractDriverInfo(),
+                    capabilities: {
+                        stdDerivatives: caps.standardDerivatives,
+                        compressedTextures: caps.s3tc !== undefined,
+                        hardwareInstances: caps.instancedArrays,
+                        textureFloat: caps.textureFloat,
+                        textureHalfFloat: caps.textureHalfFloat,
+                        renderToTextureFloat: caps.textureFloatRender,
+                        renderToTextureHalfFloat: caps.textureHalfFloatRender,
+                        indices32Bit: caps.uintIndices,
+                        fragmentDepth: caps.fragmentDepthSupported,
+                        highPrecisionShaders: caps.highPrecisionShaderSupported,
+                        drawBuffers: caps.drawBuffersExtension,
+                        vertexArrayObject: caps.vertexArrayObject,
+                        timerQuery: caps.timerQuery !== undefined,
+                        stencil: engine.isStencilEnable,
+                        parallelShaderCompilation: caps.parallelShaderCompile != null,
+                        maxTexturesUnits: caps.maxTexturesImageUnits,
+                        maxTexturesSize: caps.maxTextureSize,
+                        maxAnisotropy: caps.maxAnisotropy,
+                    },
+                }, null, 2);
+            },
+        });
+        return {
+            dispose: () => {
+                startPerfReg.dispose();
+                stopPerfReg.dispose();
+                countStatsReg.dispose();
+                frameStatsReg.dispose();
+                systemStatsReg.dispose();
+                disposeInstrumentation();
+            },
+        };
+    },
+};
+
+const DefaultPort = 4400;
+const InspectableStates = new Map();
+/**
+ * @internal
+ * Internal implementation that returns an {@link InternalInspectableToken} with access
+ * to the underlying ServiceContainer. Used by ShowInspector to set up a parent container relationship.
+ */
+function _StartInspectable(scene, options) {
+    let state = InspectableStates.get(scene);
+    if (!state) {
+        const port = options?.port ?? DefaultPort;
+        const name = options?.name ?? (typeof document !== "undefined" ? document.title : "Babylon.js Scene");
+        const serviceContainer = new ServiceContainer("InspectableContainer");
+        const fullyDispose = () => {
+            InspectableStates.delete(scene);
+            serviceContainer.dispose();
+            sceneDisposeObserver.remove();
+        };
+        // Initialize the service container asynchronously.
+        const sceneContextServiceDefinition = {
+            friendlyName: "Inspectable Scene Context",
+            produces: [SceneContextIdentity],
+            factory: () => ({
+                currentScene: scene,
+                currentSceneObservable: new Observable(),
+            }),
+        };
+        const readyPromise = (async () => {
+            await serviceContainer.addServicesAsync(sceneContextServiceDefinition, MakeInspectableBridgeServiceDefinition({
+                port,
+                name,
+            }), EntityQueryServiceDefinition, ScreenshotCommandServiceDefinition, ShaderCommandServiceDefinition, StatsCommandServiceDefinition, PerfTraceCommandServiceDefinition);
+        })();
+        state = {
+            refCount: 0,
+            serviceContainer,
+            sceneDisposeObserver: { remove: () => { } },
+            fullyDispose,
+            readyPromise,
+        };
+        const capturedState = state;
+        InspectableStates.set(scene, state);
+        // Auto-dispose when the scene is disposed.
+        const sceneDisposeObserver = scene.onDisposeObservable.addOnce(() => {
+            capturedState.refCount = 0;
+            capturedState.fullyDispose();
+        });
+        state.sceneDisposeObserver = sceneDisposeObserver;
+        // Handle initialization failure (guard against already-disposed state).
+        void (async () => {
+            try {
+                await readyPromise;
+            }
+            catch (error) {
+                if (InspectableStates.has(scene)) {
+                    Logger.Error(`Failed to initialize Inspectable: ${error}`);
+                    capturedState.refCount = 0;
+                    capturedState.fullyDispose();
+                }
+            }
+        })();
+    }
+    state.refCount++;
+    const { serviceContainer } = state;
+    const owningState = state;
+    // If additional service definitions were provided, add them in a separate call
+    // so they can be independently removed when this token is disposed.
+    let extraServicesDisposable;
+    const extraAbortController = new AbortController();
+    const extraServiceDefinitions = options?.serviceDefinitions;
+    if (extraServiceDefinitions && extraServiceDefinitions.length > 0) {
+        // Wait for the built-in services to be ready, then add the extra ones.
+        void (async () => {
+            try {
+                await owningState.readyPromise;
+                extraServicesDisposable = await serviceContainer.addServicesAsync(...extraServiceDefinitions, extraAbortController.signal);
+            }
+            catch (error) {
+                if (!extraAbortController.signal.aborted) {
+                    Logger.Error(`Failed to add extra inspectable services: ${error}`);
+                }
+            }
+        })();
+    }
+    let disposed = false;
+    const token = {
+        get isDisposed() {
+            return disposed;
+        },
+        get serviceContainer() {
+            return serviceContainer;
+        },
+        dispose() {
+            if (disposed) {
+                return;
+            }
+            disposed = true;
+            // Abort any in-flight extra service initialization and remove already-added extra services.
+            extraAbortController.abort();
+            extraServicesDisposable?.dispose();
+            owningState.refCount--;
+            if (owningState.refCount <= 0) {
+                owningState.fullyDispose();
+            }
+        },
+    };
+    return token;
+}
 /**
- * Well-known default built in extensions for the Inspector.
+ * Makes a scene inspectable by connecting it to the Inspector CLI bridge.
+ * This creates a headless {@link ServiceContainer} (no UI) and registers the
+ * {@link InspectableBridgeService} which opens a WebSocket to the bridge and
+ * exposes a command registry for CLI-invocable commands.
+ *
+ * Multiple callers may call this for the same scene. Each returned token is
+ * ref-counted — the underlying connection is only torn down when all tokens
+ * have been disposed. Additional {@link InspectableOptions.serviceDefinitions}
+ * passed by each caller are added to the shared container and removed when
+ * that caller's token is disposed.
+ *
+ * @param scene The scene to make inspectable.
+ * @param options Optional configuration.
+ * @returns An {@link InspectableToken} that can be disposed to disconnect.
+ * @experimental
  */
-const DefaultInspectorExtensionFeed = new BuiltInsExtensionFeed("Inspector", [
-    {
-        name: "Quick Creation Tools (Preview)",
-        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-BoqrJqoM.js'),
-    },
-    {
-        name: "Reflector",
-        description: "Connects to the Reflector Bridge for real-time scene synchronization with the Babylon.js Sandbox.",
-        keywords: ["reflector", "bridge", "sync", "sandbox", "tools"],
-        ...BabylonWebResources,
-        getExtensionModuleAsync: async () => await import('./reflectorService-CFTva2GG.js'),
-    },
-]);
+function StartInspectable(scene, options) {
+    return _StartInspectable(scene, options);
+}
 
 /**
  * Reusable component which renders a color property line containing a label, colorPicker popout, and expandable RGBA values
@@ -8735,6 +9684,39 @@ const LegacyInspectableObjectPropertiesServiceDefinition = {
     },
 };
 
+const CliConnectionStatusServiceDefinition = {
+    friendlyName: "CLI Connection Status",
+    consumes: [ShellServiceIdentity, CliConnectionStatusIdentity],
+    factory: (shellService, cliConnectionStatus) => {
+        shellService.addToolbarItem({
+            key: "CLI Connection Status",
+            verticalLocation: "bottom",
+            horizontalLocation: "right",
+            teachingMoment: false,
+            order: 0 /* DefaultToolbarItemOrder.CliStatus */,
+            component: () => {
+                const isConnected = useObservableState(() => cliConnectionStatus.isConnected, cliConnectionStatus.onConnectionStatusChanged);
+                const { showToast } = useToast();
+                const isFirstRender = useRef(true);
+                useEffect(() => {
+                    if (isFirstRender.current) {
+                        isFirstRender.current = false;
+                        return;
+                    }
+                    if (isConnected) {
+                        showToast("Inspector bridge connected.", { intent: "success" });
+                    }
+                    else {
+                        showToast("Inspector bridge disconnected.", { intent: "warning" });
+                    }
+                }, [isConnected, showToast]);
+                // Using raw Fluent Button to pass color directly to the icon.
+                return (jsx(Tooltip, { content: isConnected ? "Connected to Inspector CLI Bridge" : "Disconnected from Inspector CLI Bridge", children: jsx(Button$1, { appearance: "subtle", icon: isConnected ? (jsx(PlugConnectedRegular, { color: tokens.colorPaletteGreenForeground2 })) : (jsx(PlugDisconnectedRegular, { color: tokens.colorPaletteRedForeground2 })), onClick: () => window.open("https://www.npmjs.com/package/@babylonjs/inspector", "_blank") }) }));
+            },
+        });
+    },
+};
+
 const MeshIcon = createFluentIcon("Mesh", "1em", '<g transform="scale(1.25)"><path d="M14.03,3.54l-5.11-2.07c-.61-.25-1.27-.25-1.88,0L1.93,3.54c-.57.23-.94.78-.94,1.39v6.15c0,.61.37,1.16.94,1.39l5.11,2.07c.3.12.62.18.94.18s.64-.06.94-.18l5.12-2.07c.57-.23.94-.78.94-1.39v-6.15c0-.61-.37-1.16-.94-1.39ZM13.97,7.71l-2.11.86v-2.71l2.11-.86v2.71ZM1.99,5l2.11.86v2.71l-2.11-.86v-2.71ZM11.35,4.98l-2.04-.83,1.78-.72,2.04.83-1.78.72ZM10.02,5.52l-2.04.83-2.04-.83,2.04-.83,2.04.83ZM4.6,4.98l-1.78-.72,2.04-.83,1.78.72-2.04.83ZM5.1,6.26l2.38.96v2.71l-2.38-.96v-2.71ZM8.48,7.22l2.38-.96v2.71l-2.38.96v-2.71ZM7.41,2.39c.18-.07.37-.11.56-.11s.38.04.56.11l1.22.49-1.78.72-1.79-.72,1.22-.49ZM1.99,11.07v-2.29l2.11.86v2.62l-1.8-.73c-.19-.08-.31-.26-.31-.46ZM5.1,12.67v-2.62l2.38.96v2.61s-.04,0-.06-.01l-2.31-.94ZM8.54,13.61s-.04,0-.06.01v-2.61l2.38-.96v2.62l-2.31.94ZM13.66,11.54l-1.8.73v-2.62l2.11-.86v2.29c0,.2-.12.39-.31.46Z"/></g>');
 const TranslateIcon = createFluentIcon("Translate", "1em", '<g transform="scale(0.833)"><path d="M20.16,12.98l-2.75-2.75c-.29-.29-.77-.29-1.06,0-.29.29-.29.77,0,1.06l1.47,1.47h-6.69v-6.69l1.47,1.47c.29.29.77.29,1.06,0,.29-.29.29-.77,0-1.06l-2.75-2.75c-.14-.14-.33-.22-.53-.22s-.39.08-.53.22l-2.75,2.75c-.29.29-.29.77,0,1.06.29.29.77.29,1.06,0l1.47-1.47v7.13l-3.52,3.52v-2.08c0-.41-.34-.75-.75-.75s-.75.34-.75.75v3.89c0,.2.08.39.22.53.14.14.33.22.53.22h3.89c.41,0,.75-.34.75-.75s-.34-.75-.75-.75h-2.08s3.52-3.52,3.52-3.52h7.13l-1.47,1.47c-.29.29-.29.77,0,1.06s.77.29,1.06,0l2.75-2.75c.14-.14.22-.33.22-.53s-.08-.39-.22-.53Z" /></g>');
 const MaterialIcon = createFluentIcon("Material", "1em", '<g transform="scale(1.25)"><path d="M14.74,6.3c-.09-.36-.38-.64-.75-.72-.04-.09-.08-.18-.12-.27.1-.15.16-.32.16-.51,0-.18-.05-.34-.13-.48-1.23-1.97-3.41-3.28-5.9-3.28C4.16,1.04,1.04,4.16,1.04,7.99c0,.39.23.72.57.88.02.12.03.25.06.37-.18.18-.3.42-.3.7,0,.11.02.21.06.31.94,2.74,3.53,4.71,6.58,4.71,3.84,0,6.96-3.12,6.96-6.96,0-.59-.08-1.16-.22-1.7ZM2.07,8.58c-.02-.19-.03-.39-.03-.58,0-3.29,2.67-5.96,5.96-5.96,2.23,0,4.17,1.23,5.2,3.05.05.18-.07.45-.3.75-.57-.73-1.45-1.21-2.45-1.21-1.72,0-3.12,1.4-3.12,3.11,0,.33.07.65.16.95-3.05.82-5.17.52-5.42-.11ZM12.56,7.75c0,1.17-.95,2.11-2.11,2.11s-2.12-.95-2.12-2.11.95-2.11,2.12-2.11,2.11.95,2.11,2.11ZM8,13.96c-2.6,0-4.81-1.68-5.62-4.01.5.16,1.11.24,1.79.24,1.15,0,2.49-.22,3.79-.59.57.76,1.47,1.26,2.49,1.26,1.72,0,3.11-1.4,3.11-3.11,0-.34-.07-.65-.17-.96.13-.13.24-.26.34-.39.14.51.22,1.04.22,1.6,0,3.29-2.67,5.96-5.96,5.96Z"/></g>');
@@ -14547,14 +15529,42 @@ const NormalMapProperties = (props) => {
     return (jsx(Fragment, { children: IsMaterialWithPublicNormalMaps(material) ? (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Invert X Axis", target: material, propertyKey: "invertNormalMapX" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Invert Y Axis", target: material, propertyKey: "invertNormalMapY" })] })) : (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Invert X Axis", target: material, propertyKey: "_invertNormalMapX" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Invert Y Axis", target: material, propertyKey: "_invertNormalMapY" })] })) }));
 };
 
-// TODO: ryamtrem / gehalper This function is temporal until there is a line control to handle texture links (similar to the old TextureLinkLineComponent)
-const UpdateTexture = (file, material, textureSetter) => {
-    ReadFile(file, (data) => {
-        const blob = new Blob([data], { type: "octet/stream" });
-        const url = URL.createObjectURL(blob);
-        textureSetter(new Texture(url, material.getScene(), false, false));
-    }, undefined, true);
+const useCheckboxStyles = makeStyles({
+    indicator: {
+        margin: 0,
+    },
+});
+/**
+ * This is a primitive fluent checkbox that can both read and write checked state
+ * @param props
+ * @returns Checkbox component
+ */
+const Checkbox = (props) => {
+    Checkbox.displayName = "Checkbox";
+    const [checked, setChecked] = useState(() => props.value ?? false);
+    const classes = useCheckboxStyles();
+    useEffect(() => {
+        if (props.value != undefined) {
+            setChecked(props.value); // Update local state when props.checked changes
+        }
+    }, [props.value]);
+    const onChange = (ev, _) => {
+        props.onChange(ev.target.checked);
+        setChecked(ev.target.checked);
+    };
+    return jsx(Checkbox$1, { checked: checked, onChange: onChange, indicator: { className: classes.indicator } });
+};
+
+/**
+ * Wraps a checkbox in a property line
+ * @param props - PropertyLineProps and CheckboxProps
+ * @returns property-line wrapped checkbox
+ */
+const CheckboxPropertyLine = (props) => {
+    CheckboxPropertyLine.displayName = "CheckboxPropertyLine";
+    return (jsx(PropertyLine, { ...props, children: jsx(Checkbox, { ...props }) }));
 };
+
 /**
  * Displays the base layer properties of an OpenPBR material.
  * @param props - The required properties
@@ -14562,23 +15572,7 @@ const UpdateTexture = (file, material, textureSetter) => {
  */
 const OpenPBRMaterialBaseProperties = (props) => {
     const { material } = props;
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Base Weight", target: material, propertyKey: "baseWeight", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Base Weight", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.baseWeightTexture = texture));
-                    }
-                } }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Base Color", target: material, propertyKey: "baseColor", isLinearMode: true }), jsx(FileUploadLine, { label: "Base Color", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.baseColorTexture = texture));
-                    }
-                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Base Metalness", target: material, propertyKey: "baseMetalness", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Base Metalness", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.baseMetalnessTexture = texture));
-                    }
-                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Base Diffuse Roughness", target: material, propertyKey: "baseDiffuseRoughness", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Base Diffuse Roughness", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.baseDiffuseRoughnessTexture = texture));
-                    }
-                } })] }));
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Base Weight", target: material, propertyKey: "baseWeight", min: 0, max: 1, step: 0.01, description: "Controls how strong or visible the base aspect appears.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Base Weight", target: material, propertyKey: "baseWeightTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Base Color", target: material, propertyKey: "baseColor", isLinearMode: true, description: "Sets the primary surface color of the material.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Base Color", target: material, propertyKey: "baseColorTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Base Metalness", target: material, propertyKey: "baseMetalness", min: 0, max: 1, step: 0.01, description: "Controls whether the material behaves as metal or non-metal. The parameter supersedes transmission_weight and subsurface_weight.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Base Metalness", target: material, propertyKey: "baseMetalnessTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Base Diffuse Roughness", target: material, propertyKey: "baseDiffuseRoughness", min: 0, max: 1, step: 0.01, description: "Softens the surface's base appearance. Higher values create matte or porous looks. Lower values are smoother.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Base Diffuse Roughness", target: material, propertyKey: "baseDiffuseRoughnessTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Ambient Occlusion", target: material, propertyKey: "ambientOcclusionTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 })] }));
 };
 /**
  * Displays the specular layer properties of an OpenPBR material.
@@ -14587,47 +15581,15 @@ const OpenPBRMaterialBaseProperties = (props) => {
  */
 const OpenPBRMaterialSpecularProperties = (props) => {
     const { material } = props;
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Specular Weight", target: material, propertyKey: "specularWeight", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Specular Weight", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.specularWeightTexture = texture));
-                    }
-                } }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Specular Color", target: material, propertyKey: "specularColor", isLinearMode: true }), jsx(FileUploadLine, { label: "Specular Color", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.specularColorTexture = texture));
-                    }
-                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Specular Roughness", target: material, propertyKey: "specularRoughness", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Specular Roughness", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.specularRoughnessTexture = texture));
-                    }
-                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Specular Roughness Anisotropy", target: material, propertyKey: "specularRoughnessAnisotropy", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Specular Roughness Anisotropy", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.specularRoughnessAnisotropyTexture = texture));
-                    }
-                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Specular IOR", target: material, propertyKey: "specularIor", min: 1, max: 3, step: 0.01 })] }));
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Specular Weight", target: material, propertyKey: "specularWeight", min: 0, max: 1, step: 0.01, description: "Controls how strong the reflections appear.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Specular Weight", target: material, propertyKey: "specularWeightTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Specular Color", target: material, propertyKey: "specularColor", isLinearMode: true, description: "Tints the color of reflections.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Specular Color", target: material, propertyKey: "specularColorTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Specular Roughness", target: material, propertyKey: "specularRoughness", min: 0, max: 1, step: 0.01, description: "Controls how sharp or blurry reflections are.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Specular Roughness", target: material, propertyKey: "specularRoughnessTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Specular Roughness Anisotropy", target: material, propertyKey: "specularRoughnessAnisotropy", min: 0, max: 1, step: 0.01, description: "Stretches reflections in one direction for brushed or streaked looks. Requires specular_roughness > 0.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/microfacetmodel" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Specular Roughness Anisotropy", target: material, propertyKey: "specularRoughnessAnisotropyTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Specular IOR", target: material, propertyKey: "specularIor", min: 1, max: 3, step: 0.01, description: "Index of refraction is a physical value controlling the reflective intensity and refraction. The parameter has no effect on metals.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate" })] }));
 };
 const OpenPBRMaterialTransmissionProperties = (props) => {
     const { material } = props;
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Transmission Weight", target: material, propertyKey: "transmissionWeight", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Transmission Weight", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.transmissionWeightTexture = texture));
-                    }
-                } }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Transmission Color", target: material, propertyKey: "transmissionColor", isLinearMode: true }), jsx(FileUploadLine, { label: "Transmission Color", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.transmissionColorTexture = texture));
-                    }
-                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Transmission Depth", target: material, propertyKey: "transmissionDepth", min: 0, step: 0.01 }), jsx(FileUploadLine, { label: "Transmission Depth", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.transmissionDepthTexture = texture));
-                    }
-                } }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Transmission Scatter", target: material, propertyKey: "transmissionScatter", isLinearMode: true }), jsx(FileUploadLine, { label: "Transmission Scatter", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.transmissionScatterTexture = texture));
-                    }
-                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Transmission Scatter Anisotropy", target: material, propertyKey: "transmissionScatterAnisotropy", min: -1, max: 1, step: 0.01 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Transmission Dispersion Abbe Number", target: material, propertyKey: "transmissionDispersionAbbeNumber", min: 1, max: 100, step: 1 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Transmission Dispersion Scale", target: material, propertyKey: "transmissionDispersionScale", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Transmission Dispersion Scale", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.transmissionDispersionScaleTexture = texture));
-                    }
-                } })] }));
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Transmission Weight", target: material, propertyKey: "transmissionWeight", min: 0, max: 1, step: 0.01, description: "Controls the presence of the transparency effect. The parameter is superseded by base_metalness.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate/translucentbase" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Transmission Weight", target: material, propertyKey: "transmissionWeightTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Transmission Color", target: material, propertyKey: "transmissionColor", isLinearMode: true, description: "Tints light passing through the material. Works with transmission_depth for realistic thickness-based coloring.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate/translucentbase" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Transmission Color", target: material, propertyKey: "transmissionColorTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Transmission Depth (cm)", target: material, propertyKey: "transmissionDepth", min: 0, max: 5, step: 0.001, convertTo: (value) => value * 100, convertFrom: (value) => value / 100, description: "Controls how quickly light is absorbed with thickness. Distance is in scene units.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate/translucentbase" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Transmission Depth", target: material, propertyKey: "transmissionDepthTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Transmission Scatter", target: material, propertyKey: "transmissionScatter", isLinearMode: true, description: "Adds internal cloudiness to create materials like juice, honey, etc. Requires transmission_depth > 0.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate/translucentbase" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Transmission Scatter", target: material, propertyKey: "transmissionScatterTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Transmission Scatter Anisotropy", target: material, propertyKey: "transmissionScatterAnisotropy", min: -1, max: 1, step: 0.01, description: "Shifts scattering forward/backward for clearer or hazier appearance depending on viewing angle.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate/translucentbase" }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Transmission Dispersion Abbe Number", target: material, propertyKey: "transmissionDispersionAbbeNumber", min: 1, max: 100, step: 1, description: "Physical value for the rainbow color separation in refraction.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate/translucentbase" }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Transmission Dispersion Scale", target: material, propertyKey: "transmissionDispersionScale", min: 0, max: 1, step: 0.01, description: "Strength of rainbow color separation in refraction.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate/translucentbase" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Transmission Dispersion Scale", target: material, propertyKey: "transmissionDispersionScaleTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 })] }));
+};
+const OpenPBRMaterialSubsurfaceProperties = (props) => {
+    const { material } = props;
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Subsurface Weight", target: material, propertyKey: "subsurfaceWeight", min: 0, max: 1, step: 0.01, description: "Controls the presence of the subsurface effect. The parameter is superseded by base_metalness and transmission_weight.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate/subsurface" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Subsurface Weight", target: material, propertyKey: "subsurfaceWeightTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Subsurface Color", target: material, propertyKey: "subsurfaceColor", isLinearMode: true, description: "Colors the light that scatters under the surface.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate/subsurface" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Subsurface Color", target: material, propertyKey: "subsurfaceColorTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Subsurface Radius (cm)", target: material, propertyKey: "subsurfaceRadius", min: 0, max: 4, step: 0.001, convertTo: (value) => value * 100, convertFrom: (value) => value / 100, description: "Controls how soft and spread-out the subsurface look appears.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate/subsurface" }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Subsurface Radius Scale", target: material, propertyKey: "subsurfaceRadiusScale", isLinearMode: true, description: "Tints thin areas with light shining through, like warm glow on ears or leaves.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate/subsurface" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Subsurface Radius Scale", target: material, propertyKey: "subsurfaceRadiusScaleTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Subsurface Scatter Anisotropy", target: material, propertyKey: "subsurfaceScatterAnisotropy", min: -1, max: 1, step: 0.01, description: "Shifts scattering forward/backward for a softer glow or a sharper one.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate/subsurface" })] }));
 };
 /**
  * Displays the coat layer properties of an OpenPBR material.
@@ -14636,27 +15598,7 @@ const OpenPBRMaterialTransmissionProperties = (props) => {
  */
 const OpenPBRMaterialCoatProperties = (props) => {
     const { material } = props;
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Coat Weight", target: material, propertyKey: "coatWeight", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Coat Weight", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.coatWeightTexture = texture));
-                    }
-                } }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Coat Color", target: material, propertyKey: "coatColor", isLinearMode: true }), jsx(FileUploadLine, { label: "Coat Color", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.coatColorTexture = texture));
-                    }
-                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Coat Roughness", target: material, propertyKey: "coatRoughness", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Coat Roughness", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.coatRoughnessTexture = texture));
-                    }
-                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Coat Roughness Anisotropy", target: material, propertyKey: "coatRoughnessAnisotropy", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Coat Roughness Anisotropy", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.coatRoughnessAnisotropyTexture = texture));
-                    }
-                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Coat IOR", target: material, propertyKey: "coatIor", min: 1, max: 3, step: 0.01 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Coat Darkening", target: material, propertyKey: "coatDarkening", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Coat Darkening", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.coatDarkeningTexture = texture));
-                    }
-                } })] }));
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Coat Weight", target: material, propertyKey: "coatWeight", min: 0, max: 1, step: 0.01, description: "Controls the presence of the coat.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/coat" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Coat Weight", target: material, propertyKey: "coatWeightTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Coat Color", target: material, propertyKey: "coatColor", isLinearMode: true, description: "Tints the coat, for tinted varnish or paint.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/coat" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Coat Color", target: material, propertyKey: "coatColorTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Coat Roughness", target: material, propertyKey: "coatRoughness", min: 0, max: 1, step: 0.01, description: "Controls how sharp or blurry the coat reflections appear.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/coat/roughening" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Coat Roughness", target: material, propertyKey: "coatRoughnessTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Coat Roughness Anisotropy", target: material, propertyKey: "coatRoughnessAnisotropy", min: 0, max: 1, step: 0.01, description: "Stretches coat reflections in one direction for brushed or streaked looks. Requires coat_roughness > 0.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/coat" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Coat Roughness Anisotropy", target: material, propertyKey: "coatRoughnessAnisotropyTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Coat IOR", target: material, propertyKey: "coatIor", min: 1, max: 3, step: 0.01, description: "Index of refraction is a physical value controlling the reflective intensity of the coat.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/coat" }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Coat Darkening", target: material, propertyKey: "coatDarkening", min: 0, max: 1, step: 0.01, description: "Darkens the base under the coat, similar to how real varnish deepens color.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/coat/darkening" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Coat Darkening", target: material, propertyKey: "coatDarkeningTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 })] }));
 };
 /**
  * Displays the fuzz layer properties of an OpenPBR material.
@@ -14665,19 +15607,7 @@ const OpenPBRMaterialCoatProperties = (props) => {
  */
 const OpenPBRMaterialFuzzProperties = (props) => {
     const { material } = props;
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Fuzz Weight", target: material, propertyKey: "fuzzWeight", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Fuzz Weight", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.fuzzWeightTexture = texture));
-                    }
-                } }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Fuzz Color", target: material, propertyKey: "fuzzColor", isLinearMode: true }), jsx(FileUploadLine, { label: "Fuzz Color", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.fuzzColorTexture = texture));
-                    }
-                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Fuzz Roughness", target: material, propertyKey: "fuzzRoughness", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Fuzz Roughness", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.fuzzRoughnessTexture = texture));
-                    }
-                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Number of Samples", target: material, propertyKey: "fuzzSampleNumber", min: 4, max: 64, step: 1 })] }));
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Fuzz Weight", target: material, propertyKey: "fuzzWeight", min: 0, max: 1, step: 0.01, description: "Controls the presence of the fuzz.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/fuzz" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Fuzz Weight", target: material, propertyKey: "fuzzWeightTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Fuzz Color", target: material, propertyKey: "fuzzColor", isLinearMode: true, description: "Controls the color of the fuzz.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/fuzz" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Fuzz Color", target: material, propertyKey: "fuzzColorTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Fuzz Roughness", target: material, propertyKey: "fuzzRoughness", min: 0, max: 1, step: 0.01, description: "Controls the roughness of the fuzz.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/fuzz" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Fuzz Roughness", target: material, propertyKey: "fuzzRoughnessTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Number of Samples", target: material, propertyKey: "fuzzSampleNumber", min: 4, max: 64, step: 1 })] }));
 };
 /**
  * Displays the emission properties of an OpenPBR material.
@@ -14686,11 +15616,7 @@ const OpenPBRMaterialFuzzProperties = (props) => {
  */
 const OpenPBRMaterialEmissionProperties = (props) => {
     const { material } = props;
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: Color3PropertyLine, label: "Emission Color", target: material, propertyKey: "emissionColor", isLinearMode: true }), jsx(FileUploadLine, { label: "Emission Color", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.emissionColorTexture = texture));
-                    }
-                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Emission Luminance", target: material, propertyKey: "emissionLuminance", min: 0, max: 10, step: 0.01 })] }));
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: Color3PropertyLine, label: "Emission Color", target: material, propertyKey: "emissionColor", isLinearMode: true, description: "Controls the color of the glow.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/emission" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Emission Color", target: material, propertyKey: "emissionColorTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Emission Luminance", target: material, propertyKey: "emissionLuminance", min: 0, max: 10, step: 0.01, description: "Controls how bright the glow is.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/emission" })] }));
 };
 /**
  * Displays the thin film properties of an OpenPBR material.
@@ -14699,15 +15625,7 @@ const OpenPBRMaterialEmissionProperties = (props) => {
  */
 const OpenPBRMaterialThinFilmProperties = (props) => {
     const { material } = props;
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Thin Film Weight", target: material, propertyKey: "thinFilmWeight", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Thin Film Weight", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.thinFilmWeightTexture = texture));
-                    }
-                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Thin Film Thickness", target: material, propertyKey: "thinFilmThickness", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Thin Film Thickness", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.thinFilmThicknessTexture = texture));
-                    }
-                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Thin Film IOR", target: material, propertyKey: "thinFilmIor", min: 1, max: 3, step: 0.01 })] }));
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Thin Film Weight", target: material, propertyKey: "thinFilmWeight", min: 0, max: 1, step: 0.01, description: "Controls the presence of the thin-film.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/thin-filmiridescence" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Thin Film Weight", target: material, propertyKey: "thinFilmWeightTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Thin Film Thickness", target: material, propertyKey: "thinFilmThickness", min: 0, max: 1, step: 0.01, description: "Changes the color pattern of the iridescence.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/thin-filmiridescence" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Thin Film Thickness", target: material, propertyKey: "thinFilmThicknessTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Thin Film IOR", target: material, propertyKey: "thinFilmIor", min: 1, max: 3, step: 0.01, description: "Alters the strength and contrast of the color shift based in the index of refraction.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/thin-filmiridescence" })] }));
 };
 /**
  * Displays the geometry properties of an OpenPBR material.
@@ -14716,31 +15634,7 @@ const OpenPBRMaterialThinFilmProperties = (props) => {
  */
 const OpenPBRMaterialGeometryProperties = (props) => {
     const { material } = props;
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Opacity", target: material, propertyKey: "geometryOpacity", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Geometry Opacity", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.geometryOpacityTexture = texture));
-                    }
-                } }), jsx(FileUploadLine, { label: "Geometry Normal", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.geometryNormalTexture = texture));
-                    }
-                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Tangent Angle", target: material, propertyKey: "geometryTangentAngle", min: 0, max: Math.PI, step: 0.01 }), jsx(FileUploadLine, { label: "Geometry Tangent", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.geometryTangentTexture = texture));
-                    }
-                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Coat Tangent Angle", target: material, propertyKey: "geometryCoatTangentAngle", min: 0, max: Math.PI, step: 0.01 }), jsx(FileUploadLine, { label: "Geometry Coat Normal", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.geometryCoatNormalTexture = texture));
-                    }
-                } }), jsx(FileUploadLine, { label: "Geometry Coat Tangent", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.geometryCoatTangentTexture = texture));
-                    }
-                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Geometry Thickness", target: material, propertyKey: "geometryThickness", min: 0, step: 0.1 }), jsx(FileUploadLine, { label: "Geometry Thickness", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.geometryThicknessTexture = texture));
-                    }
-                } })] }));
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Geometry Opacity", target: material, propertyKey: "geometryOpacity", min: 0, max: 1, step: 0.01, description: "Controls material presence and transparency cutout.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/opacity/transparency" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Geometry Opacity", target: material, propertyKey: "geometryOpacityTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: CheckboxPropertyLine, label: "Thin-Walled", target: material, propertyKey: "geometryThinWalled", description: "When enabled, treats material as a thin shell (like leaves, paper sheets or windows). Disables ray bending in refraction.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/thin-walledcase" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Geometry Normal", target: material, propertyKey: "geometryNormalTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Tangent Angle", target: material, propertyKey: "geometryTangentAngle", min: 0, max: Math.PI, step: 0.01, description: "Tangent vector controlling anisotropic reflection direction for the base (metal and non-metal). Works with specular_roughness_anisotropy.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/geometry/tangent" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Geometry Tangent", target: material, propertyKey: "geometryTangentTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Coat Tangent Angle", target: material, propertyKey: "geometryCoatTangentAngle", min: 0, max: Math.PI, step: 0.01, description: "Tangent vector controlling anisotropic reflection direction for the coat. Works with coat_roughness_anisotropy.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/geometry/coat-tangent" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Geometry Coat Normal", target: material, propertyKey: "geometryCoatNormalTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Geometry Coat Tangent", target: material, propertyKey: "geometryCoatTangentTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Geometry Thickness", target: material, propertyKey: "geometryThickness", min: 0, step: 0.001, description: "Controls the thickness of the geometry for volume approximations.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/thickness" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Geometry Thickness", target: material, propertyKey: "geometryThicknessTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 })] }));
 };
 
 const LightFalloffOptions = [
@@ -15101,6 +15995,10 @@ const MaterialPropertiesServiceDefinition = {
                     section: "OpenPBR",
                     component: ({ context }) => jsx(OpenPBRMaterialTransmissionProperties, { material: context }),
                 },
+                {
+                    section: "OpenPBR",
+                    component: ({ context }) => jsx(OpenPBRMaterialSubsurfaceProperties, { material: context }),
+                },
                 {
                     section: "OpenPBR",
                     component: ({ context }) => jsx(OpenPBRMaterialCoatProperties, { material: context }),
@@ -16142,6 +17040,8 @@ const ParticleSystemEmitterProperties = (props) => {
     useProperty(emitterVector, "_y");
     useProperty(emitterVector, "_z");
     const particleEmitterType = useProperty(system, "particleEmitterType");
+    const meshEmitter = particleEmitterType instanceof MeshParticleEmitter ? particleEmitterType : undefined;
+    const useMeshNormalsForDirection = useProperty(meshEmitter, "useMeshNormalsForDirection");
     // Derive the current dropdown value from the current instance to stay in sync with external changes.
     const derivedEmitterTypeKey = (() => {
         if (particleEmitterType instanceof SphereParticleEmitter) {
@@ -16245,21 +17145,21 @@ const ParticleSystemEmitterProperties = (props) => {
                                     break;
                                 }
                             }
-                        } }), particleEmitterType instanceof MeshParticleEmitter && (jsx(Fragment, { children: scene && scene.meshes.length > 0 ? (jsx(Property, { component: StringDropdownPropertyLine, propertyPath: "source", label: "Source", value: particleEmitterType.mesh ? `mesh:${particleEmitterType.mesh.uniqueId}` : `mesh:${scene.meshes[0].uniqueId}`, options: scene.meshes.map((mesh) => {
-                                const uniqueId = mesh.uniqueId;
-                                const name = mesh.name ?? "(unnamed)";
-                                const label = `${name} (#${uniqueId})`;
-                                return {
-                                    label,
-                                    value: `mesh:${uniqueId}`,
-                                };
-                            }), onChange: (value) => {
-                                const next = String(value);
-                                const uniqueIdText = next.replace("mesh:", "");
-                                const uniqueId = Number(uniqueIdText);
-                                const mesh = scene.meshes.find((candidate) => candidate.uniqueId === uniqueId) ?? null;
-                                particleEmitterType.mesh = mesh;
-                            } })) : (jsx(Property, { component: TextPropertyLine, propertyPath: "source", label: "Source", value: "No meshes in scene." })) })), particleEmitterType instanceof BoxParticleEmitter && (jsxs(Fragment, { children: [jsx(BoundProperty, { component: Vector3PropertyLine, label: "Direction1", target: particleEmitterType, propertyKey: "direction1" }), jsx(BoundProperty, { component: Vector3PropertyLine, label: "Direction2", target: particleEmitterType, propertyKey: "direction2" }), jsx(BoundProperty, { component: Vector3PropertyLine, label: "Min emit box", target: particleEmitterType, propertyKey: "minEmitBox" }), jsx(BoundProperty, { component: Vector3PropertyLine, label: "Max emit box", target: particleEmitterType, propertyKey: "maxEmitBox" })] })), particleEmitterType instanceof ConeParticleEmitter && (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Radius range", target: particleEmitterType, propertyKey: "radiusRange", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Height range", target: particleEmitterType, propertyKey: "heightRange", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Emit from spawn point only", target: particleEmitterType, propertyKey: "emitFromSpawnPointOnly" }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Direction randomizer", target: particleEmitterType, propertyKey: "directionRandomizer", min: 0, max: 1, step: 0.01 })] })), particleEmitterType instanceof SphereParticleEmitter && (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Radius", target: particleEmitterType, propertyKey: "radius", min: 0, step: 0.1 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Radius range", target: particleEmitterType, propertyKey: "radiusRange", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Direction randomizer", target: particleEmitterType, propertyKey: "directionRandomizer", min: 0, max: 1, step: 0.01 })] })), particleEmitterType instanceof CylinderParticleEmitter && (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Radius", target: particleEmitterType, propertyKey: "radius", min: 0, step: 0.1 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Height", target: particleEmitterType, propertyKey: "height", min: 0, step: 0.1 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Radius range", target: particleEmitterType, propertyKey: "radiusRange", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Direction randomizer", target: particleEmitterType, propertyKey: "directionRandomizer", min: 0, max: 1, step: 0.01 })] })), particleEmitterType instanceof HemisphericParticleEmitter && (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Radius", target: particleEmitterType, propertyKey: "radius", min: 0, step: 0.1 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Radius range", target: particleEmitterType, propertyKey: "radiusRange", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Direction randomizer", target: particleEmitterType, propertyKey: "directionRandomizer", min: 0, max: 1, step: 0.01 })] })), particleEmitterType instanceof PointParticleEmitter && (jsxs(Fragment, { children: [jsx(BoundProperty, { component: Vector3PropertyLine, label: "Direction1", target: particleEmitterType, propertyKey: "direction1" }), jsx(BoundProperty, { component: Vector3PropertyLine, label: "Direction2", target: particleEmitterType, propertyKey: "direction2" })] }))] })), !scene && jsx(TextPropertyLine, { label: "Emitter", value: "No scene available." })] }));
+                        } }), particleEmitterType instanceof MeshParticleEmitter && (jsxs(Fragment, { children: [scene && scene.meshes.length > 0 ? (jsx(Property, { component: StringDropdownPropertyLine, propertyPath: "source", label: "Source", value: particleEmitterType.mesh ? `mesh:${particleEmitterType.mesh.uniqueId}` : `mesh:${scene.meshes[0].uniqueId}`, options: scene.meshes.map((mesh) => {
+                                    const uniqueId = mesh.uniqueId;
+                                    const name = mesh.name ?? "(unnamed)";
+                                    const label = `${name} (#${uniqueId})`;
+                                    return {
+                                        label,
+                                        value: `mesh:${uniqueId}`,
+                                    };
+                                }), onChange: (value) => {
+                                    const next = String(value);
+                                    const uniqueIdText = next.replace("mesh:", "");
+                                    const uniqueId = Number(uniqueIdText);
+                                    const mesh = scene.meshes.find((candidate) => candidate.uniqueId === uniqueId) ?? null;
+                                    particleEmitterType.mesh = mesh;
+                                } })) : (jsx(Property, { component: TextPropertyLine, propertyPath: "source", label: "Source", value: "No meshes in scene." })), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use normals for direction", target: particleEmitterType, propertyKey: "useMeshNormalsForDirection" }), !useMeshNormalsForDirection && (jsxs(Fragment, { children: [jsx(BoundProperty, { component: Vector3PropertyLine, label: "Direction1", target: particleEmitterType, propertyKey: "direction1" }), jsx(BoundProperty, { component: Vector3PropertyLine, label: "Direction2", target: particleEmitterType, propertyKey: "direction2" })] }))] })), particleEmitterType instanceof BoxParticleEmitter && (jsxs(Fragment, { children: [jsx(BoundProperty, { component: Vector3PropertyLine, label: "Direction1", target: particleEmitterType, propertyKey: "direction1" }), jsx(BoundProperty, { component: Vector3PropertyLine, label: "Direction2", target: particleEmitterType, propertyKey: "direction2" }), jsx(BoundProperty, { component: Vector3PropertyLine, label: "Min emit box", target: particleEmitterType, propertyKey: "minEmitBox" }), jsx(BoundProperty, { component: Vector3PropertyLine, label: "Max emit box", target: particleEmitterType, propertyKey: "maxEmitBox" })] })), particleEmitterType instanceof ConeParticleEmitter && (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Radius range", target: particleEmitterType, propertyKey: "radiusRange", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Height range", target: particleEmitterType, propertyKey: "heightRange", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Emit from spawn point only", target: particleEmitterType, propertyKey: "emitFromSpawnPointOnly" }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Direction randomizer", target: particleEmitterType, propertyKey: "directionRandomizer", min: 0, max: 1, step: 0.01 })] })), particleEmitterType instanceof SphereParticleEmitter && (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Radius", target: particleEmitterType, propertyKey: "radius", min: 0, step: 0.1 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Radius range", target: particleEmitterType, propertyKey: "radiusRange", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Direction randomizer", target: particleEmitterType, propertyKey: "directionRandomizer", min: 0, max: 1, step: 0.01 })] })), particleEmitterType instanceof CylinderParticleEmitter && (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Radius", target: particleEmitterType, propertyKey: "radius", min: 0, step: 0.1 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Height", target: particleEmitterType, propertyKey: "height", min: 0, step: 0.1 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Radius range", target: particleEmitterType, propertyKey: "radiusRange", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Direction randomizer", target: particleEmitterType, propertyKey: "directionRandomizer", min: 0, max: 1, step: 0.01 })] })), particleEmitterType instanceof HemisphericParticleEmitter && (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Radius", target: particleEmitterType, propertyKey: "radius", min: 0, step: 0.1 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Radius range", target: particleEmitterType, propertyKey: "radiusRange", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Direction randomizer", target: particleEmitterType, propertyKey: "directionRandomizer", min: 0, max: 1, step: 0.01 })] })), particleEmitterType instanceof PointParticleEmitter && (jsxs(Fragment, { children: [jsx(BoundProperty, { component: Vector3PropertyLine, label: "Direction1", target: particleEmitterType, propertyKey: "direction1" }), jsx(BoundProperty, { component: Vector3PropertyLine, label: "Direction2", target: particleEmitterType, propertyKey: "direction2" })] }))] })), !scene && jsx(TextPropertyLine, { label: "Emitter", value: "No scene available." })] }));
 };
 
 const useStyles$h = makeStyles({
@@ -17172,42 +18072,6 @@ const PhysicsPropertiesServiceDefinition = {
     },
 };
 
-const useCheckboxStyles = makeStyles({
-    indicator: {
-        margin: 0,
-    },
-});
-/**
- * This is a primitive fluent checkbox that can both read and write checked state
- * @param props
- * @returns Checkbox component
- */
-const Checkbox = (props) => {
-    Checkbox.displayName = "Checkbox";
-    const [checked, setChecked] = useState(() => props.value ?? false);
-    const classes = useCheckboxStyles();
-    useEffect(() => {
-        if (props.value != undefined) {
-            setChecked(props.value); // Update local state when props.checked changes
-        }
-    }, [props.value]);
-    const onChange = (ev, _) => {
-        props.onChange(ev.target.checked);
-        setChecked(ev.target.checked);
-    };
-    return jsx(Checkbox$1, { checked: checked, onChange: onChange, indicator: { className: classes.indicator } });
-};
-
-/**
- * Wraps a checkbox in a property line
- * @param props - PropertyLineProps and CheckboxProps
- * @returns property-line wrapped checkbox
- */
-const CheckboxPropertyLine = (props) => {
-    CheckboxPropertyLine.displayName = "CheckboxPropertyLine";
-    return (jsx(PropertyLine, { ...props, children: jsx(Checkbox, { ...props }) }));
-};
-
 /**
  * The properties component for a post process.
  * @param props - The properties component props containing the post process.
@@ -17366,7 +18230,7 @@ const IblShadowsRenderPipelineScreenspaceProperties = (props) => {
 const IblShadowsRenderPipelineDebugProperties = (props) => {
     const { pipeline } = props;
     const allowDebugPasses = useProperty(pipeline, "allowDebugPasses");
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Allow Debug Passes", target: pipeline, propertyKey: "allowDebugPasses" }), allowDebugPasses && (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Voxel Debug Enabled", target: pipeline, propertyKey: "voxelDebugEnabled" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "CDF Debug Enabled", target: pipeline, propertyKey: "cdfDebugEnabled" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Voxel Tracing Debug Enabled", target: pipeline, propertyKey: "voxelTracingDebugEnabled" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Spatial Blur Debug Enabled", target: pipeline, propertyKey: "spatialBlurPassDebugEnabled" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Accumulation Pass Debug Enabled", target: pipeline, propertyKey: "accumulationPassDebugEnabled" })] }))] }));
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Allow Debug Passes", target: pipeline, propertyKey: "allowDebugPasses" }), allowDebugPasses && (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "CDF Debug Enabled", target: pipeline, propertyKey: "cdfDebugEnabled" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Voxel Tracing Debug Enabled", target: pipeline, propertyKey: "voxelTracingDebugEnabled" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Spatial Blur Debug Enabled", target: pipeline, propertyKey: "spatialBlurPassDebugEnabled" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Accumulation Pass Debug Enabled", target: pipeline, propertyKey: "accumulationPassDebugEnabled" })] }))] }));
 };
 
 const RenderingPipelinePropertiesServiceDefinition = {
@@ -17899,12 +18763,42 @@ const SpriteManagerActionsProperties = (props) => {
  * @param faceOrLayer if the texture has multiple faces, the face index to use for the source. For 2D array textures, this is the layer index.
  * @param channels a filter for which of the RGBA channels to return in the result
  * @param lod if the texture has multiple LODs, the lod index to use for the source
+ * @param slice if the texture is 3D, the depth slice index to use for the source
  * @returns the 8-bit texture data
  */
-async function ApplyChannelsToTextureDataAsync(texture, width, height, faceOrLayer, channels, lod = 0) {
+async function ApplyChannelsToTextureDataAsync(texture, width, height, faceOrLayer, channels, lod = 0, slice = 0) {
+    const internalTexture = texture.getInternalTexture();
+    const is3DTexture = texture.is3D || !!internalTexture?.is3D;
+    const textureFormat = internalTexture?.format ?? texture.textureFormat;
     // For cube maps, force RTT path to ensure correct face orientation and gamma correction
     // For 2D array textures, face is reinterpreted as the layer index for direct pixel readback
-    const data = await GetTextureDataAsync(texture, width, height, faceOrLayer, lod, texture.isCube);
+    const data = await GetTextureDataAsync(texture, width, height, faceOrLayer, lod, texture.isCube || is3DTexture, slice);
+    const forceOpaqueAlpha = is3DTexture || _TextureFormatHasNoAlpha(textureFormat);
+    if (forceOpaqueAlpha) {
+        for (let i = 3; i < width * height * 4; i += 4) {
+            data[i] = 255;
+        }
+    }
+    else if (texture.getScene()?.getEngine().isWebGPU) {
+        let alphaAllZero = true;
+        let hasNonZeroColor = false;
+        for (let i = 0; i < width * height * 4; i += 4) {
+            if (data[i] !== 0 || data[i + 1] !== 0 || data[i + 2] !== 0) {
+                hasNonZeroColor = true;
+            }
+            if (data[i + 3] !== 0) {
+                alphaAllZero = false;
+                break;
+            }
+        }
+        // Some WebGPU RTT readback paths can return zeroed alpha for textures that
+        // are effectively opaque in source data. In that case, force opaque preview.
+        if (alphaAllZero && hasNonZeroColor) {
+            for (let i = 3; i < width * height * 4; i += 4) {
+                data[i] = 255;
+            }
+        }
+    }
     if (!channels.R || !channels.G || !channels.B || !channels.A) {
         for (let i = 0; i < width * height * 4; i += 4) {
             // If alpha is the only channel, just display alpha across all channels
@@ -17977,6 +18871,40 @@ async function ApplyChannelsToTextureDataAsync(texture, width, height, faceOrLay
     }
     return data;
 }
+function _TextureFormatHasNoAlpha(format) {
+    switch (format) {
+        case Constants.TEXTUREFORMAT_LUMINANCE:
+        case Constants.TEXTUREFORMAT_R:
+        case Constants.TEXTUREFORMAT_R16_UNORM:
+        case Constants.TEXTUREFORMAT_R16_SNORM:
+        case Constants.TEXTUREFORMAT_RG:
+        case Constants.TEXTUREFORMAT_RG16_UNORM:
+        case Constants.TEXTUREFORMAT_RG16_SNORM:
+        case Constants.TEXTUREFORMAT_RGB:
+        case Constants.TEXTUREFORMAT_RGB16_UNORM:
+        case Constants.TEXTUREFORMAT_RGB16_SNORM:
+        case Constants.TEXTUREFORMAT_DEPTH16:
+        case Constants.TEXTUREFORMAT_DEPTH24:
+        case Constants.TEXTUREFORMAT_DEPTH24_STENCIL8:
+        case Constants.TEXTUREFORMAT_DEPTH24UNORM_STENCIL8:
+        case Constants.TEXTUREFORMAT_DEPTH32_FLOAT:
+        case Constants.TEXTUREFORMAT_DEPTH32FLOAT_STENCIL8:
+        case Constants.TEXTUREFORMAT_STENCIL8:
+        case Constants.TEXTUREFORMAT_RED_INTEGER:
+        case Constants.TEXTUREFORMAT_RG_INTEGER:
+        case Constants.TEXTUREFORMAT_RGB_INTEGER:
+        case Constants.TEXTUREFORMAT_COMPRESSED_RGB_S3TC_DXT1:
+        case Constants.TEXTUREFORMAT_COMPRESSED_SRGB_S3TC_DXT1_EXT:
+        case Constants.TEXTUREFORMAT_COMPRESSED_RGB_ETC1_WEBGL:
+        case Constants.TEXTUREFORMAT_COMPRESSED_RGB8_ETC2:
+        case Constants.TEXTUREFORMAT_COMPRESSED_SRGB8_ETC2:
+        case Constants.TEXTUREFORMAT_COMPRESSED_RGB_BPTC_UNSIGNED_FLOAT:
+        case Constants.TEXTUREFORMAT_COMPRESSED_RGB_BPTC_SIGNED_FLOAT:
+            return true;
+        default:
+            return false;
+    }
+}
 
 const useStyles$9 = makeStyles({
     root: {
@@ -17988,6 +18916,10 @@ const useStyles$9 = makeStyles({
         gap: tokens.spacingHorizontalXS,
         padding: 0,
     },
+    sliderContainer: {
+        marginTop: tokens.spacingVerticalXS,
+        marginBottom: tokens.spacingVerticalXS,
+    },
     controlButton: {
         minWidth: "auto",
         flex: "1 1 0", // Equal flex grow/shrink with 0 basis
@@ -18019,15 +18951,28 @@ const TextureChannelStates = {
     A: { R: false, G: false, B: false, A: true },
     ALL: { R: true, G: true, B: true, A: true },
 };
+/**
+ * Displays a 2D preview for a texture, including channels/cube face controls.
+ * @param props The component properties.
+ * @returns The rendered component.
+ */
 const TexturePreview = (props) => {
     const { texture, disableToolbar = false, maxWidth = "100%", maxHeight = "384px", offsetX = 0, offsetY = 0, width, height, imperativeRef } = props;
     const classes = useStyles$9();
     const canvasRef = useRef(null);
     const [channels, setChannels] = useState(TextureChannelStates.ALL);
     const [face, setFace] = useState(0);
+    const [slice, setSlice] = useState(0);
+    const [lod, setLod] = useState(0);
     const [layer, setLayer] = useState(0);
     const [canvasStyle, setCanvasStyle] = useState();
     const internalTexture = useProperty(texture, "_texture");
+    const is3DTexture = !!internalTexture?.is3D;
+    const baseDepth = Math.max(internalTexture?.depth ?? 1, 1);
+    const lodDepth = Math.max(1, Math.floor(baseDepth / Math.pow(2, lod)));
+    const maxSlice = lodDepth - 1;
+    const lodBaseSize = Math.max(1, Math.min(internalTexture?.width ?? 1, internalTexture?.height ?? 1, is3DTexture ? (internalTexture?.depth ?? 1) : Number.MAX_SAFE_INTEGER));
+    const maxLod = internalTexture?.generateMipMaps ? Math.max(0, Math.floor(Math.log2(lodBaseSize))) : 0;
     const showLayerDropdown = texture.is2DArray;
     const layerCount = texture.is2DArray && internalTexture ? internalTexture.depth : 0;
     useEffect(() => {
@@ -18044,7 +18989,14 @@ const TexturePreview = (props) => {
         }
         try {
             await WhenTextureReadyAsync(texture); // Ensure texture is loaded before grabbing size
-            const { width: textureWidth, height: textureHeight } = texture.getSize();
+            const size = texture.getSize();
+            let textureWidth = size.width || internalTexture?.width || 1;
+            let textureHeight = size.height || internalTexture?.height || textureWidth;
+            if (is3DTexture) {
+                const squareSize = Math.max(1, Math.min(textureWidth, textureHeight));
+                textureWidth = squareSize;
+                textureHeight = squareSize;
+            }
             // Calculate canvas dimensions
             const canvasWidth = width ?? textureWidth;
             const canvasHeight = height ?? textureHeight;
@@ -18054,7 +19006,7 @@ const TexturePreview = (props) => {
             const imageWidth = `min(${maxWidth}, calc(${maxHeight} * ${aspectRatio}))`;
             setCanvasStyle({ width: imageWidth });
             // Fetch texture data BEFORE clearing the canvas to avoid flicker
-            const data = await ApplyChannelsToTextureDataAsync(texture, textureWidth, textureHeight, texture.is2DArray ? layer : face, channels);
+            const data = await ApplyChannelsToTextureDataAsync(texture, textureWidth, textureHeight, texture.is2DArray ? layer : face, channels, lod, slice);
             // Now set canvas dimensions (this clears the canvas) and draw immediately
             canvas.width = canvasWidth;
             canvas.height = canvasHeight;
@@ -18069,7 +19021,19 @@ const TexturePreview = (props) => {
         catch {
             // If we fail, leave the canvas empty
         }
-    }, [texture, face, channels, offsetX, offsetY, width, height, internalTexture, layer]);
+    }, [texture, face, channels, lod, slice, offsetX, offsetY, width, height, internalTexture, layer]);
+    useEffect(() => {
+        if (!is3DTexture || slice <= maxSlice) {
+            return;
+        }
+        setSlice(maxSlice);
+    }, [is3DTexture, maxSlice, slice]);
+    useEffect(() => {
+        if (lod <= maxLod) {
+            return;
+        }
+        setLod(maxLod);
+    }, [lod, maxLod]);
     useImperativeHandle(imperativeRef, () => ({ refresh: updatePreviewAsync }), [updatePreviewAsync]);
     useEffect(() => {
         void updatePreviewAsync();
@@ -18078,7 +19042,7 @@ const TexturePreview = (props) => {
     useEffect(() => {
         void updatePreviewAsync();
     }, [isPinned]);
-    return (jsx(LineContainer, { uniqueId: "TexturePreview", children: jsxs("div", { className: classes.root, children: [disableToolbar ? null : texture.isCube ? (jsx(Toolbar$1, { className: classes.controls, size: size, "aria-label": "Cube Faces", children: ["+X", "-X", "+Y", "-Y", "+Z", "-Z"].map((label, idx) => (jsx(ToolbarButton, { className: classes.controlButton, appearance: face === idx ? "primary" : "subtle", onClick: () => setFace(idx), children: label }, label))) })) : (jsx(Toolbar$1, { className: classes.controls, size: size, "aria-label": "Channels", children: ["R", "G", "B", "A", "ALL"].map((ch) => (jsx(ToolbarButton, { className: classes.controlButton, appearance: channels === TextureChannelStates[ch] ? "primary" : "subtle", onClick: () => setChannels(TextureChannelStates[ch]), children: ch }, ch))) })), jsx("div", { className: classes.previewContainer, children: jsx("canvas", { ref: canvasRef, className: classes.preview, style: canvasStyle }) }), !disableToolbar && showLayerDropdown && layerCount > 0 && (jsx(SyncedSliderPropertyLine, { label: "Layer", value: layer, onChange: setLayer, min: 0, max: layerCount - 1, step: 1 })), texture.isRenderTarget && (jsx(Button$1, { appearance: "outline", onClick: () => {
+    return (jsx(LineContainer, { uniqueId: "TexturePreview", children: jsxs("div", { className: classes.root, children: [disableToolbar ? null : texture.isCube ? (jsx(Toolbar$1, { className: classes.controls, size: size, "aria-label": "Cube Faces", children: ["+X", "-X", "+Y", "-Y", "+Z", "-Z"].map((label, idx) => (jsx(ToolbarButton, { className: classes.controlButton, appearance: face === idx ? "primary" : "subtle", onClick: () => setFace(idx), children: label }, label))) })) : (jsx(Toolbar$1, { className: classes.controls, size: size, "aria-label": "Channels", children: ["R", "G", "B", "A", "ALL"].map((ch) => (jsx(ToolbarButton, { className: classes.controlButton, appearance: channels === TextureChannelStates[ch] ? "primary" : "subtle", onClick: () => setChannels(TextureChannelStates[ch]), children: ch }, ch))) })), is3DTexture && (jsxs("div", { className: classes.sliderContainer, children: [jsxs(Label, { children: ["Slice: ", slice, " / ", maxSlice] }), jsx(Slider$1, { min: 0, max: maxSlice, step: 1, value: slice, onChange: (_, data) => setSlice(data.value) })] })), maxLod > 0 && (jsxs("div", { className: classes.sliderContainer, children: [jsxs(Label, { children: ["LOD: ", lod] }), jsx(Slider$1, { min: 0, max: maxLod, step: 1, value: lod, onChange: (_, data) => setLod(data.value) })] })), jsx("div", { className: classes.previewContainer, children: jsx("canvas", { ref: canvasRef, className: classes.preview, style: canvasStyle }) }), !disableToolbar && showLayerDropdown && layerCount > 0 && (jsx(SyncedSliderPropertyLine, { label: "Layer", value: layer, onChange: setLayer, min: 0, max: layerCount - 1, step: 1 })), texture.isRenderTarget && (jsx(Button$1, { appearance: "outline", onClick: () => {
                         void updatePreviewAsync();
                     }, children: "Refresh" }))] }) }));
 };
@@ -19846,7 +20810,7 @@ const AdvancedDynamicTextureGeneralProperties = MakeLazyComponent(async () => {
 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/guiEditor.js');
+                const { GUIEditor } = await import('@babylonjs/gui-editor');
                 await GUIEditor.Show({ liveGuiTexture: texture });
             } }) }));
 };
@@ -20551,7 +21515,7 @@ const GuiExplorerServiceDefinition = {
                     icon: () => jsx(EditRegular, {}),
                     // eslint-disable-next-line @typescript-eslint/naming-convention
                     execute: async () => {
-                        const { GUIEditor } = await import('@babylonjs/gui-editor/guiEditor.js');
+                        const { GUIEditor } = await import('@babylonjs/gui-editor');
                         await GUIEditor.Show({ liveGuiTexture: texture });
                     },
                 };
@@ -20671,6 +21635,9 @@ const MaterialExplorerServiceDefinition = {
 function IsCameraFrameGraphTask(task) {
     return task.camera instanceof Camera;
 }
+function IsNodesSectionType(node) {
+    return node instanceof TransformNode || node instanceof Camera || node instanceof Light;
+}
 const NodeExplorerServiceDefinition = {
     friendlyName: "Node Explorer",
     consumes: [SceneExplorerServiceIdentity, SceneContextIdentity, GizmoServiceIdentity, WatcherServiceIdentity],
@@ -20680,21 +21647,36 @@ const NodeExplorerServiceDefinition = {
             return undefined;
         }
         const nodeMovedObservable = new Observable();
+        // Set of all nodes known to be in the scene, rebuilt each time getRootEntities
+        // is called. Used by getEntityDisplayInfo to detect orphaned ancestor nodes.
+        const knownSceneNodes = new Set();
         const sectionRegistration = sceneExplorerService.addSection({
             displayName: "Nodes",
             order: 100 /* DefaultSectionsOrder.Nodes */,
             getRootEntities: () => {
-                const rootNodes = [...scene.rootNodes];
-                // If any non-root node has a parent and that parent is not one of the node types shown in the Nodes section,
-                // then we should treat it as a root node, otherwise it won't show up anywhere in scene explorer.
-                // An example of this is when a Mesh or a TransformNode is parented under a Bone.
+                const rootNodes = new Set(scene.rootNodes);
+                knownSceneNodes.clear();
+                // Ensure all nodes in the scene are reachable in the explorer, even if their
+                // parent was removed from the scene or is not a type shown in the Nodes section.
                 for (const node of [...scene.meshes, ...scene.transformNodes, ...scene.cameras, ...scene.lights]) {
-                    if (node.parent &&
-                        !(node.parent instanceof AbstractMesh) &&
-                        !(node.parent instanceof TransformNode) &&
-                        !(node.parent instanceof Camera) &&
-                        !(node.parent instanceof Light)) {
-                        rootNodes.push(node);
+                    knownSceneNodes.add(node);
+                    if (!node.parent) {
+                        continue;
+                    }
+                    if (!IsNodesSectionType(node.parent)) {
+                        // Parent is not a type shown in the Nodes section (e.g. a Bone).
+                        // Treat this node as a root so it still appears in the explorer.
+                        rootNodes.add(node);
+                    }
+                    else {
+                        // Walk up through Nodes-section-type parents to find the topmost ancestor.
+                        // If that ancestor was removed from the scene (not in rootNodes), add it
+                        // so the entire subtree remains visible in the explorer.
+                        let ancestor = node.parent;
+                        while (ancestor.parent && IsNodesSectionType(ancestor.parent)) {
+                            ancestor = ancestor.parent;
+                        }
+                        rootNodes.add(ancestor);
                     }
                 }
                 // Lights within a clustered light container are not included in Scene.lights or Scene.rootNodes.
@@ -20702,23 +21684,32 @@ const NodeExplorerServiceDefinition = {
                 for (const light of scene.lights) {
                     if (light instanceof ClusteredLightContainer) {
                         for (const childLight of light.lights) {
-                            if (!childLight.parent && !rootNodes.includes(childLight)) {
-                                rootNodes.push(childLight);
+                            knownSceneNodes.add(childLight);
+                            if (!childLight.parent) {
+                                rootNodes.add(childLight);
                             }
                         }
                     }
                 }
-                return rootNodes;
+                return [...rootNodes];
             },
             getEntityChildren: (node) => node.getChildren(),
             getEntityDisplayInfo: (node) => {
                 const onChangeObservable = new Observable();
                 const nameHookToken = watcherService.watchProperty(node, "name", () => onChangeObservable.notifyObservers());
                 const parentHookToken = watcherService.watchProperty(node, "parent", () => nodeMovedObservable.notifyObservers(node));
+                // A node is "not in the scene" if it is a Nodes-section type but is not
+                // a known scene node. This handles nodes that were removed from the scene
+                // but still appear because a descendant is in the scene. Nodes from the
+                // !IsNodesSectionType(parent) branch are unaffected because they always
+                // come from the scene's tracking lists. Clustered light children are also
+                // unaffected because they are added to knownSceneNodes explicitly.
+                const validationError = IsNodesSectionType(node) && !knownSceneNodes.has(node) ? "This entity is not in the scene but is shown because a descendant is still in the scene." : undefined;
                 return {
                     get name() {
                         return node.name || `Unnamed ${node.getClassName()}`;
                     },
+                    validationError,
                     onChange: onChangeObservable,
                     dispose: () => {
                         nameHookToken.dispose();
@@ -21736,7 +22727,7 @@ const CoordinateSystemModeOptions = [
     { label: "Right Handed", value: GLTFLoaderCoordinateSystemMode.FORCE_RIGHT_HANDED },
 ];
 const GLTFLoaderOptionsTool = ({ loaderOptions }) => {
-    return (jsx(PropertyLine, { label: "Loader Options", expandByDefault: false, expandedContent: jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Always compute bounding box", target: loaderOptions, propertyKey: "alwaysComputeBoundingBox", nullable: true, defaultValue: LoaderOptionDefaults.alwaysComputeBoundingBox }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Always compute skeleton root node", target: loaderOptions, propertyKey: "alwaysComputeSkeletonRootNode", nullable: true, defaultValue: LoaderOptionDefaults.alwaysComputeSkeletonRootNode }), jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "Animation start mode", options: AnimationStartModeOptions, target: loaderOptions, propertyKey: "animationStartMode", nullable: true, defaultValue: LoaderOptionDefaults.animationStartMode }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Capture performance counters", target: loaderOptions, propertyKey: "capturePerformanceCounters", nullable: true, defaultValue: LoaderOptionDefaults.capturePerformanceCounters }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Compile materials", target: loaderOptions, propertyKey: "compileMaterials", nullable: true, defaultValue: LoaderOptionDefaults.compileMaterials }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Compile shadow generators", target: loaderOptions, propertyKey: "compileShadowGenerators", nullable: true, defaultValue: LoaderOptionDefaults.compileShadowGenerators }), jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "Coordinate system", options: CoordinateSystemModeOptions, target: loaderOptions, propertyKey: "coordinateSystemMode", nullable: true, defaultValue: LoaderOptionDefaults.coordinateSystemMode }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Create instances", target: loaderOptions, propertyKey: "createInstances", nullable: true, defaultValue: LoaderOptionDefaults.createInstances }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Enable logging", target: loaderOptions, propertyKey: "loggingEnabled", nullable: true, defaultValue: LoaderOptionDefaults.loggingEnabled }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Load all materials", target: loaderOptions, propertyKey: "loadAllMaterials", nullable: true, defaultValue: LoaderOptionDefaults.loadAllMaterials }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Target FPS", target: loaderOptions, propertyKey: "targetFps", min: 1, max: 120, step: 1, nullable: true, defaultValue: LoaderOptionDefaults.targetFps }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Transparency as coverage", target: loaderOptions, propertyKey: "transparencyAsCoverage", nullable: true, defaultValue: LoaderOptionDefaults.transparencyAsCoverage }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use clip plane", target: loaderOptions, propertyKey: "useClipPlane", nullable: true, defaultValue: LoaderOptionDefaults.useClipPlane }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use sRGB buffers", target: loaderOptions, propertyKey: "useSRGBBuffers", nullable: true, defaultValue: LoaderOptionDefaults.useSRGBBuffers })] }) }));
+    return (jsx(PropertyLine, { label: "Loader Options", expandByDefault: false, expandedContent: jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Always Compute Bounding Box", target: loaderOptions, propertyKey: "alwaysComputeBoundingBox", nullable: true, defaultValue: LoaderOptionDefaults.alwaysComputeBoundingBox }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Always Compute Skeleton Root Node", target: loaderOptions, propertyKey: "alwaysComputeSkeletonRootNode", nullable: true, defaultValue: LoaderOptionDefaults.alwaysComputeSkeletonRootNode }), jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "Animation Start Mode", options: AnimationStartModeOptions, target: loaderOptions, propertyKey: "animationStartMode", nullable: true, defaultValue: LoaderOptionDefaults.animationStartMode }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Capture Performance Counters", target: loaderOptions, propertyKey: "capturePerformanceCounters", nullable: true, defaultValue: LoaderOptionDefaults.capturePerformanceCounters }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Compile Materials", target: loaderOptions, propertyKey: "compileMaterials", nullable: true, defaultValue: LoaderOptionDefaults.compileMaterials }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Compile Shadow Generators", target: loaderOptions, propertyKey: "compileShadowGenerators", nullable: true, defaultValue: LoaderOptionDefaults.compileShadowGenerators }), jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "Coordinate System", options: CoordinateSystemModeOptions, target: loaderOptions, propertyKey: "coordinateSystemMode", nullable: true, defaultValue: LoaderOptionDefaults.coordinateSystemMode }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Create Instances", target: loaderOptions, propertyKey: "createInstances", nullable: true, defaultValue: LoaderOptionDefaults.createInstances }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Don't Use Transmission Helper", target: loaderOptions, propertyKey: "dontUseTransmissionHelper", nullable: true, defaultValue: LoaderOptionDefaults.dontUseTransmissionHelper }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Enable Logging", target: loaderOptions, propertyKey: "loggingEnabled", nullable: true, defaultValue: LoaderOptionDefaults.loggingEnabled }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Load All Materials", target: loaderOptions, propertyKey: "loadAllMaterials", nullable: true, defaultValue: LoaderOptionDefaults.loadAllMaterials }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Load Morph Targets", target: loaderOptions, propertyKey: "loadMorphTargets", nullable: true, defaultValue: LoaderOptionDefaults.loadMorphTargets }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Load Node Animations", target: loaderOptions, propertyKey: "loadNodeAnimations", nullable: true, defaultValue: LoaderOptionDefaults.loadNodeAnimations }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Load Only Materials", target: loaderOptions, propertyKey: "loadOnlyMaterials", nullable: true, defaultValue: LoaderOptionDefaults.loadOnlyMaterials }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Load Skins", target: loaderOptions, propertyKey: "loadSkins", nullable: true, defaultValue: LoaderOptionDefaults.loadSkins }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Skip Materials", target: loaderOptions, propertyKey: "skipMaterials", nullable: true, defaultValue: LoaderOptionDefaults.skipMaterials }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Target FPS", target: loaderOptions, propertyKey: "targetFps", min: 1, max: 120, step: 1, nullable: true, defaultValue: LoaderOptionDefaults.targetFps }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Transparency As Coverage", target: loaderOptions, propertyKey: "transparencyAsCoverage", nullable: true, defaultValue: LoaderOptionDefaults.transparencyAsCoverage }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use Clip Plane", target: loaderOptions, propertyKey: "useClipPlane", nullable: true, defaultValue: LoaderOptionDefaults.useClipPlane }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use glTF Texture Names", target: loaderOptions, propertyKey: "useGltfTextureNames", nullable: true, defaultValue: LoaderOptionDefaults.useGltfTextureNames }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use OpenPBR", target: loaderOptions, propertyKey: "useOpenPBR", nullable: true, defaultValue: LoaderOptionDefaults.useOpenPBR }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use Range Requests", target: loaderOptions, propertyKey: "useRangeRequests", nullable: true, defaultValue: LoaderOptionDefaults.useRangeRequests }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use sRGB Buffers", target: loaderOptions, propertyKey: "useSRGBBuffers", nullable: true, defaultValue: LoaderOptionDefaults.useSRGBBuffers })] }) }));
 };
 const GLTFExtensionOptionsTool = ({ extensionOptions }) => {
     return (jsx(PropertyLine, { label: "Extension Options", expandByDefault: false, expandedContent: jsx(Fragment, { children: Object.entries(extensionOptions)
@@ -21989,6 +22980,37 @@ const ShellSettingsServiceDefinition = {
     },
 };
 
+const InspectorSettingsServiceDefinition = {
+    friendlyName: "Inspector Settings",
+    consumes: [SettingsServiceIdentity],
+    factory: (settingsService) => {
+        const settingRegistration = settingsService.addSectionContent({
+            key: "Inspector Settings",
+            section: "UI",
+            component: () => {
+                const [compactMode, setCompactMode] = useSetting(CompactModeSettingDescriptor);
+                const [useDegrees, setUseDegrees] = useSetting(UseDegreesSettingDescriptor);
+                const [useEuler, setUseEuler] = useSetting(UseEulerSettingDescriptor);
+                const [disableCopy, setDisableCopy] = useSetting(DisableCopySettingDescriptor);
+                return (jsxs(Fragment, { children: [jsx(SwitchPropertyLine, { label: "Compact Mode", description: "Use a more compact UI with less spacing.", value: compactMode, onChange: (checked) => {
+                                setCompactMode(checked);
+                            } }), jsx(SwitchPropertyLine, { label: "Use Degrees", description: "Using degrees instead of radians.", value: useDegrees, onChange: (checked) => {
+                                setUseDegrees(checked);
+                            } }), jsx(SwitchPropertyLine, { label: "Only Show Euler Angles", description: "Only show Euler angles in rotation properties, rather than quaternions.", value: useEuler, onChange: (checked) => {
+                                setUseEuler(checked);
+                            } }), jsx(SwitchPropertyLine, { label: "Disable Copy Button", description: "Disables the copy to clipboard button on property lines. You can still Ctrl+Click on the label to copy.", value: disableCopy, onChange: (checked) => {
+                                setDisableCopy(checked);
+                            } })] }));
+            },
+        });
+        return {
+            dispose: () => {
+                settingRegistration.dispose();
+            },
+        };
+    },
+};
+
 const UserFeedbackServiceDefinition = {
     friendlyName: "User Feedback",
     consumes: [ShellServiceIdentity],
@@ -22117,6 +23139,11 @@ function ShowInspector(scene, options = {}) {
         });
         // This array will contain all the default Inspector service definitions.
         const serviceDefinitions = [];
+        // Ensure the inspectable bridge is running for this scene. The inspector's
+        // ServiceContainer will use the inspectable container as a parent, inheriting
+        // services like ISceneContext and IInspectableCommandRegistry.
+        const inspectableToken = _StartInspectable(scene);
+        disposeActions.push(() => inspectableToken.dispose());
         // Create a container element for the inspector UI.
         // This element will become the root React node, so it must be a new empty node
         // since React will completely take over its contents.
@@ -22166,18 +23193,6 @@ function ShowInspector(scene, options = {}) {
         disposeActions.push(() => {
             parentElement.removeChild(containerElement);
         });
-        // This service exposes the scene that was passed into Inspector through ISceneContext, which is used by other services that may be used in other contexts outside of Inspector.
-        const sceneContextServiceDefinition = {
-            friendlyName: "Inspector Scene Context",
-            produces: [SceneContextIdentity],
-            factory: () => {
-                return {
-                    currentScene: scene,
-                    currentSceneObservable: new Observable(),
-                };
-            },
-        };
-        serviceDefinitions.push(sceneContextServiceDefinition);
         if (options.autoResizeEngine) {
             const observer = scene.onBeforeRenderObservable.add(() => scene.getEngine().resize());
             disposeActions.push(() => observer.remove());
@@ -22200,7 +23215,7 @@ function ShowInspector(scene, options = {}) {
         // Tools pane tab and related services.
         ToolsServiceDefinition, ExportServiceDefinition, GLTFAnimationImportServiceDefinition, GLTFLoaderOptionsServiceDefinition, GLTFValidationServiceDefinition, CaptureToolsDefinition, 
         // Settings pane tab and related services.
-        SettingsServiceDefinition, WatcherSettingsServiceDefinition, ShellSettingsServiceDefinition, 
+        SettingsServiceDefinition, InspectorSettingsServiceDefinition, WatcherSettingsServiceDefinition, ShellSettingsServiceDefinition, 
         // Adds a button to refresh all properties manually (when watcher is in "manual" mode).
         WatcherRefreshToolbarServiceDefinition, 
         // Tracks entity selection state (e.g. which Mesh or Material or other entity is currently selected in scene explorer and bound to the properties pane, etc.).
@@ -22213,6 +23228,8 @@ function ShowInspector(scene, options = {}) {
         HighlightServiceDefinition, 
         // Adds entry points for user feedback on Inspector v2 (probably eventually will be removed).
         UserFeedbackServiceDefinition, 
+        // Shows CLI bridge connection status in the toolbar.
+        CliConnectionStatusServiceDefinition, 
         // Adds always present "mini stats" (like fps) to the toolbar, etc.
         MiniStatsServiceDefinition, 
         // Legacy service to support custom inspectable properties on objects.
@@ -22220,6 +23237,7 @@ function ShowInspector(scene, options = {}) {
         const modularTool = MakeModularTool({
             namespace: "Inspector",
             containerElement,
+            parentContainer: inspectableToken.serviceContainer,
             serviceDefinitions: [
                 // Default Inspector services.
                 ...serviceDefinitions,
@@ -23054,5 +24072,5 @@ const TextAreaPropertyLine = (props) => {
 // Attach Inspector v2 to Scene.debugLayer as a side effect for back compat.
 AttachDebugLayer();
 
-export { GizmoServiceIdentity as $, Accordion as A, Button as B, CheckboxPropertyLine as C, ColorPickerPopup as D, ColorStepGradientComponent as E, ComboBox as F, ComboBoxPropertyLine as G, ConstructorFactory as H, ConvertOptions as I, DebugServiceIdentity as J, DetachDebugLayer as K, Link as L, MessageBar as M, NumberInputPropertyLine as N, DraggableLine as O, Popover as P, Dropdown as Q, EntitySelector as R, ShellServiceIdentity as S, TextInputPropertyLine as T, ErrorBoundary as U, Vector3PropertyLine as V, ExtensibleAccordion as W, FactorGradientComponent as X, FactorGradientList as Y, FileUploadLine as Z, GetPropertyDescriptor as _, useToast as a, Vector2PropertyLine as a$, HexPropertyLine as a0, InfoLabel as a1, InputHexField as a2, InputHsvField as a3, Inspector as a4, InterceptFunction as a5, InterceptProperty as a6, IsPropertyReadonly as a7, LineContainer as a8, LinkPropertyLine as a9, SettingsStoreIdentity as aA, ShowInspector as aB, SidePaneContainer as aC, SkeletonSelector as aD, Slider as aE, SpinButton as aF, StatsServiceIdentity as aG, StringDropdown as aH, StringDropdownPropertyLine as aI, StringifiedPropertyLine as aJ, Switch as aK, SwitchPropertyLine as aL, SyncedSliderInput as aM, SyncedSliderPropertyLine as aN, TeachingMoment as aO, TextAreaPropertyLine as aP, TextInput as aQ, TextPropertyLine as aR, Textarea as aS, TextureSelector as aT, TextureUpload as aU, Theme as aV, ThemeServiceIdentity as aW, ToastProvider as aX, ToggleButton as aY, Tooltip as aZ, UploadButton as a_, LinkToEntityPropertyLine as aa, List as ab, MakeDialogTeachingMoment as ac, MakeLazyComponent as ad, MakePopoverTeachingMoment as ae, MakePropertyHook as af, MakeTeachingMoment as ag, MaterialSelector as ah, NodeSelector as ai, NumberDropdown as aj, NumberDropdownPropertyLine as ak, ObservableCollection as al, Pane as am, PlaceholderPropertyLine as an, PositionedPopover as ao, PropertiesServiceIdentity as ap, Property as aq, PropertyContext as ar, PropertyLine as as, QuaternionPropertyLine as at, RotationVectorPropertyLine as au, SceneExplorerServiceIdentity as av, SearchBar as aw, SearchBox as ax, SelectionServiceDefinition as ay, SettingsServiceIdentity as az, useInterceptObservable as b, Vector4PropertyLine as b0, WatcherServiceIdentity as b1, useAngleConverters as b2, useAsyncResource as b3, useColor3Property as b4, useColor4Property as b5, useEventListener as b6, useEventfulState as b7, useKeyListener as b8, useKeyState as b9, useObservableCollection as ba, useOrderedObservableCollection as bb, usePollingObservable as bc, usePropertyChangedNotifier as bd, useQuaternionProperty as be, useResource as bf, useSetting as bg, useTheme as bh, useThemeMode as bi, useVector3Property as bj, 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, BuiltInsExtensionFeed as p, Checkbox as q, ChildWindow as r, Collapse as s, Color3GradientComponent as t, useExtensionManager as u, Color3GradientList as v, Color3PropertyLine as w, Color4GradientComponent as x, Color4GradientList as y, Color4PropertyLine as z };
-//# sourceMappingURL=index-BCbXjPTn.js.map
+export { GizmoServiceIdentity as $, Accordion as A, Button as B, CheckboxPropertyLine as C, ColorPickerPopup as D, ColorStepGradientComponent as E, ComboBox as F, ComboBoxPropertyLine as G, ConstructorFactory as H, ConvertOptions as I, DebugServiceIdentity as J, DetachDebugLayer as K, Link as L, MessageBar as M, NumberInputPropertyLine as N, DraggableLine as O, Popover as P, Dropdown as Q, EntitySelector as R, ShellServiceIdentity as S, TextInputPropertyLine as T, ErrorBoundary as U, Vector3PropertyLine as V, ExtensibleAccordion as W, FactorGradientComponent as X, FactorGradientList as Y, FileUploadLine as Z, GetPropertyDescriptor as _, useToast as a, ToastProvider as a$, HexPropertyLine as a0, InfoLabel as a1, InputHexField as a2, InputHsvField as a3, InspectableCommandRegistryIdentity as a4, Inspector as a5, InterceptFunction as a6, InterceptProperty as a7, IsPropertyReadonly as a8, LineContainer as a9, SelectionServiceDefinition as aA, SettingsServiceIdentity as aB, SettingsStore as aC, SettingsStoreIdentity as aD, ShowInspector as aE, SidePaneContainer as aF, SkeletonSelector as aG, Slider as aH, SpinButton as aI, StartInspectable as aJ, StatsServiceIdentity as aK, StringDropdown as aL, StringDropdownPropertyLine as aM, StringifiedPropertyLine as aN, Switch as aO, SwitchPropertyLine as aP, SyncedSliderInput as aQ, SyncedSliderPropertyLine as aR, TeachingMoment as aS, TextAreaPropertyLine as aT, TextInput as aU, TextPropertyLine as aV, Textarea as aW, TextureSelector as aX, TextureUpload as aY, Theme as aZ, ThemeServiceIdentity as a_, LinkPropertyLine as aa, LinkToEntityPropertyLine as ab, List as ac, MakeDialogTeachingMoment as ad, MakeLazyComponent as ae, MakeModularTool as af, MakePopoverTeachingMoment as ag, MakePropertyHook as ah, MakeTeachingMoment as ai, MaterialSelector as aj, NodeSelector as ak, NumberDropdown as al, NumberDropdownPropertyLine as am, ObservableCollection as an, Pane as ao, PlaceholderPropertyLine as ap, PositionedPopover as aq, PropertiesServiceIdentity as ar, Property as as, PropertyContext as at, PropertyLine as au, QuaternionPropertyLine as av, RotationVectorPropertyLine as aw, SceneExplorerServiceIdentity as ax, SearchBar as ay, SearchBox as az, useInterceptObservable as b, ToggleButton as b0, Tooltip as b1, UploadButton as b2, Vector2PropertyLine as b3, Vector4PropertyLine as b4, WatcherServiceIdentity as b5, useAngleConverters as b6, useAsyncResource as b7, useColor3Property as b8, useColor4Property as b9, useEventListener as ba, useEventfulState as bb, useKeyListener as bc, useKeyState as bd, useObservableCollection as be, useOrderedObservableCollection as bf, usePollingObservable as bg, usePropertyChangedNotifier as bh, useQuaternionProperty as bi, useResource as bj, useTheme as bk, useThemeMode as bl, useVector3Property as bm, 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, BuiltInsExtensionFeed as p, Checkbox as q, ChildWindow as r, Collapse as s, Color3GradientComponent as t, useExtensionManager as u, Color3GradientList as v, Color3PropertyLine as w, Color4GradientComponent as x, Color4GradientList as y, Color4PropertyLine as z };
+//# sourceMappingURL=index-DmfAhsIm.js.map