@babylonjs/inspector 8.45.3-preview → 8.45.4-preview

package/lib/{index-D450kD0o.js → index-upm3WBf8.js}

@@ -3,8 +3,8 @@ import { createContext, useContext, useCallback, useMemo, useEffect, useState, u
 import { Color3, Color4 } from '@babylonjs/core/Maths/math.color.js';
 import { Vector3, Quaternion, Matrix, Vector2, Vector4, TmpVectors } from '@babylonjs/core/Maths/math.vector.js';
 import { Observable } from '@babylonjs/core/Misc/observable.js';
-import { makeStyles, Link as Link$1, Body1, ToggleButton as ToggleButton$1, Button as Button$1, tokens, InfoLabel as InfoLabel$1, Body1Strong, Tooltip, Checkbox as Checkbox$1, mergeClasses, Accordion as Accordion$1, AccordionItem, AccordionHeader, Subtitle2Stronger, AccordionPanel, Divider, createLightTheme, createDarkTheme, FluentProvider, TeachingPopover, TeachingPopoverSurface, TeachingPopoverHeader, TeachingPopoverBody, Portal, RendererProvider, createDOMRenderer, Menu, MenuTrigger, SplitButton, MenuPopover, MenuList, MenuItem, Toolbar as Toolbar$1, ToolbarRadioButton, MenuGroup, MenuGroupHeader, SearchBox as SearchBox$1, FlatTree, FlatTreeItem, TreeItemLayout, MenuDivider, treeItemLevelToken, MenuItemCheckbox, Switch as Switch$1, PresenceBadge, useId, SpinButton as SpinButton$1, Slider, Input, Dropdown as Dropdown$1, Option, Popover as Popover$1, PopoverTrigger, PopoverSurface, ColorPicker, ColorArea, ColorSlider, AlphaSlider, ColorSwatch, MenuItemRadio, Dialog, DialogSurface, DialogBody, DialogTitle, DialogContent, DialogActions, List as List$1, ListItem, Spinner, Badge, MessageBar as MessageBar$1, MessageBarBody, MessageBarTitle, useComboboxFilter, Combobox, Textarea as Textarea$1, ToolbarButton, Label, ToolbarDivider, Field } from '@fluentui/react-components';
-import { ChevronCircleRight16Regular, ChevronCircleRight20Regular, ChevronCircleDown16Regular, ChevronCircleDown20Regular, Copy16Regular, Copy20Regular, PanelLeftExpandRegular, PanelRightExpandRegular, PanelLeftContractRegular, PanelRightContractRegular, PictureInPictureEnterRegular, MoreHorizontalRegular, LayoutColumnTwoFocusLeftFilled, LayoutColumnTwoSplitLeftFocusTopLeftFilled, LayoutColumnTwoSplitLeftFocusBottomLeftFilled, LayoutColumnTwoFocusRightFilled, LayoutColumnTwoSplitRightFocusTopRightFilled, LayoutColumnTwoSplitRightFocusBottomRightFilled, DocumentTextRegular, createFluentIcon, FilterRegular, GlobeRegular, ArrowExpandAllRegular, ArrowCollapseAllRegular, CubeTreeRegular, BugRegular, SettingsRegular, ArrowUploadRegular, DataBarHorizontalRegular, WrenchRegular, WeatherSunnyRegular, WeatherMoonRegular, ErrorCircleRegular, ArrowRotateClockwiseRegular, ArrowExpandRegular, SelectObjectRegular, CubeRegular, LinkDismissRegular, LinkEditRegular, SaveRegular, ArrowUndoRegular, BracesRegular, BracesDismiss16Regular, CopyRegular, DeleteRegular, EyeOffFilled, EyeFilled, ArrowMoveFilled, StopFilled, PlayFilled, EyeRegular, EyeOffRegular, LockOpenRegular, LockClosedRegular, ResizeRegular, ChevronUpRegular, ChevronDownRegular, ArrowResetRegular, CircleHalfFillRegular, EyedropperRegular, PaintBucketRegular, InkStrokeRegular, StackRegular, FilmstripRegular, PauseFilled, WeatherSunnyLowFilled, LayerRegular, FrameRegular, PlayRegular, AppGenericRegular, MyLocationRegular, CameraRegular, LightbulbRegular, BorderOutsideRegular, BorderNoneRegular, VideoFilled, VideoRegular, FlashlightRegular, FlashlightOffRegular, DropRegular, BlurRegular, PipelineRegular, PersonWalkingRegular, DataLineRegular, PersonSquareRegular, LayerDiagonalPersonRegular, ImageEditRegular, ImageRegular, TargetRegular, PersonFeedbackRegular, BranchRegular, DeleteFilled } from '@fluentui/react-icons';
+import { makeStyles, Link as Link$1, Caption1, Body1, ToggleButton as ToggleButton$1, Button as Button$1, Spinner, tokens, InfoLabel as InfoLabel$1, Body1Strong, Tooltip, Checkbox as Checkbox$1, mergeClasses, Accordion as Accordion$1, AccordionItem, AccordionHeader, Subtitle2Stronger, AccordionPanel, Divider, createLightTheme, createDarkTheme, FluentProvider, TeachingPopover, TeachingPopoverSurface, TeachingPopoverHeader, TeachingPopoverBody, Portal, RendererProvider, createDOMRenderer, Menu, MenuTrigger, SplitButton, MenuPopover, MenuList, MenuItem, Toolbar as Toolbar$1, ToolbarRadioButton, MenuGroup, MenuGroupHeader, SearchBox as SearchBox$1, FlatTree, FlatTreeItem, TreeItemLayout, MenuDivider, treeItemLevelToken, MenuItemCheckbox, Switch as Switch$1, PresenceBadge, useId, SpinButton as SpinButton$1, Slider, Input, Dropdown as Dropdown$1, Option, Popover as Popover$1, PopoverTrigger, PopoverSurface, ColorPicker, ColorArea, ColorSlider, AlphaSlider, ColorSwatch, MenuItemRadio, Dialog, DialogSurface, DialogBody, DialogTitle, DialogContent, DialogActions, List as List$1, ListItem, Badge, MessageBar as MessageBar$1, MessageBarBody, MessageBarTitle, useComboboxFilter, Combobox, Textarea as Textarea$1, ToolbarButton, Label, ToolbarDivider, Field } from '@fluentui/react-components';
+import { ChevronCircleRight16Regular, ChevronCircleRight20Regular, ChevronCircleDown16Regular, ChevronCircleDown20Regular, Copy16Regular, Copy20Regular, PanelLeftExpandRegular, PanelRightExpandRegular, PanelLeftContractRegular, PanelRightContractRegular, PictureInPictureEnterRegular, MoreHorizontalRegular, LayoutColumnTwoFocusLeftFilled, LayoutColumnTwoSplitLeftFocusTopLeftFilled, LayoutColumnTwoSplitLeftFocusBottomLeftFilled, LayoutColumnTwoFocusRightFilled, LayoutColumnTwoSplitRightFocusTopRightFilled, LayoutColumnTwoSplitRightFocusBottomRightFilled, DocumentTextRegular, createFluentIcon, FilterRegular, GlobeRegular, ArrowExpandAllRegular, ArrowCollapseAllRegular, CubeTreeRegular, BugRegular, SettingsRegular, ArrowUploadRegular, DataBarHorizontalRegular, WrenchRegular, WeatherSunnyRegular, WeatherMoonRegular, ErrorCircleRegular, ArrowRotateClockwiseRegular, ArrowExpandRegular, SelectObjectRegular, CubeRegular, DeleteRegular, PlayRegular, EditRegular, LinkDismissRegular, LinkEditRegular, SaveRegular, ArrowUndoRegular, BracesRegular, BracesDismiss16Regular, CopyRegular, EyeOffFilled, EyeFilled, ArrowMoveFilled, EyeRegular, StopRegular, ArrowDownloadRegular, CloudArrowUpRegular, CloudArrowDownRegular, StopFilled, PlayFilled, EyeOffRegular, LockOpenRegular, LockClosedRegular, ResizeRegular, ChevronUpRegular, ChevronDownRegular, ArrowResetRegular, CircleHalfFillRegular, EyedropperRegular, PaintBucketRegular, InkStrokeRegular, StackRegular, FilmstripRegular, PauseFilled, WeatherSunnyLowFilled, LayerRegular, FrameRegular, AppGenericRegular, MyLocationRegular, CameraRegular, LightbulbRegular, BorderOutsideRegular, BorderNoneRegular, VideoFilled, VideoRegular, FlashlightRegular, FlashlightOffRegular, DropRegular, BlurRegular, PipelineRegular, PersonWalkingRegular, DataLineRegular, PersonSquareRegular, LayerDiagonalPersonRegular, ImageEditRegular, ImageRegular, TargetRegular, PersonFeedbackRegular, BranchRegular, DeleteFilled } from '@fluentui/react-icons';
 import { Collapse as Collapse$1, Fade } from '@fluentui/react-motion-components-preview';
 import '@babylonjs/core/Misc/typeStore.js';
 import { useLocalStorage, useTernaryDarkMode } from 'usehooks-ts';
@@ -59,18 +59,21 @@ import { RectAreaLight } from '@babylonjs/core/Lights/rectAreaLight.js';
 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 { ShadowGenerator } from '@babylonjs/core/Lights/Shadows/shadowGenerator.js';
 import '@babylonjs/core/Lights/Shadows/shadowGeneratorSceneComponent.js';
 import { Material } from '@babylonjs/core/Materials/material.js';
 import { MultiMaterial } from '@babylonjs/core/Materials/multiMaterial.js';
-import { PBRBaseMaterial } from '@babylonjs/core/Materials/PBR/pbrBaseMaterial.js';
+import { NodeMaterial } from '@babylonjs/core/Materials/Node/nodeMaterial.js';
 import { OpenPBRMaterial } from '@babylonjs/core/Materials/PBR/openpbrMaterial.js';
+import { PBRBaseMaterial } from '@babylonjs/core/Materials/PBR/pbrBaseMaterial.js';
 import { SkyMaterial } from '@babylonjs/materials/sky/skyMaterial.js';
 import { Constants } from '@babylonjs/core/Engines/constants.js';
 import { Engine } from '@babylonjs/core/Engines/engine.js';
 import { ParticleSystem } from '@babylonjs/core/Particles/particleSystem.js';
-import { CubeTexture } from '@babylonjs/core/Materials/Textures/cubeTexture.js';
 import { ReadFile } from '@babylonjs/core/Misc/fileTools.js';
+import { CubeTexture } from '@babylonjs/core/Materials/Textures/cubeTexture.js';
+import { GaussianSplattingMesh } from '@babylonjs/core/Meshes/GaussianSplatting/gaussianSplattingMesh.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';
@@ -79,7 +82,6 @@ import { InstancedMesh } from '@babylonjs/core/Meshes/instancedMesh.js';
 import { RenderingManager } from '@babylonjs/core/Rendering/renderingManager.js';
 import '@babylonjs/core/Rendering/edgesRenderer.js';
 import '@babylonjs/core/Rendering/outlineRenderer.js';
-import { GaussianSplattingMesh } from '@babylonjs/core/Meshes/GaussianSplatting/gaussianSplattingMesh.js';
 import { BoxParticleEmitter } from '@babylonjs/core/Particles/EmitterTypes/boxParticleEmitter.js';
 import { ConeParticleEmitter } from '@babylonjs/core/Particles/EmitterTypes/coneParticleEmitter.js';
 import { CylinderParticleEmitter } from '@babylonjs/core/Particles/EmitterTypes/cylinderParticleEmitter.js';
@@ -87,6 +89,7 @@ import { HemisphericParticleEmitter } from '@babylonjs/core/Particles/EmitterTyp
 import { MeshParticleEmitter } from '@babylonjs/core/Particles/EmitterTypes/meshParticleEmitter.js';
 import { PointParticleEmitter } from '@babylonjs/core/Particles/EmitterTypes/pointParticleEmitter.js';
 import { SphereParticleEmitter } from '@babylonjs/core/Particles/EmitterTypes/sphereParticleEmitter.js';
+import { ConvertToNodeParticleSystemSetAsync } from '@babylonjs/core/Particles/Node/nodeParticleSystemSet.helper.js';
 import { ParticleHelper } from '@babylonjs/core/Particles/particleHelper.js';
 import { FactorGradient, Color3Gradient, ColorGradient } from '@babylonjs/core/Misc/gradients.js';
 import { GradientBlockColorStep } from '@babylonjs/core/Materials/Node/Blocks/gradientBlock.js';
@@ -673,8 +676,11 @@ function copyCommandToClipboard(strCommand) {
 const ToolContext = createContext({ useFluent: false, disableCopy: false, toolName: "", size: undefined });
 
 const Link = forwardRef((props, ref) => {
+    const { size } = useContext(ToolContext);
     const { target, url, onLink, ...rest } = props;
-    return (jsxs(Link$1, { ref: ref, inline: true, target: target === "current" ? "_self" : "_blank", rel: "noopener noreferrer", href: url, onClick: onLink ?? undefined, ...rest, children: [props.children, jsx(Body1, { wrap: false, truncate: true, children: props.value })] }));
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    const TextComponent = size === "small" ? Caption1 : Body1;
+    return (jsxs(Link$1, { ref: ref, inline: true, target: target === "current" ? "_self" : "_blank", rel: "noopener noreferrer", href: url, onClick: onLink ?? undefined, ...rest, children: [props.children, jsx(TextComponent, { children: props.value })] }));
 });
 Link.displayName = "Link";
 
@@ -714,8 +720,21 @@ const ToggleButton = (props) => {
 const Button = forwardRef((props, ref) => {
     const { size } = useContext(ToolContext);
     // eslint-disable-next-line @typescript-eslint/naming-convention
-    const { icon: Icon, label, ...buttonProps } = props;
-    return (jsx(Button$1, { ref: ref, iconPosition: "after", ...buttonProps, size: size, icon: Icon && jsx(Icon, {}), children: label && props.label }));
+    const { icon: Icon, label, onClick, disabled, ...buttonProps } = props;
+    const [isOnClickBusy, setIsOnClickBusy] = useState(false);
+    const handleOnClick = useCallback(async (e) => {
+        const result = onClick?.();
+        if (result instanceof Promise) {
+            setIsOnClickBusy(true);
+            try {
+                await result;
+            }
+            finally {
+                setIsOnClickBusy(false);
+            }
+        }
+    }, [onClick]);
+    return (jsx(Button$1, { ref: ref, iconPosition: "after", ...buttonProps, size: size, icon: isOnClickBusy ? jsx(Spinner, { size: "extra-tiny" }) : Icon && jsx(Icon, {}), onClick: handleOnClick, disabled: disabled || isOnClickBusy, children: label && props.label }));
 });
 Button.displayName = "Button";
 
@@ -788,6 +807,33 @@ function ValidateColorHex(val) {
     return val != "" && HEX_REGEX.test(val);
 }
 
+const useInfoLabelStyles = makeStyles({
+    infoPopup: {
+        whiteSpace: "normal",
+        wordBreak: "break-word",
+    },
+    labelSlot: {
+        display: "flex",
+        minWidth: 0,
+    },
+    labelText: {
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+    },
+});
+/**
+ * Renders a label with an optional popup containing more info
+ * @param props
+ * @returns
+ */
+const InfoLabel = (props) => {
+    InfoLabel.displayName = "InfoLabel";
+    const classes = useInfoLabelStyles();
+    const infoContent = props.info ? jsx("div", { className: classes.infoPopup, children: props.info }) : undefined;
+    return infoContent ? (jsx(InfoLabel$1, { htmlFor: props.htmlFor, info: infoContent, className: props.className, label: props.flexLabel ? { className: classes.labelSlot } : undefined, children: jsx(Body1Strong, { className: classes.labelText, children: props.label }) })) : (jsx(Body1Strong, { className: props.className, children: props.label }));
+};
+
 const usePropertyLineStyles = makeStyles({
     baseLine: {
         display: "flex",
@@ -801,15 +847,6 @@ const usePropertyLineStyles = makeStyles({
         minWidth: CustomTokens.labelMinWidth,
         textAlign: "left",
     },
-    labelSlot: {
-        display: "flex",
-        minWidth: 0,
-    },
-    labelText: {
-        whiteSpace: "nowrap",
-        overflow: "hidden",
-        textOverflow: "ellipsis",
-    },
     rightContent: {
         flex: "0 1 auto",
         minWidth: 0,
@@ -853,7 +890,7 @@ const PropertyLine = forwardRef((props, ref) => {
     const { label, onCopy, expandedContent, children, nullable, ignoreNullable } = props;
     const [expanded, setExpanded] = useState("expandByDefault" in props ? props.expandByDefault : false);
     const cachedVal = useRef(nullable ? props.value : null);
-    const description = props.docLink ? jsx(Link, { url: props.docLink, value: props.description ?? "Docs" }) : props.description;
+    const description = props.docLink ? jsx(Link, { url: props.docLink, value: props.description ?? "Docs" }) : props.description ? jsx(Body1, { children: props.description }) : undefined;
     // Process children to handle nullable state -- creating component in disabled state with default value in lieu of null value
     const processedChildren = (nullable || ignoreNullable) && isValidElement(children)
         ? cloneElement(children, {
@@ -863,7 +900,7 @@ const PropertyLine = forwardRef((props, ref) => {
             defaultValue: undefined, // Don't pass defaultValue to children as there is no guarantee how this will be used and we can't mix controlled + uncontrolled state
         })
         : children;
-    return (jsxs(LineContainer, { ref: ref, children: [jsxs("div", { className: classes.baseLine, children: [jsx(InfoLabel$1, { size: size, className: classes.infoLabel, label: { className: classes.labelSlot }, info: description ? jsx("div", { className: classes.infoPopup, children: description }) : undefined, title: label, children: jsx(Body1Strong, { className: classes.labelText, children: label }) }), jsxs("div", { className: classes.rightContent, children: [expandedContent && (jsx(ToggleButton, { title: "Expand/Collapse property", appearance: "transparent", checkedIcon: size === "small" ? ChevronCircleDown16Regular : ChevronCircleDown20Regular, uncheckedIcon: size === "small" ? ChevronCircleRight16Regular : ChevronCircleRight20Regular, value: expanded === true, onChange: setExpanded })), nullable && !ignoreNullable && (
+    return (jsxs(LineContainer, { ref: ref, children: [jsxs("div", { className: classes.baseLine, children: [jsx(InfoLabel, { className: classes.infoLabel, htmlFor: "property", info: description, label: label, flexLabel: true }), jsxs("div", { className: classes.rightContent, id: "property", children: [expandedContent && (jsx(ToggleButton, { title: "Expand/Collapse property", appearance: "transparent", checkedIcon: size === "small" ? ChevronCircleDown16Regular : ChevronCircleDown20Regular, uncheckedIcon: size === "small" ? ChevronCircleRight16Regular : ChevronCircleRight20Regular, value: expanded === true, onChange: setExpanded })), nullable && !ignoreNullable && (
                             // If this is a nullableProperty and ignoreNullable was not sent, display a checkbox used to toggle null ('checked' means 'non null')
                             jsx(Tooltip, { relationship: "label", content: props.value == null ? "Enable property" : "Disable property (set to null)", children: jsx(Checkbox$1, { className: classes.checkbox, checked: !(props.value == null), onChange: (_, data) => {
                                         if (data.checked) {
@@ -3315,7 +3352,7 @@ const DebugPane = (props) => {
             SwitchGrid(scene);
         }
     });
-    return (jsxs(ExtensibleAccordion, { ...props, children: [jsxs(AccordionSection, { title: "Helpers", children: [jsx(SwitchPropertyLine, { label: "Grid", description: "Display a ground grid.", value: !!scene.reservedDataStore.gridMesh, onChange: () => SwitchGrid(scene) }), jsx(SwitchPropertyLine, { label: "Physics", description: "Display physic debug info.", value: !!scene.reservedDataStore.physicsViewer, onChange: () => SwitchPhysicsViewers(scene) }), jsx(SwitchPropertyLine, { label: "Names", description: "Display mesh names.", value: !!scene.reservedDataStore.textRenderersHook, onChange: () => void SwitchNameViewerAsync(scene) })] }), jsxs(AccordionSection, { title: "Texture Channels", children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Diffuse", target: StandardMaterial, propertyKey: "DiffuseTextureEnabled" }, "Diffuse"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Ambient", target: StandardMaterial, propertyKey: "AmbientTextureEnabled" }, "Ambient"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Specular", target: StandardMaterial, propertyKey: "SpecularTextureEnabled" }, "Specular"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Emissive", target: StandardMaterial, propertyKey: "EmissiveTextureEnabled" }, "Emissive"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Bump", target: StandardMaterial, propertyKey: "BumpTextureEnabled" }, "Bump"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Opacity", target: StandardMaterial, propertyKey: "OpacityTextureEnabled" }, "Opacity"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Reflection", target: StandardMaterial, propertyKey: "ReflectionTextureEnabled" }, "Reflection"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Color Grading", target: StandardMaterial, propertyKey: "ColorGradingTextureEnabled" }, "ColorGrading"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Lightmap", target: StandardMaterial, propertyKey: "LightmapTextureEnabled" }, "Lightmap"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Fresnel", target: StandardMaterial, propertyKey: "FresnelEnabled" }, "Fresnel"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Detail", target: MaterialFlags, propertyKey: "DetailTextureEnabled" }, "Detail"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Decal", target: MaterialFlags, propertyKey: "DecalMapEnabled" }, "Decal")] }), jsxs(AccordionSection, { title: "Features", children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Animations", target: scene, propertyKey: "animationsEnabled" }, "Animations"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Physics", target: scene, propertyKey: "physicsEnabled" }, "Physics"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Collisions", target: scene, propertyKey: "collisionsEnabled" }, "Collisions"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Fog", target: scene, propertyKey: "fogEnabled" }, "Fog"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Lens Flares", target: scene, propertyKey: "lensFlaresEnabled" }, "Lens flares"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Lights", target: scene, propertyKey: "lightsEnabled" }, "Lights"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Particles", target: scene, propertyKey: "particlesEnabled" }, "Particles"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Post-processes", target: scene, propertyKey: "postProcessesEnabled" }, "Post-processes"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Probes", target: scene, propertyKey: "probesEnabled" }, "Probes"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Textures", target: scene, propertyKey: "texturesEnabled" }, "Textures"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Procedural Textures", target: scene, propertyKey: "proceduralTexturesEnabled" }, "Procedural textures"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Render Targets", target: scene, propertyKey: "renderTargetsEnabled" }, "Render targets"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Shadows", target: scene, propertyKey: "shadowsEnabled" }, "Shadows"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Skeletons", target: scene, propertyKey: "skeletonsEnabled" }, "Skeletons"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Sprites", target: scene, propertyKey: "spritesEnabled" }, "Sprites")] })] }));
+    return (jsxs(ExtensibleAccordion, { ...props, children: [jsxs(AccordionSection, { title: "Helpers", children: [jsx(SwitchPropertyLine, { label: "Grid", description: "Display a ground grid.", value: !!scene.reservedDataStore.gridMesh, onChange: () => SwitchGrid(scene) }), jsx(SwitchPropertyLine, { label: "Physics", description: "Display physic debug info.", value: !!scene.reservedDataStore.physicsViewer, onChange: () => SwitchPhysicsViewers(scene) }), jsx(SwitchPropertyLine, { label: "Names", description: "Display mesh names.", value: !!scene.reservedDataStore.textRenderersHook, onChange: () => void SwitchNameViewerAsync(scene) })] }), jsxs(AccordionSection, { title: "Texture Channels", children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Diffuse", target: StandardMaterial, propertyKey: "DiffuseTextureEnabled" }, "Diffuse"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Ambient", target: StandardMaterial, propertyKey: "AmbientTextureEnabled" }, "Ambient"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Specular", target: StandardMaterial, propertyKey: "SpecularTextureEnabled" }, "Specular"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Emissive", target: StandardMaterial, propertyKey: "EmissiveTextureEnabled" }, "Emissive"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Bump", target: StandardMaterial, propertyKey: "BumpTextureEnabled" }, "Bump"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Opacity", target: StandardMaterial, propertyKey: "OpacityTextureEnabled" }, "Opacity"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Reflection", target: StandardMaterial, propertyKey: "ReflectionTextureEnabled" }, "Reflection"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Refraction", target: StandardMaterial, propertyKey: "RefractionTextureEnabled" }, "Refraction"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Color Grading", target: StandardMaterial, propertyKey: "ColorGradingTextureEnabled" }, "ColorGrading"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Lightmap", target: StandardMaterial, propertyKey: "LightmapTextureEnabled" }, "Lightmap"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Fresnel", target: StandardMaterial, propertyKey: "FresnelEnabled" }, "Fresnel"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Detail", target: MaterialFlags, propertyKey: "DetailTextureEnabled" }, "Detail"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Decal", target: MaterialFlags, propertyKey: "DecalMapEnabled" }, "Decal")] }), jsxs(AccordionSection, { title: "Features", children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Animations", target: scene, propertyKey: "animationsEnabled" }, "Animations"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Physics", target: scene, propertyKey: "physicsEnabled" }, "Physics"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Collisions", target: scene, propertyKey: "collisionsEnabled" }, "Collisions"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Fog", target: scene, propertyKey: "fogEnabled" }, "Fog"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Lens Flares", target: scene, propertyKey: "lensFlaresEnabled" }, "Lens flares"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Lights", target: scene, propertyKey: "lightsEnabled" }, "Lights"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Particles", target: scene, propertyKey: "particlesEnabled" }, "Particles"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Post-processes", target: scene, propertyKey: "postProcessesEnabled" }, "Post-processes"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Probes", target: scene, propertyKey: "probesEnabled" }, "Probes"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Textures", target: scene, propertyKey: "texturesEnabled" }, "Textures"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Procedural Textures", target: scene, propertyKey: "proceduralTexturesEnabled" }, "Procedural textures"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Render Targets", target: scene, propertyKey: "renderTargetsEnabled" }, "Render targets"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Shadows", target: scene, propertyKey: "shadowsEnabled" }, "Shadows"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Skeletons", target: scene, propertyKey: "skeletonsEnabled" }, "Skeletons"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Sprites", target: scene, propertyKey: "spritesEnabled" }, "Sprites")] })] }));
 };
 
 const DebugServiceIdentity = Symbol("DebugService");
@@ -3368,6 +3405,7 @@ const SettingsServiceDefinition = {
         const sectionsCollection = new ObservableCollection();
         const sectionContentCollection = new ObservableCollection();
         let useDegrees = DataStorage.ReadBoolean("Babylon/Settings/UseDegrees", false);
+        let useEuler = DataStorage.ReadBoolean("Babylon/Settings/UseEuler", false);
         let ignoreBackfacesForPicking = DataStorage.ReadBoolean("Babylon/Settings/IgnoreBackfacesForPicking", false);
         let showPropertiesOnEntitySelection = DataStorage.ReadBoolean("Babylon/Settings/ShowPropertiesOnEntitySelection", true);
         const settings = {
@@ -3393,6 +3431,17 @@ const SettingsServiceDefinition = {
                 DataStorage.WriteBoolean("Babylon/Settings/IgnoreBackfacesForPicking", ignoreBackfacesForPicking);
                 this.settingsChangedObservable.notifyObservers(this);
             },
+            get useEuler() {
+                return useEuler;
+            },
+            set useEuler(value) {
+                if (useEuler === value) {
+                    return; // No change, no need to notify
+                }
+                useEuler = value;
+                DataStorage.WriteBoolean("Babylon/Settings/UseEuler", useEuler);
+                this.settingsChangedObservable.notifyObservers(this);
+            },
             get showPropertiesOnEntitySelection() {
                 return showPropertiesOnEntitySelection;
             },
@@ -3427,6 +3476,8 @@ const SettingsServiceDefinition = {
                                         setCompactMode(checked);
                                     } }), jsx(SwitchPropertyLine, { label: "Use Degrees", description: "Using degrees instead of radians.", value: settings.useDegrees, onChange: (checked) => {
                                         settings.useDegrees = checked;
+                                    } }), jsx(SwitchPropertyLine, { label: "Only Show Euler Angles", description: "Only show Euler angles in rotation properties, rather than quaternions.", value: settings.useEuler, onChange: (checked) => {
+                                        settings.useEuler = checked;
                                     } }), jsx(SwitchPropertyLine, { label: "Ignore Backfaces for Picking", description: "Ignore backfaces when picking.", value: settings.ignoreBackfacesForPicking, onChange: (checked) => {
                                         settings.ignoreBackfacesForPicking = checked;
                                     } }), jsx(SwitchPropertyLine, { label: "Show Properties on Selection", description: "Shows the Properties pane when an entity is selected.", value: settings.showPropertiesOnEntitySelection, onChange: (checked) => {
@@ -3503,7 +3554,7 @@ const FrameStepsStats = ({ context: scene }) => {
     const interFrameTime = useObservableState(() => sceneInstrumentation.interFrameTimeCounter.lastSecAverage, pollingObservable);
     const gpuFrameTime = useObservableState(() => engineInstrumentation.gpuFrameTimeCounter.lastSecAverage * 0.000001, pollingObservable);
     const gpuFrameTimeAverage = useObservableState(() => engineInstrumentation.gpuFrameTimeCounter.average * 0.000001, pollingObservable);
-    return (jsxs(Fragment, { children: [jsx(StringifiedPropertyLine, { label: "Absolute FPS", value: absoluteFPS }, "AbsoluteFPS"), jsx(StringifiedPropertyLine, { label: "Meshes Selection", value: meshesSelection, precision: 2, units: "ms" }, "MeshesSelection"), jsx(StringifiedPropertyLine, { label: "Render Targets", value: renderTargets, precision: 2, units: "ms" }, "RenderTargets"), jsx(StringifiedPropertyLine, { label: "Particles", value: particles, precision: 2, units: "ms" }, "Particles"), jsx(StringifiedPropertyLine, { label: "Sprites", value: sprites, precision: 2, units: "ms" }, "Sprites"), jsx(StringifiedPropertyLine, { label: "Animations", value: animations, precision: 2, units: "ms" }, "Animations"), jsx(StringifiedPropertyLine, { label: "Physics", value: physics, precision: 2, units: "ms" }, "Physics"), jsx(StringifiedPropertyLine, { label: "Inter-Frame Time", value: interFrameTime, precision: 2, units: "ms" }, "InterFrameTime"), jsx(StringifiedPropertyLine, { label: "GPU Frame Time", value: gpuFrameTime, precision: 2, units: "ms" }, "GPUFrameTime"), jsx(StringifiedPropertyLine, { label: "GPU Frame Time (Average)", value: gpuFrameTimeAverage, precision: 2, units: "ms" }, "GPUFrameTimeAverage")] }));
+    return (jsxs(Fragment, { children: [jsx(StringifiedPropertyLine, { label: "Absolute FPS", value: absoluteFPS }, "AbsoluteFPS"), jsx(StringifiedPropertyLine, { label: "Meshes Selection", value: meshesSelection, precision: 2, units: "ms" }, "MeshesSelection"), jsx(StringifiedPropertyLine, { label: "Render Targets", value: renderTargets, precision: 2, units: "ms" }, "RenderTargets"), jsx(StringifiedPropertyLine, { label: "Particles", value: particles, precision: 2, units: "ms" }, "Particles"), jsx(StringifiedPropertyLine, { label: "Sprites", value: sprites, precision: 2, units: "ms" }, "Sprites"), jsx(StringifiedPropertyLine, { label: "Animations", value: animations, precision: 2, units: "ms" }, "Animations"), jsx(StringifiedPropertyLine, { label: "Physics", value: physics, precision: 2, units: "ms" }, "Physics"), jsx(StringifiedPropertyLine, { label: "Render", value: sceneInstrumentation.renderTimeCounter.lastSecAverage, precision: 2, units: "ms" }, "Render"), jsx(StringifiedPropertyLine, { label: "Frame", value: sceneInstrumentation.frameTimeCounter.lastSecAverage, precision: 2, units: "ms" }, "Frame"), jsx(StringifiedPropertyLine, { label: "Inter-Frame Time", value: interFrameTime, precision: 2, units: "ms" }, "InterFrameTime"), jsx(StringifiedPropertyLine, { label: "GPU Frame Time", value: gpuFrameTime, precision: 2, units: "ms" }, "GPUFrameTime"), jsx(StringifiedPropertyLine, { label: "GPU Frame Time (Average)", value: gpuFrameTimeAverage, precision: 2, units: "ms" }, "GPUFrameTimeAverage")] }));
 };
 
 /**
@@ -3837,7 +3888,7 @@ const DefaultInspectorExtensionFeed = new BuiltInsExtensionFeed("Inspector", [
         keywords: ["export", "gltf", "glb", "babylon", "exporter", "tools"],
         ...BabylonWebResources,
         author: { name: "Alex Chuber", forumUserName: "alexchuber" },
-        getExtensionModuleAsync: async () => await import('./exportService-CnPFMXUA.js'),
+        getExtensionModuleAsync: async () => await import('./exportService-D19rsLCQ.js'),
     },
     {
         name: "Capture Tools",
@@ -3845,7 +3896,7 @@ const DefaultInspectorExtensionFeed = new BuiltInsExtensionFeed("Inspector", [
         keywords: ["capture", "screenshot", "gif", "video", "tools"],
         ...BabylonWebResources,
         author: { name: "Alex Chuber", forumUserName: "alexchuber" },
-        getExtensionModuleAsync: async () => await import('./captureService-BDZ64ZKE.js'),
+        getExtensionModuleAsync: async () => await import('./captureService-C4KzF-3L.js'),
     },
     {
         name: "Import Tools",
@@ -3853,7 +3904,7 @@ const DefaultInspectorExtensionFeed = new BuiltInsExtensionFeed("Inspector", [
         keywords: ["import", "tools"],
         ...BabylonWebResources,
         author: { name: "Alex Chuber", forumUserName: "alexchuber" },
-        getExtensionModuleAsync: async () => await import('./importService-e9XEtGfl.js'),
+        getExtensionModuleAsync: async () => await import('./importService-xoACJHME.js'),
     },
     {
         name: "Quick Creation Tools (Preview)",
@@ -3861,20 +3912,10 @@ const DefaultInspectorExtensionFeed = new BuiltInsExtensionFeed("Inspector", [
         keywords: ["creation", "tools"],
         ...BabylonWebResources,
         author: { name: "Babylon.js", forumUserName: "" },
-        getExtensionModuleAsync: async () => await import('./quickCreateToolsService-gqXZXpNH.js'),
+        getExtensionModuleAsync: async () => await import('./quickCreateToolsService-ROfMXsQm.js'),
     },
 ]);
 
-/**
- * Renders a label with an optional popup containing more info
- * @param props
- * @returns
- */
-const InfoLabel = (props) => {
-    InfoLabel.displayName = "InfoLabel";
-    return (jsx(InfoLabel$1, { htmlFor: props.htmlFor, info: props.info, children: jsx(Body1, { children: props.label }) }));
-};
-
 const SpinButton = (props) => {
     SpinButton.displayName = "SpinButton";
     const classes = useInputStyles$1();
@@ -4405,7 +4446,7 @@ const QuaternionPropertyLine = (props) => {
         setQuat(props.value);
     }, [props.value]);
     // Extract only the properties that exist on QuaternionPropertyLineProps
-    const { useDegrees, ...restProps } = props;
+    const { useEuler, ...restProps } = props;
     const onQuatChange = (val) => {
         setQuat(val);
         props.onChange(val);
@@ -4414,7 +4455,7 @@ const QuaternionPropertyLine = (props) => {
         const quat = Quaternion.FromEulerAngles(val.x, val.y, val.z);
         onQuatChange(quat);
     };
-    return useDegrees ? (jsx(Vector3PropertyLine, { ...restProps, nullable: false, ignoreNullable: false, value: quat.toEulerAngles(), valueConverter: ToDegreesConverter, min: min, max: max, onChange: onEulerChange, unit: "deg" })) : (jsx(QuaternionPropertyLineInternal, { ...props, nullable: false, value: quat, min: min, max: max, onChange: onQuatChange }));
+    return useEuler ? (jsx(Vector3PropertyLine, { ...restProps, nullable: false, ignoreNullable: false, value: quat.toEulerAngles(), valueConverter: ToDegreesConverter, min: min, max: max, onChange: onEulerChange, unit: props.useDegrees ? "deg" : "rad" })) : (jsx(QuaternionPropertyLineInternal, { ...props, nullable: false, value: quat, min: min, max: max, onChange: onQuatChange, unit: props.useDegrees ? "deg" : "rad" }));
 };
 const Vector2PropertyLine = TensorPropertyLine;
 const Vector3PropertyLine = TensorPropertyLine;
@@ -5003,7 +5044,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-CN7-7Dna.js');
+                    const { ExtensionListServiceDefinition } = await import('./extensionsListService-BPIryMmP.js');
                     await serviceContainer.addServiceAsync(ExtensionListServiceDefinition);
                 }
                 // Register the theme selector service (for selecting the theme) if theming is configured.
@@ -5700,10 +5741,11 @@ const FollowCameraLimitsProperties = (props) => {
 const FreeCameraTransformProperties = (props) => {
     const { camera, settings } = props;
     const useDegrees = useObservableState(() => settings.useDegrees, settings.settingsChangedObservable);
+    const useEuler = useObservableState(() => settings.useEuler, settings.settingsChangedObservable);
     const position = useProperty(camera, "position");
     const rotation = useProperty(camera, "rotation");
     const quatRotation = useProperty(camera, "rotationQuaternion");
-    return (jsxs(Fragment, { children: [jsx(Vector3PropertyLine, { label: "Position", value: position, onChange: (value) => (camera.position = value) }), quatRotation ? (jsx(QuaternionPropertyLine, { label: "Rotation (Quat)", value: quatRotation, onChange: (val) => (camera.rotationQuaternion = val), useDegrees: useDegrees }, "QuaternionRotationTransform")) : (jsx(RotationVectorPropertyLine, { label: "Rotation", value: rotation, onChange: (val) => (camera.rotation = val), useDegrees: useDegrees }, "RotationTransform"))] }));
+    return (jsxs(Fragment, { children: [jsx(Vector3PropertyLine, { label: "Position", value: position, onChange: (value) => (camera.position = value) }), quatRotation ? (jsx(QuaternionPropertyLine, { label: "Rotation (Quat)", value: quatRotation, onChange: (val) => (camera.rotationQuaternion = val), useDegrees: useDegrees, useEuler: useEuler }, "QuaternionRotationTransform")) : (jsx(RotationVectorPropertyLine, { label: "Rotation", value: rotation, onChange: (val) => (camera.rotation = val), useDegrees: useDegrees }, "RotationTransform"))] }));
 };
 const FreeCameraControlProperties = (props) => {
     const { camera } = props;
@@ -5713,7 +5755,7 @@ const FreeCameraCollisionProperties = (props) => {
     const { camera } = props;
     const ellipsoid = useProperty(camera, "ellipsoid");
     const ellipsoidOffset = useProperty(camera, "ellipsoidOffset");
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Check Collisions", target: camera, propertyKey: "checkCollisions" }), jsx(Vector3PropertyLine, { label: "Ellipsoid", value: ellipsoid, onChange: (val) => (camera.ellipsoid = val) }), jsx(Vector3PropertyLine, { label: "Ellipsoid Offset", value: ellipsoidOffset, onChange: (val) => (camera.ellipsoidOffset = val) })] }));
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Check Collisions", target: camera, propertyKey: "checkCollisions" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Apply Gravity", target: camera, propertyKey: "applyGravity" }), jsx(Vector3PropertyLine, { label: "Ellipsoid", value: ellipsoid, onChange: (val) => (camera.ellipsoid = val) }), jsx(Vector3PropertyLine, { label: "Ellipsoid Offset", value: ellipsoidOffset, onChange: (val) => (camera.ellipsoidOffset = val) })] }));
 };
 
 const TargetCameraTransformProperties = (props) => {
@@ -5844,7 +5886,7 @@ const CommonGeneralProperties = (props) => {
 };
 const DisposableGeneralProperties = (props) => {
     const { disposableEntity } = props;
-    return (jsx(Fragment, { children: jsx(ButtonLine, { label: "Dispose", onClick: () => disposableEntity.dispose() }) }));
+    return (jsx(Fragment, { children: jsx(ButtonLine, { label: "Dispose", icon: DeleteRegular, onClick: () => disposableEntity.dispose() }) }));
 };
 
 const CommonPropertiesServiceDefinition = {
@@ -5914,8 +5956,15 @@ const FrameGraphTaskProperties = (props) => {
 const FrameGraphGeneralProperties = (props) => {
     const { frameGraph } = props;
     const isSceneFrameGraph = useProperty(frameGraph.scene, "frameGraph");
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Optimize Texture Allocation", description: "Whether to optimize texture allocation.", target: frameGraph, propertyKey: "optimizeTextureAllocation" }), isSceneFrameGraph !== frameGraph && jsx(ButtonLine, { onClick: () => (frameGraph.scene.frameGraph = frameGraph), label: "Set as scene's frame graph" }), jsx(ButtonLine, { label: "Edit Graph", onClick: () => {
-                    void frameGraph.getLinkedNodeRenderGraph().edit({ nodeRenderGraphEditorConfig: { hostScene: frameGraph.scene } });
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Optimize Texture Allocation", description: "Whether to optimize texture allocation.", target: frameGraph, propertyKey: "optimizeTextureAllocation" }), isSceneFrameGraph !== frameGraph && jsx(ButtonLine, { onClick: () => (frameGraph.scene.frameGraph = frameGraph), label: "Make Active", icon: PlayRegular }), jsx(ButtonLine, { label: "Edit Graph", icon: EditRegular, onClick: async () => {
+                    const renderGraph = frameGraph.getLinkedNodeRenderGraph();
+                    if (renderGraph) {
+                        // TODO: Figure out how to get all the various build steps to work with this.
+                        //       See the initial attempt here: https://github.com/BabylonJS/Babylon.js/pull/17646
+                        // const { NodeRenderGraphEditor } = await import("node-render-graph-editor/nodeRenderGraphEditor");
+                        // NodeRenderGraphEditor.Show({ nodeRenderGraph: renderGraph, hostScene: frameGraph.scene });
+                        await renderGraph.edit({ nodeRenderGraphEditorConfig: { hostScene: frameGraph.scene } });
+                    }
                 } })] }));
 };
 
@@ -5950,7 +5999,44 @@ const AreaLightSetupProperties = ({ context: areaLight }) => {
 };
 
 const DirectionalLightSetupProperties = ({ context: directionalLight }) => {
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { label: "Position", component: Vector3PropertyLine, target: directionalLight, propertyKey: "position" }), jsx(BoundProperty, { label: "Direction", component: Vector3PropertyLine, target: directionalLight, propertyKey: "direction" }), jsx(BoundProperty, { label: "Diffuse", component: Color3PropertyLine, target: directionalLight, propertyKey: "diffuse" }), jsx(BoundProperty, { label: "Specular", component: Color3PropertyLine, target: directionalLight, propertyKey: "specular" }), jsx(BoundProperty, { label: "Intensity", component: NumberInputPropertyLine, target: directionalLight, propertyKey: "intensity" })] }));
+    const scene = directionalLight.getScene();
+    const camera = scene.activeCamera;
+    // Check if using CascadedShadowGenerator to hide autoCalcShadowZBounds
+    let generator = directionalLight.getShadowGenerator(camera) ?? null;
+    if (generator === null) {
+        const shadowGenerators = directionalLight.getShadowGenerators();
+        if (shadowGenerators && shadowGenerators.size > 0) {
+            generator = shadowGenerators.values().next().value ?? null;
+        }
+    }
+    const hideAutoCalcShadowZBounds = generator instanceof CascadedShadowGenerator;
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { label: "Position", component: Vector3PropertyLine, target: directionalLight, propertyKey: "position" }), jsx(BoundProperty, { label: "Direction", component: Vector3PropertyLine, target: directionalLight, propertyKey: "direction" }), jsx(BoundProperty, { label: "Diffuse", component: Color3PropertyLine, target: directionalLight, propertyKey: "diffuse" }), jsx(BoundProperty, { label: "Specular", component: Color3PropertyLine, target: directionalLight, propertyKey: "specular" }), jsx(BoundProperty, { label: "Intensity", component: NumberInputPropertyLine, target: directionalLight, propertyKey: "intensity" }), jsx(BoundProperty, { label: "Auto Update Extends", description: "Automatically compute the projection matrix to fit the light's shadow frustum to the scene.", component: SwitchPropertyLine, target: directionalLight, propertyKey: "autoUpdateExtends" }), !hideAutoCalcShadowZBounds && (jsx(BoundProperty, { label: "Auto Calc Shadow ZBounds", description: "Automatically compute the shadow min/max z values.", component: SwitchPropertyLine, target: directionalLight, propertyKey: "autoCalcShadowZBounds" })), jsx(BoundProperty, { label: "Ortho Left", component: NumberInputPropertyLine, target: directionalLight, propertyKey: "orthoLeft" }), jsx(BoundProperty, { label: "Ortho Right", component: NumberInputPropertyLine, target: directionalLight, propertyKey: "orthoRight" }), jsx(BoundProperty, { label: "Ortho Bottom", component: NumberInputPropertyLine, target: directionalLight, propertyKey: "orthoBottom" }), jsx(BoundProperty, { label: "Ortho Top", component: NumberInputPropertyLine, target: directionalLight, propertyKey: "orthoTop" })] }));
+};
+const FrustumViewerMap = new WeakMap();
+const DirectionalLightDebugProperties = ({ context: directionalLight }) => {
+    const [displayFrustum, setDisplayFrustum] = useState(FrustumViewerMap.has(directionalLight));
+    const toggleDisplayFrustum = () => {
+        const light = directionalLight;
+        const camera = light.getScene().activeCamera;
+        const existingState = FrustumViewerMap.get(light);
+        if (existingState) {
+            // Clean up existing frustum viewer
+            light.getScene().onAfterRenderObservable.remove(existingState.observer);
+            existingState.viewer.dispose();
+            FrustumViewerMap.delete(light);
+            setDisplayFrustum(false);
+        }
+        else {
+            // Create new frustum viewer
+            const viewer = new DirectionalLightFrustumViewer(light, camera);
+            const observer = light.getScene().onAfterRenderObservable.add(() => {
+                viewer.update();
+            });
+            FrustumViewerMap.set(light, { viewer, observer });
+            setDisplayFrustum(true);
+        }
+    };
+    return (jsx(Fragment, { children: jsx(SwitchPropertyLine, { label: "Display Frustum", value: displayFrustum, onChange: toggleDisplayFrustum }) }));
 };
 
 const HemisphericLightSetupProperties = ({ context: hemisphericLight }) => {
@@ -5973,6 +6059,31 @@ const MapSizeOptions = [
     { label: "512 x 512", value: 512 },
     { label: "256 x 256", value: 256 },
 ];
+const BlurModeOptions = [
+    { label: "None", value: ShadowGenerator.FILTER_NONE },
+    { label: "PCF", value: ShadowGenerator.FILTER_PCF },
+    { label: "PCSS", value: ShadowGenerator.FILTER_PCSS },
+    { label: "Poisson", value: ShadowGenerator.FILTER_POISSONSAMPLING },
+    { label: "Exponential", value: ShadowGenerator.FILTER_EXPONENTIALSHADOWMAP },
+    { label: "Blurred Exponential", value: ShadowGenerator.FILTER_BLUREXPONENTIALSHADOWMAP },
+    { label: "Close Exponential", value: ShadowGenerator.FILTER_CLOSEEXPONENTIALSHADOWMAP },
+    { label: "Blurred Close Exponential", value: ShadowGenerator.FILTER_BLURCLOSEEXPONENTIALSHADOWMAP },
+];
+const CSMBlurModeOptions = [
+    { label: "None", value: ShadowGenerator.FILTER_NONE },
+    { label: "PCF", value: ShadowGenerator.FILTER_PCF },
+    { label: "PCSS", value: ShadowGenerator.FILTER_PCSS },
+];
+const FilteringQualityOptions = [
+    { label: "Low", value: ShadowGenerator.QUALITY_LOW },
+    { label: "Medium", value: ShadowGenerator.QUALITY_MEDIUM },
+    { label: "High", value: ShadowGenerator.QUALITY_HIGH },
+];
+const NumCascadesOptions = [
+    { label: "2", value: 2 },
+    { label: "3", value: 3 },
+    { label: "4", value: 4 },
+];
 function GetShadowGenerator(camera, shadowLight) {
     return shadowLight.getShadowGenerator(camera) ?? shadowLight.getShadowGenerators()?.values().next().value ?? null;
 }
@@ -6007,14 +6118,29 @@ const ShadowGeneratorSetupProperties = ({ context: shadowLight }) => {
     useEffect(() => {
         setHasShadowGenerator(!!shadowGenerator);
     }, [shadowGenerator]);
+    const isCascaded = shadowGenerator instanceof CascadedShadowGenerator;
+    const isStandardGenerator = shadowGenerator instanceof ShadowGenerator && !isCascaded;
+    // Use useProperty to track filter changes and trigger re-renders for conditional UI
+    const filter = useProperty(shadowGenerator, "filter") ?? ShadowGenerator.FILTER_NONE;
+    const useKernelBlur = useProperty(shadowGenerator, "useKernelBlur");
+    const blurModeOptions = isCascaded ? CSMBlurModeOptions : BlurModeOptions;
+    const near = camera?.minZ ?? 0;
+    const far = camera?.maxZ ?? 500000;
+    const isPCFOrPCSS = filter === ShadowGenerator.FILTER_PCF || filter === ShadowGenerator.FILTER_PCSS;
+    const isPCSS = filter === ShadowGenerator.FILTER_PCSS;
+    const isBlurExponential = filter === ShadowGenerator.FILTER_BLUREXPONENTIALSHADOWMAP || filter === ShadowGenerator.FILTER_BLURCLOSEEXPONENTIALSHADOWMAP;
+    const isExponential = filter === ShadowGenerator.FILTER_BLUREXPONENTIALSHADOWMAP || filter === ShadowGenerator.FILTER_EXPONENTIALSHADOWMAP;
     return (jsxs(Fragment, { children: [!hasShadowGenerator && (jsxs(Fragment, { children: [jsx(StringDropdownPropertyLine, { label: "Type", options: shadowGeneratorOptions, value: shadowGeneratorSettings.generatorType, onChange: (value) => setShadowGeneratorSettings((prev) => ({ ...prev, generatorType: value })) }), jsx(NumberDropdownPropertyLine, { label: "Map Size", options: MapSizeOptions, value: shadowGeneratorSettings.mapSize, onChange: (value) => setShadowGeneratorSettings((prev) => ({ ...prev, mapSize: value })) }), jsx(ButtonLine, { label: "Create Generator", onClick: () => {
                             CreateShadowGenerator(shadowLight, shadowGeneratorSettings);
                             setHasShadowGenerator(true);
-                        } })] })), shadowGenerator && (jsxs(Fragment, { children: ["TODO: Not Implemented", jsx(ButtonLine, { label: "Dispose Generator", onClick: () => {
+                        } })] })), shadowGenerator && (jsxs(Fragment, { children: [isCascaded && jsx(CascadedShadowGeneratorProperties, { generator: shadowGenerator, near: near, far: far, isPCSS: isPCSS }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Bias", description: "Bias to apply to the shadow map to avoid shadow acne.", target: shadowGenerator, propertyKey: "bias", step: 0.0001 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Normal Bias", description: "Normal bias to apply to avoid shadow acne.", target: shadowGenerator, propertyKey: "normalBias" }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Darkness", description: "Darkness of the shadow (0 = no shadow, 1 = full shadow).", target: shadowGenerator, propertyKey: "darkness", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Transparent Shadows", description: "Allow transparent objects to cast shadows.", target: shadowGenerator, propertyKey: "transparencyShadow" }), jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "Filter", description: "Shadow filtering mode.", target: shadowGenerator, propertyKey: "filter", options: blurModeOptions }), jsx(Collapse, { visible: isPCFOrPCSS, children: jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "Filtering Quality", target: shadowGenerator, propertyKey: "filteringQuality", options: FilteringQualityOptions }) }), jsx(Collapse, { visible: isPCSS, children: jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Penumbra Ratio", description: "Light size UV ratio for PCSS.", target: shadowGenerator, propertyKey: "contactHardeningLightSizeUVRatio", min: 0, max: 0.5, step: 0.001 }) }), isStandardGenerator && (jsxs(Fragment, { children: [jsx(Collapse, { visible: isBlurExponential, children: jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use Kernel Blur", description: "Use kernel-based blur instead of box blur.", target: shadowGenerator, propertyKey: "useKernelBlur" }), useKernelBlur ? (jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Blur Kernel", target: shadowGenerator, propertyKey: "blurKernel", min: 1, max: 64, step: 1 })) : (jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Blur Box Offset", target: shadowGenerator, propertyKey: "blurBoxOffset", min: 1, max: 64, step: 1 }))] }) }), jsx(Collapse, { visible: isExponential, children: jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Depth Scale", target: shadowGenerator, propertyKey: "depthScale" }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Blur Scale", target: shadowGenerator, propertyKey: "blurScale", min: 1, max: 4, step: 1 })] }) })] })), jsx(ButtonLine, { label: "Dispose Generator", onClick: () => {
                             DisposeShadowGenerator(camera, shadowLight);
                             setHasShadowGenerator(false);
                         } })] }))] }));
 };
