@babylonjs/inspector 8.55.3 → 8.55.4

package/lib/{index-_q2JI3vX.js → index-CjZdtI-w.js}

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { createContext, forwardRef, useContext, useState, useCallback, Component, useMemo, useEffect, useRef, useReducer, Children, isValidElement, useLayoutEffect, cloneElement, useImperativeHandle, createElement, Suspense, memo, Fragment as Fragment$1, lazy } from 'react';
-import { tokens, makeStyles, Tooltip as Tooltip$1, Button as Button$1, Spinner, Link as Link$1, Caption1, Body1, useFluent, Accordion as Accordion$1, AccordionHeader, Subtitle2Stronger, AccordionPanel, Divider, MessageBar as MessageBar$1, MessageBarBody, AccordionItem, SearchBox as SearchBox$1, Portal, ToggleButton as ToggleButton$1, InfoLabel as InfoLabel$1, Body1Strong, mergeClasses, useId, useToastController, Toast, ToastTitle, FluentProvider, Toaster, Checkbox as Checkbox$1, createLightTheme, createDarkTheme, TeachingPopover, TeachingPopoverSurface, TeachingPopoverHeader, TeachingPopoverBody, Switch as Switch$1, createDOMRenderer, RendererProvider, Menu, MenuTrigger, SplitButton, MenuPopover, MenuList, MenuItem, Toolbar as Toolbar$1, ToolbarRadioButton, MenuGroup, MenuGroupHeader, treeItemLevelToken, FlatTree, FlatTreeItem, TreeItemLayout, MenuDivider, MenuItemCheckbox, useMergedRefs, Input, Dropdown as Dropdown$1, Option, Popover as Popover$1, PopoverTrigger, PopoverSurface, ColorPicker, ColorArea, ColorSlider, AlphaSlider, ColorSwatch, PresenceBadge, Slider as Slider$1, MenuItemRadio, Dialog, DialogSurface, DialogBody, DialogTitle, DialogContent, DialogActions, List as List$1, ListItem, Badge, Label, MessageBarTitle, Subtitle2, useComboboxFilter, Combobox, Textarea as Textarea$1, ToolbarButton, ToolbarDivider, Field } from '@fluentui/react-components';
-import { ErrorCircleRegular, EyeFilled, EyeOffRegular, CheckmarkFilled, EditRegular, FilterRegular, PinFilled, PinRegular, ArrowCircleUpRegular, ChevronCircleRight16Regular, ChevronCircleRight20Regular, ChevronCircleDown16Regular, ChevronCircleDown20Regular, Copy16Regular, CopyRegular, PanelLeftExpandRegular, PanelRightExpandRegular, PanelLeftContractRegular, PanelRightContractRegular, PictureInPictureEnterRegular, MoreHorizontalRegular, LayoutColumnTwoFocusLeftFilled, LayoutColumnTwoSplitLeftFocusTopLeftFilled, LayoutColumnTwoSplitLeftFocusBottomLeftFilled, LayoutColumnTwoFocusRightFilled, LayoutColumnTwoSplitRightFocusTopRightFilled, LayoutColumnTwoSplitRightFocusBottomRightFilled, SettingsRegular, DocumentTextRegular, createFluentIcon, TextSortAscendingRegular, GlobeRegular, ArrowExpandAllRegular, ArrowCollapseAllRegular, CubeTreeRegular, BugRegular, ArrowUploadRegular, ArrowBidirectionalUpDownFilled, ArrowDownloadRegular, StopRegular, RecordRegular, DataBarHorizontalRegular, WrenchRegular, ArrowClockwiseRegular, WeatherSunnyRegular, WeatherMoonRegular, ArrowRotateClockwiseRegular, ArrowExpandRegular, SelectObjectRegular, CubeRegular, CameraRegular, AddRegular, DeleteRegular, FullScreenMaximizeRegular, ChevronDownRegular, ChevronRightRegular, CircleSmallFilled, SaveRegular, PreviousRegular, ArrowPreviousRegular, TriangleLeftRegular, RecordStopRegular, PlayRegular, ArrowNextRegular, NextRegular, PauseRegular, LinkDismissRegular, LinkEditRegular, ArrowUndoRegular, BracesRegular, BracesDismiss16Regular, EyeRegular, CloudArrowUpRegular, CloudArrowDownRegular, EyeOffFilled, ArrowMoveFilled, StopFilled, PlayFilled, LockOpenRegular, LockClosedRegular, ResizeRegular, ChevronUpRegular, ArrowResetRegular, CircleHalfFillRegular, EyedropperRegular, PaintBucketRegular, InkStrokeRegular, StackRegular, FilmstripRegular, PauseFilled, WeatherSunnyLowFilled, LayerRegular, FrameRegular, AppGenericRegular, RectangleLandscapeRegular, BorderOutsideRegular, BorderNoneRegular, MyLocationRegular, LightbulbRegular, VideoFilled, VideoRegular, FlashlightRegular, FlashlightOffRegular, DropRegular, BlurRegular, PipelineRegular, PersonWalkingRegular, DataLineRegular, SoundWaveCircleRegular, PersonSquareRegular, LayerDiagonalPersonRegular, ImageEditRegular, ImageRegular, TargetRegular, PersonFeedbackRegular, BranchRegular, DeleteFilled } from '@fluentui/react-icons';
+import { tokens, makeStyles, Tooltip as Tooltip$1, Button as Button$1, Spinner, Link as Link$1, Caption1, Body1, useFluent, Accordion as Accordion$1, AccordionHeader, Subtitle2Stronger, AccordionPanel, Divider, MessageBar as MessageBar$1, MessageBarBody, AccordionItem, SearchBox as SearchBox$1, Portal, ToggleButton as ToggleButton$1, InfoLabel as InfoLabel$1, Body1Strong, mergeClasses, useId, useToastController, Toast, ToastTitle, FluentProvider, Toaster, Checkbox as Checkbox$1, createLightTheme, createDarkTheme, TeachingPopover, TeachingPopoverSurface, TeachingPopoverHeader, TeachingPopoverBody, Switch as Switch$1, createDOMRenderer, RendererProvider, Menu, MenuTrigger, SplitButton, MenuPopover, MenuList, MenuItem, Toolbar as Toolbar$1, ToolbarRadioButton, MenuGroup, MenuGroupHeader, treeItemLevelToken, FlatTree, FlatTreeItem, TreeItemLayout, MenuDivider, MenuItemCheckbox, useMergedRefs, Input, Dropdown as Dropdown$1, Option, Popover as Popover$1, PopoverTrigger, PopoverSurface, ColorPicker, ColorArea, ColorSlider, AlphaSlider, ColorSwatch, PresenceBadge, Slider as Slider$1, MenuItemRadio, Dialog, DialogSurface, DialogBody, DialogTitle, DialogContent, DialogActions, List as List$1, ListItem, Badge, Label, MessageBarTitle, useComboboxFilter, Combobox, Subtitle2, Textarea as Textarea$1, ToolbarButton, ToolbarDivider, Field } from '@fluentui/react-components';
+import { ErrorCircleRegular, EyeFilled, EyeOffRegular, CheckmarkFilled, EditRegular, FilterRegular, PinFilled, PinRegular, ArrowCircleUpRegular, ChevronCircleRight16Regular, ChevronCircleRight20Regular, ChevronCircleDown16Regular, ChevronCircleDown20Regular, Copy16Regular, CopyRegular, PanelLeftExpandRegular, PanelRightExpandRegular, PanelLeftContractRegular, PanelRightContractRegular, PictureInPictureEnterRegular, MoreHorizontalRegular, LayoutColumnTwoFocusLeftFilled, LayoutColumnTwoSplitLeftFocusTopLeftFilled, LayoutColumnTwoSplitLeftFocusBottomLeftFilled, LayoutColumnTwoFocusRightFilled, LayoutColumnTwoSplitRightFocusTopRightFilled, LayoutColumnTwoSplitRightFocusBottomRightFilled, SettingsRegular, DocumentTextRegular, createFluentIcon, TextSortAscendingRegular, GlobeRegular, ArrowExpandAllRegular, ArrowCollapseAllRegular, CubeTreeRegular, BugRegular, ArrowUploadRegular, ArrowBidirectionalUpDownFilled, ArrowDownloadRegular, StopRegular, RecordRegular, DataBarHorizontalRegular, WrenchRegular, ArrowClockwiseRegular, WeatherSunnyRegular, WeatherMoonRegular, ArrowRotateClockwiseRegular, ArrowExpandRegular, SelectObjectRegular, CubeRegular, CameraRegular, AddRegular, DeleteRegular, FullScreenMaximizeRegular, ChevronDownRegular, ChevronRightRegular, CircleSmallFilled, SaveRegular, PreviousRegular, ArrowPreviousRegular, TriangleLeftRegular, RecordStopRegular, PlayRegular, ArrowNextRegular, NextRegular, PauseRegular, LinkDismissRegular, LinkEditRegular, ArrowUndoRegular, BracesRegular, BracesDismiss16Regular, EyeRegular, CloudArrowUpRegular, CloudArrowDownRegular, EyeOffFilled, ArrowMoveFilled, StopFilled, PlayFilled, LockOpenRegular, LockClosedRegular, ResizeRegular, ChevronUpRegular, ArrowResetRegular, CircleHalfFillRegular, EyedropperRegular, PaintBucketRegular, InkStrokeRegular, StackRegular, FilmstripRegular, PauseFilled, WeatherSunnyLowFilled, LayerRegular, FrameRegular, AppGenericRegular, RectangleLandscapeRegular, BorderOutsideRegular, BorderNoneRegular, MyLocationRegular, BubbleMultipleRegular, LightbulbRegular, VideoFilled, VideoRegular, FlashlightRegular, FlashlightOffRegular, DropRegular, BlurRegular, PipelineRegular, PersonWalkingRegular, DataLineRegular, SoundWaveCircleRegular, PersonSquareRegular, LayerDiagonalPersonRegular, ImageEditRegular, ImageRegular, TargetRegular, PersonFeedbackRegular, BranchRegular, DeleteFilled } from '@fluentui/react-icons';
 import { Color3, Color4 } from '@babylonjs/core/Maths/math.color.js';
 import { Vector3, Quaternion, Matrix, Vector2, Vector4, TmpVectors } from '@babylonjs/core/Maths/math.vector.js';
 import { Observable } from '@babylonjs/core/Misc/observable.js';
@@ -58,6 +58,7 @@ import { GeospatialCamera } from '@babylonjs/core/Cameras/geospatialCamera.js';
 import { TargetCamera } from '@babylonjs/core/Cameras/targetCamera.js';
 import { Scene } from '@babylonjs/core/scene.js';
 import { FrameGraph } from '@babylonjs/core/FrameGraph/frameGraph.js';
+import { ClusteredLightContainer } from '@babylonjs/core/Lights/Clustered/clusteredLightContainer.js';
 import { DirectionalLight } from '@babylonjs/core/Lights/directionalLight.js';
 import { HemisphericLight } from '@babylonjs/core/Lights/hemisphericLight.js';
 import { PointLight } from '@babylonjs/core/Lights/pointLight.js';
@@ -66,6 +67,8 @@ import { ShadowLight } from '@babylonjs/core/Lights/shadowLight.js';
 import { SpotLight } from '@babylonjs/core/Lights/spotLight.js';
 import { CascadedShadowGenerator } from '@babylonjs/core/Lights/Shadows/cascadedShadowGenerator.js';
 import { DirectionalLightFrustumViewer } from '@babylonjs/core/Debug/directionalLightFrustumViewer.js';
+import { CubeTexture } from '@babylonjs/core/Materials/Textures/cubeTexture.js';
+import { ReadFile } from '@babylonjs/core/Misc/fileTools.js';
 import { ShadowGenerator } from '@babylonjs/core/Lights/Shadows/shadowGenerator.js';
 import '@babylonjs/core/Lights/Shadows/shadowGeneratorSceneComponent.js';
 import { Material } from '@babylonjs/core/Materials/material.js';
@@ -81,8 +84,6 @@ import { PBRMaterial } from '@babylonjs/core/Materials/PBR/pbrMaterial.js';
 import { GradientBlockColorStep } from '@babylonjs/core/Materials/Node/Blocks/gradientBlock.js';
 import { NodeMaterialBlockConnectionPointTypes } from '@babylonjs/core/Materials/Node/Enums/nodeMaterialBlockConnectionPointTypes.js';
 import { Color3Gradient, ColorGradient, FactorGradient } from '@babylonjs/core/Misc/gradients.js';
-import { ReadFile } from '@babylonjs/core/Misc/fileTools.js';
-import { CubeTexture } from '@babylonjs/core/Materials/Textures/cubeTexture.js';
 import { Mesh } from '@babylonjs/core/Meshes/mesh.js';
 import { SkeletonViewer } from '@babylonjs/core/Debug/skeletonViewer.js';
 import { VertexBuffer } from '@babylonjs/core/Meshes/buffer.js';
@@ -131,7 +132,6 @@ import { PointerEventTypes } from '@babylonjs/core/Events/pointerEvents.js';
 import { HtmlElementTexture } from '@babylonjs/core/Materials/Textures/htmlElementTexture.js';
 import { ShaderMaterial } from '@babylonjs/core/Materials/shaderMaterial.js';
 import { CreatePlane } from '@babylonjs/core/Meshes/Builders/planeBuilder.js';
-import { ClusteredLightContainer } from '@babylonjs/core/Lights/Clustered/clusteredLightContainer.js';
 import '@babylonjs/core/Rendering/boundingBoxRenderer.js';
 import '@babylonjs/core/PostProcesses/RenderPipeline/postProcessRenderPipelineManagerSceneComponent.js';
 import '@babylonjs/core/Sprites/spriteSceneComponent.js';
@@ -281,7 +281,7 @@ const Button = forwardRef((props, ref) => {
 });
 Button.displayName = "Button";
 
-const useStyles$Y = makeStyles({
+const useStyles$Z = makeStyles({
     root: {
         display: "flex",
         flexDirection: "column",
@@ -362,7 +362,7 @@ class ErrorBoundary extends Component {
     }
 }
 function ErrorFallback({ error, onRetry }) {
-    const styles = useStyles$Y();
+    const styles = useStyles$Z();
     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 })] }));
 }
 
