@babylonjs/inspector 8.44.1-preview → 8.45.0-preview

package/lib/{index-9CJtnfZ3.js → index-bFqtVcnb.js}

@@ -4,7 +4,7 @@ import { Color3, Color4 } from '@babylonjs/core/Maths/math.color.js';
 import { Vector3, Quaternion, Matrix, Vector2, Vector4, TmpVectors } from '@babylonjs/core/Maths/math.vector.js';
 import { Observable } from '@babylonjs/core/Misc/observable.js';
 import { makeStyles, Link as Link$1, Body1, ToggleButton as ToggleButton$1, Button as Button$1, tokens, InfoLabel as InfoLabel$1, Body1Strong, Checkbox as Checkbox$1, mergeClasses, Accordion as Accordion$1, AccordionItem, AccordionHeader, Subtitle2Stronger, AccordionPanel, Divider, createLightTheme, createDarkTheme, FluentProvider, TeachingPopover, TeachingPopoverSurface, TeachingPopoverHeader, TeachingPopoverBody, Portal, RendererProvider, createDOMRenderer, Tooltip, Menu, MenuTrigger, SplitButton, MenuPopover, MenuList, MenuItem, Toolbar as Toolbar$1, ToolbarRadioButton, MenuGroup, MenuGroupHeader, SearchBox as SearchBox$1, FlatTree, FlatTreeItem, TreeItemLayout, MenuDivider, treeItemLevelToken, MenuItemCheckbox, Switch as Switch$1, PresenceBadge, useId, SpinButton as SpinButton$1, Slider, Input, Dropdown as Dropdown$1, Option, Popover as Popover$1, PopoverTrigger, PopoverSurface, ColorPicker, ColorArea, ColorSlider, AlphaSlider, ColorSwatch, MenuItemRadio, Dialog, DialogSurface, DialogBody, DialogTitle, DialogContent, DialogActions, List as List$1, ListItem, Spinner, Badge, MessageBar as MessageBar$1, MessageBarBody, MessageBarTitle, useComboboxFilter, Combobox, Textarea as Textarea$1, ToolbarButton, Label, ToolbarDivider, Field } from '@fluentui/react-components';
-import { ChevronCircleRight16Regular, ChevronCircleRight20Regular, ChevronCircleDown16Regular, ChevronCircleDown20Regular, Copy16Regular, Copy20Regular, PanelLeftExpandRegular, PanelRightExpandRegular, PanelLeftContractRegular, PanelRightContractRegular, PictureInPictureEnterRegular, MoreHorizontalRegular, LayoutColumnTwoFocusLeftFilled, LayoutColumnTwoSplitLeftFocusTopLeftFilled, LayoutColumnTwoSplitLeftFocusBottomLeftFilled, LayoutColumnTwoFocusRightFilled, LayoutColumnTwoSplitRightFocusTopRightFilled, LayoutColumnTwoSplitRightFocusBottomRightFilled, DocumentTextRegular, createFluentIcon, FilterRegular, GlobeRegular, ArrowExpandAllRegular, ArrowCollapseAllRegular, CubeTreeRegular, BugRegular, SettingsRegular, ArrowUploadRegular, DataBarHorizontalRegular, WrenchRegular, WeatherSunnyRegular, WeatherMoonRegular, ErrorCircleRegular, ArrowRotateClockwiseRegular, ArrowExpandRegular, SelectObjectRegular, CubeRegular, SaveRegular, ArrowUndoRegular, BracesRegular, BracesDismiss16Regular, CopyRegular, DeleteRegular, EyeOffFilled, EyeFilled, ArrowMoveFilled, StopFilled, PlayFilled, EyeRegular, EyeOffRegular, LockOpenRegular, LockClosedRegular, ResizeRegular, ChevronUpRegular, ChevronDownRegular, ArrowResetRegular, CircleHalfFillRegular, EyedropperRegular, PaintBucketRegular, InkStrokeRegular, StackRegular, FilmstripRegular, PauseFilled, WeatherSunnyLowFilled, LayerRegular, FrameRegular, PlayRegular, AppGenericRegular, MyLocationRegular, CameraRegular, LightbulbRegular, BorderOutsideRegular, BorderNoneRegular, VideoFilled, VideoRegular, FlashlightRegular, FlashlightOffRegular, DropRegular, BlurRegular, PipelineRegular, PersonWalkingRegular, DataLineRegular, PersonSquareRegular, LayerDiagonalPersonRegular, ImageEditRegular, ImageRegular, TargetRegular, PersonFeedbackRegular, BranchRegular, DeleteFilled } from '@fluentui/react-icons';
+import { ChevronCircleRight16Regular, ChevronCircleRight20Regular, ChevronCircleDown16Regular, ChevronCircleDown20Regular, Copy16Regular, Copy20Regular, PanelLeftExpandRegular, PanelRightExpandRegular, PanelLeftContractRegular, PanelRightContractRegular, PictureInPictureEnterRegular, MoreHorizontalRegular, LayoutColumnTwoFocusLeftFilled, LayoutColumnTwoSplitLeftFocusTopLeftFilled, LayoutColumnTwoSplitLeftFocusBottomLeftFilled, LayoutColumnTwoFocusRightFilled, LayoutColumnTwoSplitRightFocusTopRightFilled, LayoutColumnTwoSplitRightFocusBottomRightFilled, DocumentTextRegular, createFluentIcon, FilterRegular, GlobeRegular, ArrowExpandAllRegular, ArrowCollapseAllRegular, CubeTreeRegular, BugRegular, SettingsRegular, ArrowUploadRegular, DataBarHorizontalRegular, WrenchRegular, WeatherSunnyRegular, WeatherMoonRegular, ErrorCircleRegular, ArrowRotateClockwiseRegular, ArrowExpandRegular, SelectObjectRegular, CubeRegular, LinkDismissRegular, LinkEditRegular, SaveRegular, ArrowUndoRegular, BracesRegular, BracesDismiss16Regular, CopyRegular, DeleteRegular, EyeOffFilled, EyeFilled, ArrowMoveFilled, StopFilled, PlayFilled, EyeRegular, EyeOffRegular, LockOpenRegular, LockClosedRegular, ResizeRegular, ChevronUpRegular, ChevronDownRegular, ArrowResetRegular, CircleHalfFillRegular, EyedropperRegular, PaintBucketRegular, InkStrokeRegular, StackRegular, FilmstripRegular, PauseFilled, WeatherSunnyLowFilled, LayerRegular, FrameRegular, PlayRegular, AppGenericRegular, MyLocationRegular, CameraRegular, LightbulbRegular, BorderOutsideRegular, BorderNoneRegular, VideoFilled, VideoRegular, FlashlightRegular, FlashlightOffRegular, DropRegular, BlurRegular, PipelineRegular, PersonWalkingRegular, DataLineRegular, PersonSquareRegular, LayerDiagonalPersonRegular, ImageEditRegular, ImageRegular, TargetRegular, PersonFeedbackRegular, BranchRegular, DeleteFilled } from '@fluentui/react-icons';
 import { Collapse as Collapse$1, Fade } from '@fluentui/react-motion-components-preview';
 import '@babylonjs/core/Misc/typeStore.js';
 import { useLocalStorage, useTernaryDarkMode } from 'usehooks-ts';
@@ -82,6 +82,14 @@ import { RenderingManager } from '@babylonjs/core/Rendering/renderingManager.js'
 import '@babylonjs/core/Rendering/edgesRenderer.js';
 import '@babylonjs/core/Rendering/outlineRenderer.js';
 import { GaussianSplattingMesh } from '@babylonjs/core/Meshes/GaussianSplatting/gaussianSplattingMesh.js';
+import { BoxParticleEmitter } from '@babylonjs/core/Particles/EmitterTypes/boxParticleEmitter.js';
+import { ConeParticleEmitter } from '@babylonjs/core/Particles/EmitterTypes/coneParticleEmitter.js';
+import { CylinderParticleEmitter } from '@babylonjs/core/Particles/EmitterTypes/cylinderParticleEmitter.js';
+import { HemisphericParticleEmitter } from '@babylonjs/core/Particles/EmitterTypes/hemisphericParticleEmitter.js';
+import { MeshParticleEmitter } from '@babylonjs/core/Particles/EmitterTypes/meshParticleEmitter.js';
+import { PointParticleEmitter } from '@babylonjs/core/Particles/EmitterTypes/pointParticleEmitter.js';
+import { SphereParticleEmitter } from '@babylonjs/core/Particles/EmitterTypes/sphereParticleEmitter.js';
+import { 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';
@@ -566,20 +574,27 @@ function BoundPropertyCoreImpl(props, ref) {
             // Hook the property, using the specific hook that also catches changes to nested properties as well (like x/y/z on a Vector3 for example).
             const value = useSpecificProperty(target, propertyKey);
             const convertedValue = convertTo ? convertTo(value) : value;
+            const onChange = useMemo(() => {
+                const propertyDescriptor = GetPropertyDescriptor(target, propertyKey)?.[1];
+                if (propertyDescriptor && (propertyDescriptor.set || propertyDescriptor.writable)) {
+                    return (val) => {
+                        const oldValue = target[propertyKey];
+                        const newValue = convertFrom ? convertFrom(val) : val;
+                        target[propertyKey] = newValue;
+                        notifyPropertyChanged(target, propertyKey, oldValue, newValue);
+                    };
+                }
+                return undefined;
+            }, [target, propertyKey, convertFrom, notifyPropertyChanged]);
             const propsToSend = {
                 ...rest,
                 ref,
                 value: convertedValue,
-                onChange: (val) => {
-                    const oldValue = target[propertyKey];
-                    const newValue = convertFrom ? convertFrom(val) : val;
-                    target[propertyKey] = newValue;
-                    notifyPropertyChanged(target, propertyKey, oldValue, newValue);
-                },
+                onChange,
             };
             return jsx(Component, { ...propsToSend });
         };
-    }, [useSpecificProperty]);
+    }, [useSpecificProperty, notifyPropertyChanged]);
     return jsx(SpecificComponent, { ...props });
 }
 const BoundPropertyCore = CreateGenericForwardRef(BoundPropertyCoreImpl);
