@babylonjs/inspector 9.26.0 → 9.26.2

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

@@ -1,18 +1,16 @@
 import { Observable } from '@babylonjs/core/Misc/observable.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { createContext, forwardRef, useContext, useState, useCallback, Component, useEffect, useMemo, useReducer, useRef, Children, isValidElement, useLayoutEffect, useImperativeHandle, cloneElement, createElement, Suspense, lazy } from 'react';
-import { tokens, makeStyles, Tooltip as Tooltip$1, Button as Button$1, Spinner, useFluent, Accordion as Accordion$1, AccordionHeader, Subtitle2Stronger, AccordionPanel, Divider, MessageBar as MessageBar$1, MessageBarBody, AccordionItem, SearchBox as SearchBox$1, Portal, mergeClasses, createLightTheme, createDarkTheme, createDOMRenderer, FluentProvider, RendererProvider, TeachingPopover, TeachingPopoverSurface, TeachingPopoverHeader, TeachingPopoverBody, useId, useToastController, Toast, ToastTitle, Toaster, Menu, MenuTrigger, SplitButton, MenuPopover, MenuList, MenuItem, Toolbar as Toolbar$1, ToolbarRadioButton, MenuGroup, MenuGroupHeader, Link as Link$1, Caption1, Body1, ToggleButton as ToggleButton$1, InfoLabel as InfoLabel$1, Body1Strong, Checkbox as Checkbox$1, Switch as Switch$1, Dropdown as Dropdown$1, Option, useMergedRefs, Input, Slider as Slider$1, MenuItemRadio, Dialog, DialogSurface, DialogBody, DialogTitle, DialogContent, DialogActions, List as List$1, ListItem, useComboboxFilter, Combobox, MessageBarTitle, Popover as Popover$1, PopoverTrigger, PopoverSurface, Field, Textarea as Textarea$1, PresenceBadge, treeItemLevelToken, typographyStyles, FlatTree, FlatTreeItem, MenuDivider, TreeItemLayout, MenuItemCheckbox } from '@fluentui/react-components';
-import { ErrorCircleRegular, EyeFilled, EyeOffRegular, CheckmarkFilled, EditRegular, FilterRegular, PinFilled, PinRegular, ArrowCircleUpRegular, PanelLeftExpandRegular, PanelRightExpandRegular, PanelLeftContractRegular, PanelRightContractRegular, PictureInPictureEnterRegular, MoreHorizontalRegular, LayoutColumnTwoFocusLeftFilled, LayoutColumnTwoSplitLeftFocusTopLeftFilled, LayoutColumnTwoSplitLeftFocusBottomLeftFilled, LayoutColumnTwoFocusRightFilled, LayoutColumnTwoSplitRightFocusTopRightFilled, LayoutColumnTwoSplitRightFocusBottomRightFilled, SettingsRegular, ChevronCircleRight16Regular, ChevronCircleRight20Regular, ChevronCircleDown16Regular, ChevronCircleDown20Regular, Copy16Regular, CopyRegular, DocumentTextRegular, ArrowBidirectionalUpDownFilled, ArrowClockwiseRegular, WeatherSunnyRegular, WeatherMoonRegular, InfoRegular, WarningRegular, CheckmarkCircleRegular, DeleteFilled, LinkDismissRegular, LinkEditRegular, AddRegular, DeleteRegular, ArrowUploadRegular, createFluentIcon, TextSortAscendingRegular, GlobeRegular, ArrowExpandAllRegular, ArrowCollapseAllRegular, ChevronRightRegular, CubeTreeRegular, EngineRegular, WindowRegular, TextFieldRegular, PersonSquareRegular, TextTRegular, ImageRegular } from '@fluentui/react-icons';
+import { tokens, makeStyles, Tooltip as Tooltip$1, Button as Button$1, Spinner, useFluent, Accordion as Accordion$1, AccordionHeader, Subtitle2Stronger, AccordionPanel, Divider, MessageBar as MessageBar$1, MessageBarBody, AccordionItem, SearchBox as SearchBox$1, Portal, mergeClasses, createLightTheme, createDarkTheme, createDOMRenderer, FluentProvider, RendererProvider, TeachingPopover, TeachingPopoverSurface, TeachingPopoverHeader, TeachingPopoverBody, useId, useToastController, Toast, ToastTitle, Toaster, Menu, MenuTrigger, SplitButton, MenuPopover, MenuList, MenuItem, Toolbar as Toolbar$1, ToolbarRadioButton, MenuGroup, MenuGroupHeader, Link as Link$1, Caption1, Body1, ToggleButton as ToggleButton$1, InfoLabel as InfoLabel$1, Body1Strong, Checkbox as Checkbox$1, Switch as Switch$1, Dropdown as Dropdown$1, Option, useMergedRefs, Input, Slider as Slider$1, MenuItemRadio, Dialog, DialogSurface, DialogBody, DialogTitle, DialogContent, DialogActions, List as List$1, ListItem, useComboboxFilter, Combobox, MessageBarTitle, Popover as Popover$1, PopoverTrigger, PopoverSurface, Field, Textarea as Textarea$1, PresenceBadge, treeItemLevelToken, typographyStyles, FlatTree, FlatTreeItem, MenuDivider, TreeItemLayout, MenuItemCheckbox, ColorPicker, ColorArea, ColorSlider, AlphaSlider, ColorSwatch } from '@fluentui/react-components';
+import { ErrorCircleRegular, EyeFilled, EyeOffRegular, CheckmarkFilled, EditRegular, FilterRegular, PinFilled, PinRegular, ArrowCircleUpRegular, PanelLeftExpandRegular, PanelRightExpandRegular, PanelLeftContractRegular, PanelRightContractRegular, PictureInPictureEnterRegular, MoreHorizontalRegular, LayoutColumnTwoFocusLeftFilled, LayoutColumnTwoSplitLeftFocusTopLeftFilled, LayoutColumnTwoSplitLeftFocusBottomLeftFilled, LayoutColumnTwoFocusRightFilled, LayoutColumnTwoSplitRightFocusTopRightFilled, LayoutColumnTwoSplitRightFocusBottomRightFilled, SettingsRegular, ChevronCircleRight16Regular, ChevronCircleRight20Regular, ChevronCircleDown16Regular, ChevronCircleDown20Regular, Copy16Regular, CopyRegular, DocumentTextRegular, ArrowBidirectionalUpDownFilled, ArrowClockwiseRegular, WeatherSunnyRegular, WeatherMoonRegular, InfoRegular, WarningRegular, CheckmarkCircleRegular, DeleteFilled, LinkDismissRegular, LinkEditRegular, AddRegular, DeleteRegular, ArrowUploadRegular, createFluentIcon, TextSortAscendingRegular, GlobeRegular, ArrowExpandAllRegular, ArrowCollapseAllRegular, ChevronRightRegular, CubeTreeRegular, EngineRegular, WindowRegular, TextFieldRegular, PersonSquareRegular, SaveRegular, ArrowUndoRegular, BracesRegular, BracesDismiss16Regular, CameraRegular, LightbulbRegular, EyeRegular, MyLocationRegular, LayerDiagonalPersonRegular, TextTRegular, ImageRegular } from '@fluentui/react-icons';
 import { DataStorage } from '@babylonjs/core/Misc/dataStorage.js';
-import { Logger } from '@babylonjs/core/Misc/logger.js';
 import { AsyncLock } from '@babylonjs/core/Misc/asyncLock.js';
 import { Deferred } from '@babylonjs/core/Misc/deferred.js';
 import { useResizeHandle } from '@fluentui-contrib/react-resize-handle';
 import { Collapse as Collapse$1, Fade } from '@fluentui/react-motion-components-preview';
-import { GetClassName } from '@babylonjs/core/Misc/typeStore.js';
-import { Clamp } from '@babylonjs/core/Maths/math.scalar.functions.js';
+import { Logger } from '@babylonjs/core/Misc/logger.js';
 import { createRoot } from 'react-dom/client';
-import { getRenderingContexts, getRenderingContextKind, getMaterialFamily, getMaterialTextures, resizeEngine } from '@babylonjs/lite';
+import { getRenderingContexts, getRenderingContextKind, quatToEulerXYZ, eulerToQuat, getMaterialFamily, setSubtreeVisible, spriteBlendOpaque, spriteBlendOneOne, spriteBlendMultiply, spriteBlendAdditive, spriteBlendPremultiplied, spriteBlendAlpha, removeFromScene, getMaterialTextures, setParent, resizeEngine } from '@babylonjs/lite';
 import { VirtualizerScrollView } from '@fluentui-contrib/react-virtualizer';
 import { UniqueIdGenerator } from '@babylonjs/core/Misc/uniqueIdGenerator.js';
 import { Color3, Color4 } from '@babylonjs/core/Maths/math.color.js';
@@ -263,7 +261,7 @@ const Button = forwardRef((props, ref) => {
 });
 Button.displayName = "Button";
 
