@babylonjs/inspector 8.49.4 → 8.49.6

package/lib/{index-CyX6FYTL.js → index-ByfjmUIP.js}

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { createContext, forwardRef, useContext, useState, useCallback, Component, useMemo, useEffect, useRef, isValidElement, cloneElement, Children, useLayoutEffect, useImperativeHandle, createElement, Suspense, memo, Fragment as Fragment$1, useReducer, lazy } from 'react';
-import { tokens, makeStyles, Tooltip as Tooltip$1, Button as Button$1, Spinner, Link as Link$1, Caption1, Body1, ToggleButton as ToggleButton$1, 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, Menu, MenuTrigger, SplitButton, MenuPopover, MenuList, MenuItem, Toolbar as Toolbar$1, ToolbarRadioButton, MenuGroup, MenuGroupHeader, treeItemLevelToken, SearchBox as SearchBox$1, FlatTree, FlatTreeItem, TreeItemLayout, MenuDivider, MenuItemCheckbox, Switch as Switch$1, useId, SpinButton as SpinButton$1, Input, Dropdown as Dropdown$1, Option, Popover as Popover$1, PopoverTrigger, PopoverSurface, ColorPicker, ColorArea, ColorSlider, AlphaSlider, ColorSwatch, PresenceBadge, Slider, MenuItemRadio, Dialog, DialogSurface, DialogBody, DialogTitle, DialogContent, DialogActions, List as List$1, ListItem, Badge, Label, MessageBar as MessageBar$1, MessageBarBody, MessageBarTitle, Subtitle2, useComboboxFilter, Combobox, Textarea as Textarea$1, ToolbarButton, ToolbarDivider, Field } from '@fluentui/react-components';
+import { tokens, makeStyles, Tooltip as Tooltip$1, Button as Button$1, Spinner, Link as Link$1, Caption1, Body1, ToggleButton as ToggleButton$1, useFluent, InfoLabel as InfoLabel$1, mergeClasses, Body1Strong, useId, useToastController, Toast, ToastBody, FluentProvider, Toaster, Checkbox as Checkbox$1, Accordion as Accordion$1, AccordionItem, AccordionHeader, Subtitle2Stronger, AccordionPanel, Divider, createLightTheme, createDarkTheme, TeachingPopover, TeachingPopoverSurface, TeachingPopoverHeader, TeachingPopoverBody, Portal, RendererProvider, createDOMRenderer, Menu, MenuTrigger, SplitButton, MenuPopover, MenuList, MenuItem, Toolbar as Toolbar$1, ToolbarRadioButton, MenuGroup, MenuGroupHeader, treeItemLevelToken, SearchBox as SearchBox$1, FlatTree, FlatTreeItem, TreeItemLayout, MenuDivider, MenuItemCheckbox, Switch as Switch$1, SpinButton as SpinButton$1, Input, Dropdown as Dropdown$1, Option, Popover as Popover$1, PopoverTrigger, PopoverSurface, ColorPicker, ColorArea, ColorSlider, AlphaSlider, ColorSwatch, PresenceBadge, Slider, MenuItemRadio, Dialog, DialogSurface, DialogBody, DialogTitle, DialogContent, DialogActions, List as List$1, ListItem, Badge, Label, MessageBar as MessageBar$1, MessageBarBody, MessageBarTitle, Subtitle2, useComboboxFilter, Combobox, Textarea as Textarea$1, ToolbarButton, ToolbarDivider, Field } from '@fluentui/react-components';
 import { ErrorCircleRegular, ChevronCircleRight16Regular, ChevronCircleRight20Regular, ChevronCircleDown16Regular, ChevronCircleDown20Regular, Copy16Regular, CopyRegular, PanelLeftExpandRegular, PanelRightExpandRegular, PanelLeftContractRegular, PanelRightContractRegular, PictureInPictureEnterRegular, MoreHorizontalRegular, LayoutColumnTwoFocusLeftFilled, LayoutColumnTwoSplitLeftFocusTopLeftFilled, LayoutColumnTwoSplitLeftFocusBottomLeftFilled, LayoutColumnTwoFocusRightFilled, LayoutColumnTwoSplitRightFocusTopRightFilled, LayoutColumnTwoSplitRightFocusBottomRightFilled, DocumentTextRegular, createFluentIcon, FilterRegular, TextSortAscendingRegular, GlobeRegular, ArrowExpandAllRegular, ArrowCollapseAllRegular, CubeTreeRegular, BugRegular, SettingsRegular, ArrowUploadRegular, ArrowDownloadRegular, StopRegular, RecordRegular, DataBarHorizontalRegular, WrenchRegular, WeatherSunnyRegular, WeatherMoonRegular, ArrowRotateClockwiseRegular, ArrowExpandRegular, SelectObjectRegular, CubeRegular, AddRegular, DeleteRegular, FullScreenMaximizeRegular, ChevronDownRegular, ChevronRightRegular, CircleSmallFilled, SaveRegular, PreviousRegular, ArrowPreviousRegular, TriangleLeftRegular, RecordStopRegular, PlayRegular, ArrowNextRegular, NextRegular, EditRegular, PauseRegular, LinkDismissRegular, LinkEditRegular, ArrowUndoRegular, BracesRegular, BracesDismiss16Regular, EyeRegular, CloudArrowUpRegular, CloudArrowDownRegular, EyeOffFilled, EyeFilled, ArrowMoveFilled, StopFilled, PlayFilled, EyeOffRegular, LockOpenRegular, LockClosedRegular, ResizeRegular, ChevronUpRegular, ArrowResetRegular, CircleHalfFillRegular, EyedropperRegular, PaintBucketRegular, InkStrokeRegular, StackRegular, FilmstripRegular, PauseFilled, WeatherSunnyLowFilled, LayerRegular, FrameRegular, AppGenericRegular, RectangleLandscapeRegular, BorderOutsideRegular, BorderNoneRegular, MyLocationRegular, CameraRegular, LightbulbRegular, VideoFilled, VideoRegular, FlashlightRegular, FlashlightOffRegular, DropRegular, BlurRegular, PipelineRegular, PersonWalkingRegular, DataLineRegular, SoundWaveCircleRegular, PersonSquareRegular, LayerDiagonalPersonRegular, ImageEditRegular, ImageRegular, TargetRegular, PersonFeedbackRegular, BranchRegular, DeleteFilled } from '@fluentui/react-icons';
 import { Color3, Color4 } from '@babylonjs/core/Maths/math.color.js';
 import { Vector3, Quaternion, Matrix, Vector2, Vector4, TmpVectors } from '@babylonjs/core/Maths/math.vector.js';
@@ -234,13 +234,16 @@ function ValidateColorHex(val) {
     return val != "" && HEX_REGEX.test(val);
 }
 