@@ -659,10 +674,11 @@ function copyCommandToClipboard(strCommand) {
 
 const ToolContext = createContext({ useFluent: false, disableCopy: false, toolName: "", size: undefined });
 
-const Link = (props) => {
+const Link = forwardRef((props, ref) => {
     const { target, url, onLink, ...rest } = props;
-    return (jsxs(Link$1, { inline: true, target: target === "current" ? "_self" : "_blank", rel: "noopener noreferrer", href: url, onClick: onLink ?? undefined, ...rest, children: [props.children, jsx(Body1, { children: props.value })] }));
-};
+    return (jsxs(Link$1, { ref: ref, inline: true, target: target === "current" ? "_self" : "_blank", rel: "noopener noreferrer", href: url, onClick: onLink ?? undefined, ...rest, children: [props.children, jsx(Body1, { wrap: false, truncate: true, children: props.value })] }));
+});
+Link.displayName = "Link";
 
 /**
  * Toggles between two states using a button with icons.
@@ -790,10 +806,18 @@ const usePropertyLineStyles = makeStyles({
     },
     rightContent: {
         flex: "0 1 auto",
+        minWidth: 0,
+        overflow: "hidden",
         display: "flex",
         alignItems: "center",
         justifyContent: "flex-end",
     },
+    childWrapper: {
+        minWidth: 0,
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+    },
     infoPopup: {
         whiteSpace: "normal",
         wordBreak: "break-word",
@@ -841,7 +865,7 @@ const PropertyLine = forwardRef((props, ref) => {
                                         cachedVal.current = props.value;
                                         props.onChange(null);
                                     }
-                                }, title: "Toggle null state" })), processedChildren, onCopy && !disableCopy && (jsx(Button, { className: classes.copy, title: "Copy to clipboard", appearance: "transparent", icon: size === "small" ? Copy16Regular : Copy20Regular, onClick: () => copyCommandToClipboard(onCopy()) }))] })] }), expandedContent && (jsx(Collapse, { visible: !!expanded, children: jsx("div", { className: classes.expandedContentDiv, children: expandedContent }) }))] }));
+                                }, title: "Toggle null state" })), jsx("div", { className: classes.childWrapper, children: processedChildren }), onCopy && !disableCopy && (jsx(Button, { className: classes.copy, title: "Copy to clipboard", appearance: "transparent", icon: size === "small" ? Copy16Regular : Copy20Regular, onClick: () => copyCommandToClipboard(onCopy()) }))] })] }), expandedContent && (jsx(Collapse, { visible: !!expanded, children: jsx("div", { className: classes.expandedContentDiv, children: expandedContent }) }))] }));
 });
 const useLineStyles = makeStyles({
     container: {
@@ -892,7 +916,7 @@ const LinkToEntityPropertyLine = (props) => {
         !linkedEntity.reservedDataStore?.hidden && jsx(LinkPropertyLine, { ...rest, value: linkedEntity.name, onLink: () => (selectionService.selectedEntity = linkedEntity) }));
 };
 
-const useStyles$r = makeStyles({
+const useStyles$s = makeStyles({
     accordion: {
         overflowX: "hidden",
         overflowY: "auto",
@@ -936,13 +960,13 @@ const useStyles$r = makeStyles({
 });
 const AccordionSection = (props) => {
     AccordionSection.displayName = "AccordionSection";
-    const classes = useStyles$r();
+    const classes = useStyles$s();
     return jsx("div", { className: classes.panelDiv, children: props.children });
 };
 const StringAccordion = Accordion$1;
 const Accordion = forwardRef((props, ref) => {
     Accordion.displayName = "Accordion";
-    const classes = useStyles$r();
+    const classes = useStyles$s();
     const { size } = useContext(ToolContext);
     const { children, highlightSections, ...rest } = props;
     const validChildren = useMemo(() => {
@@ -1073,7 +1097,7 @@ const CompactModeContextProvider = (props) => {
 function AsReadonlyArray(array) {
     return array;
 }
-const useStyles$q = makeStyles({
+const useStyles$r = makeStyles({
     rootDiv: {
         flex: 1,
         overflow: "hidden",
@@ -1082,7 +1106,7 @@ const useStyles$q = makeStyles({
     },
 });
 function ExtensibleAccordion(props) {
-    const classes = useStyles$q();
+    const classes = useStyles$r();
     const { children, sections, sectionContent, context, sectionsRef } = props;
     const defaultSections = useMemo(() => {
         const defaultSections = [];
@@ -1187,7 +1211,7 @@ function ExtensibleAccordion(props) {
                     })] }) })) }));
 }
 
-const useStyles$p = makeStyles({
+const useStyles$q = makeStyles({
     paneRootDiv: {
         display: "flex",
         flex: 1,
@@ -1200,7 +1224,7 @@ const useStyles$p = makeStyles({
  */
 const SidePaneContainer = forwardRef((props, ref) => {
     const { className, ...rest } = props;
-    const classes = useStyles$p();
+    const classes = useStyles$q();
     return (jsx("div", { className: mergeClasses(classes.paneRootDiv, className), ref: ref, ...rest, children: props.children }));
 });
 
@@ -1266,7 +1290,7 @@ const Theme = (props) => {
     return (jsx(FluentProvider, { theme: isDarkMode !== invert ? DarkTheme : LightTheme, applyStylesToPortals: applyStylesToPortals, ...rest, children: props.children }));
 };
 
-const useStyles$o = makeStyles({
+const useStyles$p = makeStyles({
     extensionTeachingPopover: {
         maxWidth: "320px",
     },
@@ -1277,7 +1301,7 @@ const useStyles$o = makeStyles({
  * @returns The teaching moment popover.
  */
 const TeachingMoment = ({ shouldDisplay, positioningRef, onOpenChange, title, description }) => {
-    const classes = useStyles$o();
+    const classes = useStyles$p();
     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 })] }) }));
 };
 
@@ -1532,13 +1556,13 @@ function ConstructorFactory(constructor) {
     return (...args) => new constructor(...args);
 }
 
-const useStyles$n = makeStyles({
+const useStyles$o = makeStyles({
     placeholderDiv: {
         padding: `${tokens.spacingVerticalM} ${tokens.spacingHorizontalM}`,
     },
 });
 const PropertiesPane = (props) => {
-    const classes = useStyles$n();
+    const classes = useStyles$o();
     const entity = props.context;
     return entity != null ? (jsx(ExtensibleAccordion, { ...props })) : (jsx("div", { className: classes.placeholderDiv, children: jsx(Body1Strong, { italic: true, children: "No entity selected." }) }));
 };
@@ -1563,7 +1587,7 @@ function ToFeaturesString(options) {
     features.push({ key: "location", value: "no" });
     return features.map((feature) => `${feature.key}=${feature.value}`).join(",");
 }
-const useStyles$m = makeStyles({
+const useStyles$n = makeStyles({
     container: {
         display: "flex",
         flexGrow: 1,
@@ -1578,7 +1602,7 @@ const useStyles$m = makeStyles({
  */
 const ChildWindow = (props) => {
     const { id, children, onOpenChange, imperativeRef: imperativeRef } = props;
-    const classes = useStyles$m();
+    const classes = useStyles$n();
     const [windowState, setWindowState] = useState();
     const [childWindow, setChildWindow] = useState();
     const storageKey = id ? `Babylon/Settings/ChildWindow/${id}/Bounds` : null;
@@ -1790,7 +1814,7 @@ function useResizeHandle(params) {
 
 const RootComponentServiceIdentity = Symbol("RootComponent");
 const ShellServiceIdentity = Symbol("ShellService");
-const useStyles$l = makeStyles({
+const useStyles$m = makeStyles({
     mainView: {
         flex: 1,
         display: "flex",
@@ -1976,12 +2000,12 @@ const DockMenu = (props) => {
 };
 const PaneHeader = (props) => {
     const { id, title, dockOptions } = props;
-    const classes = useStyles$l();
+    const classes = useStyles$m();
     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$l();
+    const classes = useStyles$m();
     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, {}) })] }));
@@ -1989,7 +2013,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$l();
+    const classes = useStyles$m();
     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))) })] })) }));
@@ -1999,7 +2023,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$l();
+    const classes = useStyles$m();
     const useTeachingMoment = useMemo(() => MakePopoverTeachingMoment(`Pane/${location}/${title ?? id}`), [title, id]);
     const teachingMoment = useTeachingMoment(suppressTeachingMoment);
     const tabClass = mergeClasses(classes.tab, isSelected ? undefined : classes.unselectedTab);
@@ -2012,7 +2036,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$l();
+    const classes = useStyles$m();
     const [topSelectedTab, setTopSelectedTab] = useState();
     const [bottomSelectedTab, setBottomSelectedTab] = useState();
     const [collapsed, setCollapsed] = useState(false);