+const CascadedShadowGeneratorProperties = ({ generator, near, far, isPCSS, }) => {
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "Num Cascades", description: "Number of cascades for the cascaded shadow map.", target: generator, propertyKey: "numCascades", options: NumCascadesOptions }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Debug Mode", description: "Colorize cascades for debugging.", target: generator, propertyKey: "debug" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Stabilize Cascades", description: "Stabilize the cascade splits to avoid shimmering.", target: generator, propertyKey: "stabilizeCascades" }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Lambda", description: "Balance between logarithmic and uniform cascade splits.", target: generator, propertyKey: "lambda", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Cascade Blend", description: "Percentage of blending between cascades.", target: generator, propertyKey: "cascadeBlendPercentage", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Depth Clamp", target: generator, propertyKey: "depthClamp" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Auto-Calc Depth Bounds", target: generator, propertyKey: "autoCalcDepthBounds" }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Shadow MaxZ", target: generator, propertyKey: "shadowMaxZ", min: near, max: far, step: 0.5 }), jsx(Collapse, { visible: isPCSS, children: jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Penumbra Darkness", description: "Darkness of the penumbra for PCSS in CSM.", target: generator, propertyKey: "penumbraDarkness", min: 0, max: 1, step: 0.01 }) })] }));
+};
 
 const ShadowsSetupProperties = ({ context: shadowLight }) => {
     const shadowsEnabled = useProperty(shadowLight, "shadowEnabled");
@@ -6039,6 +6165,10 @@ const LightPropertiesServiceDefinition = {
                     section: "Setup",
                     component: DirectionalLightSetupProperties,
                 },
+                {
+                    section: "Debug",
+                    component: DirectionalLightDebugProperties,
+                },
             ],
         });
         const pointLightContentRegistration = propertiesService.addSectionContent({
@@ -6203,7 +6333,7 @@ const MaterialGeneralProperties = (props) => {
     const pointsCloud = useProperty(material, "pointsCloud");
     const faceCulling = useProperty(material, "backFaceCulling");
     const isWebGPU = material.getScene().getEngine().isWebGPU;
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Face Culling", docLink: "https://doc.babylonjs.com/features/featuresDeepDive/materials/using/materials_introduction#back-face-culling", target: material, propertyKey: "backFaceCulling" }), jsx(Collapse, { visible: faceCulling, children: jsx(BoundProperty, { component: SwitchPropertyLine, label: "Cull Back Faces", description: "Culls back faces. If false, front faces are culled.", target: material, propertyKey: "cullBackFaces" }) }), jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "Orientation", description: "The front face side. Overrides mesh's orientation.", options: OrientationOptions, target: material, propertyKey: "sideOrientation", nullable: true, defaultValue: material.getScene().useRightHandedSystem ? Material.CounterClockWiseSideOrientation : Material.ClockWiseSideOrientation }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Disable Color Write", target: material, propertyKey: "disableColorWrite" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Disable Depth Write", target: material, propertyKey: "disableDepthWrite" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Force Depth Write", target: material, propertyKey: "forceDepthWrite" }), jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "Depth Function", options: DepthFunctionOptions, target: material, propertyKey: "depthFunction" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Need Depth Pre-pass", docLink: "https://doc.babylonjs.com/features/featuresDeepDive/materials/advanced/transparent_rendering/#depth-pre-pass-meshes", target: material, propertyKey: "needDepthPrePass" }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Z-offset Factor", target: material, propertyKey: "zOffset", min: -10, max: 10, step: 0.1 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Z-offset Units", target: material, propertyKey: "zOffsetUnits", min: -10, max: 10, step: 0.1 }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Wireframe", target: material, propertyKey: "wireframe" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Point Cloud", target: material, propertyKey: "pointsCloud" }), pointsCloud && jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Point Size", target: material, propertyKey: "pointSize", min: 0, max: 100, step: 0.1 }), isWebGPU && jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use Vertex Pulling", target: material, propertyKey: "useVertexPulling" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Support Fog", target: material, propertyKey: "fogEnabled", description: "Indicates whether the material supports fog (however, fog must be enabled at the scene level to be effective)." }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use Logarithmic Depth", target: material, propertyKey: "useLogarithmicDepth", docLink: "https://doc.babylonjs.com/features/featuresDeepDive/materials/advanced/logarithmicDepthBuffer" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Set Vertex Output Invariant", target: material, propertyKey: "isVertexOutputInvariant", description: "Setting this property to true will force the shader compiler to disable some optimization to make sure the vertex output is always calculated the same way across different compilation units." })] }));
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Face Culling", description: "Enabling this will enable culling, default is to cull backfaces. To enable front face culling instead, you can disable 'cullBackfaces' using the below option", docLink: "https://doc.babylonjs.com/features/featuresDeepDive/materials/using/materials_introduction#back-face-culling", target: material, propertyKey: "backFaceCulling" }), jsx(Collapse, { visible: faceCulling, children: jsx(BoundProperty, { component: SwitchPropertyLine, label: "Cull Back Faces", description: "Culls back faces. If false, front faces are culled.", target: material, propertyKey: "cullBackFaces" }) }), jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "Orientation", description: "The front face side. Overrides mesh's orientation.", options: OrientationOptions, target: material, propertyKey: "sideOrientation", nullable: true, defaultValue: material.getScene().useRightHandedSystem ? Material.CounterClockWiseSideOrientation : Material.ClockWiseSideOrientation }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Disable Color Write", target: material, propertyKey: "disableColorWrite" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Disable Depth Write", target: material, propertyKey: "disableDepthWrite" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Force Depth Write", target: material, propertyKey: "forceDepthWrite" }), jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "Depth Function", options: DepthFunctionOptions, target: material, propertyKey: "depthFunction" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Need Depth Pre-pass", docLink: "https://doc.babylonjs.com/features/featuresDeepDive/materials/advanced/transparent_rendering/#depth-pre-pass-meshes", target: material, propertyKey: "needDepthPrePass" }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Z-offset Factor", target: material, propertyKey: "zOffset", min: -10, max: 10, step: 0.1 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Z-offset Units", target: material, propertyKey: "zOffsetUnits", min: -10, max: 10, step: 0.1 }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Wireframe", target: material, propertyKey: "wireframe" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Point Cloud", target: material, propertyKey: "pointsCloud" }), pointsCloud && jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Point Size", target: material, propertyKey: "pointSize", min: 0, max: 100, step: 0.1 }), isWebGPU && jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use Vertex Pulling", target: material, propertyKey: "useVertexPulling" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Support Fog", target: material, propertyKey: "fogEnabled", description: "Indicates whether the material supports fog (however, fog must be enabled at the scene level to be effective)." }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use Logarithmic Depth", target: material, propertyKey: "useLogarithmicDepth", docLink: "https://doc.babylonjs.com/features/featuresDeepDive/materials/advanced/logarithmicDepthBuffer" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Set Vertex Output Invariant", target: material, propertyKey: "isVertexOutputInvariant", description: "Setting this property to true will force the shader compiler to disable some optimization to make sure the vertex output is always calculated the same way across different compilation units." })] }));
 };
 const MaterialTransparencyProperties = (props) => {
     const { material } = props;
@@ -6222,6 +6352,17 @@ const MultiMaterialChildrenProperties = (props) => {
             .map((material, index) => (jsx(LinkToEntityPropertyLine, { label: `Material #${index + 1}`, entity: material, selectionService: selectionService }, material.uniqueId))) }));
 };
 
