@babylonjs/inspector 8.45.1-preview → 8.45.2-preview

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

@@ -64,15 +64,13 @@ 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 { PBRBaseSimpleMaterial } from '@babylonjs/core/Materials/PBR/pbrBaseSimpleMaterial.js';
-import { PBRMaterial } from '@babylonjs/core/Materials/PBR/pbrMaterial.js';
 import { OpenPBRMaterial } from '@babylonjs/core/Materials/PBR/openpbrMaterial.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 { ReadFile } from '@babylonjs/core/Misc/fileTools.js';
 import { CubeTexture } from '@babylonjs/core/Materials/Textures/cubeTexture.js';
+import { ReadFile } from '@babylonjs/core/Misc/fileTools.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';
@@ -3839,7 +3837,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-Ds9cCJKY.js'),
+        getExtensionModuleAsync: async () => await import('./exportService-CnPFMXUA.js'),
     },
     {
         name: "Capture Tools",
@@ -3847,7 +3845,7 @@ const DefaultInspectorExtensionFeed = new BuiltInsExtensionFeed("Inspector", [
         keywords: ["capture", "screenshot", "gif", "video", "tools"],
         ...BabylonWebResources,
         author: { name: "Alex Chuber", forumUserName: "alexchuber" },
-        getExtensionModuleAsync: async () => await import('./captureService-BljpAUY0.js'),
+        getExtensionModuleAsync: async () => await import('./captureService-BDZ64ZKE.js'),
     },
     {
         name: "Import Tools",
@@ -3855,7 +3853,7 @@ const DefaultInspectorExtensionFeed = new BuiltInsExtensionFeed("Inspector", [
         keywords: ["import", "tools"],
         ...BabylonWebResources,
         author: { name: "Alex Chuber", forumUserName: "alexchuber" },
-        getExtensionModuleAsync: async () => await import('./importService-DjRpoPdx.js'),
+        getExtensionModuleAsync: async () => await import('./importService-e9XEtGfl.js'),
     },
     {
         name: "Quick Creation Tools (Preview)",
@@ -3863,7 +3861,7 @@ const DefaultInspectorExtensionFeed = new BuiltInsExtensionFeed("Inspector", [
         keywords: ["creation", "tools"],
         ...BabylonWebResources,
         author: { name: "Babylon.js", forumUserName: "" },
-        getExtensionModuleAsync: async () => await import('./quickCreateToolsService-B1GLLyqj.js'),
+        getExtensionModuleAsync: async () => await import('./quickCreateToolsService-gqXZXpNH.js'),
     },
 ]);
 
@@ -4028,16 +4026,25 @@ const TextInput = (props) => {
     const handleChange = (event, data) => {
         event.stopPropagation();
         setValue(data.value);
-        tryCommitValue(data.value);
+        if (!props.validateOnlyOnBlur) {
+            tryCommitValue(data.value);
+        }
     };
     const handleKeyUp = (event) => {
         event.stopPropagation();
-        setValue(event.currentTarget.value);
-        tryCommitValue(event.currentTarget.value);
+        if (!props.validateOnlyOnBlur) {
+            tryCommitValue(event.currentTarget.value);
+        }
+    };
+    const handleBlur = (event) => {
+        HandleOnBlur(event);
+        if (props.validateOnlyOnBlur) {
+            tryCommitValue(event.currentTarget.value);
+        }
     };
     const mergedClassName = mergeClasses(classes.input, !validateValue(value) ? classes.invalid : "", props.className);
     const id = useId("input-button");
-    return (jsxs("div", { className: classes.container, children: [props.infoLabel && jsx(InfoLabel, { ...props.infoLabel, htmlFor: id }), jsx(Input, { ...props, input: { className: classes.inputSlot }, id: id, size: size, value: value, onChange: handleChange, onKeyUp: handleKeyUp, onKeyDown: HandleKeyDown, onBlur: HandleOnBlur, className: mergedClassName })] }));
+    return (jsxs("div", { className: classes.container, children: [props.infoLabel && jsx(InfoLabel, { ...props.infoLabel, htmlFor: id }), jsx(Input, { ...props, input: { className: classes.inputSlot }, id: id, size: size, value: value, onChange: handleChange, onKeyUp: handleKeyUp, onKeyDown: HandleKeyDown, onBlur: handleBlur, className: mergedClassName })] }));
 };
 
 const useDropdownStyles = makeStyles({
@@ -4996,7 +5003,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-ClfCMwL9.js');
+                    const { ExtensionListServiceDefinition } = await import('./extensionsListService-CN7-7Dna.js');
                     await serviceContainer.addServiceAsync(ExtensionListServiceDefinition);
                 }
                 // Register the theme selector service (for selecting the theme) if theming is configured.
@@ -5609,23 +5616,16 @@ const ArcRotateCameraBehaviorsProperties = (props) => {
     return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Auto Rotation", target: camera, propertyKey: "useAutoRotationBehavior" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Bouncing", target: camera, propertyKey: "useBouncingBehavior" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Framing", target: camera, propertyKey: "useFramingBehavior" })] }));
 };
 
-// The below conversion functions are taken from old HexLineComponent and can likely be simplified
-const ConvertToHexString = (valueString) => {
-    while (valueString.length < 10) {
-        valueString += "0";
-    }
-    return valueString;
-};
 const MaskValidatorFn = (valueString) => {
     if (valueString.substring(0, 2) != "0x") {
         if (valueString.substring(0, 1) != "0") {
             valueString = "0x" + valueString;
         }
         else {
-            valueString = "0x" + valueString.substr(1);
+            valueString = "0x" + valueString.substring(1);
         }
     }
-    const valueSubstr = valueString.substr(2);
+    const valueSubstr = valueString.substring(2);
     if (valueSubstr != "" && /^[0-9A-Fa-f]+$/g.test(valueSubstr) == false) {
         return false;
     }
@@ -5634,14 +5634,16 @@ const MaskValidatorFn = (valueString) => {
     }
     return true;
 };
-const GetHexValFromNumber = (val) => {
+const GetHexValFromNumber = (val, numBits) => {
+    const numDigits = (numBits ?? 32) >> 2;
     let valueAsHex = val.toString(16);
     let hex0String = "";
-    for (let i = 0; i < 8 - valueAsHex.length; i++) {
+    for (let i = 0; i < numDigits - valueAsHex.length; i++) {
         // padding the '0's
-        hex0String += "0";
+        hex0String = "0" + hex0String;
     }
-    valueAsHex = "0x" + hex0String + valueAsHex.toUpperCase();
+    const finalHexValue = hex0String + valueAsHex;
+    valueAsHex = "0x" + finalHexValue.substring(finalHexValue.length - numDigits);
     return valueAsHex;
 };
 /**
@@ -5651,16 +5653,16 @@ const GetHexValFromNumber = (val) => {
  */
 const HexPropertyLine = (props) => {
     HexPropertyLine.displayName = "HexPropertyLine";
-    const [hexVal, setHexVal] = useState(GetHexValFromNumber(props.value));
+    const [hexVal, setHexVal] = useState(GetHexValFromNumber(props.value, props.numBits));
     const onStrValChange = (val) => {
+        const numBits = props.numBits ?? 32;
         setHexVal(val);
-        const valueStringAsHex = ConvertToHexString(val);
-        props.onChange(parseInt(valueStringAsHex));
+        props.onChange(parseInt(val) & (2 ** numBits - 1));
     };
     useEffect(() => {
-        setHexVal(GetHexValFromNumber(props.value));
-    }, [props.value]);
-    return (jsx(PropertyLine, { ...props, children: jsx(TextInput, { ...props, validator: MaskValidatorFn, value: hexVal, onChange: onStrValChange }) }));
+        setHexVal(GetHexValFromNumber(props.value, props.numBits));
+    }, []);
+    return (jsx(PropertyLine, { ...props, children: jsx(TextInput, { ...props, validator: MaskValidatorFn, value: hexVal, onChange: onStrValChange, validateOnlyOnBlur: true }) }));
 };
 
 const CameraModes = [
@@ -6210,7 +6212,7 @@ const MaterialTransparencyProperties = (props) => {
 const MaterialStencilProperties = (props) => {
     const { material } = props;
     const stencilEnabled = useProperty(material.stencil, "enabled");
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Enabled", target: material.stencil, propertyKey: "enabled" }), jsx(Collapse, { visible: stencilEnabled, children: jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Reference Value", target: material.stencil, propertyKey: "funcRef", step: 0 }), jsx(PropertyLine, { label: "Front", expandByDefault: true, expandedContent: jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "Function", target: material.stencil, propertyKey: "func", options: StencilFunctionOptions }), jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "Stencil Fail Operation", target: material.stencil, propertyKey: "opStencilFail", options: StencilOperationOptions }), jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "Depth Fail Operation", target: material.stencil, propertyKey: "opDepthFail", options: StencilOperationOptions }), jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "Stencil & Depth Pass Operation", target: material.stencil, propertyKey: "opStencilDepthPass", options: StencilOperationOptions })] }) }), jsx(PropertyLine, { label: "Back", expandByDefault: true, expandedContent: jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "Function", target: material.stencil, propertyKey: "backFunc", options: StencilFunctionOptions }), jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "Stencil Fail Operation", target: material.stencil, propertyKey: "backOpStencilFail", options: StencilOperationOptions }), jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "Depth Fail Operation", target: material.stencil, propertyKey: "backOpDepthFail", options: StencilOperationOptions }), jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "Stencil & Depth Pass Operation", target: material.stencil, propertyKey: "backOpStencilDepthPass", options: StencilOperationOptions })] }) })] }) })] }));
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Enabled", target: material.stencil, propertyKey: "enabled" }), jsx(Collapse, { visible: stencilEnabled, children: jsxs(Fragment, { children: [jsx(BoundProperty, { component: HexPropertyLine, label: "Write Mask", target: material.stencil, propertyKey: "mask", numBits: 8 }), jsx(BoundProperty, { component: HexPropertyLine, label: "Read Mask", target: material.stencil, propertyKey: "funcMask", numBits: 8 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Reference Value", target: material.stencil, propertyKey: "funcRef", step: 1, forceInt: true, min: 0, max: 255 }), jsx(PropertyLine, { label: "Front", expandByDefault: true, expandedContent: jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "Function", target: material.stencil, propertyKey: "func", options: StencilFunctionOptions }), jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "Stencil Fail Operation", target: material.stencil, propertyKey: "opStencilFail", options: StencilOperationOptions }), jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "Depth Fail Operation", target: material.stencil, propertyKey: "opDepthFail", options: StencilOperationOptions }), jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "Stencil & Depth Pass Operation", target: material.stencil, propertyKey: "opStencilDepthPass", options: StencilOperationOptions })] }) }), jsx(PropertyLine, { label: "Back", expandByDefault: true, expandedContent: jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "Function", target: material.stencil, propertyKey: "backFunc", options: StencilFunctionOptions }), jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "Stencil Fail Operation", target: material.stencil, propertyKey: "backOpStencilFail", options: StencilOperationOptions }), jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "Depth Fail Operation", target: material.stencil, propertyKey: "backOpDepthFail", options: StencilOperationOptions }), jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "Stencil & Depth Pass Operation", target: material.stencil, propertyKey: "backOpStencilDepthPass", options: StencilOperationOptions })] }) })] }) })] }));
 };
 
 const MultiMaterialChildrenProperties = (props) => {
@@ -6220,6 +6222,9 @@ const MultiMaterialChildrenProperties = (props) => {
             .map((material, index) => (jsx(LinkToEntityPropertyLine, { label: `Material #${index + 1}`, entity: material, selectionService: selectionService }, material.uniqueId))) }));
 };
 