@@ -2203,7 +2227,7 @@ function MakeShellServiceDefinition({ leftPaneDefaultWidth = 350, leftPaneMinWid
                 undock: () => onDockChanged.notifyObservers({ location: "right", dock: false }),
             };
             const rootComponent = () => {
-                const classes = useStyles$l();
+                const classes = useStyles$m();
                 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.
@@ -2638,7 +2662,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$k = makeStyles({
+const useStyles$l = makeStyles({
     rootDiv: {
         flex: 1,
         overflow: "hidden",
@@ -2706,14 +2730,14 @@ function MakeInlineCommandElement(command, isPlaceholder) {
 }
 const SceneTreeItem = (props) => {
     const { isSelected, select } = props;
-    const classes = useStyles$k();
+    const classes = useStyles$l();
     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$k();
+    const classes = useStyles$l();
     const [compactMode] = useCompactMode();
     // Get the commands that apply to this section.
     const commands = useResource(useCallback(() => {
@@ -2730,7 +2754,7 @@ const SectionTreeItem = (props) => {
 };
 const EntityTreeItem = (props) => {
     const { entityItem, isSelected, select, isFiltering, commandProviders, expandAll, collapseAll } = props;
-    const classes = useStyles$k();
+    const classes = useStyles$l();
     const [compactMode] = useCompactMode();
     const hasChildren = !!entityItem.children?.length;
     const displayInfo = useResource(useCallback(() => {
@@ -2823,7 +2847,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$k();
+    const classes = useStyles$l();
     const { sections, entityCommandProviders, sectionCommandProviders, scene, selectedEntity } = props;
     const [openItems, setOpenItems] = useState(new Set());
     const [sceneVersion, setSceneVersion] = useState(0);
@@ -3618,14 +3642,14 @@ const TextPropertyLine = (props) => {
     return (jsx(PropertyLine, { ...props, children: jsx(Body1, { title: title, children: value }) }));
 };
 
-const useStyles$j = makeStyles({
+const useStyles$k = makeStyles({
     pinnedStatsPane: {
         flex: "0 1 auto",
         paddingBottom: tokens.spacingHorizontalM,
     },
 });
 const StatsPane = (props) => {
-    const classes = useStyles$j();
+    const classes = useStyles$k();
     const scene = props.context;
     const engine = scene.getEngine();
     const fps = useObservableState(() => Math.round(engine.getFps()), engine.onBeginFrameObservable);
@@ -3803,7 +3827,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-DCYVwNJE.js'),
+        getExtensionModuleAsync: async () => await import('./exportService-bnHVeuTp.js'),
     },
     {
         name: "Capture Tools",
@@ -3811,7 +3835,7 @@ const DefaultInspectorExtensionFeed = new BuiltInsExtensionFeed("Inspector", [
         keywords: ["capture", "screenshot", "gif", "video", "tools"],
         ...BabylonWebResources,
         author: { name: "Alex Chuber", forumUserName: "alexchuber" },
-        getExtensionModuleAsync: async () => await import('./captureService-Bo4xI_X9.js'),
+        getExtensionModuleAsync: async () => await import('./captureService-BRFdjxFs.js'),
     },
     {
         name: "Import Tools",
@@ -3819,7 +3843,7 @@ const DefaultInspectorExtensionFeed = new BuiltInsExtensionFeed("Inspector", [
         keywords: ["import", "tools"],
         ...BabylonWebResources,
         author: { name: "Alex Chuber", forumUserName: "alexchuber" },
-        getExtensionModuleAsync: async () => await import('./importService--DIvq_s3.js'),
+        getExtensionModuleAsync: async () => await import('./importService-CGjLAv9b.js'),
     },
     {
         name: "Quick Creation Tools (Preview)",
@@ -3827,7 +3851,7 @@ const DefaultInspectorExtensionFeed = new BuiltInsExtensionFeed("Inspector", [
         keywords: ["creation", "tools"],
         ...BabylonWebResources,
         author: { name: "Babylon.js", forumUserName: "" },
-        getExtensionModuleAsync: async () => await import('./quickCreateToolsService-BFr5_q0T.js'),
+        getExtensionModuleAsync: async () => await import('./quickCreateToolsService-B_KvGvkG.js'),
     },
 ]);
 
@@ -4045,7 +4069,7 @@ const Dropdown = (props) => {
 const NumberDropdown = Dropdown;
 const StringDropdown = Dropdown;
 
-const useStyles$i = makeStyles({
+const useStyles$j = makeStyles({
     surface: {
         maxWidth: "400px",
     },
@@ -4060,7 +4084,7 @@ const useStyles$i = makeStyles({
 const Popover = forwardRef((props, ref) => {
     const { children } = props;
     const [popoverOpen, setPopoverOpen] = useState(false);
-    const classes = useStyles$i();
+    const classes = useStyles$j();
     return (jsxs(Popover$1, { open: popoverOpen, onOpenChange: (_, data) => setPopoverOpen(data.open), positioning: {
             align: "start",
             overflowBoundary: document.body,
@@ -4269,7 +4293,7 @@ const ColorPropertyLine = forwardRef((props, ref) => {
 const Color3PropertyLine = ColorPropertyLine;
 const Color4PropertyLine = ColorPropertyLine;
 
-const useStyles$h = makeStyles({
+const useStyles$i = makeStyles({
     dropdown: {
         ...UniformWidthStyling,
     },
@@ -4281,7 +4305,7 @@ const useStyles$h = makeStyles({
  */
 const DropdownPropertyLine = forwardRef((props, ref) => {
     DropdownPropertyLine.displayName = "DropdownPropertyLine";
-    const classes = useStyles$h();
+    const classes = useStyles$i();
     return (jsx(PropertyLine, { ...props, ref: ref, children: jsx(Dropdown, { ...props, className: classes.dropdown }) }));
 });
 /**
@@ -4855,7 +4879,7 @@ class ServiceContainer {
     }
 }
 
-const useStyles$g = makeStyles({
+const useStyles$h = makeStyles({
     themeButton: {
         margin: 0,
     },
@@ -4874,7 +4898,7 @@ const ThemeSelectorServiceDefinition = {
             suppressTeachingMoment: true,
             order: -300,
             component: () => {
-                const classes = useStyles$g();
+                const classes = useStyles$h();
                 const { isDarkMode, themeMode, setThemeMode } = useThemeMode();
                 const onSelectedThemeChange = useCallback((e, data) => {
                     setThemeMode(data.checkedItems.includes("System") ? "system" : data.checkedItems[0].toLocaleLowerCase());
@@ -4891,7 +4915,7 @@ const ThemeSelectorServiceDefinition = {
     },
 };
 
-const useStyles$f = makeStyles({
+const useStyles$g = makeStyles({
     app: {
         colorScheme: "light dark",
         flexGrow: 1,
@@ -4928,7 +4952,7 @@ function MakeModularTool(options) {
         SetThemeMode(themeMode);
     }
     const modularToolRootComponent = () => {
-        const classes = useStyles$f();
+        const classes = useStyles$g();
         const [extensionManagerContext, setExtensionManagerContext] = useState();
         const [requiredExtensions, setRequiredExtensions] = useState();
         const [requiredExtensionsDeferred, setRequiredExtensionsDeferred] = useState();
@@ -4954,7 +4978,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-BnPM7JOI.js');
+                    const { ExtensionListServiceDefinition } = await import('./extensionsListService-CbClUfJa.js');
                     await serviceContainer.addServiceAsync(ExtensionListServiceDefinition);
                 }
                 // Register the theme selector service (for selecting the theme) if theming is configured.
@@ -5136,7 +5160,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$e = makeStyles({
+const useStyles$f = makeStyles({
     coordinatesModeButton: {
         margin: `0 0 0 ${tokens.spacingHorizontalXS}`,
     },
@@ -5146,7 +5170,7 @@ const useStyles$e = makeStyles({
 });
 const GizmoToolbar = (props) => {
     const { scene, entity, gizmoService } = props;
-    const classes = useStyles$e();
+    const classes = useStyles$f();
     const gizmoManager = useResource(useCallback(() => {
         const utilityLayerRef = gizmoService.getUtilityLayer(scene);
         const keepDepthUtilityLayerRef = gizmoService.getUtilityLayer(scene, "keepDepth");
@@ -5261,7 +5285,7 @@ const GizmoToolbarServiceDefinition = {
     },
 };
 
-const useStyles$d = makeStyles({
+const useStyles$e = makeStyles({
     badge: {
         margin: tokens.spacingHorizontalXXS,
         fontFamily: "monospace",
@@ -5277,7 +5301,7 @@ const MiniStatsServiceDefinition = {
             horizontalLocation: "right",
             suppressTeachingMoment: true,
             component: () => {
-                const classes = useStyles$d();
+                const classes = useStyles$e();
                 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);
@@ -6085,7 +6109,7 @@ const CommonBlendModes = [
  * The below ParticleSystem consts were defined before new Engine alpha blend modes were added, so we have to reference
  * the ParticleSystem.FOO consts explicitly (as the underlying const values are different - they get mapped to engine consts within baseParticleSystem.ts)
  */
-[
+const BlendModeOptions = [
     { label: "Add", value: ParticleSystem.BLENDMODE_ADD },
     { label: "Multiply", value: ParticleSystem.BLENDMODE_MULTIPLY },
     { label: "Multiply Add", value: ParticleSystem.BLENDMODE_MULTIPLYADD },
@@ -6103,6 +6127,15 @@ const AlphaModeOptions = [
     { label: "Subtract", value: Constants.ALPHA_SUBTRACT },
     { label: "Multiply", value: Constants.ALPHA_MULTIPLY },
 ].concat(CommonBlendModes);
+/**
+ * Used to populate the billboardMode dropdown for particle systems.
+ */
+const ParticleBillboardModeOptions = [
+    { label: "All", value: ParticleSystem.BILLBOARDMODE_ALL },
+    { label: "Y", value: ParticleSystem.BILLBOARDMODE_Y },
+    { label: "Stretched", value: ParticleSystem.BILLBOARDMODE_STRETCHED },
+    { label: "Stretched Local", value: ParticleSystem.BILLBOARDMODE_STRETCHED_LOCAL },
+];
 
 const OrientationOptions = [
     { label: "Clockwise", value: Material.ClockWiseSideOrientation },
@@ -6247,7 +6280,7 @@ const PBRBaseMaterialSheenProperties = (props) => {
                         } }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use Roughness", target: material.sheen, propertyKey: "_useRoughness" }), jsx(Collapse, { visible: useRoughness, children: jsx(BoundProperty, { nullable: true, component: SyncedSliderPropertyLine, label: "Roughness", target: material.sheen, propertyKey: "roughness", defaultValue: 0, min: 0, max: 1, step: 0.01 }) }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use Roughness from Main Texture", target: material.sheen, propertyKey: "useRoughnessFromMainTexture" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Albedo Scaling", target: material.sheen, propertyKey: "albedoScaling" })] })] }));
 };
 
-const useStyles$c = makeStyles({
+const useStyles$d = makeStyles({
     root: {
         display: "grid",
         gridTemplateRows: "repeat(1fr)",
@@ -6263,6 +6296,11 @@ const useStyles$c = makeStyles({
     input: {
         minWidth: 0,
     },
+    listbox: {
+        width: "fit-content",
+        minWidth: "fit-content",
+        maxWidth: "350px",
+    },
 });
 /**
  * Wrapper around a Fluent ComboBox that allows for filtering options.
@@ -6272,7 +6310,7 @@ const useStyles$c = makeStyles({
 const ComboBox = (props) => {
     ComboBox.displayName = "ComboBox";
     const comboId = useId();
-    const styles = useStyles$c();
+    const styles = useStyles$d();
     const { size } = useContext(ToolContext);
     // Find the label for the current value
     const getLabel = (value) => props.options.find((opt) => opt.value === value)?.label ?? "";
@@ -6292,9 +6330,25 @@ const ComboBox = (props) => {
         setQuery(data.optionText ?? "");
         data.optionValue && props.onChange(data.optionValue);
     };
-    return (jsxs("div", { className: styles.root, children: [jsx("label", { id: comboId, children: props.label }), jsx(Combobox, { size: size, root: { className: styles.comboBox }, input: { className: styles.input }, onOptionSelect: onOptionSelect, "aria-labelledby": comboId, placeholder: "Search..", onChange: (ev) => setQuery(ev.target.value), value: query, children: children })] }));
+    return (jsxs("div", { className: styles.root, children: [jsx("label", { id: comboId, children: props.label }), jsx(Combobox, { size: size, root: { className: styles.comboBox }, input: { className: styles.input }, listbox: { className: styles.listbox }, onOptionSelect: onOptionSelect, "aria-labelledby": comboId, placeholder: "Search..", onChange: (ev) => setQuery(ev.target.value), value: query, children: children })] }));
 };
 
+const useStyles$c = makeStyles({
+    linkDiv: {
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center",
+        gap: tokens.spacingHorizontalS,
+        minWidth: 0,
+        overflow: "hidden",
+    },
+    link: {
+        minWidth: 0,
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+    },
+});
 /**
  * A generic primitive component with a ComboBox for selecting from a list of entities.
  * Supports entities with duplicate names by using uniqueId for identity.
@@ -6302,7 +6356,9 @@ const ComboBox = (props) => {
  * @returns EntitySelector component
  */
 function EntitySelector(props) {
-    const { value, onChange, getEntities, getName, filter } = props;
+    const { value, onLink, getEntities, getName, filter, defaultValue } = props;
+    const onChange = props.onChange;
+    const classes = useStyles$c();
     // Build options with uniqueId as key
     const options = useMemo(() => {
         return getEntities()
@@ -6313,13 +6369,27 @@ function EntitySelector(props) {
         }))
             .sort((a, b) => a.label.localeCompare(b.label));
     }, [getEntities, getName, filter]);
+    const [isEditing, setIsEditing] = useState(false);
     const handleEntitySelect = (key) => {
         const entity = getEntities().find((e) => e.uniqueId.toString() === key);
-        onChange(entity ?? null);
+        onChange?.(entity ?? null);
+        setIsEditing(false);
     };
     // Get current entity key for display
     const currentKey = value ? value.uniqueId.toString() : "";
-    return jsx(ComboBox, { label: "", options: options, value: currentKey, onChange: handleEntitySelect });
+    if (value && !isEditing) {
+        // If there is a value and we are not editing, show the link view
+        return (jsxs("div", { className: classes.linkDiv, children: [jsx(Tooltip, { content: getName(value), relationship: "label", children: jsx(Link, { className: classes.link, value: getName(value), onLink: () => onLink(value) }) }), onChange &&
+                    (defaultValue !== undefined ? (
+                    // If the defaultValue is specified, then allow resetting to the default
+                    jsx(Button, { icon: LinkDismissRegular, onClick: () => onChange(defaultValue) })) : (
+                    // Otherwise, just allow editing to a new value
+                    jsx(Button, { icon: LinkEditRegular, onClick: () => setIsEditing(true) })))] }));
+    }
+    else {
+        // Otherwise, show the ComboBox for selection
+        return jsx(ComboBox, { label: "", options: options, value: currentKey, onChange: handleEntitySelect });
+    }
 }
 EntitySelector.displayName = "EntitySelector";
 
@@ -6336,6 +6406,19 @@ const MaterialSelector = (props) => {
     return jsx(EntitySelector, { ...rest, getEntities: getMaterials, getName: getName });
 };
 
+/**
+ * A primitive component with a ComboBox for selecting from existing scene nodes.
+ * @param props NodeSelectorProps
+ * @returns NodeSelector component
+ */
+const NodeSelector = (props) => {
+    NodeSelector.displayName = "NodeSelector";
+    const { scene, ...rest } = props;
+    const getNodes = useCallback(() => scene.getNodes(), [scene]);
+    const getName = useCallback((node) => node.name, []);
+    return jsx(EntitySelector, { ...rest, getEntities: getNodes, getName: getName });
+};
+
 /**
  * A button that uploads a file and either:
  * - Updates an existing Texture or CubeTexture via updateURL (if texture prop is provided)
@@ -6410,16 +6493,31 @@ const useStyles$b = makeStyles({
  */
 const TextureSelector = (props) => {
     TextureSelector.displayName = "TextureSelector";
-    const { scene, cubeOnly, value, onChange } = props;
+    const { scene, cubeOnly, value, onChange, onLink, defaultValue } = props;
     const classes = useStyles$b();
     const getTextures = useCallback(() => scene.textures, [scene.textures]);
-    const getName = useCallback((texture) => texture.displayName || texture.name, []);
+    const getName = useCallback((texture) => texture.displayName || texture.name || `${texture.getClassName() || "Unnamed Texture"} (${texture.uniqueId})`, []);
     const filter = useCallback((texture) => !cubeOnly || texture.isCube, [cubeOnly]);
-    return (jsxs("div", { className: classes.container, children: [jsx(EntitySelector, { value: value, onChange: onChange, getEntities: getTextures, getName: getName, filter: filter }), jsx(TextureUpload, { scene: scene, onChange: onChange, cubeOnly: cubeOnly })] }));
+    return (jsxs("div", { className: classes.container, children: [jsx(EntitySelector, { value: value, onChange: onChange, onLink: onLink, defaultValue: defaultValue, getEntities: getTextures, getName: getName, filter: filter }), !value && jsx(TextureUpload, { scene: scene, onChange: onChange, cubeOnly: cubeOnly })] }));
+};
+
+/**
+ * A primitive component with a ComboBox for selecting from existing scene skeletons.
+ * @param props SkeletonSelectorProps
+ * @returns SkeletonSelector component
+ */
+const SkeletonSelector = (props) => {
+    SkeletonSelector.displayName = "SkeletonSelector";
+    const { scene, ...rest } = props;
+    const getSkeletons = useCallback(() => scene.skeletons, [scene.skeletons]);
+    const getName = useCallback((skeleton) => skeleton.name, []);
+    return jsx(EntitySelector, { ...rest, getEntities: getSkeletons, getName: getName });
 };
 
+const NodeSelectorPropertyLine = (props) => jsx(PropertyLine, { ...props, children: jsx(NodeSelector, { ...props }) });
 const MaterialSelectorPropertyLine = (props) => jsx(PropertyLine, { ...props, children: jsx(MaterialSelector, { ...props }) });
 const TextureSelectorPropertyLine = (props) => jsx(PropertyLine, { ...props, children: jsx(TextureSelector, { ...props }) });
+const SkeletonSelectorPropertyLine = (props) => jsx(PropertyLine, { ...props, children: jsx(SkeletonSelector, { ...props }) });
 
 /**
  * Displays the lighting and color properties of a PBR material.
@@ -6436,9 +6534,10 @@ const PBRMaterialLightingAndColorProperties = (props) => {
  * @returns A JSX element representing the texture channels.
  */
 const PBRMaterialTextureProperties = (props) => {
-    const { material } = props;
+    const { material, selectionService } = props;
     const scene = material.getScene();
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Albedo", target: material, propertyKey: "albedoTexture", scene: scene, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Base Weight", target: material, propertyKey: "baseWeightTexture", scene: scene, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Base Diffuse Roughness", target: material, propertyKey: "baseDiffuseRoughnessTexture", scene: scene, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Metallic Roughness", target: material, propertyKey: "metallicTexture", scene: scene, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Reflection", target: material, propertyKey: "reflectionTexture", scene: scene, cubeOnly: true, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Refraction", target: material, propertyKey: "refractionTexture", scene: scene, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Reflectivity", target: material, propertyKey: "reflectivityTexture", scene: scene, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Micro-surface", target: material, propertyKey: "microSurfaceTexture", scene: scene, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Bump", target: material, propertyKey: "bumpTexture", scene: scene, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Emissive", target: material, propertyKey: "emissiveTexture", scene: scene, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Opacity", target: material, propertyKey: "opacityTexture", scene: scene, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Ambient", target: material, propertyKey: "ambientTexture", scene: scene, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Lightmap", target: material, propertyKey: "lightmapTexture", scene: scene, defaultValue: null })] }));
+    const selectEntity = (entity) => (selectionService.selectedEntity = entity);
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Albedo", target: material, propertyKey: "albedoTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Base Weight", target: material, propertyKey: "baseWeightTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Base Diffuse Roughness", target: material, propertyKey: "baseDiffuseRoughnessTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Metallic Roughness", target: material, propertyKey: "metallicTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Reflection", target: material, propertyKey: "reflectionTexture", scene: scene, cubeOnly: true, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Refraction", target: material, propertyKey: "refractionTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Reflectivity", target: material, propertyKey: "reflectivityTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Micro-surface", target: material, propertyKey: "microSurfaceTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Bump", target: material, propertyKey: "bumpTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Emissive", target: material, propertyKey: "emissiveTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Opacity", target: material, propertyKey: "opacityTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Ambient", target: material, propertyKey: "ambientTexture", scene: scene, onLink: selectEntity, defaultValue: null }), "component=", TextureSelectorPropertyLine, jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Lightmap", target: material, propertyKey: "lightmapTexture", scene: scene, onLink: selectEntity, defaultValue: null })] }));
 };
 
 // TODO: ryamtrem / gehalper This function is temporal until there is a line control to handle texture links (similar to the old TextureLinkLineComponent)
@@ -6717,7 +6816,7 @@ const MaterialPropertiesServiceDefinition = {
             content: [
                 {
                     section: "Textures",
-                    component: ({ context }) => jsx(PBRMaterialTextureProperties, { material: context }),
+                    component: ({ context }) => jsx(PBRMaterialTextureProperties, { material: context, selectionService: selectionService }),
                 },
                 {
                     section: "Lighting & Colors",
@@ -7008,12 +7107,10 @@ const MetadataPropertiesServiceDefinition = {
 const AbstractMeshGeneralProperties = (props) => {
     const { mesh, selectionService } = props;
     // Use the observable to keep keep state up-to-date and re-render the component when it changes.
-    const material = useObservableState(() => mesh.material, mesh.onMaterialChangedObservable);
-    const skeleton = useProperty(mesh, "skeleton");
     const isAnInstance = useProperty(mesh, "isAnInstance");
     // TODO: Handle case where array is mutated
     const subMeshes = useProperty(mesh, "subMeshes");
-    return (jsxs(Fragment, { children: [jsx(StringifiedPropertyLine, { label: "Vertices", value: mesh.getTotalVertices() }), jsx(StringifiedPropertyLine, { label: "Faces", value: mesh.getTotalIndices() / 3 }), jsx(StringifiedPropertyLine, { label: "Sub-Meshes", value: subMeshes.length }), jsx(LinkToEntityPropertyLine, { label: "Skeleton", description: "The skeleton associated with the mesh.", entity: skeleton, selectionService: selectionService }), jsx(LinkToEntityPropertyLine, { label: "Material", description: "The material used by the mesh.", entity: material, selectionService: selectionService }), !mesh.isAnInstance && (jsx(BoundProperty, { defaultValue: null, component: MaterialSelectorPropertyLine, label: "Active Material", target: mesh, propertyKey: "material", scene: mesh.getScene() })), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Is Pickable", target: mesh, propertyKey: "isPickable" }), isAnInstance && mesh instanceof InstancedMesh && (jsx(LinkToEntityPropertyLine, { label: "Source", description: "The source mesh from which this instance was created.", entity: mesh.sourceMesh, selectionService: selectionService }))] }));
+    return (jsxs(Fragment, { children: [jsx(StringifiedPropertyLine, { label: "Vertices", value: mesh.getTotalVertices() }), jsx(StringifiedPropertyLine, { label: "Faces", value: mesh.getTotalIndices() / 3 }), jsx(StringifiedPropertyLine, { label: "Sub-Meshes", value: subMeshes.length }), jsx(BoundProperty, { defaultValue: null, component: SkeletonSelectorPropertyLine, label: "Skeleton", description: "The skeleton associated with the mesh.", target: mesh, propertyKey: "skeleton", scene: mesh.getScene(), onLink: (skeleton) => (selectionService.selectedEntity = skeleton) }), !mesh.isAnInstance && (jsx(BoundProperty, { defaultValue: null, component: MaterialSelectorPropertyLine, label: "Material", description: "The material used by the mesh.", target: mesh, propertyKey: "material", scene: mesh.getScene(), onLink: (material) => (selectionService.selectedEntity = material) })), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Is Pickable", target: mesh, propertyKey: "isPickable" }), isAnInstance && mesh instanceof InstancedMesh && (jsx(BoundProperty, { component: NodeSelectorPropertyLine, label: "Source", description: "The source mesh from which this instance was created.", target: mesh, propertyKey: "sourceMesh", scene: mesh.getScene(), onLink: (node) => (selectionService.selectedEntity = node) }))] }));
 };
 const AbstractMeshDisplayProperties = (props) => {
     const { mesh } = props;
@@ -7294,9 +7391,8 @@ const GaussianSplattingDisplayProperties = (props) => {
 
 const NodeGeneralProperties = (props) => {
     const { node, selectionService } = props;
-    const parent = useProperty(node, "parent");
     const isEnabled = useObservableState(() => node.isEnabled(false), node.onEnabledStateChangedObservable);
-    return (jsxs(Fragment, { children: [jsx(LinkToEntityPropertyLine, { label: "Parent", description: "The parent of this node", entity: parent, selectionService: selectionService }), jsx(SwitchPropertyLine, { label: "Is Enabled", description: "Whether the node is enabled or not.", value: isEnabled, onChange: (checked) => node.setEnabled(checked) }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Inherit Visibility", description: "Whether the node inherits visibility from its parent.", target: node, propertyKey: "inheritVisibility" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Is Visible", description: "Whether the node is visible or not.", target: node, propertyKey: "isVisible" })] }));
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NodeSelectorPropertyLine, label: "Parent", target: node, propertyKey: "parent", scene: node.getScene(), defaultValue: null, onLink: (parentNode) => (selectionService.selectedEntity = parentNode) }), jsx(SwitchPropertyLine, { label: "Is Enabled", description: "Whether the node is enabled or not.", value: isEnabled, onChange: (checked) => node.setEnabled(checked) }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Inherit Visibility", description: "Whether the node inherits visibility from its parent.", target: node, propertyKey: "inheritVisibility" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Is Visible", description: "Whether the node is visible or not.", target: node, propertyKey: "isVisible" })] }));
 };
 
 const NodePropertiesServiceDefinition = {
@@ -7679,80 +7775,776 @@ const AttractorList = (props) => {
                 } })] }));
 };
 
-const ParticleSystemEmissionProperties = (props) => {
-    const { particleSystem: system } = props;
-    const emitRateGradients = useParticleSystemProperty(system, "getEmitRateGradients", "function", "addEmitRateGradient", "removeEmitRateGradient", "forceRefreshGradients");
-    return (jsx(Fragment, { children: !system.isNodeGenerated && (jsx(FactorGradientList, { gradients: emitRateGradients, label: "Emit Rate Gradient", removeGradient: (gradient) => {
-                system.removeEmitRateGradient(gradient.gradient);
-                system.forceRefreshGradients();
-            }, addGradient: (gradient) => {
-                gradient ? system.addEmitRateGradient(gradient.gradient, gradient.factor1, gradient.factor2) : system.addEmitRateGradient(Math.random(), 50, 50);
-                system.forceRefreshGradients();
-            }, onChange: (_gradient) => {
-                system.forceRefreshGradients();
-            } })) }));
-};
-const ParticleSystemColorProperties = (props) => {
+const SnippetDashboardStorageKey = "Babylon/InspectorV2/SnippetDashboard/ParticleSystems";
+function TryParseJsonString(value) {
+    if (!value) {
+        return undefined;
+    }
+    try {
+        return JSON.parse(value);
+    }
+    catch {
+        return undefined;
+    }
+}
+function ParseJsonLoadContents(contents) {
+    if (contents instanceof ArrayBuffer) {
+        const decoder = new TextDecoder("utf-8");
+        return TryParseJsonString(decoder.decode(contents)) ?? undefined;
+    }
+    if (typeof contents === "string") {
+        return TryParseJsonString(contents) ?? undefined;
+    }
+    return undefined;
+}
+function NormalizeParticleSystemSerialization(rawData) {
+    const jsonPayload = TryParseJsonString(rawData?.jsonPayload);
+    const particleSystem = TryParseJsonString(jsonPayload?.particleSystem);
+    return particleSystem ?? rawData;
+}
+function PersistSnippetId(snippetId) {
+    // Persist snippet IDs locally for quick reuse.
+    try {
+        const existing = JSON.parse(localStorage.getItem(SnippetDashboardStorageKey) || "[]");
+        const list = Array.isArray(existing) ? existing : [];
+        if (!list.includes(snippetId)) {
+            list.unshift(snippetId);
+        }
+        localStorage.setItem(SnippetDashboardStorageKey, JSON.stringify(list.slice(0, 50)));
+    }
+    catch {
+        // Ignore storage failures.
+    }
+}
+/**
+ * Display general (high-level) information about a particle system.
+ * @param props Component props.
+ * @returns Render property lines.
+ */
+const ParticleSystemGeneralProperties = (props) => {
     const { particleSystem: system } = props;
-    const colorGradients = useParticleSystemProperty(system, "getColorGradients", "function", "addColorGradient", "removeColorGradient", "forceRefreshGradients");
-    return (jsx(Fragment, { children: !system.isNodeGenerated && (jsx(Color4GradientList, { gradients: colorGradients, label: "Color Gradient", removeGradient: (gradient) => {
-                system.removeColorGradient(gradient.gradient);
-                system.forceRefreshGradients();
-            }, addGradient: (gradient) => {
-                if (gradient) {
-                    system.addColorGradient(gradient.gradient, gradient.color1, gradient.color2);
+    const scene = system.getScene();
+    const isBillboardBased = useProperty(system, "isBillboardBased");
+    const capacity = useObservableState(() => system.getCapacity());
+    const activeCount = useObservableState(() => system.getActiveCount(), scene?.onBeforeRenderObservable);
+    const isAlive = useObservableState(() => system.isAlive(), scene?.onBeforeRenderObservable);
+    const isStopping = useObservableState(() => system.isStopping(), scene?.onBeforeRenderObservable);
+    const snippetId = useProperty(system, "snippetId");
+    const [stopRequested, setStopRequested] = useState(false);
+    useEffect(() => {
+        if (!stopRequested) {
+            return;
+        }
+        // Clear stop flag once the system fully stops.
+        if (!isAlive && !isStopping) {
+            setStopRequested(false);
+        }
+    }, [stopRequested, isAlive, isStopping]);
+    const applyParticleSystemJsonToSystem = useCallback((jsonObject) => {
+        if (!scene) {
+            alert("No scene available.");
+            return;
+        }
+        const candidate = NormalizeParticleSystemSerialization(jsonObject);
+        try {
+            // Apply in-place to keep selection stable.
+            ParticleSystem._Parse(candidate, system, scene, "");
+        }
+        catch (e) {
+            alert("Failed to load particle system: " + e);
+        }
+    }, [scene, system]);
+    const loadFromSnippetServer = useCallback(() => {
+        if (!scene) {
+            alert("No scene available.");
+            return;
+        }
+        // Prompt for a snippet id (minimal UX).
+        const requestedSnippetId = window.prompt("Please enter the snippet ID to use");
+        const trimmed = requestedSnippetId?.trim();
+        if (!trimmed) {
+            return;
+        }
+        const request = new XMLHttpRequest();
+        request.onreadystatechange = () => {
+            if (request.readyState !== 4) {
+                return;
+            }
+            if (request.status !== 200) {
+                alert("Unable to load your particle system");
+                return;
+            }
+            try {
+                const responseObject = ParseJsonLoadContents(request.responseText);
+                if (!responseObject) {
+                    alert("Unable to load your particle system");
+                    return;
                 }
-                else {
-                    system.addColorGradient(0, Color4.FromColor3(Color3.Black()), Color4.FromColor3(Color3.Black()));
-                    system.addColorGradient(1, Color4.FromColor3(Color3.White()), Color4.FromColor3(Color3.White()));
+                applyParticleSystemJsonToSystem(responseObject);
+                system.snippetId = trimmed;
+            }
+            catch (e) {
+                alert("Unable to load your particle system: " + e);
+            }
+        };
+        request.open("GET", ParticleHelper.SnippetUrl + "/" + trimmed.replace(/#/g, "/"), true);
+        request.send();
+    }, [applyParticleSystemJsonToSystem, scene, system]);
+    const saveToSnippetServer = useCallback(() => {
+        // Serialize once and post as snippet payload.
+        const content = JSON.stringify(system.serialize(true));
+        const xmlHttp = new XMLHttpRequest();
+        xmlHttp.onreadystatechange = () => {
+            if (xmlHttp.readyState !== 4) {
+                return;
+            }
+            if (xmlHttp.status !== 200) {
+                alert("Unable to save your particle system");
+                return;
+            }
+            try {
+                const snippet = JSON.parse(xmlHttp.responseText);
+                system.snippetId = snippet.id;
+                if (snippet.version && snippet.version !== "0") {
+                    system.snippetId += "#" + snippet.version;
+                }
+                // Copy to clipboard when available.
+                if (navigator.clipboard) {
+                    void navigator.clipboard.writeText(system.snippetId);
                 }
-                system.forceRefreshGradients();
-            }, onChange: (_gradient) => {
-                system.forceRefreshGradients();
-            } })) }));
+                PersistSnippetId(system.snippetId);
+                alert("Particle system saved with ID: " + system.snippetId + " (the id was also saved to your clipboard)");
+            }
+            catch (e) {
+                alert("Unable to save your particle system: " + e);
+            }
+        };
+        xmlHttp.open("POST", ParticleHelper.SnippetUrl + (system.snippetId ? "/" + system.snippetId : ""), true);
+        xmlHttp.setRequestHeader("Content-Type", "application/json");
+        const dataToSend = {
+            payload: JSON.stringify({
+                particleSystem: content,
+            }),
+            name: "",
+            description: "",
+            tags: "",
+        };
+        xmlHttp.send(JSON.stringify(dataToSend));
+    }, [system]);
+    return (jsxs(Fragment, { children: [jsx(StringifiedPropertyLine, { label: "Capacity", description: "Maximum number of particles in the system.", value: capacity }), jsx(StringifiedPropertyLine, { label: "Active Particles", description: "Current number of active particles.", value: activeCount }), jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "Blend Mode", target: system, propertyKey: "blendMode", options: BlendModeOptions }), jsx(BoundProperty, { component: Vector3PropertyLine, label: "World Offset", target: system, propertyKey: "worldOffset" }), !system.isNodeGenerated && jsx(BoundProperty, { component: Vector3PropertyLine, label: "Gravity", target: system, propertyKey: "gravity" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Is Billboard", target: system, propertyKey: "isBillboardBased" }), isBillboardBased && (jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "Billboard Mode", target: system, propertyKey: "billboardMode", options: ParticleBillboardModeOptions })), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Is Local", target: system, propertyKey: "isLocal" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Force Depth Write", target: system, propertyKey: "forceDepthWrite" }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Update Speed", target: system, propertyKey: "updateSpeed", min: 0, step: 0.01 }), jsx(ButtonLine, { label: system.isNodeGenerated ? "Edit in Node Particle Editor (coming soon)" : "View in Node Particle Editor (coming soon)", disabled: true, onClick: () => {
+                    // Hook up once Node Particle Editor UX is wired.
+                } }), isStopping ? (jsx(TextPropertyLine, { label: "System is stopping...", value: "" })) : isAlive ? (jsx(ButtonLine, { label: "Stop", onClick: () => {
+                    setStopRequested(true);
+                    system.stop();
+                } })) : (jsx(ButtonLine, { label: "Start", onClick: () => {
+                    setStopRequested(false);
+                    system.start();
+                } })), !system.isNodeGenerated && (jsxs(Fragment, { children: [jsx(FileUploadLine, { label: "Load from file", accept: ".json", onClick: (files) => {
+                            if (files.length === 0) {
+                                return;
+                            }
+                            const file = files[0];
+                            Tools.ReadFile(file, (data) => {
+                                const jsonObject = ParseJsonLoadContents(data);
+                                if (!jsonObject) {
+                                    alert("Unable to load particle system from file.");
+                                    return;
+                                }
+                                applyParticleSystemJsonToSystem(jsonObject);
+                            }, undefined, true);
+                        } }), jsx(ButtonLine, { label: "Save to file", onClick: () => {
+                            // Download serialization as a JSON file.
+                            const data = JSON.stringify(system.serialize(true), null, 2);
+                            const blob = new Blob([data], { type: "application/json" });
+                            const name = (system.name && system.name.trim().length > 0 ? system.name.trim() : "particleSystem") + ".json";
+                            Tools.Download(blob, name);
+                        } }), snippetId && jsx(TextPropertyLine, { label: "Snippet ID", value: snippetId }), jsx(ButtonLine, { label: "Load from snippet server", onClick: loadFromSnippetServer }), jsx(ButtonLine, { label: "Save to snippet server", onClick: saveToSnippetServer })] }))] }));
 };
+/**
+ * Display attractor-related properties for a particle system.
+ * @param props Component props.
+ * @returns Render property lines.
+ */
 const ParticleSystemAttractorProperties = (props) => {
     const { particleSystem: system } = props;
-    const attractors = useParticleSystemProperty(system, "attractors", "property", "addAttractor", "removeAttractor");
+    const attractorsGetter = useCallback(() => system.attractors ?? [], [system]);
+    const attractors = useObservableArray(system, attractorsGetter, "addAttractor", "removeAttractor");
     const scene = system.getScene();
     return (jsx(Fragment, { children: scene ? (jsx(AttractorList, { attractors: attractors, scene: scene, system: system })) : (
-        // Should never get here since sceneExplorer only displays if there is a scene, but adding UX in case that assumption changes in future
+        // Handle missing scene defensively.
         jsx(MessageBar, { intent: "info", title: "No Scene Available", message: "Cannot display attractors without a scene" })) }));
 };
-// TODO-iv2: This can be more generic to work for not just particleSystems
-const useParticleSystemProperty = (system, propertyKey, observableType, addFn, removeFn, changeFn) => {
+/**
+ * Display emitter-related properties for a particle system.
+ * @param props Component props.
+ * @returns Render property lines.
+ */
+const ParticleSystemEmitterProperties = (props) => {
+    const { particleSystem: system, selectionService } = props;
+    const scene = system.getScene();
+    const emitter = useProperty(system, "emitter");
+    const emitterObject = emitter && !(emitter instanceof Vector3) ? emitter : undefined;
+    const [sceneNodesVersion, setSceneNodesVersion] = useState(0);
+    useEffect(() => {
+        if (!scene) {
+            return;
+        }
+        // Bump a local version counter whenever nodes change to keep emitter options up-to-date.
+        const bump = () => setSceneNodesVersion((value) => value + 1);
+        const newMeshToken = scene.onNewMeshAddedObservable.add(bump);
+        const meshRemovedToken = scene.onMeshRemovedObservable.add(bump);
+        const newTransformNodeToken = scene.onNewTransformNodeAddedObservable.add(bump);
+        const transformNodeRemovedToken = scene.onTransformNodeRemovedObservable.add(bump);
+        return () => {
+            scene.onNewMeshAddedObservable.remove(newMeshToken);
+            scene.onMeshRemovedObservable.remove(meshRemovedToken);
+            scene.onNewTransformNodeAddedObservable.remove(newTransformNodeToken);
+            scene.onTransformNodeRemovedObservable.remove(transformNodeRemovedToken);
+        };
+    }, [scene]);
+    const sceneNodes = useMemo(() => {
+        if (!scene) {
+            return [];
+        }
+        const seenUniqueIds = new Set();
+        const unique = [];
+        for (const mesh of scene.meshes) {
+            const uniqueId = mesh.uniqueId;
+            if (typeof uniqueId === "number") {
+                if (seenUniqueIds.has(uniqueId)) {
+                    continue;
+                }
+                seenUniqueIds.add(uniqueId);
+            }
+            unique.push(mesh);
+        }
+        const emitterUniqueId = emitterObject?.uniqueId;
+        if (emitterObject && emitterUniqueId !== undefined && !seenUniqueIds.has(emitterUniqueId)) {
+            // Keep the current emitter visible even if it isn't present in the scene arrays for any reason.
+            unique.unshift(emitterObject);
+        }
+        return unique;
+    }, [scene, sceneNodesVersion, emitterObject]);
+    const emitterSelectionValue = !emitter ? "none" : emitter instanceof Vector3 ? "position" : `node:${emitter.uniqueId}`;
+    const emitterVector = emitter instanceof Vector3 ? emitter : undefined;
+    // Subscribe to Vector3 internal components to re-render on in-place mutations.
+    useProperty(emitterVector, "_x");
+    useProperty(emitterVector, "_y");
+    useProperty(emitterVector, "_z");
+    const particleEmitterType = useProperty(system, "particleEmitterType");
+    // Derive the current dropdown value from the current instance to stay in sync with external changes.
+    const derivedEmitterTypeKey = (() => {
+        if (particleEmitterType instanceof SphereParticleEmitter) {
+            return "sphere";
+        }
+        if (particleEmitterType instanceof ConeParticleEmitter) {
+            return "cone";
+        }
+        if (particleEmitterType instanceof CylinderParticleEmitter) {
+            return "cylinder";
+        }
+        if (particleEmitterType instanceof HemisphericParticleEmitter) {
+            return "hemispheric";
+        }
+        if (particleEmitterType instanceof PointParticleEmitter) {
+            return "point";
+        }
+        if (particleEmitterType instanceof MeshParticleEmitter) {
+            return "mesh";
+        }
+        // Fall back to "box" for unknown emitter types to keep the dropdown valid.
+        return "box";
+    })();
+    const [emitterTypeKey, setEmitterTypeKey] = useState(derivedEmitterTypeKey);
+    useEffect(() => {
+        // Keep local dropdown state aligned with the derived key when the engine changes underneath.
+        setEmitterTypeKey(derivedEmitterTypeKey);
+    }, [derivedEmitterTypeKey]);
+    return (jsxs(Fragment, { children: [jsx(StringDropdownPropertyLine, { label: "Emitter", value: emitterSelectionValue, options: [
+                    { label: "None", value: "none" },
+                    { label: "Position", value: "position" },
+                    ...sceneNodes.map((node) => {
+                        const uniqueId = node.uniqueId;
+                        const name = node.name ?? "(unnamed)";
+                        const label = `${name} (#${uniqueId})`;
+                        return {
+                            label,
+                            value: `node:${uniqueId}`,
+                        };
+                    }),
+                ], onChange: (value) => {
+                    const next = value;
+                    if (next === "none") {
+                        system.emitter = null;
+                        return;
+                    }
+                    if (next === "position") {
+                        if (!(system.emitter instanceof Vector3)) {
+                            system.emitter = Vector3.Zero();
+                        }
+                        return;
+                    }
+                    const uniqueIdText = next.replace("node:", "");
+                    const uniqueId = Number(uniqueIdText);
+                    const node = sceneNodes.find((candidate) => candidate.uniqueId === uniqueId);
+                    if (node) {
+                        system.emitter = node;
+                    }
+                } }), emitterSelectionValue === "position" && emitterVector && (jsx(Vector3PropertyLine, { label: "Position", value: emitterVector, onChange: (value) => {
+                    if (system.emitter instanceof Vector3) {
+                        system.emitter.copyFrom(value);
+                    }
+                    else {
+                        system.emitter = value;
+                    }
+                } })), emitterSelectionValue !== "none" && emitter && !(emitter instanceof Vector3) && (jsx(LinkToEntityPropertyLine, { label: "Entity", entity: emitter, selectionService: selectionService })), !system.isNodeGenerated && (jsx(StringDropdownPropertyLine, { label: "Type", value: emitterTypeKey, options: [
+                    { label: "Box", value: "box" },
+                    { label: "Cone", value: "cone" },
+                    { label: "Cylinder", value: "cylinder" },
+                    { label: "Hemispheric", value: "hemispheric" },
+                    { label: "Point", value: "point" },
+                    { label: "Mesh", value: "mesh" },
+                    { label: "Sphere", value: "sphere" },
+                ], onChange: (value) => {
+                    const next = value;
+                    setEmitterTypeKey(next);
+                    // Update the engine by swapping the particleEmitterType instance to match the selected key.
+                    switch (next) {
+                        case "box":
+                            system.createBoxEmitter(new Vector3(0, 1, 0), new Vector3(0, 1, 0), new Vector3(-0.5, -0.5, -0.5), new Vector3(0.5, 0.5, 0.5));
+                            break;
+                        case "sphere":
+                            system.createSphereEmitter(1, 1);
+                            break;
+                        case "cone":
+                            system.createConeEmitter(1, Math.PI / 4);
+                            break;
+                        case "cylinder":
+                            system.createCylinderEmitter(1, 1, 1, 0);
+                            break;
+                        case "hemispheric":
+                            system.createHemisphericEmitter(1, 1);
+                            break;
+                        case "point":
+                            system.createPointEmitter(new Vector3(0, 1, 0), new Vector3(0, 1, 0));
+                            break;
+                        case "mesh": {
+                            // Default to the first mesh in the scene when available, then allow changes via "Source".
+                            const defaultMesh = scene?.meshes?.[0] ?? null;
+                            system.particleEmitterType = new MeshParticleEmitter(defaultMesh);
+                            break;
+                        }
+                    }
+                } })), !system.isNodeGenerated && particleEmitterType instanceof MeshParticleEmitter && (jsx(Fragment, { children: scene && scene.meshes.length > 0 ? (jsx(StringDropdownPropertyLine, { label: "Source", value: particleEmitterType.mesh ? `mesh:${particleEmitterType.mesh.uniqueId}` : `mesh:${scene.meshes[0].uniqueId}`, options: scene.meshes.map((mesh) => {
+                        const uniqueId = mesh.uniqueId;
+                        const name = mesh.name ?? "(unnamed)";
+                        const label = `${name} (#${uniqueId})`;
+                        return {
+                            label,
+                            value: `mesh:${uniqueId}`,
+                        };
+                    }), onChange: (value) => {
+                        const next = String(value);
+                        const uniqueIdText = next.replace("mesh:", "");
+                        const uniqueId = Number(uniqueIdText);
+                        const mesh = scene.meshes.find((candidate) => candidate.uniqueId === uniqueId) ?? null;
+                        particleEmitterType.mesh = mesh;
+                    } })) : (jsx(TextPropertyLine, { label: "Source", value: "No meshes in scene." })) })), !system.isNodeGenerated && particleEmitterType instanceof BoxParticleEmitter && (jsxs(Fragment, { children: [jsx(BoundProperty, { component: Vector3PropertyLine, label: "Direction1", target: particleEmitterType, propertyKey: "direction1" }), jsx(BoundProperty, { component: Vector3PropertyLine, label: "Direction2", target: particleEmitterType, propertyKey: "direction2" }), jsx(BoundProperty, { component: Vector3PropertyLine, label: "Min emit box", target: particleEmitterType, propertyKey: "minEmitBox" }), jsx(BoundProperty, { component: Vector3PropertyLine, label: "Max emit box", target: particleEmitterType, propertyKey: "maxEmitBox" })] })), !system.isNodeGenerated && particleEmitterType instanceof ConeParticleEmitter && (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Radius range", target: particleEmitterType, propertyKey: "radiusRange", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Height range", target: particleEmitterType, propertyKey: "heightRange", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Emit from spawn point only", target: particleEmitterType, propertyKey: "emitFromSpawnPointOnly" }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Direction randomizer", target: particleEmitterType, propertyKey: "directionRandomizer", min: 0, max: 1, step: 0.01 })] })), !system.isNodeGenerated && particleEmitterType instanceof SphereParticleEmitter && (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Radius", target: particleEmitterType, propertyKey: "radius", min: 0, step: 0.1 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Radius range", target: particleEmitterType, propertyKey: "radiusRange", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Direction randomizer", target: particleEmitterType, propertyKey: "directionRandomizer", min: 0, max: 1, step: 0.01 })] })), !system.isNodeGenerated && particleEmitterType instanceof CylinderParticleEmitter && (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Radius", target: particleEmitterType, propertyKey: "radius", min: 0, step: 0.1 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Height", target: particleEmitterType, propertyKey: "height", min: 0, step: 0.1 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Radius range", target: particleEmitterType, propertyKey: "radiusRange", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Direction randomizer", target: particleEmitterType, propertyKey: "directionRandomizer", min: 0, max: 1, step: 0.01 })] })), !system.isNodeGenerated && particleEmitterType instanceof HemisphericParticleEmitter && (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Radius", target: particleEmitterType, propertyKey: "radius", min: 0, step: 0.1 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Radius range", target: particleEmitterType, propertyKey: "radiusRange", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Direction randomizer", target: particleEmitterType, propertyKey: "directionRandomizer", min: 0, max: 1, step: 0.01 })] })), !system.isNodeGenerated && particleEmitterType instanceof PointParticleEmitter && (jsxs(Fragment, { children: [jsx(BoundProperty, { component: Vector3PropertyLine, label: "Direction1", target: particleEmitterType, propertyKey: "direction1" }), jsx(BoundProperty, { component: Vector3PropertyLine, label: "Direction2", target: particleEmitterType, propertyKey: "direction2" })] })), !system.isNodeGenerated && !scene && jsx(TextPropertyLine, { label: "Emitter", value: "No scene available." })] }));
+};
+/**
+ * Display emission-related properties for a particle system.
+ * @param props Component props.
+ * @returns Render property lines.
+ */
+const ParticleSystemEmissionProperties = (props) => {
+    const { particleSystem: system } = props;
+    const emitRateGradientsGetter = useCallback(() => system.getEmitRateGradients(), [system]);
+    const emitRateGradients = useObservableArray(system, emitRateGradientsGetter, "addEmitRateGradient", "removeEmitRateGradient", "forceRefreshGradients");
+    const velocityGradientsGetter = useCallback(() => system.getVelocityGradients(), [system]);
+    const velocityGradients = useObservableArray(system, velocityGradientsGetter, "addVelocityGradient", "removeVelocityGradient", "forceRefreshGradients");
+    const limitVelocityGradientsGetter = useCallback(() => system.getLimitVelocityGradients(), [system]);
+    const limitVelocityGradients = useObservableArray(system, limitVelocityGradientsGetter, "addLimitVelocityGradient", "removeLimitVelocityGradient", "forceRefreshGradients");
+    const dragGradientsGetter = useCallback(() => system.getDragGradients(), [system]);
+    const dragGradients = useObservableArray(system, dragGradientsGetter, "addDragGradient", "removeDragGradient", "forceRefreshGradients");
+    const useEmitRateGradients = (emitRateGradients?.length ?? 0) > 0;
+    const useVelocityGradients = (velocityGradients?.length ?? 0) > 0;
+    const useLimitVelocityGradients = (limitVelocityGradients?.length ?? 0) > 0;
+    const useDragGradients = (dragGradients?.length ?? 0) > 0;
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Emit rate", target: system, propertyKey: "emitRate", min: 0, step: 1 }), !system.isNodeGenerated && !useEmitRateGradients && (jsx(ButtonLine, { label: "Use Emit rate gradients", onClick: () => {
+                    system.addEmitRateGradient(0, system.emitRate, system.emitRate);
+                    system.forceRefreshGradients();
+                } })), !system.isNodeGenerated && useEmitRateGradients && (jsx(FactorGradientList, { gradients: emitRateGradients, label: "Emit Rate Gradient", removeGradient: (gradient) => {
+                    system.removeEmitRateGradient(gradient.gradient);
+                    system.forceRefreshGradients();
+                }, addGradient: (gradient) => {
+                    if (gradient) {
+                        system.addEmitRateGradient(gradient.gradient, gradient.factor1, gradient.factor2);
+                    }
+                    else {
+                        system.addEmitRateGradient(0, system.emitRate, system.emitRate);
+                    }
+                    system.forceRefreshGradients();
+                }, onChange: (_gradient) => {
+                    system.forceRefreshGradients();
+                } })), !system.isNodeGenerated && (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Min Emit Power", target: system, propertyKey: "minEmitPower", min: 0, step: 0.1 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Max Emit Power", target: system, propertyKey: "maxEmitPower", min: 0, step: 0.1 })] })), !system.isNodeGenerated && !useVelocityGradients && (jsx(ButtonLine, { label: "Use Velocity gradients", onClick: () => {
+                    system.addVelocityGradient(0, 1, 1);
+                    system.forceRefreshGradients();
+                } })), !system.isNodeGenerated && useVelocityGradients && (jsx(FactorGradientList, { gradients: velocityGradients, label: "Velocity Gradient", removeGradient: (gradient) => {
+                    system.removeVelocityGradient(gradient.gradient);
+                    system.forceRefreshGradients();
+                }, addGradient: (gradient) => {
+                    if (gradient) {
+                        system.addVelocityGradient(gradient.gradient, gradient.factor1, gradient.factor2);
+                    }
+                    else {
+                        system.addVelocityGradient(0, 1, 1);
+                    }
+                    system.forceRefreshGradients();
+                }, onChange: (_gradient) => {
+                    system.forceRefreshGradients();
+                } })), !system.isNodeGenerated && !useLimitVelocityGradients && (jsx(ButtonLine, { label: "Use Limit Velocity gradients", onClick: () => {
+                    system.addLimitVelocityGradient(0, 1, 1);
+                    system.forceRefreshGradients();
+                } })), !system.isNodeGenerated && useLimitVelocityGradients && (jsx(FactorGradientList, { gradients: limitVelocityGradients, label: "Limit Velocity Gradient", removeGradient: (gradient) => {
+                    system.removeLimitVelocityGradient(gradient.gradient);
+                    system.forceRefreshGradients();
+                }, addGradient: (gradient) => {
+                    if (gradient) {
+                        system.addLimitVelocityGradient(gradient.gradient, gradient.factor1, gradient.factor2);
+                    }
+                    else {
+                        system.addLimitVelocityGradient(0, 1, 1);
+                    }
+                    system.forceRefreshGradients();
+                }, onChange: (_gradient) => {
+                    system.forceRefreshGradients();
+                } })), !system.isNodeGenerated && !useDragGradients && (jsx(ButtonLine, { label: "Use Drag gradients", onClick: () => {
+                    system.addDragGradient(0, 1, 1);
+                    system.forceRefreshGradients();
+                } })), !system.isNodeGenerated && useDragGradients && (jsx(FactorGradientList, { gradients: dragGradients, label: "Drag Gradient", removeGradient: (gradient) => {
+                    system.removeDragGradient(gradient.gradient);
+                    system.forceRefreshGradients();
+                }, addGradient: (gradient) => {
+                    if (gradient) {
+                        system.addDragGradient(gradient.gradient, gradient.factor1, gradient.factor2);
+                    }
+                    else {
+                        system.addDragGradient(0, 1, 1);
+                    }
+                    system.forceRefreshGradients();
+                }, onChange: (_gradient) => {
+                    system.forceRefreshGradients();
+                } }))] }));
+};
+/**
+ * Display size-related properties for a particle system.
+ * @param props Component props.
+ * @returns Render property lines.
+ */
+const ParticleSystemSizeProperties = (props) => {
+    const { particleSystem: system } = props;
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Min size", target: system, propertyKey: "minSize", min: 0, step: 0.1 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Max size", target: system, propertyKey: "maxSize", min: 0, step: 0.1 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Min scale x", target: system, propertyKey: "minScaleX", min: 0, step: 0.1 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Max scale x", target: system, propertyKey: "maxScaleX", min: 0, step: 0.1 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Min scale y", target: system, propertyKey: "minScaleY", min: 0, step: 0.1 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Max scale y", target: system, propertyKey: "maxScaleY", min: 0, step: 0.1 })] }));
+};
+/**
+ * Display lifetime-related properties for a particle system.
+ * @param props Component props.
+ * @returns Render property lines.
+ */
+const ParticleSystemLifetimeProperties = (props) => {
+    const { particleSystem: system } = props;
+    if (system.isNodeGenerated) {
+        return jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Target stop duration", target: system, propertyKey: "targetStopDuration", min: 0, step: 0.1 });
+    }
+    const lifeTimeGradientsGetter = useCallback(() => system.getLifeTimeGradients(), [system]);
+    const lifeTimeGradients = useObservableArray(system, lifeTimeGradientsGetter, "addLifeTimeGradient", "removeLifeTimeGradient", "forceRefreshGradients");
+    const useLifeTimeGradients = (lifeTimeGradients?.length ?? 0) > 0;
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Min lifetime", target: system, propertyKey: "minLifeTime", min: 0, step: 0.1 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Max lifetime", target: system, propertyKey: "maxLifeTime", min: 0, step: 0.1 }), !useLifeTimeGradients && (jsx(ButtonLine, { label: "Use Lifetime gradients", onClick: () => {
+                    system.addLifeTimeGradient(0, system.minLifeTime, system.maxLifeTime);
+                    system.forceRefreshGradients();
+                } })), useLifeTimeGradients && (jsx(FactorGradientList, { gradients: lifeTimeGradients, label: "Lifetime Gradient", removeGradient: (gradient) => {
+                    system.removeLifeTimeGradient(gradient.gradient);
+                    system.forceRefreshGradients();
+                }, addGradient: (gradient) => {
+                    if (gradient) {
+                        system.addLifeTimeGradient(gradient.gradient, gradient.factor1, gradient.factor2);
+                    }
+                    else {
+                        system.addLifeTimeGradient(0, system.minLifeTime, system.maxLifeTime);
+                    }
+                    system.forceRefreshGradients();
+                }, onChange: (_gradient) => {
+                    system.forceRefreshGradients();
+                } })), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Target stop duration", target: system, propertyKey: "targetStopDuration", min: 0, step: 0.1 })] }));
+};
+/**
+ * Display color-related properties for a particle system.
+ * @param props Component props.
+ * @returns Render property lines.
+ */
+const ParticleSystemColorProperties = (props) => {
+    const { particleSystem: system } = props;
+    const colorGradientsGetter = useCallback(() => system.getColorGradients(), [system]);
+    const colorGradients = useObservableArray(system, colorGradientsGetter, "addColorGradient", "removeColorGradient", "forceRefreshGradients");
+    const useRampGradients = useProperty(system, "useRampGradients");
+    const rampGradientsGetter = useCallback(() => system.getRampGradients(), [system]);
+    const rampGradients = useObservableArray(system, rampGradientsGetter, "addRampGradient", "removeRampGradient", "forceRefreshGradients");
+    const colorRemapGradientsGetter = useCallback(() => system.getColorRemapGradients(), [system]);
+    const colorRemapGradients = useObservableArray(system, colorRemapGradientsGetter, "addColorRemapGradient", "removeColorRemapGradient", "forceRefreshGradients");
+    const alphaRemapGradientsGetter = useCallback(() => system.getAlphaRemapGradients(), [system]);
+    const alphaRemapGradients = useObservableArray(system, alphaRemapGradientsGetter, "addAlphaRemapGradient", "removeAlphaRemapGradient", "forceRefreshGradients");
+    const hasColorGradients = (colorGradients?.length ?? 0) > 0;
+    const hasRampGradients = (rampGradients?.length ?? 0) > 0;
+    const hasColorRemapGradients = (colorRemapGradients?.length ?? 0) > 0;
+    const hasAlphaRemapGradients = (alphaRemapGradients?.length ?? 0) > 0;
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: Color4PropertyLine, label: "Color 1", target: system, propertyKey: "color1" }), jsx(BoundProperty, { component: Color4PropertyLine, label: "Color 2", target: system, propertyKey: "color2" }), jsx(BoundProperty, { component: Color4PropertyLine, label: "Color dead", target: system, propertyKey: "colorDead" }), !hasColorGradients && (jsx(ButtonLine, { label: "Use Color gradients", onClick: () => {
+                    system.addColorGradient(0, system.color1, system.color1);
+                    system.addColorGradient(1, system.color2, system.color2);
+                    system.forceRefreshGradients();
+                } })), hasColorGradients && (jsx(Color4GradientList, { gradients: colorGradients, label: "Color Gradient", removeGradient: (gradient) => {
+                    system.removeColorGradient(gradient.gradient);
+                    system.forceRefreshGradients();
+                }, addGradient: (gradient) => {
+                    if (gradient) {
+                        system.addColorGradient(gradient.gradient, gradient.color1, gradient.color2);
+                    }
+                    else {
+                        system.addColorGradient(0, system.color1, system.color1);
+                        system.addColorGradient(1, system.color2, system.color2);
+                    }
+                    system.forceRefreshGradients();
+                }, onChange: (_gradient) => {
+                    system.forceRefreshGradients();
+                } })), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Enable Ramp gradients", target: system, propertyKey: "useRampGradients" }), useRampGradients && (jsxs(Fragment, { children: [!hasRampGradients && (jsx(ButtonLine, { label: "Use Ramp gradients", onClick: () => {
+                            system.addRampGradient(0, Color3.Black());
+                            system.addRampGradient(1, Color3.White());
+                            system.forceRefreshGradients();
+                        } })), hasRampGradients && (jsx(Color3GradientList, { gradients: rampGradients, label: "Ramp Gradient", removeGradient: (gradient) => {
+                            system.removeRampGradient(gradient.gradient);
+                            system.forceRefreshGradients();
+                        }, addGradient: (gradient) => {
+                            if (gradient) {
+                                system.addRampGradient(gradient.gradient, gradient.color);
+                            }
+                            else {
+                                system.addRampGradient(0, Color3.Black());
+                                system.addRampGradient(1, Color3.White());
+                            }
+                            system.forceRefreshGradients();
+                        }, onChange: () => {
+                            system.forceRefreshGradients();
+                        } })), !hasColorRemapGradients && (jsx(ButtonLine, { label: "Use Color remap gradients", onClick: () => {
+                            system.addColorRemapGradient(0, 0, 1);
+                            system.addColorRemapGradient(1, 0, 1);
+                            system.forceRefreshGradients();
+                        } })), hasColorRemapGradients && (jsx(FactorGradientList, { gradients: colorRemapGradients, label: "Color Remap Gradient", removeGradient: (gradient) => {
+                            system.removeColorRemapGradient(gradient.gradient);
+                            system.forceRefreshGradients();
+                        }, addGradient: (gradient) => {
+                            if (gradient) {
+                                system.addColorRemapGradient(gradient.gradient, gradient.factor1 ?? 0, gradient.factor2 ?? 1);
+                            }
+                            else {
+                                system.addColorRemapGradient(0, 0, 1);
+                                system.addColorRemapGradient(1, 0, 1);
+                            }
+                            system.forceRefreshGradients();
+                        }, onChange: (_gradient) => {
+                            system.forceRefreshGradients();
+                        } })), !hasAlphaRemapGradients && (jsx(ButtonLine, { label: "Use Alpha remap gradients", onClick: () => {
+                            system.addAlphaRemapGradient(0, 0, 1);
+                            system.addAlphaRemapGradient(1, 0, 1);
+                            system.forceRefreshGradients();
+                        } })), hasAlphaRemapGradients && (jsx(FactorGradientList, { gradients: alphaRemapGradients, label: "Alpha Remap Gradient", removeGradient: (gradient) => {
+                            system.removeAlphaRemapGradient(gradient.gradient);
+                            system.forceRefreshGradients();
+                        }, addGradient: (gradient) => {
+                            if (gradient) {
+                                system.addAlphaRemapGradient(gradient.gradient, gradient.factor1 ?? 0, gradient.factor2 ?? 1);
+                            }
+                            else {
+                                system.addAlphaRemapGradient(0, 0, 1);
+                                system.addAlphaRemapGradient(1, 0, 1);
+                            }
+                            system.forceRefreshGradients();
+                        }, onChange: (_gradient) => {
+                            system.forceRefreshGradients();
+                        } }))] }))] }));
+};
+/**
+ * Display rotation-related properties for a particle system.
+ * @param props Component props.
+ * @returns Render property lines.
+ */
+const ParticleSystemRotationProperties = (props) => {
+    const { particleSystem: system } = props;
+    const angularSpeedGradientsGetter = useCallback(() => system.getAngularSpeedGradients(), [system]);
+    const angularSpeedGradients = useObservableArray(system, angularSpeedGradientsGetter, "addAngularSpeedGradient", "removeAngularSpeedGradient", "forceRefreshGradients");
+    const useAngularSpeedGradients = (angularSpeedGradients?.length ?? 0) > 0;
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Min Angular speed", target: system, propertyKey: "minAngularSpeed", step: 0.01 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Max Angular speed", target: system, propertyKey: "maxAngularSpeed", step: 0.01 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Min initial rotation", target: system, propertyKey: "minInitialRotation", step: 0.01 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Max initial rotation", target: system, propertyKey: "maxInitialRotation", step: 0.01 }), !useAngularSpeedGradients && (jsx(ButtonLine, { label: "Use Angular speed gradients", onClick: () => {
+                    system.addAngularSpeedGradient(0, system.minAngularSpeed, system.maxAngularSpeed);
+                    system.forceRefreshGradients();
+                } })), useAngularSpeedGradients && (jsx(FactorGradientList, { gradients: angularSpeedGradients, label: "Angular Speed Gradient", removeGradient: (gradient) => {
+                    system.removeAngularSpeedGradient(gradient.gradient);
+                    system.forceRefreshGradients();
+                }, addGradient: (gradient) => {
+                    if (gradient) {
+                        system.addAngularSpeedGradient(gradient.gradient, gradient.factor1 ?? 0, gradient.factor2);
+                    }
+                    else {
+                        system.addAngularSpeedGradient(0, system.minAngularSpeed, system.maxAngularSpeed);
+                    }
+                    system.forceRefreshGradients();
+                }, onChange: (_gradient) => {
+                    system.forceRefreshGradients();
+                } }))] }));
+};
+/**
+ * Display spritesheet-related properties for a particle system.
+ * @param props Component props.
+ * @returns Render property lines.
+ */
+const ParticleSystemSpritesheetProperties = (props) => {
+    const { particleSystem: system } = props;
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Animation sheet enabled", target: system, propertyKey: "isAnimationSheetEnabled" }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "First sprite index", target: system, propertyKey: "startSpriteCellID", min: 0, step: 1 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Last sprite index", target: system, propertyKey: "endSpriteCellID", min: 0, step: 1 }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Animation loop", target: system, propertyKey: "spriteCellLoop" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Random cell start index", target: system, propertyKey: "spriteRandomStartCell" }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Cell width", target: system, propertyKey: "spriteCellWidth", min: 0, step: 1 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Cell height", target: system, propertyKey: "spriteCellHeight", min: 0, step: 1 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Cell change speed", target: system, propertyKey: "spriteCellChangeSpeed", min: 0, step: 0.01 })] }));
+};
+// Return a copied array and re-render when array mutators run.
+// Intercept add/remove/change functions because the underlying APIs update internal arrays in-place.
+const useObservableArray = (target, getItems, addFn, removeFn, changeFn) => {
     return useObservableState(useCallback(() => {
-        const value = observableType === "function" ? system[propertyKey]() : system[propertyKey];
+        const value = getItems();
         return [...(value ?? [])];
-    }, [system, propertyKey]), useInterceptObservable("function", system, addFn), useInterceptObservable("function", system, removeFn), changeFn ? useInterceptObservable("function", system, changeFn) : undefined);
+    }, [getItems]), useInterceptObservable("function", target, addFn), useInterceptObservable("function", target, removeFn), changeFn ? useInterceptObservable("function", target, changeFn) : undefined);
 };
 