-const Tooltip = (props) => {
+// forwardRef wrapper to avoid "function components cannot be given refs" warning
+// FluentTooltip handles ref forwarding to children internally via applyTriggerPropsToChildren
+const Tooltip = forwardRef((props, _ref) => {
     const { content, children } = props;
     if (!content) {
         return children;
     }
     return (jsx(Tooltip$1, { relationship: "description", content: content, children: children }));
-};
+});
+Tooltip.displayName = "Tooltip";
 
 const useButtonStyles = makeStyles({
     smallIcon: {
@@ -1094,6 +1097,9 @@ const useInfoLabelStyles = makeStyles({
         overflow: "hidden",
         textOverflow: "ellipsis",
     },
+    copyable: {
+        cursor: "copy",
+    },
 });
 /**
  * Renders a label with an optional popup containing more info
@@ -1103,9 +1109,60 @@ const useInfoLabelStyles = makeStyles({
 const InfoLabel = (props) => {
     InfoLabel.displayName = "InfoLabel";
     const classes = useInfoLabelStyles();
+    const { targetDocument } = useFluent();
+    const [ctrlPressed, setCtrlPressed] = useState(false);
+    useEffect(() => {
+        const targetWindow = targetDocument?.defaultView ?? window;
+        const handleKeyDown = (e) => {
+            if (e.ctrlKey) {
+                setCtrlPressed(true);
+            }
+        };
+        const handleKeyUp = (e) => {
+            if (!e.ctrlKey) {
+                setCtrlPressed(false);
+            }
+        };
+        const handleBlur = () => {
+            setCtrlPressed(false);
+        };
+        targetWindow.addEventListener("keydown", handleKeyDown);
+        targetWindow.addEventListener("keyup", handleKeyUp);
+        targetWindow.addEventListener("blur", handleBlur);
+        return () => {
+            targetWindow.removeEventListener("keydown", handleKeyDown);
+            targetWindow.removeEventListener("keyup", handleKeyUp);
+            targetWindow.removeEventListener("blur", handleBlur);
+        };
+    }, [targetDocument]);
     const infoContent = props.info ? jsx("div", { className: classes.infoPopup, children: props.info }) : undefined;
-    return infoContent ? (jsx(InfoLabel$1, { htmlFor: props.htmlFor, info: infoContent, className: props.className, label: props.flexLabel ? { className: classes.labelSlot } : undefined, children: jsx(Body1Strong, { className: classes.labelText, children: props.label }) })) : (jsx(Body1Strong, { className: props.className, children: props.label }));
+    const showCopyCursor = ctrlPressed && props.onContextMenu;
+    // Handle Ctrl+click as context menu action
+    const handleClick = useCallback((e) => {
+        if (e.ctrlKey && props.onContextMenu) {
+            props.onContextMenu(e);
+        }
+    }, [props.onContextMenu]);
+    return infoContent ? (jsx(InfoLabel$1, { htmlFor: props.htmlFor, info: infoContent, className: mergeClasses(props.className, showCopyCursor ? classes.copyable : undefined), label: props.flexLabel ? { className: classes.labelSlot } : undefined, onContextMenu: props.onContextMenu, onClick: handleClick, children: jsx(Body1Strong, { className: classes.labelText, children: props.label }) })) : (jsx(Body1Strong, { className: mergeClasses(props.className, showCopyCursor ? classes.copyable : undefined), onContextMenu: props.onContextMenu, onClick: handleClick, children: props.label }));
+};
+
+const ToastContext = createContext({ showToast: () => { } });
+const ToastProvider = ({ children }) => {
+    const toasterId = useId("toaster");
+    const { dispatchToast } = useToastController(toasterId);
+    const { targetDocument } = useFluent();
+    const showToast = useCallback((message) => {
+        dispatchToast(jsx(Toast, { children: jsx(ToastBody, { children: message }) }), { intent: "success", timeout: 1000 });
+    }, [dispatchToast]);
+    return (jsxs(ToastContext.Provider, { value: { showToast }, children: [children, jsx(FluentProvider, { applyStylesToPortals: true, targetDocument: targetDocument, children: jsx(Toaster, { toasterId: toasterId, position: "bottom-end" }) })] }));
 };
+/**
+ * Hook to show toast notifications.
+ * @returns Object with showToast function that accepts a message string
+ */
+function useToast() {
+    return useContext(ToastContext);
+}
 
 const usePropertyLineStyles = makeStyles({
     baseLine: {
@@ -1170,6 +1227,17 @@ const PropertyLine = forwardRef((props, ref) => {
     const { label, onCopy, expandedContent, children, nullable, ignoreNullable } = props;
     const [expanded, setExpanded] = useState("expandByDefault" in props ? props.expandByDefault : false);
     const cachedVal = useRef(nullable ? props.value : null);
+    const { showToast } = useToast();
+    const handleCopy = useCallback(() => {
+        if (onCopy) {
+            copyCommandToClipboard(onCopy());
+            showToast("Copied property to clipboard");
+        }
+    }, [onCopy, showToast]);
+    const handleContextMenu = useCallback((e) => {
+        e.preventDefault();
+        handleCopy();
+    }, [handleCopy]);
     const description = props.docLink ? jsx(Link, { url: props.docLink, value: props.description ?? "Docs" }) : props.description ? jsx(Body1, { children: props.description }) : undefined;
     // Process children to handle nullable state -- creating component in disabled state with default value in lieu of null value
     const processedChildren = (nullable || ignoreNullable) && isValidElement(children)
@@ -1180,7 +1248,7 @@ const PropertyLine = forwardRef((props, ref) => {
             defaultValue: undefined, // Don't pass defaultValue to children as there is no guarantee how this will be used and we can't mix controlled + uncontrolled state
         })
         : children;
-    return (jsxs(LineContainer, { ref: ref, children: [jsxs("div", { className: classes.baseLine, children: [jsx(InfoLabel, { className: classes.infoLabel, htmlFor: "property", info: description, label: label, flexLabel: true }), jsxs("div", { className: classes.rightContent, id: "property", children: [expandedContent && (jsx(ToggleButton, { title: "Expand/Collapse property", appearance: "transparent", checkedIcon: size === "small" ? ChevronCircleDown16Regular : ChevronCircleDown20Regular, uncheckedIcon: size === "small" ? ChevronCircleRight16Regular : ChevronCircleRight20Regular, value: expanded === true, onChange: setExpanded })), nullable && !ignoreNullable && (
+    return (jsxs(LineContainer, { ref: ref, children: [jsxs("div", { className: classes.baseLine, children: [jsx(InfoLabel, { className: classes.infoLabel, htmlFor: "property", info: description, label: label, flexLabel: true, onContextMenu: onCopy ? handleContextMenu : undefined }), jsxs("div", { className: classes.rightContent, id: "property", children: [expandedContent && (jsx(ToggleButton, { title: "Expand/Collapse property", appearance: "transparent", checkedIcon: size === "small" ? ChevronCircleDown16Regular : ChevronCircleDown20Regular, uncheckedIcon: size === "small" ? ChevronCircleRight16Regular : ChevronCircleRight20Regular, value: expanded === true, onChange: setExpanded })), nullable && !ignoreNullable && (
                             // If this is a nullableProperty and ignoreNullable was not sent, display a checkbox used to toggle null ('checked' means 'non null')
                             jsx(Tooltip, { content: props.value == null ? "Enable property" : "Disable property (set to null)", children: jsx(Checkbox$1, { className: classes.checkbox, indicator: { className: classes.checkboxIndicator }, checked: !(props.value == null), onChange: (_, data) => {
                                         if (data.checked) {
@@ -1192,7 +1260,7 @@ const PropertyLine = forwardRef((props, ref) => {
                                             cachedVal.current = props.value;
                                             props.onChange(null);
                                         }
-                                    } }) })), jsx("div", { className: classes.childWrapper, children: processedChildren }), onCopy && !disableCopy && (jsx(Tooltip, { content: "Copy to Clipboard", children: jsx(Button, { className: classes.copy, appearance: "transparent", icon: size === "small" ? Copy16Regular : CopyRegular, onClick: () => copyCommandToClipboard(onCopy()) }) }))] })] }), expandedContent && (jsx(Collapse, { visible: !!expanded, children: jsx("div", { className: classes.expandedContentDiv, children: expandedContent }) }))] }));
+                                    } }) })), jsx("div", { className: classes.childWrapper, children: processedChildren }), onCopy && !disableCopy && (jsx(Tooltip, { content: "Copy to Clipboard", children: jsx(Button, { className: classes.copy, appearance: "transparent", icon: size === "small" ? Copy16Regular : CopyRegular, onClick: handleCopy }) }))] })] }), expandedContent && (jsx(Collapse, { visible: !!expanded, children: jsx("div", { className: classes.expandedContentDiv, children: expandedContent }) }))] }));
 });
 const useLineStyles = makeStyles({
     container: {
@@ -1362,6 +1430,7 @@ const Accordion = forwardRef((props, ref) => {
 
 const CompactModeStorageKey = "Babylon/Settings/IsCompactMode";
 const SidePaneDockOverridesStorageKey = "Babylon/Settings/SidePaneDockOverrides";
+const DisableCopyStorageKey = "Babylon/Settings/DisableCopy";
 function useSetting(storageKey, defaultValue) {
     const [value, setValue, resetValue] = useLocalStorage(storageKey, defaultValue);
     if (!localStorage.getItem(storageKey)) {
@@ -1376,6 +1445,13 @@ function useSetting(storageKey, defaultValue) {
 function useCompactMode() {
     return useSetting(CompactModeStorageKey, !matchMedia("(pointer: coarse)").matches);
 }
+/**
+ * Gets the disable copy setting.
+ * @returns A tuple containing the current disable copy value, a function to update it, and a function to reset it.
+ */
+function useDisableCopy() {
+    return useSetting(DisableCopyStorageKey, false);
+}
 /**
  * Gets the side pane dock overrides configuration.
  * @returns A record mapping side pane IDs to their dock locations.
@@ -1414,16 +1490,17 @@ function useAngleConverters(settings) {
     return [toDisplayValue, fromDisplayValue, useDegrees];
 }
 
-const CompactModeContextProvider = (props) => {
+const UXContextProvider = (props) => {
     const [compactMode] = useCompactMode();
+    const [disableCopy] = useDisableCopy();
     const toolsContext = useMemo(() => {
         return {
             toolName: "",
             size: compactMode ? "small" : "medium",
-            disableCopy: false,
+            disableCopy,
             useFluent: true,
         };
-    }, [compactMode]);
+    }, [compactMode, disableCopy]);
     return jsx(ToolContext.Provider, { value: toolsContext, children: props.children });
 };
 
@@ -1539,7 +1616,7 @@ function ExtensibleAccordion(props) {
             },
         };
     }, []);
-    return (jsx("div", { className: classes.rootDiv, children: visibleSections.length > -1 && (jsx(CompactModeContextProvider, { children: jsxs(Accordion, { highlightSections: highlightSections, children: [...visibleSections.map((section) => {
+    return (jsx("div", { className: classes.rootDiv, children: visibleSections.length > -1 && (jsx(UXContextProvider, { children: jsxs(Accordion, { highlightSections: highlightSections, children: [...visibleSections.map((section) => {
                         return (jsx(AccordionSection, { title: section.identity, collapseByDefault: section.collapseByDefault, children: section.components }, section.identity));
                     })] }) })) }));
 }
@@ -2069,7 +2146,7 @@ const ChildWindow = (props) => {
                     flexGrow: 1,
                     flexDirection: "column",
                     overflow: "hidden",
-                }, applyStylesToPortals: false, targetDocument: mountNode.ownerDocument, children: children }) }) }));
+                }, applyStylesToPortals: false, targetDocument: mountNode.ownerDocument, children: jsx(ToastProvider, { children: children }) }) }) }));
 };
 
 // NOTE: This is basically a super simplified version of https://github.com/microsoft/fluentui-contrib/blob/main/packages/react-resize-handle/src/hooks
@@ -3826,6 +3903,7 @@ const SettingsServiceDefinition = {
                 const sectionContent = useObservableCollection(sectionContentCollection);
                 const scene = useObservableState(() => sceneContext.currentScene, sceneContext.currentSceneObservable);
                 const [compactMode, setCompactMode] = useCompactMode();
+                const [disableCopy, setDisableCopy] = useDisableCopy();
                 const [, , resetSidePaneLayout] = useSidePaneDockOverrides();
                 return (jsx(Fragment, { children: scene && (jsx(ExtensibleAccordion, { sections: sections, sectionContent: sectionContent, context: scene, children: jsxs(AccordionSection, { title: "UI", children: [jsx(SwitchPropertyLine, { label: "Compact Mode", description: "Use a more compact UI with less spacing.", value: compactMode, onChange: (checked) => {
                                         setCompactMode(checked);
@@ -3837,6 +3915,8 @@ const SettingsServiceDefinition = {
                                         settings.ignoreBackfacesForPicking = checked;
                                     } }), jsx(SwitchPropertyLine, { label: "Show Properties on Selection", description: "Shows the Properties pane when an entity is selected.", value: settings.showPropertiesOnEntitySelection, onChange: (checked) => {
                                         settings.showPropertiesOnEntitySelection = checked;
+                                    } }), jsx(SwitchPropertyLine, { label: "Disable Copy Button", description: "Disables the copy to clipboard button on property lines. You can still Ctrl+Click on the label to copy.", value: disableCopy, onChange: (checked) => {
+                                        setDisableCopy(checked);
                                     } }), jsx(ButtonLine, { label: "Reset Layout", onClick: resetSidePaneLayout })] }) })) }));
             },
         });
@@ -5754,7 +5834,8 @@ const StatsPane = (props) => {
  */
 const BooleanBadgePropertyLine = (props) => {
     BooleanBadgePropertyLine.displayName = "BooleanBadgePropertyLine";
-    return (jsx(PropertyLine, { ...props, children: jsx(PresenceBadge, { status: props.value ? "available" : "do-not-disturb", outOfOffice: true }) }));
+    // For now assume BooleanBadge is used for readonly properties and disable copy. In future we could enable with a different copy string
+    return (jsx(PropertyLine, { ...props, onCopy: undefined, children: jsx(PresenceBadge, { status: props.value ? "available" : "do-not-disturb", outOfOffice: true }) }));
 };
 
 const SystemStats = ({ context: scene }) => {
@@ -5905,7 +5986,7 @@ const DefaultInspectorExtensionFeed = new BuiltInsExtensionFeed("Inspector", [
         keywords: ["creation", "tools"],
         ...BabylonWebResources,
         author: { name: "Babylon.js", forumUserName: "" },
-        getExtensionModuleAsync: async () => await import('./quickCreateToolsService-BljTQeJt.js'),
+        getExtensionModuleAsync: async () => await import('./quickCreateToolsService-B55TQEXK.js'),
     },
     {
         name: "Reflector",
@@ -5913,7 +5994,7 @@ const DefaultInspectorExtensionFeed = new BuiltInsExtensionFeed("Inspector", [
         keywords: ["reflector", "bridge", "sync", "sandbox", "tools"],
         ...BabylonWebResources,
         author: { name: "Babylon.js", forumUserName: "" },
-        getExtensionModuleAsync: async () => await import('./reflectorService-8_EDaWNz.js'),
+        getExtensionModuleAsync: async () => await import('./reflectorService-BHVk1B6L.js'),
     },
 ]);
 
@@ -6743,7 +6824,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-DJfDekFP.js');
+                    const { ExtensionListServiceDefinition } = await import('./extensionsListService-1OhC4MZF.js');
                     await serviceContainer.addServiceAsync(ExtensionListServiceDefinition);
                 }
                 // Register the theme selector service (for selecting the theme) if theming is configured.
@@ -6816,7 +6897,7 @@ function MakeModularTool(options) {
         // Show a spinner until a main view has been set.
         // eslint-disable-next-line @typescript-eslint/naming-convention
         const Content = rootComponent ?? (() => jsx(Spinner, { className: classes.spinner }));
-        return (jsx(ExtensionManagerContext.Provider, { value: extensionManagerContext, children: jsx(Theme, { className: classes.app, children: jsxs(Fragment, { children: [jsx(Dialog, { open: !!requiredExtensions, modalType: "alert", children: jsx(DialogSurface, { children: jsxs(DialogBody, { children: [jsx(DialogTitle, { children: "Required Extensions" }), jsxs(DialogContent, { children: ["Opening this URL requires the following extensions to be installed and enabled:", jsx("ul", { children: requiredExtensions?.map((name) => jsx("li", { children: name }, name)) })] }), jsxs(DialogActions, { children: [jsx(Button$1, { appearance: "primary", onClick: onAcceptRequiredExtensions, children: "Install & Enable" }), jsx(Button$1, { appearance: "secondary", onClick: onRejectRequiredExtensions, children: "No Thanks" })] })] }) }) }), jsx(Dialog, { open: !!extensionInstallError, modalType: "alert", children: jsx(DialogSurface, { children: jsxs(DialogBody, { children: [jsx(DialogTitle, { children: jsxs("div", { className: classes.extensionErrorTitleDiv, children: ["Extension Install Error", jsx(ErrorCircleRegular, { className: classes.extensionErrorIcon })] }) }), jsx(DialogContent, { children: jsxs(List$1, { children: [jsx(ListItem, { children: jsx(Body1, { children: `Extension "${extensionInstallError?.extension.name}" failed to install and was removed.` }) }), jsx(ListItem, { children: jsx(Body1, { children: `${extensionInstallError?.error}` }) })] }) }), jsx(DialogActions, { children: jsx(Button$1, { appearance: "primary", onClick: onAcknowledgedExtensionInstallError, children: "Close" }) })] }) }) }), jsx(Suspense, { fallback: jsx(Spinner, { className: classes.spinner }), children: jsx(Content, {}) })] }) }) }));
+        return (jsx(ExtensionManagerContext.Provider, { value: extensionManagerContext, children: jsx(Theme, { className: classes.app, children: jsxs(ToastProvider, { children: [jsx(Dialog, { open: !!requiredExtensions, modalType: "alert", children: jsx(DialogSurface, { children: jsxs(DialogBody, { children: [jsx(DialogTitle, { children: "Required Extensions" }), jsxs(DialogContent, { children: ["Opening this URL requires the following extensions to be installed and enabled:", jsx("ul", { children: requiredExtensions?.map((name) => jsx("li", { children: name }, name)) })] }), jsxs(DialogActions, { children: [jsx(Button$1, { appearance: "primary", onClick: onAcceptRequiredExtensions, children: "Install & Enable" }), jsx(Button$1, { appearance: "secondary", onClick: onRejectRequiredExtensions, children: "No Thanks" })] })] }) }) }), jsx(Dialog, { open: !!extensionInstallError, modalType: "alert", children: jsx(DialogSurface, { children: jsxs(DialogBody, { children: [jsx(DialogTitle, { children: jsxs("div", { className: classes.extensionErrorTitleDiv, children: ["Extension Install Error", jsx(ErrorCircleRegular, { className: classes.extensionErrorIcon })] }) }), jsx(DialogContent, { children: jsxs(List$1, { children: [jsx(ListItem, { children: jsx(Body1, { children: `Extension "${extensionInstallError?.extension.name}" failed to install and was removed.` }) }), jsx(ListItem, { children: jsx(Body1, { children: `${extensionInstallError?.error}` }) })] }) }), jsx(DialogActions, { children: jsx(Button$1, { appearance: "primary", onClick: onAcknowledgedExtensionInstallError, children: "Close" }) })] }) }) }), jsx(Suspense, { fallback: jsx(Spinner, { className: classes.spinner }), children: jsx(Content, {}) })] }) }) }));
     };
     // Set the container element to be a flex container so that the tool can be displayed properly.
     const originalContainerElementDisplay = containerElement.style.display;
@@ -7776,7 +7857,8 @@ const AnimationList = () => {
     const styles = useStyles$y();
     const { state, observables } = useCurveEditor();
     // Re-render when animations are loaded or changed (e.g. animation deleted)
-    useObservableState(() => ({}), observables.onAnimationsLoaded, observables.onActiveAnimationChanged);
+    // useCallback stabilizes the accessor to prevent infinite re-render loops
+    useObservableState(useCallback(() => ({}), []), observables.onAnimationsLoaded, observables.onActiveAnimationChanged);
     // Get animations from target if available (for dynamically added animations), otherwise from state
     const animations = state.target?.animations ?? state.animations;
     return (jsx("div", { className: styles.root, children: animations?.map((a, i) => {
@@ -9300,8 +9382,9 @@ const Graph = ({ width, height }) => {
     const [offsetY, setOffsetY] = useState(0);
     const [isPointerDown, setIsPointerDown] = useState(false);
     const [pointerStart, setPointerStart] = useState({ x: 0, y: 0 });
-    // Re-render when active animation or range changes - use counter to invalidate memoized curves
-    const animationVersion = useObservableState(() => Date.now(), observables.onActiveAnimationChanged, observables.onRangeUpdated);
+    // Re-render when active animation or range changes
+    // useCallback stabilizes the accessor to prevent infinite re-render loops
+    useObservableState(useCallback(() => ({}), []), observables.onActiveAnimationChanged, observables.onRangeUpdated);
     // Ensure dimensions are valid
     const safeWidth = Math.max(1, width);
     const safeHeight = Math.max(1, height);
@@ -9507,7 +9590,7 @@ const Graph = ({ width, height }) => {
             result.push(...curvesToAdd);
         }
         return result;
-    }, [state.activeAnimations, state.activeChannels, animationVersion]);
+    }, [state.activeAnimations, state.activeChannels]);
     // Calculate value range
     const valueRange = useMemo(() => {
         let minValue = 0;
@@ -10042,7 +10125,8 @@ const RangeFrameBar = ({ width }) => {
     const [viewWidth, setViewWidth] = useState(width);
     const [displayFrame, setDisplayFrame] = useState(state.activeFrame);
     // Re-render when range updates
-    useObservableState(() => ({}), observables.onRangeUpdated);
+    // useCallback stabilizes the accessor to prevent infinite re-render loops
+    useObservableState(useCallback(() => ({}), []), observables.onRangeUpdated);
     // Update view width on resize
     useEffect(() => {
         const updateWidth = () => {
@@ -10686,7 +10770,7 @@ const CurveEditor = (props) => {
  * @returns The button component
  */
 const CurveEditorButton = (props) => {
-    const { scene, target, animations, rootAnimationGroup, title, useTargetAnimations, label = "Edit Curves" } = props;
+    const { scene, target, animations, rootAnimationGroup, title, useTargetAnimations, label = "Open Animation Curve Editor" } = props;
     const childWindow = useRef(null);
     return (jsxs(Fragment, { children: [jsx(ButtonLine, { label: label, onClick: () => childWindow.current?.open({
                     defaultWidth: 1024,
@@ -10779,7 +10863,9 @@ const MessageBar = (props) => {
 
 const AnimationsProperties = (props) => {
     const { scene, entity } = props;
-    const animations = entity.animations ?? [];
+    // Track animations array changes via property interception
+    const trackedAnimations = useProperty(entity, "animations");
+    const animations = trackedAnimations ?? [];
     const ranges = entity.getAnimationRanges?.()?.filter((range) => !!range) ?? [];
     const childAnimatablesAnimations = entity.getAnimatables?.().flatMap((animatable) => animatable.animations ?? []) ?? [];
     animations.concat(childAnimatablesAnimations);
@@ -10799,40 +10885,40 @@ const AnimationsProperties = (props) => {
     const currentFrame = useObservableState(useCallback(() => {
         return mainAnimatable ? mainAnimatable.masterFrame : (scene.getAllAnimatablesByTarget(entity)[0]?.masterFrame ?? 0);
     }, [scene, entity, mainAnimatable]), hasAnimations ? scene.onAfterAnimationsObservable : undefined);
-    return (jsx(Fragment, { children: !hasAnimations ? (jsx(MessageBar, { intent: "info", title: "No Animations", message: "To modify animations, attach an animation to this node.", docLink: "https://doc.babylonjs.com/features/featuresDeepDive/animation/" })) : (jsxs(Fragment, { children: [ranges.length > 0 && (jsx(PropertyLine, { label: "Ranges", expandedContent: jsx(Fragment, { children: ranges.map((range) => {
-                            return (jsx(ButtonLine, { label: range.name, onClick: () => {
-                                    scene.beginAnimation(entity, range.from, range.to, true);
-                                } }, range.name));
-                        }) }), children: jsx(Badge, { appearance: "filled", children: ranges.length }) })), animations.length > 0 && (jsxs(Fragment, { children: [jsx(PropertyLine, { label: "Animations", expandedContent: jsx(Fragment, { children: animations.map((animation, index) => {
-                                    return jsx(TextPropertyLine, { label: `${index}: ${animation.name}`, value: animation.targetProperty }, animation.uniqueId);
-                                }) }), children: jsx(Badge, { appearance: "filled", children: animations.length }) }), jsx(CurveEditorButton, { scene: scene, target: entity, animations: animations, title: entity.name ?? "Animation Curve Editor" }), mainAnimatable && (jsx(Fragment, { children: jsx(PropertyLine, { label: "Animation Controls", expandedContent: jsxs(Fragment, { children: [jsx(NumberInputPropertyLine, { label: "From", value: mainAnimatable.fromFrame, onChange: (value) => {
-                                                scene.stopAnimation(entity);
-                                                scene.beginAnimation(entity, value, mainAnimatable.toFrame, true);
-                                            } }), jsx(NumberInputPropertyLine, { label: "To", value: mainAnimatable.toFrame, onChange: (value) => {
-                                                scene.stopAnimation(entity);
-                                                scene.beginAnimation(entity, mainAnimatable.fromFrame, value, true);
-                                            } }), jsx(SwitchPropertyLine, { label: "Loop", value: mainAnimatable.loopAnimation, onChange: (value) => {
-                                                for (const animatable of animatablesForTarget) {
-                                                    animatable.loopAnimation = value;
-                                                }
-                                            } }), jsx(SyncedSliderPropertyLine, { label: "Current Frame", value: currentFrame, min: mainAnimatable.fromFrame, max: mainAnimatable.toFrame, step: (mainAnimatable.toFrame - mainAnimatable.fromFrame) / 1000, onChange: (value) => {
-                                                mainAnimatable.goToFrame(value);
-                                            } })] }), expandByDefault: true }) })), jsx(ButtonLine, { label: isPlaying ? "Stop Animation" : "Play Animation", onClick: () => {
-                                if (isPlaying) {
+    return (jsxs(Fragment, { children: [!hasAnimations && (jsx(MessageBar, { intent: "info", title: "No Animations", message: "To modify animations, attach an animation to this node.", docLink: "https://doc.babylonjs.com/features/featuresDeepDive/animation/" })), ranges.length > 0 && (jsx(PropertyLine, { label: "Ranges", expandedContent: jsx(Fragment, { children: ranges.map((range) => {
+                        return (jsx(ButtonLine, { label: range.name, onClick: () => {
+                                scene.beginAnimation(entity, range.from, range.to, true);
+                            } }, range.name));
+                    }) }), children: jsx(Badge, { appearance: "filled", children: ranges.length }) })), animations.length > 0 && (jsx(PropertyLine, { label: "Animations", expandedContent: jsx(Fragment, { children: animations.map((animation, index) => {
+                        return jsx(TextPropertyLine, { label: `${index}: ${animation.name}`, value: animation.targetProperty }, animation.uniqueId);
+                    }) }), children: jsx(Badge, { appearance: "filled", children: animations.length }) })), jsx(CurveEditorButton, { scene: scene, target: entity, animations: animations, title: entity.name ?? "Animation Curve Editor" }), mainAnimatable && (jsx(Fragment, { children: jsx(PropertyLine, { label: "Animation Controls", expandedContent: jsxs(Fragment, { children: [jsx(NumberInputPropertyLine, { label: "From", value: mainAnimatable.fromFrame, onChange: (value) => {
                                     scene.stopAnimation(entity);
-                                }
-                                else {
-                                    scene.beginAnimation(entity, lastFrom.current, lastTo.current, lastLoop.current);
-                                }
-                            } }), mainAnimatable && (ranges.length > 0 || animations.length > 0) ? (jsxs(Fragment, { children: [jsx(SwitchPropertyLine, { label: "Enable Override", value: animationPropertiesOverride != null, onChange: (value) => {
-                                        if (value) {
-                                            mainAnimatable.animationPropertiesOverride = new AnimationPropertiesOverride();
-                                            mainAnimatable.animationPropertiesOverride.blendingSpeed = 0.05;
-                                        }
-                                        else {
-                                            mainAnimatable.animationPropertiesOverride = undefined;
-                                        }
-                                    } }), jsx(Collapse, { visible: animationPropertiesOverride != null, children: jsxs("div", { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Enable Blending", target: animationPropertiesOverride, propertyKey: "enableBlending" }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Blending Speed", target: animationPropertiesOverride, propertyKey: "blendingSpeed", min: 0, max: 0.1, step: 0.01 })] }) })] })) : null] }))] })) }));
+                                    scene.beginAnimation(entity, value, mainAnimatable.toFrame, true);
+                                } }), jsx(NumberInputPropertyLine, { label: "To", value: mainAnimatable.toFrame, onChange: (value) => {
+                                    scene.stopAnimation(entity);
+                                    scene.beginAnimation(entity, mainAnimatable.fromFrame, value, true);
+                                } }), jsx(SwitchPropertyLine, { label: "Loop", value: mainAnimatable.loopAnimation, onChange: (value) => {
+                                    for (const animatable of animatablesForTarget) {
+                                        animatable.loopAnimation = value;
+                                    }
+                                } }), jsx(SyncedSliderPropertyLine, { label: "Current Frame", value: currentFrame, min: mainAnimatable.fromFrame, max: mainAnimatable.toFrame, step: (mainAnimatable.toFrame - mainAnimatable.fromFrame) / 1000, onChange: (value) => {
+                                    mainAnimatable.goToFrame(value);
+                                } })] }), expandByDefault: true }) })), hasAnimations && (jsx(ButtonLine, { label: isPlaying ? "Stop Animation" : "Play Animation", onClick: () => {
+                    if (isPlaying) {
+                        scene.stopAnimation(entity);
+                    }
+                    else {
+                        scene.beginAnimation(entity, lastFrom.current, lastTo.current, lastLoop.current);
+                    }
+                } })), mainAnimatable && (ranges.length > 0 || animations.length > 0) ? (jsxs(Fragment, { children: [jsx(SwitchPropertyLine, { label: "Enable Override", value: animationPropertiesOverride != null, onChange: (value) => {
+                            if (value) {
+                                mainAnimatable.animationPropertiesOverride = new AnimationPropertiesOverride();
+                                mainAnimatable.animationPropertiesOverride.blendingSpeed = 0.05;
+                            }
+                            else {
+                                mainAnimatable.animationPropertiesOverride = undefined;
+                            }
+                        } }), jsx(Collapse, { visible: animationPropertiesOverride != null, children: jsxs("div", { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Enable Blending", target: animationPropertiesOverride, propertyKey: "enableBlending" }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Blending Speed", target: animationPropertiesOverride, propertyKey: "blendingSpeed", min: 0, max: 0.1, step: 0.01 })] }) })] })) : null] }));
 };
 
 function IsAnimatable(entity) {
@@ -13813,6 +13899,8 @@ const ParticleSystemCommandProperties = (props) => {
 const ParticleSystemEmitterProperties = (props) => {
     const { particleSystem: system, selectionService } = props;
     const scene = system.getScene();
+    // Node-generated particle systems don't expose emitter type configuration
+    const isNodeGenerated = system instanceof ParticleSystem && system.isNodeGenerated;
     const emitter = useProperty(system, "emitter");
     const emitterObject = emitter && !(emitter instanceof Vector3) ? emitter : undefined;
     const [sceneNodesVersion, setSceneNodesVersion] = useState(0);
@@ -13928,59 +14016,59 @@ const ParticleSystemEmitterProperties = (props) => {
                     else {
                         system.emitter = value;
                     }
-                } })), emitterSelectionValue !== "none" && emitter && !(emitter instanceof Vector3) && (jsx(Property, { component: LinkToEntityPropertyLine, label: "Entity", propertyPath: "emitter", entity: emitter, selectionService: selectionService })), jsx(Property, { component: StringDropdownPropertyLine, label: "Type", propertyPath: "emitterType", 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;
-                        }
-                    }
-                } }), particleEmitterType instanceof MeshParticleEmitter && (jsx(Fragment, { children: scene && scene.meshes.length > 0 ? (jsx(Property, { component: StringDropdownPropertyLine, propertyPath: "source", 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(Property, { component: TextPropertyLine, propertyPath: "source", label: "Source", value: "No meshes in scene." })) })), particleEmitterType instanceof BoxParticleEmitter && (jsxs(Fragment, { children: [jsx(BoundProperty, { component: Vector3PropertyLine, label: "Direction1", target: particleEmitterType, propertyKey: "direction1" }), jsx(BoundProperty, { component: Vector3PropertyLine, label: "Direction2", target: particleEmitterType, propertyKey: "direction2" }), jsx(BoundProperty, { component: Vector3PropertyLine, label: "Min emit box", target: particleEmitterType, propertyKey: "minEmitBox" }), jsx(BoundProperty, { component: Vector3PropertyLine, label: "Max emit box", target: particleEmitterType, propertyKey: "maxEmitBox" })] })), particleEmitterType instanceof ConeParticleEmitter && (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Radius range", target: particleEmitterType, propertyKey: "radiusRange", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Height range", target: particleEmitterType, propertyKey: "heightRange", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Emit from spawn point only", target: particleEmitterType, propertyKey: "emitFromSpawnPointOnly" }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Direction randomizer", target: particleEmitterType, propertyKey: "directionRandomizer", min: 0, max: 1, step: 0.01 })] })), particleEmitterType instanceof SphereParticleEmitter && (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Radius", target: particleEmitterType, propertyKey: "radius", min: 0, step: 0.1 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Radius range", target: particleEmitterType, propertyKey: "radiusRange", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Direction randomizer", target: particleEmitterType, propertyKey: "directionRandomizer", min: 0, max: 1, step: 0.01 })] })), particleEmitterType instanceof CylinderParticleEmitter && (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Radius", target: particleEmitterType, propertyKey: "radius", min: 0, step: 0.1 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Height", target: particleEmitterType, propertyKey: "height", min: 0, step: 0.1 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Radius range", target: particleEmitterType, propertyKey: "radiusRange", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Direction randomizer", target: particleEmitterType, propertyKey: "directionRandomizer", min: 0, max: 1, step: 0.01 })] })), particleEmitterType instanceof HemisphericParticleEmitter && (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Radius", target: particleEmitterType, propertyKey: "radius", min: 0, step: 0.1 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Radius range", target: particleEmitterType, propertyKey: "radiusRange", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Direction randomizer", target: particleEmitterType, propertyKey: "directionRandomizer", min: 0, max: 1, step: 0.01 })] })), particleEmitterType instanceof PointParticleEmitter && (jsxs(Fragment, { children: [jsx(BoundProperty, { component: Vector3PropertyLine, label: "Direction1", target: particleEmitterType, propertyKey: "direction1" }), jsx(BoundProperty, { component: Vector3PropertyLine, label: "Direction2", target: particleEmitterType, propertyKey: "direction2" })] })), !scene && jsx(TextPropertyLine, { label: "Emitter", value: "No scene available." })] }));
+                } })), emitterSelectionValue !== "none" && emitter && !(emitter instanceof Vector3) && (jsx(Property, { component: LinkToEntityPropertyLine, label: "Entity", propertyPath: "emitter", entity: emitter, selectionService: selectionService })), !isNodeGenerated && (jsxs(Fragment, { children: [jsx(Property, { component: StringDropdownPropertyLine, label: "Type", propertyPath: "emitterType", 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;
+                                }
+                            }
+                        } }), particleEmitterType instanceof MeshParticleEmitter && (jsx(Fragment, { children: scene && scene.meshes.length > 0 ? (jsx(Property, { component: StringDropdownPropertyLine, propertyPath: "source", 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(Property, { component: TextPropertyLine, propertyPath: "source", label: "Source", value: "No meshes in scene." })) })), particleEmitterType instanceof BoxParticleEmitter && (jsxs(Fragment, { children: [jsx(BoundProperty, { component: Vector3PropertyLine, label: "Direction1", target: particleEmitterType, propertyKey: "direction1" }), jsx(BoundProperty, { component: Vector3PropertyLine, label: "Direction2", target: particleEmitterType, propertyKey: "direction2" }), jsx(BoundProperty, { component: Vector3PropertyLine, label: "Min emit box", target: particleEmitterType, propertyKey: "minEmitBox" }), jsx(BoundProperty, { component: Vector3PropertyLine, label: "Max emit box", target: particleEmitterType, propertyKey: "maxEmitBox" })] })), particleEmitterType instanceof ConeParticleEmitter && (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Radius range", target: particleEmitterType, propertyKey: "radiusRange", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Height range", target: particleEmitterType, propertyKey: "heightRange", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Emit from spawn point only", target: particleEmitterType, propertyKey: "emitFromSpawnPointOnly" }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Direction randomizer", target: particleEmitterType, propertyKey: "directionRandomizer", min: 0, max: 1, step: 0.01 })] })), particleEmitterType instanceof SphereParticleEmitter && (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Radius", target: particleEmitterType, propertyKey: "radius", min: 0, step: 0.1 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Radius range", target: particleEmitterType, propertyKey: "radiusRange", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Direction randomizer", target: particleEmitterType, propertyKey: "directionRandomizer", min: 0, max: 1, step: 0.01 })] })), particleEmitterType instanceof CylinderParticleEmitter && (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Radius", target: particleEmitterType, propertyKey: "radius", min: 0, step: 0.1 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Height", target: particleEmitterType, propertyKey: "height", min: 0, step: 0.1 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Radius range", target: particleEmitterType, propertyKey: "radiusRange", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Direction randomizer", target: particleEmitterType, propertyKey: "directionRandomizer", min: 0, max: 1, step: 0.01 })] })), particleEmitterType instanceof HemisphericParticleEmitter && (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Radius", target: particleEmitterType, propertyKey: "radius", min: 0, step: 0.1 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Radius range", target: particleEmitterType, propertyKey: "radiusRange", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Direction randomizer", target: particleEmitterType, propertyKey: "directionRandomizer", min: 0, max: 1, step: 0.01 })] })), particleEmitterType instanceof PointParticleEmitter && (jsxs(Fragment, { children: [jsx(BoundProperty, { component: Vector3PropertyLine, label: "Direction1", target: particleEmitterType, propertyKey: "direction1" }), jsx(BoundProperty, { component: Vector3PropertyLine, label: "Direction2", target: particleEmitterType, propertyKey: "direction2" })] }))] })), !scene && jsx(TextPropertyLine, { label: "Emitter", value: "No scene available." })] }));
 };
 
 /**
@@ -14702,7 +14790,7 @@ const ParticleSystemPropertiesServiceDefinition = {
         });
         const particleSystemEmitterContent = propertiesService.addSectionContent({
             key: "Particle System Emitter Properties",
-            predicate: IsNonNodeParticleSystem,
+            predicate: IsParticleSystem,
             content: [
                 {
                     section: "Emitter",
@@ -14782,7 +14870,7 @@ const ParticleSystemPropertiesServiceDefinition = {
                 },
             ],
         });
-        const particleSystemNodeContent = propertiesService.addSectionContent({
+        const particleSystemNodeEditorContent = propertiesService.addSectionContent({
             key: "Node Particle System Inputs Properties",
             predicate: IsNodeParticleSystem,
             content: [
@@ -14805,7 +14893,7 @@ const ParticleSystemPropertiesServiceDefinition = {
                 particleSystemColorContent.dispose();
                 particleSystemRotationContent.dispose();
                 particleSystemSpritesheetContent.dispose();
-                particleSystemNodeContent.dispose();
+                particleSystemNodeEditorContent.dispose();
             },
         };
     },
@@ -20535,5 +20623,5 @@ const TextAreaPropertyLine = (props) => {
 // Attach Inspector v2 to Scene.debugLayer as a side effect for back compat.
 AttachDebugLayer();
 
-export { MakeTeachingMoment as $, Accordion as A, Button as B, CheckboxPropertyLine as C, DebugServiceIdentity as D, ExtensibleAccordion as E, useColor3Property as F, useColor4Property as G, useQuaternionProperty as H, Inspector as I, MakePropertyHook as J, useInterceptObservable as K, Link as L, MessageBar as M, NumberInputPropertyLine as N, useEventfulState as O, Popover as P, useObservableCollection as Q, useOrderedObservableCollection as R, SpinButtonPropertyLine as S, TextInputPropertyLine as T, usePollingObservable as U, Vector3PropertyLine as V, useResource as W, useAsyncResource as X, useCompactMode as Y, useSidePaneDockOverrides as Z, useAngleConverters as _, ShellServiceIdentity as a, MakeDialogTeachingMoment as a0, InterceptFunction as a1, GetPropertyDescriptor as a2, IsPropertyReadonly as a3, InterceptProperty as a4, ObservableCollection as a5, ConstructorFactory as a6, SelectionServiceIdentity as a7, SelectionServiceDefinition as a8, SettingsContextIdentity as a9, ToggleButton as aA, ChildWindow as aB, FileUploadLine 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, LinkPropertyLine as aL, PropertyLine as aM, LineContainer as aN, PlaceholderPropertyLine as aO, StringifiedPropertyLine as aP, SwitchPropertyLine as aQ, SyncedSliderPropertyLine as aR, TextAreaPropertyLine as aS, TextPropertyLine as aT, RotationVectorPropertyLine as aU, QuaternionPropertyLine as aV, Vector2PropertyLine as aW, Vector4PropertyLine as aX, ShowInspector as aa, Checkbox as ab, Collapse as ac, ColorPickerPopup as ad, InputHexField as ae, InputHsvField as af, ComboBox as ag, DraggableLine as ah, Dropdown as ai, NumberDropdown as aj, StringDropdown as ak, FactorGradientComponent as al, Color3GradientComponent as am, Color4GradientComponent as an, ColorStepGradientComponent as ao, InfoLabel as ap, MakeLazyComponent as aq, List as ar, PositionedPopover as as, SearchBar as at, SearchBox as au, SpinButton as av, Switch as aw, SyncedSliderInput as ax, Textarea as ay, TextInput as az, SceneContextIdentity as b, useObservableState as c, AccordionSection as d, ButtonLine as e, ToolsServiceIdentity as f, useExtensionManager as g, MakePopoverTeachingMoment as h, TeachingMoment as i, SidePaneContainer as j, PropertiesServiceIdentity as k, SceneExplorerServiceIdentity as l, SettingsServiceIdentity as m, StatsServiceIdentity as n, ConvertOptions as o, AttachDebugLayer as p, DetachDebugLayer as q, NumberDropdownPropertyLine as r, StringDropdownPropertyLine as s, BoundProperty as t, useProperty as u, Property as v, LinkToEntityPropertyLine as w, Theme as x, BuiltInsExtensionFeed as y, useVector3Property as z };
-//# sourceMappingURL=index-CyX6FYTL.js.map
+export { useAngleConverters as $, Accordion as A, Button as B, CheckboxPropertyLine as C, DebugServiceIdentity as D, ExtensibleAccordion as E, useColor3Property as F, useColor4Property as G, useQuaternionProperty as H, Inspector as I, MakePropertyHook as J, useInterceptObservable as K, Link as L, MessageBar as M, NumberInputPropertyLine as N, useEventfulState as O, Popover as P, useObservableCollection as Q, useOrderedObservableCollection as R, SpinButtonPropertyLine as S, TextInputPropertyLine as T, usePollingObservable as U, Vector3PropertyLine as V, useResource as W, useAsyncResource as X, useCompactMode as Y, useDisableCopy as Z, useSidePaneDockOverrides as _, ShellServiceIdentity as a, MakeTeachingMoment as a0, MakeDialogTeachingMoment as a1, InterceptFunction as a2, GetPropertyDescriptor as a3, IsPropertyReadonly as a4, InterceptProperty as a5, ObservableCollection as a6, ConstructorFactory as a7, SelectionServiceIdentity as a8, SelectionServiceDefinition as a9, TextInput as aA, ToggleButton as aB, ChildWindow as aC, FileUploadLine as aD, FactorGradientList as aE, Color3GradientList as aF, Color4GradientList as aG, Pane as aH, BooleanBadgePropertyLine as aI, Color3PropertyLine as aJ, Color4PropertyLine as aK, HexPropertyLine as aL, LinkPropertyLine as aM, PropertyLine as aN, LineContainer as aO, PlaceholderPropertyLine as aP, StringifiedPropertyLine as aQ, SwitchPropertyLine as aR, SyncedSliderPropertyLine as aS, TextAreaPropertyLine as aT, TextPropertyLine as aU, RotationVectorPropertyLine as aV, QuaternionPropertyLine as aW, Vector2PropertyLine as aX, Vector4PropertyLine as aY, SettingsContextIdentity as aa, ShowInspector as ab, Checkbox as ac, Collapse 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, MakeLazyComponent as ar, List as as, PositionedPopover as at, SearchBar as au, SearchBox as av, SpinButton as aw, Switch as ax, SyncedSliderInput as ay, Textarea as az, SceneContextIdentity as b, useObservableState as c, AccordionSection as d, ButtonLine as e, ToolsServiceIdentity as f, useExtensionManager as g, MakePopoverTeachingMoment as h, TeachingMoment as i, SidePaneContainer as j, PropertiesServiceIdentity as k, SceneExplorerServiceIdentity as l, SettingsServiceIdentity as m, StatsServiceIdentity as n, ConvertOptions as o, AttachDebugLayer as p, DetachDebugLayer as q, NumberDropdownPropertyLine as r, StringDropdownPropertyLine as s, BoundProperty as t, useProperty as u, Property as v, LinkToEntityPropertyLine as w, Theme as x, BuiltInsExtensionFeed as y, useVector3Property as z };
+//# sourceMappingURL=index-ByfjmUIP.js.map