@@ -553,8 +553,8 @@ function InterceptFunction(target, propertyKey, hooks) {
         hooksMap.set(propertyKey, (hooksForKey = []));
         if (
         // Replace the function with a new one that calls the hooks in addition to the original function.
-        !Reflect.set(target, propertyKey, (...args) => {
-            const result = Reflect.apply(originalFunction, target, args);
+        !Reflect.set(target, propertyKey, function (...args) {
+            const result = Reflect.apply(originalFunction, this, args);
             for (const { afterCall } of hooksForKey) {
                 afterCall?.(...args);
             }
@@ -1363,7 +1363,7 @@ function useIsSectionEmpty(sectionId) {
     return hasItems;
 }
 
-const useStyles$X = makeStyles({
+const useStyles$Y = makeStyles({
     accordion: {
         display: "flex",
         flexDirection: "column",
@@ -1455,7 +1455,7 @@ const useStyles$X = makeStyles({
  */
 const AccordionMenuBar = () => {
     AccordionMenuBar.displayName = "AccordionMenuBar";
-    const classes = useStyles$X();
+    const classes = useStyles$Y();
     const accordionCtx = useContext(AccordionContext);
     if (!accordionCtx) {
         return null;
@@ -1479,7 +1479,7 @@ const AccordionMenuBar = () => {
 const AccordionSectionBlock = (props) => {
     AccordionSectionBlock.displayName = "AccordionSectionBlock";
     const { children, sectionId } = props;
-    const classes = useStyles$X();
+    const classes = useStyles$Y();
     const accordionCtx = useContext(AccordionContext);
     const { context: sectionContext, isEmpty } = useAccordionSectionBlockContext(props);
     if (accordionCtx) {
@@ -1499,7 +1499,7 @@ const AccordionSectionBlock = (props) => {
 const AccordionSectionItem = (props) => {
     AccordionSectionItem.displayName = "AccordionSectionItem";
     const { children, staticItem } = props;
-    const classes = useStyles$X();
+    const classes = useStyles$Y();
     const accordionCtx = useContext(AccordionContext);
     const itemState = useAccordionSectionItemState(props);
     const [ctrlMode, setCtrlMode] = useState(false);
@@ -1539,7 +1539,7 @@ const AccordionSectionItem = (props) => {
  */
 const AccordionPinnedContainer = () => {
     AccordionPinnedContainer.displayName = "AccordionPinnedContainer";
-    const classes = useStyles$X();
+    const classes = useStyles$Y();
     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" }) }) }));
 };
@@ -1550,7 +1550,7 @@ const AccordionPinnedContainer = () => {
  */
 const AccordionSearchBox = () => {
     AccordionSearchBox.displayName = "AccordionSearchBox";
-    const classes = useStyles$X();
+    const classes = useStyles$Y();
     const accordionCtx = useContext(AccordionContext);
     if (!accordionCtx?.features.search) {
         return null;
@@ -1566,7 +1566,7 @@ const AccordionSearchBox = () => {
  */
 const AccordionSection = (props) => {
     AccordionSection.displayName = "AccordionSection";
-    const classes = useStyles$X();
+    const classes = useStyles$Y();
     return jsx("div", { className: classes.panelDiv, children: props.children });
 };
 const StringAccordion = Accordion$1;
@@ -1574,7 +1574,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$X();
+    const classes = useStyles$Y();
     const { size } = useContext(ToolContext);
     const accordionCtx = useAccordionContext(props);
     const hasPinning = accordionCtx?.features.pinning ?? false;
@@ -1671,7 +1671,7 @@ const Collapse = (props) => {
     return (jsx(Collapse$1, { visible: props.visible, orientation: props.orientation, unmountOnExit: true, children: jsx("div", { className: `${classes.collapseContent} ${props.orientation === "horizontal" ? classes.horizontal : classes.vertical}`, children: props.children }) }));
 };
 
-const useStyles$W = makeStyles({
+const useStyles$X = makeStyles({
     button: {
         display: "flex",
         alignItems: "center",
@@ -1689,7 +1689,7 @@ const ToggleButton = (props) => {
     ToggleButton.displayName = "ToggleButton";
     const { value, onChange, title, appearance = "subtle" } = props;
     const { size } = useContext(ToolContext);
-    const classes = useStyles$W();
+    const classes = useStyles$X();
     const [checked, setChecked] = useState(value);
     const toggle = useCallback(() => {
         setChecked((prevChecked) => {
@@ -2034,7 +2034,7 @@ const UXContextProvider = (props) => {
 function AsReadonlyArray(array) {
     return array;
 }
-const useStyles$V = makeStyles({
+const useStyles$W = makeStyles({
     rootDiv: {
         flex: 1,
         overflow: "hidden",
@@ -2049,7 +2049,7 @@ const useStyles$V = makeStyles({
  * @returns The extensible accordion component.
  */
 function ExtensibleAccordion(props) {
-    const classes = useStyles$V();
+    const classes = useStyles$W();
     const { children, sections, sectionContent, context, sectionsRef, ...rest } = props;
     const defaultSections = useMemo(() => {
         const defaultSections = [];
@@ -2174,7 +2174,7 @@ function ExtensibleAccordion(props) {
                     })] }) })) }));
 }
 
-const useStyles$U = makeStyles({
+const useStyles$V = makeStyles({
     paneRootDiv: {
         display: "flex",
         flex: 1,
@@ -2187,7 +2187,7 @@ const useStyles$U = makeStyles({
  */
 const SidePaneContainer = forwardRef((props, ref) => {
     const { className, ...rest } = props;
-    const classes = useStyles$U();
+    const classes = useStyles$V();
     return (jsx("div", { className: mergeClasses(classes.paneRootDiv, className), ref: ref, ...rest, children: props.children }));
 });
 
@@ -2458,7 +2458,7 @@ function useTheme(invert = false) {
 }
 
 // Fluent doesn't apply styling to scrollbars by default, so provide our own reasonable default.
-const useStyles$T = makeStyles({
+const useStyles$U = makeStyles({
     root: {
         scrollbarColor: `${tokens.colorNeutralForeground3} ${tokens.colorTransparentBackground}`,
     },
@@ -2474,11 +2474,11 @@ const Theme = (props) => {
     // break any UI within the portal. Therefore, default to false.
     const { invert = false, applyStylesToPortals = false, className, ...rest } = props;
     const theme = useTheme(invert);
-    const classes = useStyles$T();
+    const classes = useStyles$U();
     return (jsx(FluentProvider, { theme: theme, className: mergeClasses(classes.root, className), applyStylesToPortals: applyStylesToPortals, ...rest, children: props.children }));
 };
 
-const useStyles$S = makeStyles({
+const useStyles$T = makeStyles({
     extensionTeachingPopover: {
         maxWidth: "320px",
     },
@@ -2489,7 +2489,7 @@ const useStyles$S = makeStyles({
  * @returns The teaching moment popover.
  */
 const TeachingMoment = ({ shouldDisplay, positioningRef, onOpenChange, title, description }) => {
-    const classes = useStyles$S();
+    const classes = useStyles$T();
     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 })] }) }));
 };
 
@@ -2692,13 +2692,13 @@ function useImpulse() {
     return [value, pulse];
 }
 
-const useStyles$R = makeStyles({
+const useStyles$S = makeStyles({
     placeholderDiv: {
         padding: `${tokens.spacingVerticalM} ${tokens.spacingHorizontalM}`,
     },
 });
 const PropertiesPane = (props) => {
-    const classes = useStyles$R();
+    const classes = useStyles$S();
     const entity = props.context;
     return entity != null ? (jsx(ExtensibleAccordion, { ...props })) : (jsx("div", { className: classes.placeholderDiv, children: jsx(Body1Strong, { italic: true, children: "No entity selected." }) }));
 };
@@ -3024,7 +3024,7 @@ const RootComponentServiceIdentity = Symbol("RootComponent");
  * The unique identity symbol for the shell service.
  */
 const ShellServiceIdentity = Symbol("ShellService");
-const useStyles$Q = makeStyles({
+const useStyles$R = makeStyles({
     mainView: {
         flex: 1,
         display: "flex",
@@ -3237,14 +3237,14 @@ const DockMenu = (props) => {
 };
 const PaneHeader = (props) => {
     const { id, title, dockOptions } = props;
-    const classes = useStyles$Q();
+    const classes = useStyles$R();
     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$Q();
+    const classes = useStyles$R();
     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);
@@ -3254,7 +3254,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$Q();
+    const classes = useStyles$R();
     const leftComponents = useMemo(() => components.filter((entry) => entry.horizontalLocation === "left"), [components]);
     const rightComponents = useMemo(() => components.filter((entry) => entry.horizontalLocation === "right"), [components]);
     return (jsx(Fragment, { children: components.length > 0 && (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))) })] })) }));
@@ -3264,7 +3264,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$Q();
+    const classes = useStyles$R();
     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);
@@ -3276,7 +3276,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$Q();
+    const classes = useStyles$R();
     const [topSelectedTab, setTopSelectedTab] = useState();
     const [bottomSelectedTab, setBottomSelectedTab] = useState();
     const [collapsed, setCollapsed] = useState(initialCollapsed);
@@ -3473,7 +3473,7 @@ function MakeShellServiceDefinition({ leftPaneDefaultWidth = 350, leftPaneMinWid
                 expand: () => onCollapseChanged.notifyObservers({ location: "right", collapsed: false }),
             };
             const rootComponent = () => {
-                const classes = useStyles$Q();
+                const classes = useStyles$R();
                 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.
@@ -4237,7 +4237,7 @@ function CoerceEntityArray(entities, sort) {
     }
     return entities;
 }
-const useStyles$P = makeStyles({
+const useStyles$Q = makeStyles({
     rootDiv: {
         flex: 1,
         overflow: "hidden",
@@ -4346,14 +4346,14 @@ function MakeInlineCommandElement(command, isPlaceholder) {
 }
 const SceneTreeItem = (props) => {
     const { isSelected, select } = props;
-    const classes = useStyles$P();
+    const classes = useStyles$Q();
     const [compactMode] = useSetting(CompactModeSettingDescriptor);
     const treeItemLayoutClass = mergeClasses(classes.sceneTreeItemLayout, compactMode ? classes.treeItemLayoutCompact : undefined);
     return (jsx(FlatTreeItem, { className: classes.treeItem, value: "scene", itemType: "leaf", parentValue: undefined, "aria-level": 1, "aria-setsize": 1, "aria-posinset": 1, onClick: select, children: jsx(TreeItemLayout, { iconBefore: jsx(GlobeRegular, {}), className: treeItemLayoutClass, style: isSelected ? { backgroundColor: tokens.colorNeutralBackground1Selected } : undefined, children: jsx(Body1Strong, { wrap: false, truncate: true, children: "Scene" }) }) }, "scene"));
 };
 const SectionTreeItem = (props) => {
     const { section, isFiltering, commandProviders, expandAll, collapseAll, isDropTarget, ...dropProps } = props;
-    const classes = useStyles$P();
+    const classes = useStyles$Q();
     const [compactMode] = useSetting(CompactModeSettingDescriptor);
     // Get the commands that apply to this section.
     const commands = useResource(useCallback(() => {
@@ -4370,7 +4370,7 @@ const SectionTreeItem = (props) => {
 };
 const EntityTreeItem = (props) => {
     const { entityItem, isSelected, select, isFiltering, commandProviders, expandAll, collapseAll, isDragging, isDropTarget, ...dragProps } = props;
-    const classes = useStyles$P();
+    const classes = useStyles$Q();
     const [compactMode] = useSetting(CompactModeSettingDescriptor);
     const hasChildren = !!entityItem.children?.length;
     const displayInfo = useResource(useCallback(() => {
@@ -4486,7 +4486,7 @@ const EntityTreeItem = (props) => {
                         }, children: jsx(Tooltip$1, { content: name, relationship: "description", children: jsx(Body1, { wrap: false, truncate: true, children: name }) }) }) }, GetEntityId(entityItem.entity)) }), jsx(MenuPopover, { hidden: !hasChildren && contextMenuCommands.length === 0, children: jsxs(MenuList, { children: [hasChildren && (jsxs(Fragment, { children: [jsx(MenuItem, { icon: jsx(ArrowExpandAllRegular, {}), onClick: expandAll, children: jsx(Body1, { children: "Expand All" }) }), jsx(MenuItem, { icon: jsx(ArrowCollapseAllRegular, {}), onClick: collapseAll, children: jsx(Body1, { children: "Collapse All" }) })] })), hasChildren && contextMenuCommands.length > 0 && jsx(MenuDivider, {}), contextMenuItems] }) })] }));
 };
 const SceneExplorer = (props) => {
-    const classes = useStyles$P();
+    const classes = useStyles$Q();
     const { sections, entityCommandProviders, sectionCommandProviders, scene, selectedEntity = null } = props;
     const [openItems, setOpenItems] = useState(new Set());
     const [sceneVersion, setSceneVersion] = useState(0);
@@ -6111,7 +6111,7 @@ class CanvasGraphService {
     }
 }
 
-const useStyles$O = makeStyles({
+const useStyles$P = makeStyles({
     canvas: {
         flexGrow: 1,
         width: "100%",
@@ -6120,7 +6120,7 @@ const useStyles$O = makeStyles({
 });
 const CanvasGraph = (props) => {
     const { collector, scene, layoutObservable, returnToPlayheadObservable, onVisibleRangeChangedObservable, initialGraphSize } = props;
-    const classes = useStyles$O();
+    const classes = useStyles$P();
     const canvasRef = useRef(null);
     useEffect(() => {
         if (!canvasRef.current) {
@@ -6197,7 +6197,7 @@ function EvaluateExpression(rawValue) {
         return NaN;
     }
 }
-const useStyles$N = makeStyles({
+const useStyles$O = makeStyles({
     icon: {
         "&:hover": {
             color: tokens.colorBrandForeground1,
@@ -6211,7 +6211,7 @@ const useStyles$N = makeStyles({
 const SpinButton = forwardRef((props, ref) => {
     SpinButton.displayName = "SpinButton2";
     const inputClasses = useInputStyles$1();
-    const classes = useStyles$N();
+    const classes = useStyles$O();
     const { size } = useContext(ToolContext);
     const { min, max } = props;
     const baseStep = props.step ?? 1;
@@ -6475,7 +6475,7 @@ const Dropdown = (props) => {
 const NumberDropdown = Dropdown;
 const StringDropdown = Dropdown;
 
-const useStyles$M = makeStyles({
+const useStyles$N = makeStyles({
     surface: {
         maxWidth: "400px",
     },
@@ -6490,7 +6490,7 @@ const useStyles$M = makeStyles({
 const Popover = forwardRef((props, ref) => {
     const { children, open: controlledOpen, onOpenChange, positioning, surfaceClassName } = props;
     const [internalOpen, setInternalOpen] = useState(false);
-    const classes = useStyles$M();
+    const classes = useStyles$N();
     const isControlled = controlledOpen !== undefined;
     const popoverOpen = isControlled ? controlledOpen : internalOpen;
     const handleOpenChange = (_, data) => {
@@ -6734,7 +6734,7 @@ const InputAlphaField = (props) => {
         } }));
 };
 
-const useStyles$L = makeStyles({
+const useStyles$M = makeStyles({
     sidebar: {
         display: "flex",
         flexDirection: "column",
@@ -6798,7 +6798,7 @@ const useStyles$L = makeStyles({
 });
 const PerformanceSidebar = (props) => {
     const { collector, onVisibleRangeChangedObservable } = props;
-    const classes = useStyles$L();
+    const classes = useStyles$M();
     // Map from id to IPerfMetadata information
     const [metadataMap, setMetadataMap] = useState();
     // Map from category to all the ids belonging to that category
@@ -6871,7 +6871,7 @@ const PerformanceSidebar = (props) => {
                     })] }, `category-${category || "version"}`))) }));
 };
 
-const useStyles$K = makeStyles({
+const useStyles$L = makeStyles({
     container: {
         display: "flex",
         flexDirection: "row",
@@ -6900,7 +6900,7 @@ const useStyles$K = makeStyles({
 });
 const PerformanceViewer = (props) => {
     const { scene, layoutObservable, returnToLiveObservable, performanceCollector, initialGraphSize } = props;
-    const classes = useStyles$K();
+    const classes = useStyles$L();
     const [onVisibleRangeChangedObservable] = useState(() => new Observable());
     const onReturnToPlayheadClick = () => {
         returnToLiveObservable.notifyObservers();
@@ -7069,14 +7069,14 @@ const TextPropertyLine = (props) => {
     return (jsx(PropertyLine, { ...props, children: jsx(Body1, { title: title, children: value ?? "" }) }));
 };
 
-const useStyles$J = makeStyles({
+const useStyles$K = makeStyles({
     pinnedStatsPane: {
         flex: "0 1 auto",
         paddingBottom: tokens.spacingHorizontalM,
     },
 });
 const StatsPane = (props) => {
-    const classes = useStyles$J();
+    const classes = useStyles$K();
     const scene = props.context;
     const engine = scene.getEngine();
     const pollingObservable = usePollingObservable(250);
@@ -7234,7 +7234,7 @@ const ToolsServiceDefinition = {
     },
 };
 
-const useStyles$I = makeStyles({
+const useStyles$J = makeStyles({
     dropdown: {
         ...UniformWidthStyling,
     },
@@ -7246,7 +7246,7 @@ const useStyles$I = makeStyles({
  */
 const DropdownPropertyLine = forwardRef((props, ref) => {
     DropdownPropertyLine.displayName = "DropdownPropertyLine";
-    const classes = useStyles$I();
+    const classes = useStyles$J();
     return (jsx(PropertyLine, { ...props, ref: ref, children: jsx(Dropdown, { ...props, className: classes.dropdown }) }));
 });
 /**
@@ -7404,7 +7404,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$H = makeStyles({
+const useStyles$I = makeStyles({
     uniformWidth: {
         ...UniformWidthStyling,
     },
@@ -7416,7 +7416,7 @@ const useStyles$H = makeStyles({
  */
 const SyncedSliderPropertyLine = forwardRef((props, ref) => {
     SyncedSliderPropertyLine.displayName = "SyncedSliderPropertyLine";
-    const classes = useStyles$H();
+    const classes = useStyles$I();
     const { label, description, ...sliderProps } = props;
     return (jsx(PropertyLine, { ref: ref, ...props, children: jsx(SyncedSliderInput, { ...sliderProps, className: mergeClasses(classes.uniformWidth, props.className) }) }));
 });
@@ -7859,7 +7859,7 @@ const DefaultInspectorExtensionFeed = new BuiltInsExtensionFeed("Inspector", [
         keywords: ["creation", "tools"],
         ...BabylonWebResources,
         author: { name: "Babylon.js", forumUserName: "" },
-        getExtensionModuleAsync: async () => await import('./quickCreateToolsService-DDcd57ne.js'),
+        getExtensionModuleAsync: async () => await import('./quickCreateToolsService-CU-OcaMm.js'),
     },
     {
         name: "Reflector",
@@ -7867,7 +7867,7 @@ const DefaultInspectorExtensionFeed = new BuiltInsExtensionFeed("Inspector", [
         keywords: ["reflector", "bridge", "sync", "sandbox", "tools"],
         ...BabylonWebResources,
         author: { name: "Babylon.js", forumUserName: "" },
-        getExtensionModuleAsync: async () => await import('./reflectorService-B_dpjAQ3.js'),
+        getExtensionModuleAsync: async () => await import('./reflectorService-C9gCqhs6.js'),
     },
 ]);
 
@@ -7905,7 +7905,7 @@ const ColorSliders = ({ color, onSliderChange }) => (jsxs(Fragment, { children:
 const Color3PropertyLine = ColorPropertyLine;
 const Color4PropertyLine = ColorPropertyLine;
 
-const useStyles$G = makeStyles({
+const useStyles$H = makeStyles({
     uniformWidth: {
         ...UniformWidthStyling,
     },
@@ -7917,7 +7917,7 @@ const useStyles$G = makeStyles({
  */
 const TextInputPropertyLine = (props) => {
     TextInputPropertyLine.displayName = "TextInputPropertyLine";
-    const classes = useStyles$G();
+    const classes = useStyles$H();
     return (jsx(PropertyLine, { ...props, children: jsx(TextInput, { ...props, className: mergeClasses(classes.uniformWidth, props.className) }) }));
 };
 /**
@@ -7928,7 +7928,7 @@ const TextInputPropertyLine = (props) => {
  */
 const NumberInputPropertyLine = (props) => {
     NumberInputPropertyLine.displayName = "NumberInputPropertyLine";
-    const classes = useStyles$G();
+    const classes = useStyles$H();
     return (jsx(PropertyLine, { ...props, children: jsx(SpinButton, { ...props, className: mergeClasses(classes.uniformWidth, props.className) }) }));
 };
 
@@ -8484,7 +8484,7 @@ class ServiceContainer {
     }
 }
 
-const useStyles$F = makeStyles({
+const useStyles$G = makeStyles({
     themeButton: {
         margin: 0,
     },
@@ -8503,7 +8503,7 @@ const ThemeSelectorServiceDefinition = {
             teachingMoment: false,
             order: -300,
             component: () => {
-                const classes = useStyles$F();
+                const classes = useStyles$G();
                 const { isDarkMode, themeMode, setThemeMode } = useThemeMode();
                 const onSelectedThemeChange = useCallback((e, data) => {
                     setThemeMode(data.checkedItems.includes("System") ? "system" : data.checkedItems[0].toLocaleLowerCase());
@@ -8520,7 +8520,7 @@ const ThemeSelectorServiceDefinition = {
     },
 };
 
-const useStyles$E = makeStyles({
+const useStyles$F = makeStyles({
     app: {
         colorScheme: "light dark",
         flexGrow: 1,
@@ -8560,7 +8560,7 @@ function MakeModularTool(options) {
         settingsStore.writeSetting(ThemeModeSettingDescriptor, themeMode);
     }
     const modularToolRootComponent = () => {
-        const classes = useStyles$E();
+        const classes = useStyles$F();
         const [extensionManagerContext, setExtensionManagerContext] = useState();
         const [requiredExtensions, setRequiredExtensions] = useState();
         const [requiredExtensionsDeferred, setRequiredExtensionsDeferred] = useState();
@@ -8603,7 +8603,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-BSD2sNr6.js');
+                    const { ExtensionListServiceDefinition } = await import('./extensionsListService-o37oCGIy.js');
                     await serviceContainer.addServiceAsync(ExtensionListServiceDefinition);
                 }
                 // Register all external services (that make up a unique tool).
@@ -8710,7 +8710,7 @@ const BreakTangentIcon = createFluentIcon("BreakTangent", "20", '<g transform="s
 const UnifyTangentIcon = 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>');
 const StepTangentIcon = 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>');
 
-const useStyles$D = makeStyles({
+const useStyles$E = makeStyles({
     coordinatesModeButton: {
         margin: `0 0 0 ${tokens.spacingHorizontalXS}`,
     },
@@ -8726,7 +8726,7 @@ const useStyles$D = makeStyles({
 });
 const GizmoToolbar = (props) => {
     const { gizmoService, sceneContext } = props;
-    const classes = useStyles$D();
+    const classes = useStyles$E();
     const gizmoMode = useObservableState(() => gizmoService.gizmoMode, gizmoService.onGizmoModeChanged);
     const coordinatesMode = useObservableState(() => gizmoService.coordinatesMode, gizmoService.onCoordinatesModeChanged);
     const cameraGizmo = useObservableState(() => gizmoService.gizmoCamera, gizmoService.onCameraGizmoChanged);
@@ -8855,7 +8855,7 @@ const HighlightServiceDefinition = {
     },
 };
 
-const useStyles$C = makeStyles({
+const useStyles$D = makeStyles({
     badge: {
         margin: tokens.spacingHorizontalXXS,
         fontFamily: "monospace",
@@ -8872,7 +8872,7 @@ const MiniStatsServiceDefinition = {
             order: 300 /* DefaultToolbarItemOrder.FrameRate */,
             teachingMoment: false,
             component: () => {
-                const classes = useStyles$C();
+                const classes = useStyles$D();
                 const scene = useObservableState(useCallback(() => sceneContext.currentScene, [sceneContext.currentScene]), sceneContext.currentSceneObservable);
                 const engine = scene?.getEngine();
                 const pollingObservable = usePollingObservable(250);
@@ -9201,7 +9201,7 @@ function useCurveEditor() {
     return context;
 }
 
-const useStyles$B = makeStyles({
+const useStyles$C = makeStyles({
     root: {
         display: "flex",
         flexDirection: "row",
@@ -9245,7 +9245,7 @@ const useStyles$B = makeStyles({
  * @returns The top bar component
  */
 const TopBar = () => {
-    const styles = useStyles$B();
+    const styles = useStyles$C();
     const { state, observables } = useCurveEditor();
     const [keyFrameValue, setKeyFrameValue] = useState(null);
     const [keyValue, setKeyValue] = useState(null);
@@ -9338,7 +9338,7 @@ const ColorChannelColors = {
  */
 const DefaultCurveColor = "#ffffff";
 
-const useStyles$A = makeStyles({
+const useStyles$B = makeStyles({
     root: {
         display: "flex",
         flexDirection: "column",
@@ -9380,7 +9380,7 @@ const LOOP_MODES$1 = [
  * @returns The edit animation panel component
  */
 const EditAnimationPanel = ({ animation, onClose }) => {
-    const styles = useStyles$A();
+    const styles = useStyles$B();
     const { observables } = useCurveEditor();
     const [name, setName] = useState(animation.name);
     const [property, setProperty] = useState(animation.targetProperty);
@@ -9411,7 +9411,7 @@ const EditAnimationPanel = ({ animation, onClose }) => {
     return (jsxs("div", { className: styles.root, children: [jsxs("div", { className: styles.form, children: [jsxs("div", { className: styles.row, children: [jsx(Label, { children: "Display Name" }), jsx(Input, { value: name, onChange: (_, data) => setName(data.value), placeholder: "Animation name" })] }), jsxs("div", { className: styles.row, children: [jsx(Label, { children: "Property" }), jsx(Input, { value: property, onChange: (_, data) => setProperty(data.value), placeholder: "e.g., position, rotation, scaling" })] }), jsxs("div", { className: styles.row, children: [jsx(Label, { children: "Loop Mode" }), jsx(Dropdown$1, { value: getLoopModeLabel(loopMode), selectedOptions: [loopMode.toString()], onOptionSelect: (_, data) => setLoopMode(Number(data.optionValue)), positioning: "below", inlinePopup: true, children: LOOP_MODES$1.map((mode) => (jsx(Option, { value: mode.value.toString(), children: mode.label }, mode.value))) })] })] }), jsxs("div", { className: styles.buttons, children: [jsx(Button, { appearance: "primary", onClick: saveChanges, label: "Save", disabled: !isValid }), jsx(Button, { appearance: "subtle", onClick: onClose, label: "Cancel" })] })] }));
 };
 
-const useStyles$z = makeStyles({
+const useStyles$A = makeStyles({
     root: {
         display: "flex",
         flexDirection: "column",
@@ -9477,7 +9477,7 @@ const useStyles$z = makeStyles({
  * @returns Animation entry component
  */
 const AnimationEntry = ({ animation }) => {
-    const styles = useStyles$z();
+    const styles = useStyles$A();
     const { state, actions, observables } = useCurveEditor();
     const [isExpanded, setIsExpanded] = useState(false);
     const [isHovered, setIsHovered] = useState(false);
@@ -9556,7 +9556,7 @@ const AnimationEntry = ({ animation }) => {
  * @returns Animation sub-entry component
  */
 const AnimationSubEntry = ({ animation, subName, color }) => {
-    const styles = useStyles$z();
+    const styles = useStyles$A();
     const { actions, observables } = useCurveEditor();
     const activeChannel = actions.getActiveChannel(animation);
     const isThisChannelActive = activeChannel === color;
@@ -9579,7 +9579,7 @@ const AnimationSubEntry = ({ animation, subName, color }) => {
  * @returns Animation list component
  */
 const AnimationList = () => {
-    const styles = useStyles$z();
+    const styles = useStyles$A();
     const { state, observables } = useCurveEditor();
     // Re-render when animations are loaded or changed (e.g. animation deleted)
     // useCallback stabilizes the accessor to prevent infinite re-render loops
@@ -9592,7 +9592,7 @@ const AnimationList = () => {
         }) }));
 };
 
-const useStyles$y = makeStyles({
+const useStyles$z = makeStyles({
     root: {
         display: "flex",
         flexDirection: "column",
@@ -9641,7 +9641,7 @@ const LoopModeOptions = LOOP_MODES.map((lm) => ({ label: lm, value: lm }));
  * @returns The add animation panel component
  */
 const AddAnimationPanel = ({ onClose }) => {
-    const styles = useStyles$y();
+    const styles = useStyles$z();
     const { state, actions, observables } = useCurveEditor();
     const [name, setName] = useState("");
     const [mode, setMode] = useState("List");
@@ -9858,7 +9858,7 @@ const AddAnimationPanel = ({ onClose }) => {
     return (jsxs("div", { className: styles.root, children: [jsx("div", { className: styles.header, children: jsx("div", { className: styles.title, children: "Add Animation" }) }), jsxs("div", { className: styles.form, children: [jsxs("div", { className: styles.row, children: [jsx(Label, { children: "Display Name" }), jsx(TextInput, { value: name, onChange: setName })] }), jsx("div", { className: styles.row, children: jsx(StringDropdown, { value: mode, onChange: (val) => setMode(val), options: ModeOptions, disabled: properties.length === 0, infoLabel: { label: "Mode" } }) }), jsxs("div", { className: styles.row, children: [jsx(Label, { children: "Property" }), isCustomMode ? (jsx(TextInput, { value: customProperty, onChange: setCustomProperty })) : (jsx(StringDropdown, { value: selectedProperty, onChange: (val) => setSelectedProperty(val), options: properties.map((p) => ({ label: p, value: p })) }))] }), jsxs("div", { className: styles.row, children: [jsx(Label, { children: "Type" }), isCustomMode ? (jsx(StringDropdown, { value: animationType, onChange: (val) => setAnimationType(val), options: AnimationTypeOptions })) : (jsx("div", { className: styles.typeDisplay, children: inferredType }))] }), jsx("div", { className: styles.row, children: jsx(StringDropdown, { value: loopMode, onChange: (val) => setLoopMode(val), options: LoopModeOptions, infoLabel: { label: "Loop Mode" } }) })] }), jsxs("div", { className: styles.buttons, children: [jsx(Button, { appearance: "primary", onClick: createAnimation, disabled: !isValid, label: "Create" }), jsx(Button, { appearance: "subtle", onClick: onClose, label: "Cancel" })] })] }));
 };
 
-const useStyles$x = makeStyles({
+const useStyles$y = makeStyles({
     root: {
         display: "flex",
         flexDirection: "column",
@@ -9901,7 +9901,7 @@ const useStyles$x = makeStyles({
  * @returns The load animation panel component
  */
 const LoadAnimationPanel = ({ onClose }) => {
-    const styles = useStyles$x();
+    const styles = useStyles$y();
     const { state, actions, observables } = useCurveEditor();
     const [snippetIdInput, setSnippetIdInput] = useState("");
     const [loadedSnippetId, setLoadedSnippetId] = useState(null);
@@ -10040,7 +10040,7 @@ class StringTools {
     }
 }
 
-const useStyles$w = makeStyles({
+const useStyles$x = makeStyles({
     root: {
         display: "flex",
         flexDirection: "column",
@@ -10085,7 +10085,7 @@ const useStyles$w = makeStyles({
  * @returns The save animation panel component
  */
 const SaveAnimationPanel = ({ onClose: _onClose }) => {
-    const styles = useStyles$w();
+    const styles = useStyles$x();
     const { state } = useCurveEditor();
     const [selectedAnimations, setSelectedAnimations] = useState(() => {
         if (!state.animations) {
@@ -10158,7 +10158,7 @@ const SaveAnimationPanel = ({ onClose: _onClose }) => {
                 }) }), jsxs("div", { className: styles.buttons, children: [jsx(Button, { appearance: "primary", onClick: saveToSnippetServer, disabled: selectedAnimations.length === 0 || isSaving, label: isSaving ? "Saving..." : "Save to Snippet Server" }), jsx(Button, { appearance: "secondary", onClick: saveToFile, disabled: selectedAnimations.length === 0, label: "Save to File" })] }), saveError && jsx("div", { className: styles.errorText, children: saveError }), snippetId && jsxs("div", { className: styles.snippetId, children: ["Saved! Snippet ID: ", snippetId] })] }));
 };
 
-const useStyles$v = makeStyles({
+const useStyles$w = makeStyles({
     root: {
         display: "flex",
         flexDirection: "column",
@@ -10212,7 +10212,7 @@ const useStyles$v = makeStyles({
  * @returns The sidebar component
  */
 const SideBar = () => {
-    const styles = useStyles$v();
+    const styles = useStyles$w();
     const { state, actions, observables } = useCurveEditor();
     const [openPopover, setOpenPopover] = useState(null);
     const [fps, setFps] = useState(60);
@@ -11200,7 +11200,7 @@ const KeyPointComponent = (props) => {
                                 } })] }))] }))] }));
 };
 
-const useStyles$u = makeStyles({
+const useStyles$v = makeStyles({
     root: {
         position: "absolute",
         top: 0,
@@ -11384,7 +11384,7 @@ function ExtractValuesFromKeys(keys, curves) {
  * @returns The graph component
  */
 const Graph = ({ width, height }) => {
-    const styles = useStyles$u();
+    const styles = useStyles$v();
     const { state, actions, observables } = useCurveEditor();
     const svgRef = useRef(null);
     const [scale, setScale] = useState(1);
@@ -11747,7 +11747,7 @@ const Graph = ({ width, height }) => {
                     }), renderValueAxis()] })] }));
 };
 
-const useStyles$t = makeStyles({
+const useStyles$u = makeStyles({
     root: {
         position: "absolute",
         top: 0,
@@ -11790,7 +11790,7 @@ const useStyles$t = makeStyles({
  * @returns The playhead component
  */
 const PlayHead = ({ width, height: _height }) => {
-    const styles = useStyles$t();
+    const styles = useStyles$u();
     const { state, actions, observables } = useCurveEditor();
     const [isDragging, setIsDragging] = useState(false);
     // Use refs for all mutable values to avoid render cycles
@@ -11941,7 +11941,7 @@ const PlayHead = ({ width, height: _height }) => {
     return (jsxs("div", { className: styles.root, children: [jsx("div", { ref: lineRef, className: styles.line, onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp }), jsx("div", { ref: handleRef, className: styles.handle, onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp })] }));
 };
 
-const useStyles$s = makeStyles({
+const useStyles$t = makeStyles({
     root: {
         display: "flex",
         flexDirection: "row",
@@ -11973,7 +11973,7 @@ const useStyles$s = makeStyles({
  * @returns The frame bar component
  */
 const FrameBar = ({ width }) => {
-    const styles = useStyles$s();
+    const styles = useStyles$t();
     const { state, observables } = useCurveEditor();
     const containerRef = useRef(null);
     const [scale, setScale] = useState(1);
@@ -12031,7 +12031,7 @@ const FrameBar = ({ width }) => {
     return (jsx("div", { className: styles.root, ref: containerRef, children: renderTicks() }));
 };
 
-const useStyles$r = makeStyles({
+const useStyles$s = makeStyles({
     root: {
         display: "flex",
         flexDirection: "column",
@@ -12072,7 +12072,7 @@ const OFFSET_X = 10;
  * @returns The range frame bar component
  */
 const RangeFrameBar = ({ width }) => {
-    const styles = useStyles$r();
+    const styles = useStyles$s();
     const { state, actions, observables } = useCurveEditor();
     const svgRef = useRef(null);
     const [viewWidth, setViewWidth] = useState(width);
@@ -12183,7 +12183,7 @@ const RangeFrameBar = ({ width }) => {
                 }), renderKeyframes, renderActiveFrame] }) }));
 };
 
-const useStyles$q = makeStyles({
+const useStyles$r = makeStyles({
     root: {
         display: "flex",
         flexDirection: "column",
@@ -12215,7 +12215,7 @@ const useStyles$q = makeStyles({
  * @returns The canvas component
  */
 const Canvas = () => {
-    const styles = useStyles$q();
+    const styles = useStyles$r();
     const { observables } = useCurveEditor();
     const containerRef = useRef(null);
     const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
@@ -12245,7 +12245,7 @@ const Canvas = () => {
     return (jsxs("div", { className: styles.root, ref: containerRef, children: [jsx("div", { className: styles.frameBar, children: jsx(FrameBar, { width: dimensions.width }) }), jsxs("div", { className: styles.canvasArea, children: [jsx(Graph, { width: dimensions.width, height: dimensions.height - 70 }), jsx(PlayHead, { width: dimensions.width, height: dimensions.height - 70 })] }), jsx("div", { className: styles.rangeFrameBar, children: jsx(RangeFrameBar, { width: dimensions.width }) })] }));
 };
 
-const useStyles$p = makeStyles({
+const useStyles$q = makeStyles({
     root: {
         flex: 1,
         height: "25px",
@@ -12307,7 +12307,7 @@ const useStyles$p = makeStyles({
  * @returns The range selector component
  */
 const RangeSelector = () => {
-    const styles = useStyles$p();
+    const styles = useStyles$q();
     const { state, actions, observables } = useCurveEditor();
     const containerRef = useRef(null);
     const scrollbarRef = useRef(null);
@@ -12452,7 +12452,7 @@ function GetKeyAtAnyFrameIndex(animations, frame) {
     }
     return false;
 }
-const useStyles$o = makeStyles({
+const useStyles$p = makeStyles({
     root: {
         display: "flex",
         flexDirection: "row",
@@ -12509,7 +12509,7 @@ MediaControls.displayName = "MediaControls";
  * @returns The BottomBar component.
  */
 const BottomBar = () => {
-    const styles = useStyles$o();
+    const styles = useStyles$p();
     const { state, actions, observables } = useCurveEditor();
     // Track display frame separately for smooth updates during playback
     const [displayFrame, setDisplayFrame] = useState(state.activeFrame);
@@ -12624,7 +12624,7 @@ const BottomBar = () => {
     return (jsxs("div", { className: styles.root, children: [jsx("div", { className: styles.mediaControls, children: jsx(MediaControls, { hasActiveAnimations: hasActiveAnimations, isPlaying: state.isPlaying, forwardAnimation: state.forwardAnimation, onPlayForward: handlePlayForward, onPlayBackward: handlePlayBackward, onStop: handleStop, onPrevKey: handlePrevKey, onNextKey: handleNextKey, onFirstFrame: handleFirstFrame, onLastFrame: handleLastFrame }) }), jsxs("div", { className: styles.frameDisplay, children: [jsx("div", { className: styles.frameLabel, children: "Frame:" }), jsx(SpinButton, { className: styles.spinButton, value: displayFrame, onChange: handleFrameChange, min: state.fromKey, max: state.toKey, disabled: !hasActiveAnimations })] }), jsx(RangeSelector, {}), jsxs("div", { className: styles.clipLengthSection, children: [jsx("div", { className: styles.frameLabel, children: "Clip Length:" }), jsx(SpinButton, { className: styles.spinButton, value: clipLength, onChange: handleClipLengthChange, min: 1, disabled: !hasActiveAnimations })] })] }));
 };
 
-const useStyles$n = makeStyles({
+const useStyles$o = makeStyles({
     root: {
         display: "flex",
         flexDirection: "column",
@@ -12673,7 +12673,7 @@ const useStyles$n = makeStyles({
  * @returns The curve editor content
  */
 const CurveEditorContent = () => {
-    const styles = useStyles$n();
+    const styles = useStyles$o();
     const { state, actions, observables } = useCurveEditor();
     const rootRef = useRef(null);
     const prepareRef = useRef(() => actions.prepare());
@@ -13498,6 +13498,38 @@ const AreaLightSetupProperties = ({ context: areaLight }) => {
     return (jsxs(Fragment, { children: [jsx(BoundProperty, { label: "Diffuse", component: Color3PropertyLine, target: areaLight, propertyKey: "diffuse" }), jsx(BoundProperty, { label: "Specular", component: Color3PropertyLine, target: areaLight, propertyKey: "specular" }), jsx(BoundProperty, { label: "Position", component: Vector3PropertyLine, target: areaLight, propertyKey: "position" }), jsx(BoundProperty, { label: "Width", component: NumberInputPropertyLine, target: areaLight, propertyKey: "width" }), jsx(BoundProperty, { label: "Height", component: NumberInputPropertyLine, target: areaLight, propertyKey: "height" }), jsx(BoundProperty, { label: "Intensity", component: NumberInputPropertyLine, target: areaLight, propertyKey: "intensity" })] }));
 };
 
+/**
+ * Return a copied array and re-render when array mutators run.
+ * Intercept add/remove/change functions because the underlying APIs update internal arrays in-place.
+ * @param target The target object containing the observable array, or null if the array is not applicable.
+ * @param getItems A function to get the current items in the array.
+ * @param addFn The name of the function to add an item to the array.
+ * @param removeFn The name of the function to remove an item from the array.
+ * @param changeFn The name of the function to change an item in the array.
+ * @returns A copied array that re-renders when array mutators run.
+ */
+function useObservableArray(target, getItems, addFn, removeFn, changeFn) {
+    return useObservableState(useCallback(() => {
+        const value = getItems();
+        return [...(value ?? [])];
+    }, [getItems]), useInterceptObservable("function", target, addFn), useInterceptObservable("function", target, removeFn), changeFn ? useInterceptObservable("function", target, changeFn) : undefined);
+}
+
+const useStyles$n = makeStyles({
+    lightsListDiv: {
+        display: "flex",
+        flexDirection: "column",
+    },
+});
+const ClusteredLightContainerSetupProperties = ({ context: container }) => {
+    return (jsxs(Fragment, { children: [jsx(BooleanBadgePropertyLine, { label: "Is Supported", value: container.isSupported }), jsx(BoundProperty, { label: "Horizontal Tiles", component: NumberInputPropertyLine, target: container, propertyKey: "horizontalTiles", step: 1, min: 1, forceInt: true }), jsx(BoundProperty, { label: "Vertical Tiles", component: NumberInputPropertyLine, target: container, propertyKey: "verticalTiles", step: 1, min: 1, forceInt: true }), jsx(BoundProperty, { label: "Depth Slices", component: NumberInputPropertyLine, target: container, propertyKey: "depthSlices", step: 1, min: 1, forceInt: true }), jsx(BoundProperty, { label: "Max Range", component: NumberInputPropertyLine, target: container, propertyKey: "maxRange", min: 1 })] }));
+};
+const ClusteredLightContainerLightsProperties = ({ container, selectionService, }) => {
+    const classes = useStyles$n();
+    const lights = useObservableArray(container, useCallback(() => container.lights, [container]), "addLight", "removeLight");
+    return (jsx(PropertyLine, { label: "Lights", expandedContent: jsx("div", { className: classes.lightsListDiv, children: lights.map((light) => (jsx(LinkToEntityPropertyLine, { label: light.getClassName(), entity: light, selectionService: selectionService }, light.uniqueId))) }), children: jsx(Badge, { appearance: "filled", children: lights.length }) }));
+};
+
 const DirectionalLightSetupProperties = ({ context: directionalLight }) => {
     const scene = directionalLight.getScene();
     const camera = scene.activeCamera;
@@ -13543,19 +13575,316 @@ const HemisphericLightSetupProperties = ({ context: hemisphericLight }) => {
     return (jsxs(Fragment, { children: [jsx(BoundProperty, { label: "Direction", component: Vector3PropertyLine, target: hemisphericLight, propertyKey: "direction" }), jsx(BoundProperty, { label: "Diffuse", component: Color3PropertyLine, target: hemisphericLight, propertyKey: "diffuse" }), jsx(BoundProperty, { label: "Ground", component: Color3PropertyLine, target: hemisphericLight, propertyKey: "groundColor" }), jsx(BoundProperty, { label: "Intensity", component: NumberInputPropertyLine, target: hemisphericLight, propertyKey: "intensity" })] }));
 };
 
-const PointLightSetupProperties = ({ context: pointLight }) => {
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { label: "Diffuse", component: Color3PropertyLine, target: pointLight, propertyKey: "diffuse" }), jsx(BoundProperty, { label: "Specular", component: Color3PropertyLine, target: pointLight, propertyKey: "specular" }), jsx(BoundProperty, { label: "Position", component: Vector3PropertyLine, target: pointLight, propertyKey: "position" }), jsx(BoundProperty, { label: "Intensity", component: NumberInputPropertyLine, target: pointLight, propertyKey: "intensity" })] }));
-};
+const useStyles$m = makeStyles({
+    root: {
+        display: "grid",
+        gridTemplateRows: "repeat(1fr)",
+        justifyItems: "start",
+        gap: "2px",
+        maxWidth: "400px",
+    },
+    comboBox: {
+        width: CustomTokens.valueWidth,
+        minWidth: CustomTokens.valueWidth,
+        boxSizing: "border-box",
+    },
+    input: {
+        minWidth: 0,
+    },
+    listbox: {
+        width: "fit-content",
+        minWidth: "fit-content",
+        maxWidth: "350px",
+    },
+});
+/**
+ * Wrapper around a Fluent ComboBox that allows for filtering options.
+ * @param props
+ * @returns
+ */
+const ComboBox = forwardRef((props, ref) => {
+    ComboBox.displayName = "ComboBox";
+    const comboId = useId();
+    const styles = useStyles$m();
+    const { size } = useContext(ToolContext);
+    // Find the label for the current value
+    const getLabel = (value) => props.options.find((opt) => opt.value === value)?.label ?? "";
+    const [query, setQuery] = useState(getLabel(props.value ?? ""));
+    useEffect(() => {
+        setQuery(getLabel(props.value ?? ""));
+    }, [props.value, props.options]);
+    // Convert to Fluent's { children, value } format
+    const normalizedOptions = props.options.map((opt) => ({ children: opt.label, value: opt.value }));
+    const children = useComboboxFilter(query, normalizedOptions, {
+        noOptionsMessage: "No items match your search.",
+        optionToReactKey: (option) => option.value,
+        optionToText: (option) => option.children,
+        renderOption: (option) => (jsx(Option, { value: option.value, text: option.children, children: option.children }, option.value)),
+    });
+    const onOptionSelect = (_e, data) => {
+        setQuery(data.optionText ?? "");
+        data.optionValue && props.onChange(data.optionValue);
+    };
+    return (jsxs("div", { className: styles.root, children: [jsx("label", { id: comboId, children: props.label }), jsx(Combobox, { ref: ref, defaultOpen: props.defaultOpen, size: size, root: { className: styles.comboBox }, input: { className: styles.input }, listbox: { className: styles.listbox }, onOptionSelect: onOptionSelect, "aria-labelledby": comboId, placeholder: "Search..", onChange: (ev) => setQuery(ev.target.value), value: query, children: children })] }));
+});
 
-const DefaultShadowGeneratorOptions = [{ label: "Shadow Generator", value: "Default" }];
-const DirectionalLightGeneratorOptions = [
-    ...DefaultShadowGeneratorOptions,
-    { label: "Cascaded Shadow Generator", value: "Cascade" },
-];
-const MapSizeOptions = [
-    { label: "4096 x 4096", value: 4096 },
-    { label: "2048 x 2048", value: 2048 },
-    { label: "1024 x 1024", value: 1024 },
+const useStyles$l = makeStyles({
+    linkDiv: {
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center",
+        gap: tokens.spacingHorizontalS,
+        minWidth: 0,
+        overflow: "hidden",
+    },
+    link: {
+        minWidth: 0,
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+    },
+});
+/**
+ * A generic primitive component with a ComboBox for selecting from a list of entities.
+ * Supports entities with duplicate names by using uniqueId for identity.
+ * @param props ChooseEntityProps
+ * @returns EntitySelector component
+ */
+function EntitySelector(props) {
+    const { value, onLink, getEntities, getName, filter, defaultValue } = props;
+    const onChange = props.onChange;
+    const classes = useStyles$l();
+    const comboBoxRef = useRef(null);
+    // Build options with uniqueId as key
+    const options = useMemo(() => {
+        return getEntities()
+            .filter((e) => e.uniqueId !== undefined && (!filter || filter(e)))
+            .map((entity) => ({
+            label: getName(entity)?.toString() || "",
+            value: entity.uniqueId.toString(),
+        }))
+            .sort((a, b) => a.label.localeCompare(b.label));
+    }, [getEntities, getName, filter]);
+    const [isEditing, setIsEditing] = useState(false);
+    const [enteringEditMode, pulseEnteringEditMode] = useImpulse();
+    useEffect(() => {
+        if (enteringEditMode) {
+            comboBoxRef.current?.focus();
+        }
+    }, [enteringEditMode]);
+    const handleEntitySelect = (key) => {
+        const entity = getEntities().find((e) => e.uniqueId.toString() === key);
+        onChange?.(entity ?? null);
+        setIsEditing(false);
+    };
+    // Get current entity key for display
+    const currentKey = value ? value.uniqueId.toString() : "";
+    if (value && !isEditing) {
+        // If there is a value and we are not editing, show the link view
+        return (jsxs("div", { className: classes.linkDiv, children: [jsx(Tooltip$1, { content: getName(value), relationship: "label", children: jsx(Link, { className: classes.link, value: getName(value), onLink: () => onLink(value) }) }), onChange &&
+                    (defaultValue !== undefined ? (
+                    // If the defaultValue is specified, then allow resetting to the default
+                    jsx(Tooltip$1, { content: "Unlink", relationship: "label", children: jsx(Button, { icon: LinkDismissRegular, onClick: () => {
+                                pulseEnteringEditMode(true);
+                                onChange(defaultValue);
+                            } }) })) : (
+                    // Otherwise, just allow editing to a new value
+                    jsx(Tooltip$1, { content: "Edit Link", relationship: "label", children: jsx(Button, { icon: LinkEditRegular, onClick: () => {
+                                pulseEnteringEditMode(true);
+                                setIsEditing(true);
+                            } }) })))] }));
+    }
+    else {
+        // Otherwise, show the ComboBox for selection
+        return jsx(ComboBox, { ref: comboBoxRef, defaultOpen: enteringEditMode, label: "", options: options, value: currentKey, onChange: handleEntitySelect });
+    }
+}
+EntitySelector.displayName = "EntitySelector";
+
+/**
+ * A primitive component with a ComboBox for selecting from existing scene clustered light containers.
+ * @param props ClusteredLightContainerSelectorProps
+ * @returns ClusteredLightContainerSelector component
+ */
+const ClusteredLightContainerSelector = (props) => {
+    ClusteredLightContainerSelector.displayName = "ClusteredLightContainerSelector";
+    const { scene, ...rest } = props;
+    const getClusteredLightContainers = useCallback(() => scene.lights.filter((light) => light instanceof ClusteredLightContainer), [scene.lights]);
+    const getName = useCallback((container) => container.name, []);
+    return jsx(EntitySelector, { ...rest, getEntities: getClusteredLightContainers, getName: getName });
+};
+
+/**
+ * A primitive component with a ComboBox for selecting from existing scene materials.
+ * @param props MaterialSelectorProps
+ * @returns MaterialSelector component
+ */
+const MaterialSelector = (props) => {
+    MaterialSelector.displayName = "MaterialSelector";
+    const { scene, ...rest } = props;
+    const getMaterials = useCallback(() => scene.materials, [scene.materials]);
+    const getName = useCallback((material) => material.name, []);
+    return jsx(EntitySelector, { ...rest, getEntities: getMaterials, getName: getName });
+};
+
+/**
+ * A primitive component with a ComboBox for selecting from existing scene nodes.
+ * @param props NodeSelectorProps
+ * @returns NodeSelector component
+ */
+const NodeSelector = (props) => {
+    NodeSelector.displayName = "NodeSelector";
+    const { scene, ...rest } = props;
+    const getNodes = useCallback(() => scene.getNodes(), [scene]);
+    const getName = useCallback((node) => node.name, []);
+    return jsx(EntitySelector, { ...rest, getEntities: getNodes, getName: getName });
+};
+
+/**
+ * A primitive component with a ComboBox for selecting from existing scene skeletons.
+ * @param props SkeletonSelectorProps
+ * @returns SkeletonSelector component
+ */
+const SkeletonSelector = (props) => {
+    SkeletonSelector.displayName = "SkeletonSelector";
+    const { scene, ...rest } = props;
+    const getSkeletons = useCallback(() => scene.skeletons, [scene.skeletons]);
+    const getName = useCallback((skeleton) => skeleton.name, []);
+    return jsx(EntitySelector, { ...rest, getEntities: getSkeletons, getName: getName });
+};
+
+/**
+ * A button that uploads a file and either:
+ * - Updates an existing Texture or CubeTexture via updateURL (if texture prop is provided)
+ * - Creates a new Texture or CubeTexture (if scene/onChange props are provided)
+ * @param props TextureUploadProps
+ * @returns UploadButton component that handles texture upload
+ */
+const TextureUpload = (props) => {
+    TextureUpload.displayName = "TextureUpload";
+    const label = props.texture ? "Upload Texture" : undefined;
+    // TODO: This should probably be dynamically fetching a list of supported texture extensions
+    const accept = ".jpg, .png, .tga, .dds, .env, .exr";
+    const handleUpload = useCallback((files) => {
+        const file = files[0];
+        if (!file) {
+            return;
+        }
+        ReadFile(file, (data) => {
+            const blob = new Blob([data], { type: "octet/stream" });
+            // Update existing texture
+            if (props.texture) {
+                const { texture, onChange } = props;
+                const reader = new FileReader();
+                reader.readAsDataURL(blob);
+                reader.onloadend = () => {
+                    const base64data = reader.result;
+                    if (texture instanceof CubeTexture) {
+                        let extension = undefined;
+                        if (file.name.toLowerCase().indexOf(".dds") > 0) {
+                            extension = ".dds";
+                        }
+                        else if (file.name.toLowerCase().indexOf(".env") > 0) {
+                            extension = ".env";
+                        }
+                        texture.updateURL(base64data, extension, () => onChange?.(texture));
+                    }
+                    else if (texture instanceof Texture) {
+                        texture.updateURL(base64data, null, () => onChange?.(texture));
+                    }
+                };
+            }
+            else {
+                // Create new texture
+                const { scene, cubeOnly, onChange } = props;
+                const url = URL.createObjectURL(blob);
+                const extension = file.name.split(".").pop()?.toLowerCase();
+                // Revoke the object URL after texture loads to prevent memory leak
+                const revokeUrl = () => URL.revokeObjectURL(url);
+                const newTexture = cubeOnly
+                    ? new CubeTexture(url, scene, [], false, undefined, revokeUrl, undefined, undefined, false, extension ? "." + extension : undefined)
+                    : new Texture(url, scene, false, false, undefined, revokeUrl);
+                onChange(newTexture);
+            }
+        }, undefined, true);
+    }, [props]);
+    return jsx(UploadButton, { onUpload: handleUpload, accept: accept, title: "Upload Texture", label: label });
+};
+
+const useStyles$k = makeStyles({
+    container: {
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center",
+        gap: tokens.spacingHorizontalS,
+    },
+});
+/**
+ * A primitive component with a ComboBox for selecting from existing scene textures
+ * and a button for uploading new texture files.
+ * @param props TextureSelectorProps
+ * @returns TextureSelector component
+ */
+const TextureSelector = (props) => {
+    TextureSelector.displayName = "TextureSelector";
+    const { scene, cubeOnly, value, onChange, onLink, defaultValue } = props;
+    const classes = useStyles$k();
+    const getTextures = useCallback(() => scene.textures, [scene.textures]);
+    const getName = useCallback((texture) => texture.displayName || texture.name || `${texture.getClassName() || "Unnamed Texture"} (${texture.uniqueId})`, []);
+    const filter = useCallback((texture) => !cubeOnly || texture.isCube, [cubeOnly]);
+    return (jsxs("div", { className: classes.container, children: [jsx(EntitySelector, { value: value, onChange: onChange, onLink: onLink, defaultValue: defaultValue, getEntities: getTextures, getName: getName, filter: filter }), !value && jsx(TextureUpload, { scene: scene, onChange: onChange, cubeOnly: cubeOnly })] }));
+};
+
+const NodeSelectorPropertyLine = (props) => jsx(PropertyLine, { ...props, children: jsx(NodeSelector, { ...props }) });
+const MaterialSelectorPropertyLine = (props) => jsx(PropertyLine, { ...props, children: jsx(MaterialSelector, { ...props }) });
+const TextureSelectorPropertyLine = (props) => jsx(PropertyLine, { ...props, children: jsx(TextureSelector, { ...props }) });
+const SkeletonSelectorPropertyLine = (props) => jsx(PropertyLine, { ...props, children: jsx(SkeletonSelector, { ...props }) });
+const ClusteredLightContainerSelectorPropertyLine = (props) => (jsx(PropertyLine, { ...props, children: jsx(ClusteredLightContainerSelector, { ...props }) }));
+
+function FindOwnerContainer(light) {
+    for (const sceneLight of light.getScene().lights) {
+        if (sceneLight instanceof ClusteredLightContainer && sceneLight.lights.includes(light)) {
+            return sceneLight;
+        }
+    }
+    return null;
+}
+function HasClusteredLightContainers(light) {
+    return light.getScene().lights.some((l) => l instanceof ClusteredLightContainer);
+}
+const LightGeneralProperties = ({ light, selectionService }) => {
+    const scene = light.getScene();
+    // Intercept addLight/removeLight on the prototype so the observable fires after the
+    // full operation completes (scene observables fire mid-operation, before the internal
+    // lights array is updated).
+    const afterAddLight = useInterceptObservable("function", ClusteredLightContainer.prototype, "addLight");
+    const afterRemoveLight = useInterceptObservable("function", ClusteredLightContainer.prototype, "removeLight");
+    const hasContainers = useObservableState(useCallback(() => HasClusteredLightContainers(light), [light]), scene.onNewLightAddedObservable, scene.onLightRemovedObservable);
+    const container = useObservableState(useCallback(() => FindOwnerContainer(light), [light]), afterAddLight, afterRemoveLight);
+    const onChange = (newContainer) => {
+        if (container) {
+            container.removeLight(light);
+        }
+        if (newContainer) {
+            newContainer.addLight(light);
+        }
+    };
+    return (jsx(Collapse, { visible: hasContainers && ClusteredLightContainer.IsLightSupported(light), children: jsx(ClusteredLightContainerSelectorPropertyLine, { label: "Cluster", description: "The Clustered Light Container that contains this light (if any).", value: container, onChange: onChange, scene: scene, defaultValue: null, onLink: (entity) => (selectionService.selectedEntity = entity) }) }));
+};
+
+const PointLightSetupProperties = ({ context: pointLight }) => {
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { label: "Diffuse", component: Color3PropertyLine, target: pointLight, propertyKey: "diffuse" }), jsx(BoundProperty, { label: "Specular", component: Color3PropertyLine, target: pointLight, propertyKey: "specular" }), jsx(BoundProperty, { label: "Position", component: Vector3PropertyLine, target: pointLight, propertyKey: "position" }), jsx(BoundProperty, { label: "Intensity", component: NumberInputPropertyLine, target: pointLight, propertyKey: "intensity" })] }));
+};
+
+const DefaultShadowGeneratorOptions = [{ label: "Shadow Generator", value: "Default" }];
+const DirectionalLightGeneratorOptions = [
+    ...DefaultShadowGeneratorOptions,
+    { label: "Cascaded Shadow Generator", value: "Cascade" },
+];
+const MapSizeOptions = [
+    { label: "4096 x 4096", value: 4096 },
+    { label: "2048 x 2048", value: 2048 },
+    { label: "1024 x 1024", value: 1024 },
     { label: "512 x 512", value: 512 },
     { label: "256 x 256", value: 256 },
 ];
@@ -13655,8 +13984,18 @@ const SpotLightSetupProperties = ({ context: spotLight }) => {
 
 const LightPropertiesServiceDefinition = {
     friendlyName: "Light Properties",
-    consumes: [PropertiesServiceIdentity],
-    factory: (propertiesService) => {
+    consumes: [PropertiesServiceIdentity, SelectionServiceIdentity],
+    factory: (propertiesService, selectionService) => {
+        const lightContentRegistration = propertiesService.addSectionContent({
+            key: "Light Properties",
+            predicate: (entity) => entity instanceof Light,
+            content: [
+                {
+                    section: "General",
+                    component: ({ context }) => jsx(LightGeneralProperties, { light: context, selectionService: selectionService }),
+                },
+            ],
+        });
         const directionalLightContentRegistration = propertiesService.addSectionContent({
             key: "Directional Light Properties",
             predicate: (entity) => entity instanceof DirectionalLight,
@@ -13725,14 +14064,30 @@ const LightPropertiesServiceDefinition = {
                 },
             ],
         });
+        const clusteredLightContainerContentRegistration = propertiesService.addSectionContent({
+            key: "Clustered Light Container Properties",
+            predicate: (entity) => entity instanceof ClusteredLightContainer,
+            content: [
+                {
+                    section: "Setup",
+                    component: ClusteredLightContainerSetupProperties,
+                },
+                {
+                    section: "Lights",
+                    component: ({ context }) => jsx(ClusteredLightContainerLightsProperties, { container: context, selectionService: selectionService }),
+                },
+            ],
+        });
         return {
             dispose: () => {
+                clusteredLightContainerContentRegistration.dispose();
                 areaLightContentRegistration.dispose();
                 shadowLightContentRegistration.dispose();
                 spotLightContentRegistration.dispose();
                 hemisphericLightContentRegistration.dispose();
                 pointLightContentRegistration.dispose();
                 directionalLightContentRegistration.dispose();
+                lightContentRegistration.dispose();
             },
         };
     },
@@ -13838,8 +14193,8 @@ const MaterialGeneralProperties = (props) => {
 const MaterialTransparencyProperties = (props) => {
     const { material } = props;
     const hasAlphaCutOff = material instanceof PBRMaterial || material instanceof StandardMaterial;
-    const useAlphaTest = useProperty(material, "transparencyMode") == Material.MATERIAL_ALPHATEST;
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Alpha", target: material, propertyKey: "alpha", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "Transparency Mode", docLink: "https://doc.babylonjs.com/features/featuresDeepDive/materials/advanced/transparent_rendering/#the-transparencymode-property", target: material, propertyKey: "transparencyMode", options: TransparencyModeOptions, nullable: true, defaultValue: Material.MATERIAL_OPAQUE }), hasAlphaCutOff && useAlphaTest && (jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "alphaCutOff", target: material, propertyKey: "alphaCutOff", min: 0, max: 1, step: 0.01 })), jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "Alpha Mode", docLink: "https://doc.babylonjs.com/features/featuresDeepDive/materials/using/blendModes/#available-blend-modes", target: material, propertyKey: "alphaMode", options: AlphaModeOptions }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Separate Culling Pass", target: material, propertyKey: "separateCullingPass" })] }));
+    const useAlphaTest = useProperty(material, "transparencyMode") === Material.MATERIAL_ALPHATEST;
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Alpha", target: material, propertyKey: "alpha", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "Transparency Mode", docLink: "https://doc.babylonjs.com/features/featuresDeepDive/materials/advanced/transparent_rendering/#the-transparencymode-property", target: material, propertyKey: "transparencyMode", options: TransparencyModeOptions, nullable: true, defaultValue: Material.MATERIAL_OPAQUE }), jsx(Collapse, { visible: hasAlphaCutOff && useAlphaTest, children: jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "alphaCutOff", target: material, propertyKey: "alphaCutOff", min: 0, max: 1, step: 0.01 }) }), jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "Alpha Mode", docLink: "https://doc.babylonjs.com/features/featuresDeepDive/materials/using/blendModes/#available-blend-modes", target: material, propertyKey: "alphaMode", options: AlphaModeOptions }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Separate Culling Pass", target: material, propertyKey: "separateCullingPass" })] }));
 };
 const MaterialStencilProperties = (props) => {
     const { material } = props;
@@ -14062,7 +14417,7 @@ async function EditNodeMaterial(material) {
     await material.edit({ nodeEditorConfig: { backgroundColor: material.getScene().clearColor } });
 }
 
-const useStyles$m = makeStyles({
+const useStyles$j = makeStyles({
     subsection: {
         marginTop: tokens.spacingVerticalM,
     },
@@ -14136,7 +14491,7 @@ const GradientBlockPropertyLine = (props) => {
 };
 const NodeMaterialInputProperties = (props) => {
     const { material } = props;
-    const classes = useStyles$m();
+    const classes = useStyles$j();
     const inputBlocks = useObservableState(useCallback(() => {
         const inspectorVisibleInputBlocks = material
             .getInputBlocks()
@@ -14213,403 +14568,151 @@ const OpenPBRMaterialSpecularProperties = (props) => {
                 } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Specular Roughness", target: material, propertyKey: "specularRoughness", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Specular Roughness", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
                     if (files.length > 0) {
                         UpdateTexture(files[0], material, (texture) => (material.specularRoughnessTexture = texture));
-                    }
-                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Specular Roughness Anisotropy", target: material, propertyKey: "specularRoughnessAnisotropy", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Specular Roughness Anisotropy", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.specularRoughnessAnisotropyTexture = texture));
-                    }
-                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Specular IOR", target: material, propertyKey: "specularIor", min: 1, max: 3, step: 0.01 })] }));
-};
-const OpenPBRMaterialTransmissionProperties = (props) => {
-    const { material } = props;
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Transmission Weight", target: material, propertyKey: "transmissionWeight", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Transmission Weight", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.transmissionWeightTexture = texture));
-                    }
-                } }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Transmission Color", target: material, propertyKey: "transmissionColor", isLinearMode: true }), jsx(FileUploadLine, { label: "Transmission Color", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.transmissionColorTexture = texture));
-                    }
-                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Transmission Depth", target: material, propertyKey: "transmissionDepth", min: 0, step: 0.01 }), jsx(FileUploadLine, { label: "Transmission Depth", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.transmissionDepthTexture = texture));
-                    }
-                } }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Transmission Scatter", target: material, propertyKey: "transmissionScatter", isLinearMode: true }), jsx(FileUploadLine, { label: "Transmission Scatter", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.transmissionScatterTexture = texture));
-                    }
-                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Transmission Scatter Anisotropy", target: material, propertyKey: "transmissionScatterAnisotropy", min: -1, max: 1, step: 0.01 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Transmission Dispersion Abbe Number", target: material, propertyKey: "transmissionDispersionAbbeNumber", min: 1, max: 100, step: 1 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Transmission Dispersion Scale", target: material, propertyKey: "transmissionDispersionScale", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Transmission Dispersion Scale", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.transmissionDispersionScaleTexture = texture));
-                    }
-                } })] }));
-};
-/**
- * Displays the coat layer properties of an OpenPBR material.
- * @param props - The required properties
- * @returns A JSX element representing the coat layer properties.
- */
-const OpenPBRMaterialCoatProperties = (props) => {
-    const { material } = props;
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Coat Weight", target: material, propertyKey: "coatWeight", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Coat Weight", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.coatWeightTexture = texture));
-                    }
-                } }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Coat Color", target: material, propertyKey: "coatColor", isLinearMode: true }), jsx(FileUploadLine, { label: "Coat Color", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.coatColorTexture = texture));
-                    }
-                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Coat Roughness", target: material, propertyKey: "coatRoughness", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Coat Roughness", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.coatRoughnessTexture = texture));
-                    }
-                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Coat Roughness Anisotropy", target: material, propertyKey: "coatRoughnessAnisotropy", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Coat Roughness Anisotropy", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.coatRoughnessAnisotropyTexture = texture));
-                    }
-                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Coat IOR", target: material, propertyKey: "coatIor", min: 1, max: 3, step: 0.01 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Coat Darkening", target: material, propertyKey: "coatDarkening", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Coat Darkening", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.coatDarkeningTexture = texture));
-                    }
-                } })] }));
-};
-/**
- * Displays the fuzz layer properties of an OpenPBR material.
- * @param props - The required properties
- * @returns A JSX element representing the fuzz layer properties.
- */
-const OpenPBRMaterialFuzzProperties = (props) => {
-    const { material } = props;
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Fuzz Weight", target: material, propertyKey: "fuzzWeight", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Fuzz Weight", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.fuzzWeightTexture = texture));
-                    }
-                } }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Fuzz Color", target: material, propertyKey: "fuzzColor", isLinearMode: true }), jsx(FileUploadLine, { label: "Fuzz Color", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.fuzzColorTexture = texture));
-                    }
-                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Fuzz Roughness", target: material, propertyKey: "fuzzRoughness", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Fuzz Roughness", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.fuzzRoughnessTexture = texture));
-                    }
-                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Number of Samples", target: material, propertyKey: "fuzzSampleNumber", min: 4, max: 64, step: 1 })] }));
-};
-/**
- * Displays the emission properties of an OpenPBR material.
- * @param props - The required properties
- * @returns A JSX element representing the emission properties.
- */
-const OpenPBRMaterialEmissionProperties = (props) => {
-    const { material } = props;
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: Color3PropertyLine, label: "Emission Color", target: material, propertyKey: "emissionColor", isLinearMode: true }), jsx(FileUploadLine, { label: "Emission Color", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.emissionColorTexture = texture));
-                    }
-                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Emission Luminance", target: material, propertyKey: "emissionLuminance", min: 0, max: 10, step: 0.01 })] }));
-};
-/**
- * Displays the thin film properties of an OpenPBR material.
- * @param props - The required properties
- * @returns A JSX element representing the thin film properties.
- */
-const OpenPBRMaterialThinFilmProperties = (props) => {
-    const { material } = props;
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Thin Film Weight", target: material, propertyKey: "thinFilmWeight", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Thin Film Weight", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.thinFilmWeightTexture = texture));
-                    }
-                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Thin Film Thickness", target: material, propertyKey: "thinFilmThickness", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Thin Film Thickness", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.thinFilmThicknessTexture = texture));
-                    }
-                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Thin Film IOR", target: material, propertyKey: "thinFilmIor", min: 1, max: 3, step: 0.01 })] }));
-};
-/**
- * Displays the geometry properties of an OpenPBR material.
- * @param props - The required properties
- * @returns A JSX element representing the geometry properties.
- */
-const OpenPBRMaterialGeometryProperties = (props) => {
-    const { material } = props;
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Opacity", target: material, propertyKey: "geometryOpacity", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Geometry Opacity", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.geometryOpacityTexture = texture));
-                    }
-                } }), jsx(FileUploadLine, { label: "Geometry Normal", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.geometryNormalTexture = texture));
-                    }
-                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Tangent Angle", target: material, propertyKey: "geometryTangentAngle", min: 0, max: Math.PI, step: 0.01 }), jsx(FileUploadLine, { label: "Geometry Tangent", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.geometryTangentTexture = texture));
-                    }
-                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Coat Tangent Angle", target: material, propertyKey: "geometryCoatTangentAngle", min: 0, max: Math.PI, step: 0.01 }), jsx(FileUploadLine, { label: "Geometry Coat Normal", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.geometryCoatNormalTexture = texture));
-                    }
-                } }), jsx(FileUploadLine, { label: "Geometry Coat Tangent", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.geometryCoatTangentTexture = texture));
-                    }
-                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Geometry Thickness", target: material, propertyKey: "geometryThickness", min: 0, step: 0.1 }), jsx(FileUploadLine, { label: "Geometry Thickness", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.geometryThicknessTexture = texture));
-                    }
-                } })] }));
-};
-
-const useStyles$l = makeStyles({
-    root: {
-        display: "grid",
-        gridTemplateRows: "repeat(1fr)",
-        justifyItems: "start",
-        gap: "2px",
-        maxWidth: "400px",
-    },
-    comboBox: {
-        width: CustomTokens.valueWidth,
-        minWidth: CustomTokens.valueWidth,
-        boxSizing: "border-box",
-    },
-    input: {
-        minWidth: 0,
-    },
-    listbox: {
-        width: "fit-content",
-        minWidth: "fit-content",
-        maxWidth: "350px",
-    },
-});
-/**
- * Wrapper around a Fluent ComboBox that allows for filtering options.
- * @param props
- * @returns
- */
-const ComboBox = forwardRef((props, ref) => {
-    ComboBox.displayName = "ComboBox";
-    const comboId = useId();
-    const styles = useStyles$l();
-    const { size } = useContext(ToolContext);
-    // Find the label for the current value
-    const getLabel = (value) => props.options.find((opt) => opt.value === value)?.label ?? "";
-    const [query, setQuery] = useState(getLabel(props.value ?? ""));
-    useEffect(() => {
-        setQuery(getLabel(props.value ?? ""));
-    }, [props.value, props.options]);
-    // Convert to Fluent's { children, value } format
-    const normalizedOptions = props.options.map((opt) => ({ children: opt.label, value: opt.value }));
-    const children = useComboboxFilter(query, normalizedOptions, {
-        noOptionsMessage: "No items match your search.",
-        optionToReactKey: (option) => option.value,
-        optionToText: (option) => option.children,
-        renderOption: (option) => (jsx(Option, { value: option.value, text: option.children, children: option.children }, option.value)),
-    });
-    const onOptionSelect = (_e, data) => {
-        setQuery(data.optionText ?? "");
-        data.optionValue && props.onChange(data.optionValue);
-    };
-    return (jsxs("div", { className: styles.root, children: [jsx("label", { id: comboId, children: props.label }), jsx(Combobox, { ref: ref, defaultOpen: props.defaultOpen, size: size, root: { className: styles.comboBox }, input: { className: styles.input }, listbox: { className: styles.listbox }, onOptionSelect: onOptionSelect, "aria-labelledby": comboId, placeholder: "Search..", onChange: (ev) => setQuery(ev.target.value), value: query, children: children })] }));
-});
-
-const useStyles$k = makeStyles({
-    linkDiv: {
-        display: "flex",
-        flexDirection: "row",
-        alignItems: "center",
-        gap: tokens.spacingHorizontalS,
-        minWidth: 0,
-        overflow: "hidden",
-    },
-    link: {
-        minWidth: 0,
-        overflow: "hidden",
-        textOverflow: "ellipsis",
-        whiteSpace: "nowrap",
-    },
-});
-/**
- * A generic primitive component with a ComboBox for selecting from a list of entities.
- * Supports entities with duplicate names by using uniqueId for identity.
- * @param props ChooseEntityProps
- * @returns EntitySelector component
- */
-function EntitySelector(props) {
-    const { value, onLink, getEntities, getName, filter, defaultValue } = props;
-    const onChange = props.onChange;
-    const classes = useStyles$k();
-    const comboBoxRef = useRef(null);
-    // Build options with uniqueId as key
-    const options = useMemo(() => {
-        return getEntities()
-            .filter((e) => e.uniqueId !== undefined && (!filter || filter(e)))
-            .map((entity) => ({
-            label: getName(entity)?.toString() || "",
-            value: entity.uniqueId.toString(),
-        }))
-            .sort((a, b) => a.label.localeCompare(b.label));
-    }, [getEntities, getName, filter]);
-    const [isEditing, setIsEditing] = useState(false);
-    const [enteringEditMode, pulseEnteringEditMode] = useImpulse();
-    useEffect(() => {
-        if (enteringEditMode) {
-            comboBoxRef.current?.focus();
-        }
-    }, [enteringEditMode]);
-    const handleEntitySelect = (key) => {
-        const entity = getEntities().find((e) => e.uniqueId.toString() === key);
-        onChange?.(entity ?? null);
-        setIsEditing(false);
-    };
-    // Get current entity key for display
-    const currentKey = value ? value.uniqueId.toString() : "";
-    if (value && !isEditing) {
-        // If there is a value and we are not editing, show the link view
-        return (jsxs("div", { className: classes.linkDiv, children: [jsx(Tooltip$1, { content: getName(value), relationship: "label", children: jsx(Link, { className: classes.link, value: getName(value), onLink: () => onLink(value) }) }), onChange &&
-                    (defaultValue !== undefined ? (
-                    // If the defaultValue is specified, then allow resetting to the default
-                    jsx(Tooltip$1, { content: "Unlink", relationship: "label", children: jsx(Button, { icon: LinkDismissRegular, onClick: () => {
-                                pulseEnteringEditMode(true);
-                                onChange(defaultValue);
-                            } }) })) : (
-                    // Otherwise, just allow editing to a new value
-                    jsx(Tooltip$1, { content: "Edit Link", relationship: "label", children: jsx(Button, { icon: LinkEditRegular, onClick: () => {
-                                pulseEnteringEditMode(true);
-                                setIsEditing(true);
-                            } }) })))] }));
-    }
-    else {
-        // Otherwise, show the ComboBox for selection
-        return jsx(ComboBox, { ref: comboBoxRef, defaultOpen: enteringEditMode, label: "", options: options, value: currentKey, onChange: handleEntitySelect });
-    }
-}
-EntitySelector.displayName = "EntitySelector";
-
+                    }
+                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Specular Roughness Anisotropy", target: material, propertyKey: "specularRoughnessAnisotropy", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Specular Roughness Anisotropy", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
+                    if (files.length > 0) {
+                        UpdateTexture(files[0], material, (texture) => (material.specularRoughnessAnisotropyTexture = texture));
+                    }
+                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Specular IOR", target: material, propertyKey: "specularIor", min: 1, max: 3, step: 0.01 })] }));
+};
+const OpenPBRMaterialTransmissionProperties = (props) => {
+    const { material } = props;
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Transmission Weight", target: material, propertyKey: "transmissionWeight", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Transmission Weight", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
+                    if (files.length > 0) {
+                        UpdateTexture(files[0], material, (texture) => (material.transmissionWeightTexture = texture));
+                    }
+                } }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Transmission Color", target: material, propertyKey: "transmissionColor", isLinearMode: true }), jsx(FileUploadLine, { label: "Transmission Color", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
+                    if (files.length > 0) {
+                        UpdateTexture(files[0], material, (texture) => (material.transmissionColorTexture = texture));
+                    }
+                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Transmission Depth", target: material, propertyKey: "transmissionDepth", min: 0, step: 0.01 }), jsx(FileUploadLine, { label: "Transmission Depth", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
+                    if (files.length > 0) {
+                        UpdateTexture(files[0], material, (texture) => (material.transmissionDepthTexture = texture));
+                    }
+                } }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Transmission Scatter", target: material, propertyKey: "transmissionScatter", isLinearMode: true }), jsx(FileUploadLine, { label: "Transmission Scatter", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
+                    if (files.length > 0) {
+                        UpdateTexture(files[0], material, (texture) => (material.transmissionScatterTexture = texture));
+                    }
+                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Transmission Scatter Anisotropy", target: material, propertyKey: "transmissionScatterAnisotropy", min: -1, max: 1, step: 0.01 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Transmission Dispersion Abbe Number", target: material, propertyKey: "transmissionDispersionAbbeNumber", min: 1, max: 100, step: 1 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Transmission Dispersion Scale", target: material, propertyKey: "transmissionDispersionScale", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Transmission Dispersion Scale", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
+                    if (files.length > 0) {
+                        UpdateTexture(files[0], material, (texture) => (material.transmissionDispersionScaleTexture = texture));
+                    }
+                } })] }));
+};
 /**
- * A primitive component with a ComboBox for selecting from existing scene materials.
- * @param props MaterialSelectorProps
- * @returns MaterialSelector component
+ * Displays the coat layer properties of an OpenPBR material.
+ * @param props - The required properties
+ * @returns A JSX element representing the coat layer properties.
  */
-const MaterialSelector = (props) => {
-    MaterialSelector.displayName = "MaterialSelector";
-    const { scene, ...rest } = props;
-    const getMaterials = useCallback(() => scene.materials, [scene.materials]);
-    const getName = useCallback((material) => material.name, []);
-    return jsx(EntitySelector, { ...rest, getEntities: getMaterials, getName: getName });
+const OpenPBRMaterialCoatProperties = (props) => {
+    const { material } = props;
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Coat Weight", target: material, propertyKey: "coatWeight", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Coat Weight", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
+                    if (files.length > 0) {
+                        UpdateTexture(files[0], material, (texture) => (material.coatWeightTexture = texture));
+                    }
+                } }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Coat Color", target: material, propertyKey: "coatColor", isLinearMode: true }), jsx(FileUploadLine, { label: "Coat Color", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
+                    if (files.length > 0) {
+                        UpdateTexture(files[0], material, (texture) => (material.coatColorTexture = texture));
+                    }
+                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Coat Roughness", target: material, propertyKey: "coatRoughness", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Coat Roughness", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
+                    if (files.length > 0) {
+                        UpdateTexture(files[0], material, (texture) => (material.coatRoughnessTexture = texture));
+                    }
+                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Coat Roughness Anisotropy", target: material, propertyKey: "coatRoughnessAnisotropy", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Coat Roughness Anisotropy", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
+                    if (files.length > 0) {
+                        UpdateTexture(files[0], material, (texture) => (material.coatRoughnessAnisotropyTexture = texture));
+                    }
+                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Coat IOR", target: material, propertyKey: "coatIor", min: 1, max: 3, step: 0.01 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Coat Darkening", target: material, propertyKey: "coatDarkening", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Coat Darkening", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
+                    if (files.length > 0) {
+                        UpdateTexture(files[0], material, (texture) => (material.coatDarkeningTexture = texture));
+                    }
+                } })] }));
 };
-
 /**
- * A primitive component with a ComboBox for selecting from existing scene nodes.
- * @param props NodeSelectorProps
- * @returns NodeSelector component
+ * Displays the fuzz layer properties of an OpenPBR material.
+ * @param props - The required properties
+ * @returns A JSX element representing the fuzz layer properties.
  */
-const NodeSelector = (props) => {
-    NodeSelector.displayName = "NodeSelector";
-    const { scene, ...rest } = props;
-    const getNodes = useCallback(() => scene.getNodes(), [scene]);
-    const getName = useCallback((node) => node.name, []);
-    return jsx(EntitySelector, { ...rest, getEntities: getNodes, getName: getName });
+const OpenPBRMaterialFuzzProperties = (props) => {
+    const { material } = props;
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Fuzz Weight", target: material, propertyKey: "fuzzWeight", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Fuzz Weight", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
+                    if (files.length > 0) {
+                        UpdateTexture(files[0], material, (texture) => (material.fuzzWeightTexture = texture));
+                    }
+                } }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Fuzz Color", target: material, propertyKey: "fuzzColor", isLinearMode: true }), jsx(FileUploadLine, { label: "Fuzz Color", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
+                    if (files.length > 0) {
+                        UpdateTexture(files[0], material, (texture) => (material.fuzzColorTexture = texture));
+                    }
+                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Fuzz Roughness", target: material, propertyKey: "fuzzRoughness", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Fuzz Roughness", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
+                    if (files.length > 0) {
+                        UpdateTexture(files[0], material, (texture) => (material.fuzzRoughnessTexture = texture));
+                    }
+                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Number of Samples", target: material, propertyKey: "fuzzSampleNumber", min: 4, max: 64, step: 1 })] }));
 };
-
 /**
- * A button that uploads a file and either:
- * - Updates an existing Texture or CubeTexture via updateURL (if texture prop is provided)
- * - Creates a new Texture or CubeTexture (if scene/onChange props are provided)
- * @param props TextureUploadProps
- * @returns UploadButton component that handles texture upload
+ * Displays the emission properties of an OpenPBR material.
+ * @param props - The required properties
+ * @returns A JSX element representing the emission properties.
  */
-const TextureUpload = (props) => {
-    TextureUpload.displayName = "TextureUpload";
-    const label = props.texture ? "Upload Texture" : undefined;
-    // TODO: This should probably be dynamically fetching a list of supported texture extensions
-    const accept = ".jpg, .png, .tga, .dds, .env, .exr";
-    const handleUpload = useCallback((files) => {
-        const file = files[0];
-        if (!file) {
-            return;
-        }
-        ReadFile(file, (data) => {
-            const blob = new Blob([data], { type: "octet/stream" });
-            // Update existing texture
-            if (props.texture) {
-                const { texture, onChange } = props;
-                const reader = new FileReader();
-                reader.readAsDataURL(blob);
-                reader.onloadend = () => {
-                    const base64data = reader.result;
-                    if (texture instanceof CubeTexture) {
-                        let extension = undefined;
-                        if (file.name.toLowerCase().indexOf(".dds") > 0) {
-                            extension = ".dds";
-                        }
-                        else if (file.name.toLowerCase().indexOf(".env") > 0) {
-                            extension = ".env";
-                        }
-                        texture.updateURL(base64data, extension, () => onChange?.(texture));
-                    }
-                    else if (texture instanceof Texture) {
-                        texture.updateURL(base64data, null, () => onChange?.(texture));
+const OpenPBRMaterialEmissionProperties = (props) => {
+    const { material } = props;
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: Color3PropertyLine, label: "Emission Color", target: material, propertyKey: "emissionColor", isLinearMode: true }), jsx(FileUploadLine, { label: "Emission Color", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
+                    if (files.length > 0) {
+                        UpdateTexture(files[0], material, (texture) => (material.emissionColorTexture = texture));
                     }
-                };
-            }
-            else {
-                // Create new texture
-                const { scene, cubeOnly, onChange } = props;
-                const url = URL.createObjectURL(blob);
-                const extension = file.name.split(".").pop()?.toLowerCase();
-                // Revoke the object URL after texture loads to prevent memory leak
-                const revokeUrl = () => URL.revokeObjectURL(url);
-                const newTexture = cubeOnly
-                    ? new CubeTexture(url, scene, [], false, undefined, revokeUrl, undefined, undefined, false, extension ? "." + extension : undefined)
-                    : new Texture(url, scene, false, false, undefined, revokeUrl);
-                onChange(newTexture);
-            }
-        }, undefined, true);
-    }, [props]);
-    return jsx(UploadButton, { onUpload: handleUpload, accept: accept, title: "Upload Texture", label: label });
+                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Emission Luminance", target: material, propertyKey: "emissionLuminance", min: 0, max: 10, step: 0.01 })] }));
 };
-
-const useStyles$j = makeStyles({
-    container: {
-        display: "flex",
-        flexDirection: "row",
-        alignItems: "center",
-        gap: tokens.spacingHorizontalS,
-    },
-});
 /**
- * A primitive component with a ComboBox for selecting from existing scene textures
- * and a button for uploading new texture files.
- * @param props TextureSelectorProps
- * @returns TextureSelector component
+ * Displays the thin film properties of an OpenPBR material.
+ * @param props - The required properties
+ * @returns A JSX element representing the thin film properties.
  */
-const TextureSelector = (props) => {
-    TextureSelector.displayName = "TextureSelector";
-    const { scene, cubeOnly, value, onChange, onLink, defaultValue } = props;
-    const classes = useStyles$j();
-    const getTextures = useCallback(() => scene.textures, [scene.textures]);
-    const getName = useCallback((texture) => texture.displayName || texture.name || `${texture.getClassName() || "Unnamed Texture"} (${texture.uniqueId})`, []);
-    const filter = useCallback((texture) => !cubeOnly || texture.isCube, [cubeOnly]);
-    return (jsxs("div", { className: classes.container, children: [jsx(EntitySelector, { value: value, onChange: onChange, onLink: onLink, defaultValue: defaultValue, getEntities: getTextures, getName: getName, filter: filter }), !value && jsx(TextureUpload, { scene: scene, onChange: onChange, cubeOnly: cubeOnly })] }));
+const OpenPBRMaterialThinFilmProperties = (props) => {
+    const { material } = props;
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Thin Film Weight", target: material, propertyKey: "thinFilmWeight", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Thin Film Weight", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
+                    if (files.length > 0) {
+                        UpdateTexture(files[0], material, (texture) => (material.thinFilmWeightTexture = texture));
+                    }
+                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Thin Film Thickness", target: material, propertyKey: "thinFilmThickness", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Thin Film Thickness", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
+                    if (files.length > 0) {
+                        UpdateTexture(files[0], material, (texture) => (material.thinFilmThicknessTexture = texture));
+                    }
+                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Thin Film IOR", target: material, propertyKey: "thinFilmIor", min: 1, max: 3, step: 0.01 })] }));
 };
-
 /**
- * A primitive component with a ComboBox for selecting from existing scene skeletons.
- * @param props SkeletonSelectorProps
- * @returns SkeletonSelector component
+ * Displays the geometry properties of an OpenPBR material.
+ * @param props - The required properties
+ * @returns A JSX element representing the geometry properties.
  */
-const SkeletonSelector = (props) => {
-    SkeletonSelector.displayName = "SkeletonSelector";
-    const { scene, ...rest } = props;
-    const getSkeletons = useCallback(() => scene.skeletons, [scene.skeletons]);
-    const getName = useCallback((skeleton) => skeleton.name, []);
-    return jsx(EntitySelector, { ...rest, getEntities: getSkeletons, getName: getName });
+const OpenPBRMaterialGeometryProperties = (props) => {
+    const { material } = props;
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Opacity", target: material, propertyKey: "geometryOpacity", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Geometry Opacity", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
+                    if (files.length > 0) {
+                        UpdateTexture(files[0], material, (texture) => (material.geometryOpacityTexture = texture));
+                    }
+                } }), jsx(FileUploadLine, { label: "Geometry Normal", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
+                    if (files.length > 0) {
+                        UpdateTexture(files[0], material, (texture) => (material.geometryNormalTexture = texture));
+                    }
+                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Tangent Angle", target: material, propertyKey: "geometryTangentAngle", min: 0, max: Math.PI, step: 0.01 }), jsx(FileUploadLine, { label: "Geometry Tangent", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
+                    if (files.length > 0) {
+                        UpdateTexture(files[0], material, (texture) => (material.geometryTangentTexture = texture));
+                    }
+                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Coat Tangent Angle", target: material, propertyKey: "geometryCoatTangentAngle", min: 0, max: Math.PI, step: 0.01 }), jsx(FileUploadLine, { label: "Geometry Coat Normal", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
+                    if (files.length > 0) {
+                        UpdateTexture(files[0], material, (texture) => (material.geometryCoatNormalTexture = texture));
+                    }
+                } }), jsx(FileUploadLine, { label: "Geometry Coat Tangent", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
+                    if (files.length > 0) {
+                        UpdateTexture(files[0], material, (texture) => (material.geometryCoatTangentTexture = texture));
+                    }
+                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Geometry Thickness", target: material, propertyKey: "geometryThickness", min: 0, step: 0.1 }), jsx(FileUploadLine, { label: "Geometry Thickness", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
+                    if (files.length > 0) {
+                        UpdateTexture(files[0], material, (texture) => (material.geometryThicknessTexture = texture));
+                    }
+                } })] }));
 };
 
-const NodeSelectorPropertyLine = (props) => jsx(PropertyLine, { ...props, children: jsx(NodeSelector, { ...props }) });
-const MaterialSelectorPropertyLine = (props) => jsx(PropertyLine, { ...props, children: jsx(MaterialSelector, { ...props }) });
-const TextureSelectorPropertyLine = (props) => jsx(PropertyLine, { ...props, children: jsx(TextureSelector, { ...props }) });
-const SkeletonSelectorPropertyLine = (props) => jsx(PropertyLine, { ...props, children: jsx(SkeletonSelector, { ...props }) });
-
 const LightFalloffOptions = [
     { label: "Physical", value: PBRBaseMaterial.LIGHTFALLOFF_PHYSICAL },
     { label: "glTF", value: PBRBaseMaterial.LIGHTFALLOFF_GLTF },
@@ -16123,23 +16226,6 @@ const ParticleSystemEmitterProperties = (props) => {
                             } })) : (jsx(Property, { component: TextPropertyLine, propertyPath: "source", label: "Source", value: "No meshes in scene." })) })), particleEmitterType instanceof BoxParticleEmitter && (jsxs(Fragment, { children: [jsx(BoundProperty, { component: Vector3PropertyLine, label: "Direction1", target: particleEmitterType, propertyKey: "direction1" }), jsx(BoundProperty, { component: Vector3PropertyLine, label: "Direction2", target: particleEmitterType, propertyKey: "direction2" }), jsx(BoundProperty, { component: Vector3PropertyLine, label: "Min emit box", target: particleEmitterType, propertyKey: "minEmitBox" }), jsx(BoundProperty, { component: Vector3PropertyLine, label: "Max emit box", target: particleEmitterType, propertyKey: "maxEmitBox" })] })), particleEmitterType instanceof ConeParticleEmitter && (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Radius range", target: particleEmitterType, propertyKey: "radiusRange", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Height range", target: particleEmitterType, propertyKey: "heightRange", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Emit from spawn point only", target: particleEmitterType, propertyKey: "emitFromSpawnPointOnly" }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Direction randomizer", target: particleEmitterType, propertyKey: "directionRandomizer", min: 0, max: 1, step: 0.01 })] })), particleEmitterType instanceof SphereParticleEmitter && (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Radius", target: particleEmitterType, propertyKey: "radius", min: 0, step: 0.1 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Radius range", target: particleEmitterType, propertyKey: "radiusRange", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Direction randomizer", target: particleEmitterType, propertyKey: "directionRandomizer", min: 0, max: 1, step: 0.01 })] })), particleEmitterType instanceof CylinderParticleEmitter && (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Radius", target: particleEmitterType, propertyKey: "radius", min: 0, step: 0.1 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Height", target: particleEmitterType, propertyKey: "height", min: 0, step: 0.1 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Radius range", target: particleEmitterType, propertyKey: "radiusRange", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Direction randomizer", target: particleEmitterType, propertyKey: "directionRandomizer", min: 0, max: 1, step: 0.01 })] })), particleEmitterType instanceof HemisphericParticleEmitter && (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Radius", target: particleEmitterType, propertyKey: "radius", min: 0, step: 0.1 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Radius range", target: particleEmitterType, propertyKey: "radiusRange", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Direction randomizer", target: particleEmitterType, propertyKey: "directionRandomizer", min: 0, max: 1, step: 0.01 })] })), particleEmitterType instanceof PointParticleEmitter && (jsxs(Fragment, { children: [jsx(BoundProperty, { component: Vector3PropertyLine, label: "Direction1", target: particleEmitterType, propertyKey: "direction1" }), jsx(BoundProperty, { component: Vector3PropertyLine, label: "Direction2", target: particleEmitterType, propertyKey: "direction2" })] }))] })), !scene && jsx(TextPropertyLine, { label: "Emitter", value: "No scene available." })] }));
 };
 
-/**
- * Return a copied array and re-render when array mutators run.
- * Intercept add/remove/change functions because the underlying APIs update internal arrays in-place.
- * @param target The target object containing the observable array, or null if the array is not applicable.
- * @param getItems A function to get the current items in the array.
- * @param addFn The name of the function to add an item to the array.
- * @param removeFn The name of the function to remove an item from the array.
- * @param changeFn The name of the function to change an item in the array.
- * @returns A copied array that re-renders when array mutators run.
- */
-function useObservableArray(target, getItems, addFn, removeFn, changeFn) {
-    return useObservableState(useCallback(() => {
-        const value = getItems();
-        return [...(value ?? [])];
-    }, [getItems]), useInterceptObservable("function", target, addFn), useInterceptObservable("function", target, removeFn), changeFn ? useInterceptObservable("function", target, changeFn) : undefined);
-}
-
 const useStyles$h = makeStyles({
     subsection: {
         marginTop: tokens.spacingVerticalM,
@@ -17770,18 +17856,19 @@ const SpriteManagerActionsProperties = (props) => {
 
 /**
  * Gets the data of the specified texture by rendering it to an intermediate RGBA texture and retrieving the bytes from it.
- * This is convienent to get 8-bit RGBA values for a texture in a GPU compressed format.
+ * This is convenient to get 8-bit RGBA values for a texture in a GPU compressed format.
  * @param texture the source texture
  * @param width the width of the result, which does not have to match the source texture width
  * @param height the height of the result, which does not have to match the source texture height
- * @param face if the texture has multiple faces, the face index to use for the source
+ * @param faceOrLayer if the texture has multiple faces, the face index to use for the source. For 2D array textures, this is the layer index.
  * @param channels a filter for which of the RGBA channels to return in the result
  * @param lod if the texture has multiple LODs, the lod index to use for the source
  * @returns the 8-bit texture data
  */
-async function ApplyChannelsToTextureDataAsync(texture, width, height, face, channels, lod = 0) {
+async function ApplyChannelsToTextureDataAsync(texture, width, height, faceOrLayer, channels, lod = 0) {
     // For cube maps, force RTT path to ensure correct face orientation and gamma correction
-    const data = await GetTextureDataAsync(texture, width, height, face, lod, texture.isCube);
+    // For 2D array textures, face is reinterpreted as the layer index for direct pixel readback
+    const data = await GetTextureDataAsync(texture, width, height, faceOrLayer, lod, texture.isCube);
     if (!channels.R || !channels.G || !channels.B || !channels.A) {
         for (let i = 0; i < width * height * 4; i += 4) {
             // If alpha is the only channel, just display alpha across all channels
@@ -17863,6 +17950,7 @@ const useStyles$9 = makeStyles({
     controls: {
         display: "flex",
         gap: tokens.spacingHorizontalXS,
+        padding: 0,
     },
     controlButton: {
         minWidth: "auto",
@@ -17883,7 +17971,7 @@ const useStyles$9 = makeStyles({
         display: "flex",
         justifyContent: "center",
         marginTop: tokens.spacingVerticalXS,
-        marginBottom: tokens.spacingVerticalS,
+        marginBottom: tokens.spacingVerticalXS,
         width: "100%",
     },
 });
@@ -17901,8 +17989,14 @@ const TexturePreview = (props) => {
     const canvasRef = useRef(null);
     const [channels, setChannels] = useState(TextureChannelStates.ALL);
     const [face, setFace] = useState(0);
+    const [layer, setLayer] = useState(0);
     const [canvasStyle, setCanvasStyle] = useState();
     const internalTexture = useProperty(texture, "_texture");
+    const showLayerDropdown = texture.is2DArray;
+    const layerCount = texture.is2DArray && internalTexture ? internalTexture.depth : 0;
+    useEffect(() => {
+        setLayer((layer) => Clamp(layer, 0, Math.max(0, layerCount - 1)));
+    }, [layerCount]);
     const { size } = useContext(ToolContext);
     // Watch for pinned state changes - when portaled, the canvas needs to be redrawn
     const accordionCtx = useContext(AccordionContext);
@@ -17924,7 +18018,7 @@ const TexturePreview = (props) => {
             const imageWidth = `min(${maxWidth}, calc(${maxHeight} * ${aspectRatio}))`;
             setCanvasStyle({ width: imageWidth });
             // Fetch texture data BEFORE clearing the canvas to avoid flicker
-            const data = await ApplyChannelsToTextureDataAsync(texture, textureWidth, textureHeight, face, channels);
+            const data = await ApplyChannelsToTextureDataAsync(texture, textureWidth, textureHeight, texture.is2DArray ? layer : face, channels);
             // Now set canvas dimensions (this clears the canvas) and draw immediately
             canvas.width = canvasWidth;
             canvas.height = canvasHeight;
@@ -17939,7 +18033,7 @@ const TexturePreview = (props) => {
         catch {
             // If we fail, leave the canvas empty
         }
-    }, [texture, face, channels, offsetX, offsetY, width, height, internalTexture]);
+    }, [texture, face, channels, offsetX, offsetY, width, height, internalTexture, layer]);
     useImperativeHandle(imperativeRef, () => ({ refresh: updatePreviewAsync }), [updatePreviewAsync]);
     useEffect(() => {
         void updatePreviewAsync();
@@ -17948,7 +18042,7 @@ const TexturePreview = (props) => {
     useEffect(() => {
         void updatePreviewAsync();
     }, [isPinned]);
-    return (jsx(LineContainer, { uniqueId: "TexturePreview", children: jsxs("div", { className: classes.root, children: [disableToolbar ? null : texture.isCube ? (jsx(Toolbar$1, { className: classes.controls, size: size, "aria-label": "Cube Faces", children: ["+X", "-X", "+Y", "-Y", "+Z", "-Z"].map((label, idx) => (jsx(ToolbarButton, { className: classes.controlButton, appearance: face === idx ? "primary" : "subtle", onClick: () => setFace(idx), children: label }, label))) })) : (jsx(Toolbar$1, { className: classes.controls, size: size, "aria-label": "Channels", children: ["R", "G", "B", "A", "ALL"].map((ch) => (jsx(ToolbarButton, { className: classes.controlButton, appearance: channels === TextureChannelStates[ch] ? "primary" : "subtle", onClick: () => setChannels(TextureChannelStates[ch]), children: ch }, ch))) })), jsx("div", { className: classes.previewContainer, children: jsx("canvas", { ref: canvasRef, className: classes.preview, style: canvasStyle }) }), texture.isRenderTarget && (jsx(Button$1, { appearance: "outline", onClick: () => {
+    return (jsx(LineContainer, { uniqueId: "TexturePreview", children: jsxs("div", { className: classes.root, children: [disableToolbar ? null : texture.isCube ? (jsx(Toolbar$1, { className: classes.controls, size: size, "aria-label": "Cube Faces", children: ["+X", "-X", "+Y", "-Y", "+Z", "-Z"].map((label, idx) => (jsx(ToolbarButton, { className: classes.controlButton, appearance: face === idx ? "primary" : "subtle", onClick: () => setFace(idx), children: label }, label))) })) : (jsx(Toolbar$1, { className: classes.controls, size: size, "aria-label": "Channels", children: ["R", "G", "B", "A", "ALL"].map((ch) => (jsx(ToolbarButton, { className: classes.controlButton, appearance: channels === TextureChannelStates[ch] ? "primary" : "subtle", onClick: () => setChannels(TextureChannelStates[ch]), children: ch }, ch))) })), jsx("div", { className: classes.previewContainer, children: jsx("canvas", { ref: canvasRef, className: classes.preview, style: canvasStyle }) }), !disableToolbar && showLayerDropdown && layerCount > 0 && (jsx(SyncedSliderPropertyLine, { label: "Layer", value: layer, onChange: setLayer, min: 0, max: layerCount - 1, step: 1 })), texture.isRenderTarget && (jsx(Button$1, { appearance: "outline", onClick: () => {
                         void updatePreviewAsync();
                     }, children: "Refresh" }))] }) }));
 };
@@ -20597,7 +20691,7 @@ const NodeExplorerServiceDefinition = {
                     },
                 };
             },
-            entityIcon: ({ entity: node }) => node instanceof AbstractMesh ? (jsx(MeshIcon, { color: tokens.colorPaletteBlueForeground2 })) : node instanceof TransformNode ? (jsx(MyLocationRegular, { color: tokens.colorPaletteBlueForeground2 })) : node instanceof Camera ? (jsx(CameraRegular, { color: tokens.colorPaletteGreenForeground2 })) : node instanceof Light ? (jsx(LightbulbRegular, { color: tokens.colorPaletteYellowForeground2 })) : (jsx(Fragment, {})),
+            entityIcon: ({ entity: node }) => node instanceof AbstractMesh ? (jsx(MeshIcon, { color: tokens.colorPaletteBlueForeground2 })) : node instanceof TransformNode ? (jsx(MyLocationRegular, { color: tokens.colorPaletteBlueForeground2 })) : node instanceof Camera ? (jsx(CameraRegular, { color: tokens.colorPaletteGreenForeground2 })) : node instanceof ClusteredLightContainer ? (jsx(BubbleMultipleRegular, { color: tokens.colorPaletteYellowForeground2 })) : node instanceof Light ? (jsx(LightbulbRegular, { color: tokens.colorPaletteYellowForeground2 })) : (jsx(Fragment, {})),
             getEntityAddedObservables: () => [
                 scene.onNewMeshAddedObservable,
                 scene.onNewTransformNodeAddedObservable,
@@ -22922,5 +23016,5 @@ const TextAreaPropertyLine = (props) => {
 // Attach Inspector v2 to Scene.debugLayer as a side effect for back compat.
 AttachDebugLayer();
 
-export { HexPropertyLine as $, Accordion as A, Button as B, CheckboxPropertyLine as C, ColorStepGradientComponent as D, ComboBox as E, ComboBoxPropertyLine as F, ConstructorFactory as G, ConvertOptions as H, DebugServiceIdentity as I, DetachDebugLayer as J, DraggableLine as K, LinkToEntity as L, MessageBar as M, NumberInputPropertyLine as N, Dropdown as O, Popover as P, EntitySelector as Q, ErrorBoundary as R, SpinButtonPropertyLine as S, TextInputPropertyLine as T, ExtensibleAccordion as U, Vector3PropertyLine as V, FactorGradientComponent as W, FactorGradientList as X, FileUploadLine as Y, GetPropertyDescriptor as Z, GizmoServiceIdentity as _, useProperty as a, Vector2PropertyLine as a$, InfoLabel as a0, InputHexField as a1, InputHsvField as a2, Inspector as a3, InterceptFunction as a4, InterceptProperty as a5, IsPropertyReadonly as a6, LineContainer as a7, LinkPropertyLine as a8, LinkToEntityPropertyLine as a9, SettingsStoreIdentity as aA, ShowInspector as aB, SidePaneContainer as aC, SkeletonSelector as aD, Slider as aE, SpinButton as aF, StatsServiceIdentity as aG, StringDropdown as aH, StringDropdownPropertyLine as aI, StringifiedPropertyLine as aJ, Switch as aK, SwitchPropertyLine as aL, SyncedSliderInput as aM, SyncedSliderPropertyLine as aN, TeachingMoment as aO, TextAreaPropertyLine as aP, TextInput as aQ, TextPropertyLine as aR, Textarea as aS, TextureSelector as aT, TextureUpload as aU, Theme as aV, ThemeServiceIdentity as aW, ToastProvider as aX, ToggleButton as aY, Tooltip as aZ, UploadButton as a_, List as aa, MakeDialogTeachingMoment as ab, MakeLazyComponent as ac, MakePopoverTeachingMoment as ad, MakePropertyHook as ae, MakeTeachingMoment as af, MaterialSelector as ag, NodeSelector as ah, NumberDropdown as ai, NumberDropdownPropertyLine as aj, ObservableCollection as ak, Pane as al, PlaceholderPropertyLine as am, PositionedPopover as an, PropertiesServiceIdentity as ao, Property as ap, PropertyContext as aq, PropertyLine as ar, QuaternionPropertyLine as as, RotationVectorPropertyLine as at, SceneExplorerServiceIdentity as au, SearchBar as av, SearchBox as aw, SelectionServiceDefinition as ax, SettingsServiceIdentity as ay, SettingsStore as az, ShellServiceIdentity as b, Vector4PropertyLine as b0, WatcherServiceIdentity as b1, useAngleConverters as b2, useAsyncResource as b3, useColor3Property as b4, useColor4Property as b5, useEventListener as b6, useEventfulState as b7, useInterceptObservable as b8, useKeyListener as b9, useKeyState as ba, useObservableCollection as bb, useOrderedObservableCollection as bc, usePollingObservable as bd, usePropertyChangedNotifier as be, useQuaternionProperty as bf, useResource as bg, useSetting as bh, useTheme as bi, useThemeMode as bj, useVector3Property as bk, SceneContextIdentity as c, SelectionServiceIdentity as d, useObservableState as e, AccordionSection as f, ButtonLine as g, ToolsServiceIdentity as h, useExtensionManager as i, Link as j, AccordionSectionItem as k, AttachDebugLayer as l, BooleanBadgePropertyLine as m, BoundProperty as n, BuiltInsExtensionFeed as o, Checkbox as p, ChildWindow as q, Collapse as r, Color3GradientComponent as s, Color3GradientList as t, useToast as u, Color3PropertyLine as v, Color4GradientComponent as w, Color4GradientList as x, Color4PropertyLine as y, ColorPickerPopup as z };
-//# sourceMappingURL=index-_q2JI3vX.js.map
+export { GizmoServiceIdentity as $, Accordion as A, Button as B, CheckboxPropertyLine as C, ColorPickerPopup as D, ColorStepGradientComponent as E, ComboBox as F, ComboBoxPropertyLine as G, ConstructorFactory as H, ConvertOptions as I, DebugServiceIdentity as J, DetachDebugLayer as K, LinkToEntity as L, MessageBar as M, NumberInputPropertyLine as N, DraggableLine as O, Popover as P, Dropdown as Q, EntitySelector as R, SpinButtonPropertyLine as S, TextInputPropertyLine as T, ErrorBoundary as U, Vector3PropertyLine as V, ExtensibleAccordion as W, FactorGradientComponent as X, FactorGradientList as Y, FileUploadLine as Z, GetPropertyDescriptor as _, useInterceptObservable as a, UploadButton as a$, HexPropertyLine as a0, InfoLabel as a1, InputHexField as a2, InputHsvField as a3, Inspector as a4, InterceptFunction as a5, InterceptProperty as a6, IsPropertyReadonly as a7, LineContainer as a8, LinkPropertyLine as a9, SettingsStore as aA, SettingsStoreIdentity as aB, ShowInspector as aC, SidePaneContainer as aD, SkeletonSelector as aE, Slider as aF, SpinButton as aG, StatsServiceIdentity as aH, StringDropdown as aI, StringDropdownPropertyLine as aJ, StringifiedPropertyLine as aK, Switch as aL, SwitchPropertyLine as aM, SyncedSliderInput as aN, SyncedSliderPropertyLine as aO, TeachingMoment as aP, TextAreaPropertyLine as aQ, TextInput as aR, TextPropertyLine as aS, Textarea as aT, TextureSelector as aU, TextureUpload as aV, Theme as aW, ThemeServiceIdentity as aX, ToastProvider as aY, ToggleButton as aZ, Tooltip as a_, LinkToEntityPropertyLine as aa, List as ab, MakeDialogTeachingMoment as ac, MakeLazyComponent as ad, MakePopoverTeachingMoment as ae, MakePropertyHook as af, MakeTeachingMoment as ag, MaterialSelector as ah, NodeSelector as ai, NumberDropdown as aj, NumberDropdownPropertyLine as ak, ObservableCollection as al, Pane as am, PlaceholderPropertyLine as an, PositionedPopover as ao, PropertiesServiceIdentity as ap, Property as aq, PropertyContext as ar, PropertyLine as as, QuaternionPropertyLine as at, RotationVectorPropertyLine as au, SceneExplorerServiceIdentity as av, SearchBar as aw, SearchBox as ax, SelectionServiceDefinition as ay, SettingsServiceIdentity as az, useProperty as b, Vector2PropertyLine as b0, Vector4PropertyLine as b1, WatcherServiceIdentity as b2, useAngleConverters as b3, useAsyncResource as b4, useColor3Property as b5, useColor4Property as b6, useEventListener as b7, useEventfulState as b8, useKeyListener as b9, useKeyState as ba, useObservableCollection as bb, useOrderedObservableCollection as bc, usePollingObservable as bd, usePropertyChangedNotifier as be, useQuaternionProperty as bf, useResource as bg, useSetting as bh, useTheme as bi, useThemeMode as bj, useVector3Property as bk, ShellServiceIdentity as c, SceneContextIdentity as d, SelectionServiceIdentity as e, useObservableState as f, AccordionSection as g, ButtonLine as h, ToolsServiceIdentity as i, useExtensionManager as j, Link as k, AccordionSectionItem as l, AttachDebugLayer as m, BooleanBadgePropertyLine as n, BoundProperty as o, BuiltInsExtensionFeed as p, Checkbox as q, ChildWindow as r, Collapse as s, Color3GradientComponent as t, useToast as u, Color3GradientList as v, Color3PropertyLine as w, Color4GradientComponent as x, Color4GradientList as y, Color4PropertyLine as z };
+//# sourceMappingURL=index-CjZdtI-w.js.map