+function IsMaterialWithPublicNormalMaps(mat) {
+    return mat.invertNormalMapX !== undefined;
+}
 /**
  * Displays the normal map properties of a standard material.
  * @param props - The required properties
@@ -6227,75 +6232,7 @@ const MultiMaterialChildrenProperties = (props) => {
  */
 const NormalMapProperties = (props) => {
     const { material } = props;
-    return (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$1 = (file, material, textureSetter) => {
-    ReadFile(file, (data) => {
-        const blob = new Blob([data], { type: "octet/stream" });
-        const url = URL.createObjectURL(blob);
-        textureSetter(new Texture(url, material.getScene(), false, false));
-    }, undefined, true);
-};
-const PBRBaseMaterialClearCoatProperties = (props) => {
-    const { material } = props;
-    const isEnabled = useProperty(material.clearCoat, "isEnabled");
-    const isTintEnabled = useProperty(material.clearCoat, "isTintEnabled");
-    const bumpTexture = useProperty(material.clearCoat, "bumpTexture");
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Enabled", target: material.clearCoat, propertyKey: "isEnabled" }), jsxs(Collapse, { visible: isEnabled, children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Intensity", target: material.clearCoat, propertyKey: "intensity", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Roughness", target: material.clearCoat, propertyKey: "roughness", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "IOR", description: "Index of Refraction", target: material.clearCoat, propertyKey: "indexOfRefraction", min: 1, max: 3, step: 0.01 }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Remap F0", target: material.clearCoat, propertyKey: "remapF0OnInterfaceChange" }), jsx(FileUploadLine, { label: "Clear coat", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
-                            if (files.length > 0) {
-                                UpdateTexture$1(files[0], material, (texture) => (material.clearCoat.texture = texture));
-                            }
-                        } }), jsx(FileUploadLine, { label: "Roughness", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
-                            if (files.length > 0) {
-                                UpdateTexture$1(files[0], material, (texture) => (material.clearCoat.textureRoughness = texture));
-                            }
-                        } }), jsx(FileUploadLine, { label: "Bump", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
-                            if (files.length > 0) {
-                                UpdateTexture$1(files[0], material, (texture) => (material.clearCoat.bumpTexture = texture));
-                            }
-                        } }), jsx(Collapse, { visible: bumpTexture !== null, children: jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Bump Strength", target: bumpTexture, propertyKey: "level", min: 0, max: 2, step: 0.01 }) }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use Roughness from Main Texture", target: material.clearCoat, propertyKey: "useRoughnessFromMainTexture" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Tint", target: material.clearCoat, propertyKey: "isTintEnabled" }), jsxs(Collapse, { visible: isTintEnabled, children: [jsx(BoundProperty, { component: Color3PropertyLine, label: "Tint Color", target: material.clearCoat, propertyKey: "tintColor", isLinearMode: true }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "At Distance", target: material.clearCoat, propertyKey: "tintColorAtDistance", min: 0, max: 20, step: 0.1 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Tint Thickness", target: material.clearCoat, propertyKey: "tintThickness", min: 0, max: 20, step: 0.1 }), jsx(FileUploadLine, { label: "Tint", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
-                                    if (files.length > 0) {
-                                        UpdateTexture$1(files[0], material, (texture) => (material.clearCoat.tintTexture = texture));
-                                    }
-                                } })] })] })] }));
-};
-const PBRBaseMaterialIridescenceProperties = (props) => {
-    const { material } = props;
-    const isEnabled = useProperty(material.iridescence, "isEnabled");
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Enabled", target: material.iridescence, propertyKey: "isEnabled" }), jsxs(Collapse, { visible: isEnabled, children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Intensity", target: material.iridescence, propertyKey: "intensity", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "IOR", description: "Index of Refraction", target: material.iridescence, propertyKey: "indexOfRefraction", min: 1, max: 3, step: 0.01 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Minimum Thickness", target: material.iridescence, propertyKey: "minimumThickness", min: 0, max: 1000, step: 10 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Maxium Thickness", target: material.iridescence, propertyKey: "maximumThickness", min: 0, max: 1000, step: 10 }), jsx(FileUploadLine, { label: "Iridescence", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
-                            if (files.length > 0) {
-                                UpdateTexture$1(files[0], material, (texture) => (material.iridescence.texture = texture));
-                            }
-                        } }), jsx(FileUploadLine, { label: "Thickness", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
-                            if (files.length > 0) {
-                                UpdateTexture$1(files[0], material, (texture) => (material.iridescence.thicknessTexture = texture));
-                            }
-                        } })] })] }));
-};
-const PBRBaseMaterialAnisotropicProperties = (props) => {
-    const { material } = props;
-    const isEnabled = useProperty(material.anisotropy, "isEnabled");
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Enabled", target: material.anisotropy, propertyKey: "isEnabled" }), jsxs(Collapse, { visible: isEnabled, children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Legacy Mode", target: material.anisotropy, propertyKey: "legacy" }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Intensity", target: material.anisotropy, propertyKey: "intensity", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: Vector2PropertyLine, label: "Direction", target: material.anisotropy, propertyKey: "direction" }), jsx(FileUploadLine, { label: "Anisotropic", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
-                            if (files.length > 0) {
-                                UpdateTexture$1(files[0], material, (texture) => (material.anisotropy.texture = texture));
-                            }
-                        } })] })] }));
-};
-const PBRBaseMaterialSheenProperties = (props) => {
-    const { material } = props;
-    const isEnabled = useProperty(material.sheen, "isEnabled");
-    const useRoughness = useProperty(material.sheen, "_useRoughness");
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Enabled", target: material.sheen, propertyKey: "isEnabled" }), jsxs(Collapse, { visible: isEnabled, children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Link to Albedo", target: material.sheen, propertyKey: "linkSheenWithAlbedo" }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Intensity", target: material.sheen, propertyKey: "intensity", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Color", target: material.sheen, propertyKey: "color", isLinearMode: true }), jsx(FileUploadLine, { label: "Sheen", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
-                            if (files.length > 0) {
-                                UpdateTexture$1(files[0], material, (texture) => (material.sheen.texture = texture));
-                            }
-                        } }), jsx(FileUploadLine, { label: "Roughness", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
-                            if (files.length > 0) {
-                                UpdateTexture$1(files[0], material, (texture) => (material.sheen.textureRoughness = texture));
-                            }
-                        } }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use Roughness", target: material.sheen, propertyKey: "_useRoughness" }), jsx(Collapse, { visible: useRoughness, children: jsx(BoundProperty, { nullable: true, component: SyncedSliderPropertyLine, label: "Roughness", target: material.sheen, propertyKey: "roughness", defaultValue: 0, min: 0, max: 1, step: 0.01 }) }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use Roughness from Main Texture", target: material.sheen, propertyKey: "useRoughnessFromMainTexture" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Albedo Scaling", target: material.sheen, propertyKey: "albedoScaling" })] })] }));
+    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" })] })) }));
 };
 
 const useStyles$d = makeStyles({
@@ -6537,25 +6474,178 @@ const MaterialSelectorPropertyLine = (props) => jsx(PropertyLine, { ...props, ch
 const TextureSelectorPropertyLine = (props) => jsx(PropertyLine, { ...props, children: jsx(TextureSelector, { ...props }) });
 const SkeletonSelectorPropertyLine = (props) => jsx(PropertyLine, { ...props, children: jsx(SkeletonSelector, { ...props }) });
 
-/**
- * Displays the lighting and color properties of a PBR material.
- * @param props - The required properties
- * @returns A JSX element representing the lighting and color properties.
- */
-const PBRMaterialLightingAndColorProperties = (props) => {
+const LightFalloffOptions = [
+    { label: "Physical", value: PBRBaseMaterial.LIGHTFALLOFF_PHYSICAL },
+    { label: "glTF", value: PBRBaseMaterial.LIGHTFALLOFF_GLTF },
+    { label: "Standard", value: PBRBaseMaterial.LIGHTFALLOFF_STANDARD },
+];
+const RealTimeFilteringQualityOptions = [
+    { label: "Low", value: Constants.TEXTURE_FILTERING_QUALITY_LOW },
+    { label: "Medium", value: Constants.TEXTURE_FILTERING_QUALITY_MEDIUM },
+    { label: "High", value: Constants.TEXTURE_FILTERING_QUALITY_HIGH },
+];
+const BaseDiffuseModelOptions = [
+    { label: "Lambert", value: Constants.MATERIAL_DIFFUSE_MODEL_LAMBERT },
+    { label: "Burley", value: Constants.MATERIAL_DIFFUSE_MODEL_BURLEY },
+    { label: "OpenPBR", value: Constants.MATERIAL_DIFFUSE_MODEL_E_OREN_NAYAR },
+];
+const DielectricSpecularModelOptions = [
+    { label: "glTF", value: Constants.MATERIAL_DIELECTRIC_SPECULAR_MODEL_GLTF },
+    { label: "OpenPBR", value: Constants.MATERIAL_DIELECTRIC_SPECULAR_MODEL_OPENPBR },
+];
+const ConductorSpecularModelOptions = [
+    { label: "glTF", value: Constants.MATERIAL_CONDUCTOR_SPECULAR_MODEL_GLTF },
+    { label: "OpenPBR", value: Constants.MATERIAL_CONDUCTOR_SPECULAR_MODEL_OPENPBR },
+];
+const DebugMode = [
+    { label: "None", value: 0 },
+    // Geometry
+    { label: "Normalized position", value: 1 },
+    { label: "Normals", value: 2 },
+    { label: "Tangents", value: 3 },
+    { label: "Bitangents", value: 4 },
+    { label: "Bump Normals", value: 5 },
+    { label: "UV1", value: 6 },
+    { label: "UV2", value: 7 },
+    { label: "ClearCoat Normals", value: 8 },
+    { label: "ClearCoat Tangents", value: 9 },
+    { label: "ClearCoat Bitangents", value: 10 },
+    { label: "Anisotropic Normals", value: 11 },
+    { label: "Anisotropic Tangents", value: 12 },
+    { label: "Anisotropic Bitangents", value: 13 },
+    // Maps
+    { label: "Albedo Map", value: 20 },
+    { label: "Ambient Map", value: 21 },
+    { label: "Opacity Map", value: 22 },
+    { label: "Emissive Map", value: 23 },
+    { label: "Light Map", value: 24 },
+    { label: "Metallic Map", value: 25 },
+    { label: "Reflectivity Map", value: 26 },
+    { label: "ClearCoat Map", value: 27 },
+    { label: "ClearCoat Tint Map", value: 28 },
+    { label: "Sheen Map", value: 29 },
+    { label: "Anisotropic Map", value: 30 },
+    { label: "Thickness Map", value: 31 },
+    { label: "Bump Map", value: 32 },
+    // Env
+    { label: "Env Refraction", value: 40 },
+    { label: "Env Reflection", value: 41 },
+    { label: "Env Clear Coat", value: 42 },
+    // Lighting
+    { label: "Direct Diffuse", value: 50 },
+    { label: "Direct Specular", value: 51 },
+    { label: "Direct Clear Coat", value: 52 },
+    { label: "Direct Sheen", value: 53 },
+    { label: "Env Irradiance", value: 54 },
+    // Lighting Params
+    { label: "Surface Albedo", value: 60 },
+    { label: "Reflectance 0", value: 61 },
+    { label: "Metallic", value: 62 },
+    { label: "Metallic F0", value: 71 },
+    { label: "Roughness", value: 63 },
+    { label: "AlphaG", value: 64 },
+    { label: "NdotV", value: 65 },
+    { label: "ClearCoat Color", value: 66 },
+    { label: "ClearCoat Roughness", value: 67 },
+    { label: "ClearCoat NdotV", value: 68 },
+    { label: "Transmittance", value: 69 },
+    { label: "Refraction Transmittance", value: 70 },
+    { label: "Glossiness", value: 72 },
+    { label: "Base Color", value: 73 },
+    { label: "Specular Color", value: 74 },
+    { label: "Emissive Color", value: 75 },
+    // Misc
+    { label: "SEO", value: 80 },
+    { label: "EHO", value: 81 },
+    { label: "Energy Factor", value: 82 },
+    { label: "Specular Reflectance", value: 83 },
+    { label: "Clear Coat Reflectance", value: 84 },
+    { label: "Sheen Reflectance", value: 85 },
+    { label: "Luminance Over Alpha", value: 86 },
+    { label: "Alpha", value: 87 },
+    { label: "Albedo Alpha", value: 88 },
+    { label: "Ambient occlusion color", value: 89 },
+];
+const PBRBaseMaterialGeneralProperties = (props) => {
     const { material } = props;
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: Color3PropertyLine, label: "Albedo", target: material, propertyKey: "albedoColor", isLinearMode: true }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Base Weight", target: material, propertyKey: "baseWeight", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Reflectivity", target: material, propertyKey: "reflectivityColor", isLinearMode: true }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Micro-Surface", target: material, propertyKey: "microSurface", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Emissive", target: material, propertyKey: "emissiveColor", isLinearMode: true }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Ambient", target: material, propertyKey: "ambientColor", isLinearMode: true }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use Physical Light Falloff", target: material, propertyKey: "usePhysicalLightFalloff" })] }));
+    return (jsx(Fragment, { children: jsx(BoundProperty, { component: SwitchPropertyLine, label: "Disable Lighting", target: material, propertyKey: "_disableLighting" }) }));
 };
