@babylonjs/inspector 8.46.1-preview → 8.46.2-preview

package/lib/{index-9hCGH1vt.js → index-CxcZXjGK.js}

@@ -1,11 +1,11 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { createContext, useContext, useCallback, useMemo, useEffect, useState, useRef, forwardRef, isValidElement, cloneElement, Children, useLayoutEffect, useImperativeHandle, createElement, Suspense, useReducer, lazy } from 'react';
+import { createContext, useContext, useCallback, useMemo, useEffect, useState, useRef, forwardRef, isValidElement, cloneElement, Children, useLayoutEffect, useImperativeHandle, createElement, Suspense, Fragment as Fragment$1, useReducer, lazy } from 'react';
 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 { GetClassName } from '@babylonjs/core/Misc/typeStore.js';
-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, RectangleLandscapeRegular, BorderOutsideRegular, BorderNoneRegular, MyLocationRegular, CameraRegular, LightbulbRegular, 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, Subtitle2, 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, AddRegular, CopyRegular, LinkDismissRegular, LinkEditRegular, SaveRegular, ArrowUndoRegular, BracesRegular, BracesDismiss16Regular, 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, RectangleLandscapeRegular, BorderOutsideRegular, BorderNoneRegular, MyLocationRegular, CameraRegular, LightbulbRegular, 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 { useLocalStorage, useTernaryDarkMode } from 'usehooks-ts';
 import { AsyncLock } from '@babylonjs/core/Misc/asyncLock.js';
@@ -72,6 +72,9 @@ 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 { GradientBlockColorStep } from '@babylonjs/core/Materials/Node/Blocks/gradientBlock.js';
+import { NodeMaterialBlockConnectionPointTypes } from '@babylonjs/core/Materials/Node/Enums/nodeMaterialBlockConnectionPointTypes.js';
+import { FactorGradient, Color3Gradient, ColorGradient } from '@babylonjs/core/Misc/gradients.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';
@@ -93,14 +96,19 @@ import { SphereParticleEmitter } from '@babylonjs/core/Particles/EmitterTypes/sp
 import { ConvertToNodeParticleSystemSetAsync } from '@babylonjs/core/Particles/Node/nodeParticleSystemSet.helper.js';
 import { GPUParticleSystem } from '@babylonjs/core/Particles/gpuParticleSystem.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';
 import { Attractor } from '@babylonjs/core/Particles/attractor.js';
 import { CreateSphere } from '@babylonjs/core/Meshes/Builders/sphereBuilder.js';
 import { TransformNode } from '@babylonjs/core/Meshes/transformNode.js';
 import { PhysicsPrestepType } from '@babylonjs/core/Physics/v2/IPhysicsEnginePlugin.js';
 import '@babylonjs/core/Physics/v2/physicsEngineComponent.js';
 import { PostProcess } from '@babylonjs/core/PostProcesses/postProcess.js';
+import { PostProcessRenderPipeline } from '@babylonjs/core/PostProcesses/RenderPipeline/postProcessRenderPipeline.js';
+import { DefaultRenderingPipeline } from '@babylonjs/core/PostProcesses/RenderPipeline/Pipelines/defaultRenderingPipeline.js';
+import { LensRenderingPipeline } from '@babylonjs/core/PostProcesses/RenderPipeline/Pipelines/lensRenderingPipeline.js';
+import { SSAORenderingPipeline } from '@babylonjs/core/PostProcesses/RenderPipeline/Pipelines/ssaoRenderingPipeline.js';
+import { SSAO2RenderingPipeline } from '@babylonjs/core/PostProcesses/RenderPipeline/Pipelines/ssao2RenderingPipeline.js';
+import { SSRRenderingPipeline } from '@babylonjs/core/PostProcesses/RenderPipeline/Pipelines/ssrRenderingPipeline.js';
+import { IblShadowsRenderPipeline } from '@babylonjs/core/Rendering/IBLShadows/iblShadowsRenderPipeline.js';
 import { ImageProcessingConfiguration } from '@babylonjs/core/Materials/imageProcessingConfiguration.js';
 import { Skeleton } from '@babylonjs/core/Bones/skeleton.js';
 import { Sprite } from '@babylonjs/core/Sprites/sprite.js';
@@ -824,7 +832,7 @@ const Link = forwardRef((props, ref) => {
 });
 Link.displayName = "Link";
 
