@babylonjs/inspector 9.1.0 → 9.2.0

package/lib/{index-BCbXjPTn.js → index-FWuITINA.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, 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" }) })] }));
 };
 /**
@@ -4147,14 +4152,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 +4179,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 +4475,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: 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 +4507,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 +4524,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 +4580,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 +4628,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 +4676,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 +4685,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 +4757,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)));
                         }
                     } }) })] }));
 };
@@ -6343,7 +6348,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 +6912,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 +6947,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 +8149,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 +8223,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 +8289,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 +8387,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 +8414,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 +8462,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-eRZtqcfj.js');
                     await serviceContainer.addServiceAsync(ExtensionListServiceDefinition);
                 }
                 // Register all external services (that make up a unique tool).
@@ -8536,17 +8578,934 @@ const DefaultInspectorExtensionFeed = new BuiltInsExtensionFeed("Inspector", [
         description: "Adds a new panel for easy creation of various Babylon assets. This is a WIP extension...expect changes!",
         keywords: ["creation", "tools"],
         ...BabylonWebResources,
-        getExtensionModuleAsync: async () => await import('./quickCreateToolsService-BoqrJqoM.js'),
+        getExtensionModuleAsync: async () => await import('./quickCreateToolsService-MzZbVrvr.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'),
+        getExtensionModuleAsync: async () => await import('./reflectorService-DdPEZLjO.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;
+}
+/**
+ * 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
+ */
+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
  * The expandable RGBA values are synced sliders that allow the user to modify the color's RGBA values directly
@@ -8735,6 +9694,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 +15539,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 +15582,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 +15591,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 +15608,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 +15617,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 +15626,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 +15635,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 +15644,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 +16005,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 }),
@@ -17172,42 +18080,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.
@@ -19846,7 +20718,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 +21423,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 });
                     },
                 };
@@ -22117,6 +22989,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 +23043,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());
@@ -22213,6 +23078,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 +23087,7 @@ function ShowInspector(scene, options = {}) {
         const modularTool = MakeModularTool({
             namespace: "Inspector",
             containerElement,
+            parentContainer: inspectableToken.serviceContainer,
             serviceDefinitions: [
                 // Default Inspector services.
                 ...serviceDefinitions,
@@ -23054,5 +23922,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, Tooltip 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, SettingsServiceIdentity as aA, SettingsStoreIdentity as aB, ShowInspector as aC, SidePaneContainer as aD, SkeletonSelector as aE, Slider as aF, SpinButton as aG, StartInspectable as aH, StatsServiceIdentity as aI, StringDropdown as aJ, StringDropdownPropertyLine as aK, StringifiedPropertyLine as aL, Switch as aM, SwitchPropertyLine as aN, SyncedSliderInput as aO, SyncedSliderPropertyLine as aP, TeachingMoment as aQ, TextAreaPropertyLine as aR, TextInput as aS, TextPropertyLine as aT, Textarea as aU, TextureSelector as aV, TextureUpload as aW, Theme as aX, ThemeServiceIdentity as aY, ToastProvider as aZ, ToggleButton as a_, LinkPropertyLine as aa, LinkToEntityPropertyLine as ab, List as ac, MakeDialogTeachingMoment as ad, MakeLazyComponent as ae, MakePopoverTeachingMoment as af, MakePropertyHook as ag, MakeTeachingMoment as ah, MaterialSelector as ai, NodeSelector as aj, NumberDropdown as ak, NumberDropdownPropertyLine as al, ObservableCollection as am, Pane as an, PlaceholderPropertyLine as ao, PositionedPopover as ap, PropertiesServiceIdentity as aq, Property as ar, PropertyContext as as, PropertyLine as at, QuaternionPropertyLine as au, RotationVectorPropertyLine as av, SceneExplorerServiceIdentity as aw, SearchBar as ax, SearchBox as ay, SelectionServiceDefinition as az, useInterceptObservable as b, UploadButton as b0, Vector2PropertyLine as b1, Vector4PropertyLine as b2, WatcherServiceIdentity as b3, useAngleConverters as b4, useAsyncResource as b5, useColor3Property as b6, useColor4Property as b7, useEventListener as b8, useEventfulState as b9, useKeyListener as ba, useKeyState as bb, useObservableCollection as bc, useOrderedObservableCollection as bd, usePollingObservable as be, usePropertyChangedNotifier as bf, useQuaternionProperty as bg, useResource as bh, useSetting as bi, useTheme as bj, useThemeMode as bk, useVector3Property as bl, 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-FWuITINA.js.map