-/**
- * Displays the texture channel properties of a PBR material.
- * @param props - The required properties
- * @returns A JSX element representing the texture channels.
- */
-const PBRMaterialTextureProperties = (props) => {
+const PBRBaseMaterialTransparencyProperties = (props) => {
+    const { material } = props;
+    return (jsxs(Fragment, { children: [material._albedoTexture && (jsx(Fragment, { children: jsx(BoundProperty, { component: SwitchPropertyLine, label: "Albedo texture has alpha", target: material._albedoTexture, propertyKey: "hasAlpha" }) })), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use alpha from albedo texture", target: material, propertyKey: "_useAlphaFromAlbedoTexture" })] }));
+};
+const PBRBaseMaterialChannelsProperties = (props) => {
+    const { material, selectionService } = props;
+    const scene = material.getScene();
+    const selectEntity = (entity) => (selectionService.selectedEntity = entity);
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Albedo", target: material, propertyKey: "_albedoTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Base Weight", target: material, propertyKey: "_baseWeightTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Base Diffuse Roughness", target: material, propertyKey: "_baseDiffuseRoughnessTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Metallic Roughness", target: material, propertyKey: "_metallicTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Reflection", target: material, propertyKey: "_reflectionTexture", scene: scene, cubeOnly: true, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Refraction", target: material.subSurface, propertyKey: "refractionTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Reflectivity", target: material, propertyKey: "_reflectivityTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Micro Surface", target: material, propertyKey: "_microSurfaceTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Bump", target: material, propertyKey: "_bumpTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Emissive", target: material, propertyKey: "_emissiveTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Opacity", target: material, propertyKey: "_opacityTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Ambient", target: material, propertyKey: "_ambientTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Lightmap", target: material, propertyKey: "_lightmapTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Detailmap", target: material.detailMap, propertyKey: "texture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use Lightmap as Shadowmap", target: material, propertyKey: "_useLightmapAsShadowmap" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use Detailmap", target: material.detailMap, propertyKey: "isEnabled" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use Decalmap", target: material.decalMap, propertyKey: "isEnabled" })] }));
+};
+const PBRBaseMaterialLightingAndColorProperties = (props) => {
+    const { material } = props;
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: Color3PropertyLine, label: "Albedo", target: material, propertyKey: "_albedoColor", isLinearMode: true }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Base Weight", target: material, propertyKey: "_baseWeight", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Reflectivity", target: material, propertyKey: "_reflectivityColor", isLinearMode: true }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Micro Surface", target: material, propertyKey: "_microSurface", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Emissive", target: material, propertyKey: "_emissiveColor", isLinearMode: true }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Ambient", target: material, propertyKey: "_ambientColor", isLinearMode: true }), jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "Light Falloff", target: material, propertyKey: "_lightFalloff", options: LightFalloffOptions })] }));
+};
+const PBRBaseMaterialMetallicWorkflowProperties = (props) => {
+    const { material, selectionService } = props;
+    const scene = material.getScene();
+    const selectEntity = (entity) => (selectionService.selectedEntity = entity);
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Metallic", target: material, propertyKey: "_metallic", min: 0, max: 1, step: 0.01, nullable: true, defaultValue: 0 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Roughness", target: material, propertyKey: "_roughness", min: 0, max: 1, step: 0.01, nullable: true, defaultValue: 0 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Base Diffuse Roughness", target: material, propertyKey: "_baseDiffuseRoughness", min: 0, max: 1, step: 0.01, nullable: true, defaultValue: 0 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Index of Refraction", target: material.subSurface, propertyKey: "indexOfRefraction", min: 1, max: 3, step: 0.01 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "F0 Factor", target: material, propertyKey: "_metallicF0Factor", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Reflectance Color", target: material, propertyKey: "_metallicReflectanceColor", isLinearMode: true }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Metallic Only", description: "Use only metallic from MetallicReflectance texture", target: material, propertyKey: "_useOnlyMetallicFromMetallicReflectanceTexture" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Metallic Reflectance", target: material, propertyKey: "_metallicReflectanceTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Reflectance", target: material, propertyKey: "_reflectanceTexture", scene: scene, onLink: selectEntity, defaultValue: null })] }));
+};
+const PBRBaseMaterialClearCoatProperties = (props) => {
+    const { material, selectionService } = props;
+    const scene = material.getScene();
+    const selectEntity = (entity) => (selectionService.selectedEntity = entity);
+    const isEnabled = useProperty(material.clearCoat, "isEnabled");
+    const isTintEnabled = useProperty(material.clearCoat, "isTintEnabled");
+    const bumpTexture = useProperty(material.clearCoat, "bumpTexture");
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Enabled", target: material.clearCoat, propertyKey: "isEnabled" }), jsxs(Collapse, { visible: isEnabled, children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Intensity", target: material.clearCoat, propertyKey: "intensity", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Roughness", target: material.clearCoat, propertyKey: "roughness", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "IOR", description: "Index of Refraction", target: material.clearCoat, propertyKey: "indexOfRefraction", min: 1, max: 3, step: 0.01 }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Remap F0", target: material.clearCoat, propertyKey: "remapF0OnInterfaceChange" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Clear Coat", target: material.clearCoat, propertyKey: "texture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Roughness", target: material.clearCoat, propertyKey: "textureRoughness", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Bump", target: material.clearCoat, propertyKey: "bumpTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(Collapse, { visible: bumpTexture !== null, children: jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Bump Strength", target: bumpTexture, propertyKey: "level", min: 0, max: 2, step: 0.01 }) }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use Roughness from Main Texture", target: material.clearCoat, propertyKey: "useRoughnessFromMainTexture" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Tint", target: material.clearCoat, propertyKey: "isTintEnabled" }), jsxs(Collapse, { visible: isTintEnabled, children: [jsx(BoundProperty, { component: Color3PropertyLine, label: "Tint Color", target: material.clearCoat, propertyKey: "tintColor", isLinearMode: true }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "At Distance", target: material.clearCoat, propertyKey: "tintColorAtDistance", min: 0, max: 20, step: 0.1 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Tint Thickness", target: material.clearCoat, propertyKey: "tintThickness", min: 0, max: 20, step: 0.1 }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Tint", target: material.clearCoat, propertyKey: "tintTexture", scene: scene, onLink: selectEntity, defaultValue: null })] })] })] }));
+};
+const PBRBaseMaterialIridescenceProperties = (props) => {
     const { material, selectionService } = props;
     const scene = material.getScene();
     const selectEntity = (entity) => (selectionService.selectedEntity = entity);
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Albedo", target: material, propertyKey: "albedoTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Base Weight", target: material, propertyKey: "baseWeightTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Base Diffuse Roughness", target: material, propertyKey: "baseDiffuseRoughnessTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Metallic Roughness", target: material, propertyKey: "metallicTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Reflection", target: material, propertyKey: "reflectionTexture", scene: scene, cubeOnly: true, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Refraction", target: material, propertyKey: "refractionTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Reflectivity", target: material, propertyKey: "reflectivityTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Micro-surface", target: material, propertyKey: "microSurfaceTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Bump", target: material, propertyKey: "bumpTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Emissive", target: material, propertyKey: "emissiveTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Opacity", target: material, propertyKey: "opacityTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Ambient", target: material, propertyKey: "ambientTexture", scene: scene, onLink: selectEntity, defaultValue: null }), "component=", TextureSelectorPropertyLine, jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Lightmap", target: material, propertyKey: "lightmapTexture", scene: scene, onLink: selectEntity, defaultValue: null })] }));
+    const isEnabled = useProperty(material.iridescence, "isEnabled");
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Enabled", target: material.iridescence, propertyKey: "isEnabled" }), jsxs(Collapse, { visible: isEnabled, children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Intensity", target: material.iridescence, propertyKey: "intensity", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "IOR", description: "Index of Refraction", target: material.iridescence, propertyKey: "indexOfRefraction", min: 1, max: 3, step: 0.01 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Min Thickness", target: material.iridescence, propertyKey: "minimumThickness", min: 0, max: 1000, step: 10 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Max Thickness", target: material.iridescence, propertyKey: "maximumThickness", min: 0, max: 1000, step: 10 }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Iridescence", target: material.iridescence, propertyKey: "texture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Thickness", target: material.iridescence, propertyKey: "thicknessTexture", scene: scene, onLink: selectEntity, defaultValue: null })] })] }));
+};
+const PBRBaseMaterialAnisotropicProperties = (props) => {
+    const { material, selectionService } = props;
+    const scene = material.getScene();
+    const selectEntity = (entity) => (selectionService.selectedEntity = entity);
+    const isEnabled = useProperty(material.anisotropy, "isEnabled");
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Enabled", target: material.anisotropy, propertyKey: "isEnabled" }), jsxs(Collapse, { visible: isEnabled, children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Legacy Mode", target: material.anisotropy, propertyKey: "legacy" }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Intensity", target: material.anisotropy, propertyKey: "intensity", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: Vector2PropertyLine, label: "Direction", target: material.anisotropy, propertyKey: "direction" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Anisotropic", target: material.anisotropy, propertyKey: "texture", scene: scene, onLink: selectEntity, defaultValue: null })] })] }));
+};
+const PBRBaseMaterialSheenProperties = (props) => {
+    const { material, selectionService } = props;
+    const scene = material.getScene();
+    const selectEntity = (entity) => (selectionService.selectedEntity = entity);
+    const isEnabled = useProperty(material.sheen, "isEnabled");
+    const useRoughness = useProperty(material.sheen, "_useRoughness");
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Enabled", target: material.sheen, propertyKey: "isEnabled" }), jsxs(Collapse, { visible: isEnabled, children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Link to Albedo", target: material.sheen, propertyKey: "linkSheenWithAlbedo" }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Intensity", target: material.sheen, propertyKey: "intensity", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Color", target: material.sheen, propertyKey: "color", isLinearMode: true }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Sheen", target: material.sheen, propertyKey: "texture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Roughness", target: material.sheen, propertyKey: "textureRoughness", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use Roughness", target: material.sheen, propertyKey: "_useRoughness" }), jsx(Collapse, { visible: useRoughness, children: jsx(BoundProperty, { nullable: true, component: SyncedSliderPropertyLine, label: "Roughness", target: material.sheen, propertyKey: "roughness", defaultValue: 0, min: 0, max: 1, step: 0.01 }) }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use Roughness from Main Texture", target: material.sheen, propertyKey: "useRoughnessFromMainTexture" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Albedo Scaling", target: material.sheen, propertyKey: "albedoScaling" })] })] }));
+};
+const PBRBaseMaterialSubSurfaceProperties = (props) => {
+    const { material, selectionService } = props;
+    const scene = material.getScene();
+    const selectEntity = (entity) => (selectionService.selectedEntity = entity);
+    const useScattering = useProperty(material.subSurface, "isScatteringEnabled") && !!material.getScene().prePassRenderer && !!material.getScene().subSurfaceConfiguration;
+    const useRefraction = useProperty(material.subSurface, "isRefractionEnabled");
+    const useDispersion = useProperty(material.subSurface, "isDispersionEnabled");
+    const useTranslucency = useProperty(material.subSurface, "isTranslucencyEnabled");
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Thickness", target: material.subSurface, propertyKey: "thicknessTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Min Thickness", target: material.subSurface, propertyKey: "minimumThickness", min: 0, max: 10, step: 0.1 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Max Thickness", target: material.subSurface, propertyKey: "maximumThickness", min: 0, max: 10, step: 0.1 }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Mask From Thickness", target: material.subSurface, propertyKey: "useMaskFromThicknessTexture" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "glTF-Style Textures", target: material.subSurface, propertyKey: "useGltfStyleTextures" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use Thickness as Depth", target: material.subSurface, propertyKey: "useThicknessAsDepth" }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Tint Color", target: material.subSurface, propertyKey: "tintColor", isLinearMode: true }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Scattering Enabled", target: material.subSurface, propertyKey: "isScatteringEnabled" }), jsx(Collapse, { visible: useScattering, children: jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Meters Per Unit", target: material.getScene().subSurfaceConfiguration, propertyKey: "metersPerUnit", min: 0.01, max: 2, step: 0.01 }) }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Refraction Enabled", target: material.subSurface, propertyKey: "isRefractionEnabled" }), jsxs(Collapse, { visible: useRefraction, children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Intensity", target: material.subSurface, propertyKey: "refractionIntensity", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Refraction Intensity", target: material.subSurface, propertyKey: "refractionIntensityTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Refraction", target: material.subSurface, propertyKey: "refractionTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Volume Index of Refraction", target: material.subSurface, propertyKey: "volumeIndexOfRefraction", min: 1, max: 3, step: 0.01 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Tint at Distance", target: material.subSurface, propertyKey: "tintColorAtDistance", min: 0, max: 10, step: 0.1 }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Link Refraction with Transparency", target: material.subSurface, propertyKey: "linkRefractionWithTransparency" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use Albedo to Tint Surface Transparency", target: material.subSurface, propertyKey: "useAlbedoToTintRefraction" })] }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Dispersion Enabled", target: material.subSurface, propertyKey: "isDispersionEnabled" }), jsx(Collapse, { visible: useDispersion, children: jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Intensity", target: material.subSurface, propertyKey: "dispersion", min: 0, max: 5, step: 0.01 }) }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Translucency Enabled", target: material.subSurface, propertyKey: "isTranslucencyEnabled" }), jsxs(Collapse, { visible: useTranslucency, children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Intensity", target: material.subSurface, propertyKey: "translucencyIntensity", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Intensity Texture", target: material.subSurface, propertyKey: "translucencyIntensityTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Diffusion Distance", target: material.subSurface, propertyKey: "diffusionDistance", isLinearMode: true }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use Albedo to Tint Surface Translucency", target: material.subSurface, propertyKey: "useAlbedoToTintTranslucency" }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Translucency Tint", target: material.subSurface, propertyKey: "translucencyColor", isLinearMode: true, nullable: true, defaultValue: Color3.White() }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Translucency Tint Texture", target: material.subSurface, propertyKey: "translucencyColorTexture", scene: scene, onLink: selectEntity, defaultValue: null })] })] }));
+};
+const PBRBaseMaterialLevelProperties = (props) => {
+    const { material } = props;
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Environment", target: material, propertyKey: "_environmentIntensity", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Specular", target: material, propertyKey: "_specularIntensity", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Emissive", target: material, propertyKey: "_emissiveIntensity", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Direct", target: material, propertyKey: "_directIntensity", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Bump Strength", target: material._bumpTexture, propertyKey: "level", min: 0, max: 2, step: 0.01 }), jsx(Collapse, { visible: !!material._ambientTexture, children: jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Ambient Strength", target: material, propertyKey: "_ambientTextureStrength", min: 0, max: 1, step: 0.01 }) }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Reflection Strength", target: material._reflectionTexture, propertyKey: "level", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Clear Coat", target: material.clearCoat.texture, propertyKey: "level", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Clear Coat Bump", target: material.clearCoat.bumpTexture, propertyKey: "level", min: 0, max: 2, step: 0.01 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Anisotropic", target: material.anisotropy.texture, propertyKey: "level", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Sheen", target: material.sheen.texture, propertyKey: "level", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Thickness", target: material.subSurface.thicknessTexture, propertyKey: "level", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Refraction", target: material.subSurface.refractionTexture, propertyKey: "level", min: 0, max: 1, step: 0.01 }), jsxs(Collapse, { visible: material.detailMap.isEnabled, children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Detailmap Diffuse", target: material.detailMap, propertyKey: "diffuseBlendLevel", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Detailmap Bump", target: material.detailMap, propertyKey: "bumpLevel", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Detailmap Roughness", target: material.detailMap, propertyKey: "roughnessBlendLevel", min: 0, max: 1, step: 0.01 })] })] }));
+};
+const PBRBaseMaterialRenderingProperties = (props) => {
+    const { material } = props;
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Alpha from Albedo", target: material, propertyKey: "_useAlphaFromAlbedoTexture" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Ambient in Grayscale", target: material, propertyKey: "_useAmbientInGrayScale" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Radiance over Alpha", target: material, propertyKey: "_useRadianceOverAlpha" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Micro-surface from Ref. Map Alpha", target: material, propertyKey: "_useMicroSurfaceFromReflectivityMapAlpha" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Specular over Alpha", target: material, propertyKey: "_useSpecularOverAlpha" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Specular Anti-aliasing", target: material, propertyKey: "_enableSpecularAntiAliasing" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Realtime Filtering", target: material, propertyKey: "realTimeFiltering" }), jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "Realtime Filtering Quality", target: material, propertyKey: "realTimeFilteringQuality", options: RealTimeFilteringQualityOptions }), jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "Base Diffuse Model", target: material.brdf, propertyKey: "baseDiffuseModel", options: BaseDiffuseModelOptions }), jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "Dielectric Specular Model", target: material.brdf, propertyKey: "dielectricSpecularModel", options: DielectricSpecularModelOptions }), jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "Conductor Specular Model", target: material.brdf, propertyKey: "conductorSpecularModel", options: ConductorSpecularModelOptions })] }));
+};
+const PBRBaseMaterialAdvancedProperties = (props) => {
+    const { material } = props;
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Energy Conservation", target: material.brdf, propertyKey: "useEnergyConservation" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Spherical Harmonics", target: material.brdf, propertyKey: "useSphericalHarmonics" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Radiance Occlusion", target: material, propertyKey: "_useRadianceOcclusion" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Horizon Occlusion", target: material, propertyKey: "_useHorizonOcclusion" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Mix Irradiance with Rough Radiance", target: material.brdf, propertyKey: "mixIblRadianceWithIrradiance" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use Legacy Specular Energy Conservation", target: material.brdf, propertyKey: "useLegacySpecularEnergyConservation" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Unlit", target: material, propertyKey: "_unlit" })] }));
+};
+const PBRBaseMaterialDebugProperties = (props) => {
+    const { material } = 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)
@@ -6732,6 +6822,20 @@ const SkyMaterialProperties = (props) => {
     return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Azimuth", description: `Azimuth angle in ${useDegrees ? "degrees" : "radians"}`, target: material, propertyKey: "azimuth", min: toDisplayAngle(0), max: toDisplayAngle(Math.PI * 2), step: toDisplayAngle(0.001), convertTo: toDisplayAngle, convertFrom: fromDisplayAngle, docLink: "https://doc.babylonjs.com/toolsAndResources/assetLibraries/materialsLibrary/skyMat/#configuring-the-sky-material" }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Inclination", description: `Inclination angle in ${useDegrees ? "degrees" : "radians"}`, target: material, propertyKey: "inclination", min: toDisplayAngle(0), max: toDisplayAngle(Math.PI / 2), step: toDisplayAngle(0.001), convertTo: toDisplayAngle, convertFrom: fromDisplayAngle, docLink: "https://doc.babylonjs.com/toolsAndResources/assetLibraries/materialsLibrary/skyMat/#configuring-the-sky-material" }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Turbidity", description: "Atmospheric turbidity.", target: material, propertyKey: "turbidity", min: 0, max: 100, step: 0.1, docLink: "https://doc.babylonjs.com/toolsAndResources/assetLibraries/materialsLibrary/skyMat/#configuring-the-sky-material" }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Luminance", description: "Brightness of the sky (0 to 1).", target: material, propertyKey: "luminance", min: 0, max: 1, step: 0.001, docLink: "https://doc.babylonjs.com/toolsAndResources/assetLibraries/materialsLibrary/skyMat/#configuring-the-sky-material" }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Rayleigh", description: "Rayleigh scattering coefficient (0 to 4).", target: material, propertyKey: "rayleigh", min: 0, max: 4, step: 0.001, docLink: "https://doc.babylonjs.com/toolsAndResources/assetLibraries/materialsLibrary/skyMat/#configuring-the-sky-material" }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Mie Directional G", description: "Mie directional scattering (0 to 1).", target: material, propertyKey: "mieDirectionalG", min: 0, max: 1, step: 0.001, docLink: "https://doc.babylonjs.com/toolsAndResources/assetLibraries/materialsLibrary/skyMat/#configuring-the-sky-material" }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Mie Coefficient", description: "Mie scattering coefficient (0 to 1).", target: material, propertyKey: "mieCoefficient", min: 0, max: 1, step: 0.001, docLink: "https://doc.babylonjs.com/toolsAndResources/assetLibraries/materialsLibrary/skyMat/#configuring-the-sky-material" }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Distance", description: "Distance to the sky dome (0 to 1000 units).", target: material, propertyKey: "distance", min: 0, max: 1000, step: 0.1, docLink: "https://doc.babylonjs.com/toolsAndResources/assetLibraries/materialsLibrary/skyMat/#configuring-the-sky-material" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use Sun Pos", description: "Enable custom sun position.", target: material, propertyKey: "useSunPosition", docLink: "https://doc.babylonjs.com/toolsAndResources/assetLibraries/materialsLibrary/skyMat/#configuring-the-sky-material" }), jsx(BoundProperty, { component: Vector3PropertyLine, label: "Sun Position", description: "Custom sun position (Vector3).", target: material, propertyKey: "sunPosition", docLink: "https://doc.babylonjs.com/toolsAndResources/assetLibraries/materialsLibrary/skyMat/#configuring-the-sky-material" }), jsx(BoundProperty, { component: Vector3PropertyLine, label: "Camera Offset", description: "Offset for the camera (Vector3).", target: material, propertyKey: "cameraOffset", docLink: "https://doc.babylonjs.com/toolsAndResources/assetLibraries/materialsLibrary/skyMat/#keeping-the-horizon-relative-to-the-camera-elevation" })] }));
 };
 