+function IsParticleSystem(entity) {
+    return entity instanceof ParticleSystem;
+}
+function IsNonNodeParticleSystem(entity) {
+    return entity instanceof ParticleSystem && !entity.isNodeGenerated;
+}
+// TODO: This file and particleSystemProperties.tsx still need to handle CPU vs GPU systems differently where applicable.
 const ParticleSystemPropertiesServiceDefinition = {
     friendlyName: "Particle System Properties",
-    consumes: [PropertiesServiceIdentity],
-    factory: (propertiesService) => {
-        // TODO-iv2 complete the ParticleSystemPropertiesService registrations and the ParticleSystemProperties component(s) - ensuring the proper predicates (IParticleSystem vs ParticleSystem)
-        const particleSystemContent = propertiesService.addSectionContent({
-            key: "Particle System Properties",
-            predicate: (entity) => entity instanceof ParticleSystem,
+    consumes: [PropertiesServiceIdentity, SelectionServiceIdentity],
+    factory: (propertiesService, selectionService) => {
+        // Register each section in its own call to keep ordering predictable across registrations.
+        // Note: section `order` is not globally sorted across different registrations, so call order matters.
+        const particleSystemGeneralContent = propertiesService.addSectionContent({
+            key: "Particle System General Properties",
+            predicate: IsParticleSystem,
+            content: [
+                {
+                    section: "General",
+                    order: 1,
+                    component: ({ context }) => jsx(ParticleSystemGeneralProperties, { particleSystem: context }),
+                },
+            ],
+        });
+        // The Attractors section must not be visible at all (including the accordion entry) for node-generated systems.
+        const particleSystemAttractorsContent = propertiesService.addSectionContent({
+            key: "Particle System Attractors Properties",
+            predicate: IsNonNodeParticleSystem,
+            content: [
+                {
+                    section: "Attractors",
+                    order: 2,
+                    component: ({ context }) => jsx(ParticleSystemAttractorProperties, { particleSystem: context }),
+                },
+            ],
+        });
+        const particleSystemEmitterContent = propertiesService.addSectionContent({
+            key: "Particle System Emitter Properties",
+            predicate: IsParticleSystem,
+            content: [
+                {
+                    section: "Emitter",
+                    order: 3,
+                    component: ({ context }) => jsx(ParticleSystemEmitterProperties, { particleSystem: context, selectionService: selectionService }),
+                },
+            ],
+        });
+        const particleSystemEmissionContent = propertiesService.addSectionContent({
+            key: "Particle System Emission Properties",
+            predicate: IsParticleSystem,
             content: [
                 {
                     section: "Emission",
+                    order: 4,
                     component: ({ context }) => jsx(ParticleSystemEmissionProperties, { particleSystem: context }),
                 },
+            ],
+        });
+        // The Size section must not be visible at all (including the accordion entry) for node-generated systems.
+        const particleSystemSizeContent = propertiesService.addSectionContent({
+            key: "Particle System Size Properties",
+            predicate: IsNonNodeParticleSystem,
+            content: [
                 {
-                    section: "Color",
+                    section: "Size",
+                    order: 5,
+                    component: ({ context }) => jsx(ParticleSystemSizeProperties, { particleSystem: context }),
+                },
+            ],
+        });
+        // Lifetime is registered for all systems; the component limits the visible fields for node-generated systems.
+        const particleSystemLifetimeContent = propertiesService.addSectionContent({
+            key: "Particle System Lifetime Properties",
+            predicate: IsParticleSystem,
+            content: [
+                {
+                    section: "Lifetime",
+                    order: 6,
+                    component: ({ context }) => jsx(ParticleSystemLifetimeProperties, { particleSystem: context }),
+                },
+            ],
+        });
+        // Register Color after Lifetime.
+        const particleSystemColorContent = propertiesService.addSectionContent({
+            key: "Particle System Color Properties",
+            predicate: IsNonNodeParticleSystem,
+            content: [
+                {
+                    section: "Colors",
+                    order: 7,
                     component: ({ context }) => jsx(ParticleSystemColorProperties, { particleSystem: context }),
                 },
+            ],
+        });
+        // Register Rotation after Colors.
+        const particleSystemRotationContent = propertiesService.addSectionContent({
+            key: "Particle System Rotation Properties",
+            predicate: IsNonNodeParticleSystem,
+            content: [
                 {
-                    section: "Attractors",
-                    component: ({ context }) => jsx(ParticleSystemAttractorProperties, { particleSystem: context }),
+                    section: "Rotation",
+                    order: 8,
+                    component: ({ context }) => jsx(ParticleSystemRotationProperties, { particleSystem: context }),
+                },
+            ],
+        });
+        // Register Spritesheet after Rotation.
+        const particleSystemSpritesheetContent = propertiesService.addSectionContent({
+            key: "Particle System Spritesheet Properties",
+            predicate: IsNonNodeParticleSystem,
+            content: [
+                {
+                    section: "Spritesheet",
+                    order: 9,
+                    component: ({ context }) => jsx(ParticleSystemSpritesheetProperties, { particleSystem: context }),
                 },
             ],
         });
         return {
             dispose: () => {
-                particleSystemContent.dispose();
+                particleSystemGeneralContent.dispose();
+                particleSystemAttractorsContent.dispose();
+                particleSystemEmitterContent.dispose();
+                particleSystemEmissionContent.dispose();
+                particleSystemSizeContent.dispose();
+                particleSystemLifetimeContent.dispose();
+                particleSystemColorContent.dispose();
+                particleSystemRotationContent.dispose();
+                particleSystemSpritesheetContent.dispose();
             },
         };
     },
@@ -8178,8 +8970,7 @@ const SpinButtonPropertyLine = (props) => {
 
 const SpriteManagerGeneralProperties = (props) => {
     const { spriteManager, selectionService } = props;
-    const texture = useProperty(spriteManager, "texture");
-    return (jsxs(Fragment, { children: [jsx(TextPropertyLine, { label: "Capacity", value: spriteManager.capacity.toString() }), jsx(LinkToEntityPropertyLine, { label: "Texture", entity: texture, selectionService: selectionService })] }));
+    return (jsxs(Fragment, { children: [jsx(TextPropertyLine, { label: "Capacity", value: spriteManager.capacity.toString() }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Texture", target: spriteManager, propertyKey: "texture", scene: spriteManager.scene, onLink: (texture) => (selectionService.selectedEntity = texture) })] }));
 };
 const SpriteManagerOtherProperties = (props) => {
     const { spriteManager } = props;
@@ -12412,4 +13203,4 @@ const TextAreaPropertyLine = (props) => {
 AttachDebugLayer();
 
 export { useSidePaneDockOverrides as $, Accordion as A, ButtonLine as B, Collapse as C, DebugServiceIdentity as D, ExtensibleAccordion as E, FileUploadLine as F, useVector3Property as G, useColor3Property as H, Inspector as I, useColor4Property as J, useQuaternionProperty as K, Link as L, MakeLazyComponent as M, NumberDropdownPropertyLine as N, MakePropertyHook as O, Popover as P, useInterceptObservable as Q, useEventfulState as R, SwitchPropertyLine as S, ToolsServiceIdentity as T, useObservableCollection as U, Vector3PropertyLine as V, useOrderedObservableCollection as W, usePollingObservable as X, useResource as Y, useAsyncResource as Z, useCompactMode as _, SyncedSliderPropertyLine as a, useAngleConverters as a0, MakeTeachingMoment as a1, MakeDialogTeachingMoment as a2, InterceptFunction as a3, GetPropertyDescriptor as a4, IsPropertyReadonly as a5, InterceptProperty as a6, ObservableCollection as a7, ConstructorFactory as a8, SelectionServiceIdentity as a9, TextInput as aA, ToggleButton as aB, ChildWindow as aC, FactorGradientList as aD, Color3GradientList as aE, Color4GradientList as aF, Pane as aG, BooleanBadgePropertyLine as aH, Color3PropertyLine as aI, Color4PropertyLine as aJ, HexPropertyLine as aK, NumberInputPropertyLine as aL, LinkPropertyLine as aM, PropertyLine as aN, LineContainer as aO, PlaceholderPropertyLine as aP, StringifiedPropertyLine as aQ, TextAreaPropertyLine as aR, TextPropertyLine as aS, RotationVectorPropertyLine as aT, QuaternionPropertyLine as aU, Vector2PropertyLine as aV, Vector4PropertyLine as aW, SelectionServiceDefinition as aa, SettingsContextIdentity as ab, ShowInspector as ac, Checkbox as ad, ColorPickerPopup as ae, InputHexField as af, InputHsvField as ag, ComboBox as ah, DraggableLine as ai, Dropdown as aj, NumberDropdown as ak, StringDropdown as al, FactorGradientComponent as am, Color3GradientComponent as an, Color4GradientComponent as ao, ColorStepGradientComponent as ap, InfoLabel as aq, List as ar, MessageBar as as, PositionedPopover as at, SearchBar as au, SearchBox as av, SpinButton as aw, Switch as ax, SyncedSliderInput as ay, Textarea as az, Button as b, TextInputPropertyLine as c, SpinButtonPropertyLine as d, CheckboxPropertyLine as e, ShellServiceIdentity as f, SceneContextIdentity as g, AccordionSection as h, useExtensionManager as i, MakePopoverTeachingMoment as j, TeachingMoment as k, SidePaneContainer as l, PropertiesServiceIdentity as m, SceneExplorerServiceIdentity as n, SettingsServiceIdentity as o, StatsServiceIdentity as p, ConvertOptions as q, AttachDebugLayer as r, DetachDebugLayer as s, StringDropdownPropertyLine as t, useObservableState as u, BoundProperty as v, LinkToEntityPropertyLine as w, Theme as x, BuiltInsExtensionFeed as y, useProperty as z };
-//# sourceMappingURL=index-9CJtnfZ3.js.map
+//# sourceMappingURL=index-bFqtVcnb.js.map