-const useStyles$t = makeStyles({
+const useStyles$u = makeStyles({
     button: {
         display: "flex",
         alignItems: "center",
@@ -842,7 +850,7 @@ const ToggleButton = (props) => {
     ToggleButton.displayName = "ToggleButton";
     const { value, onChange, title, appearance = "subtle" } = props;
     const { size } = useContext(ToolContext);
-    const classes = useStyles$t();
+    const classes = useStyles$u();
     const [checked, setChecked] = useState(value);
     const toggle = useCallback(() => {
         setChecked((prev) => {
@@ -1102,7 +1110,7 @@ const LinkToEntityPropertyLine = (props) => {
         !linkedEntity.reservedDataStore?.hidden && jsx(LinkPropertyLine, { ...rest, value: linkedEntity.name, onLink: () => (selectionService.selectedEntity = linkedEntity) }));
 };
 
-const useStyles$s = makeStyles({
+const useStyles$t = makeStyles({
     accordion: {
         overflowX: "hidden",
         overflowY: "auto",
@@ -1146,13 +1154,13 @@ const useStyles$s = makeStyles({
 });
 const AccordionSection = (props) => {
     AccordionSection.displayName = "AccordionSection";
-    const classes = useStyles$s();
+    const classes = useStyles$t();
     return jsx("div", { className: classes.panelDiv, children: props.children });
 };
 const StringAccordion = Accordion$1;
 const Accordion = forwardRef((props, ref) => {
     Accordion.displayName = "Accordion";
-    const classes = useStyles$s();
+    const classes = useStyles$t();
     const { size } = useContext(ToolContext);
     const { children, highlightSections, ...rest } = props;
     const validChildren = useMemo(() => {
@@ -1283,7 +1291,7 @@ const CompactModeContextProvider = (props) => {
 function AsReadonlyArray(array) {
     return array;
 }
-const useStyles$r = makeStyles({
+const useStyles$s = makeStyles({
     rootDiv: {
         flex: 1,
         overflow: "hidden",
@@ -1292,7 +1300,7 @@ const useStyles$r = makeStyles({
     },
 });
 function ExtensibleAccordion(props) {
-    const classes = useStyles$r();
+    const classes = useStyles$s();
     const { children, sections, sectionContent, context, sectionsRef } = props;
     const defaultSections = useMemo(() => {
         const defaultSections = [];
@@ -1397,7 +1405,7 @@ function ExtensibleAccordion(props) {
                     })] }) })) }));
 }
 
-const useStyles$q = makeStyles({
+const useStyles$r = makeStyles({
     paneRootDiv: {
         display: "flex",
         flex: 1,
@@ -1410,7 +1418,7 @@ const useStyles$q = makeStyles({
  */
 const SidePaneContainer = forwardRef((props, ref) => {
     const { className, ...rest } = props;
-    const classes = useStyles$q();
+    const classes = useStyles$r();
     return (jsx("div", { className: mergeClasses(classes.paneRootDiv, className), ref: ref, ...rest, children: props.children }));
 });
 
@@ -1476,7 +1484,7 @@ const Theme = (props) => {
     return (jsx(FluentProvider, { theme: isDarkMode !== invert ? DarkTheme : LightTheme, applyStylesToPortals: applyStylesToPortals, ...rest, children: props.children }));
 };
 
-const useStyles$p = makeStyles({
+const useStyles$q = makeStyles({
     extensionTeachingPopover: {
         maxWidth: "320px",
     },
@@ -1487,7 +1495,7 @@ const useStyles$p = makeStyles({
  * @returns The teaching moment popover.
  */
 const TeachingMoment = ({ shouldDisplay, positioningRef, onOpenChange, title, description }) => {
-    const classes = useStyles$p();
+    const classes = useStyles$q();
     return (jsx(TeachingPopover, { appearance: "brand", open: shouldDisplay, positioning: { positioningRef }, onOpenChange: onOpenChange, children: jsxs(TeachingPopoverSurface, { className: classes.extensionTeachingPopover, children: [jsx(TeachingPopoverHeader, { children: title }), jsx(TeachingPopoverBody, { children: description })] }) }));
 };
 
@@ -1742,13 +1750,13 @@ function ConstructorFactory(constructor) {
     return (...args) => new constructor(...args);
 }
 
-const useStyles$o = makeStyles({
+const useStyles$p = makeStyles({
     placeholderDiv: {
         padding: `${tokens.spacingVerticalM} ${tokens.spacingHorizontalM}`,
     },
 });
 const PropertiesPane = (props) => {
-    const classes = useStyles$o();
+    const classes = useStyles$p();
     const entity = props.context;
     return entity != null ? (jsx(ExtensibleAccordion, { ...props })) : (jsx("div", { className: classes.placeholderDiv, children: jsx(Body1Strong, { italic: true, children: "No entity selected." }) }));
 };
@@ -1773,7 +1781,7 @@ function ToFeaturesString(options) {
     features.push({ key: "location", value: "no" });
     return features.map((feature) => `${feature.key}=${feature.value}`).join(",");
 }
-const useStyles$n = makeStyles({
+const useStyles$o = makeStyles({
     container: {
         display: "flex",
         flexGrow: 1,
@@ -1788,7 +1796,7 @@ const useStyles$n = makeStyles({
  */
 const ChildWindow = (props) => {
     const { id, children, onOpenChange, imperativeRef: imperativeRef } = props;
-    const classes = useStyles$n();
+    const classes = useStyles$o();
     const [windowState, setWindowState] = useState();
     const [childWindow, setChildWindow] = useState();
     const storageKey = id ? `Babylon/Settings/ChildWindow/${id}/Bounds` : null;
@@ -2000,7 +2008,7 @@ function useResizeHandle(params) {
 
 const RootComponentServiceIdentity = Symbol("RootComponent");
 const ShellServiceIdentity = Symbol("ShellService");
-const useStyles$m = makeStyles({
+const useStyles$n = makeStyles({
     mainView: {
         flex: 1,
         display: "flex",
@@ -2186,12 +2194,12 @@ const DockMenu = (props) => {
 };
 const PaneHeader = (props) => {
     const { id, title, dockOptions } = props;
-    const classes = useStyles$m();
+    const classes = useStyles$n();
     return (jsx(Theme, { invert: true, children: jsxs("div", { className: classes.paneHeaderDiv, children: [jsx(Subtitle2Stronger, { className: classes.paneHeaderText, children: title }), jsx(DockMenu, { sidePaneId: id, dockOptions: dockOptions, children: jsx(Button$1, { className: classes.paneHeaderButton, appearance: "transparent", icon: jsx(MoreHorizontalRegular, {}) }) })] }) }));
 };
 // This is a wrapper for an item in a toolbar that simply adds a teaching moment, which is useful for dynamically added items, possibly from extensions.
 const ToolbarItem = ({ verticalLocation, horizontalLocation, id, component: Component, displayName: displayName, suppressTeachingMoment }) => {
-    const classes = useStyles$m();
+    const classes = useStyles$n();
     const useTeachingMoment = useMemo(() => MakePopoverTeachingMoment(`Bar/${verticalLocation}/${horizontalLocation}/${displayName ?? id}`), [displayName, id]);
     const teachingMoment = useTeachingMoment(suppressTeachingMoment);
     return (jsxs(Fragment, { children: [jsx(TeachingMoment, { ...teachingMoment, shouldDisplay: teachingMoment.shouldDisplay && !suppressTeachingMoment, title: displayName ?? "Extension", description: `The "${displayName ?? id}" extension can be accessed here.` }), jsx("div", { className: classes.barItem, ref: teachingMoment.targetRef, children: jsx(Component, {}) })] }));
@@ -2199,7 +2207,7 @@ const ToolbarItem = ({ verticalLocation, horizontalLocation, id, component: Comp
 // TODO: Handle overflow, possibly via https://react.fluentui.dev/?path=/docs/components-overflow--docs with priority.
 // This component just renders a toolbar with left aligned toolbar items on the left and right aligned toolbar items on the right.
 const Toolbar = ({ location, components }) => {
-    const classes = useStyles$m();
+    const classes = useStyles$n();
     const leftComponents = useMemo(() => components.filter((entry) => entry.horizontalLocation === "left"), [components]);
     const rightComponents = useMemo(() => components.filter((entry) => entry.horizontalLocation === "right"), [components]);
     return (jsx(Fragment, { children: components.length > 0 && (jsxs("div", { className: `${classes.bar} ${location === "top" ? classes.barTop : null}`, children: [jsx("div", { className: classes.barLeft, children: leftComponents.map((entry) => (jsx(ToolbarItem, { verticalLocation: location, horizontalLocation: entry.horizontalLocation, id: entry.key, component: entry.component, displayName: entry.displayName, suppressTeachingMoment: entry.suppressTeachingMoment }, entry.key))) }), jsx("div", { className: classes.barRight, children: rightComponents.map((entry) => (jsx(ToolbarItem, { verticalLocation: location, horizontalLocation: entry.horizontalLocation, id: entry.key, component: entry.component, displayName: entry.displayName, suppressTeachingMoment: entry.suppressTeachingMoment }, entry.key))) })] })) }));
@@ -2209,7 +2217,7 @@ const SidePaneTab = (props) => {
     const { location, id, isSelected, dockOptions, 
     // eslint-disable-next-line @typescript-eslint/naming-convention
     icon: Icon, title, suppressTeachingMoment, } = props;
-    const classes = useStyles$m();
+    const classes = useStyles$n();
     const useTeachingMoment = useMemo(() => MakePopoverTeachingMoment(`Pane/${location}/${title ?? id}`), [title, id]);
     const teachingMoment = useTeachingMoment(suppressTeachingMoment);
     const tabClass = mergeClasses(classes.tab, isSelected ? undefined : classes.unselectedTab);
@@ -2222,7 +2230,7 @@ const SidePaneTab = (props) => {
 // In "compact" mode, the tab list is integrated into the pane itself.
 // In "full" mode, the returned tab list is later injected into the toolbar.
 function usePane(location, defaultWidth, minWidth, sidePanes, onSelectSidePane, dockOperations, toolbarMode, topBarItems, bottomBarItems) {
-    const classes = useStyles$m();
+    const classes = useStyles$n();
     const [topSelectedTab, setTopSelectedTab] = useState();
     const [bottomSelectedTab, setBottomSelectedTab] = useState();
     const [collapsed, setCollapsed] = useState(false);
@@ -2413,7 +2421,7 @@ function MakeShellServiceDefinition({ leftPaneDefaultWidth = 350, leftPaneMinWid
                 undock: () => onDockChanged.notifyObservers({ location: "right", dock: false }),
             };
             const rootComponent = () => {
-                const classes = useStyles$m();
+                const classes = useStyles$n();
                 const [sidePaneDockOverrides, setSidePaneDockOverrides] = useSidePaneDockOverrides();
                 // This function returns a promise that resolves after the dock change takes effect so that
                 // we can then select the re-docked pane.
@@ -2848,7 +2856,7 @@ function useCommandContextMenuState(commands) {
         checkmark: command.icon ? null : undefined, icon: command.icon ? jsx(command.icon, {}) : undefined, name: "toggleCommands", value: command.displayName, children: command.displayName }, command.displayName)));
     return [checkedContextMenuItems, onContextMenuCheckedValueChange, contextMenuItems];
 }
-const useStyles$l = makeStyles({
+const useStyles$m = makeStyles({
     rootDiv: {
         flex: 1,
         overflow: "hidden",
@@ -2916,14 +2924,14 @@ function MakeInlineCommandElement(command, isPlaceholder) {
 }
 const SceneTreeItem = (props) => {
     const { isSelected, select } = props;
-    const classes = useStyles$l();
+    const classes = useStyles$m();
     const [compactMode] = useCompactMode();
     const treeItemLayoutClass = mergeClasses(classes.sceneTreeItemLayout, compactMode ? classes.treeItemLayoutCompact : undefined);
     return (jsx(FlatTreeItem, { value: "scene", itemType: "leaf", parentValue: undefined, "aria-level": 1, "aria-setsize": 1, "aria-posinset": 1, onClick: select, children: jsx(TreeItemLayout, { iconBefore: jsx(GlobeRegular, {}), className: treeItemLayoutClass, style: isSelected ? { backgroundColor: tokens.colorNeutralBackground1Selected } : undefined, children: jsx(Body1Strong, { wrap: false, truncate: true, children: "Scene" }) }) }, "scene"));
 };
 const SectionTreeItem = (props) => {
     const { section, isFiltering, commandProviders, expandAll, collapseAll } = props;
-    const classes = useStyles$l();
+    const classes = useStyles$m();
     const [compactMode] = useCompactMode();
     // Get the commands that apply to this section.
     const commands = useResource(useCallback(() => {
@@ -2940,7 +2948,7 @@ const SectionTreeItem = (props) => {
 };
 const EntityTreeItem = (props) => {
     const { entityItem, isSelected, select, isFiltering, commandProviders, expandAll, collapseAll } = props;
-    const classes = useStyles$l();
+    const classes = useStyles$m();
     const [compactMode] = useCompactMode();
     const hasChildren = !!entityItem.children?.length;
     const displayInfo = useResource(useCallback(() => {
@@ -3033,7 +3041,7 @@ const EntityTreeItem = (props) => {
                         }, children: jsx(Body1, { wrap: false, truncate: true, children: name }) }) }, entityItem.entity.uniqueId) }), jsx(MenuPopover, { hidden: !hasChildren && contextMenuCommands.length === 0, children: jsxs(MenuList, { children: [hasChildren && (jsxs(Fragment, { children: [jsx(MenuItem, { icon: jsx(ArrowExpandAllRegular, {}), onClick: expandAll, children: jsx(Body1, { children: "Expand All" }) }), jsx(MenuItem, { icon: jsx(ArrowCollapseAllRegular, {}), onClick: collapseAll, children: jsx(Body1, { children: "Collapse All" }) })] })), hasChildren && contextMenuCommands.length > 0 && jsx(MenuDivider, {}), contextMenuItems] }) })] }));
 };
 const SceneExplorer = (props) => {
-    const classes = useStyles$l();
+    const classes = useStyles$m();
     const { sections, entityCommandProviders, sectionCommandProviders, scene, selectedEntity } = props;
     const [openItems, setOpenItems] = useState(new Set());
     const [sceneVersion, setSceneVersion] = useState(0);
@@ -3842,14 +3850,14 @@ const TextPropertyLine = (props) => {
     return (jsx(PropertyLine, { ...props, children: jsx(Body1, { title: title, children: value }) }));
 };
 
-const useStyles$k = makeStyles({
+const useStyles$l = makeStyles({
     pinnedStatsPane: {
         flex: "0 1 auto",
         paddingBottom: tokens.spacingHorizontalM,
     },
 });
 const StatsPane = (props) => {
-    const classes = useStyles$k();
+    const classes = useStyles$l();
     const scene = props.context;
     const engine = scene.getEngine();
     const fps = useObservableState(() => Math.round(engine.getFps()), engine.onBeginFrameObservable);
@@ -4027,7 +4035,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-Bh80tA6P.js'),
+        getExtensionModuleAsync: async () => await import('./exportService-BeoxdZ9I.js'),
     },
     {
         name: "Capture Tools",
@@ -4035,7 +4043,7 @@ const DefaultInspectorExtensionFeed = new BuiltInsExtensionFeed("Inspector", [
         keywords: ["capture", "screenshot", "gif", "video", "tools"],
         ...BabylonWebResources,
         author: { name: "Alex Chuber", forumUserName: "alexchuber" },
-        getExtensionModuleAsync: async () => await import('./captureService-CoxrGxaU.js'),
+        getExtensionModuleAsync: async () => await import('./captureService-CW8jU858.js'),
     },
     {
         name: "Import Tools",
@@ -4043,7 +4051,7 @@ const DefaultInspectorExtensionFeed = new BuiltInsExtensionFeed("Inspector", [
         keywords: ["import", "tools"],
         ...BabylonWebResources,
         author: { name: "Alex Chuber", forumUserName: "alexchuber" },
-        getExtensionModuleAsync: async () => await import('./importService-TdRBtTlS.js'),
+        getExtensionModuleAsync: async () => await import('./importService-QIUE0UCV.js'),
     },
     {
         name: "Quick Creation Tools (Preview)",
@@ -4051,7 +4059,7 @@ const DefaultInspectorExtensionFeed = new BuiltInsExtensionFeed("Inspector", [
         keywords: ["creation", "tools"],
         ...BabylonWebResources,
         author: { name: "Babylon.js", forumUserName: "" },
-        getExtensionModuleAsync: async () => await import('./quickCreateToolsService-hEV1m5Nc.js'),
+        getExtensionModuleAsync: async () => await import('./quickCreateToolsService-CAupjSUl.js'),
     },
 ]);
 
@@ -4273,7 +4281,7 @@ const Dropdown = (props) => {
 const NumberDropdown = Dropdown;
 const StringDropdown = Dropdown;
 
-const useStyles$j = makeStyles({
+const useStyles$k = makeStyles({
     surface: {
         maxWidth: "400px",
     },
@@ -4288,7 +4296,7 @@ const useStyles$j = makeStyles({
 const Popover = forwardRef((props, ref) => {
     const { children } = props;
     const [popoverOpen, setPopoverOpen] = useState(false);
-    const classes = useStyles$j();
+    const classes = useStyles$k();
     return (jsxs(Popover$1, { open: popoverOpen, onOpenChange: (_, data) => setPopoverOpen(data.open), positioning: {
             align: "start",
             overflowBoundary: document.body,
@@ -4502,7 +4510,7 @@ const ColorSliders = ({ color, onSliderChange }) => (jsxs(Fragment, { children:
 const Color3PropertyLine = ColorPropertyLine;
 const Color4PropertyLine = ColorPropertyLine;
 
-const useStyles$i = makeStyles({
+const useStyles$j = makeStyles({
     dropdown: {
         ...UniformWidthStyling,
     },
@@ -4514,7 +4522,7 @@ const useStyles$i = makeStyles({
  */
 const DropdownPropertyLine = forwardRef((props, ref) => {
     DropdownPropertyLine.displayName = "DropdownPropertyLine";
-    const classes = useStyles$i();
+    const classes = useStyles$j();
     return (jsx(PropertyLine, { ...props, ref: ref, children: jsx(Dropdown, { ...props, className: classes.dropdown }) }));
 });
 /**
@@ -5089,7 +5097,7 @@ class ServiceContainer {
     }
 }
 
-const useStyles$h = makeStyles({
+const useStyles$i = makeStyles({
     themeButton: {
         margin: 0,
     },
@@ -5108,7 +5116,7 @@ const ThemeSelectorServiceDefinition = {
             suppressTeachingMoment: true,
             order: -300,
             component: () => {
-                const classes = useStyles$h();
+                const classes = useStyles$i();
                 const { isDarkMode, themeMode, setThemeMode } = useThemeMode();
                 const onSelectedThemeChange = useCallback((e, data) => {
                     setThemeMode(data.checkedItems.includes("System") ? "system" : data.checkedItems[0].toLocaleLowerCase());
@@ -5125,7 +5133,7 @@ const ThemeSelectorServiceDefinition = {
     },
 };
 
-const useStyles$g = makeStyles({
+const useStyles$h = makeStyles({
     app: {
         colorScheme: "light dark",
         flexGrow: 1,
@@ -5162,7 +5170,7 @@ function MakeModularTool(options) {
         SetThemeMode(themeMode);
     }
     const modularToolRootComponent = () => {
-        const classes = useStyles$g();
+        const classes = useStyles$h();
         const [extensionManagerContext, setExtensionManagerContext] = useState();
         const [requiredExtensions, setRequiredExtensions] = useState();
         const [requiredExtensionsDeferred, setRequiredExtensionsDeferred] = useState();
@@ -5188,7 +5196,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-13sAWV0u.js');
+                    const { ExtensionListServiceDefinition } = await import('./extensionsListService-hxk2QaYg.js');
                     await serviceContainer.addServiceAsync(ExtensionListServiceDefinition);
                 }
                 // Register the theme selector service (for selecting the theme) if theming is configured.
@@ -5370,7 +5378,7 @@ const MeshIcon = createFluentIcon("Mesh", "16", '<path d="M14.03,3.54l-5.11-2.07
 const TranslateIcon = createFluentIcon("Translate", "24", '<path d="M20.16,12.98l-2.75-2.75c-.29-.29-.77-.29-1.06,0-.29.29-.29.77,0,1.06l1.47,1.47h-6.69v-6.69l1.47,1.47c.29.29.77.29,1.06,0,.29-.29.29-.77,0-1.06l-2.75-2.75c-.14-.14-.33-.22-.53-.22s-.39.08-.53.22l-2.75,2.75c-.29.29-.29.77,0,1.06.29.29.77.29,1.06,0l1.47-1.47v7.13l-3.52,3.52v-2.08c0-.41-.34-.75-.75-.75s-.75.34-.75.75v3.89c0,.2.08.39.22.53.14.14.33.22.53.22h3.89c.41,0,.75-.34.75-.75s-.34-.75-.75-.75h-2.08s3.52-3.52,3.52-3.52h7.13l-1.47,1.47c-.29.29-.29.77,0,1.06s.77.29,1.06,0l2.75-2.75c.14-.14.22-.33.22-.53s-.08-.39-.22-.53Z" />');
 const MaterialIcon = createFluentIcon("Material", "16", '<path d="M14.74,6.3c-.09-.36-.38-.64-.75-.72-.04-.09-.08-.18-.12-.27.1-.15.16-.32.16-.51,0-.18-.05-.34-.13-.48-1.23-1.97-3.41-3.28-5.9-3.28C4.16,1.04,1.04,4.16,1.04,7.99c0,.39.23.72.57.88.02.12.03.25.06.37-.18.18-.3.42-.3.7,0,.11.02.21.06.31.94,2.74,3.53,4.71,6.58,4.71,3.84,0,6.96-3.12,6.96-6.96,0-.59-.08-1.16-.22-1.7ZM2.07,8.58c-.02-.19-.03-.39-.03-.58,0-3.29,2.67-5.96,5.96-5.96,2.23,0,4.17,1.23,5.2,3.05.05.18-.07.45-.3.75-.57-.73-1.45-1.21-2.45-1.21-1.72,0-3.12,1.4-3.12,3.11,0,.33.07.65.16.95-3.05.82-5.17.52-5.42-.11ZM12.56,7.75c0,1.17-.95,2.11-2.11,2.11s-2.12-.95-2.12-2.11.95-2.11,2.12-2.11,2.11.95,2.11,2.11ZM8,13.96c-2.6,0-4.81-1.68-5.62-4.01.5.16,1.11.24,1.79.24,1.15,0,2.49-.22,3.79-.59.57.76,1.47,1.26,2.49,1.26,1.72,0,3.11-1.4,3.11-3.11,0-.34-.07-.65-.17-.96.13-.13.24-.26.34-.39.14.51.22,1.04.22,1.6,0,3.29-2.67,5.96-5.96,5.96Z"/>');
 
-const useStyles$f = makeStyles({
+const useStyles$g = makeStyles({
     coordinatesModeButton: {
         margin: `0 0 0 ${tokens.spacingHorizontalXS}`,
     },
@@ -5380,7 +5388,7 @@ const useStyles$f = makeStyles({
 });
 const GizmoToolbar = (props) => {
     const { scene, entity, gizmoService } = props;
-    const classes = useStyles$f();
+    const classes = useStyles$g();
     const gizmoManager = useResource(useCallback(() => {
         const utilityLayerRef = gizmoService.getUtilityLayer(scene);
         const keepDepthUtilityLayerRef = gizmoService.getUtilityLayer(scene, "keepDepth");
@@ -5495,7 +5503,7 @@ const GizmoToolbarServiceDefinition = {
     },
 };
 
-const useStyles$e = makeStyles({
+const useStyles$f = makeStyles({
     badge: {
         margin: tokens.spacingHorizontalXXS,
         fontFamily: "monospace",
@@ -5511,7 +5519,7 @@ const MiniStatsServiceDefinition = {
             horizontalLocation: "right",
             suppressTeachingMoment: true,
             component: () => {
-                const classes = useStyles$e();
+                const classes = useStyles$f();
                 const scene = useObservableState(useCallback(() => sceneContext.currentScene, [sceneContext.currentScene]), sceneContext.currentSceneObservable);
                 const engine = scene?.getEngine();
                 const fps = useObservableState(useCallback(() => (engine ? Math.round(engine.getFps()) : null), [engine]), engine?.onBeginFrameObservable);
@@ -6527,104 +6535,384 @@ 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;
+const useListStyles = makeStyles({
+    item: {
+        width: "100%",
+        display: "flex",
+        flexDirection: "row", // Arrange items horizontally
+        alignItems: "center", // Center items vertically
+        gap: tokens.spacingHorizontalS, // Add space between elements
+        borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,
+    },
+    itemId: {
+        width: tokens.spacingHorizontalM,
+    },
+    itemContent: {
+        flex: 1, // Take up remaining space
+        minWidth: 0, // Prevent flex item from overflowing
+    },
+    iconContainer: {
+        display: "flex",
+        gap: tokens.spacingHorizontalXS, // Small gap between icons
+        alignItems: "center",
+        flexShrink: 0, // Prevent shrinking
+    },
+    list: {
+        padding: tokens.spacingVerticalS,
+    },
+});
+/**
+ * For cases where you may want to add / remove items from a list via a trash can button / copy button, this HOC can be used
+ * @returns A React component that renders a list of items with add/delete functionality
+ * @param props - The properties for the List component
+ */
+function List(props) {
+    const { items, renderItem, onDelete, onAdd, addButtonLabel = "Add new item" } = props;
+    const classes = useListStyles();
+    const sortedItems = useMemo(() => [...items].sort((a, b) => a.sortBy - b.sortBy), [items]);
+    return (jsxs("div", { children: [jsx(ButtonLine, { label: addButtonLabel, icon: AddRegular, onClick: () => props.onAdd() }), jsx("div", { className: classes.list, children: sortedItems.map((item, index) => (jsxs("div", { className: classes.item, children: [jsxs(Body1Strong, { className: classes.itemId, children: ["#", index] }), jsx("div", { className: classes.itemContent, children: renderItem(item, items.indexOf(sortedItems[index])) }), jsxs("div", { className: classes.iconContainer, children: [jsx(CopyRegular, { onClick: () => onAdd(item) }), jsx(DeleteRegular, { onClick: () => onDelete(item, items.indexOf(sortedItems[index])) })] })] }, item.id))) })] }));
 }
+
+const useGradientStyles = makeStyles({
+    container: {
+        display: "flex",
+        alignItems: "center",
+        gap: tokens.spacingHorizontalS,
+        width: "100%",
+    },
+    // Wrapper for factor spin buttons - fixed size
+    valueWrapper: {
+        flex: "0 0 auto", // Don't grow, natural size
+    },
+    // Wrapper for color pickers - fixed size since they're just swatches
+    colorWrapper: {
+        flex: "0 0 auto",
+        alignContent: "center",
+    },
+    // Wrapper for the step slider - grows to fill remaining space
+    stepSliderWrapper: {
+        flex: "1 1 0", // Grow to fill available space
+        minWidth: 0,
+    },
+});
 /**
- * Displays the normal map properties of a standard material.
- * @param props - The required properties
- * @returns A JSX element representing the normal map properties.
+ * Gradient component that displays 1 or 2 color or number inputs next to a slider
+ * @param props - Component props containing gradient value and change handlers
+ * @returns A React component
  */
-const NormalMapProperties = (props) => {
-    const { material } = 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" })] })) }));
+const Gradient = (props) => {
+    Gradient.displayName = "Gradient";
+    const [gradient, setGradient] = useState(props.value);
+    const classes = useGradientStyles();
+    useEffect(() => {
+        setGradient(props.value); // Re-render if props.value changes
+    }, [props.value]);
+    const gradientChange = (newGradient) => {
+        setGradient(newGradient);
+        props.onChange(newGradient);
+    };
+    // Only use compact mode when there are numeric values (spinbuttons) taking up space
+    const hasNumericValues = !(gradient.value1 instanceof Color3 || gradient.value1 instanceof Color4) ||
+        (gradient.value2 !== undefined && !(gradient.value2 instanceof Color3 || gradient.value2 instanceof Color4));
+    return (jsxs("div", { id: "gradientContainer", className: classes.container, children: [jsx("div", { className: gradient.value1 instanceof Color3 || gradient.value1 instanceof Color4 ? classes.colorWrapper : classes.valueWrapper, children: gradient.value1 instanceof Color3 || gradient.value1 instanceof Color4 ? (jsx(ColorPickerPopup, { value: gradient.value1, onChange: (color) => gradientChange({ ...gradient, value1: color }) })) : (jsx(SyncedSliderInput, { step: 0.01, value: gradient.value1, onChange: (val) => gradientChange({ ...gradient, value1: val }), compact: true })) }), gradient.value2 !== undefined && (jsx("div", { className: gradient.value2 instanceof Color3 || gradient.value2 instanceof Color4 ? classes.colorWrapper : classes.valueWrapper, children: gradient.value2 instanceof Color3 || gradient.value2 instanceof Color4 ? (jsx(ColorPickerPopup, { value: gradient.value2, onChange: (color) => gradientChange({ ...gradient, value2: color }) })) : (jsx(SyncedSliderInput, { step: 0.01, value: gradient.value2, onChange: (val) => gradientChange({ ...gradient, value2: val }), compact: true })) })), jsx("div", { className: classes.stepSliderWrapper, children: jsx(SyncedSliderInput, { notifyOnlyOnRelease: true, min: 0, max: 1, step: 0.01, value: gradient.step, onChange: (val) => gradientChange({ ...gradient, step: val }), compact: hasNumericValues }) })] }));
 };
-
-// TODO: ryamtrem / gehalper This function is temporal until there is a line control to handle texture links (similar to the old TextureLinkLineComponent)
-const UpdateTexture = (file, material, textureSetter) => {
-    ReadFile(file, (data) => {
-        const blob = new Blob([data], { type: "octet/stream" });
-        const url = URL.createObjectURL(blob);
-        textureSetter(new Texture(url, material.getScene(), false, false));
-    }, undefined, true);
+const FactorGradientCast = Gradient;
+const Color3GradientCast = Gradient;
+const Color4GradientCast = Gradient;
+/**
+ * Component wrapper for FactorGradient that provides slider inputs for factor1, factor2, and gradient step
+ * @param props - Component props containing FactorGradient value and change handler
+ * @returns A React component
+ */
+const FactorGradientComponent = (props) => {
+    return (jsx(FactorGradientCast, { ...props, value: { value1: props.value.factor1, value2: props.value.factor2, step: props.value.gradient }, onChange: (gradient) => props.onChange(new FactorGradient(gradient.step, gradient.value1, gradient.value2)) }));
 };
 /**
- * Displays the base layer properties of an OpenPBR material.
- * @param props - The required properties
- * @returns A JSX element representing the base layer properties.
+ * Component wrapper for Color3Gradient that provides color picker and gradient step slider
+ * @param props - Component props containing Color3Gradient value and change handler
+ * @returns A React component
  */
-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));
-                    }
-                } })] }));
+const Color3GradientComponent = (props) => {
+    return (jsx(Color3GradientCast, { ...props, value: { value1: props.value.color, step: props.value.gradient }, onChange: (gradient) => props.onChange(new Color3Gradient(gradient.step, gradient.value1)) }));
 };
 /**
- * Displays the specular layer properties of an OpenPBR material.
- * @param props - The required properties
- * @returns A JSX element representing the specular layer properties.
+ * Component wrapper for Color4Gradient that provides color pickers for color1, color2, and gradient step slider
+ * @param props - Component props containing Color4Gradient value and change handler
+ * @returns A React component
  */
-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 })] }));
+const Color4GradientComponent = (props) => {
+    return (jsx(Color4GradientCast, { ...props, value: { value1: props.value.color1, value2: props.value.color2, step: props.value.gradient }, onChange: (gradient) => props.onChange(new ColorGradient(gradient.step, gradient.value1, gradient.value2)) }));
 };
 /**
- * Displays the coat layer properties of an OpenPBR material.
- * @param props - The required properties
- * @returns A JSX element representing the coat layer properties.
+ * Component wrapper for GradientBlockColorStep that provides color picker and step slider
+ * @param props - Component props containing GradientBlockColorStep value and change handler
+ * @returns A React component
  */
-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) => {
+const ColorStepGradientComponent = (props) => {
+    return (jsx(Color3GradientCast, { ...props, value: { value1: props.value.color, step: props.value.step }, onChange: (gradient) => props.onChange(new GradientBlockColorStep(gradient.step, gradient.value1)) }));
+};
+
+// Convert gradients to LineList items and sort by gradient value
+function GradientsToListItems(gradients) {
+    return (gradients?.map((gradient, index) => ({
+        id: index,
+        data: gradient,
+        sortBy: gradient.gradient,
+    })) ?? []);
+}
+const FactorGradientList = (props) => {
+    FactorGradientList.displayName = "FactorGradientList";
+    const { gradients } = props;
+    const items = useMemo(() => GradientsToListItems(gradients), [gradients]);
+    return (jsx(List, { addButtonLabel: items.length > 0 ? `Add new ${props.label}` : `Use ${props.label}s`, items: items, onDelete: (item, index) => props.removeGradient(item.data, index), onAdd: () => {
+            if (items.length === 0) {
+                props.addGradient(); // Default
+            }
+            else {
+                props.addGradient(new FactorGradient(1, 1, 1));
+            }
+        }, renderItem: (item, index) => {
+            return (jsx(FactorGradientComponent, { value: item.data, onChange: (newGradient) => {
+                    item.data.gradient = newGradient.gradient;
+                    item.data.factor1 = newGradient.factor1;
+                    item.data.factor2 = newGradient.factor2;
+                    props.onChange(newGradient, index);
+                } }));
+        } }, "Factor"));
+};
+const Color3GradientList = (props) => {
+    Color3GradientList.displayName = "Color3GradientList";
+    const { gradients } = props;
+    const items = useMemo(() => GradientsToListItems(gradients), [gradients]);
+    return (jsx(List, { addButtonLabel: items.length > 0 ? `Add new ${props.label}` : `Use ${props.label}s`, items: items, onDelete: (item, index) => props.removeGradient(item.data, index), onAdd: () => {
+            if (items.length === 0) {
+                props.addGradient(); // Default
+            }
+            else {
+                props.addGradient(new Color3Gradient(1, Color3.White()));
+            }
+        }, renderItem: (item, index) => {
+            return (jsx(Color3GradientComponent, { value: item.data, onChange: (newGradient) => {
+                    item.data.gradient = newGradient.gradient;
+                    item.data.color = newGradient.color;
+                    props.onChange(newGradient, index);
+                } }));
+        } }, "Color3"));
+};
+const Color4GradientList = (props) => {
+    Color4GradientList.displayName = "Color4GradientList";
+    const { gradients } = props;
+    const items = useMemo(() => GradientsToListItems(gradients), [gradients]);
+    return (jsx(List, { addButtonLabel: items.length > 0 ? `Add new ${props.label}` : `Use ${props.label}s`, items: items, onDelete: (item, index) => props.removeGradient(item.data, index), onAdd: () => {
+            if (items.length === 0) {
+                props.addGradient(); // Default
+            }
+            else {
+                props.addGradient(new ColorGradient(1, new Color4(1, 1, 1, 1), new Color4(1, 1, 1, 1)));
+            }
+        }, renderItem: (item, index) => {
+            return (jsx(Color4GradientComponent, { value: item.data, onChange: (newGradient) => {
+                    item.data.gradient = newGradient.gradient;
+                    item.data.color1 = newGradient.color1;
+                    item.data.color2 = newGradient.color2;
+                    props.onChange(newGradient, index);
+                } }));
+        } }, "Color4"));
+};
+
+function GroupBy(items, getKey) {
+    const map = items.reduce((map, item) => {
+        const key = getKey(item);
+        let group = map.get(key);
+        if (!group) {
+            map.set(key, (group = []));
+        }
+        group.push(item);
+        return map;
+    }, new Map());
+    return Array.from(map, ([key, items]) => ({ key, items }));
+}
+
+const useStyles$e = makeStyles({
+    subsection: {
+        marginTop: tokens.spacingVerticalM,
+    },
+});
+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();
+                } })] }));
+};
+const InputBlockPropertyLine = (props) => {
+    const { block } = props;
+    // We need to re-evaluate this outer component when type/isBoolean/min/max change since that determines what type of property line we render.
+    const type = useProperty(block, "type");
+    const isBoolean = useProperty(block, "isBoolean");
+    const min = useProperty(block, "min");
+    const max = useProperty(block, "max");
+    const commonProps = {
+        label: block.name,
+        target: block,
+        propertyKey: "value",
+    };
+    if (type === NodeMaterialBlockConnectionPointTypes.Float) {
+        if (isBoolean) {
+            return jsx(BoundProperty, { component: SwitchPropertyLine, ...commonProps }, `${block.uniqueId} (Switch)`);
+        }
+        else {
+            const hasMinMax = !isNaN(min) && !isNaN(max) && min !== max;
+            if (hasMinMax) {
+                return jsx(BoundProperty, { component: SyncedSliderPropertyLine, ...commonProps, min: min, max: max, step: (max - min) / 100.0 }, `${block.uniqueId} (Slider)`);
+            }
+            else {
+                return jsx(BoundProperty, { component: NumberInputPropertyLine, ...commonProps }, `${block.uniqueId} (Number)`);
+            }
+        }
+    }
+    else if (type === NodeMaterialBlockConnectionPointTypes.Color3) {
+        return jsx(BoundProperty, { component: Color3PropertyLine, ...commonProps }, `${block.uniqueId} (Color3)`);
+    }
+    else if (type === NodeMaterialBlockConnectionPointTypes.Color4) {
+        return jsx(BoundProperty, { component: Color4PropertyLine, ...commonProps }, `${block.uniqueId} (Color4)`);
+    }
+    else if (type === NodeMaterialBlockConnectionPointTypes.Vector2) {
+        return jsx(BoundProperty, { component: Vector2PropertyLine, ...commonProps }, `${block.uniqueId} (Vector2)`);
+    }
+    else if (type === NodeMaterialBlockConnectionPointTypes.Vector3) {
+        return jsx(BoundProperty, { component: Vector3PropertyLine, ...commonProps }, `${block.uniqueId} (Vector3)`);
+    }
+    else if (type === NodeMaterialBlockConnectionPointTypes.Vector4) {
+        return jsx(BoundProperty, { component: Vector4PropertyLine, ...commonProps }, `${block.uniqueId} (Vector4)`);
+    }
+    else {
+        return null;
+    }
+};
+const GradientBlockPropertyLine = (props) => {
+    const { material, block } = props;
+    const gradients = useObservableState(useCallback(() => block.colorSteps.map((step) => new Color3Gradient(step.step, step.color)), [block.colorSteps]), block.onValueChangedObservable);
+    return (jsx(Color3GradientList, { label: "step", gradients: gradients, addGradient: (gradient) => {
+            block.colorSteps.push(gradient ? new GradientBlockColorStep(gradient.gradient, gradient.color) : new GradientBlockColorStep(1.0, Color3.White()));
+            block.colorStepsUpdated();
+            material.build();
+        }, removeGradient: (_, index) => {
+            block.colorSteps.splice(index, 1);
+            block.colorStepsUpdated();
+            material.build();
+        }, onChange: (gradient, index) => {
+            block.colorSteps[index].step = gradient.gradient;
+            block.colorSteps[index].color = gradient.color;
+            block.colorStepsUpdated();
+            material.build();
+        } }));
+};
+const NodeMaterialInputProperties = (props) => {
+    const { material } = props;
+    const classes = useStyles$e();
+    const inputBlocks = useObservableState(useCallback(() => {
+        const inspectorVisibleInputBlocks = material
+            .getInputBlocks()
+            .filter((block) => block.visibleInInspector)
+            .map((block) => block);
+        const groupedInputBlocks = GroupBy(inspectorVisibleInputBlocks, (block) => block.groupInInspector);
+        return groupedInputBlocks.sort((a, b) => a.key.localeCompare(b.key));
+    }, [material]), material.onBuildObservable, material.onBuildErrorObservable);
+    const gradientBlocks = useObservableState(useCallback(() => material.attachedBlocks.filter((block) => block.visibleInInspector && block.getClassName() === "GradientBlock").map((block) => block), [material]), material.onBuildObservable, material.onBuildErrorObservable);
+    return (jsx(Fragment, { children: inputBlocks.length === 0 && gradientBlocks.length === 0 ? (jsx(MessageBar, { intent: "info", title: "No Visible Input Blocks", message: "To see input blocks, mark them as visibleInInspector.", docLink: "https://doc.babylonjs.com/features/featuresDeepDive/materials/node_material/nodeMaterial/#adding-blocks" }, "no-visible-input-blocks")) : (jsxs(Fragment, { children: [inputBlocks.map((group) => (jsxs(Fragment$1, { children: [group.key && jsx(Subtitle2, { className: classes.subsection, children: group.key }), group.items.map((block) => (jsx(InputBlockPropertyLine, { block: block }, block.uniqueId)))] }, `${group.key || "default"} (Group)`))), gradientBlocks.map((block) => (jsxs(Fragment$1, { children: [jsx(Subtitle2, { className: classes.subsection, children: block.name }), jsx(GradientBlockPropertyLine, { material: material, block: block })] }, `${block.uniqueId} (Gradient)`)))] })) }));
+};
+
+function IsMaterialWithPublicNormalMaps(mat) {
+    return mat.invertNormalMapX !== undefined;
+}
+/**
+ * Displays the normal map properties of a standard material.
+ * @param props - The required properties
+ * @returns A JSX element representing the normal map properties.
+ */
+const NormalMapProperties = (props) => {
+    const { material } = 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));
                     }
@@ -7362,6 +7650,10 @@ const MaterialPropertiesServiceDefinition = {
                     section: "General",
                     component: ({ context }) => jsx(NodeMaterialGeneralProperties, { material: context }),
                 },
+                {
+                    section: "Inputs",
+                    component: ({ context }) => jsx(NodeMaterialInputProperties, { material: context }),
+                },
             ],
         });
         return {
@@ -7966,192 +8258,6 @@ const NodePropertiesServiceDefinition = {
     },
 };
 
-const useListStyles = makeStyles({
-    item: {
-        width: "100%",
-        display: "flex",
-        flexDirection: "row", // Arrange items horizontally
-        alignItems: "center", // Center items vertically
-        gap: tokens.spacingHorizontalS, // Add space between elements
-        borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,
-    },
-    itemId: {
-        width: tokens.spacingHorizontalM,
-    },
-    itemContent: {
-        flex: 1, // Take up remaining space
-        minWidth: 0, // Prevent flex item from overflowing
-    },
-    iconContainer: {
-        display: "flex",
-        gap: tokens.spacingHorizontalXS, // Small gap between icons
-        alignItems: "center",
-        flexShrink: 0, // Prevent shrinking
-    },
-    list: {
-        padding: tokens.spacingVerticalS,
-    },
-});
-/**
- * For cases where you may want to add / remove items from a list via a trash can button / copy button, this HOC can be used
- * @returns A React component that renders a list of items with add/delete functionality
- * @param props - The properties for the List component
- */
-function List(props) {
-    const { items, renderItem, onDelete, onAdd, addButtonLabel = "Add new item" } = props;
-    const classes = useListStyles();
-    return (jsxs("div", { children: [jsx(ButtonLine, { label: addButtonLabel, onClick: () => props.onAdd() }), jsx("div", { className: classes.list, children: items
-                    .sort((a, b) => a.sortBy - b.sortBy)
-                    .map((item, index) => (jsxs("div", { className: classes.item, children: [jsxs(Body1Strong, { className: classes.itemId, children: ["#", index] }), jsx("div", { className: classes.itemContent, children: renderItem(item, index) }), jsxs("div", { className: classes.iconContainer, children: [jsx(CopyRegular, { onClick: () => onAdd(item) }), jsx(DeleteRegular, { onClick: () => onDelete(item, index) })] })] }, item.id))) })] }));
-}
-
-const useGradientStyles = makeStyles({
-    container: {
-        display: "flex",
-        alignItems: "center",
-        gap: tokens.spacingHorizontalS,
-        width: "100%",
-    },
-    // Wrapper for factor spin buttons - fixed size
-    valueWrapper: {
-        flex: "0 0 auto", // Don't grow, natural size
-    },
-    // Wrapper for color pickers - fixed size since they're just swatches
-    colorWrapper: {
-        flex: "0 0 auto",
-        alignContent: "center",
-    },
-    // Wrapper for the step slider - grows to fill remaining space
-    stepSliderWrapper: {
-        flex: "1 1 0", // Grow to fill available space
-        minWidth: 0,
-    },
-});
-/**
- * Gradient component that displays 1 or 2 color or number inputs next to a slider
- * @param props - Component props containing gradient value and change handlers
- * @returns A React component
- */
-const Gradient = (props) => {
-    Gradient.displayName = "Gradient";
-    const [gradient, setGradient] = useState(props.value);
-    const classes = useGradientStyles();
-    useEffect(() => {
-        setGradient(props.value); // Re-render if props.value changes
-    }, [props.value]);
-    const gradientChange = (newGradient) => {
-        setGradient(newGradient);
-        props.onChange(newGradient);
-    };
-    // Only use compact mode when there are numeric values (spinbuttons) taking up space
-    const hasNumericValues = !(gradient.value1 instanceof Color3 || gradient.value1 instanceof Color4) ||
-        (gradient.value2 !== undefined && !(gradient.value2 instanceof Color3 || gradient.value2 instanceof Color4));
-    return (jsxs("div", { id: "gradientContainer", className: classes.container, children: [jsx("div", { className: gradient.value1 instanceof Color3 || gradient.value1 instanceof Color4 ? classes.colorWrapper : classes.valueWrapper, children: gradient.value1 instanceof Color3 || gradient.value1 instanceof Color4 ? (jsx(ColorPickerPopup, { value: gradient.value1, onChange: (color) => gradientChange({ ...gradient, value1: color }) })) : (jsx(SyncedSliderInput, { step: 0.01, value: gradient.value1, onChange: (val) => gradientChange({ ...gradient, value1: val }), compact: true })) }), gradient.value2 !== undefined && (jsx("div", { className: gradient.value2 instanceof Color3 || gradient.value2 instanceof Color4 ? classes.colorWrapper : classes.valueWrapper, children: gradient.value2 instanceof Color3 || gradient.value2 instanceof Color4 ? (jsx(ColorPickerPopup, { value: gradient.value2, onChange: (color) => gradientChange({ ...gradient, value2: color }) })) : (jsx(SyncedSliderInput, { step: 0.01, value: gradient.value2, onChange: (val) => gradientChange({ ...gradient, value2: val }), compact: true })) })), jsx("div", { className: classes.stepSliderWrapper, children: jsx(SyncedSliderInput, { notifyOnlyOnRelease: true, min: 0, max: 1, step: 0.01, value: gradient.step, onChange: (val) => gradientChange({ ...gradient, step: val }), compact: hasNumericValues }) })] }));
-};
-const FactorGradientCast = Gradient;
-const Color3GradientCast = Gradient;
-const Color4GradientCast = Gradient;
-/**
- * Component wrapper for FactorGradient that provides slider inputs for factor1, factor2, and gradient step
- * @param props - Component props containing FactorGradient value and change handler
- * @returns A React component
- */
-const FactorGradientComponent = (props) => {
-    return (jsx(FactorGradientCast, { ...props, value: { value1: props.value.factor1, value2: props.value.factor2, step: props.value.gradient }, onChange: (gradient) => props.onChange(new FactorGradient(gradient.step, gradient.value1, gradient.value2)) }));
-};
-/**
- * Component wrapper for Color3Gradient that provides color picker and gradient step slider
- * @param props - Component props containing Color3Gradient value and change handler
- * @returns A React component
- */
-const Color3GradientComponent = (props) => {
-    return (jsx(Color3GradientCast, { ...props, value: { value1: props.value.color, step: props.value.gradient }, onChange: (gradient) => props.onChange(new Color3Gradient(gradient.step, gradient.value1)) }));
-};
-/**
- * Component wrapper for Color4Gradient that provides color pickers for color1, color2, and gradient step slider
- * @param props - Component props containing Color4Gradient value and change handler
- * @returns A React component
- */
-const Color4GradientComponent = (props) => {
-    return (jsx(Color4GradientCast, { ...props, value: { value1: props.value.color1, value2: props.value.color2, step: props.value.gradient }, onChange: (gradient) => props.onChange(new ColorGradient(gradient.step, gradient.value1, gradient.value2)) }));
-};
-/**
- * Component wrapper for GradientBlockColorStep that provides color picker and step slider
- * @param props - Component props containing GradientBlockColorStep value and change handler
- * @returns A React component
- */
-const ColorStepGradientComponent = (props) => {
-    return (jsx(Color3GradientCast, { ...props, value: { value1: props.value.color, step: props.value.step }, onChange: (gradient) => props.onChange(new GradientBlockColorStep(gradient.step, gradient.value1)) }));
-};
-
-// Convert gradients to LineList items and sort by gradient value
-function GradientsToListItems(gradients) {
-    return (gradients?.map((gradient, index) => ({
-        id: index,
-        data: gradient,
-        sortBy: gradient.gradient,
-    })) ?? []);
-}
-const FactorGradientList = (props) => {
-    FactorGradientList.displayName = "FactorGradientList";
-    const { gradients } = props;
-    const items = GradientsToListItems(gradients);
-    return (jsx(List, { addButtonLabel: items.length > 0 ? `Add new ${props.label}` : `Use ${props.label}s`, items: items, onDelete: (item) => props.removeGradient(item.data), onAdd: () => {
-            if (items.length === 0) {
-                props.addGradient(); // Default
-            }
-            else {
-                props.addGradient(new FactorGradient(1, 1, 1));
-            }
-        }, renderItem: (item) => {
-            return (jsx(FactorGradientComponent, { value: item.data, onChange: (newGradient) => {
-                    item.data.gradient = newGradient.gradient;
-                    item.data.factor1 = newGradient.factor1;
-                    item.data.factor2 = newGradient.factor2;
-                    props.onChange(newGradient);
-                } }));
-        } }, "Factor"));
-};
-const Color3GradientList = (props) => {
-    Color3GradientList.displayName = "Color3GradientList";
-    const { gradients } = props;
-    const items = GradientsToListItems(gradients);
-    return (jsx(List, { addButtonLabel: items.length > 0 ? `Add new ${props.label}` : `Use ${props.label}s`, items: items, onDelete: (item) => props.removeGradient(item.data), onAdd: () => {
-            if (items.length === 0) {
-                props.addGradient(); // Default
-            }
-            else {
-                props.addGradient(new Color3Gradient(1, Color3.White()));
-            }
-        }, renderItem: (item) => {
-            return (jsx(Color3GradientComponent, { value: item.data, onChange: (newGradient) => {
-                    item.data.gradient = newGradient.gradient;
-                    item.data.color = newGradient.color;
-                    props.onChange(newGradient);
-                } }));
-        } }, "Color3"));
-};
-const Color4GradientList = (props) => {
-    Color4GradientList.displayName = "Color4GradientList";
-    const { gradients } = props;
-    const items = GradientsToListItems(gradients);
-    return (jsx(List, { addButtonLabel: items.length > 0 ? `Add new ${props.label}` : `Use ${props.label}s`, items: items, onDelete: (item) => props.removeGradient(item.data), onAdd: () => {
-            if (items.length === 0) {
-                props.addGradient(); // Default
-            }
-            else {
-                props.addGradient(new ColorGradient(1, new Color4(1, 1, 1, 1), new Color4(1, 1, 1, 1)));
-            }
-        }, renderItem: (item) => {
-            return (jsx(Color4GradientComponent, { value: item.data, onChange: (newGradient) => {
-                    item.data.gradient = newGradient.gradient;
-                    item.data.color1 = newGradient.color1;
-                    item.data.color2 = newGradient.color2;
-                    props.onChange(newGradient);
-                } }));
-        } }, "Color4"));
-};
-
 /**
  * Shared utilities for snippet server operations (save/load).
  */
@@ -9254,7 +9360,7 @@ const CheckboxPropertyLine = (props) => {
  */
 const PostProcessProperties = (props) => {
     const { postProcess } = props;
-    return (jsxs(Fragment, { children: [jsx(StringifiedPropertyLine, { label: "Width:", description: "The width of the post process", value: postProcess.width, units: "px" }, "width"), jsx(StringifiedPropertyLine, { label: "Height:", description: "The height of the post process", value: postProcess.height, units: "px" }, "height"), jsx(BoundProperty, { component: CheckboxPropertyLine, label: "Auto Clear:", target: postProcess, propertyKey: "autoClear" }), jsx(BoundProperty, { component: CheckboxPropertyLine, label: "Pixel Perfect:", target: postProcess, propertyKey: "enablePixelPerfectMode" }), jsx(BoundProperty, { component: CheckboxPropertyLine, label: "Fullscreen Viewport:", target: postProcess, propertyKey: "forceFullscreenViewport" }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Samples:", target: postProcess, propertyKey: "samples", min: 1, max: 8, step: 1 })] }));
+    return (jsxs(Fragment, { children: [jsx(StringifiedPropertyLine, { label: "Width", description: "The width of the post process", value: postProcess.width, units: "px" }), jsx(StringifiedPropertyLine, { label: "Height", description: "The height of the post process", value: postProcess.height, units: "px" }), jsx(BoundProperty, { component: CheckboxPropertyLine, label: "Auto Clear", target: postProcess, propertyKey: "autoClear" }), postProcess.clearColor && jsx(BoundProperty, { component: Color4PropertyLine, label: "Clear Color", target: postProcess, propertyKey: "clearColor" }), jsx(BoundProperty, { component: CheckboxPropertyLine, label: "Pixel Perfect", target: postProcess, propertyKey: "enablePixelPerfectMode" }), jsx(BoundProperty, { component: CheckboxPropertyLine, label: "Fullscreen Viewport", target: postProcess, propertyKey: "forceFullscreenViewport" }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Samples", target: postProcess, propertyKey: "samples", min: 1, max: 8, step: 1 })] }));
 };
 
 const PostProcessPropertiesServiceDefinition = {
@@ -9279,14 +9385,281 @@ const PostProcessPropertiesServiceDefinition = {
     },
 };
 
+const PostProcessRenderPipelineSamplesProperties = (props) => {
+    const { pipeline } = props;
+    const hasSamples = "samples" in pipeline;
+    if (!hasSamples) {
+        return null;
+    }
+    return (jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Samples", description: "MSAA sample count", target: pipeline, propertyKey: "samples", min: 1, step: 1 }));
+};
+
+const DepthOfFieldBlurLevelOptions = [
+    { label: "Low", value: 0 /* DepthOfFieldEffectBlurLevel.Low */ },
+    { label: "Medium", value: 1 /* DepthOfFieldEffectBlurLevel.Medium */ },
+    { label: "High", value: 2 /* DepthOfFieldEffectBlurLevel.High */ },
+];
+const ToneMappingTypeOptions = [
+    { label: "Standard", value: ImageProcessingConfiguration.TONEMAPPING_STANDARD },
+    { label: "ACES", value: ImageProcessingConfiguration.TONEMAPPING_ACES },
+    { label: "Khronos PBR Neutral", value: ImageProcessingConfiguration.TONEMAPPING_KHR_PBR_NEUTRAL },
+];
+const VignetteBlendModeOptions = [
+    { label: "Multiply", value: ImageProcessingConfiguration.VIGNETTEMODE_MULTIPLY },
+    { label: "Opaque", value: ImageProcessingConfiguration.VIGNETTEMODE_OPAQUE },
+];
+const DefaultRenderingPipelineBloomProperties = (props) => {
+    const { pipeline } = props;
+    const bloomEnabled = useProperty(pipeline, "bloomEnabled");
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Bloom Enabled", target: pipeline, propertyKey: "bloomEnabled" }), jsxs(Collapse, { visible: !!bloomEnabled, children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Threshold", target: pipeline, propertyKey: "bloomThreshold", min: 0, step: 0.01 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Weight", target: pipeline, propertyKey: "bloomWeight", min: 0, step: 0.05 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Kernel", target: pipeline, propertyKey: "bloomKernel", min: 0, step: 1 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Scale", target: pipeline, propertyKey: "bloomScale", min: 0, step: 0.25 })] })] }));
+};
+const DefaultRenderingPipelineChromaticAberrationProperties = (props) => {
+    const { pipeline } = props;
+    const chromaticAberrationEnabled = useProperty(pipeline, "chromaticAberrationEnabled");
+    const chromaticAberration = pipeline.chromaticAberration;
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Chromatic Aberration Enabled", target: pipeline, propertyKey: "chromaticAberrationEnabled" }), jsxs(Collapse, { visible: !!chromaticAberrationEnabled && !!chromaticAberration, children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Aberration Amount", target: chromaticAberration, propertyKey: "aberrationAmount", propertyPath: "chromaticAberration.aberrationAmount", min: 0, step: 0.1 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Radial Intensity", target: chromaticAberration, propertyKey: "radialIntensity", propertyPath: "chromaticAberration.radialIntensity", min: 0, step: 0.01 }), jsx(BoundProperty, { component: Vector2PropertyLine, label: "Center Position", target: chromaticAberration, propertyKey: "centerPosition", propertyPath: "chromaticAberration.centerPosition" }), jsx(BoundProperty, { component: Vector2PropertyLine, label: "Direction", target: chromaticAberration, propertyKey: "direction", propertyPath: "chromaticAberration.direction" })] })] }));
+};
+const DefaultRenderingPipelineDepthOfFieldProperties = (props) => {
+    const { pipeline } = props;
+    const depthOfFieldEnabled = useProperty(pipeline, "depthOfFieldEnabled");
+    const depthOfField = pipeline.depthOfField;
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Depth of Field Enabled", target: pipeline, propertyKey: "depthOfFieldEnabled" }), jsxs(Collapse, { visible: !!depthOfFieldEnabled && !!depthOfField, children: [jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "Blur Level", target: pipeline, propertyKey: "depthOfFieldBlurLevel", options: DepthOfFieldBlurLevelOptions }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Focal Length", target: depthOfField, propertyKey: "focalLength", propertyPath: "depthOfField.focalLength", min: 0, step: 0.1 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "F-Stop", target: depthOfField, propertyKey: "fStop", propertyPath: "depthOfField.fStop", min: 0, step: 0.1 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Focus Distance", target: depthOfField, propertyKey: "focusDistance", propertyPath: "depthOfField.focusDistance", min: 0, step: 0.1 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Lens Size", target: depthOfField, propertyKey: "lensSize", propertyPath: "depthOfField.lensSize", min: 0, step: 1 })] })] }));
+};
+const DefaultRenderingPipelineFxaaGlowProperties = (props) => {
+    const { pipeline } = props;
+    const glowLayerEnabled = useProperty(pipeline, "glowLayerEnabled");
+    const glowLayer = pipeline.glowLayer;
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "FXAA Enabled", target: pipeline, propertyKey: "fxaaEnabled" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Glow Layer Enabled", target: pipeline, propertyKey: "glowLayerEnabled" }), jsxs(Collapse, { visible: !!glowLayerEnabled && !!glowLayer, children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Blur Kernel Size", target: glowLayer, propertyKey: "blurKernelSize", propertyPath: "glowLayer.blurKernelSize", min: 1, step: 1 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Intensity", target: glowLayer, propertyKey: "intensity", propertyPath: "glowLayer.intensity", min: 0, step: 0.1 })] })] }));
+};
+const DefaultRenderingPipelineGrainProperties = (props) => {
+    const { pipeline } = props;
+    const grainEnabled = useProperty(pipeline, "grainEnabled");
+    const grain = pipeline.grain;
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Grain Enabled", target: pipeline, propertyKey: "grainEnabled" }), jsxs(Collapse, { visible: !!grainEnabled && !!grain, children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Animated", target: grain, propertyKey: "animated", propertyPath: "grain.animated" }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Intensity", target: grain, propertyKey: "intensity", propertyPath: "grain.intensity", min: 0, step: 0.1 })] })] }));
+};
+const DefaultRenderingPipelineImageProcessingProperties = (props) => {
+    const { pipeline } = props;
+    const imageProcessingEnabled = useProperty(pipeline, "imageProcessingEnabled");
+    const imageProcessing = pipeline.imageProcessing;
+    const vignetteEnabled = useProperty(imageProcessing, "vignetteEnabled");
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Image Processing Enabled", target: pipeline, propertyKey: "imageProcessingEnabled" }), jsxs(Collapse, { visible: !!imageProcessingEnabled && !!imageProcessing, children: [jsx(ButtonLine, { label: "Convert Clear Color to Linear", onClick: () => {
+                            pipeline.scene.clearColor = pipeline.scene.clearColor.toLinearSpace(pipeline.scene.getEngine().useExactSrgbConversions);
+                        } }), jsx(ButtonLine, { label: "Convert Clear Color to Gamma", onClick: () => {
+                            pipeline.scene.clearColor = pipeline.scene.clearColor.toGammaSpace(pipeline.scene.getEngine().useExactSrgbConversions);
+                        } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Contrast", target: imageProcessing, propertyKey: "contrast", propertyPath: "imageProcessing.contrast", min: 0, step: 0.1 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Exposure", target: imageProcessing, propertyKey: "exposure", propertyPath: "imageProcessing.exposure", min: 0, step: 0.1 }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Tone Mapping Enabled", target: imageProcessing, propertyKey: "toneMappingEnabled", propertyPath: "imageProcessing.toneMappingEnabled" }), jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "Tone Mapping Type", target: imageProcessing, propertyKey: "toneMappingType", propertyPath: "imageProcessing.toneMappingType", options: ToneMappingTypeOptions }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Vignette Enabled", target: imageProcessing, propertyKey: "vignetteEnabled", propertyPath: "imageProcessing.vignetteEnabled" }), jsxs(Collapse, { visible: !!vignetteEnabled, children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Vignette Weight", target: imageProcessing, propertyKey: "vignetteWeight", propertyPath: "imageProcessing.vignetteWeight", min: 0, step: 0.1 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Vignette Stretch", target: imageProcessing, propertyKey: "vignetteStretch", propertyPath: "imageProcessing.vignetteStretch", min: 0, step: 0.1 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Vignette Camera FOV", target: imageProcessing, propertyKey: "vignetteCameraFov", propertyPath: "imageProcessing.vignetteCameraFov", min: 0, step: 0.1 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Vignette Center X", target: imageProcessing, propertyKey: "vignetteCenterX", propertyPath: "imageProcessing.vignetteCenterX", step: 0.1 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Vignette Center Y", target: imageProcessing, propertyKey: "vignetteCenterY", propertyPath: "imageProcessing.vignetteCenterY", step: 0.1 }), jsx(BoundProperty, { component: Color4PropertyLine, label: "Vignette Color", target: imageProcessing, propertyKey: "vignetteColor", propertyPath: "imageProcessing.vignetteColor" }), jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "Vignette Blend Mode", target: imageProcessing, propertyKey: "vignetteBlendMode", propertyPath: "imageProcessing.vignetteBlendMode", options: VignetteBlendModeOptions })] }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Dithering Enabled", target: imageProcessing, propertyKey: "ditheringEnabled", propertyPath: "imageProcessing.ditheringEnabled" }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Dithering Intensity", target: imageProcessing, propertyKey: "ditheringIntensity", propertyPath: "imageProcessing.ditheringIntensity", min: 0, step: 0.5 / 255 })] })] }));
+};
+const DefaultRenderingPipelineSharpenProperties = (props) => {
+    const { pipeline } = props;
+    const sharpenEnabled = useProperty(pipeline, "sharpenEnabled");
+    const sharpen = pipeline.sharpen;
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Sharpen Enabled", target: pipeline, propertyKey: "sharpenEnabled" }), jsxs(Collapse, { visible: !!sharpenEnabled && !!sharpen, children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Color Amount", target: sharpen, propertyKey: "colorAmount", propertyPath: "sharpen.colorAmount", min: 0, step: 0.05 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Edge Amount", target: sharpen, propertyKey: "edgeAmount", propertyPath: "sharpen.edgeAmount", min: 0, step: 0.05 })] })] }));
+};
+
+const LensRenderingPipelineOptionsProperties = (props) => {
+    const { pipeline } = props;
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Edge Blur", target: pipeline, propertyKey: "edgeBlur", min: 0, step: 0.1 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Edge Distortion", target: pipeline, propertyKey: "edgeDistortion", min: 0, step: 0.1 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Grain Amount", target: pipeline, propertyKey: "grainAmount", min: 0, step: 0.1 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Chromatic Aberration", target: pipeline, propertyKey: "chromaticAberration", min: 0, step: 0.1 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Darken Out of Focus", target: pipeline, propertyKey: "darkenOutOfFocus", min: 0, step: 0.1 }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Blur Noise", target: pipeline, propertyKey: "blurNoise" })] }));
+};
+const LensRenderingPipelineDepthOfFieldProperties = (props) => {
+    const { pipeline } = props;
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "DOF Aperture", target: pipeline, propertyKey: "dofAperture", min: 0, step: 0.1 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "DOF Distortion", target: pipeline, propertyKey: "dofDistortion", min: 0, step: 0.1 }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Pentagon Bokeh", target: pipeline, propertyKey: "pentagonBokeh" }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Highlights Gain", target: pipeline, propertyKey: "highlightsGain", min: 0, step: 0.1 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Highlights Threshold", target: pipeline, propertyKey: "highlightsThreshold", min: 0, step: 0.1 })] }));
+};
+
+const SSAORenderingPipelineProperties = (props) => {
+    const { pipeline } = props;
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Total Strength", target: pipeline, propertyKey: "totalStrength", min: 0, step: 0.05 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Base", target: pipeline, propertyKey: "base", min: 0, step: 0.05 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Radius", target: pipeline, propertyKey: "radius", min: 0.0001, step: 0.0001 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Area", target: pipeline, propertyKey: "area", min: 0.0001, step: 0.0001 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Fall Off", target: pipeline, propertyKey: "fallOff", min: 0, step: 0.000001 })] }));
+};
+
+const SSAO2RenderingPipelineSSAOProperties = (props) => {
+    const { pipeline } = props;
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Total Strength", target: pipeline, propertyKey: "totalStrength", min: 0, step: 0.05 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Base", target: pipeline, propertyKey: "base", min: 0, step: 0.05 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Max Z", target: pipeline, propertyKey: "maxZ", min: 0, step: 1 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Min Z Aspect", target: pipeline, propertyKey: "minZAspect", min: 0, step: 0.01 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Radius", target: pipeline, propertyKey: "radius", min: 0, step: 0.05 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Epsilon", target: pipeline, propertyKey: "epsilon", min: 0, step: 0.001 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Samples", target: pipeline, propertyKey: "samples", min: 1, step: 1 })] }));
+};
+const SSAO2RenderingPipelineDenoiserProperties = (props) => {
+    const { pipeline } = props;
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Bypass Blur", target: pipeline, propertyKey: "bypassBlur" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Expensive Blur", target: pipeline, propertyKey: "expensiveBlur" }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Bilateral Samples", target: pipeline, propertyKey: "bilateralSamples", min: 2, step: 1 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Bilateral Soften", target: pipeline, propertyKey: "bilateralSoften", min: 0, step: 0.01 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Bilateral Tolerance", target: pipeline, propertyKey: "bilateralTolerance", min: 0, step: 0.01 })] }));
+};
+
+const SSRRenderingPipelineSSRProperties = (props) => {
+    const { pipeline } = props;
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Enabled", target: pipeline, propertyKey: "isEnabled" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Debug", target: pipeline, propertyKey: "debug" }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Strength", target: pipeline, propertyKey: "strength", min: 0, step: 0.05 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Reflection Specular Falloff", target: pipeline, propertyKey: "reflectionSpecularFalloffExponent", min: 0, step: 0.05 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Reflectivity Threshold", target: pipeline, propertyKey: "reflectivityThreshold", min: 0, step: 0.01 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Thickness", target: pipeline, propertyKey: "thickness", min: 0, step: 0.01 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Step", target: pipeline, propertyKey: "step", min: 1, step: 1, forceInt: true }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Enable Smooth Reflections", target: pipeline, propertyKey: "enableSmoothReflections" }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Max Steps", target: pipeline, propertyKey: "maxSteps", min: 1, step: 10, forceInt: true }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Max Distance", target: pipeline, propertyKey: "maxDistance", min: 1, step: 10 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Roughness Factor", target: pipeline, propertyKey: "roughnessFactor", min: 0, step: 0.01 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Self Collision Skip", target: pipeline, propertyKey: "selfCollisionNumSkip", min: 1, step: 1 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "SSR Downsample", target: pipeline, propertyKey: "ssrDownsample", min: 0, step: 1 }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Clip to Frustum", target: pipeline, propertyKey: "clipToFrustum" })] }));
+};
+const SSRRenderingPipelineThicknessProperties = (props) => {
+    const { pipeline } = props;
+    const enableAutomaticThicknessComputation = useProperty(pipeline, "enableAutomaticThicknessComputation");
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Enable Automatic Thickness Computation", target: pipeline, propertyKey: "enableAutomaticThicknessComputation" }), jsxs(Collapse, { visible: !!enableAutomaticThicknessComputation, children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Backface Force Depth Write Transparent Meshes", target: pipeline, propertyKey: "backfaceForceDepthWriteTransparentMeshes" }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Backface Depth Texture Downsample", target: pipeline, propertyKey: "backfaceDepthTextureDownsample", min: 0, step: 1 })] })] }));
+};
+const SSRRenderingPipelineBlurProperties = (props) => {
+    const { pipeline } = props;
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Blur Dispersion Strength", target: pipeline, propertyKey: "blurDispersionStrength", min: 0, step: 0.001 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Blur Downsample", target: pipeline, propertyKey: "blurDownsample", min: 0, step: 1 })] }));
+};
+const SSRRenderingPipelineAttenuationProperties = (props) => {
+    const { pipeline } = props;
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Attenuate Screen Borders", target: pipeline, propertyKey: "attenuateScreenBorders" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Attenuate Intersection Distance", target: pipeline, propertyKey: "attenuateIntersectionDistance" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Attenuate Intersection Iterations", target: pipeline, propertyKey: "attenuateIntersectionIterations" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Attenuate Facing Camera", target: pipeline, propertyKey: "attenuateFacingCamera" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Attenuate Backface Reflection", target: pipeline, propertyKey: "attenuateBackfaceReflection" })] }));
+};
+const SSRRenderingPipelineColorSpaceProperties = (props) => {
+    const { pipeline } = props;
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Input Texture Color Is In Gamma Space", target: pipeline, propertyKey: "inputTextureColorIsInGammaSpace" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Generate Output In Gamma Space", target: pipeline, propertyKey: "generateOutputInGammaSpace" })] }));
+};
+
+const IblShadowsRenderPipelineVoxelProperties = (props) => {
+    const { pipeline } = props;
+    return (jsxs(Fragment, { children: [jsx(ButtonLine, { label: "Update Scene Bounds", onClick: () => pipeline.updateSceneBounds() }), jsx(ButtonLine, { label: "Revoxelize", onClick: () => pipeline.updateVoxelization() }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Shadow Opacity", target: pipeline, propertyKey: "shadowOpacity", min: 0, step: 0.05 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Sample Directions", target: pipeline, propertyKey: "sampleDirections", min: 0, step: 1 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Resolution Exp", target: pipeline, propertyKey: "resolutionExp", min: 4, step: 1 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Shadow Remanence", target: pipeline, propertyKey: "shadowRemanence", min: 0, step: 0.01 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Voxel Shadow Opacity", target: pipeline, propertyKey: "voxelShadowOpacity", min: 0, step: 0.05 })] }));
+};
+const IblShadowsRenderPipelineScreenspaceProperties = (props) => {
+    const { pipeline } = props;
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "SS Shadow Opacity", target: pipeline, propertyKey: "ssShadowOpacity", min: 0, step: 0.01 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "SS Shadow Sample Count", target: pipeline, propertyKey: "ssShadowSampleCount", min: 0, step: 1 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "SS Shadow Stride", target: pipeline, propertyKey: "ssShadowStride", min: 0, step: 0.01 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "SS Shadow Distance Scale", target: pipeline, propertyKey: "ssShadowDistanceScale", min: 0.01, step: 0.01 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "SS Shadow Thickness Scale", target: pipeline, propertyKey: "ssShadowThicknessScale", min: 0.005, step: 0.001 })] }));
+};
+const IblShadowsRenderPipelineDebugProperties = (props) => {
+    const { pipeline } = props;
+    const allowDebugPasses = useProperty(pipeline, "allowDebugPasses");
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Allow Debug Passes", target: pipeline, propertyKey: "allowDebugPasses" }), allowDebugPasses && (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Voxel Debug Enabled", target: pipeline, propertyKey: "voxelDebugEnabled" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "CDF Debug Enabled", target: pipeline, propertyKey: "cdfDebugEnabled" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Voxel Tracing Debug Enabled", target: pipeline, propertyKey: "voxelTracingDebugEnabled" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Spatial Blur Debug Enabled", target: pipeline, propertyKey: "spatialBlurPassDebugEnabled" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Accumulation Pass Debug Enabled", target: pipeline, propertyKey: "accumulationPassDebugEnabled" })] }))] }));
+};
+
 const RenderingPipelinePropertiesServiceDefinition = {
     friendlyName: "Rendering Pipeline Properties",
     consumes: [PropertiesServiceIdentity],
     factory: (propertiesService) => {
-        // TODO: Add content registrations for each section and for each type in the RenderingPipeline class hierarchy.
+        // Base PostProcessRenderPipeline properties (Samples slider)
+        const baseRegistration = propertiesService.addSectionContent({
+            key: "PostProcessRenderPipeline Properties",
+            predicate: (entity) => entity instanceof PostProcessRenderPipeline,
+            content: [
+                {
+                    section: "General",
+                    component: ({ context }) => jsx(PostProcessRenderPipelineSamplesProperties, { pipeline: context }),
+                },
+            ],
+        });
+        // DefaultRenderingPipeline properties
+        const defaultRegistration = propertiesService.addSectionContent({
+            key: "DefaultRenderingPipeline Properties",
+            predicate: (entity) => entity instanceof DefaultRenderingPipeline,
+            content: [
+                {
+                    section: "Bloom",
+                    component: ({ context }) => jsx(DefaultRenderingPipelineBloomProperties, { pipeline: context }),
+                },
+                {
+                    section: "Chromatic Aberration",
+                    component: ({ context }) => jsx(DefaultRenderingPipelineChromaticAberrationProperties, { pipeline: context }),
+                },
+                {
+                    section: "Depth of Field",
+                    component: ({ context }) => jsx(DefaultRenderingPipelineDepthOfFieldProperties, { pipeline: context }),
+                },
+                {
+                    section: "FXAA & Glow",
+                    component: ({ context }) => jsx(DefaultRenderingPipelineFxaaGlowProperties, { pipeline: context }),
+                },
+                {
+                    section: "Grain",
+                    component: ({ context }) => jsx(DefaultRenderingPipelineGrainProperties, { pipeline: context }),
+                },
+                {
+                    section: "Image Processing",
+                    component: ({ context }) => jsx(DefaultRenderingPipelineImageProcessingProperties, { pipeline: context }),
+                },
+                {
+                    section: "Sharpen",
+                    component: ({ context }) => jsx(DefaultRenderingPipelineSharpenProperties, { pipeline: context }),
+                },
+            ],
+        });
+        // LensRenderingPipeline properties
+        const lensRegistration = propertiesService.addSectionContent({
+            key: "LensRenderingPipeline Properties",
+            predicate: (entity) => entity instanceof LensRenderingPipeline,
+            content: [
+                {
+                    section: "Options",
+                    component: ({ context }) => jsx(LensRenderingPipelineOptionsProperties, { pipeline: context }),
+                },
+                {
+                    section: "Depth of Field",
+                    component: ({ context }) => jsx(LensRenderingPipelineDepthOfFieldProperties, { pipeline: context }),
+                },
+            ],
+        });
+        // SSAORenderingPipeline properties
+        const ssaoRegistration = propertiesService.addSectionContent({
+            key: "SSAORenderingPipeline Properties",
+            predicate: (entity) => entity instanceof SSAORenderingPipeline,
+            content: [
+                {
+                    section: "SSAO",
+                    component: ({ context }) => jsx(SSAORenderingPipelineProperties, { pipeline: context }),
+                },
+            ],
+        });
+        // SSAO2RenderingPipeline properties
+        const ssao2Registration = propertiesService.addSectionContent({
+            key: "SSAO2RenderingPipeline Properties",
+            predicate: (entity) => entity instanceof SSAO2RenderingPipeline,
+            content: [
+                {
+                    section: "SSAO",
+                    component: ({ context }) => jsx(SSAO2RenderingPipelineSSAOProperties, { pipeline: context }),
+                },
+                {
+                    section: "Denoiser",
+                    component: ({ context }) => jsx(SSAO2RenderingPipelineDenoiserProperties, { pipeline: context }),
+                },
+            ],
+        });
+        // SSRRenderingPipeline properties
+        const ssrRegistration = propertiesService.addSectionContent({
+            key: "SSRRenderingPipeline Properties",
+            predicate: (entity) => entity instanceof SSRRenderingPipeline,
+            content: [
+                {
+                    section: "SSR",
+                    component: ({ context }) => jsx(SSRRenderingPipelineSSRProperties, { pipeline: context }),
+                },
+                {
+                    section: "Automatic Thickness",
+                    component: ({ context }) => jsx(SSRRenderingPipelineThicknessProperties, { pipeline: context }),
+                },
+                {
+                    section: "Blur",
+                    component: ({ context }) => jsx(SSRRenderingPipelineBlurProperties, { pipeline: context }),
+                },
+                {
+                    section: "Attenuations",
+                    component: ({ context }) => jsx(SSRRenderingPipelineAttenuationProperties, { pipeline: context }),
+                },
+                {
+                    section: "Color Space",
+                    component: ({ context }) => jsx(SSRRenderingPipelineColorSpaceProperties, { pipeline: context }),
+                },
+            ],
+        });
+        // IblShadowsRenderPipeline properties
+        const iblShadowsRegistration = propertiesService.addSectionContent({
+            key: "IblShadowsRenderPipeline Properties",
+            predicate: (entity) => entity instanceof IblShadowsRenderPipeline,
+            content: [
+                {
+                    section: "Voxel Shadows",
+                    component: ({ context }) => jsx(IblShadowsRenderPipelineVoxelProperties, { pipeline: context }),
+                },
+                {
+                    section: "Screenspace Shadows",
+                    component: ({ context }) => jsx(IblShadowsRenderPipelineScreenspaceProperties, { pipeline: context }),
+                },
+                {
+                    section: "Debug",
+                    component: ({ context }) => jsx(IblShadowsRenderPipelineDebugProperties, { pipeline: context }),
+                },
+            ],
+        });
         return {
             dispose: () => {
-                // TODO: Dispose content registrations.
+                baseRegistration.dispose();
+                defaultRegistration.dispose();
+                lensRegistration.dispose();
+                ssaoRegistration.dispose();
+                ssao2Registration.dispose();
+                ssrRegistration.dispose();
+                iblShadowsRegistration.dispose();
             },
         };
     },
@@ -13989,4 +14362,4 @@ const TextAreaPropertyLine = (props) => {
 AttachDebugLayer();
 
 export { useAsyncResource as $, Accordion as A, ButtonLine as B, Collapse as C, DebugServiceIdentity as D, ExtensibleAccordion as E, FileUploadLine as F, Theme as G, BuiltInsExtensionFeed as H, Inspector as I, useVector3Property as J, useColor3Property as K, Link as L, MakeLazyComponent as M, NumberDropdownPropertyLine as N, useColor4Property as O, Popover as P, useQuaternionProperty as Q, MakePropertyHook as R, SwitchPropertyLine as S, ToolsServiceIdentity as T, useInterceptObservable as U, Vector3PropertyLine as V, useEventfulState as W, useObservableCollection as X, useOrderedObservableCollection as Y, usePollingObservable as Z, useResource as _, SyncedSliderPropertyLine as a, useCompactMode as a0, useSidePaneDockOverrides as a1, useAngleConverters as a2, MakeTeachingMoment as a3, MakeDialogTeachingMoment as a4, InterceptFunction as a5, GetPropertyDescriptor as a6, IsPropertyReadonly as a7, InterceptProperty as a8, ObservableCollection as a9, Textarea as aA, TextInput as aB, ToggleButton as aC, ChildWindow as aD, FactorGradientList as aE, Color3GradientList as aF, Color4GradientList as aG, Pane as aH, BooleanBadgePropertyLine as aI, Color3PropertyLine as aJ, Color4PropertyLine as aK, HexPropertyLine as aL, NumberInputPropertyLine as aM, LinkPropertyLine as aN, PropertyLine as aO, LineContainer as aP, PlaceholderPropertyLine as aQ, StringifiedPropertyLine as aR, TextAreaPropertyLine as aS, TextPropertyLine as aT, RotationVectorPropertyLine as aU, QuaternionPropertyLine as aV, Vector2PropertyLine as aW, Vector4PropertyLine as aX, ConstructorFactory as aa, SelectionServiceIdentity as ab, SelectionServiceDefinition as ac, SettingsContextIdentity as ad, ShowInspector as ae, Checkbox as af, ColorPickerPopup as ag, InputHexField as ah, InputHsvField as ai, ComboBox as aj, DraggableLine as ak, Dropdown as al, NumberDropdown as am, StringDropdown as an, FactorGradientComponent as ao, Color3GradientComponent as ap, Color4GradientComponent as aq, ColorStepGradientComponent as ar, InfoLabel as as, List as at, PositionedPopover as au, SearchBar as av, SearchBox as aw, SpinButton as ax, Switch as ay, SyncedSliderInput as az, Button as b, TextInputPropertyLine as c, SpinButtonPropertyLine as d, CheckboxPropertyLine as e, MessageBar as f, ShellServiceIdentity as g, SceneContextIdentity as h, useObservableState as i, AccordionSection as j, useExtensionManager as k, MakePopoverTeachingMoment as l, TeachingMoment as m, SidePaneContainer as n, PropertiesServiceIdentity as o, SceneExplorerServiceIdentity as p, SettingsServiceIdentity as q, StatsServiceIdentity as r, ConvertOptions as s, AttachDebugLayer as t, useProperty as u, DetachDebugLayer as v, StringDropdownPropertyLine as w, BoundProperty as x, Property as y, LinkToEntityPropertyLine as z };
-//# sourceMappingURL=index-9hCGH1vt.js.map
+//# sourceMappingURL=index-CxcZXjGK.js.map