-const useStyles$l = makeStyles({
+const useStyles$n = makeStyles({
     root: {
         display: "flex",
         flexDirection: "column",
@@ -347,7 +345,7 @@ class ErrorBoundary extends Component {
     }
 }
 function ErrorFallback({ error, onRetry }) {
-    const styles = useStyles$l();
+    const styles = useStyles$n();
     return (jsxs("div", { className: styles.root, children: [jsx(ErrorCircleRegular, { className: styles.icon }), jsx("div", { className: styles.title, children: "Something went wrong" }), jsx("div", { className: styles.message, children: "An error occurred in this component. You can try again or continue using other parts of the tool." }), jsx(Button, { label: "Try Again", appearance: "primary", onClick: onRetry }), error && jsx("div", { className: styles.details, children: error.message })] }));
 }
 
@@ -416,9 +414,32 @@ function useKeyState(key, options) {
 // Storage Helpers
 // ============================================================================
 const STORAGE_KEY_ROOT = "Babylon/Accordion";
+const InMemoryStorage = new Map();
+// eslint-disable-next-line no-console
+const Warn = (message) => globalThis.console?.warn?.(message);
+const ReadStoredString = (key) => {
+    try {
+        return globalThis.localStorage?.getItem(key) ?? InMemoryStorage.get(key) ?? "";
+    }
+    catch {
+        return InMemoryStorage.get(key) ?? "";
+    }
+};
+const WriteStoredString = (key, value) => {
+    try {
+        if (globalThis.localStorage) {
+            globalThis.localStorage.setItem(key, value);
+            return;
+        }
+    }
+    catch {
+        // Fall through to in-memory persistence when localStorage is unavailable.
+    }
+    InMemoryStorage.set(key, value);
+};
 const ReadFromStorage = (path, initial) => {
     try {
-        const stored = DataStorage.ReadString(`${STORAGE_KEY_ROOT}/${path}`, "");
+        const stored = ReadStoredString(`${STORAGE_KEY_ROOT}/${path}`);
         return stored ? JSON.parse(stored) : initial;
     }
     catch {
@@ -426,7 +447,7 @@ const ReadFromStorage = (path, initial) => {
     }
 };
 const WriteToStorage = (path, data) => {
-    DataStorage.WriteString(`${STORAGE_KEY_ROOT}/${path}`, JSON.stringify(data));
+    WriteStoredString(`${STORAGE_KEY_ROOT}/${path}`, JSON.stringify(data));
 };
 // ============================================================================
 // Reducer
@@ -584,7 +605,7 @@ function useAccordionSectionItemState(props) {
     const prevItemIdRef = useRef(itemId);
     useEffect(() => {
         if (accordionCtx && prevItemIdRef.current !== itemId) {
-            Logger.Warn(`Accordion: The uniqueId "${itemId}" in section "${sectionCtx?.sectionId}" has changed from "${prevItemIdRef.current}". ` +
+            Warn(`Accordion: The uniqueId "${itemId}" in section "${sectionCtx?.sectionId}" has changed from "${prevItemIdRef.current}". ` +
                 `Each item must have a unique, stable ID for pin/hide persistence to work correctly.`);
         }
         prevItemIdRef.current = itemId;
@@ -596,7 +617,7 @@ function useAccordionSectionItemState(props) {
         }
         const { registeredItemIds } = accordionCtx;
         if (registeredItemIds.has(itemUniqueId)) {
-            Logger.Warn(`Accordion: Duplicate uniqueId "${itemId}" detected in section "${sectionCtx?.sectionId}". ` +
+            Warn(`Accordion: Duplicate uniqueId "${itemId}" detected in section "${sectionCtx?.sectionId}". ` +
                 `Each item must have a unique ID within its section for pin/hide persistence to work correctly.`);
         }
         registeredItemIds.set(itemUniqueId, itemLabel ?? itemId);
@@ -669,7 +690,7 @@ function useIsSectionEmpty(sectionId) {
     return hasItems;
 }
 
-const useStyles$k = makeStyles({
+const useStyles$m = makeStyles({
     accordion: {
         display: "flex",
         flexDirection: "column",
@@ -761,7 +782,7 @@ const useStyles$k = makeStyles({
  */
 const AccordionMenuBar = () => {
     AccordionMenuBar.displayName = "AccordionMenuBar";
-    const classes = useStyles$k();
+    const classes = useStyles$m();
     const accordionCtx = useContext(AccordionContext);
     if (!accordionCtx) {
         return null;
@@ -785,7 +806,7 @@ const AccordionMenuBar = () => {
 const AccordionSectionBlock = (props) => {
     AccordionSectionBlock.displayName = "AccordionSectionBlock";
     const { children, sectionId } = props;
-    const classes = useStyles$k();
+    const classes = useStyles$m();
     const accordionCtx = useContext(AccordionContext);
     const { context: sectionContext, isEmpty } = useAccordionSectionBlockContext(props);
     if (accordionCtx) {
@@ -805,7 +826,7 @@ const AccordionSectionBlock = (props) => {
 const AccordionSectionItem = (props) => {
     AccordionSectionItem.displayName = "AccordionSectionItem";
     const { children, staticItem } = props;
-    const classes = useStyles$k();
+    const classes = useStyles$m();
     const accordionCtx = useContext(AccordionContext);
     const itemState = useAccordionSectionItemState(props);
     const [ctrlMode, setCtrlMode] = useState(false);
@@ -845,7 +866,7 @@ const AccordionSectionItem = (props) => {
  */
 const AccordionPinnedContainer = () => {
     AccordionPinnedContainer.displayName = "AccordionPinnedContainer";
-    const classes = useStyles$k();
+    const classes = useStyles$m();
     const accordionCtx = useContext(AccordionContext);
     return (jsx("div", { ref: accordionCtx?.pinnedContainerRef, className: classes.pinnedContainer, children: jsx(MessageBar$1, { className: classes.pinnedContainerEmpty, children: jsx(MessageBarBody, { children: "No pinned items" }) }) }));
 };
@@ -856,7 +877,7 @@ const AccordionPinnedContainer = () => {
  */
 const AccordionSearchBox = () => {
     AccordionSearchBox.displayName = "AccordionSearchBox";
-    const classes = useStyles$k();
+    const classes = useStyles$m();
     const accordionCtx = useContext(AccordionContext);
     if (!accordionCtx?.features.search) {
         return null;
@@ -872,7 +893,7 @@ const AccordionSearchBox = () => {
  */
 const AccordionSection = (props) => {
     AccordionSection.displayName = "AccordionSection";
-    const classes = useStyles$k();
+    const classes = useStyles$m();
     return jsx("div", { className: classes.panelDiv, children: props.children });
 };
 const StringAccordion = Accordion$1;
@@ -880,7 +901,7 @@ const Accordion = forwardRef((props, ref) => {
     Accordion.displayName = "Accordion";
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const { children, highlightSections, uniqueId, enablePinnedItems, enableHiddenItems, enableSearchItems, ...rest } = props;
-    const classes = useStyles$k();
+    const classes = useStyles$m();
     const { size } = useContext(ToolContext);
     const accordionCtx = useAccordionContext(props);
     const hasPinning = accordionCtx?.features.pinning ?? false;
@@ -1106,7 +1127,7 @@ const UXContextProvider = (props) => {
 function AsReadonlyArray(array) {
     return array;
 }
-const useStyles$j = makeStyles({
+const useStyles$l = makeStyles({
     rootDiv: {
         flex: 1,
         overflow: "hidden",
@@ -1121,7 +1142,7 @@ const useStyles$j = makeStyles({
  * @returns The extensible accordion component.
  */
 function ExtensibleAccordion(props) {
-    const classes = useStyles$j();
+    const classes = useStyles$l();
     const { children, sections, sectionContent, context, sectionsRef, ...rest } = props;
     const defaultSections = useMemo(() => {
         const defaultSections = [];
@@ -1246,7 +1267,7 @@ function ExtensibleAccordion(props) {
                     })] }) })) }));
 }
 
-const useStyles$i = makeStyles({
+const useStyles$k = makeStyles({
     paneRootDiv: {
         display: "flex",
         flex: 1,
@@ -1259,7 +1280,7 @@ const useStyles$i = makeStyles({
  */
 const SidePaneContainer = forwardRef((props, ref) => {
     const { className, ...rest } = props;
-    const classes = useStyles$i();
+    const classes = useStyles$k();
     return (jsx("div", { className: mergeClasses(classes.paneRootDiv, className), ref: ref, ...rest, children: props.children }));
 });
 
@@ -1530,7 +1551,7 @@ function useTheme(invert = false) {
 }
 
 // Fluent doesn't apply styling to scrollbars by default, so provide our own reasonable default.
-const useStyles$h = makeStyles({
+const useStyles$j = makeStyles({
     root: {
         scrollbarColor: `${tokens.colorNeutralForeground3} ${tokens.colorTransparentBackground}`,
     },
@@ -1551,7 +1572,7 @@ const Theme = (props) => {
     // break any UI within the portal. Therefore, default to false.
     const { invert = false, applyStylesToPortals = false, className, targetDocument: explicitTargetDocument, ...rest } = props;
     const theme = useTheme(invert);
-    const classes = useStyles$h();
+    const classes = useStyles$j();
     // Resolve the target document from the explicit prop or fall back to the ambient Fluent context.
     // This makes nested <Theme> components automatically inherit cross-window targeting from a
     // top-level <Theme targetDocument={popupDocument}> wrapper.
@@ -1573,7 +1594,7 @@ const Theme = (props) => {
     return fluent;
 };
 
-const useStyles$g = makeStyles({
+const useStyles$i = makeStyles({
     extensionTeachingPopover: {
         maxWidth: "320px",
     },
@@ -1584,7 +1605,7 @@ const useStyles$g = makeStyles({
  * @returns The teaching moment popover.
  */
 const TeachingMoment = ({ shouldDisplay, positioningRef, onOpenChange, title, description }) => {
-    const classes = useStyles$g();
+    const classes = useStyles$i();
     return (jsx(TeachingPopover, { appearance: "brand", open: shouldDisplay, positioning: { positioningRef }, onOpenChange: onOpenChange, children: jsxs(TeachingPopoverSurface, { className: classes.extensionTeachingPopover, children: [jsx(TeachingPopoverHeader, { children: title }), jsx(TeachingPopoverBody, { children: description })] }) }));
 };
 
@@ -1953,6 +1974,10 @@ const UseDegreesSettingDescriptor = {
     key: "UseDegrees",
     defaultValue: true,
 };
+const UseEulerSettingDescriptor = {
+    key: "UseEuler",
+    defaultValue: true,
+};
 
 const RadiansToDegrees = 180 / Math.PI;
 function WrapAngle(angle) {
@@ -2416,7 +2441,7 @@ const RootComponentServiceIdentity = Symbol("RootComponent");
  * The unique identity symbol for the shell service.
  */
 const ShellServiceIdentity = Symbol("ShellService");
-const useStyles$f = makeStyles({
+const useStyles$h = makeStyles({
     mainView: {
         flex: 1,
         display: "flex",
@@ -2638,14 +2663,14 @@ const DockMenu = (props) => {
 };
 const PaneHeader = (props) => {
     const { id, title, dockOptions } = props;
-    const classes = useStyles$f();
+    const classes = useStyles$h();
     return (jsxs("div", { className: classes.paneHeaderDiv, children: [props.icon && (jsx("div", { className: classes.paneHeaderIcon, children: jsx(props.icon, {}) })), jsx(Subtitle2Stronger, { className: mergeClasses(classes.paneHeaderText, !props.icon && classes.paneHeaderTextNoIcon), children: title }), jsx(DockMenu, { sidePaneId: id, dockOptions: dockOptions, children: jsx(Button$1, { className: classes.paneHeaderButton, appearance: "transparent", icon: jsx(MoreHorizontalRegular, {}) }) })] }));
 };
 // This is a wrapper for an item in a toolbar that simply adds a teaching moment, which is useful for dynamically added items, possibly from extensions.
 const ToolbarItem = (props) => {
     // eslint-disable-next-line @typescript-eslint/naming-convention
     const { verticalLocation, horizontalLocation, id, component: Component, displayName } = props;
-    const classes = useStyles$f();
+    const classes = useStyles$h();
     const useTeachingMoment = useMemo(() => MakePopoverTeachingMoment(`Bar/${verticalLocation}/${horizontalLocation}/${displayName ?? id}`), [displayName, id]);
     const teachingMoment = useTeachingMoment(props.teachingMoment === false);
     const title = typeof props.teachingMoment === "object" ? props.teachingMoment.title : (displayName ?? id);
@@ -2655,7 +2680,7 @@ const ToolbarItem = (props) => {
 // TODO: Handle overflow, possibly via https://react.fluentui.dev/?path=/docs/components-overflow--docs with priority.
 // This component just renders a toolbar with left aligned toolbar items on the left and right aligned toolbar items on the right.
 const Toolbar = ({ location, components }) => {
-    const classes = useStyles$f();
+    const classes = useStyles$h();
     const leftComponents = useMemo(() => components.filter((entry) => entry.horizontalLocation === "left"), [components]);
     const rightComponents = useMemo(() => components.filter((entry) => entry.horizontalLocation === "right"), [components]);
     return (jsxs("div", { className: `${classes.bar} ${location === "top" ? classes.barTop : classes.barBottom}`, children: [jsx("div", { className: classes.barLeft, children: leftComponents.map((entry) => (jsx(ToolbarItem, { verticalLocation: location, horizontalLocation: entry.horizontalLocation, id: entry.key, component: entry.component, displayName: entry.displayName, teachingMoment: entry.teachingMoment }, entry.key))) }), jsx("div", { className: classes.barRight, children: rightComponents.map((entry) => (jsx(ToolbarItem, { verticalLocation: location, horizontalLocation: entry.horizontalLocation, id: entry.key, component: entry.component, displayName: entry.displayName, teachingMoment: entry.teachingMoment }, entry.key))) })] }));
@@ -2665,7 +2690,7 @@ const SidePaneTab = (props) => {
     const { location, id, isSelected, isFirst, isLast, dockOptions, 
     // eslint-disable-next-line @typescript-eslint/naming-convention
     icon: Icon, title, } = props;
-    const classes = useStyles$f();
+    const classes = useStyles$h();
     const useTeachingMoment = useMemo(() => MakePopoverTeachingMoment(`Pane/${location}/${title ?? id}`), [title, id]);
     const teachingMoment = useTeachingMoment(props.teachingMoment === false);
     const tabClass = mergeClasses(classes.tab, isSelected ? classes.selectedTab : classes.unselectedTab, isFirst ? classes.firstTab : undefined, isLast ? classes.lastTab : undefined);
@@ -2677,7 +2702,7 @@ const SidePaneTab = (props) => {
 // In "compact" mode, the tab list is integrated into the pane itself.
 // In "full" mode, the returned tab list is later injected into the toolbar.
 function usePane(location, defaultWidth, minWidth, sidePanes, onSelectSidePane, dockOperations, toolbarMode, topBarItems, bottomBarItems, initialCollapsed) {
-    const classes = useStyles$f();
+    const classes = useStyles$h();
     const [topSelectedTab, setTopSelectedTab] = useState();
     const [bottomSelectedTab, setBottomSelectedTab] = useState();
     const [collapsed, setCollapsed] = useState(initialCollapsed);
@@ -2919,7 +2944,7 @@ function MakeShellServiceDefinition({ leftPaneDefaultWidth = 350, leftPaneMinWid
                 expand: () => onCollapseChanged.notifyObservers({ location: "right", collapsed: false }),
             };
             const rootComponent = () => {
-                const classes = useStyles$f();
+                const classes = useStyles$h();
                 const [sidePaneDockOverrides, setSidePaneDockOverrides] = useSetting(SidePaneDockOverridesSettingDescriptor);
                 // This function returns a promise that resolves after the dock change takes effect so that
                 // we can then select the re-docked pane.
@@ -3202,7 +3227,11 @@ function copyCommandToClipboard(strCommand) {
 // babylonNamespace is either "" (ES6) or "BABYLON."
 // eslint-disable-next-line @typescript-eslint/naming-convention
 function getClassNameWithNamespace(obj) {
-    let className = GetClassName(obj);
+    if ((typeof obj !== "object" && typeof obj !== "function") || obj === null) {
+        return { className: "Unknown", babylonNamespace: "" };
+    }
+    const candidate = obj;
+    let className = candidate.getClassName?.() ?? candidate.constructor?.name ?? "Unknown";
     if (className.includes("BABYLON.")) {
         className = className.split("BABYLON.")[1];
     }
@@ -3217,7 +3246,7 @@ const Link = forwardRef((props, ref) => {
 });
 Link.displayName = "Link";
 
-const useStyles$e = makeStyles({
+const useStyles$g = makeStyles({
     button: {
         display: "flex",
         alignItems: "center",
@@ -3235,7 +3264,7 @@ const ToggleButton = (props) => {
     ToggleButton.displayName = "ToggleButton";
     const { value, onChange, title, appearance = "subtle", ariaLabel } = props;
     const { size } = useContext(ToolContext);
-    const classes = useStyles$e();
+    const classes = useStyles$g();
     const [checked, setChecked] = useState(value);
     const toggle = useCallback(() => {
         setChecked((prevChecked) => {
@@ -3558,13 +3587,13 @@ function useImpulse() {
     return [value, pulse];
 }
 
-const useStyles$d = makeStyles({
+const useStyles$f = makeStyles({
     placeholderDiv: {
         padding: `${tokens.spacingVerticalM} ${tokens.spacingHorizontalM}`,
     },
 });
 const PropertiesPane = (props) => {
-    const classes = useStyles$d();
+    const classes = useStyles$f();
     const entity = props.context;
     return entity != null ? (jsx(ExtensibleAccordion, { ...props })) : (jsx("div", { className: classes.placeholderDiv, children: jsx(Body1Strong, { italic: true, children: "No entity selected." }) }));
 };
@@ -3694,7 +3723,7 @@ const Dropdown = (props) => {
 const NumberDropdown = Dropdown;
 const StringDropdown = Dropdown;
 
-const useStyles$c = makeStyles({
+const useStyles$e = makeStyles({
     dropdown: {
         ...UniformWidthStyling,
     },
@@ -3706,7 +3735,7 @@ const useStyles$c = makeStyles({
  */
 const DropdownPropertyLine = forwardRef((props, ref) => {
     DropdownPropertyLine.displayName = "DropdownPropertyLine";
-    const classes = useStyles$c();
+    const classes = useStyles$e();
     return (jsx(PropertyLine, { ...props, ref: ref, children: jsx(Dropdown, { ...props, className: classes.dropdown }) }));
 });
 /**
@@ -3753,7 +3782,7 @@ function EvaluateExpression(rawValue) {
         return NaN;
     }
 }
-const useStyles$b = makeStyles({
+const useStyles$d = makeStyles({
     icon: {
         "&:hover": {
             color: tokens.colorBrandForeground1,
@@ -3767,7 +3796,7 @@ const useStyles$b = makeStyles({
 const SpinButton = forwardRef((props, ref) => {
     SpinButton.displayName = "SpinButton2";
     const inputClasses = useInputStyles$1();
-    const classes = useStyles$b();
+    const classes = useStyles$d();
     const { size } = useContext(ToolContext);
     const { min, max } = props;
     const baseStep = props.step ?? 1;
@@ -3815,7 +3844,7 @@ const SpinButton = forwardRef((props, ref) => {
         return !invalid;
     }, [min, max, props.validator, props.forceInt]);
     // Constrain a value to the valid range by clamping to [min, max].
-    const constrainValue = useCallback((v) => Clamp(v, min ?? -Infinity, max ?? Infinity), [min, max]);
+    const constrainValue = useCallback((v) => Math.min(max ?? Infinity, Math.max(min ?? -Infinity, v)), [min, max]);
     const tryCommitValue = useCallback((currVal) => {
         if (validateValue(currVal) && currVal !== lastCommittedValue.current) {
             lastCommittedValue.current = currVal;
@@ -4083,7 +4112,7 @@ const SyncedSliderInput = (props) => {
     return (jsxs("div", { className: mergeClasses(classes.container, props.className), children: [infoLabel && jsx(InfoLabel, { ...infoLabel, htmlFor: "syncedSlider" }), jsxs("div", { id: "syncedSlider", className: classes.syncedSlider, children: [hasSlider && (jsx(Slider, { className: getSliderClassName(), value: value, onChange: handleSliderChange, min: props.min, max: props.max, step: props.step, disabled: props.disabled, onPointerDown: handleSliderPointerDown, onPointerUp: handleSliderPointerUp })), jsx(SpinButton, { ...passthroughProps, className: useCompactSizing ? classes.compactSpinButton : classes.spinButton, inputClassName: useCompactSizing ? classes.compactSpinButtonInput : classes.spinButtonInput, value: value, onChange: handleInputChange, step: props.step, disabled: props.disabled, disableDragButton: true })] })] }));
 };
 
-const useStyles$a = makeStyles({
+const useStyles$c = makeStyles({
     uniformWidth: {
         ...UniformWidthStyling,
     },
@@ -4095,7 +4124,7 @@ const useStyles$a = makeStyles({
  */
 const SyncedSliderPropertyLine = forwardRef((props, ref) => {
     SyncedSliderPropertyLine.displayName = "SyncedSliderPropertyLine";
-    const classes = useStyles$a();
+    const classes = useStyles$c();
     const { label, description, ...sliderProps } = props;
     return (jsx(PropertyLine, { ref: ref, ...props, children: jsx(SyncedSliderInput, { ...sliderProps, className: mergeClasses(classes.uniformWidth, props.className) }) }));
 });
@@ -4896,7 +4925,7 @@ function useExtensionManager() {
     return useContext(ExtensionManagerContext)?.extensionManager;
 }
 
-const useStyles$9 = makeStyles({
+const useStyles$b = makeStyles({
     themeButton: {
         margin: 0,
     },
@@ -4915,7 +4944,7 @@ const ThemeSelectorServiceDefinition = {
             teachingMoment: false,
             order: -300,
             component: () => {
-                const classes = useStyles$9();
+                const classes = useStyles$b();
                 const { isDarkMode, themeMode, setThemeMode } = useThemeMode();
                 const onSelectedThemeChange = useCallback((e, data) => {
                     setThemeMode(data.checkedItems.includes("System") ? "system" : data.checkedItems[0].toLocaleLowerCase());
@@ -4932,7 +4961,7 @@ const ThemeSelectorServiceDefinition = {
     },
 };
 
-const useStyles$8 = makeStyles({
+const useStyles$a = makeStyles({
     app: {
         colorScheme: "light dark",
         flexGrow: 1,
@@ -4996,7 +5025,7 @@ function MakeModularTool(options) {
     // This deferred resolves once the React effect cleanup (which disposes the ServiceContainer) is complete.
     const disposeDeferred = new Deferred();
     const modularToolRootComponent = () => {
-        const classes = useStyles$8();
+        const classes = useStyles$a();
         const [requiredExtensions, setRequiredExtensions] = useState();
         const [requiredExtensionsDeferred, setRequiredExtensionsDeferred] = useState();
         const [extensionInstallError, setExtensionInstallError] = useState();
@@ -5108,7 +5137,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-xgITNk9y.js');
+                    const { ExtensionListServiceDefinition } = await import('./extensionsListService-D1JivcAu.js');
                     serviceContainer.addService(ExtensionListServiceDefinition);
                 }
                 // Register all external services (that make up a unique tool).
@@ -5508,7 +5537,7 @@ const Checkbox = (props) => {
     return jsx(Checkbox$1, { checked: checked, onChange: onChange, indicator: { className: classes.indicator } });
 };
 
-const useStyles$7 = makeStyles({
+const useStyles$9 = makeStyles({
     root: {
         display: "grid",
         gridTemplateRows: "repeat(1fr)",
@@ -5538,7 +5567,7 @@ const useStyles$7 = makeStyles({
 const ComboBox = forwardRef((props, ref) => {
     ComboBox.displayName = "ComboBox";
     const comboId = useId();
-    const styles = useStyles$7();
+    const styles = useStyles$9();
     const { size } = useContext(ToolContext);
     // Find the label for the current value
     const getLabel = (value) => props.options.find((opt) => opt.value === value)?.label ?? "";
@@ -5615,7 +5644,7 @@ const DraggableLine = (props) => {
         }, children: [props.label, props.onDelete && jsx(DeleteFilled, { className: classes.icon, onClick: props.onDelete })] }));
 };
 
-const useStyles$6 = makeStyles({
+const useStyles$8 = makeStyles({
     linkDiv: {
         display: "flex",
         flexDirection: "row",
@@ -5640,7 +5669,7 @@ const useStyles$6 = makeStyles({
 function EntitySelector(props) {
     const { value, onLink, getEntities, getName, filter, defaultValue } = props;
     const onChange = props.onChange;
-    const classes = useStyles$6();
+    const classes = useStyles$8();
     const comboBoxRef = useRef(null);
     // Build options with uniqueId as key
     const options = useMemo(() => {
@@ -5767,7 +5796,7 @@ const MessageBar = (props) => {
     return (jsx(AccordionSectionItem, { uniqueId: title ?? message, staticItem: staticItem ?? true, children: jsx("div", { className: classes.container, children: jsx(MessageBar$1, { intent: intent, layout: "multiline", children: jsxs(MessageBarBody, { children: [title && jsx(MessageBarTitle, { children: title }), message, docLink && (jsxs(Fragment, { children: [" - ", jsx(Link, { url: docLink, value: "Learn More" })] }))] }) }) }) }));
 };
 
-const useStyles$5 = makeStyles({
+const useStyles$7 = makeStyles({
     surface: {
         maxWidth: "400px",
     },
@@ -5782,7 +5811,7 @@ const useStyles$5 = makeStyles({
 const Popover = forwardRef((props, ref) => {
     const { children, open: controlledOpen, onOpenChange, positioning, surfaceClassName } = props;
     const [internalOpen, setInternalOpen] = useState(false);
-    const classes = useStyles$5();
+    const classes = useStyles$7();
     const isControlled = controlledOpen !== undefined;
     const popoverOpen = isControlled ? controlledOpen : internalOpen;
     const handleOpenChange = (_, data) => {
@@ -5828,14 +5857,14 @@ const PositionedPopover = (props) => {
                     } }) }), jsx(PopoverSurface, { children: props.children })] }));
 };
 
-const useStyles$4 = makeStyles({
+const useStyles$6 = makeStyles({
     search: {
         minWidth: "50px",
     },
 });
 const SearchBar = forwardRef((props, ref) => {
     SearchBar.displayName = "SearchBar";
-    const classes = useStyles$4();
+    const classes = useStyles$6();
     const onChange = (_, data) => {
         props.onChange(data.value);
     };
@@ -6051,7 +6080,7 @@ const FileUploadLine = ({ onClick, label, accept, ...buttonProps }) => {
     return (jsx(LineContainer, { uniqueId: `${label}_upload`, label: label, children: jsx(UploadButton, { onUpload: onClick, accept: accept, label: label, ...buttonProps }) }));
 };
 
-const useStyles$3 = makeStyles({
+const useStyles$5 = makeStyles({
     rootDiv: {
         flex: 1,
         overflow: "hidden",
@@ -6071,7 +6100,7 @@ const useStyles$3 = makeStyles({
     },
 });
 const Pane = (props) => {
-    const classes = useStyles$3();
+    const classes = useStyles$5();
     return (jsxs("div", { className: classes.rootDiv, children: [jsxs("div", { className: classes.header, children: [props.icon ? (jsx(props.icon, { className: classes.icon })) : (jsx("img", { className: classes.icon, id: "logo", src: "https://www.babylonjs.com/Assets/logo-babylonjs-social-twitter.png" })), jsx(Body1Strong, { id: "title", children: props.title })] }), props.children] }));
 };
 
@@ -6155,7 +6184,7 @@ const HexPropertyLine = (props) => {
     return (jsx(PropertyLine, { ...props, children: jsx(TextInput, { ...props, validator: MaskValidatorFn, value: hexVal, onChange: onStrValChange, validateOnlyOnBlur: true }) }));
 };
 
-const useStyles$2 = makeStyles({
+const useStyles$4 = makeStyles({
     uniformWidth: {
         ...UniformWidthStyling,
     },
@@ -6167,7 +6196,7 @@ const useStyles$2 = makeStyles({
  */
 const TextInputPropertyLine = (props) => {
     TextInputPropertyLine.displayName = "TextInputPropertyLine";
-    const classes = useStyles$2();
+    const classes = useStyles$4();
     return (jsx(PropertyLine, { ...props, children: jsx(TextInput, { ...props, className: mergeClasses(classes.uniformWidth, props.className) }) }));
 };
 /**
@@ -6178,7 +6207,7 @@ const TextInputPropertyLine = (props) => {
  */
 const NumberInputPropertyLine = (props) => {
     NumberInputPropertyLine.displayName = "NumberInputPropertyLine";
-    const classes = useStyles$2();
+    const classes = useStyles$4();
     return (jsx(PropertyLine, { ...props, children: jsx(SpinButton, { ...props, className: mergeClasses(classes.uniformWidth, props.className) }) }));
 };
 
@@ -6192,14 +6221,14 @@ const LinkPropertyLine = (props) => {
     return (jsx(PropertyLine, { ...props, children: jsx(Link, { ...props }) }));
 };
 
-const useStyles$1 = makeStyles({
+const useStyles$3 = makeStyles({
     uniformWidth: {
         ...UniformWidthStyling,
     },
 });
 const SpinButtonPropertyLine = (props) => {
     SpinButtonPropertyLine.displayName = "SpinButtonPropertyLine";
-    const classes = useStyles$1();
+    const classes = useStyles$3();
     return (jsx(PropertyLine, { ...props, children: jsx(SpinButton, { ...props, className: mergeClasses(classes.uniformWidth, props.className) }) }));
 };
 
@@ -6838,7 +6867,7 @@ function useExplorerDragDrop(options) {
     };
 }
 
-const useStyles = makeStyles({
+const useStyles$2 = makeStyles({
     rootDiv: {
         flex: 1,
         overflow: "hidden",
@@ -6978,7 +7007,7 @@ function useBranchIconInteraction(enabled) {
 }
 const ExplorerTreeItemLayout = (props) => {
     const { isBranch, isOpen, icon, showChevron, select, ...layoutProps } = props;
-    const classes = useStyles();
+    const classes = useStyles$2();
     const { dir } = useFluent();
     const hasIcon = !!icon;
     const chevron = (jsx("div", { className: mergeClasses(classes.leadingChevron, isOpen ? classes.leadingChevronOpen : dir === "rtl" && classes.leadingChevronClosedRtl), children: jsx(ChevronRightRegular, {}) }));
@@ -7114,7 +7143,7 @@ function useNodeDisplayInfo(node) {
 }
 const RootTreeItem = (props) => {
     const { node, isSelected, isOpen, select, isFiltering, expandAll, collapseAll } = props;
-    const classes = useStyles();
+    const classes = useStyles$2();
     const [compactMode] = useSetting(CompactModeSettingDescriptor);
     const treeItemLayoutClass = mergeClasses(classes.rootTreeItemLayout, compactMode ? classes.treeItemLayoutCompact : undefined);
     const displayInfo = useNodeDisplayInfo(node);
@@ -7141,7 +7170,7 @@ const RootTreeItem = (props) => {
 };
 const GroupTreeItem = (props) => {
     const { node, isFiltering, commandProviders, expandAll, collapseAll, isSelected, isOpen, select, isDropTarget, ...dropProps } = props;
-    const classes = useStyles();
+    const classes = useStyles$2();
     const [compactMode] = useSetting(CompactModeSettingDescriptor);
     const displayInfo = useNodeDisplayInfo(node);
     const name = useObservableState(() => displayInfo.name, displayInfo.onChange);
@@ -7165,7 +7194,7 @@ const GroupTreeItem = (props) => {
 };
 const ItemTreeItem = (props) => {
     const { node, entity, isSelected, select, isFiltering, commandProviders, expandAll, collapseAll, isDragging, isDropTarget, isOpen, ...dragProps } = props;
-    const classes = useStyles();
+    const classes = useStyles$2();
     const [compactMode] = useSetting(CompactModeSettingDescriptor);
     const hasChildren = node.children.length > 0;
     const isBranch = !isFiltering && hasChildren;
@@ -7287,7 +7316,7 @@ const ItemTreeItem = (props) => {
  * @returns The explorer tree component.
  */
 const Explorer = (props) => {
-    const classes = useStyles();
+    const classes = useStyles$2();
     const { getNodes, itemCommandProviders, groupCommandProviders, selectedEntity = null, ariaLabel = "Scene Explorer Tree" } = props;
     const [treeVersion, setTreeVersion] = useState(0);
     const tree = useMemo(() => BuildExplorerTree(getNodes()), [getNodes, treeVersion]);
@@ -7944,11 +7973,11 @@ function GenerateCopyString(value) {
             }
             // Color3, Color4 — HEX is a direct 0-1→0-255 conversion of the stored values (property-space)
             if (className === "Color3") {
-                const hexString = ColorToHex(obj.r, obj.g, obj.b, 1);
+                const hexString = ColorToHex$1(obj.r, obj.g, obj.b, 1);
                 return `new ${babylonNamespace}Color3(${obj.r}, ${obj.g}, ${obj.b}) // (HEX: ${hexString})`;
             }
             if (className === "Color4") {
-                const hexString = ColorToHex(obj.r, obj.g, obj.b, obj.a);
+                const hexString = ColorToHex$1(obj.r, obj.g, obj.b, obj.a);
                 return `new ${babylonNamespace}Color4(${obj.r}, ${obj.g}, ${obj.b}, ${obj.a}) // (HEX: ${hexString})`;
             }
             // Matrix - output as array
@@ -7981,7 +8010,7 @@ function GenerateCopyString(value) {
  * @param a - Alpha component (0-1)
  * @returns Hex string in format #RRGGBBAA
  */
-function ColorToHex(r, g, b, a) {
+function ColorToHex$1(r, g, b, a) {
     const toByte = (c) => Math.round(Math.min(255, Math.max(0, c * 255)));
     const rHex = toByte(r).toString(16).padStart(2, "0").toUpperCase();
     const gHex = toByte(g).toString(16).padStart(2, "0").toUpperCase();
@@ -8080,6 +8109,45 @@ function ComputedProperty(props) {
     const value = useWatchedValue(target, getValue);
     return jsx(Component, { ...{ ...rest, value } });
 }
+/**
+ * Renders an editable property-line component for a value derived from a target.
+ *
+ * This is useful for method-backed values, readonly object references, or values whose UI
+ * representation differs from their stored representation. The getter follows the Preferred
+ * Watch Mode, while the setter owns the runtime-specific write-back.
+ * @param props The target, derived getter, write-back function, and property-line component props.
+ * @returns The editable derived property-line component.
+ */
+function DerivedProperty(props) {
+    const { 
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    component: Component, target, getValue, setValue, propertyPath, getPropertyOwner, propertyKey, ...rest } = props;
+    const value = useWatchedValue(target, getValue);
+    const notifyPropertyChanged = usePropertyChangedNotifier();
+    const getStoredProperty = () => {
+        if (!getPropertyOwner || propertyKey === undefined) {
+            return undefined;
+        }
+        const propertyTarget = getPropertyOwner(target);
+        return {
+            propertyTarget,
+            value: Reflect.get(propertyTarget, propertyKey),
+        };
+    };
+    return (jsx(Component, { ...{
+            ...(propertyPath ? { onCopy: () => GetOnCopyString(getStoredProperty()?.value, propertyPath) } : {}),
+            ...rest,
+            value,
+            onChange: (changedValue) => {
+                const oldStoredProperty = getStoredProperty();
+                setValue(target, changedValue);
+                const newStoredProperty = getStoredProperty();
+                if (newStoredProperty && oldStoredProperty && propertyKey !== undefined) {
+                    notifyPropertyChanged(newStoredProperty.propertyTarget, propertyKey, oldStoredProperty.value, newStoredProperty.value);
+                }
+            },
+        } }));
+}
 function GetOnCopyString(value, propertyPath) {
     const valueStr = GenerateCopyString(value);
     return `globalThis.debugNode.${propertyPath} = ${valueStr};`;
@@ -8158,85 +8226,713 @@ const EnginePropertiesServiceDefinition = {
     },
 };
 
-function IsMaterial(entity) {
-    return typeof entity === "object" && entity !== null && getMaterialFamily(entity) !== undefined;
+function GetSceneContexts(engine) {
+    return engine.surfaces.flatMap((surface) => getRenderingContexts(surface).filter((context) => getRenderingContextKind(context) === "scene"));
 }
-const MaterialProperties = (props) => {
-    const { material } = props;
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: TextInputPropertyLine, label: "Name", target: material, propertyKey: "name", ignoreNullable: true, defaultValue: "" }), jsx(TextPropertyLine, { label: "Family", value: getMaterialFamily(material) ?? "Unknown" })] }));
+function IsSceneNode(entity) {
+    return (typeof entity === "object" &&
+        entity !== null &&
+        "name" in entity &&
+        "children" in entity &&
+        "position" in entity &&
+        "rotationQuaternion" in entity &&
+        "scaling" in entity &&
+        "parent" in entity);
+}
+function IsMesh(entity) {
+    return IsSceneNode(entity) && "material" in entity && "receiveShadows" in entity;
+}
+function IsCamera(entity) {
+    return typeof entity === "object" && entity !== null && "fov" in entity && "nearPlane" in entity && "farPlane" in entity && "children" in entity && "worldMatrix" in entity;
+}
+function IsArcRotateCamera(entity) {
+    return IsCamera(entity) && "alpha" in entity && "beta" in entity && "radius" in entity && "target" in entity;
+}
+function IsFreeCamera(entity) {
+    return IsCamera(entity) && "position" in entity && "target" in entity && "speed" in entity;
+}
+function IsLight(entity) {
+    return typeof entity === "object" && entity !== null && "lightType" in entity && "children" in entity && "parent" in entity && "worldMatrix" in entity;
+}
+function IsDirectionalLight(entity) {
+    return IsLight(entity) && entity.lightType === "directional";
+}
+function IsPointLight(entity) {
+    return IsLight(entity) && entity.lightType === "point";
+}
+function IsSpotLight(entity) {
+    return IsLight(entity) && entity.lightType === "spot";
+}
+function IsHemisphericLight(entity) {
+    return IsLight(entity) && entity.lightType === "hemispheric";
+}
+function GetSceneNodes(scene) {
+    const nodes = new Set();
+    const addNode = (node) => {
+        if (nodes.has(node)) {
+            return;
+        }
+        nodes.add(node);
+        for (const child of node.children) {
+            addNode(child);
+        }
+    };
+    for (const mesh of scene.meshes) {
+        let root = mesh;
+        while (IsSceneNode(root.parent)) {
+            root = root.parent;
+        }
+        addNode(root);
+    }
+    return [...nodes];
+}
+function GetSceneNodeRoots(scene) {
+    const nodes = GetSceneNodes(scene);
+    const nodeSet = new Set(nodes);
+    return nodes.filter((node) => !IsSceneNode(node.parent) || !nodeSet.has(node.parent));
+}
+function IsSceneNodeDescendantOf(node, ancestor) {
+    let parent = node.parent;
+    while (typeof parent === "object" && parent !== null) {
+        if (parent === ancestor) {
+            return true;
+        }
+        if (!IsSceneNode(parent)) {
+            return false;
+        }
+        parent = parent.parent;
+    }
+    return false;
+}
+function SetVector3Value(target, value) {
+    const x = "x" in value ? value.x : value[0];
+    const y = "x" in value ? value.y : value[1];
+    const z = "x" in value ? value.z : value[2];
+    const observableTarget = target;
+    if (typeof observableTarget.set === "function") {
+        observableTarget.set(x, y, z);
+    }
+    else {
+        target.x = x;
+        target.y = y;
+        target.z = z;
+    }
+}
+function SetQuaternionValue(target, value) {
+    const x = "x" in value ? value.x : value[0];
+    const y = "x" in value ? value.y : value[1];
+    const z = "x" in value ? value.z : value[2];
+    const w = "x" in value ? value.w : value[3];
+    const observableTarget = target;
+    if (typeof observableTarget.set === "function") {
+        observableTarget.set(x, y, z, w);
+    }
+    else {
+        target.x = x;
+        target.y = y;
+        target.z = z;
+        target.w = w;
+    }
+}
+function GetLightDisplayName(light, index) {
+    const typeName = `${light.lightType.charAt(0).toUpperCase()}${light.lightType.slice(1)}`;
+    return `${typeName} Light ${index + 1}`;
+}
+function GetShadowGeneratorDisplayName(scene, shadowGenerator) {
+    const lightIndex = scene.lights.findIndex((light) => light.shadowGenerator === shadowGenerator);
+    return lightIndex === -1 ? `Shadow Generator ${scene.shadowGenerators.indexOf(shadowGenerator) + 1}` : `${GetLightDisplayName(scene.lights[lightIndex], lightIndex)} Shadows`;
+}
+
+/**
+ * Runtime-neutral controlled editor for two-, three-, and four-component numeric values.
+ * @param props The value, change callback, component adapter, and property-line presentation.
+ * @returns The tensor property line.
+ */
+const ControlledTensorPropertyLine = (props) => {
+    const { adapter, min, max, unit, step, precision, valueConverter } = props;
+    const converted = (value) => (valueConverter ? valueConverter.from(value) : value);
+    const formatted = (value) => converted(value).toFixed(precision ?? (step !== undefined ? Math.max(0, CalculatePrecision(step)) : 2));
+    const [value, setValue] = useState(props.value);
+    useEffect(() => {
+        setValue(props.value);
+    }, [props.value, props.expandedContent]);
+    const onComponentChange = (componentValue, component) => {
+        const storedValue = valueConverter ? valueConverter.to(componentValue) : componentValue;
+        const newValue = adapter.withComponent(value, component, storedValue);
+        setValue(newValue);
+        props.onChange(newValue);
+    };
+    const summary = adapter.components.map((component) => formatted(adapter.getComponent(props.value, component))).join(", ");
+    return (jsx(PropertyLine, { ...props, expandedContent: jsxs(Fragment, { children: [props.expandedContent, jsx(TensorSliders, { value: value, adapter: adapter, min: min, max: max, unit: unit, step: step, precision: precision, converted: converted, onChange: onComponentChange })] }), children: jsx(Body1, { children: `[${summary}]` }) }));
 };
-const MaterialPropertiesServiceDefinition = {
-    friendlyName: "Babylon Lite Material Properties",
-    consumes: [PropertiesServiceIdentity],
-    factory: (propertiesService) => propertiesService.addSectionContent({
-        key: "Babylon Lite Material Properties",
-        predicate: IsMaterial,
-        content: [
-            {
-                section: "General",
-                component: ({ context }) => jsx(MaterialProperties, { material: context }),
-            },
-        ],
-    }),
+const TensorSliders = (props) => {
+    const { value, adapter, min, max, unit, step, precision, converted, onChange } = props;
+    return (jsx(Fragment, { children: adapter.components.map((component) => (jsx(NumberInputPropertyLine, { label: component.toUpperCase(), value: converted(adapter.getComponent(value, component)), min: min, max: max, onChange: (componentValue) => onChange(componentValue, component), unit: unit, step: step, precision: precision }, component))) }));
+};
+const RadiansToDegreesConverter = {
+    from: (value) => (value * 180) / Math.PI,
+    to: (value) => (value * Math.PI) / 180,
+};
+/**
+ * Runtime-neutral controlled quaternion editor with optional Euler presentation.
+ * @param props The quaternion value, runtime conversion adapter, and display options.
+ * @returns The quaternion or Euler property line.
+ */
+const ControlledQuaternionPropertyLine = (props) => {
+    const { adapter, useEuler, useDegrees, ...rest } = props;
+    const [quaternion, setQuaternion] = useState(props.value);
+    useEffect(() => {
+        setQuaternion(props.value);
+    }, [props.value]);
+    const onQuaternionChange = (value) => {
+        setQuaternion(value);
+        props.onChange(value);
+    };
+    if (useEuler) {
+        const quaternionSummary = adapter.quaternion.components.map((component) => adapter.quaternion.getComponent(quaternion, component).toFixed(4)).join(", ");
+        return (jsx(ControlledTensorPropertyLine, { ...rest, nullable: false, ignoreNullable: false, value: adapter.toEuler(quaternion), adapter: adapter.euler, valueConverter: useDegrees ? RadiansToDegreesConverter : undefined, onChange: (value) => onQuaternionChange(adapter.fromEuler(value, quaternion)), unit: useDegrees ? "°" : "rad", step: useDegrees ? 1 : 0.01, precision: useDegrees ? 1 : 2, expandedContent: jsx(TextPropertyLine, { label: "Quaternion", value: `[${quaternionSummary}]` }) }));
+    }
+    return (jsx(ControlledTensorPropertyLine, { ...rest, nullable: false, value: quaternion, adapter: adapter.quaternion, onChange: onQuaternionChange, unit: useDegrees ? "°" : "rad", step: useDegrees ? 1 : 0.01, precision: useDegrees ? 1 : 2 }));
 };
 
-function IsMesh(entity) {
-    return typeof entity === "object" && entity !== null && "_gpu" in entity && "material" in entity;
-}
-const MeshGeneralProperties = (props) => {
-    const { mesh } = props;
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: TextInputPropertyLine, label: "Name", target: mesh, propertyKey: "name" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Receive Shadows", target: mesh, propertyKey: "receiveShadows" })] }));
+const ComponentIndices = {
+    x: 0,
+    y: 1,
+    z: 2,
+    w: 3,
 };
-const MeshPropertiesServiceDefinition = {
-    friendlyName: "Babylon Lite Mesh Properties",
-    consumes: [PropertiesServiceIdentity],
-    factory: (propertiesService) => propertiesService.addSectionContent({
-        key: "Babylon Lite Mesh Properties",
-        predicate: IsMesh,
-        content: [
-            {
-                section: "General",
-                component: ({ context }) => jsx(MeshGeneralProperties, { mesh: context }),
-            },
-        ],
-    }),
+function IsNumberTuple(value) {
+    return Array.isArray(value);
+}
+function GetComponent(value, component) {
+    if (IsNumberTuple(value)) {
+        return value[ComponentIndices[component]];
+    }
+    switch (component) {
+        case "x":
+            return value.x;
+        case "y":
+            return value.y;
+        case "z":
+            return "z" in value ? value.z : 0;
+        case "w":
+            return "w" in value ? value.w : 0;
+    }
+}
+const Vector3Adapter = {
+    components: ["x", "y", "z"],
+    getComponent: GetComponent,
+    withComponent: (value, component, componentValue) => IsNumberTuple(value)
+        ? [component === "x" ? componentValue : value[0], component === "y" ? componentValue : value[1], component === "z" ? componentValue : value[2]]
+        : { ...value, [component]: componentValue },
+};
+const QuaternionTensorAdapter = {
+    components: ["x", "y", "z", "w"],
+    getComponent: GetComponent,
+    withComponent: (value, component, componentValue) => IsNumberTuple(value)
+        ? [
+            component === "x" ? componentValue : value[0],
+            component === "y" ? componentValue : value[1],
+            component === "z" ? componentValue : value[2],
+            component === "w" ? componentValue : value[3],
+        ]
+        : { ...value, [component]: componentValue },
+};
+/**
+ * Converts a Lite Euler value to a quaternion while preserving tuple versus structural representation.
+ * @param value The Euler value in radians.
+ * @param source The source quaternion whose representation should be preserved.
+ * @returns The converted quaternion.
+ */
+function CreateQuaternionFromEuler(value, source) {
+    const [x, y, z] = "x" in value ? [value.x, value.y, value.z] : value;
+    const quaternion = eulerToQuat(x, y, z);
+    return "x" in source ? { x: quaternion[0], y: quaternion[1], z: quaternion[2], w: quaternion[3] } : quaternion;
+}
+const QuaternionAdapter = {
+    quaternion: QuaternionTensorAdapter,
+    euler: Vector3Adapter,
+    fromEuler: CreateQuaternionFromEuler,
+    toEuler: (value) => {
+        const [x, y, z, w] = "x" in value ? [value.x, value.y, value.z, value.w] : value;
+        return quatToEulerXYZ(x, y, z, w);
+    },
 };
+const Vector3PropertyLine = (props) => jsx(ControlledTensorPropertyLine, { ...props, adapter: Vector3Adapter });
+const QuaternionPropertyLine = (props) => jsx(ControlledQuaternionPropertyLine, { ...props, adapter: QuaternionAdapter });
 
-const GetMeshCount = (scene) => scene.meshes.length;
-const GetLightCount = (scene) => scene.lights.length;
-const GetAnimationGroupCount = (scene) => scene.animationGroups.length;
-const GetShadowGeneratorCount = (scene) => scene.shadowGenerators.length;
-const GetTextLayerCount = (renderer) => renderer.layers.length;
-const GetSpriteLayerCount = (renderer) => renderer.layers.length;
-function IsRegisteredRenderingContext(engine, entity) {
-    return typeof entity === "object" && entity !== null && engine.surfaces.some((surface) => getRenderingContexts(surface).includes(entity));
+function GetPosition$2(camera) {
+    return [camera.position.x, camera.position.y, camera.position.z];
 }
-const SceneProperties = (props) => {
-    const { scene } = props;
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: TextInputPropertyLine, label: "Name", target: scene, propertyKey: "name", ignoreNullable: true, defaultValue: "" }), jsx(ComputedProperty, { component: StringifiedPropertyLine, label: "Mesh Count", target: scene, getValue: GetMeshCount }), jsx(ComputedProperty, { component: StringifiedPropertyLine, label: "Light Count", target: scene, getValue: GetLightCount }), jsx(ComputedProperty, { component: StringifiedPropertyLine, label: "Animation Group Count", target: scene, getValue: GetAnimationGroupCount }), jsx(ComputedProperty, { component: StringifiedPropertyLine, label: "Shadow Generator Count", target: scene, getValue: GetShadowGeneratorCount }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Fixed Delta (ms)", target: scene, propertyKey: "fixedDeltaMs", min: 0, step: 1 })] }));
+function GetTarget(camera) {
+    return [camera.target.x, camera.target.y, camera.target.z];
+}
+function SetFreeCameraPosition(camera, value) {
+    SetVector3Value(camera.position, value);
+}
+function SetCameraTarget(camera, value) {
+    SetVector3Value(camera.target, value);
+}
+const CameraGeneralProperties = (props) => {
+    const { camera } = props;
+    const [toDisplayAngle, fromDisplayAngle, useDegrees] = useAngleConverters();
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: TextInputPropertyLine, label: "Name", target: camera, propertyKey: "name", ignoreNullable: true, defaultValue: "" }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Near Plane", target: camera, propertyKey: "nearPlane" }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Far Plane", target: camera, propertyKey: "farPlane" }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "FOV", target: camera, propertyKey: "fov", min: toDisplayAngle(0.1), max: toDisplayAngle(Math.PI), step: toDisplayAngle(0.01), unit: useDegrees ? "°" : "rad", convertTo: toDisplayAngle, convertFrom: fromDisplayAngle })] }));
 };
-const TextRendererProperties = (props) => {
-    const { renderer } = props;
-    return jsx(ComputedProperty, { component: StringifiedPropertyLine, label: "Layer Count", target: renderer, getValue: GetTextLayerCount });
+const FreeCameraTransformProperties = (props) => {
+    const { camera } = props;
+    return (jsxs(Fragment, { children: [jsx(DerivedProperty, { component: Vector3PropertyLine, label: "Position", target: camera, getValue: GetPosition$2, setValue: SetFreeCameraPosition }), jsx(DerivedProperty, { component: Vector3PropertyLine, label: "Target", target: camera, getValue: GetTarget, setValue: SetCameraTarget }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Speed", target: camera, propertyKey: "speed" }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Inertia", target: camera, propertyKey: "inertia", min: 0, max: 1 })] }));
 };
-const SpriteRendererProperties = (props) => {
-    const { renderer } = props;
-    return jsx(ComputedProperty, { component: StringifiedPropertyLine, label: "Layer Count", target: renderer, getValue: GetSpriteLayerCount });
+const ArcRotateCameraTransformProperties = (props) => {
+    const { camera } = props;
+    const [toDisplayAngle, fromDisplayAngle, useDegrees] = useAngleConverters();
+    return (jsxs(Fragment, { children: [jsx(DerivedProperty, { component: Vector3PropertyLine, label: "Target", target: camera, getValue: GetTarget, setValue: SetCameraTarget }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Alpha", target: camera, propertyKey: "alpha", unit: useDegrees ? "°" : "rad", convertTo: toDisplayAngle, convertFrom: fromDisplayAngle }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Beta", target: camera, propertyKey: "beta", unit: useDegrees ? "°" : "rad", convertTo: toDisplayAngle, convertFrom: fromDisplayAngle }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Radius", target: camera, propertyKey: "radius", min: 0 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Inertia", target: camera, propertyKey: "inertia", min: 0, max: 1 })] }));
 };
-const RenderingContextPropertiesServiceDefinition = {
-    friendlyName: "Babylon Lite Rendering Context Properties",
-    consumes: [PropertiesServiceIdentity, EngineContextIdentity],
-    factory: (propertiesService, engineContext) => {
-        const engine = engineContext.engine;
-        const sceneRegistration = propertiesService.addSectionContent({
-            key: "Babylon Lite Scene Properties",
-            predicate: (entity) => {
-                if (!IsRegisteredRenderingContext(engine, entity)) {
-                    return false;
-                }
-                return getRenderingContextKind(entity) === "scene";
-            },
-            content: [
+
+const CameraPropertiesServiceDefinition = {
+    friendlyName: "Babylon Lite Camera Properties",
+    consumes: [PropertiesServiceIdentity],
+    factory: (propertiesService) => {
+        const cameraRegistration = propertiesService.addSectionContent({
+            key: "Babylon Lite Camera Properties",
+            predicate: IsCamera,
+            content: [
+                {
+                    section: "General",
+                    component: ({ context }) => jsx(CameraGeneralProperties, { camera: context }),
+                },
+            ],
+        });
+        const freeCameraRegistration = propertiesService.addSectionContent({
+            key: "Babylon Lite Free Camera Properties",
+            predicate: IsFreeCamera,
+            content: [
+                {
+                    section: "Transform",
+                    component: ({ context }) => jsx(FreeCameraTransformProperties, { camera: context }),
+                },
+            ],
+        });
+        const arcRotateCameraRegistration = propertiesService.addSectionContent({
+            key: "Babylon Lite Arc Rotate Camera Properties",
+            predicate: IsArcRotateCamera,
+            content: [
+                {
+                    section: "Transform",
+                    component: ({ context }) => jsx(ArcRotateCameraTransformProperties, { camera: context }),
+                },
+            ],
+        });
+        return {
+            dispose: () => {
+                arcRotateCameraRegistration.dispose();
+                freeCameraRegistration.dispose();
+                cameraRegistration.dispose();
+            },
+        };
+    },
+};
+
+/**
+ * Runtime-neutral controlled color editor with RGB or RGBA sliders and an injected picker.
+ * @param props The controlled color, runtime adapter, and property-line presentation.
+ * @returns The color property line.
+ */
+const ControlledColorPropertyLine = (props) => {
+    const { adapter, value, onChange, propertyLineRef } = props;
+    const [currentValue, setCurrentValue] = useState(value);
+    useEffect(() => {
+        setCurrentValue(value);
+    }, [value]);
+    const handleChange = (newValue) => {
+        setCurrentValue(newValue);
+        onChange(newValue);
+    };
+    const onSliderChange = (componentValue, component) => {
+        const color = adapter.getColor(currentValue);
+        handleChange(adapter.createColor({
+            ...color,
+            [component]: component === "a" ? componentValue : componentValue / 255,
+        }, currentValue));
+    };
+    const color = adapter.getColor(currentValue);
+    return (jsx(PropertyLine, { ref: propertyLineRef, ...props, expandedContent: jsx(ColorSliders, { color: color, onSliderChange: onSliderChange }), children: createElement(adapter.picker, {
+            value: currentValue,
+            onChange: handleChange,
+            isLinearMode: props.isLinearMode,
+            disabled: props.disabled,
+            className: props.className,
+            style: props.style,
+            title: props.title,
+        }) }));
+};
+const ColorSliders = (props) => {
+    const { color, onSliderChange } = props;
+    return (jsxs(Fragment, { children: [jsx(SyncedSliderPropertyLine, { label: "R", value: color.r * 255, min: 0, max: 255, onChange: (value) => onSliderChange(value, "r") }), jsx(SyncedSliderPropertyLine, { label: "G", value: color.g * 255, min: 0, max: 255, onChange: (value) => onSliderChange(value, "g") }), jsx(SyncedSliderPropertyLine, { label: "B", value: color.b * 255, min: 0, max: 255, onChange: (value) => onSliderChange(value, "b") }), color.a === undefined ? undefined : (jsx(SyncedSliderPropertyLine, { label: "A", value: color.a, min: 0, max: 1, step: 0.01, onChange: (value) => onSliderChange(value, "a") }))] }));
+};
+
+const useStyles$1 = makeStyles({
+    picker: {
+        width: "350px",
+        height: "350px",
+    },
+    trigger: {
+        display: "flex",
+        alignItems: "center",
+    },
+});
+function LinearChannelToGamma(value) {
+    return value <= 0.0031308 ? value * 12.92 : 1.055 * value ** (1 / 2.4) - 0.055;
+}
+function GammaChannelToLinear(value) {
+    return value <= 0.04045 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4;
+}
+function ConvertColorSpace(color, convertChannel) {
+    return {
+        r: convertChannel(color.r),
+        g: convertChannel(color.g),
+        b: convertChannel(color.b),
+        ...("a" in color ? { a: color.a } : {}),
+    };
+}
+function RgbToHsv(color) {
+    const max = Math.max(color.r, color.g, color.b);
+    const min = Math.min(color.r, color.g, color.b);
+    const delta = max - min;
+    let hue = 0;
+    if (delta !== 0) {
+        if (max === color.r) {
+            hue = 60 * (((color.g - color.b) / delta) % 6);
+        }
+        else if (max === color.g) {
+            hue = 60 * ((color.b - color.r) / delta + 2);
+        }
+        else {
+            hue = 60 * ((color.r - color.g) / delta + 4);
+        }
+    }
+    return {
+        h: hue < 0 ? hue + 360 : hue,
+        s: max === 0 ? 0 : delta / max,
+        v: max,
+        ...("a" in color ? { a: color.a } : {}),
+    };
+}
+function HsvToRgb(hue, saturation, value, alpha) {
+    const chroma = value * saturation;
+    const hueSector = hue / 60;
+    const intermediate = chroma * (1 - Math.abs((hueSector % 2) - 1));
+    const offset = value - chroma;
+    let red = 0;
+    let green = 0;
+    let blue = 0;
+    if (hueSector < 1) {
+        red = chroma;
+        green = intermediate;
+    }
+    else if (hueSector < 2) {
+        red = intermediate;
+        green = chroma;
+    }
+    else if (hueSector < 3) {
+        green = chroma;
+        blue = intermediate;
+    }
+    else if (hueSector < 4) {
+        green = intermediate;
+        blue = chroma;
+    }
+    else if (hueSector < 5) {
+        red = intermediate;
+        blue = chroma;
+    }
+    else {
+        red = chroma;
+        blue = intermediate;
+    }
+    return {
+        r: red + offset,
+        g: green + offset,
+        b: blue + offset,
+        ...(alpha !== undefined ? { a: alpha } : {}),
+    };
+}
+function ColorToHex(color) {
+    const channelToHex = (value) => Math.round(Math.min(1, Math.max(0, value)) * 255)
+        .toString(16)
+        .padStart(2, "0");
+    return `#${channelToHex(color.r)}${channelToHex(color.g)}${channelToHex(color.b)}${color.a === undefined ? "" : channelToHex(color.a)}`;
+}
+/**
+ * Runtime-neutral color picker for structural RGB and RGBA values.
+ * @param props The controlled value, adapter, color-space mode, and change callback.
+ * @returns A color swatch that opens the Fluent color picker.
+ */
+const StructuralColorPickerPopup = (props) => {
+    const { value, onChange, adapter, isLinearMode, ...rest } = props;
+    const classes = useStyles$1();
+    const { size } = useContext(ToolContext);
+    const [currentValue, setCurrentValue] = useState(value);
+    useEffect(() => {
+        setCurrentValue(value);
+    }, [value]);
+    const storedColor = adapter.getColor(currentValue);
+    const gammaColor = useMemo(() => (isLinearMode ? ConvertColorSpace(storedColor, LinearChannelToGamma) : storedColor), [storedColor, isLinearMode]);
+    const hexColor = ColorToHex(gammaColor);
+    const handleColorPickerChange = (_event, data) => {
+        const changedGammaColor = HsvToRgb(data.color.h, data.color.s, data.color.v, storedColor.a === undefined ? undefined : (data.color.a ?? storedColor.a));
+        const changedStoredColor = isLinearMode ? ConvertColorSpace(changedGammaColor, GammaChannelToLinear) : changedGammaColor;
+        const changedValue = adapter.createColor(changedStoredColor, currentValue);
+        setCurrentValue(changedValue);
+        onChange(changedValue);
+    };
+    return (jsx(Popover, { trigger: jsx(ColorSwatch, { ...rest, className: classes.trigger, borderColor: tokens.colorNeutralShadowKeyDarker, size: size === "small" ? "extra-small" : "small", shape: "rounded", color: hexColor, value: hexColor.slice(1) }), children: jsxs(ColorPicker, { className: classes.picker, color: RgbToHsv(gammaColor), onColorChange: handleColorPickerChange, children: [jsx(ColorArea, { inputX: { "aria-label": "Saturation" }, inputY: { "aria-label": "Brightness" } }), jsx(ColorSlider, { "aria-label": "Hue" }), storedColor.a !== undefined ? jsx(AlphaSlider, { "aria-label": "Alpha" }) : undefined] }) }));
+};
+
+function IsColor4Value(value) {
+    return "r" in value ? "a" in value : value.length === 4;
+}
+function GetStructuralColor(value) {
+    if (!("r" in value)) {
+        return {
+            r: value[0],
+            g: value[1],
+            b: value[2],
+            ...(value.length === 4 ? { a: value[3] } : {}),
+        };
+    }
+    return value;
+}
+function CreateColor3Value(color, source) {
+    if (!("r" in source)) {
+        return [color.r, color.g, color.b];
+    }
+    return {
+        r: color.r,
+        g: color.g,
+        b: color.b,
+    };
+}
+function CreateColor4Value(color, source) {
+    if (!("r" in source)) {
+        return [color.r, color.g, color.b, color.a ?? source[3]];
+    }
+    return {
+        r: color.r,
+        g: color.g,
+        b: color.b,
+        a: color.a ?? source.a,
+    };
+}
+const Picker = (props) => (jsx(StructuralColorPickerPopup, { ...props, adapter: {
+        getColor: GetStructuralColor,
+        createColor: (color, source) => (IsColor4Value(source) ? CreateColor4Value(color, source) : CreateColor3Value(color, source)),
+    } }));
+const Adapter = {
+    picker: Picker,
+    getColor: GetStructuralColor,
+    createColor: (color, source) => (IsColor4Value(source) ? CreateColor4Value(color, source) : CreateColor3Value(color, source)),
+};
+const Color3PropertyLine = (props) => (jsx(ControlledColorPropertyLine, { ...props, adapter: Adapter }));
+
+function GetVector3(value) {
+    return [value.x, value.y, value.z];
+}
+/**
+ * Updates a plain Babylon Lite light property and marks its GPU light data dirty through a public observable transform.
+ * @param light The light to update.
+ * @param propertyKey The property to update.
+ * @param value The new property value.
+ */
+function SetLightProperty(light, propertyKey, value) {
+    light[propertyKey] = value;
+    const dirtyVector = "direction" in light ? light.direction : light.position;
+    dirtyVector.set(dirtyVector.x, dirtyVector.y, dirtyVector.z);
+}
+function GetDiffuse(light) {
+    return light.diffuse;
+}
+function ToColorTuple(value) {
+    return "r" in value ? [value.r, value.g, value.b] : [value[0], value[1], value[2]];
+}
+function SetDiffuse(light, value) {
+    SetLightProperty(light, "diffuse", ToColorTuple(value));
+}
+function GetSpecular(light) {
+    return light.specular;
+}
+function SetSpecular(light, value) {
+    SetLightProperty(light, "specular", ToColorTuple(value));
+}
+function GetIntensity(light) {
+    return light.intensity;
+}
+function SetIntensity(light, value) {
+    SetLightProperty(light, "intensity", value);
+}
+function GetRange(light) {
+    return light.range;
+}
+function SetRange(light, value) {
+    SetLightProperty(light, "range", value);
+}
+function GetExponent(light) {
+    return light.exponent;
+}
+function SetExponent(light, value) {
+    SetLightProperty(light, "exponent", value);
+}
+function GetDiffuseColor(light) {
+    return light.diffuseColor;
+}
+function SetDiffuseColor(light, value) {
+    SetLightProperty(light, "diffuseColor", ToColorTuple(value));
+}
+function GetSpecularColor(light) {
+    return light.specularColor;
+}
+function SetSpecularColor(light, value) {
+    SetLightProperty(light, "specularColor", ToColorTuple(value));
+}
+function GetGroundColor(light) {
+    return light.groundColor;
+}
+function SetGroundColor(light, value) {
+    SetLightProperty(light, "groundColor", ToColorTuple(value));
+}
+const LightGeneralProperties = (props) => {
+    const { light } = props;
+    return jsx(TextPropertyLine, { label: "Type", value: light.lightType });
+};
+const DirectionalLightSetupProperties = (props) => {
+    const { light } = props;
+    return (jsxs(Fragment, { children: [jsx(DerivedProperty, { component: Vector3PropertyLine, label: "Position", target: light.position, getValue: GetVector3, setValue: SetVector3Value }), jsx(DerivedProperty, { component: Vector3PropertyLine, label: "Direction", target: light.direction, getValue: GetVector3, setValue: SetVector3Value }), jsx(DerivedProperty, { component: Color3PropertyLine, label: "Diffuse", target: light, getValue: GetDiffuse, setValue: SetDiffuse, isLinearMode: true }), jsx(DerivedProperty, { component: Color3PropertyLine, label: "Specular", target: light, getValue: GetSpecular, setValue: SetSpecular, isLinearMode: true }), jsx(DerivedProperty, { component: NumberInputPropertyLine, label: "Intensity", target: light, getValue: GetIntensity, setValue: SetIntensity })] }));
+};
+const PointLightSetupProperties = (props) => {
+    const { light } = props;
+    return (jsxs(Fragment, { children: [jsx(DerivedProperty, { component: Vector3PropertyLine, label: "Position", target: light.position, getValue: GetVector3, setValue: SetVector3Value }), jsx(DerivedProperty, { component: Color3PropertyLine, label: "Diffuse", target: light, getValue: GetDiffuse, setValue: SetDiffuse, isLinearMode: true }), jsx(DerivedProperty, { component: Color3PropertyLine, label: "Specular", target: light, getValue: GetSpecular, setValue: SetSpecular, isLinearMode: true }), jsx(DerivedProperty, { component: NumberInputPropertyLine, label: "Intensity", target: light, getValue: GetIntensity, setValue: SetIntensity }), jsx(DerivedProperty, { component: NumberInputPropertyLine, label: "Range", target: light, getValue: GetRange, setValue: SetRange })] }));
+};
+const SpotLightSetupProperties = (props) => {
+    const { light } = props;
+    return (jsxs(Fragment, { children: [jsx(DerivedProperty, { component: Vector3PropertyLine, label: "Position", target: light.position, getValue: GetVector3, setValue: SetVector3Value }), jsx(DerivedProperty, { component: Vector3PropertyLine, label: "Direction", target: light.direction, getValue: GetVector3, setValue: SetVector3Value }), jsx(DerivedProperty, { component: Color3PropertyLine, label: "Diffuse", target: light, getValue: GetDiffuse, setValue: SetDiffuse, isLinearMode: true }), jsx(DerivedProperty, { component: Color3PropertyLine, label: "Specular", target: light, getValue: GetSpecular, setValue: SetSpecular, isLinearMode: true }), jsx(DerivedProperty, { component: NumberInputPropertyLine, label: "Intensity", target: light, getValue: GetIntensity, setValue: SetIntensity }), jsx(DerivedProperty, { component: NumberInputPropertyLine, label: "Range", target: light, getValue: GetRange, setValue: SetRange }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Angle", target: light, propertyKey: "angle", unit: "rad", min: 0, max: Math.PI }), jsx(DerivedProperty, { component: NumberInputPropertyLine, label: "Exponent", target: light, getValue: GetExponent, setValue: SetExponent, min: 0 })] }));
+};
+const HemisphericLightSetupProperties = (props) => {
+    const { light } = props;
+    return (jsxs(Fragment, { children: [jsx(DerivedProperty, { component: Vector3PropertyLine, label: "Direction", target: light.direction, getValue: GetVector3, setValue: SetVector3Value }), jsx(DerivedProperty, { component: Color3PropertyLine, label: "Diffuse", target: light, getValue: GetDiffuseColor, setValue: SetDiffuseColor, isLinearMode: true }), jsx(DerivedProperty, { component: Color3PropertyLine, label: "Specular", target: light, getValue: GetSpecularColor, setValue: SetSpecularColor, isLinearMode: true }), jsx(DerivedProperty, { component: Color3PropertyLine, label: "Ground", target: light, getValue: GetGroundColor, setValue: SetGroundColor, isLinearMode: true }), jsx(DerivedProperty, { component: NumberInputPropertyLine, label: "Intensity", target: light, getValue: GetIntensity, setValue: SetIntensity })] }));
+};
+
+const LightPropertiesServiceDefinition = {
+    friendlyName: "Babylon Lite Light Properties",
+    consumes: [PropertiesServiceIdentity],
+    factory: (propertiesService) => {
+        const registrations = [
+            propertiesService.addSectionContent({
+                key: "Babylon Lite Light Properties",
+                predicate: IsLight,
+                content: [{ section: "General", component: ({ context }) => jsx(LightGeneralProperties, { light: context }) }],
+            }),
+            propertiesService.addSectionContent({
+                key: "Babylon Lite Directional Light Properties",
+                predicate: IsDirectionalLight,
+                content: [{ section: "Setup", component: ({ context }) => jsx(DirectionalLightSetupProperties, { light: context }) }],
+            }),
+            propertiesService.addSectionContent({
+                key: "Babylon Lite Point Light Properties",
+                predicate: IsPointLight,
+                content: [{ section: "Setup", component: ({ context }) => jsx(PointLightSetupProperties, { light: context }) }],
+            }),
+            propertiesService.addSectionContent({
+                key: "Babylon Lite Spot Light Properties",
+                predicate: IsSpotLight,
+                content: [{ section: "Setup", component: ({ context }) => jsx(SpotLightSetupProperties, { light: context }) }],
+            }),
+            propertiesService.addSectionContent({
+                key: "Babylon Lite Hemispheric Light Properties",
+                predicate: IsHemisphericLight,
+                content: [{ section: "Setup", component: ({ context }) => jsx(HemisphericLightSetupProperties, { light: context }) }],
+            }),
+        ];
+        return {
+            dispose: () => registrations.forEach((registration) => registration.dispose()),
+        };
+    },
+};
+
+function IsMaterial(entity) {
+    return typeof entity === "object" && entity !== null && getMaterialFamily(entity) !== undefined;
+}
+const MaterialProperties = (props) => {
+    const { material } = props;
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: TextInputPropertyLine, label: "Name", target: material, propertyKey: "name", ignoreNullable: true, defaultValue: "" }), jsx(TextPropertyLine, { label: "Family", value: getMaterialFamily(material) ?? "Unknown" })] }));
+};
+const MaterialPropertiesServiceDefinition = {
+    friendlyName: "Babylon Lite Material Properties",
+    consumes: [PropertiesServiceIdentity],
+    factory: (propertiesService) => propertiesService.addSectionContent({
+        key: "Babylon Lite Material Properties",
+        predicate: IsMaterial,
+        content: [
+            {
+                section: "General",
+                component: ({ context }) => jsx(MaterialProperties, { material: context }),
+            },
+        ],
+    }),
+};
+
+const MeshGeneralProperties = (props) => {
+    const { mesh } = props;
+    return jsx(BoundProperty, { component: SwitchPropertyLine, label: "Receive Shadows", target: mesh, propertyKey: "receiveShadows" });
+};
+const MeshPropertiesServiceDefinition = {
+    friendlyName: "Babylon Lite Mesh Properties",
+    consumes: [PropertiesServiceIdentity],
+    factory: (propertiesService) => propertiesService.addSectionContent({
+        key: "Babylon Lite Mesh Properties",
+        predicate: IsMesh,
+        content: [
+            {
+                section: "Rendering",
+                component: ({ context }) => jsx(MeshGeneralProperties, { mesh: context }),
+            },
+        ],
+    }),
+};
+
+const GetMeshCount = (scene) => scene.meshes.length;
+const GetLightCount = (scene) => scene.lights.length;
+const GetAnimationGroupCount = (scene) => scene.animationGroups.length;
+const GetShadowGeneratorCount = (scene) => scene.shadowGenerators.length;
+const GetTextLayerCount = (renderer) => renderer.layers.length;
+const GetSpriteLayerCount = (renderer) => renderer.layers.length;
+function IsRegisteredRenderingContext(engine, entity) {
+    return typeof entity === "object" && entity !== null && engine.surfaces.some((surface) => getRenderingContexts(surface).includes(entity));
+}
+const SceneProperties = (props) => {
+    const { scene } = props;
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: TextInputPropertyLine, label: "Name", target: scene, propertyKey: "name", ignoreNullable: true, defaultValue: "" }), jsx(ComputedProperty, { component: StringifiedPropertyLine, label: "Mesh Count", target: scene, getValue: GetMeshCount }), jsx(ComputedProperty, { component: StringifiedPropertyLine, label: "Light Count", target: scene, getValue: GetLightCount }), jsx(ComputedProperty, { component: StringifiedPropertyLine, label: "Animation Group Count", target: scene, getValue: GetAnimationGroupCount }), jsx(ComputedProperty, { component: StringifiedPropertyLine, label: "Shadow Generator Count", target: scene, getValue: GetShadowGeneratorCount }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Fixed Delta (ms)", target: scene, propertyKey: "fixedDeltaMs", min: 0, step: 1 })] }));
+};
+const TextRendererProperties = (props) => {
+    const { renderer } = props;
+    return jsx(ComputedProperty, { component: StringifiedPropertyLine, label: "Layer Count", target: renderer, getValue: GetTextLayerCount });
+};
+const SpriteRendererProperties = (props) => {
+    const { renderer } = props;
+    return jsx(ComputedProperty, { component: StringifiedPropertyLine, label: "Layer Count", target: renderer, getValue: GetSpriteLayerCount });
+};
+const RenderingContextPropertiesServiceDefinition = {
+    friendlyName: "Babylon Lite Rendering Context Properties",
+    consumes: [PropertiesServiceIdentity, EngineContextIdentity],
+    factory: (propertiesService, engineContext) => {
+        const engine = engineContext.engine;
+        const sceneRegistration = propertiesService.addSectionContent({
+            key: "Babylon Lite Scene Properties",
+            predicate: (entity) => {
+                if (!IsRegisteredRenderingContext(engine, entity)) {
+                    return false;
+                }
+                return getRenderingContextKind(entity) === "scene";
+            },
+            content: [
                 {
                     section: "General",
                     component: ({ context }) => jsx(SceneProperties, { scene: context }),
@@ -8261,21 +8957,442 @@ const RenderingContextPropertiesServiceDefinition = {
                     section: "General",
                     component: ({ context }) => jsx(SpriteRendererProperties, { renderer: context }),
                 },
-            ],
-        });
-        return {
-            dispose: () => {
-                sceneRegistration.dispose();
-                textRendererRegistration.dispose();
-                spriteRendererRegistration.dispose();
+            ],
+        });
+        return {
+            dispose: () => {
+                sceneRegistration.dispose();
+                textRendererRegistration.dispose();
+                spriteRendererRegistration.dispose();
+            },
+        };
+    },
+};
+
+const PrettyJSONIndent = 2;
+function IsParsable(metadata) {
+    try {
+        const parsed = JSON.parse(metadata);
+        return !!parsed && !IsString(parsed);
+    }
+    catch {
+        return false;
+    }
+}
+/**
+ * Checks if the input is a string.
+ * @param input - any input to check
+ * @returns boolean - true if the input is a string, false otherwise
+ */
+function IsString(input) {
+    return typeof input === "string" || input instanceof String;
+}
+/**
+ * Checks recursively for functions on an object and returns `false` if any are found.
+ * @param o any object, string or number
+ * @returns boolean
+ */
+function ObjectCanSafelyStringify(o) {
+    if (typeof o === "function") {
+        return false;
+    }
+    if (o === null || o === true || o === false || typeof o === "number" || IsString(o)) {
+        return true;
+    }
+    if (typeof o === "object") {
+        if (Object.values(o).length === 0) {
+            return true;
+        }
+        return Object.values(o).every((value) => ObjectCanSafelyStringify(value));
+    }
+    if (Array.isArray(o)) {
+        return o.every((value) => ObjectCanSafelyStringify(value));
+    }
+    return false;
+}
+function GetMetadataEntityType(metadata) {
+    if (metadata == null) {
+        return "null";
+    }
+    else if (IsString(metadata)) {
+        return "string";
+    }
+    else if (!ObjectCanSafelyStringify(metadata)) {
+        return "object";
+    }
+    else {
+        return "JSON";
+    }
+}
+function HasGltfExtras(metadata) {
+    return IsParsable(metadata) && !!JSON.parse(metadata).gltf;
+}
+function StringifyMetadata(metadata, format) {
+    if (IsString(metadata)) {
+        return metadata;
+    }
+    if (metadata) {
+        // Try JSON.stringify even for objects with functions — it safely omits
+        // function-valued and undefined properties. Only fall back to String()
+        // for cases that actually throw (e.g. circular references).
+        try {
+            return JSON.stringify(metadata, undefined, format ? PrettyJSONIndent : undefined);
+        }
+        catch {
+            return String(metadata);
+        }
+    }
+    return null;
+}
+function Restringify(value, format) {
+    return IsParsable(value) ? JSON.stringify(JSON.parse(value), undefined, format ? PrettyJSONIndent : undefined) : value;
+}
+function PopulateGLTFExtras(metadata) {
+    if (!metadata) {
+        metadata = "{}";
+    }
+    if (!IsParsable(metadata)) {
+        return metadata;
+    }
+    try {
+        const parsedJson = JSON.parse(metadata);
+        if (parsedJson) {
+            if (Reflect.has(parsedJson, "gltf")) {
+                if (!Reflect.has(parsedJson.gltf, "extras")) {
+                    parsedJson.gltf.extras = {};
+                }
+            }
+            else {
+                parsedJson.gltf = { extras: {} };
+            }
+        }
+        return JSON.stringify(parsedJson);
+    }
+    catch {
+        return metadata;
+    }
+}
+function SaveMetadata(entity, metadata) {
+    if (IsParsable(metadata)) {
+        entity.metadata = JSON.parse(metadata);
+    }
+    else {
+        entity.metadata = metadata;
+    }
+}
+const useStyles = makeStyles({
+    mainDiv: {
+        display: "flex",
+        flexDirection: "column",
+        gap: tokens.spacingVerticalXS,
+    },
+    buttonDiv: {
+        display: "grid",
+        gridAutoFlow: "column",
+        gridTemplateColumns: "1fr auto auto auto",
+        gap: tokens.spacingHorizontalXS,
+    },
+});
+/**
+ * Component to display metadata properties of an entity.
+ * @param props - The properties for the component.
+ * @returns A React component that displays metadata properties.
+ */
+const MetadataProperties = (props) => {
+    const { entity } = props;
+    const classes = useStyles();
+    const { size } = useContext(ToolContext);
+    const metadata = useProperty(entity, "metadata");
+    const stringifiedMetadata = useMemo(() => StringifyMetadata(metadata, false) ?? "", [metadata]);
+    const metadataType = useMemo(() => GetMetadataEntityType(metadata), [metadata]);
+    const canPreventObjectCorruption = metadataType === "object";
+    const [preventObjectCorruption, setPreventObjectCorruption] = useState(false);
+    const isReadonly = canPreventObjectCorruption && preventObjectCorruption;
+    const [editedMetadata, setEditedMetadata] = useState(stringifiedMetadata);
+    useEffect(() => {
+        setEditedMetadata(stringifiedMetadata);
+    }, [stringifiedMetadata]);
+    const isEditedMetadataJSON = useMemo(() => IsParsable(editedMetadata), [editedMetadata]);
+    const unformattedEditedMetadata = useMemo(() => Restringify(editedMetadata, false), [editedMetadata]);
+    return (jsxs(Fragment, { children: [jsx(TextPropertyLine, { label: "Property Type", value: metadataType }), jsx(Collapse, { visible: canPreventObjectCorruption, children: jsx(SwitchPropertyLine, { label: "Prevent Object Corruption", value: isReadonly, onChange: setPreventObjectCorruption }) }), jsx(LineContainer, { uniqueId: "MetadataTextarea", children: jsx(Textarea, { disabled: isReadonly, value: editedMetadata, onChange: setEditedMetadata }) }), jsx(ButtonLine, { label: "Populate glTF extras", disabled: !!editedMetadata && (!IsParsable(editedMetadata) || HasGltfExtras(editedMetadata)), onClick: () => {
+                    const isFormatted = Restringify(editedMetadata, true) === editedMetadata;
+                    let withGLTFExtras = PopulateGLTFExtras(editedMetadata);
+                    if (isFormatted) {
+                        withGLTFExtras = Restringify(withGLTFExtras, true);
+                    }
+                    setEditedMetadata(withGLTFExtras);
+                } }), jsx(LineContainer, { uniqueId: "MetadataButtonDiv", children: jsxs("div", { className: classes.buttonDiv, children: [jsx(Button$1, { size: size, icon: jsx(SaveRegular, {}), disabled: stringifiedMetadata === unformattedEditedMetadata, onClick: () => SaveMetadata(entity, editedMetadata), children: jsx(Body1, { children: "Save" }) }), jsx(Tooltip$1, { content: "Undo Changes", relationship: "label", children: jsx(Button$1, { size: size, icon: jsx(ArrowUndoRegular, {}), disabled: stringifiedMetadata === unformattedEditedMetadata, onClick: () => setEditedMetadata(stringifiedMetadata) }) }), jsx(Tooltip$1, { content: "Format (Pretty Print)", relationship: "label", children: jsx(Button$1, { size: size, icon: jsx(BracesRegular, {}), disabled: !isEditedMetadataJSON, onClick: () => setEditedMetadata(Restringify(editedMetadata, true)) }) }), jsx(Tooltip$1, { content: "Clear Formatting (Undo Pretty Print)", relationship: "label", children: jsx(Button$1, { size: size, icon: jsx(BracesDismiss16Regular, {}), disabled: !isEditedMetadataJSON, onClick: () => setEditedMetadata(Restringify(editedMetadata, false)) }) })] }) })] }));
+};
+
+function GetPosition$1(node) {
+    return [node.position.x, node.position.y, node.position.z];
+}
+function GetRotation(node) {
+    return [node.rotationQuaternion.x, node.rotationQuaternion.y, node.rotationQuaternion.z, node.rotationQuaternion.w];
+}
+function GetScaling(node) {
+    return [node.scaling.x, node.scaling.y, node.scaling.z];
+}
+function GetVisibility(node) {
+    return node.visible !== false;
+}
+function SetVisibility(node, visible) {
+    setSubtreeVisible(node, visible);
+}
+function SetPosition(node, value) {
+    SetVector3Value(node.position, value);
+}
+function SetRotation(node, value) {
+    SetQuaternionValue(node.rotationQuaternion, value);
+}
+function SetScaling(node, value) {
+    SetVector3Value(node.scaling, value);
+}
+const SceneNodeGeneralProperties = (props) => {
+    const { node } = props;
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: TextInputPropertyLine, label: "Name", target: node, propertyKey: "name" }), jsx(DerivedProperty, { component: SwitchPropertyLine, label: "Visible", target: node, getValue: GetVisibility, setValue: SetVisibility })] }));
+};
+const SceneNodeTransformProperties = (props) => {
+    const { node } = props;
+    const [useDegrees] = useSetting(UseDegreesSettingDescriptor);
+    const [useEuler] = useSetting(UseEulerSettingDescriptor);
+    return (jsxs(Fragment, { children: [jsx(DerivedProperty, { component: Vector3PropertyLine, label: "Position", target: node, getValue: GetPosition$1, setValue: SetPosition }), jsx(DerivedProperty, { component: QuaternionPropertyLine, label: "Rotation", target: node, getValue: GetRotation, setValue: SetRotation, useDegrees: useDegrees, useEuler: useEuler }), jsx(DerivedProperty, { component: Vector3PropertyLine, label: "Scaling", target: node, getValue: GetScaling, setValue: SetScaling, step: 0.1 })] }));
+};
+
+const SceneNodePropertiesServiceDefinition = {
+    friendlyName: "Babylon Lite Scene Node Properties",
+    consumes: [PropertiesServiceIdentity],
+    factory: (propertiesService) => propertiesService.addSectionContent({
+        key: "Babylon Lite Scene Node Properties",
+        predicate: IsSceneNode,
+        content: [
+            {
+                section: "General",
+                component: ({ context }) => jsx(SceneNodeGeneralProperties, { node: context }),
+            },
+            {
+                section: "Transform",
+                component: ({ context }) => jsx(SceneNodeTransformProperties, { node: context }),
+            },
+            {
+                section: "Metadata",
+                component: ({ context }) => jsx(MetadataProperties, { entity: context }),
+            },
+        ],
+    }),
+};
+
+/**
+ * Returns whether a rendering context is a scene context.
+ * @param context The rendering context to test.
+ * @returns Whether the context is a scene context.
+ */
+function IsSceneContext(context) {
+    return getRenderingContextKind(context) === "scene";
+}
+/**
+ * Creates an Explorer section containing the supplied scene entities.
+ * @param id The stable section identifier.
+ * @param displayName The section's display name.
+ * @param entities The entities displayed by the section.
+ * @param getEntityDisplayInfo Gets the display information for an entity.
+ * @param entityIcon The optional icon component for the entities.
+ * @returns The Explorer node description for the section.
+ */
+function CreateSceneExplorerSectionNode(id, displayName, entities, getEntityDisplayInfo, entityIcon) {
+    return {
+        id,
+        kind: "group",
+        getDisplayInfo: () => ({ name: displayName }),
+        getChildren: () => entities.map((entity, index) => ({
+            id: GetEntityId(entity).toString(),
+            kind: "item",
+            entity,
+            icon: entityIcon,
+            getDisplayInfo: () => getEntityDisplayInfo(entity, index),
+        })),
+    };
+}
+
+function GetScenes(engineContext) {
+    return engineContext.engine.surfaces.flatMap((surface) => getRenderingContexts(surface).filter(IsSceneContext));
+}
+const ShadowGeneratorPropertiesServiceDefinition = {
+    friendlyName: "Babylon Lite Shadow Generator Properties",
+    consumes: [PropertiesServiceIdentity, EngineContextIdentity],
+    factory: (propertiesService, engineContext) => propertiesService.addSectionContent({
+        key: "Babylon Lite Shadow Generator Properties",
+        predicate: (entity) => typeof entity === "object" && entity !== null && GetScenes(engineContext).some((scene) => scene.shadowGenerators.includes(entity)),
+        content: [
+            {
+                section: "General",
+                component: ({ context }) => {
+                    const scene = GetScenes(engineContext).find((candidate) => candidate.shadowGenerators.includes(context));
+                    return jsx(TextPropertyLine, { label: "Identity", value: scene ? GetShadowGeneratorDisplayName(scene, context) : "Shadow Generator" });
+                },
             },
-        };
-    },
+        ],
+    }),
+};
+
+const LayerOrderMarkers = new WeakMap();
+function GetLayerOrderMarker(layer) {
+    const existing = LayerOrderMarkers.get(layer);
+    if (existing?.order === layer.order) {
+        return existing.marker;
+    }
+    const marker = {};
+    LayerOrderMarkers.set(layer, { order: layer.order, marker });
+    return marker;
+}
+function GetOrderedRenderingLayers(layers) {
+    return layers
+        .map((layer, index) => ({ layer, index }))
+        .sort((left, right) => left.layer.order - right.layer.order || left.index - right.index)
+        .map(({ layer }) => layer);
+}
+function GetRenderingLayerSnapshot(layers) {
+    return layers.flatMap((layer) => [layer, GetLayerOrderMarker(layer)]);
+}
+function GetRenderingLayerOwners(engine, contextKind, layer) {
+    return engine.surfaces.flatMap((surface) => getRenderingContexts(surface).filter((context) => getRenderingContextKind(context) === contextKind && context.layers.includes(layer)));
+}
+function GetRenderingLayerDisplayName(engine, contextKind, layer, layerTypeName) {
+    const owners = GetRenderingLayerOwners(engine, contextKind, layer);
+    const index = owners.length === 1 ? GetOrderedRenderingLayers(owners[0].layers).indexOf(layer) : -1;
+    return index === -1 ? layerTypeName : `${layerTypeName} ${index + 1}`;
+}
+
+const SpriteLayerDisplayNameGetters = new WeakMap();
+function GetSpriteLayerDisplayNameGetter(engine) {
+    let getter = SpriteLayerDisplayNameGetters.get(engine);
+    if (!getter) {
+        getter = (layer) => GetRenderingLayerDisplayName(engine, "sprite-renderer", layer, "Sprite Layer");
+        SpriteLayerDisplayNameGetters.set(engine, getter);
+    }
+    return getter;
+}
+function GetSpriteCount(layer) {
+    return layer.count;
+}
+function GetViewPositionX(layer) {
+    return layer.view.positionPx[0];
+}
+function SetViewPositionX(layer, value) {
+    layer.view.positionPx[0] = value;
+}
+function GetViewPositionY(layer) {
+    return layer.view.positionPx[1];
+}
+function SetViewPositionY(layer, value) {
+    layer.view.positionPx[1] = value;
+}
+function GetViewPosition(layer) {
+    return layer.view.positionPx;
+}
+function GetViewZoom(layer) {
+    return layer.view.zoom;
+}
+function SetViewZoom(layer, value) {
+    layer.view.zoom = value;
+}
+function IsNonZero(value) {
+    return value !== 0;
+}
+function GetView(layer) {
+    return layer.view;
+}
+function GetViewRotation(layer) {
+    return layer.view.rotation;
+}
+function SetViewRotation(layer, value) {
+    layer.view.rotation = value;
+}
+function GetPivotX(layer) {
+    return layer.pivot[0];
+}
+function SetPivotX(layer, value) {
+    layer.pivot[0] = value;
+}
+function GetPivotY(layer) {
+    return layer.pivot[1];
+}
+function SetPivotY(layer, value) {
+    layer.pivot[1] = value;
+}
+function GetPivot(layer) {
+    return layer.pivot;
+}
+function GetSpriteBlendModeName(blendMode) {
+    switch (blendMode) {
+        case spriteBlendAlpha:
+            return "Alpha";
+        case spriteBlendPremultiplied:
+            return "Premultiplied";
+        case spriteBlendAdditive:
+            return "Additive";
+        case spriteBlendMultiply:
+            return "Multiply";
+        case spriteBlendOneOne:
+            return "One-One";
+        case spriteBlendOpaque:
+            return "Opaque";
+        default:
+            return "Unsupported descriptor";
+    }
+}
+function IsRegisteredSpriteLayer(engine, entity) {
+    if (typeof entity !== "object" || entity === null) {
+        return false;
+    }
+    return engine.surfaces.some((surface) => getRenderingContexts(surface).some((context) => getRenderingContextKind(context) === "sprite-renderer" && context.layers.includes(entity)));
+}
+const SpriteLayerProperties = (props) => {
+    const { engine, layer } = props;
+    return (jsxs(Fragment, { children: [jsx(ComputedProperty, { component: TextPropertyLine, label: "Name", target: layer, getValue: GetSpriteLayerDisplayNameGetter(engine) }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Visible", target: layer, propertyKey: "visible" }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Order", target: layer, propertyKey: "order" }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Opacity", target: layer, propertyKey: "opacity", min: 0, max: 1, step: 0.01 }), jsx(ComputedProperty, { component: StringifiedPropertyLine, label: "Sprite Count", target: layer, getValue: GetSpriteCount }), jsx(TextPropertyLine, { label: "Depth Mode", value: layer.depth }), jsx(TextPropertyLine, { label: "Blend Mode", value: GetSpriteBlendModeName(layer.blendMode) }), jsx(DerivedProperty, { component: NumberInputPropertyLine, label: "View Position X", target: layer, getValue: GetViewPositionX, setValue: SetViewPositionX, propertyPath: "view.positionPx[0]", getPropertyOwner: GetViewPosition, propertyKey: 0, step: 1, unit: "px" }), jsx(DerivedProperty, { component: NumberInputPropertyLine, label: "View Position Y", target: layer, getValue: GetViewPositionY, setValue: SetViewPositionY, propertyPath: "view.positionPx[1]", getPropertyOwner: GetViewPosition, propertyKey: 1, step: 1, unit: "px" }), jsx(DerivedProperty, { component: NumberInputPropertyLine, label: "View Zoom", target: layer, getValue: GetViewZoom, setValue: SetViewZoom, propertyPath: "view.zoom", getPropertyOwner: GetView, propertyKey: "zoom", validator: IsNonZero, step: 0.1 }), jsx(DerivedProperty, { component: NumberInputPropertyLine, label: "View Rotation", target: layer, getValue: GetViewRotation, setValue: SetViewRotation, propertyPath: "view.rotation", getPropertyOwner: GetView, propertyKey: "rotation", step: 0.01, unit: "rad" }), jsx(DerivedProperty, { component: NumberInputPropertyLine, label: "Pivot X", target: layer, getValue: GetPivotX, setValue: SetPivotX, propertyPath: "pivot[0]", getPropertyOwner: GetPivot, propertyKey: 0, min: 0, max: 1, step: 0.01 }), jsx(DerivedProperty, { component: NumberInputPropertyLine, label: "Pivot Y", target: layer, getValue: GetPivotY, setValue: SetPivotY, propertyPath: "pivot[1]", getPropertyOwner: GetPivot, propertyKey: 1, min: 0, max: 1, step: 0.01 }), jsx(TextPropertyLine, { label: "Default Depth", value: "Not applicable to renderer-owned layers." }), jsx(TextPropertyLine, { label: "Atlas Frames", value: layer.atlas.frames.length.toString() }), jsx(TextPropertyLine, { label: "Atlas Size", value: `${layer.atlas.textureSizePx[0]} x ${layer.atlas.textureSizePx[1]} px` }), jsx(TextPropertyLine, { label: "Premultiplied Alpha", value: layer.atlas.premultipliedAlpha ? "True" : "False" })] }));
+};
+const SpriteLayerPropertiesServiceDefinition = {
+    friendlyName: "Babylon Lite Sprite Layer Properties",
+    consumes: [PropertiesServiceIdentity, EngineContextIdentity],
+    factory: (propertiesService, engineContext) => propertiesService.addSectionContent({
+        key: "Babylon Lite Sprite Layer Properties",
+        predicate: (entity) => IsRegisteredSpriteLayer(engineContext.engine, entity),
+        content: [
+            {
+                section: "General",
+                component: ({ context }) => jsx(SpriteLayerProperties, { engine: engineContext.engine, layer: context }),
+            },
+        ],
+    }),
 };
 
+const TextLayerDisplayNameGetters = new WeakMap();
+function GetTextLayerDisplayNameGetter(engine) {
+    let getter = TextLayerDisplayNameGetters.get(engine);
+    if (!getter) {
+        getter = (layer) => GetRenderingLayerDisplayName(engine, "text-renderer", layer, "Text Layer");
+        TextLayerDisplayNameGetters.set(engine, getter);
+    }
+    return getter;
+}
 function GetRunCount(layer) {
     return layer.data.runs.length;
 }
+function GetPositionX(layer) {
+    return layer.positionPx.x;
+}
+function SetPositionX(layer, value) {
+    layer.positionPx.x = value;
+}
+function GetPositionY(layer) {
+    return layer.positionPx.y;
+}
+function SetPositionY(layer, value) {
+    layer.positionPx.y = value;
+}
+function GetPosition(layer) {
+    return layer.positionPx;
+}
 function GetGlyphCount(layer) {
     return layer.data.runs.reduce((count, run) => count + run.glyphs.length, 0);
 }
@@ -8286,8 +9403,8 @@ function IsRegisteredTextLayer(engine, entity) {
     return engine.surfaces.some((surface) => getRenderingContexts(surface).some((context) => getRenderingContextKind(context) === "text-renderer" && context.layers.includes(entity)));
 }
 const TextLayerProperties = (props) => {
-    const { layer } = props;
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Visible", target: layer, propertyKey: "visible" }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Position X", target: layer.positionPx, propertyKey: "x", propertyPath: "positionPx.x", step: 1, unit: "px" }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Position Y", target: layer.positionPx, propertyKey: "y", propertyPath: "positionPx.y", step: 1, unit: "px" }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Rotation", target: layer, propertyKey: "rotationRad", step: 0.01, unit: "rad" }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Scale", target: layer, propertyKey: "scale", step: 0.1 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Order", target: layer, propertyKey: "order" }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Opacity", target: layer, propertyKey: "opacity", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Coverage Gamma", target: layer, propertyKey: "coverageGamma", step: 0.1 }), jsx(ComputedProperty, { component: StringifiedPropertyLine, label: "Run Count", target: layer, getValue: GetRunCount }), jsx(ComputedProperty, { component: StringifiedPropertyLine, label: "Glyph Count", target: layer, getValue: GetGlyphCount })] }));
+    const { engine, layer } = props;
+    return (jsxs(Fragment, { children: [jsx(ComputedProperty, { component: TextPropertyLine, label: "Name", target: layer, getValue: GetTextLayerDisplayNameGetter(engine) }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Visible", target: layer, propertyKey: "visible" }), jsx(DerivedProperty, { component: NumberInputPropertyLine, label: "Position X", target: layer, getValue: GetPositionX, setValue: SetPositionX, propertyPath: "positionPx.x", getPropertyOwner: GetPosition, propertyKey: "x", step: 1, unit: "px" }), jsx(DerivedProperty, { component: NumberInputPropertyLine, label: "Position Y", target: layer, getValue: GetPositionY, setValue: SetPositionY, propertyPath: "positionPx.y", getPropertyOwner: GetPosition, propertyKey: "y", step: 1, unit: "px" }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Rotation", target: layer, propertyKey: "rotationRad", step: 0.01, unit: "rad" }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Scale", target: layer, propertyKey: "scale", step: 0.1 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Order", target: layer, propertyKey: "order" }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Opacity", target: layer, propertyKey: "opacity", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Coverage Gamma", target: layer, propertyKey: "coverageGamma", step: 0.1 }), jsx(ComputedProperty, { component: StringifiedPropertyLine, label: "Run Count", target: layer, getValue: GetRunCount }), jsx(ComputedProperty, { component: StringifiedPropertyLine, label: "Glyph Count", target: layer, getValue: GetGlyphCount })] }));
 };
 const TextLayerPropertiesServiceDefinition = {
     friendlyName: "Babylon Lite Text Layer Properties",
@@ -8298,7 +9415,7 @@ const TextLayerPropertiesServiceDefinition = {
         content: [
             {
                 section: "General",
-                component: ({ context }) => jsx(TextLayerProperties, { layer: context }),
+                component: ({ context }) => jsx(TextLayerProperties, { engine: engineContext.engine, layer: context }),
             },
         ],
     }),
@@ -8330,6 +9447,100 @@ const TexturePropertiesServiceDefinition = {
     }),
 };
 
+function ClearRemovedSelection(selectionService, engineContext, selectionWasRemoved) {
+    const selectedEntity = selectionService.selectedEntity;
+    if (selectionWasRemoved &&
+        !GetSceneContexts(engineContext.engine).some((scene) => GetSceneNodeRoots(scene).some((root) => root === selectedEntity || (IsSceneNode(selectedEntity) && IsSceneNodeDescendantOf(selectedEntity, root))))) {
+        selectionService.selectedEntity = null;
+    }
+}
+
+const CameraIcon = () => jsx(CameraRegular, { color: tokens.colorPaletteGreenForeground2 });
+const CameraExplorerServiceDefinition = {
+    friendlyName: "Babylon Lite Camera Explorer",
+    consumes: [EngineExplorerServiceIdentity, ExplorerServiceIdentity, WatcherServiceIdentity, SelectionServiceIdentity, EngineContextIdentity],
+    factory: (engineExplorerService, explorerService, watcherService, selectionService, engineContext) => {
+        const providerRegistration = engineExplorerService.addRenderingContextNodeProvider({
+            order: 10,
+            predicate: IsSceneContext,
+            getNodes: (scene) => {
+                return [
+                    CreateSceneExplorerSectionNode("cameras", "Cameras", scene.camera ? [scene.camera] : [], (camera) => CreateWatchedNameDisplayInfo(watcherService, camera, () => camera.name || "Camera"), CameraIcon),
+                ];
+            },
+            getSnapshot: (scene) => (scene.camera ? [scene.camera] : []),
+        });
+        const removeRegistration = explorerService.addItemCommand({
+            predicate: (entity) => IsCamera(entity) && GetSceneContexts(engineContext.engine).filter((scene) => scene.camera === entity).length === 1,
+            order: 10000,
+            getCommand: (camera) => ({
+                type: "action",
+                mode: "contextMenu",
+                displayName: "Remove from Scene",
+                icon: DeleteRegular,
+                hotKey: { keyCode: "Delete" },
+                execute: () => {
+                    const owningScenes = GetSceneContexts(engineContext.engine).filter((candidate) => candidate.camera === camera);
+                    if (owningScenes.length === 1) {
+                        const selectedEntity = selectionService.selectedEntity;
+                        const selectionWasRemoved = selectedEntity === camera || (IsSceneNode(selectedEntity) && IsSceneNodeDescendantOf(selectedEntity, camera));
+                        removeFromScene(owningScenes[0], camera);
+                        ClearRemovedSelection(selectionService, engineContext, selectionWasRemoved);
+                    }
+                },
+            }),
+        });
+        return {
+            dispose: () => {
+                removeRegistration.dispose();
+                providerRegistration.dispose();
+            },
+        };
+    },
+};
+
+const LightIcon = () => jsx(LightbulbRegular, { color: tokens.colorPaletteYellowForeground2 });
+const LightExplorerServiceDefinition = {
+    friendlyName: "Babylon Lite Light Explorer",
+    consumes: [EngineExplorerServiceIdentity, ExplorerServiceIdentity, SelectionServiceIdentity, EngineContextIdentity],
+    factory: (engineExplorerService, explorerService, selectionService, engineContext) => {
+        const providerRegistration = engineExplorerService.addRenderingContextNodeProvider({
+            order: 20,
+            predicate: IsSceneContext,
+            getNodes: (scene) => {
+                return [CreateSceneExplorerSectionNode("lights", "Lights", scene.lights, (light, index) => ({ name: GetLightDisplayName(light, index) }), LightIcon)];
+            },
+            getSnapshot: (scene) => scene.lights,
+        });
+        const removeRegistration = explorerService.addItemCommand({
+            predicate: (entity) => IsLight(entity) && GetSceneContexts(engineContext.engine).filter((scene) => scene.lights.includes(entity)).length === 1,
+            order: 10000,
+            getCommand: (light) => ({
+                type: "action",
+                mode: "contextMenu",
+                displayName: "Remove from Scene",
+                icon: DeleteRegular,
+                hotKey: { keyCode: "Delete" },
+                execute: () => {
+                    const owningScenes = GetSceneContexts(engineContext.engine).filter((candidate) => candidate.lights.includes(light));
+                    if (owningScenes.length === 1) {
+                        const selectedEntity = selectionService.selectedEntity;
+                        const selectionWasRemoved = selectedEntity === light || selectedEntity === light.shadowGenerator || (IsSceneNode(selectedEntity) && IsSceneNodeDescendantOf(selectedEntity, light));
+                        removeFromScene(owningScenes[0], light);
+                        ClearRemovedSelection(selectionService, engineContext, selectionWasRemoved);
+                    }
+                },
+            }),
+        });
+        return {
+            dispose: () => {
+                removeRegistration.dispose();
+                providerRegistration.dispose();
+            },
+        };
+    },
+};
+
 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>');
 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>');
@@ -8339,38 +9550,6 @@ createFluentIcon("BreakTangent", "20", '<g transform="scale(0.5)"><path d="M27.1
 createFluentIcon("UnifyTangent", "20", '<g transform="scale(0.5)"><path d="M27.94,18.28a1.49,1.49,0,0,0-1.41,1h-5l-1.62-1.63-1.62,1.63h-5a1.5,1.5,0,1,0,0,1h5l1.62,1.62,1.62-1.62h5a1.5,1.5,0,1,0,1.41-2Z"/></g>');
 createFluentIcon("StepTangent", "20", '<g transform="scale(0.5)"><path d="M29,16.71a1.5,1.5,0,1,0-2,1.41v5.67H11v1H28V18.12A1.51,1.51,0,0,0,29,16.71Z"/></g>');
 
-/**
- * Returns whether a rendering context is a scene context.
- * @param context The rendering context to test.
- * @returns Whether the context is a scene context.
- */
-function IsSceneContext(context) {
-    return getRenderingContextKind(context) === "scene";
-}
-/**
- * Creates an Explorer section containing the supplied scene entities.
- * @param id The stable section identifier.
- * @param displayName The section's display name.
- * @param entities The entities displayed by the section.
- * @param getEntityDisplayInfo Gets the display information for an entity.
- * @param entityIcon The optional icon component for the entities.
- * @returns The Explorer node description for the section.
- */
-function CreateSceneExplorerSectionNode(id, displayName, entities, getEntityDisplayInfo, entityIcon) {
-    return {
-        id,
-        kind: "group",
-        getDisplayInfo: () => ({ name: displayName }),
-        getChildren: () => entities.map((entity, index) => ({
-            id: GetEntityId(entity).toString(),
-            kind: "item",
-            entity,
-            icon: entityIcon,
-            getDisplayInfo: () => getEntityDisplayInfo(entity, index),
-        })),
-    };
-}
-
 /**
  * Gets the unique materials referenced by a scene's meshes.
  * @param scene The scene to inspect.
@@ -8405,35 +9584,250 @@ const MaterialExplorerServiceDefinition = {
     }),
 };
 
+const NodeTopologyMarkers = new WeakMap();
+function GetNodeTopologyMarker(node) {
+    const parent = IsSceneNode(node.parent) ? node.parent : null;
+    const existing = NodeTopologyMarkers.get(node);
+    if (existing?.parent === parent) {
+        return existing.marker;
+    }
+    const marker = {};
+    NodeTopologyMarkers.set(node, { parent, marker });
+    return marker;
+}
+function CreateNodeDescription(node, watcherService) {
+    return {
+        id: GetEntityId(node).toString(),
+        kind: "item",
+        entity: node,
+        icon: () => (IsMesh(node) ? jsx(MeshIcon, { color: tokens.colorPaletteBlueForeground2 }) : jsx(MyLocationRegular, { color: tokens.colorPaletteBlueForeground2 })),
+        getDisplayInfo: () => CreateWatchedNameDisplayInfo(watcherService, node, () => node.name || (IsMesh(node) ? "Unnamed Mesh" : "Unnamed Transform Node")),
+        getChildren: () => node.children.filter(IsSceneNode).map((child) => CreateNodeDescription(child, watcherService)),
+    };
+}
+function IsNodeInScene(scene, node) {
+    return GetSceneNodeRoots(scene).some((root) => root === node || IsSceneNodeDescendantOf(node, root));
+}
 const MeshExplorerServiceDefinition = {
-    friendlyName: "Babylon Lite Mesh Explorer",
-    consumes: [EngineExplorerServiceIdentity, WatcherServiceIdentity],
-    factory: (engineExplorerService, watcherService) => engineExplorerService.addRenderingContextNodeProvider({
-        order: 0,
-        predicate: IsSceneContext,
-        getNodes: (scene) => [
-            CreateSceneExplorerSectionNode("meshes", "Meshes", scene.meshes, (mesh) => CreateWatchedNameDisplayInfo(watcherService, mesh, () => mesh.name), () => jsx(MeshIcon, { color: tokens.colorPaletteBlueForeground2 })),
-        ],
-        getSnapshot: (scene) => scene.meshes,
-    }),
+    friendlyName: "Babylon Lite Scene Node Explorer",
+    consumes: [EngineExplorerServiceIdentity, ExplorerServiceIdentity, WatcherServiceIdentity, SelectionServiceIdentity, EngineContextIdentity],
+    factory: (engineExplorerService, explorerService, watcherService, selectionService, engineContext) => {
+        const providerRegistration = engineExplorerService.addRenderingContextNodeProvider({
+            order: 0,
+            predicate: IsSceneContext,
+            getNodes: (scene) => {
+                return [
+                    {
+                        id: "nodes",
+                        kind: "group",
+                        getDisplayInfo: () => ({ name: "Nodes" }),
+                        getChildren: () => GetSceneNodeRoots(scene).map((node) => CreateNodeDescription(node, watcherService)),
+                        dragDropConfig: {
+                            canDrag: (entity) => IsSceneNode(entity) && IsNodeInScene(scene, entity),
+                            canDrop: (draggedEntity, targetEntity) => IsSceneNode(draggedEntity) &&
+                                IsNodeInScene(scene, draggedEntity) &&
+                                (targetEntity === null ||
+                                    (IsSceneNode(targetEntity) &&
+                                        IsNodeInScene(scene, targetEntity) &&
+                                        draggedEntity !== targetEntity &&
+                                        !IsSceneNodeDescendantOf(targetEntity, draggedEntity))) &&
+                                draggedEntity.parent !== targetEntity,
+                            onDrop: (draggedEntity, targetEntity) => {
+                                if (IsSceneNode(draggedEntity) && (targetEntity === null || IsSceneNode(targetEntity))) {
+                                    setParent(draggedEntity, targetEntity);
+                                }
+                            },
+                        },
+                    },
+                ];
+            },
+            getSnapshot: (scene) => GetSceneNodeRoots(scene)
+                .flatMap((root) => [root, ...GetNodeDescendants(root)])
+                .flatMap((node) => [node, GetNodeTopologyMarker(node)]),
+        });
+        const visibilityRegistration = explorerService.addItemCommand({
+            predicate: (entity) => IsSceneNode(entity) && GetOwningScenes(engineContext, entity).length > 0,
+            order: 1100,
+            getCommand: (node) => {
+                const onChange = new Observable();
+                const visibilityWatcher = watcherService.watchValue(() => node.visible !== false, () => onChange.notifyObservers());
+                return {
+                    type: "toggle",
+                    mode: "contextMenu",
+                    get displayName() {
+                        return node.visible === false ? "Show Node" : "Hide Node";
+                    },
+                    icon: () => (node.visible === false ? jsx(EyeOffRegular, {}) : jsx(EyeRegular, {})),
+                    get isEnabled() {
+                        return node.visible !== false;
+                    },
+                    set isEnabled(visible) {
+                        setSubtreeVisible(node, visible);
+                    },
+                    onChange,
+                    dispose: () => {
+                        visibilityWatcher.dispose();
+                        onChange.clear();
+                    },
+                };
+            },
+        });
+        const removeRegistration = explorerService.addItemCommand({
+            predicate: (entity) => IsSceneNode(entity) && GetOwningScenes(engineContext, entity).length === 1,
+            order: 10000,
+            getCommand: (node) => ({
+                type: "action",
+                mode: "contextMenu",
+                displayName: "Remove from Scene",
+                icon: DeleteRegular,
+                hotKey: { keyCode: "Delete" },
+                execute: () => {
+                    const owningScenes = GetOwningScenes(engineContext, node);
+                    const [scene] = owningScenes;
+                    if (scene && owningScenes.length === 1) {
+                        const selectedEntity = selectionService.selectedEntity;
+                        const selectionWasRemoved = selectedEntity === node || (IsSceneNode(selectedEntity) && IsSceneNodeDescendantOf(selectedEntity, node));
+                        if (node.parent) {
+                            setParent(node, null);
+                        }
+                        removeFromScene(scene, node);
+                        ClearRemovedSelection(selectionService, engineContext, selectionWasRemoved);
+                    }
+                },
+            }),
+        });
+        return {
+            dispose: () => {
+                removeRegistration.dispose();
+                visibilityRegistration.dispose();
+                providerRegistration.dispose();
+            },
+        };
+    },
+};
+function GetNodeDescendants(node) {
+    return node.children.filter(IsSceneNode).flatMap((child) => [child, ...GetNodeDescendants(child)]);
+}
+function GetOwningScenes(engineContext, node) {
+    return GetSceneContexts(engineContext.engine).filter((scene) => GetSceneNodeRoots(scene).some((root) => root === node || IsSceneNodeDescendantOf(node, root)));
+}
+
+const ShadowGeneratorIcon = () => jsx(WeatherMoonRegular, { color: tokens.colorPaletteYellowForeground2 });
+const ShadowGeneratorExplorerServiceDefinition = {
+    friendlyName: "Babylon Lite Shadow Generator Explorer",
+    consumes: [EngineExplorerServiceIdentity, ExplorerServiceIdentity, SelectionServiceIdentity, EngineContextIdentity],
+    factory: (engineExplorerService, explorerService, selectionService, engineContext) => {
+        const providerRegistration = engineExplorerService.addRenderingContextNodeProvider({
+            order: 30,
+            predicate: IsSceneContext,
+            getNodes: (scene) => {
+                return [
+                    CreateSceneExplorerSectionNode("shadow-generators", "Shadow Generators", scene.shadowGenerators, (shadowGenerator) => ({ name: GetShadowGeneratorDisplayName(scene, shadowGenerator) }), ShadowGeneratorIcon),
+                ];
+            },
+            getSnapshot: (scene) => scene.shadowGenerators,
+        });
+        const removeRegistration = explorerService.addItemCommand({
+            predicate: (entity) => typeof entity === "object" &&
+                entity !== null &&
+                GetSceneContexts(engineContext.engine).filter((scene) => scene.shadowGenerators.some((shadowGenerator) => shadowGenerator === entity)).length === 1,
+            order: 10000,
+            getCommand: (shadowGenerator) => ({
+                type: "action",
+                mode: "contextMenu",
+                displayName: "Remove from Scene",
+                icon: DeleteRegular,
+                hotKey: { keyCode: "Delete" },
+                execute: () => {
+                    const owningScenes = GetSceneContexts(engineContext.engine).filter((candidate) => candidate.shadowGenerators.includes(shadowGenerator));
+                    if (owningScenes.length === 1) {
+                        if (selectionService.selectedEntity === shadowGenerator) {
+                            selectionService.selectedEntity = null;
+                        }
+                        removeFromScene(owningScenes[0], shadowGenerator);
+                    }
+                },
+            }),
+        });
+        return {
+            dispose: () => {
+                removeRegistration.dispose();
+                providerRegistration.dispose();
+            },
+        };
+    },
 };
 
+function CreateRenderingLayerExplorerServiceDefinition(options) {
+    const { friendlyName, contextKind, layerTypeName, icon } = options;
+    return {
+        friendlyName,
+        consumes: [EngineExplorerServiceIdentity, ExplorerServiceIdentity, WatcherServiceIdentity, EngineContextIdentity],
+        factory: (engineExplorerService, explorerService, watcherService, engineContext) => {
+            const getOwners = (layer) => GetRenderingLayerOwners(engineContext.engine, contextKind, layer);
+            const providerRegistration = engineExplorerService.addRenderingContextNodeProvider({
+                predicate: (context) => getRenderingContextKind(context) === contextKind,
+                getNodes: (context) => GetOrderedRenderingLayers(context.layers).map((layer, index) => ({
+                    id: `${contextKind}-layer-${GetEntityId(layer)}`,
+                    kind: "item",
+                    entity: layer,
+                    icon,
+                    getDisplayInfo: () => ({ name: `${layerTypeName} ${index + 1}` }),
+                })),
+                getSnapshot: (context) => GetRenderingLayerSnapshot(context.layers),
+            });
+            const visibilityRegistration = explorerService.addItemCommand({
+                predicate: (entity) => typeof entity === "object" && entity !== null && getOwners(entity).length > 0,
+                order: 1100,
+                getCommand: (layer) => {
+                    const onChange = new Observable();
+                    const visibilityWatcher = watcherService.watchProperty(layer, "visible", () => onChange.notifyObservers());
+                    return {
+                        type: "toggle",
+                        mode: "contextMenu",
+                        get displayName() {
+                            return layer.visible ? `Hide ${layerTypeName}` : `Show ${layerTypeName}`;
+                        },
+                        icon: () => (layer.visible ? jsx(EyeRegular, {}) : jsx(EyeOffRegular, {})),
+                        get isEnabled() {
+                            return layer.visible;
+                        },
+                        set isEnabled(visible) {
+                            layer.visible = visible;
+                        },
+                        onChange,
+                        dispose: () => {
+                            visibilityWatcher.dispose();
+                            onChange.clear();
+                        },
+                    };
+                },
+            });
+            return {
+                dispose: () => {
+                    visibilityRegistration.dispose();
+                    providerRegistration.dispose();
+                },
+            };
+        },
+    };
+}
+
+const SpriteLayerIcon = () => jsx(LayerDiagonalPersonRegular, { color: tokens.colorPalettePeachForeground2 });
+const SpriteLayerExplorerServiceDefinition = CreateRenderingLayerExplorerServiceDefinition({
+    friendlyName: "Babylon Lite Sprite Layer Explorer",
+    contextKind: "sprite-renderer",
+    layerTypeName: "Sprite Layer",
+    icon: SpriteLayerIcon,
+});
+
 const TextLayerIcon = () => jsx(TextTRegular, {});
-const TextLayerExplorerServiceDefinition = {
+const TextLayerExplorerServiceDefinition = CreateRenderingLayerExplorerServiceDefinition({
     friendlyName: "Babylon Lite Text Layer Explorer",
-    consumes: [EngineExplorerServiceIdentity],
-    factory: (engineExplorerService) => engineExplorerService.addRenderingContextNodeProvider({
-        predicate: (context) => getRenderingContextKind(context) === "text-renderer",
-        getNodes: (renderer) => renderer.layers.map((layer, index) => ({
-            id: `text-layer-${GetEntityId(layer)}`,
-            kind: "item",
-            entity: layer,
-            icon: TextLayerIcon,
-            getDisplayInfo: () => ({ name: `Layer ${index + 1}` }),
-        })),
-        getSnapshot: (renderer) => renderer.layers,
-    }),
-};
+    contextKind: "text-renderer",
+    layerTypeName: "Text Layer",
+    icon: TextLayerIcon,
+});
 
 function GetTextureDisplayName(texture, index) {
     return `Texture ${index + 1} (${texture.width} x ${texture.height})`;
@@ -8489,16 +9883,25 @@ function ShowInspector(engine, options = {}) {
                 watcherServiceDefinition,
                 EngineExplorerServiceDefinition,
                 MeshExplorerServiceDefinition,
+                CameraExplorerServiceDefinition,
+                LightExplorerServiceDefinition,
+                ShadowGeneratorExplorerServiceDefinition,
                 MaterialExplorerServiceDefinition,
                 TextureExplorerServiceDefinition,
                 TextLayerExplorerServiceDefinition,
+                SpriteLayerExplorerServiceDefinition,
                 PropertiesServiceDefinition,
                 EnginePropertiesServiceDefinition,
                 RenderingContextPropertiesServiceDefinition,
+                SceneNodePropertiesServiceDefinition,
                 MeshPropertiesServiceDefinition,
+                CameraPropertiesServiceDefinition,
+                LightPropertiesServiceDefinition,
+                ShadowGeneratorPropertiesServiceDefinition,
                 MaterialPropertiesServiceDefinition,
                 TexturePropertiesServiceDefinition,
                 TextLayerPropertiesServiceDefinition,
+                SpriteLayerPropertiesServiceDefinition,
                 SettingsServiceDefinition,
                 watcherSettingsServiceDefinition,
                 ShellSettingsServiceDefinition,
@@ -8515,4 +9918,4 @@ function ShowInspector(engine, options = {}) {
 }
 
 export { PropertyLine as $, Accordion as A, BooleanBadgePropertyLine as B, Checkbox as C, DraggableLine as D, EngineContextIdentity as E, FileUploadLine as F, GetPropertyDescriptor as G, HexPropertyLine as H, InfoLabel as I, MakeModularBridge as J, MakeModularTool as K, Link as L, MakeDialogTeachingMoment as M, MakePopoverTeachingMoment as N, MakeTeachingMoment as O, MessageBar as P, NumberDropdown as Q, NumberDropdownPropertyLine as R, ShellServiceIdentity as S, NumberInputPropertyLine as T, ObservableCollection as U, Pane as V, PlaceholderPropertyLine as W, Popover as X, PositionedPopover as Y, PropertiesServiceIdentity as Z, PropertyContext as _, AccordionSection as a, SearchBar as a0, SearchBox as a1, SelectionServiceDefinition as a2, SelectionServiceIdentity as a3, SettingsServiceIdentity as a4, SettingsStore as a5, SettingsStoreIdentity as a6, ShowInspector as a7, SidePaneContainer as a8, Slider as a9, useInterceptObservable as aA, useKeyListener as aB, useKeyState as aC, useObservableCollection as aD, useObservableState as aE, useOrderedObservableCollection as aF, usePollingObservable as aG, usePropertyChangedNotifier as aH, useResource as aI, useTheme as aJ, useThemeMode as aK, useToast as aL, SpinButton as aa, SpinButtonPropertyLine as ab, StringDropdown as ac, StringDropdownPropertyLine as ad, StringifiedPropertyLine as ae, Switch as af, SwitchPropertyLine as ag, SyncedSliderInput as ah, SyncedSliderPropertyLine as ai, TeachingMoment as aj, TextAreaPropertyLine as ak, TextInput as al, TextInputPropertyLine as am, TextPropertyLine as an, Textarea as ao, Theme as ap, ThemeServiceIdentity as aq, ToastProvider as ar, ToggleButton as as, Tooltip as at, UploadButton as au, WatcherServiceIdentity as av, useAngleConverters as aw, useAsyncResource as ax, useEventListener as ay, useEventfulState as az, AccordionSectionItem as b, BridgeCommandRegistryIdentity as c, BuiltInsExtensionFeed as d, Button as e, ButtonLine as f, CheckboxPropertyLine as g, ChildWindow as h, Collapse as i, ComboBox as j, ComboBoxPropertyLine as k, ConstructorFactory as l, Dropdown as m, EngineExplorerServiceIdentity as n, EntitySelector as o, ErrorBoundary as p, ExplorerServiceIdentity as q, ExtensibleAccordion as r, InterceptFunction as s, InterceptProperty as t, useExtensionManager as u, IsPropertyReadonly as v, LineContainer as w, LinkPropertyLine as x, List as y, MakeLazyComponent as z };
-//# sourceMappingURL=index-DmQN3QdU.js.map
+//# sourceMappingURL=index-D8vFySa7.js.map