+const StandardMaterialGeneralProperties = (props) => {
+    const { material } = props;
+    return (jsx(Fragment, { children: jsx(BoundProperty, { component: SwitchPropertyLine, label: "Disable Lighting", target: material, propertyKey: "disableLighting" }) }));
+};
+const StandardMaterialTransparencyProperties = (props) => {
+    const { material } = props;
+    return (jsxs(Fragment, { children: [material.diffuseTexture && (jsx(Fragment, { children: jsx(BoundProperty, { component: SwitchPropertyLine, label: "Diffuse Texture has Alpha", target: material.diffuseTexture, propertyKey: "hasAlpha" }) })), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use Alpha from Diffuse Texture", target: material, propertyKey: "useAlphaFromDiffuseTexture" })] }));
+};
+const StandardMaterialTexturesProperties = (props) => {
+    const { material, selectionService } = props;
+    const scene = material.getScene();
+    const selectEntity = (entity) => (selectionService.selectedEntity = entity);
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Diffuse", target: material, propertyKey: "diffuseTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Specular", target: material, propertyKey: "specularTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Reflection", target: material, propertyKey: "reflectionTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Refraction", target: material, propertyKey: "refractionTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Emissive", target: material, propertyKey: "emissiveTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Bump", target: material, propertyKey: "bumpTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Opacity", target: material, propertyKey: "opacityTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Ambient", target: material, propertyKey: "ambientTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Lightmap", target: material, propertyKey: "lightmapTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Detailmap", target: material.detailMap, propertyKey: "texture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use Lightmap as Shadowmap", target: material, propertyKey: "useLightmapAsShadowmap" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use Detailmap", target: material.detailMap, propertyKey: "isEnabled" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use Decalmap", target: material.decalMap, propertyKey: "isEnabled" })] }));
+};
 /**
  * Displays the levels properties of a standard material.
  * @param props - The required properties
@@ -6751,16 +6855,6 @@ const StandardMaterialLightingAndColorProperties = (props) => {
     const { standardMaterial } = props;
     return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: Color3PropertyLine, label: "Diffuse Color", target: standardMaterial, propertyKey: "diffuseColor" }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Specular Color", target: standardMaterial, propertyKey: "specularColor" }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Specular Power", target: standardMaterial, propertyKey: "specularPower", min: 0, max: 128, step: 0.1 }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Emissive Color", target: standardMaterial, propertyKey: "emissiveColor" }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Ambient Color", target: standardMaterial, propertyKey: "ambientColor" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use Specular Over Alpha", target: standardMaterial, propertyKey: "useSpecularOverAlpha" })] }));
 };
-/**
- * Displays the texture properties of a standard material.
- * @param props - The required properties
- * @returns A JSX element representing the texture properties.
- */
-const StandardMaterialTexturesProperties = (props) => {
-    const { standardMaterial } = props;
-    // TODO: Add buttons and links for adding the textures themselves
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use Lightmap as Shadowmap", target: standardMaterial, propertyKey: "useLightmapAsShadowmap" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use Detailmap", target: standardMaterial.detailMap, propertyKey: "isEnabled" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use Decalmap", target: standardMaterial.decalMap, propertyKey: "isEnabled" })] }));
-};
 
 const MaterialPropertiesServiceDefinition = {
     friendlyName: "Material Properties",
@@ -6788,9 +6882,17 @@ const MaterialPropertiesServiceDefinition = {
             key: "Standard Material Properties",
             predicate: (entity) => entity instanceof StandardMaterial,
             content: [
+                {
+                    section: "General",
+                    component: ({ context }) => jsx(StandardMaterialGeneralProperties, { material: context }),
+                },
+                {
+                    section: "Transparency",
+                    component: ({ context }) => jsx(StandardMaterialTransparencyProperties, { material: context }),
+                },
                 {
                     section: "Textures",
-                    component: ({ context }) => jsx(StandardMaterialTexturesProperties, { standardMaterial: context }),
+                    component: ({ context }) => jsx(StandardMaterialTexturesProperties, { material: context, selectionService: selectionService }),
                 },
                 {
                     section: "Lighting & Colors",
@@ -6806,50 +6908,80 @@ const MaterialPropertiesServiceDefinition = {
                 },
             ],
         });
+        const pbrMaterialPropertyChangedObserver = propertiesService.onPropertyChanged.add((changeInfo) => {
+            /**
+             * In Inspector V2, all PBR materials (PBRMaterial, PBRMetallicRoughnessMaterial, PBRSpecularGlossinessMaterial) are edited using the PBRBaseMaterial properties.
+             * Therefore, when a property of PBRBaseMaterial is changed, we need to mark the material as dirty to ensure the changes are reflected correctly because none of the properties
+             * of PBRBaseMaterial are tagged with a decorator that would automatically mark the material as dirty.
+             */
+            if (changeInfo.entity instanceof PBRBaseMaterial) {
+                changeInfo.entity.markAsDirty(Material.AllDirtyFlag);
+            }
+        });
         const pbrBaseMaterialPropertiesRegistration = propertiesService.addSectionContent({
             key: "PBR Base Material Properties",
             predicate: (entity) => entity instanceof PBRBaseMaterial,
             content: [
+                {
+                    section: "General",
+                    component: ({ context }) => jsx(PBRBaseMaterialGeneralProperties, { material: context }),
+                },
+                {
+                    section: "Transparency",
+                    component: ({ context }) => jsx(PBRBaseMaterialTransparencyProperties, { material: context }),
+                },
+                {
+                    section: "Textures",
+                    component: ({ context }) => jsx(PBRBaseMaterialChannelsProperties, { material: context, selectionService: selectionService }),
+                },
+                {
+                    section: "Lighting & Colors",
+                    component: ({ context }) => jsx(PBRBaseMaterialLightingAndColorProperties, { material: context }),
+                },
+                {
+                    section: "Metallic Workflow",
+                    component: ({ context }) => jsx(PBRBaseMaterialMetallicWorkflowProperties, { material: context, selectionService: selectionService }),
+                },
                 {
                     section: "Clear Coat",
-                    component: ({ context }) => jsx(PBRBaseMaterialClearCoatProperties, { material: context }),
+                    component: ({ context }) => jsx(PBRBaseMaterialClearCoatProperties, { material: context, selectionService: selectionService }),
                 },
                 {
                     section: "Iridescence",
-                    component: ({ context }) => jsx(PBRBaseMaterialIridescenceProperties, { material: context }),
+                    component: ({ context }) => jsx(PBRBaseMaterialIridescenceProperties, { material: context, selectionService: selectionService }),
                 },
                 {
                     section: "Anisotropic",
-                    component: ({ context }) => jsx(PBRBaseMaterialAnisotropicProperties, { material: context }),
+                    component: ({ context }) => jsx(PBRBaseMaterialAnisotropicProperties, { material: context, selectionService: selectionService }),
                 },
                 {
                     section: "Sheen",
-                    component: ({ context }) => jsx(PBRBaseMaterialSheenProperties, { material: context }),
+                    component: ({ context }) => jsx(PBRBaseMaterialSheenProperties, { material: context, selectionService: selectionService }),
                 },
-            ],
-        });
-        const pbrMaterialPropertiesRegistration = propertiesService.addSectionContent({
-            key: "PBR Material Properties",
-            predicate: (entity) => entity instanceof PBRMaterial,
-            content: [
                 {
-                    section: "Textures",
-                    component: ({ context }) => jsx(PBRMaterialTextureProperties, { material: context, selectionService: selectionService }),
+                    section: "SubSurface",
+                    component: ({ context }) => jsx(PBRBaseMaterialSubSurfaceProperties, { material: context, selectionService: selectionService }),
                 },
                 {
-                    section: "Lighting & Colors",
-                    component: ({ context }) => jsx(PBRMaterialLightingAndColorProperties, { material: context }),
+                    section: "Levels",
+                    component: ({ context }) => jsx(PBRBaseMaterialLevelProperties, { material: context }),
+                },
+                {
+                    section: "Rendering",
+                    component: ({ context }) => jsx(PBRBaseMaterialRenderingProperties, { material: context }),
                 },
-            ],
-        });
-        const pbrMaterialNormalMapsContentRegistration = propertiesService.addSectionContent({
-            key: "PBR Material Normal Map Properties",
-            predicate: (entity) => entity instanceof PBRMaterial || entity instanceof PBRBaseSimpleMaterial,
-            content: [
                 {
                     section: "Normal Map",
                     component: ({ context }) => jsx(NormalMapProperties, { material: context }),
                 },
+                {
+                    section: "Advanced",
+                    component: ({ context }) => jsx(PBRBaseMaterialAdvancedProperties, { material: context }),
+                },
+                {
+                    section: "Debug",
+                    component: ({ context }) => jsx(PBRBaseMaterialDebugProperties, { material: context }),
+                },
             ],
         });
         const openPBRMaterialPropertiesRegistration = propertiesService.addSectionContent({
@@ -6908,11 +7040,10 @@ const MaterialPropertiesServiceDefinition = {
         });
         return {
             dispose: () => {
+                pbrMaterialPropertyChangedObserver.remove();
                 materialContentRegistration.dispose();
                 standardMaterialContentRegistration.dispose();
                 pbrBaseMaterialPropertiesRegistration.dispose();
-                pbrMaterialPropertiesRegistration.dispose();
-                pbrMaterialNormalMapsContentRegistration.dispose();
                 openPBRMaterialPropertiesRegistration.dispose();
                 skyMaterialRegistration.dispose();
                 multiMaterialContentRegistration.dispose();
@@ -13221,4 +13352,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-DShP7wwE.js.map
+//# sourceMappingURL=index-D450kD0o.js.map