+const NodeMaterialGeneralProperties = (props) => {
+    const { material } = props;
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Ignore Alpha", target: material, propertyKey: "ignoreAlpha" }), jsx(ButtonLine, { label: "Edit", icon: EditRegular, onClick: async () => {
+                    // TODO: Figure out how to get all the various build steps to work with this.
+                    //       See the initial attempt here: https://github.com/BabylonJS/Babylon.js/pull/17646
+                    // const { NodeEditor } = await import("node-editor/nodeEditor");
+                    // NodeEditor.Show({ nodeMaterial: material });
+                    await material.edit();
+                } })] }));
+};
+
 function IsMaterialWithPublicNormalMaps(mat) {
     return mat.invertNormalMapX !== undefined;
 }
@@ -6235,6 +6376,174 @@ const NormalMapProperties = (props) => {
     return (jsx(Fragment, { children: IsMaterialWithPublicNormalMaps(material) ? (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Invert X Axis", target: material, propertyKey: "invertNormalMapX" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Invert Y Axis", target: material, propertyKey: "invertNormalMapY" })] })) : (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Invert X Axis", target: material, propertyKey: "_invertNormalMapX" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Invert Y Axis", target: material, propertyKey: "_invertNormalMapY" })] })) }));
 };
 
+// TODO: ryamtrem / gehalper This function is temporal until there is a line control to handle texture links (similar to the old TextureLinkLineComponent)
+const UpdateTexture = (file, material, textureSetter) => {
+    ReadFile(file, (data) => {
+        const blob = new Blob([data], { type: "octet/stream" });
+        const url = URL.createObjectURL(blob);
+        textureSetter(new Texture(url, material.getScene(), false, false));
+    }, undefined, true);
+};
+/**
+ * Displays the base layer properties of an OpenPBR material.
+ * @param props - The required properties
+ * @returns A JSX element representing the base layer properties.
+ */
+const OpenPBRMaterialBaseProperties = (props) => {
+    const { material } = props;
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Base Weight", target: material, propertyKey: "baseWeight", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Base Weight", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
+                    if (files.length > 0) {
+                        UpdateTexture(files[0], material, (texture) => (material.baseWeightTexture = texture));
+                    }
+                } }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Base Color", target: material, propertyKey: "baseColor", isLinearMode: true }), jsx(FileUploadLine, { label: "Base Color", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
+                    if (files.length > 0) {
+                        UpdateTexture(files[0], material, (texture) => (material.baseColorTexture = texture));
+                    }
+                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Base Metalness", target: material, propertyKey: "baseMetalness", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Base Metalness", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
+                    if (files.length > 0) {
+                        UpdateTexture(files[0], material, (texture) => (material.baseMetalnessTexture = texture));
+                    }
+                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Base Diffuse Roughness", target: material, propertyKey: "baseDiffuseRoughness", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Base Diffuse Roughness", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
+                    if (files.length > 0) {
+                        UpdateTexture(files[0], material, (texture) => (material.baseDiffuseRoughnessTexture = texture));
+                    }
+                } })] }));
+};
+/**
+ * Displays the specular layer properties of an OpenPBR material.
+ * @param props - The required properties
+ * @returns A JSX element representing the specular layer properties.
+ */
+const OpenPBRMaterialSpecularProperties = (props) => {
+    const { material } = props;
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Specular Weight", target: material, propertyKey: "specularWeight", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Specular Weight", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
+                    if (files.length > 0) {
+                        UpdateTexture(files[0], material, (texture) => (material.specularWeightTexture = texture));
+                    }
+                } }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Specular Color", target: material, propertyKey: "specularColor", isLinearMode: true }), jsx(FileUploadLine, { label: "Specular Color", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
+                    if (files.length > 0) {
+                        UpdateTexture(files[0], material, (texture) => (material.specularColorTexture = texture));
+                    }
+                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Specular Roughness", target: material, propertyKey: "specularRoughness", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Specular Roughness", accept: ".jpg, .png, .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, .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 })] }));
+};
+/**
+ * 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, .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, .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, .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, .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, .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, .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, .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, .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, .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, .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, .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, .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, .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, .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, .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, .tga, .dds, .env, .exr", onClick: (files) => {
+                    if (files.length > 0) {
+                        UpdateTexture(files[0], material, (texture) => (material.geometryCoatTangentTexture = texture));
+                    }
+                } })] }));
+};
+
 const useStyles$d = makeStyles({
     root: {
         display: "grid",
@@ -6319,7 +6628,7 @@ function EntitySelector(props) {
         return getEntities()
             .filter((e) => e.uniqueId !== undefined && (!filter || filter(e)))
             .map((entity) => ({
-            label: getName(entity),
+            label: getName(entity).toString(),
             value: entity.uniqueId.toString(),
         }))
             .sort((a, b) => a.label.localeCompare(b.label));
@@ -6648,174 +6957,6 @@ const PBRBaseMaterialDebugProperties = (props) => {
     return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "Debug Mode", target: material, propertyKey: "debugMode", options: DebugMode }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Split Position", target: material, propertyKey: "debugLimit", min: -1, max: 1, step: 0.01 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Output Factor", target: material, propertyKey: "debugFactor", min: 0, max: 5, step: 0.01 })] }));
 };
 
-// TODO: ryamtrem / gehalper This function is temporal until there is a line control to handle texture links (similar to the old TextureLinkLineComponent)
-const UpdateTexture = (file, material, textureSetter) => {
-    ReadFile(file, (data) => {
-        const blob = new Blob([data], { type: "octet/stream" });
-        const url = URL.createObjectURL(blob);
-        textureSetter(new Texture(url, material.getScene(), false, false));
-    }, undefined, true);
-};
-/**
- * Displays the base layer properties of an OpenPBR material.
- * @param props - The required properties
- * @returns A JSX element representing the base layer properties.
- */
-const OpenPBRMaterialBaseProperties = (props) => {
-    const { material } = props;
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Base Weight", target: material, propertyKey: "baseWeight", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Base Weight", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.baseWeightTexture = texture));
-                    }
-                } }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Base Color", target: material, propertyKey: "baseColor", isLinearMode: true }), jsx(FileUploadLine, { label: "Base Color", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.baseColorTexture = texture));
-                    }
-                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Base Metalness", target: material, propertyKey: "baseMetalness", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Base Metalness", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.baseMetalnessTexture = texture));
-                    }
-                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Base Diffuse Roughness", target: material, propertyKey: "baseDiffuseRoughness", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Base Diffuse Roughness", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.baseDiffuseRoughnessTexture = texture));
-                    }
-                } })] }));
-};
-/**
- * Displays the specular layer properties of an OpenPBR material.
- * @param props - The required properties
- * @returns A JSX element representing the specular layer properties.
- */
-const OpenPBRMaterialSpecularProperties = (props) => {
-    const { material } = props;
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Specular Weight", target: material, propertyKey: "specularWeight", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Specular Weight", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.specularWeightTexture = texture));
-                    }
-                } }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Specular Color", target: material, propertyKey: "specularColor", isLinearMode: true }), jsx(FileUploadLine, { label: "Specular Color", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.specularColorTexture = texture));
-                    }
-                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Specular Roughness", target: material, propertyKey: "specularRoughness", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Specular Roughness", accept: ".jpg, .png, .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, .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 })] }));
-};
-/**
- * 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, .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, .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, .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, .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, .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, .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, .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, .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, .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, .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, .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, .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, .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, .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, .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, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.geometryCoatTangentTexture = texture));
-                    }
-                } })] }));
-};
-
 const SkyMaterialProperties = (props) => {
     const { material, settings } = props;
     const [toDisplayAngle, fromDisplayAngle, useDegrees] = useAngleConverters(settings);
@@ -7038,6 +7179,16 @@ const MaterialPropertiesServiceDefinition = {
                 },
             ],
         });
+        const nodeMaterialContentRegistration = propertiesService.addSectionContent({
+            key: "Node Material Properties",
+            predicate: (entity) => entity instanceof NodeMaterial,
+            content: [
+                {
+                    section: "General",
+                    component: ({ context }) => jsx(NodeMaterialGeneralProperties, { material: context }),
+                },
+            ],
+        });
         return {
             dispose: () => {
                 pbrMaterialPropertyChangedObserver.remove();
@@ -7047,6 +7198,7 @@ const MaterialPropertiesServiceDefinition = {
                 openPBRMaterialPropertiesRegistration.dispose();
                 skyMaterialRegistration.dispose();
                 multiMaterialContentRegistration.dispose();
+                nodeMaterialContentRegistration.dispose();
             },
         };
     },
@@ -7263,7 +7415,7 @@ const AbstractMeshGeneralProperties = (props) => {
 };
 const AbstractMeshDisplayProperties = (props) => {
     const { mesh } = props;
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Alpha Index", target: mesh, propertyKey: "alphaIndex" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Receive Shadows", target: mesh, propertyKey: "receiveShadows" }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Rendering Group Id", target: mesh, propertyKey: "renderingGroupId", min: RenderingManager.MIN_RENDERINGGROUPS, max: RenderingManager.MAX_RENDERINGGROUPS - 1, step: 1 }), jsx(BoundProperty, { component: HexPropertyLine, label: "Layer Mask", target: mesh, propertyKey: "layerMask" })] }));
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Alpha Index", target: mesh, propertyKey: "alphaIndex" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Receive Shadows", target: mesh, propertyKey: "receiveShadows" }), mesh.isVerticesDataPresent(VertexBuffer.ColorKind) && (jsxs(Fragment, { children: [jsx(BoundProperty, { label: "Use Vertex Colors", component: SwitchPropertyLine, target: mesh, propertyKey: "useVertexColors" }), jsx(BoundProperty, { label: "Has Vertex Alpha", component: SwitchPropertyLine, target: mesh, propertyKey: "hasVertexAlpha" })] })), mesh.getScene().fogMode !== Constants.FOGMODE_NONE && jsx(BoundProperty, { label: "Apply Fog", component: SwitchPropertyLine, target: mesh, propertyKey: "applyFog" }), !mesh.parent && jsx(BoundProperty, { component: SwitchPropertyLine, label: "Infinite distance", target: mesh, propertyKey: "infiniteDistance" }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Rendering Group Id", target: mesh, propertyKey: "renderingGroupId", min: RenderingManager.MIN_RENDERINGGROUPS, max: RenderingManager.MAX_RENDERINGGROUPS - 1, step: 1 }), jsx(BoundProperty, { component: HexPropertyLine, label: "Layer Mask", target: mesh, propertyKey: "layerMask" })] }));
 };
 const AbstractMeshAdvancedProperties = (props) => {
     const { mesh } = props;
@@ -7525,6 +7677,22 @@ const AbstractMeshDebugProperties = (props) => {
                             } }), jsx(SyncedSliderPropertyLine, { label: "Target Bone", value: displayBoneIndex, min: 0, max: targetBoneOptions.length - 1, step: 1, onChange: (value) => onBoneDisplayIndexChangeHandler(value) })] }) }), skeleton && jsx(SwitchPropertyLine, { label: "Display Skeleton Map", value: displaySkeletonMap, onChange: () => displaySkeletonMapHandler() })] }));
 };
 
+const GaussianSplattingDisplayProperties = (props) => {
+    const { mesh } = props;
+    return (jsxs(Fragment, { children: [jsx(StringifiedPropertyLine, { label: "Splat Count", value: mesh.splatCount ?? 0 }), jsx(StringifiedPropertyLine, { label: "SH Parameter Count", value: (mesh.shDegree + 1) * (mesh.shDegree + 1) - 1 }), jsx(BooleanBadgePropertyLine, { label: "Has Compensation", value: mesh.compensation }), jsx(StringifiedPropertyLine, { label: "Kernel Size", value: mesh.kernelSize })] }));
+};
+
+const MeshGeneralProperties = (props) => {
+    const { mesh } = props;
+    const nodeGeometry = mesh._internalMetadata?.nodeGeometry;
+    return (jsx(Fragment, { children: nodeGeometry && (jsx(ButtonLine, { label: "Edit", icon: EditRegular, onClick: async () => {
+                // TODO: Figure out how to get all the various build steps to work with this.
+                //       See the initial attempt here: https://github.com/BabylonJS/Babylon.js/pull/17646
+                // const { NodeGeometryEditor } = await import("node-geometry-editor/nodeGeometryEditor");
+                // NodeGeometryEditor.Show({ nodeGeometry: nodeGeometry, hostScene: mesh.getScene() });
+                await nodeGeometry.edit({ nodeGeometryEditorConfig: { hostScene: mesh.getScene() } });
+            } })) }));
+};
 const MeshDisplayProperties = (props) => {
     const { mesh } = props;
     return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Visibility", description: "Controls the visibility of the mesh. 0 is invisible, 1 is fully visible.", target: mesh, propertyKey: "visibility", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "Orientation", description: "Controls the side orientation or winding order of the mesh.", target: mesh, propertyKey: "sideOrientation", options: [
@@ -7533,11 +7701,6 @@ const MeshDisplayProperties = (props) => {
                 ] })] }));
 };
 
-const GaussianSplattingDisplayProperties = (props) => {
-    const { mesh } = props;
-    return (jsxs(Fragment, { children: [jsx(StringifiedPropertyLine, { label: "Splat Count", value: mesh.splatCount ?? 0 }), jsx(StringifiedPropertyLine, { label: "SH Parameter Count", value: (mesh.shDegree + 1) * (mesh.shDegree + 1) - 1 }), jsx(BooleanBadgePropertyLine, { label: "Has Compensation", value: mesh.compensation }), jsx(StringifiedPropertyLine, { label: "Kernel Size", value: mesh.kernelSize })] }));
-};
-
 const NodeGeneralProperties = (props) => {
     const { node, selectionService } = props;
     const isEnabled = useObservableState(() => node.isEnabled(false), node.onEnabledStateChangedObservable);
@@ -7597,6 +7760,10 @@ const NodePropertiesServiceDefinition = {
             key: "Mesh Properties",
             predicate: (entity) => entity instanceof Mesh && entity.getTotalVertices() > 0,
             content: [
+                {
+                    section: "General",
+                    component: ({ context }) => jsx(MeshGeneralProperties, { mesh: context }),
+                },
                 {
                     section: "Display",
                     component: ({ context }) => jsx(MeshDisplayProperties, { mesh: context }),
@@ -7919,7 +8086,7 @@ const AttractorList = (props) => {
         gizmoManager.attachToMesh(attached);
         setControlledImpostor(attached);
     };
-    return (jsxs(Fragment, { children: [items.length > 0 && (jsxs(Fragment, { children: [jsx(Color3PropertyLine, { label: "Attractor debug color", value: impostorColor, onChange: setImpostorColor }), jsx(SyncedSliderPropertyLine, { label: "Attractor debug size", value: impostorScale, onChange: setImpostorScale, min: 0, max: 10, step: 0.1 })] })), jsx(List, { addButtonLabel: `Add new attractor`, items: items, onDelete: (item, _index) => system.removeAttractor(item.data), onAdd: (item) => system.addAttractor(item?.data ?? new Attractor()), renderItem: (item) => {
+    return (jsxs(Fragment, { children: [items.length > 0 && (jsxs(Fragment, { children: [jsx(Color3PropertyLine, { label: "Attractor Debug Color", value: impostorColor, onChange: setImpostorColor }), jsx(SyncedSliderPropertyLine, { label: "Attractor Debug Size", value: impostorScale, onChange: setImpostorScale, min: 0, max: 10, step: 0.1 })] })), jsx(List, { addButtonLabel: `Add New Attractor`, items: items, onDelete: (item, _index) => system.removeAttractor(item.data), onAdd: (item) => system.addAttractor(item?.data ?? new Attractor()), renderItem: (item) => {
                     return (jsx(AttractorComponent, { attractor: item.data, id: item.id, scene: scene, impostorColor: impostorColor, impostorScale: impostorScale, impostorMaterial: impostorMaterial, isControlled: (impostor) => impostor === controlledImpostor, onControl: onControlImpostor }));
                 } })] }));
 };
@@ -8039,7 +8206,8 @@ const ParticleSystemGeneralProperties = (props) => {
         request.open("GET", ParticleHelper.SnippetUrl + "/" + trimmed.replace(/#/g, "/"), true);
         request.send();
     }, [applyParticleSystemJsonToSystem, scene, system]);
-    const saveToSnippetServer = useCallback(() => {
+    const saveToSnippetServer = useCallback(async () => {
+        const deferred = new Deferred();
         // Serialize once and post as snippet payload.
         const content = JSON.stringify(system.serialize(true));
         const xmlHttp = new XMLHttpRequest();
@@ -8048,6 +8216,7 @@ const ParticleSystemGeneralProperties = (props) => {
                 return;
             }
             if (xmlHttp.status !== 200) {
+                deferred.reject();
                 alert("Unable to save your particle system");
                 return;
             }
@@ -8062,9 +8231,11 @@ const ParticleSystemGeneralProperties = (props) => {
                     void navigator.clipboard.writeText(system.snippetId);
                 }
                 PersistSnippetId(system.snippetId);
+                deferred.resolve();
                 alert("Particle system saved with ID: " + system.snippetId + " (the id was also saved to your clipboard)");
             }
             catch (e) {
+                deferred.reject(e);
                 alert("Unable to save your particle system: " + e);
             }
         };
@@ -8079,16 +8250,28 @@ const ParticleSystemGeneralProperties = (props) => {
             tags: "",
         };
         xmlHttp.send(JSON.stringify(dataToSend));
+        await deferred.promise;
     }, [system]);
-    return (jsxs(Fragment, { children: [jsx(StringifiedPropertyLine, { label: "Capacity", description: "Maximum number of particles in the system.", value: capacity }), jsx(StringifiedPropertyLine, { label: "Active Particles", description: "Current number of active particles.", value: activeCount }), jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "Blend Mode", target: system, propertyKey: "blendMode", options: BlendModeOptions }), jsx(BoundProperty, { component: Vector3PropertyLine, label: "World Offset", target: system, propertyKey: "worldOffset" }), !system.isNodeGenerated && jsx(BoundProperty, { component: Vector3PropertyLine, label: "Gravity", target: system, propertyKey: "gravity" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Is Billboard", target: system, propertyKey: "isBillboardBased" }), isBillboardBased && (jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "Billboard Mode", target: system, propertyKey: "billboardMode", options: ParticleBillboardModeOptions })), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Is Local", target: system, propertyKey: "isLocal" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Force Depth Write", target: system, propertyKey: "forceDepthWrite" }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Update Speed", target: system, propertyKey: "updateSpeed", min: 0, step: 0.01 }), jsx(ButtonLine, { label: system.isNodeGenerated ? "Edit in Node Particle Editor (coming soon)" : "View in Node Particle Editor (coming soon)", disabled: true, onClick: () => {
-                    // Hook up once Node Particle Editor UX is wired.
-                } }), isStopping ? (jsx(TextPropertyLine, { label: "System is stopping...", value: "" })) : isAlive ? (jsx(ButtonLine, { label: "Stop", onClick: () => {
+    return (jsxs(Fragment, { children: [jsx(StringifiedPropertyLine, { label: "Capacity", description: "Maximum number of particles in the system.", value: capacity }), jsx(StringifiedPropertyLine, { label: "Active Particles", description: "Current number of active particles.", value: activeCount }), jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "Blend Mode", target: system, propertyKey: "blendMode", options: BlendModeOptions }), jsx(BoundProperty, { component: Vector3PropertyLine, label: "World Offset", target: system, propertyKey: "worldOffset" }), !system.isNodeGenerated && jsx(BoundProperty, { component: Vector3PropertyLine, label: "Gravity", target: system, propertyKey: "gravity" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Is Billboard", target: system, propertyKey: "isBillboardBased" }), isBillboardBased && (jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "Billboard Mode", target: system, propertyKey: "billboardMode", options: ParticleBillboardModeOptions })), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Is Local", target: system, propertyKey: "isLocal" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Force Depth Write", target: system, propertyKey: "forceDepthWrite" }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Update Speed", target: system, propertyKey: "updateSpeed", min: 0, step: 0.01 }), jsx(ButtonLine, { label: system.isNodeGenerated ? "Edit" : "View", icon: system.isNodeGenerated ? EditRegular : EyeRegular, onClick: async () => {
+                    const scene = system.getScene();
+                    if (!scene) {
+                        return;
+                    }
+                    const systemSet = system.source ? system.source : await ConvertToNodeParticleSystemSetAsync("source", [system]);
+                    if (systemSet) {
+                        // TODO: Figure out how to get all the various build steps to work with this.
+                        //       See the initial attempt here: https://github.com/BabylonJS/Babylon.js/pull/17646
+                        // const { NodeParticleEditor } = await import("node-particle-editor/nodeParticleEditor");
+                        // NodeParticleEditor.Show({ nodeParticleSet: systemSet, hostScene: scene, backgroundColor: scene.clearColor });
+                        await systemSet.editAsync({ nodeEditorConfig: { backgroundColor: scene.clearColor } });
+                    }
+                } }), isStopping ? (jsx(TextPropertyLine, { label: "System is stopping...", value: "" })) : isAlive ? (jsx(ButtonLine, { label: "Stop", icon: StopRegular, onClick: () => {
                     setStopRequested(true);
                     system.stop();
-                } })) : (jsx(ButtonLine, { label: "Start", onClick: () => {
+                } })) : (jsx(ButtonLine, { label: "Start", icon: PlayRegular, onClick: () => {
                     setStopRequested(false);
                     system.start();
-                } })), !system.isNodeGenerated && (jsxs(Fragment, { children: [jsx(FileUploadLine, { label: "Load from file", accept: ".json", onClick: (files) => {
+                } })), !system.isNodeGenerated && (jsxs(Fragment, { children: [jsx(FileUploadLine, { label: "Load from File", accept: ".json", onClick: (files) => {
                             if (files.length === 0) {
                                 return;
                             }
@@ -8101,13 +8284,13 @@ const ParticleSystemGeneralProperties = (props) => {
                                 }
                                 applyParticleSystemJsonToSystem(jsonObject);
                             }, undefined, true);
-                        } }), jsx(ButtonLine, { label: "Save to file", onClick: () => {
+                        } }), jsx(ButtonLine, { label: "Save to File", icon: ArrowDownloadRegular, onClick: () => {
                             // Download serialization as a JSON file.
                             const data = JSON.stringify(system.serialize(true), null, 2);
                             const blob = new Blob([data], { type: "application/json" });
                             const name = (system.name && system.name.trim().length > 0 ? system.name.trim() : "particleSystem") + ".json";
                             Tools.Download(blob, name);
-                        } }), snippetId && jsx(TextPropertyLine, { label: "Snippet ID", value: snippetId }), jsx(ButtonLine, { label: "Load from snippet server", onClick: loadFromSnippetServer }), jsx(ButtonLine, { label: "Save to snippet server", onClick: saveToSnippetServer })] }))] }));
+                        } }), snippetId && jsx(TextPropertyLine, { label: "Snippet ID", value: snippetId }), jsx(ButtonLine, { label: "Load from Snippet Server", onClick: loadFromSnippetServer, icon: CloudArrowUpRegular }), jsx(ButtonLine, { label: "Save to Snippet Server", onClick: saveToSnippetServer, icon: CloudArrowDownRegular })] }))] }));
 };
 /**
  * Display attractor-related properties for a particle system.
@@ -11354,7 +11537,8 @@ const TransformProperties = (props) => {
     const { transform, settings } = props;
     const quatRotation = useQuaternionProperty(transform, "rotationQuaternion");
     const useDegrees = useObservableState(() => settings.useDegrees, settings.settingsChangedObservable);
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: Vector3PropertyLine, label: "Position", target: transform, propertyKey: "position" }), quatRotation ? (jsx(QuaternionPropertyLine, { label: "Rotation (Quat)", value: quatRotation, onChange: (val) => (transform.rotationQuaternion = val), useDegrees: useDegrees }, "QuaternionRotationTransform")) : (jsx(BoundProperty, { component: RotationVectorPropertyLine, label: "Rotation", target: transform, propertyKey: "rotation", useDegrees: useDegrees })), jsx(BoundProperty, { component: Vector3PropertyLine, label: "Scaling", target: transform, propertyKey: "scaling" })] }));
+    const useEuler = useObservableState(() => settings.useEuler, settings.settingsChangedObservable);
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: Vector3PropertyLine, label: "Position", target: transform, propertyKey: "position" }), quatRotation ? (jsx(QuaternionPropertyLine, { label: "Rotation (Quat)", value: quatRotation, onChange: (val) => (transform.rotationQuaternion = val), useDegrees: useDegrees, useEuler: useEuler }, "QuaternionRotationTransform")) : (jsx(BoundProperty, { component: RotationVectorPropertyLine, label: "Rotation", target: transform, propertyKey: "rotation", useDegrees: useDegrees })), jsx(BoundProperty, { component: Vector3PropertyLine, label: "Scaling", target: transform, propertyKey: "scaling" })] }));
 };
 
 const TransformPropertiesServiceDefinition = {
@@ -13352,4 +13536,4 @@ const TextAreaPropertyLine = (props) => {
 AttachDebugLayer();
 
 export { useSidePaneDockOverrides as $, Accordion as A, ButtonLine as B, Collapse as C, DebugServiceIdentity as D, ExtensibleAccordion as E, FileUploadLine as F, useVector3Property as G, useColor3Property as H, Inspector as I, useColor4Property as J, useQuaternionProperty as K, Link as L, MakeLazyComponent as M, NumberDropdownPropertyLine as N, MakePropertyHook as O, Popover as P, useInterceptObservable as Q, useEventfulState as R, SwitchPropertyLine as S, ToolsServiceIdentity as T, useObservableCollection as U, Vector3PropertyLine as V, useOrderedObservableCollection as W, usePollingObservable as X, useResource as Y, useAsyncResource as Z, useCompactMode as _, SyncedSliderPropertyLine as a, useAngleConverters as a0, MakeTeachingMoment as a1, MakeDialogTeachingMoment as a2, InterceptFunction as a3, GetPropertyDescriptor as a4, IsPropertyReadonly as a5, InterceptProperty as a6, ObservableCollection as a7, ConstructorFactory as a8, SelectionServiceIdentity as a9, TextInput as aA, ToggleButton as aB, ChildWindow as aC, FactorGradientList as aD, Color3GradientList as aE, Color4GradientList as aF, Pane as aG, BooleanBadgePropertyLine as aH, Color3PropertyLine as aI, Color4PropertyLine as aJ, HexPropertyLine as aK, NumberInputPropertyLine as aL, LinkPropertyLine as aM, PropertyLine as aN, LineContainer as aO, PlaceholderPropertyLine as aP, StringifiedPropertyLine as aQ, TextAreaPropertyLine as aR, TextPropertyLine as aS, RotationVectorPropertyLine as aT, QuaternionPropertyLine as aU, Vector2PropertyLine as aV, Vector4PropertyLine as aW, SelectionServiceDefinition as aa, SettingsContextIdentity as ab, ShowInspector as ac, Checkbox as ad, ColorPickerPopup as ae, InputHexField as af, InputHsvField as ag, ComboBox as ah, DraggableLine as ai, Dropdown as aj, NumberDropdown as ak, StringDropdown as al, FactorGradientComponent as am, Color3GradientComponent as an, Color4GradientComponent as ao, ColorStepGradientComponent as ap, InfoLabel as aq, List as ar, MessageBar as as, PositionedPopover as at, SearchBar as au, SearchBox as av, SpinButton as aw, Switch as ax, SyncedSliderInput as ay, Textarea as az, Button as b, TextInputPropertyLine as c, SpinButtonPropertyLine as d, CheckboxPropertyLine as e, ShellServiceIdentity as f, SceneContextIdentity as g, AccordionSection as h, useExtensionManager as i, MakePopoverTeachingMoment as j, TeachingMoment as k, SidePaneContainer as l, PropertiesServiceIdentity as m, SceneExplorerServiceIdentity as n, SettingsServiceIdentity as o, StatsServiceIdentity as p, ConvertOptions as q, AttachDebugLayer as r, DetachDebugLayer as s, StringDropdownPropertyLine as t, useObservableState as u, BoundProperty as v, LinkToEntityPropertyLine as w, Theme as x, BuiltInsExtensionFeed as y, useProperty as z };
-//# sourceMappingURL=index-D450kD0o.js.map
+//# sourceMappingURL=index-upm3WBf8.js.map