@babylonjs/inspector 9.8.0 → 9.9.1

package/lib/{index-PYblOaAV.js → index-UoPnMkyH.js}

@@ -144,7 +144,9 @@ import { SceneRecorder } from '@babylonjs/core/Misc/sceneRecorder.js';
 import { VideoRecorder } from '@babylonjs/core/Misc/videoRecorder.js';
 import { SceneSerializer } from '@babylonjs/core/Misc/sceneSerializer.js';
 import { EnvironmentTextureTools } from '@babylonjs/core/Misc/environmentTextureTools.js';
-import { SerializeSmartAssetManagerMap, GetAllSmartAssets, RemoveSmartAssetAsync, LoadSmartAssetMapAsync, GetSmartAssetTextureExtensions, GetSmartAssetManager, LoadSmartAssetTextureAsync, LoadSmartAssetAsync, ReloadSmartAssetAsync, FindSmartAssetKeyForObject, UnloadSmartAssetAsync } from '@babylonjs/core/SmartAssets/smartAssetManager.js';
+import { FindSmartAssetKeyForObject, SerializeSmartAssetManagerMap, GetSmartAssetTextureExtensions, GetAllSmartAssets, RemoveSmartAssetAsync, RegisterSmartAsset, LoadAllSmartAssetsAsync, LoadSmartAssetAsync, GetSmartAssetManager, LoadSmartAssetTextureAsync, ReloadSmartAssetAsync, UnloadSmartAssetAsync } from '@babylonjs/core/SmartAssets/smartAssetManager.js';
+import '@babylonjs/core/Loading/Plugins/babylonFileLoader.js';
+import { ReadJsonSourceAsync, ResolveAssetUrl, DeserializeSmartAssetMap } from '@babylonjs/core/SmartAssets/smartAssetSerializer.js';
 import { ImportAnimationsAsync, SceneLoader } from '@babylonjs/core/Loading/sceneLoader.js';
 import { FilesInput } from '@babylonjs/core/Misc/filesInput.js';
 import { registeredGLTFExtensions } from '@babylonjs/loaders/glTF/2.0/glTFLoaderExtensionRegistry.js';
@@ -285,7 +287,7 @@ const Button = forwardRef((props, ref) => {
 });
 Button.displayName = "Button";
 
-const useStyles$11 = makeStyles({
+const useStyles$10 = makeStyles({
     root: {
         display: "flex",
         flexDirection: "column",
@@ -366,7 +368,7 @@ class ErrorBoundary extends Component {
     }
 }
 function ErrorFallback({ error, onRetry }) {
-    const styles = useStyles$11();
+    const styles = useStyles$10();
     return (jsxs("div", { className: styles.root, children: [jsx(ErrorCircleRegular, { className: styles.icon }), jsx("div", { className: styles.title, children: "Something went wrong" }), jsx("div", { className: styles.message, children: "An error occurred in this component. You can try again or continue using other parts of the tool." }), jsx(Button, { label: "Try Again", appearance: "primary", onClick: onRetry }), error && jsx("div", { className: styles.details, children: error.message })] }));
 }
 
@@ -1367,7 +1369,7 @@ function useIsSectionEmpty(sectionId) {
     return hasItems;
 }
 
-const useStyles$10 = makeStyles({
+const useStyles$$ = makeStyles({
     accordion: {
         display: "flex",
         flexDirection: "column",
@@ -1459,7 +1461,7 @@ const useStyles$10 = makeStyles({
  */
 const AccordionMenuBar = () => {
     AccordionMenuBar.displayName = "AccordionMenuBar";
-    const classes = useStyles$10();
+    const classes = useStyles$$();
     const accordionCtx = useContext(AccordionContext);
     if (!accordionCtx) {
         return null;
@@ -1483,7 +1485,7 @@ const AccordionMenuBar = () => {
 const AccordionSectionBlock = (props) => {
     AccordionSectionBlock.displayName = "AccordionSectionBlock";
     const { children, sectionId } = props;
-    const classes = useStyles$10();
+    const classes = useStyles$$();
     const accordionCtx = useContext(AccordionContext);
     const { context: sectionContext, isEmpty } = useAccordionSectionBlockContext(props);
     if (accordionCtx) {
@@ -1503,7 +1505,7 @@ const AccordionSectionBlock = (props) => {
 const AccordionSectionItem = (props) => {
     AccordionSectionItem.displayName = "AccordionSectionItem";
     const { children, staticItem } = props;
-    const classes = useStyles$10();
+    const classes = useStyles$$();
     const accordionCtx = useContext(AccordionContext);
     const itemState = useAccordionSectionItemState(props);
     const [ctrlMode, setCtrlMode] = useState(false);
@@ -1543,7 +1545,7 @@ const AccordionSectionItem = (props) => {
  */
 const AccordionPinnedContainer = () => {
     AccordionPinnedContainer.displayName = "AccordionPinnedContainer";
-    const classes = useStyles$10();
+    const classes = useStyles$$();
     const accordionCtx = useContext(AccordionContext);
     return (jsx("div", { ref: accordionCtx?.pinnedContainerRef, className: classes.pinnedContainer, children: jsx(MessageBar$1, { className: classes.pinnedContainerEmpty, children: jsx(MessageBarBody, { children: "No pinned items" }) }) }));
 };
@@ -1554,7 +1556,7 @@ const AccordionPinnedContainer = () => {
  */
 const AccordionSearchBox = () => {
     AccordionSearchBox.displayName = "AccordionSearchBox";
-    const classes = useStyles$10();
+    const classes = useStyles$$();
     const accordionCtx = useContext(AccordionContext);
     if (!accordionCtx?.features.search) {
         return null;
@@ -1570,7 +1572,7 @@ const AccordionSearchBox = () => {
  */
 const AccordionSection = (props) => {
     AccordionSection.displayName = "AccordionSection";
-    const classes = useStyles$10();
+    const classes = useStyles$$();
     return jsx("div", { className: classes.panelDiv, children: props.children });
 };
 const StringAccordion = Accordion$1;
@@ -1578,7 +1580,7 @@ const Accordion = forwardRef((props, ref) => {
     Accordion.displayName = "Accordion";
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const { children, highlightSections, uniqueId, enablePinnedItems, enableHiddenItems, enableSearchItems, ...rest } = props;
-    const classes = useStyles$10();
+    const classes = useStyles$$();
     const { size } = useContext(ToolContext);
     const accordionCtx = useAccordionContext(props);
     const hasPinning = accordionCtx?.features.pinning ?? false;
@@ -1675,7 +1677,7 @@ const Collapse = (props) => {
     return (jsx(Collapse$1, { visible: props.visible, orientation: props.orientation, unmountOnExit: true, children: jsx("div", { className: `${classes.collapseContent} ${props.orientation === "horizontal" ? classes.horizontal : classes.vertical}`, children: props.children }) }));
 };
 
-const useStyles$$ = makeStyles({
+const useStyles$_ = makeStyles({
     button: {
         display: "flex",
         alignItems: "center",
@@ -1693,7 +1695,7 @@ const ToggleButton = (props) => {
     ToggleButton.displayName = "ToggleButton";
     const { value, onChange, title, appearance = "subtle" } = props;
     const { size } = useContext(ToolContext);
-    const classes = useStyles$$();
+    const classes = useStyles$_();
     const [checked, setChecked] = useState(value);
     const toggle = useCallback(() => {
         setChecked((prevChecked) => {
@@ -2002,7 +2004,7 @@ const UXContextProvider = (props) => {
 function AsReadonlyArray(array) {
     return array;
 }
-const useStyles$_ = makeStyles({
+const useStyles$Z = makeStyles({
     rootDiv: {
         flex: 1,
         overflow: "hidden",
@@ -2017,7 +2019,7 @@ const useStyles$_ = makeStyles({
  * @returns The extensible accordion component.
  */
 function ExtensibleAccordion(props) {
-    const classes = useStyles$_();
+    const classes = useStyles$Z();
     const { children, sections, sectionContent, context, sectionsRef, ...rest } = props;
     const defaultSections = useMemo(() => {
         const defaultSections = [];
@@ -2142,7 +2144,7 @@ function ExtensibleAccordion(props) {
                     })] }) })) }));
 }
 
-const useStyles$Z = makeStyles({
+const useStyles$Y = makeStyles({
     paneRootDiv: {
         display: "flex",
         flex: 1,
@@ -2155,7 +2157,7 @@ const useStyles$Z = makeStyles({
  */
 const SidePaneContainer = forwardRef((props, ref) => {
     const { className, ...rest } = props;
-    const classes = useStyles$Z();
+    const classes = useStyles$Y();
     return (jsx("div", { className: mergeClasses(classes.paneRootDiv, className), ref: ref, ...rest, children: props.children }));
 });
 
@@ -2426,7 +2428,7 @@ function useTheme(invert = false) {
 }
 
 // Fluent doesn't apply styling to scrollbars by default, so provide our own reasonable default.
-const useStyles$Y = makeStyles({
+const useStyles$X = makeStyles({
     root: {
         scrollbarColor: `${tokens.colorNeutralForeground3} ${tokens.colorTransparentBackground}`,
     },
@@ -2442,11 +2444,11 @@ const Theme = (props) => {
     // break any UI within the portal. Therefore, default to false.
     const { invert = false, applyStylesToPortals = false, className, ...rest } = props;
     const theme = useTheme(invert);
-    const classes = useStyles$Y();
+    const classes = useStyles$X();
     return (jsx(FluentProvider, { theme: theme, className: mergeClasses(classes.root, className), applyStylesToPortals: applyStylesToPortals, ...rest, children: props.children }));
 };
 
-const useStyles$X = makeStyles({
+const useStyles$W = makeStyles({
     extensionTeachingPopover: {
         maxWidth: "320px",
     },
@@ -2457,7 +2459,7 @@ const useStyles$X = makeStyles({
  * @returns The teaching moment popover.
  */
 const TeachingMoment = ({ shouldDisplay, positioningRef, onOpenChange, title, description }) => {
-    const classes = useStyles$X();
+    const classes = useStyles$W();
     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 })] }) }));
 };
 
@@ -2890,7 +2892,7 @@ const RootComponentServiceIdentity = Symbol("RootComponent");
  * The unique identity symbol for the shell service.
  */
 const ShellServiceIdentity = Symbol("ShellService");
-const useStyles$W = makeStyles({
+const useStyles$V = makeStyles({
     mainView: {
         flex: 1,
         display: "flex",
@@ -3103,14 +3105,14 @@ const DockMenu = (props) => {
 };
 const PaneHeader = (props) => {
     const { id, title, dockOptions } = props;
-    const classes = useStyles$W();
+    const classes = useStyles$V();
     return (jsxs("div", { className: classes.paneHeaderDiv, children: [props.icon && (jsx("div", { className: classes.paneHeaderIcon, children: jsx(props.icon, {}) })), jsx(Subtitle2Stronger, { className: mergeClasses(classes.paneHeaderText, !props.icon && classes.paneHeaderTextNoIcon), 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 = (props) => {
     // eslint-disable-next-line @typescript-eslint/naming-convention
     const { verticalLocation, horizontalLocation, id, component: Component, displayName } = props;
-    const classes = useStyles$W();
+    const classes = useStyles$V();
     const useTeachingMoment = useMemo(() => MakePopoverTeachingMoment(`Bar/${verticalLocation}/${horizontalLocation}/${displayName ?? id}`), [displayName, id]);
     const teachingMoment = useTeachingMoment(props.teachingMoment === false);
     const title = typeof props.teachingMoment === "object" ? props.teachingMoment.title : (displayName ?? id);
@@ -3120,7 +3122,7 @@ const ToolbarItem = (props) => {
 // 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$W();
+    const classes = useStyles$V();
     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 : classes.barBottom}`, 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, teachingMoment: entry.teachingMoment }, 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, teachingMoment: entry.teachingMoment }, entry.key))) })] })) }));
@@ -3130,7 +3132,7 @@ const SidePaneTab = (props) => {
     const { location, id, isSelected, isFirst, isLast, dockOptions, 
     // eslint-disable-next-line @typescript-eslint/naming-convention
     icon: Icon, title, } = props;
-    const classes = useStyles$W();
+    const classes = useStyles$V();
     const useTeachingMoment = useMemo(() => MakePopoverTeachingMoment(`Pane/${location}/${title ?? id}`), [title, id]);
     const teachingMoment = useTeachingMoment(props.teachingMoment === false);
     const tabClass = mergeClasses(classes.tab, isSelected ? classes.selectedTab : classes.unselectedTab, isFirst ? classes.firstTab : undefined, isLast ? classes.lastTab : undefined);
@@ -3142,7 +3144,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, initialCollapsed) {
-    const classes = useStyles$W();
+    const classes = useStyles$V();
     const [topSelectedTab, setTopSelectedTab] = useState();
     const [bottomSelectedTab, setBottomSelectedTab] = useState();
     const [collapsed, setCollapsed] = useState(initialCollapsed);
@@ -3371,7 +3373,7 @@ function MakeShellServiceDefinition({ leftPaneDefaultWidth = 350, leftPaneMinWid
                 expand: () => onCollapseChanged.notifyObservers({ location: "right", collapsed: false }),
             };
             const rootComponent = () => {
-                const classes = useStyles$W();
+                const classes = useStyles$V();
                 const [sidePaneDockOverrides, setSidePaneDockOverrides] = useSetting(SidePaneDockOverridesSettingDescriptor);
                 // This function returns a promise that resolves after the dock change takes effect so that
                 // we can then select the re-docked pane.
@@ -3758,13 +3760,13 @@ function useImpulse() {
     return [value, pulse];
 }
 
-const useStyles$V = makeStyles({
+const useStyles$U = makeStyles({
     placeholderDiv: {
         padding: `${tokens.spacingVerticalM} ${tokens.spacingHorizontalM}`,
     },
 });
 const PropertiesPane = (props) => {
-    const classes = useStyles$V();
+    const classes = useStyles$U();
     const entity = props.context;
     return entity != null ? (jsx(ExtensibleAccordion, { ...props })) : (jsx("div", { className: classes.placeholderDiv, children: jsx(Body1Strong, { italic: true, children: "No entity selected." }) }));
 };
@@ -4204,7 +4206,7 @@ function CoerceEntityArray(entities, sort) {
     }
     return entities;
 }
-const useStyles$U = makeStyles({
+const useStyles$T = makeStyles({
     rootDiv: {
         flex: 1,
         overflow: "hidden",
@@ -4313,14 +4315,14 @@ function MakeInlineCommandElement(command, isPlaceholder) {
 }
 const SceneTreeItem = (props) => {
     const { isSelected, select } = props;
-    const classes = useStyles$U();
+    const classes = useStyles$T();
     const [compactMode] = useSetting(CompactModeSettingDescriptor);
     const treeItemLayoutClass = mergeClasses(classes.sceneTreeItemLayout, compactMode ? classes.treeItemLayoutCompact : undefined);
     return (jsx(FlatTreeItem, { className: classes.treeItem, 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, isDropTarget, ...dropProps } = props;
-    const classes = useStyles$U();
+    const classes = useStyles$T();
     const [compactMode] = useSetting(CompactModeSettingDescriptor);
     // Get the commands that apply to this section.
     const commands = useResource(useCallback(() => {
@@ -4337,7 +4339,7 @@ const SectionTreeItem = (props) => {
 };
 const EntityTreeItem = (props) => {
     const { entityItem, isSelected, select, isFiltering, commandProviders, expandAll, collapseAll, isDragging, isDropTarget, ...dragProps } = props;
-    const classes = useStyles$U();
+    const classes = useStyles$T();
     const [compactMode] = useSetting(CompactModeSettingDescriptor);
     const hasChildren = !!entityItem.children?.length;
     const displayInfo = useResource(useCallback(() => {
@@ -4453,7 +4455,7 @@ const EntityTreeItem = (props) => {
                         }, children: jsx(Tooltip$1, { content: name, relationship: "description", children: jsx(Body1, { wrap: false, truncate: true, children: name }) }) }) }, GetEntityId$1(entityItem.entity)) }), 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$U();
+    const classes = useStyles$T();
     const { sections, entityCommandProviders, sectionCommandProviders, scene, selectedEntity = null } = props;
     const [openItems, setOpenItems] = useState(new Set());
     const [sceneVersion, setSceneVersion] = useState(0);
@@ -6079,7 +6081,7 @@ class CanvasGraphService {
     }
 }
 
-const useStyles$T = makeStyles({
+const useStyles$S = makeStyles({
     canvas: {
         flexGrow: 1,
         width: "100%",
@@ -6088,7 +6090,7 @@ const useStyles$T = makeStyles({
 });
 const CanvasGraph = (props) => {
     const { collector, scene, layoutObservable, returnToPlayheadObservable, onVisibleRangeChangedObservable, initialGraphSize } = props;
-    const classes = useStyles$T();
+    const classes = useStyles$S();
     const canvasRef = useRef(null);
     useEffect(() => {
         if (!canvasRef.current) {
@@ -6153,19 +6155,31 @@ function CoerceStepValue(step, isFineKeyPressed, isCourseKeyPressed) {
     }
     return step;
 }
-// Allow arbitrary expressions, primarily for math operations (e.g. 10*60 for 10 minutes in seconds).
-// Use Function constructor to safely evaluate the expression without allowing access to scope.
-// If the expression is invalid, fallback to NaN which will be caught by validateValue and prevent committing.
+// Parse the raw input into a number, supporting plain numeric values and arbitrary math expressions
+// (e.g. "10*60" for 10 minutes in seconds).
+// First, try Number() so plain numeric input works even under a strict Content-Security-Policy that
+// disallows eval/Function. Only fall back to the Function constructor for non-numeric inputs that may
+// be expressions. Empty/whitespace input returns NaN so validateValue rejects it rather than committing
+// 0 (which is what Number("") would otherwise return).
+// Non-finite results (NaN, +/-Infinity) are rejected from both paths so callers don't have to handle them.
 function EvaluateExpression(rawValue) {
-    const val = rawValue.trim();
+    rawValue = rawValue.trim();
+    if (rawValue.length === 0) {
+        return NaN;
+    }
+    const value = Number(rawValue);
+    if (Number.isFinite(value)) {
+        return value;
+    }
     try {
-        return Number(Function(`"use strict";return (${val})`)());
+        const result = Number(Function(`"use strict";return (${rawValue})`)());
+        return Number.isFinite(result) ? result : NaN;
     }
     catch {
         return NaN;
     }
 }
-const useStyles$S = makeStyles({
+const useStyles$R = makeStyles({
     icon: {
         "&:hover": {
             color: tokens.colorBrandForeground1,
@@ -6179,7 +6193,7 @@ const useStyles$S = makeStyles({
 const SpinButton = forwardRef((props, ref) => {
     SpinButton.displayName = "SpinButton2";
     const inputClasses = useInputStyles$1();
-    const classes = useStyles$S();
+    const classes = useStyles$R();
     const { size } = useContext(ToolContext);
     const { min, max } = props;
     const baseStep = props.step ?? 1;
@@ -6446,7 +6460,7 @@ const Dropdown = (props) => {
 const NumberDropdown = Dropdown;
 const StringDropdown = Dropdown;
 
-const useStyles$R = makeStyles({
+const useStyles$Q = makeStyles({
     surface: {
         maxWidth: "400px",
     },
@@ -6461,7 +6475,7 @@ const useStyles$R = makeStyles({
 const Popover = forwardRef((props, ref) => {
     const { children, open: controlledOpen, onOpenChange, positioning, surfaceClassName } = props;
     const [internalOpen, setInternalOpen] = useState(false);
-    const classes = useStyles$R();
+    const classes = useStyles$Q();
     const isControlled = controlledOpen !== undefined;
     const popoverOpen = isControlled ? controlledOpen : internalOpen;
     const handleOpenChange = (_, data) => {
@@ -6705,7 +6719,7 @@ const InputAlphaField = (props) => {
         } }));
 };
 
-const useStyles$Q = makeStyles({
+const useStyles$P = makeStyles({
     sidebar: {
         display: "flex",
         flexDirection: "column",
@@ -6769,7 +6783,7 @@ const useStyles$Q = makeStyles({
 });
 const PerformanceSidebar = (props) => {
     const { collector, onVisibleRangeChangedObservable } = props;
-    const classes = useStyles$Q();
+    const classes = useStyles$P();
     // Map from id to IPerfMetadata information
     const [metadataMap, setMetadataMap] = useState();
     // Map from category to all the ids belonging to that category
@@ -6842,7 +6856,7 @@ const PerformanceSidebar = (props) => {
                     })] }, `category-${category || "version"}`))) }));
 };
 
-const useStyles$P = makeStyles({
+const useStyles$O = makeStyles({
     container: {
         display: "flex",
         flexDirection: "row",
@@ -6871,7 +6885,7 @@ const useStyles$P = makeStyles({
 });
 const PerformanceViewer = (props) => {
     const { scene, layoutObservable, returnToLiveObservable, performanceCollector, initialGraphSize } = props;
-    const classes = useStyles$P();
+    const classes = useStyles$O();
     const [onVisibleRangeChangedObservable] = useState(() => new Observable());
     const onReturnToPlayheadClick = () => {
         returnToLiveObservable.notifyObservers();
@@ -7038,14 +7052,14 @@ const TextPropertyLine = (props) => {
     return (jsx(PropertyLine, { ...props, children: jsx(Body1, { title: title, children: value ?? "" }) }));
 };
 
-const useStyles$O = makeStyles({
+const useStyles$N = makeStyles({
     pinnedStatsPane: {
         flex: "0 1 auto",
         paddingBottom: tokens.spacingHorizontalM,
     },
 });
 const StatsPane = (props) => {
-    const classes = useStyles$O();
+    const classes = useStyles$N();
     const scene = props.context;
     const engine = scene.getEngine();
     const pollingObservable = usePollingObservable(250);
@@ -7208,7 +7222,7 @@ const ToolsServiceDefinition = {
  */
 const ReactContextServiceIdentity = Symbol("ReactContextService");
 
-const useStyles$N = makeStyles({
+const useStyles$M = makeStyles({
     dropdown: {
         ...UniformWidthStyling,
     },
@@ -7220,7 +7234,7 @@ const useStyles$N = makeStyles({
  */
 const DropdownPropertyLine = forwardRef((props, ref) => {
     DropdownPropertyLine.displayName = "DropdownPropertyLine";
-    const classes = useStyles$N();
+    const classes = useStyles$M();
     return (jsx(PropertyLine, { ...props, ref: ref, children: jsx(Dropdown, { ...props, className: classes.dropdown }) }));
 });
 /**
@@ -7378,7 +7392,7 @@ const SyncedSliderInput = (props) => {
     return (jsxs("div", { className: mergeClasses(classes.container, props.className), children: [infoLabel && jsx(InfoLabel, { ...infoLabel, htmlFor: "syncedSlider" }), jsxs("div", { id: "syncedSlider", className: classes.syncedSlider, children: [hasSlider && (jsx(Slider, { className: getSliderClassName(), value: value, onChange: handleSliderChange, min: props.min, max: props.max, step: props.step, disabled: props.disabled, onPointerDown: handleSliderPointerDown, onPointerUp: handleSliderPointerUp })), jsx(SpinButton, { ...passthroughProps, className: useCompactSizing ? classes.compactSpinButton : classes.spinButton, inputClassName: useCompactSizing ? classes.compactSpinButtonInput : classes.spinButtonInput, value: value, onChange: handleInputChange, step: props.step, disabled: props.disabled, disableDragButton: true })] })] }));
 };
 
-const useStyles$M = makeStyles({
+const useStyles$L = makeStyles({
     uniformWidth: {
         ...UniformWidthStyling,
     },
@@ -7390,7 +7404,7 @@ const useStyles$M = makeStyles({
  */
 const SyncedSliderPropertyLine = forwardRef((props, ref) => {
     SyncedSliderPropertyLine.displayName = "SyncedSliderPropertyLine";
-    const classes = useStyles$M();
+    const classes = useStyles$L();
     const { label, description, ...sliderProps } = props;
     return (jsx(PropertyLine, { ref: ref, ...props, children: jsx(SyncedSliderInput, { ...sliderProps, className: mergeClasses(classes.uniformWidth, props.className) }) }));
 });
@@ -8350,7 +8364,7 @@ function useExtensionManager() {
     return useContext(ExtensionManagerContext)?.extensionManager;
 }
 
-const useStyles$L = makeStyles({
+const useStyles$K = makeStyles({
     themeButton: {
         margin: 0,
     },
@@ -8369,7 +8383,7 @@ const ThemeSelectorServiceDefinition = {
             teachingMoment: false,
             order: -300,
             component: () => {
-                const classes = useStyles$L();
+                const classes = useStyles$K();
                 const { isDarkMode, themeMode, setThemeMode } = useThemeMode();
                 const onSelectedThemeChange = useCallback((e, data) => {
                     setThemeMode(data.checkedItems.includes("System") ? "system" : data.checkedItems[0].toLocaleLowerCase());
@@ -8386,7 +8400,7 @@ const ThemeSelectorServiceDefinition = {
     },
 };
 
-const useStyles$K = makeStyles({
+const useStyles$J = makeStyles({
     app: {
         colorScheme: "light dark",
         flexGrow: 1,
@@ -8431,7 +8445,7 @@ function MakeModularTool(options) {
     // This deferred resolves once the React effect cleanup (which disposes the ServiceContainer) is complete.
     const disposeDeferred = new Deferred();
     const modularToolRootComponent = () => {
-        const classes = useStyles$K();
+        const classes = useStyles$J();
         const [extensionManagerContext, setExtensionManagerContext] = useState();
         const [requiredExtensions, setRequiredExtensions] = useState();
         const [requiredExtensionsDeferred, setRequiredExtensionsDeferred] = useState();
@@ -8518,7 +8532,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-DTrjNf_v.js');
+                    const { ExtensionListServiceDefinition } = await import('./extensionsListService-Drj94Pma.js');
                     serviceContainer.addService(ExtensionListServiceDefinition);
                 }
                 // Register all external services (that make up a unique tool).
@@ -8639,14 +8653,14 @@ const DefaultInspectorExtensionFeed = new BuiltInsExtensionFeed("Inspector", [
         description: "Adds a new panel for easy creation of various Babylon assets. This is a WIP extension...expect changes!",
         keywords: ["creation", "tools"],
         ...BabylonWebResources,
-        getExtensionModuleAsync: async () => await import('./quickCreateToolsService-8d6rBO-A.js'),
+        getExtensionModuleAsync: async () => await import('./quickCreateToolsService-CXUBvaDf.js'),
     },
     {
         name: "Reflector",
         description: "Connects to the Reflector Bridge for real-time scene synchronization with the Babylon.js Sandbox.",
         keywords: ["reflector", "bridge", "sync", "sandbox", "tools"],
         ...BabylonWebResources,
-        getExtensionModuleAsync: async () => await import('./reflectorService-B7LcD1Sn.js'),
+        getExtensionModuleAsync: async () => await import('./reflectorService-D3JRLq4p.js'),
     },
 ]);
 
@@ -9687,7 +9701,7 @@ const ColorSliders = ({ color, onSliderChange }) => (jsxs(Fragment, { children:
 const Color3PropertyLine = ColorPropertyLine;
 const Color4PropertyLine = ColorPropertyLine;
 
-const useStyles$J = makeStyles({
+const useStyles$I = makeStyles({
     uniformWidth: {
         ...UniformWidthStyling,
     },
@@ -9699,7 +9713,7 @@ const useStyles$J = makeStyles({
  */
 const TextInputPropertyLine = (props) => {
     TextInputPropertyLine.displayName = "TextInputPropertyLine";
-    const classes = useStyles$J();
+    const classes = useStyles$I();
     return (jsx(PropertyLine, { ...props, children: jsx(TextInput, { ...props, className: mergeClasses(classes.uniformWidth, props.className) }) }));
 };
 /**
@@ -9710,7 +9724,7 @@ const TextInputPropertyLine = (props) => {
  */
 const NumberInputPropertyLine = (props) => {
     NumberInputPropertyLine.displayName = "NumberInputPropertyLine";
-    const classes = useStyles$J();
+    const classes = useStyles$I();
     return (jsx(PropertyLine, { ...props, children: jsx(SpinButton, { ...props, className: mergeClasses(classes.uniformWidth, props.className) }) }));
 };
 
@@ -9842,7 +9856,7 @@ const LegacyInspectableObjectPropertiesServiceDefinition = {
 };
 
 const DocUrl = "https://www.npmjs.com/package/@babylonjs/inspector#inspector-cli";
-const useStyles$I = makeStyles({
+const useStyles$H = makeStyles({
     tooltipContent: {
         display: "flex",
         flexDirection: "column",
@@ -9860,7 +9874,7 @@ const CliConnectionStatusServiceDefinition = {
             teachingMoment: false,
             order: 0 /* DefaultToolbarItemOrder.CliStatus */,
             component: () => {
-                const classes = useStyles$I();
+                const classes = useStyles$H();
                 const isEnabled = useObservableState(() => cliConnectionStatus.isEnabled, cliConnectionStatus.onConnectionStatusChanged);
                 const isConnected = useObservableState(() => cliConnectionStatus.isConnected, cliConnectionStatus.onConnectionStatusChanged);
                 const { showToast } = useToast();
@@ -9921,7 +9935,7 @@ const BreakTangentIcon = createFluentIcon("BreakTangent", "20", '<g transform="s
 const UnifyTangentIcon = createFluentIcon("UnifyTangent", "20", '<g transform="scale(0.5)"><path d="M27.94,18.28a1.49,1.49,0,0,0-1.41,1h-5l-1.62-1.63-1.62,1.63h-5a1.5,1.5,0,1,0,0,1h5l1.62,1.62,1.62-1.62h5a1.5,1.5,0,1,0,1.41-2Z"/></g>');
 const StepTangentIcon = createFluentIcon("StepTangent", "20", '<g transform="scale(0.5)"><path d="M29,16.71a1.5,1.5,0,1,0-2,1.41v5.67H11v1H28V18.12A1.51,1.51,0,0,0,29,16.71Z"/></g>');
 
-const useStyles$H = makeStyles({
+const useStyles$G = makeStyles({
     coordinatesModeButton: {
         margin: `0 0 0 ${tokens.spacingHorizontalXS}`,
     },
@@ -9937,7 +9951,7 @@ const useStyles$H = makeStyles({
 });
 const GizmoToolbar = (props) => {
     const { gizmoService, sceneContext } = props;
-    const classes = useStyles$H();
+    const classes = useStyles$G();
     const gizmoMode = useObservableState(() => gizmoService.gizmoMode, gizmoService.onGizmoModeChanged);
     const coordinatesMode = useObservableState(() => gizmoService.coordinatesMode, gizmoService.onCoordinatesModeChanged);
     const cameraGizmo = useObservableState(() => gizmoService.gizmoCamera, gizmoService.onCameraGizmoChanged);
@@ -10066,7 +10080,7 @@ const HighlightServiceDefinition = {
     },
 };
 
-const useStyles$G = makeStyles({
+const useStyles$F = makeStyles({
     badge: {
         margin: tokens.spacingHorizontalXXS,
         fontFamily: "monospace",
@@ -10083,7 +10097,7 @@ const MiniStatsServiceDefinition = {
             order: 300 /* DefaultToolbarItemOrder.FrameRate */,
             teachingMoment: false,
             component: () => {
-                const classes = useStyles$G();
+                const classes = useStyles$F();
                 const scene = useObservableState(useCallback(() => sceneContext.currentScene, [sceneContext.currentScene]), sceneContext.currentSceneObservable);
                 const engine = scene?.getEngine();
                 const pollingObservable = usePollingObservable(250);
@@ -10412,7 +10426,7 @@ function useCurveEditor() {
     return context;
 }
 
-const useStyles$F = makeStyles({
+const useStyles$E = makeStyles({
     root: {
         display: "flex",
         flexDirection: "row",
@@ -10456,7 +10470,7 @@ const useStyles$F = makeStyles({
  * @returns The top bar component
  */
 const TopBar = () => {
-    const styles = useStyles$F();
+    const styles = useStyles$E();
     const { state, observables } = useCurveEditor();
     const [keyFrameValue, setKeyFrameValue] = useState(null);
     const [keyValue, setKeyValue] = useState(null);
@@ -10549,7 +10563,7 @@ const ColorChannelColors = {
  */
 const DefaultCurveColor = "#ffffff";
 
-const useStyles$E = makeStyles({
+const useStyles$D = makeStyles({
     root: {
         display: "flex",
         flexDirection: "column",
@@ -10591,7 +10605,7 @@ const LOOP_MODES$1 = [
  * @returns The edit animation panel component
  */
 const EditAnimationPanel = ({ animation, onClose }) => {
-    const styles = useStyles$E();
+    const styles = useStyles$D();
     const { observables } = useCurveEditor();
     const [name, setName] = useState(animation.name);
     const [property, setProperty] = useState(animation.targetProperty);
@@ -10622,7 +10636,7 @@ const EditAnimationPanel = ({ animation, onClose }) => {
     return (jsxs("div", { className: styles.root, children: [jsxs("div", { className: styles.form, children: [jsxs("div", { className: styles.row, children: [jsx(Label, { children: "Display Name" }), jsx(Input, { value: name, onChange: (_, data) => setName(data.value), placeholder: "Animation name" })] }), jsxs("div", { className: styles.row, children: [jsx(Label, { children: "Property" }), jsx(Input, { value: property, onChange: (_, data) => setProperty(data.value), placeholder: "e.g., position, rotation, scaling" })] }), jsxs("div", { className: styles.row, children: [jsx(Label, { children: "Loop Mode" }), jsx(Dropdown$1, { value: getLoopModeLabel(loopMode), selectedOptions: [loopMode.toString()], onOptionSelect: (_, data) => setLoopMode(Number(data.optionValue)), positioning: "below", inlinePopup: true, children: LOOP_MODES$1.map((mode) => (jsx(Option, { value: mode.value.toString(), children: mode.label }, mode.value))) })] })] }), jsxs("div", { className: styles.buttons, children: [jsx(Button, { appearance: "primary", onClick: saveChanges, label: "Save", disabled: !isValid }), jsx(Button, { appearance: "subtle", onClick: onClose, label: "Cancel" })] })] }));
 };
 
-const useStyles$D = makeStyles({
+const useStyles$C = makeStyles({
     root: {
         display: "flex",
         flexDirection: "column",
@@ -10688,7 +10702,7 @@ const useStyles$D = makeStyles({
  * @returns Animation entry component
  */
 const AnimationEntry = ({ animation }) => {
-    const styles = useStyles$D();
+    const styles = useStyles$C();
     const { state, actions, observables } = useCurveEditor();
     const [isExpanded, setIsExpanded] = useState(false);
     const [isHovered, setIsHovered] = useState(false);
@@ -10767,7 +10781,7 @@ const AnimationEntry = ({ animation }) => {
  * @returns Animation sub-entry component
  */
 const AnimationSubEntry = ({ animation, subName, color }) => {
-    const styles = useStyles$D();
+    const styles = useStyles$C();
     const { actions, observables } = useCurveEditor();
     const activeChannel = actions.getActiveChannel(animation);
     const isThisChannelActive = activeChannel === color;
@@ -10790,7 +10804,7 @@ const AnimationSubEntry = ({ animation, subName, color }) => {
  * @returns Animation list component
  */
 const AnimationList = () => {
-    const styles = useStyles$D();
+    const styles = useStyles$C();
     const { state, observables } = useCurveEditor();
     // Re-render when animations are loaded or changed (e.g. animation deleted)
     // useCallback stabilizes the accessor to prevent infinite re-render loops
@@ -10803,7 +10817,7 @@ const AnimationList = () => {
         }) }));
 };
 
-const useStyles$C = makeStyles({
+const useStyles$B = makeStyles({
     root: {
         display: "flex",
         flexDirection: "column",
@@ -10852,7 +10866,7 @@ const LoopModeOptions = LOOP_MODES.map((lm) => ({ label: lm, value: lm }));
  * @returns The add animation panel component
  */
 const AddAnimationPanel = ({ onClose }) => {
-    const styles = useStyles$C();
+    const styles = useStyles$B();
     const { state, actions, observables } = useCurveEditor();
     const [name, setName] = useState("");
     const [mode, setMode] = useState("List");
@@ -11069,7 +11083,7 @@ const AddAnimationPanel = ({ onClose }) => {
     return (jsxs("div", { className: styles.root, children: [jsx("div", { className: styles.header, children: jsx("div", { className: styles.title, children: "Add Animation" }) }), jsxs("div", { className: styles.form, children: [jsxs("div", { className: styles.row, children: [jsx(Label, { children: "Display Name" }), jsx(TextInput, { value: name, onChange: setName })] }), jsx("div", { className: styles.row, children: jsx(StringDropdown, { value: mode, onChange: (val) => setMode(val), options: ModeOptions, disabled: properties.length === 0, infoLabel: { label: "Mode" } }) }), jsxs("div", { className: styles.row, children: [jsx(Label, { children: "Property" }), isCustomMode ? (jsx(TextInput, { value: customProperty, onChange: setCustomProperty })) : (jsx(StringDropdown, { value: selectedProperty, onChange: (val) => setSelectedProperty(val), options: properties.map((p) => ({ label: p, value: p })) }))] }), jsxs("div", { className: styles.row, children: [jsx(Label, { children: "Type" }), isCustomMode ? (jsx(StringDropdown, { value: animationType, onChange: (val) => setAnimationType(val), options: AnimationTypeOptions })) : (jsx("div", { className: styles.typeDisplay, children: inferredType }))] }), jsx("div", { className: styles.row, children: jsx(StringDropdown, { value: loopMode, onChange: (val) => setLoopMode(val), options: LoopModeOptions, infoLabel: { label: "Loop Mode" } }) })] }), jsxs("div", { className: styles.buttons, children: [jsx(Button, { appearance: "primary", onClick: createAnimation, disabled: !isValid, label: "Create" }), jsx(Button, { appearance: "subtle", onClick: onClose, label: "Cancel" })] })] }));
 };
 
-const useStyles$B = makeStyles({
+const useStyles$A = makeStyles({
     root: {
         display: "flex",
         flexDirection: "column",
@@ -11112,7 +11126,7 @@ const useStyles$B = makeStyles({
  * @returns The load animation panel component
  */
 const LoadAnimationPanel = ({ onClose }) => {
-    const styles = useStyles$B();
+    const styles = useStyles$A();
     const { state, actions, observables } = useCurveEditor();
     const [snippetIdInput, setSnippetIdInput] = useState("");
     const [loadedSnippetId, setLoadedSnippetId] = useState(null);
@@ -11251,7 +11265,7 @@ class StringTools {
     }
 }
 
-const useStyles$A = makeStyles({
+const useStyles$z = makeStyles({
     root: {
         display: "flex",
         flexDirection: "column",
@@ -11296,7 +11310,7 @@ const useStyles$A = makeStyles({
  * @returns The save animation panel component
  */
 const SaveAnimationPanel = ({ onClose: _onClose }) => {
-    const styles = useStyles$A();
+    const styles = useStyles$z();
     const { state } = useCurveEditor();
     const [selectedAnimations, setSelectedAnimations] = useState(() => {
         if (!state.animations) {
@@ -11369,7 +11383,7 @@ const SaveAnimationPanel = ({ onClose: _onClose }) => {
                 }) }), jsxs("div", { className: styles.buttons, children: [jsx(Button, { appearance: "primary", onClick: saveToSnippetServer, disabled: selectedAnimations.length === 0 || isSaving, label: isSaving ? "Saving..." : "Save to Snippet Server" }), jsx(Button, { appearance: "secondary", onClick: saveToFile, disabled: selectedAnimations.length === 0, label: "Save to File" })] }), saveError && jsx("div", { className: styles.errorText, children: saveError }), snippetId && jsxs("div", { className: styles.snippetId, children: ["Saved! Snippet ID: ", snippetId] })] }));
 };
 
-const useStyles$z = makeStyles({
+const useStyles$y = makeStyles({
     root: {
         display: "flex",
         flexDirection: "column",
@@ -11423,7 +11437,7 @@ const useStyles$z = makeStyles({
  * @returns The sidebar component
  */
 const SideBar = () => {
-    const styles = useStyles$z();
+    const styles = useStyles$y();
     const { state, actions, observables } = useCurveEditor();
     const [openPopover, setOpenPopover] = useState(null);
     const [fps, setFps] = useState(60);
@@ -12411,7 +12425,7 @@ const KeyPointComponent = (props) => {
                                 } })] }))] }))] }));
 };
 
-const useStyles$y = makeStyles({
+const useStyles$x = makeStyles({
     root: {
         position: "absolute",
         top: 0,
@@ -12595,7 +12609,7 @@ function ExtractValuesFromKeys(keys, curves) {
  * @returns The graph component
  */
 const Graph = ({ width, height }) => {
-    const styles = useStyles$y();
+    const styles = useStyles$x();
     const { state, actions, observables } = useCurveEditor();
     const svgRef = useRef(null);
     const [scale, setScale] = useState(1);
@@ -12958,7 +12972,7 @@ const Graph = ({ width, height }) => {
                     }), renderValueAxis()] })] }));
 };
 
-const useStyles$x = makeStyles({
+const useStyles$w = makeStyles({
     root: {
         position: "absolute",
         top: 0,
@@ -13001,7 +13015,7 @@ const useStyles$x = makeStyles({
  * @returns The playhead component
  */
 const PlayHead = ({ width, height: _height }) => {
-    const styles = useStyles$x();
+    const styles = useStyles$w();
     const { state, actions, observables } = useCurveEditor();
     const [isDragging, setIsDragging] = useState(false);
     // Use refs for all mutable values to avoid render cycles
@@ -13152,7 +13166,7 @@ const PlayHead = ({ width, height: _height }) => {
     return (jsxs("div", { className: styles.root, children: [jsx("div", { ref: lineRef, className: styles.line, onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp }), jsx("div", { ref: handleRef, className: styles.handle, onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp })] }));
 };
 
-const useStyles$w = makeStyles({
+const useStyles$v = makeStyles({
     root: {
         display: "flex",
         flexDirection: "row",
@@ -13184,7 +13198,7 @@ const useStyles$w = makeStyles({
  * @returns The frame bar component
  */
 const FrameBar = ({ width }) => {
-    const styles = useStyles$w();
+    const styles = useStyles$v();
     const { state, observables } = useCurveEditor();
     const containerRef = useRef(null);
     const [scale, setScale] = useState(1);
@@ -13242,7 +13256,7 @@ const FrameBar = ({ width }) => {
     return (jsx("div", { className: styles.root, ref: containerRef, children: renderTicks() }));
 };
 
-const useStyles$v = makeStyles({
+const useStyles$u = makeStyles({
     root: {
         display: "flex",
         flexDirection: "column",
@@ -13283,7 +13297,7 @@ const OFFSET_X = 10;
  * @returns The range frame bar component
  */
 const RangeFrameBar = ({ width }) => {
-    const styles = useStyles$v();
+    const styles = useStyles$u();
     const { state, actions, observables } = useCurveEditor();
     const svgRef = useRef(null);
     const [viewWidth, setViewWidth] = useState(width);
@@ -13394,7 +13408,7 @@ const RangeFrameBar = ({ width }) => {
                 }), renderKeyframes, renderActiveFrame] }) }));
 };
 
-const useStyles$u = makeStyles({
+const useStyles$t = makeStyles({
     root: {
         display: "flex",
         flexDirection: "column",
@@ -13426,7 +13440,7 @@ const useStyles$u = makeStyles({
  * @returns The canvas component
  */
 const Canvas = () => {
-    const styles = useStyles$u();
+    const styles = useStyles$t();
     const { observables } = useCurveEditor();
     const containerRef = useRef(null);
     const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
@@ -13456,7 +13470,7 @@ const Canvas = () => {
     return (jsxs("div", { className: styles.root, ref: containerRef, children: [jsx("div", { className: styles.frameBar, children: jsx(FrameBar, { width: dimensions.width }) }), jsxs("div", { className: styles.canvasArea, children: [jsx(Graph, { width: dimensions.width, height: dimensions.height - 70 }), jsx(PlayHead, { width: dimensions.width, height: dimensions.height - 70 })] }), jsx("div", { className: styles.rangeFrameBar, children: jsx(RangeFrameBar, { width: dimensions.width }) })] }));
 };
 
-const useStyles$t = makeStyles({
+const useStyles$s = makeStyles({
     root: {
         flex: 1,
         height: "25px",
@@ -13518,7 +13532,7 @@ const useStyles$t = makeStyles({
  * @returns The range selector component
  */
 const RangeSelector = () => {
-    const styles = useStyles$t();
+    const styles = useStyles$s();
     const { state, actions, observables } = useCurveEditor();
     const containerRef = useRef(null);
     const scrollbarRef = useRef(null);
@@ -13663,7 +13677,7 @@ function GetKeyAtAnyFrameIndex(animations, frame) {
     }
     return false;
 }
-const useStyles$s = makeStyles({
+const useStyles$r = makeStyles({
     root: {
         display: "flex",
         flexDirection: "row",
@@ -13720,7 +13734,7 @@ MediaControls.displayName = "MediaControls";
  * @returns The BottomBar component.
  */
 const BottomBar = () => {
-    const styles = useStyles$s();
+    const styles = useStyles$r();
     const { state, actions, observables } = useCurveEditor();
     // Track display frame separately for smooth updates during playback
     const [displayFrame, setDisplayFrame] = useState(state.activeFrame);
@@ -13835,7 +13849,7 @@ const BottomBar = () => {
     return (jsxs("div", { className: styles.root, children: [jsx("div", { className: styles.mediaControls, children: jsx(MediaControls, { hasActiveAnimations: hasActiveAnimations, isPlaying: state.isPlaying, forwardAnimation: state.forwardAnimation, onPlayForward: handlePlayForward, onPlayBackward: handlePlayBackward, onStop: handleStop, onPrevKey: handlePrevKey, onNextKey: handleNextKey, onFirstFrame: handleFirstFrame, onLastFrame: handleLastFrame }) }), jsxs("div", { className: styles.frameDisplay, children: [jsx("div", { className: styles.frameLabel, children: "Frame:" }), jsx(SpinButton, { className: styles.spinButton, value: displayFrame, onChange: handleFrameChange, min: state.fromKey, max: state.toKey, disabled: !hasActiveAnimations })] }), jsx(RangeSelector, {}), jsxs("div", { className: styles.clipLengthSection, children: [jsx("div", { className: styles.frameLabel, children: "Clip Length:" }), jsx(SpinButton, { className: styles.spinButton, value: clipLength, onChange: handleClipLengthChange, min: 1, disabled: !hasActiveAnimations })] })] }));
 };
 
-const useStyles$r = makeStyles({
+const useStyles$q = makeStyles({
     root: {
         display: "flex",
         flexDirection: "column",
@@ -13884,7 +13898,7 @@ const useStyles$r = makeStyles({
  * @returns The curve editor content
  */
 const CurveEditorContent = () => {
-    const styles = useStyles$r();
+    const styles = useStyles$q();
     const { state, actions, observables } = useCurveEditor();
     const rootRef = useRef(null);
     const prepareRef = useRef(() => actions.prepare());
@@ -14726,7 +14740,7 @@ function useObservableArray(target, getItems, addFn, removeFn, changeFn) {
     }, [getItems]), useInterceptObservable("function", target, addFn), useInterceptObservable("function", target, removeFn), changeFn ? useInterceptObservable("function", target, changeFn) : undefined);
 }
 
-const useStyles$q = makeStyles({
+const useStyles$p = makeStyles({
     lightsListDiv: {
         display: "flex",
         flexDirection: "column",
@@ -14736,7 +14750,7 @@ const ClusteredLightContainerSetupProperties = ({ context: container }) => {
     return (jsxs(Fragment, { children: [jsx(BooleanBadgePropertyLine, { label: "Is Supported", value: container.isSupported }), jsx(BoundProperty, { label: "Horizontal Tiles", component: NumberInputPropertyLine, target: container, propertyKey: "horizontalTiles", step: 1, min: 1, forceInt: true }), jsx(BoundProperty, { label: "Vertical Tiles", component: NumberInputPropertyLine, target: container, propertyKey: "verticalTiles", step: 1, min: 1, forceInt: true }), jsx(BoundProperty, { label: "Depth Slices", component: NumberInputPropertyLine, target: container, propertyKey: "depthSlices", step: 1, min: 1, forceInt: true }), jsx(BoundProperty, { label: "Max Range", component: NumberInputPropertyLine, target: container, propertyKey: "maxRange", min: 1 })] }));
 };
 const ClusteredLightContainerLightsProperties = ({ container, selectionService, }) => {
-    const classes = useStyles$q();
+    const classes = useStyles$p();
     const lights = useObservableArray(container, useCallback(() => container.lights, [container]), "addLight", "removeLight");
     return (jsx(PropertyLine, { label: "Lights", expandedContent: jsx("div", { className: classes.lightsListDiv, children: lights.map((light) => (jsx(LinkToEntityPropertyLine, { label: light.getClassName(), entity: light, selectionService: selectionService }, light.uniqueId))) }), children: jsx(Badge, { appearance: "filled", children: lights.length }) }));
 };
@@ -14786,7 +14800,7 @@ const HemisphericLightSetupProperties = ({ context: hemisphericLight }) => {
     return (jsxs(Fragment, { children: [jsx(BoundProperty, { label: "Direction", component: Vector3PropertyLine, target: hemisphericLight, propertyKey: "direction" }), jsx(BoundProperty, { label: "Diffuse", component: Color3PropertyLine, target: hemisphericLight, propertyKey: "diffuse" }), jsx(BoundProperty, { label: "Ground", component: Color3PropertyLine, target: hemisphericLight, propertyKey: "groundColor" }), jsx(BoundProperty, { label: "Intensity", component: NumberInputPropertyLine, target: hemisphericLight, propertyKey: "intensity" })] }));
 };
 
-const useStyles$p = makeStyles({
+const useStyles$o = makeStyles({
     root: {
         display: "grid",
         gridTemplateRows: "repeat(1fr)",
@@ -14816,7 +14830,7 @@ const useStyles$p = makeStyles({
 const ComboBox = forwardRef((props, ref) => {
     ComboBox.displayName = "ComboBox";
     const comboId = useId();
-    const styles = useStyles$p();
+    const styles = useStyles$o();
     const { size } = useContext(ToolContext);
     // Find the label for the current value
     const getLabel = (value) => props.options.find((opt) => opt.value === value)?.label ?? "";
@@ -14839,7 +14853,7 @@ const ComboBox = forwardRef((props, ref) => {
     return (jsxs("div", { className: styles.root, children: [jsx("label", { id: comboId, children: props.label }), jsx(Combobox, { ref: ref, defaultOpen: props.defaultOpen, 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$o = makeStyles({
+const useStyles$n = makeStyles({
     linkDiv: {
         display: "flex",
         flexDirection: "row",
@@ -14864,7 +14878,7 @@ const useStyles$o = makeStyles({
 function EntitySelector(props) {
     const { value, onLink, getEntities, getName, filter, defaultValue } = props;
     const onChange = props.onChange;
-    const classes = useStyles$o();
+    const classes = useStyles$n();
     const comboBoxRef = useRef(null);
     // Build options with uniqueId as key
     const options = useMemo(() => {
@@ -15018,7 +15032,7 @@ const TextureUpload = (props) => {
     return jsx(UploadButton, { onUpload: handleUpload, accept: accept, title: "Upload Texture", label: label });
 };
 
-const useStyles$n = makeStyles({
+const useStyles$m = makeStyles({
     container: {
         display: "flex",
         flexDirection: "row",
@@ -15035,7 +15049,7 @@ const useStyles$n = makeStyles({
 const TextureSelector = (props) => {
     TextureSelector.displayName = "TextureSelector";
     const { scene, cubeOnly, value, onChange, onLink, defaultValue } = props;
-    const classes = useStyles$n();
+    const classes = useStyles$m();
     const getTextures = useCallback(() => scene.textures, [scene.textures]);
     const getName = useCallback((texture) => texture.displayName || texture.name || `${texture.getClassName() || "Unnamed Texture"} (${texture.uniqueId})`, []);
     const filter = useCallback((texture) => !cubeOnly || texture.isCube, [cubeOnly]);
@@ -15640,7 +15654,7 @@ async function EditNodeMaterial(material) {
     await material.edit({ nodeEditorConfig: { backgroundColor: material.getScene().clearColor } });
 }
 
-const useStyles$m = makeStyles({
+const useStyles$l = makeStyles({
     subsection: {
         marginTop: tokens.spacingVerticalM,
     },
@@ -15714,7 +15728,7 @@ const GradientBlockPropertyLine = (props) => {
 };
 const NodeMaterialInputProperties = (props) => {
     const { material } = props;
-    const classes = useStyles$m();
+    const classes = useStyles$l();
     const inputBlocks = useObservableState(useCallback(() => {
         const inspectorVisibleInputBlocks = material
             .getInputBlocks()
@@ -16440,7 +16454,7 @@ function SaveMetadata(entity, metadata) {
         entity.metadata = metadata;
     }
 }
-const useStyles$l = makeStyles({
+const useStyles$k = makeStyles({
     mainDiv: {
         display: "flex",
         flexDirection: "column",
@@ -16460,7 +16474,7 @@ const useStyles$l = makeStyles({
  */
 const MetadataProperties = (props) => {
     const { entity } = props;
-    const classes = useStyles$l();
+    const classes = useStyles$k();
     const { size } = useContext(ToolContext);
     const metadata = useProperty(entity, "metadata");
     const stringifiedMetadata = useMemo(() => StringifyMetadata(metadata, false) ?? "", [metadata]);
@@ -17395,7 +17409,7 @@ const ParticleSystemEmitterProperties = (props) => {
                                 } })) : (jsx(Property, { component: TextPropertyLine, propertyPath: "source", label: "Source", value: "No meshes in scene." })), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use normals for direction", target: particleEmitterType, propertyKey: "useMeshNormalsForDirection" }), !useMeshNormalsForDirection && (jsxs(Fragment, { children: [jsx(BoundProperty, { component: Vector3PropertyLine, label: "Direction1", target: particleEmitterType, propertyKey: "direction1" }), jsx(BoundProperty, { component: Vector3PropertyLine, label: "Direction2", target: particleEmitterType, propertyKey: "direction2" })] }))] })), 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." })] }));
 };
 
-const useStyles$k = makeStyles({
+const useStyles$j = makeStyles({
     subsection: {
         marginTop: tokens.spacingVerticalM,
     },
@@ -17415,7 +17429,7 @@ const ParticleSystemSizeProperties = (props) => {
     const sizeGradientGetter = useCallback(() => system.getSizeGradients(), [system]);
     const sizeGradient = useObservableArray(system, sizeGradientGetter, "addSizeGradient", "removeSizeGradient", "forceRefreshGradients");
     const useSizeGradients = (sizeGradient?.length ?? 0) > 0;
-    const classes = useStyles$k();
+    const classes = useStyles$j();
     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 }), isCpuParticleSystem && !useStartSizeGradients && (jsx(ButtonLine, { label: "Use Start Size gradients", onClick: () => {
                     system.addStartSizeGradient(0, system.minSize, system.maxSize);
                     system.forceRefreshGradients();
@@ -17451,7 +17465,7 @@ const ParticleSystemSizeProperties = (props) => {
                         } })] }))] }));
 };
 
-const useStyles$j = makeStyles({
+const useStyles$i = makeStyles({
     subsection: {
         marginTop: tokens.spacingVerticalM,
     },
@@ -17477,7 +17491,7 @@ const ParticleSystemEmissionProperties = (props) => {
     const useVelocityGradients = (velocityGradients?.length ?? 0) > 0;
     const useLimitVelocityGradients = (limitVelocityGradients?.length ?? 0) > 0;
     const useDragGradients = (dragGradients?.length ?? 0) > 0;
-    const classes = useStyles$j();
+    const classes = useStyles$i();
     return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Emit rate", target: system, propertyKey: "emitRate", min: 0, step: 1 }), isCpuParticleSystem && !useEmitRateGradients && (jsx(ButtonLine, { label: "Use Emit rate gradients", onClick: () => {
                     system.addEmitRateGradient(0, system.emitRate, system.emitRate);
                     system.forceRefreshGradients();
@@ -17545,7 +17559,7 @@ const ParticleSystemEmissionProperties = (props) => {
                         } })] }))] }));
 };
 
-const useStyles$i = makeStyles({
+const useStyles$h = makeStyles({
     subsection: {
         marginTop: tokens.spacingVerticalM,
     },
@@ -17562,7 +17576,7 @@ const ParticleSystemLifetimeProperties = (props) => {
     const lifeTimeGradientsGetter = useCallback(() => system.getLifeTimeGradients(), [system]);
     const lifeTimeGradients = useObservableArray(system, lifeTimeGradientsGetter, "addLifeTimeGradient", "removeLifeTimeGradient", "forceRefreshGradients");
     const useLifeTimeGradients = (lifeTimeGradients?.length ?? 0) > 0;
-    const classes = useStyles$i();
+    const classes = useStyles$h();
     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 }), isCpuParticleSystem && !useLifeTimeGradients && (jsx(ButtonLine, { label: "Use Lifetime gradients", onClick: () => {
                     system.addLifeTimeGradient(0, system.minLifeTime, system.maxLifeTime);
                     system.forceRefreshGradients();
@@ -17582,7 +17596,7 @@ const ParticleSystemLifetimeProperties = (props) => {
                         } })] })), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Target stop duration", target: system, propertyKey: "targetStopDuration", min: 0, step: 0.1 })] }));
 };
 
-const useStyles$h = makeStyles({
+const useStyles$g = makeStyles({
     subsection: {
         marginTop: tokens.spacingVerticalM,
     },
@@ -17609,7 +17623,7 @@ const ParticleSystemColorProperties = (props) => {
     const hasRampGradients = (rampGradients?.length ?? 0) > 0;
     const hasColorRemapGradients = (colorRemapGradients?.length ?? 0) > 0;
     const hasAlphaRemapGradients = (alphaRemapGradients?.length ?? 0) > 0;
-    const classes = useStyles$h();
+    const classes = useStyles$g();
     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);
@@ -17681,7 +17695,7 @@ const ParticleSystemColorProperties = (props) => {
                                 } })] }))] }))] }));
 };
 
-const useStyles$g = makeStyles({
+const useStyles$f = makeStyles({
     subsection: {
         marginTop: tokens.spacingVerticalM,
     },
@@ -17696,7 +17710,7 @@ const ParticleSystemRotationProperties = (props) => {
     const angularSpeedGradientsGetter = useCallback(() => system.getAngularSpeedGradients(), [system]);
     const angularSpeedGradients = useObservableArray(system, angularSpeedGradientsGetter, "addAngularSpeedGradient", "removeAngularSpeedGradient", "forceRefreshGradients");
     const useAngularSpeedGradients = (angularSpeedGradients?.length ?? 0) > 0;
-    const classes = useStyles$g();
+    const classes = useStyles$f();
     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();
@@ -17802,7 +17816,7 @@ const AttractorComponent = (props) => {
                 } }), !attractorData.isReadOnly && (jsx(ToggleButton, { title: "Add / remove position gizmo from particle attractor", checkedIcon: ArrowMoveFilled, value: isControlled(impostor), onChange: (control) => onControl(control ? impostor : undefined) }))] }));
 };
 
-const useStyles$f = makeStyles({
+const useStyles$e = makeStyles({
     subsection: {
         marginTop: tokens.spacingVerticalM,
     },
@@ -17859,7 +17873,7 @@ const AttractorList = (props) => {
         gizmoManager.attachToMesh(attached);
         setControlledImpostor(attached);
     };
-    const classes = useStyles$f();
+    const classes = useStyles$e();
     return (jsxs(Fragment, { children: [items.length > 0 && (jsxs(Fragment, { children: [jsx(Color3PropertyLine, { label: "Attractor Debug Color", value: impostorColor, onChange: setImpostorColor }), jsx(SyncedSliderPropertyLine, { label: "Attractor Debug Size", value: impostorScale, onChange: setImpostorScale, min: 0, max: 10, step: 0.1 }), jsx(Subtitle2, { className: classes.subsection, children: "Attractors list" })] })), jsx(List, { addButtonLabel: `Add New Attractor`, items: items, onDelete: attractorSource.removeAttractor
                     ? (item, _index) => {
                         // Only CPU attractors (Attractor instances) can be removed
@@ -17969,7 +17983,7 @@ const ParticleSystemAttractorProperties = (props) => {
     return (jsx(Fragment, { children: scene ? (jsx(AttractorList, { attractorSource: attractorSource, scene: scene })) : (jsx(MessageBar, { intent: "info", title: "No Scene Available", message: "Cannot display attractors without a scene" })) }));
 };
 
-const useStyles$e = makeStyles({
+const useStyles$d = makeStyles({
     subsection: {
         marginTop: tokens.spacingVerticalM,
     },
@@ -18023,7 +18037,7 @@ const InputBlockPropertyLine = (props) => {
  */
 const ParticleSystemNodeEditorProperties = (props) => {
     const { particleSystem: system } = props;
-    const classes = useStyles$e();
+    const classes = useStyles$d();
     const source = system.source;
     const inputBlocks = useObservableState(useCallback(() => {
         if (!source) {
@@ -18884,14 +18898,14 @@ const SkeletonPropertiesServiceDefinition = {
     },
 };
 
-const useStyles$d = makeStyles({
+const useStyles$c = makeStyles({
     uniformWidth: {
         ...UniformWidthStyling,
     },
 });
 const SpinButtonPropertyLine = (props) => {
     SpinButtonPropertyLine.displayName = "SpinButtonPropertyLine";
-    const classes = useStyles$d();
+    const classes = useStyles$c();
     return (jsx(PropertyLine, { ...props, children: jsx(SpinButton, { ...props, className: mergeClasses(classes.uniformWidth, props.className) }) }));
 };
 
@@ -19139,7 +19153,7 @@ function _TextureFormatHasNoAlpha(format) {
     }
 }
 
-const useStyles$c = makeStyles({
+const useStyles$b = makeStyles({
     root: {
         display: "flex",
         flexDirection: "column",
@@ -19191,7 +19205,7 @@ const TextureChannelStates = {
  */
 const TexturePreview = (props) => {
     const { texture, disableToolbar = false, maxWidth = "100%", maxHeight = "384px", offsetX = 0, offsetY = 0, width, height, imperativeRef } = props;
-    const classes = useStyles$c();
+    const classes = useStyles$b();
     const canvasRef = useRef(null);
     const [channels, setChannels] = useState(TextureChannelStates.ALL);
     const [face, setFace] = useState(0);
@@ -20101,7 +20115,7 @@ class TextureCanvasManager {
     }
 }
 
-const useStyles$b = makeStyles({
+const useStyles$a = makeStyles({
     channelsBar: {
         display: "flex",
         flexDirection: "column",
@@ -20146,7 +20160,7 @@ const useStyles$b = makeStyles({
  */
 const ChannelsBar = (props) => {
     const { channels, setChannels } = props;
-    const classes = useStyles$b();
+    const classes = useStyles$a();
     const toggleVisibility = useCallback((index) => {
         const newChannels = [...channels];
         newChannels[index] = { ...newChannels[index], visible: !newChannels[index].visible };
@@ -20176,7 +20190,7 @@ const ChannelsBar = (props) => {
         }) }));
 };
 
-const useStyles$a = makeStyles({
+const useStyles$9 = makeStyles({
     propertiesBar: {
         display: "flex",
         backgroundColor: tokens.colorNeutralBackground1,
@@ -20226,7 +20240,7 @@ const useStyles$a = makeStyles({
     },
 });
 const PixelDataDisplay = ({ label, value }) => {
-    const classes = useStyles$a();
+    const classes = useStyles$9();
     return (jsxs("span", { className: classes.pixelData, children: [jsxs(Label, { className: classes.pixelDataLabel, children: [label, ":"] }), jsx(Label, { className: classes.pixelDataValue, children: value !== undefined ? value : "-" })] }));
 };
 const CubeFaces = ["+X", "-X", "+Y", "-Y", "+Z", "-Z"];
@@ -20237,7 +20251,7 @@ const CubeFaces = ["+X", "-X", "+Y", "-Y", "+Z", "-Z"];
  */
 const PropertiesBar = (props) => {
     const { texture, size, saveTexture, pixelData, face, setFace, resetTexture, resizeTexture, uploadTexture, mipLevel, setMipLevel } = props;
-    const classes = useStyles$a();
+    const classes = useStyles$9();
     const uploadInputRef = useRef(null);
     const [width, setWidth] = useState(size.width);
     const [height, setHeight] = useState(size.height);
@@ -20272,7 +20286,7 @@ const PropertiesBar = (props) => {
     return (jsxs("div", { className: classes.propertiesBar, children: [jsxs("div", { className: classes.section, children: [jsx(Label, { children: "W:" }), jsx(Input, { className: classes.dimensionInput, size: "small", type: "text", value: width.toString(), readOnly: texture.isCube, onChange: (_, data) => setWidth(getNewDimension(width, data.value)) }), jsx(Label, { children: "H:" }), jsx(Input, { className: classes.dimensionInput, size: "small", type: "text", value: height.toString(), readOnly: texture.isCube, onChange: (_, data) => setHeight(getNewDimension(height, data.value)) }), !texture.isCube && (jsx(Tooltip$1, { content: "Resize", relationship: "label", children: jsx(ToolbarButton, { icon: jsx(ResizeRegular, {}), onClick: handleResize }) }))] }), jsx(ToolbarDivider, {}), jsxs("div", { className: classes.section, children: [jsx(PixelDataDisplay, { label: "X", value: pixelData.x }), jsx(PixelDataDisplay, { label: "Y", value: pixelData.y })] }), jsx(ToolbarDivider, {}), jsxs("div", { className: classes.section, children: [jsx(PixelDataDisplay, { label: "R", value: pixelData.r }), jsx(PixelDataDisplay, { label: "G", value: pixelData.g }), jsx(PixelDataDisplay, { label: "B", value: pixelData.b }), jsx(PixelDataDisplay, { label: "A", value: pixelData.a })] }), texture.isCube && (jsxs(Fragment, { children: [jsx(ToolbarDivider, {}), jsx(Toolbar$1, { size: "small", children: CubeFaces.map((label, index) => (jsx(ToolbarButton, { className: classes.faceButton, appearance: face === index ? "primary" : "subtle", onClick: () => setFace(index), children: label }, label))) })] })), mipsEnabled && (jsxs(Fragment, { children: [jsx(ToolbarDivider, {}), jsxs("div", { className: classes.section, children: [jsx(Label, { children: "MIP:" }), jsx(Tooltip$1, { content: "Mip Preview Up", relationship: "label", children: jsx(ToolbarButton, { icon: jsx(ChevronUpRegular, {}), disabled: mipLevel <= 0, onClick: () => setMipLevel(mipLevel - 1) }) }), jsx(Label, { children: mipLevel }), jsx(Tooltip$1, { content: "Mip Preview Down", relationship: "label", children: jsx(ToolbarButton, { icon: jsx(ChevronDownRegular, {}), disabled: mipLevel >= maxLevels, onClick: () => setMipLevel(mipLevel + 1) }) })] })] })), jsx("div", { className: classes.spacer }), jsxs(Toolbar$1, { size: "small", children: [jsx(Tooltip$1, { content: "Reset", relationship: "label", children: jsx(ToolbarButton, { icon: jsx(ArrowResetRegular, {}), onClick: resetTexture }) }), jsx(Tooltip$1, { content: "Upload", relationship: "label", children: jsx(ToolbarButton, { icon: jsx(ArrowUploadRegular, {}), onClick: handleUploadClick }) }), jsx("input", { ref: uploadInputRef, className: classes.uploadInput, type: "file", accept: ".jpg, .png, .tga, .dds, .env, .exr", onChange: handleFileChange }), jsx(Tooltip$1, { content: "Save", relationship: "label", children: jsx(ToolbarButton, { icon: jsx(SaveRegular, {}), onClick: saveTexture }) })] })] }));
 };
 
-const useStyles$9 = makeStyles({
+const useStyles$8 = makeStyles({
     statusBar: {
         display: "flex",
         backgroundColor: tokens.colorNeutralBackground1,
@@ -20300,14 +20314,14 @@ const useStyles$9 = makeStyles({
  */
 const StatusBar = (props) => {
     const { texture, mipLevel } = props;
-    const classes = useStyles$9();
+    const classes = useStyles$8();
     const factor = Math.pow(2, mipLevel);
     const width = Math.ceil(texture.getSize().width / factor);
     const height = Math.ceil(texture.getSize().height / factor);
     return (jsxs("div", { className: classes.statusBar, children: [jsx("span", { className: classes.fileName, children: texture.name }), !texture.noMipmap && (jsxs("span", { className: classes.mipInfo, children: ["MIP Preview: ", mipLevel, " (", width, "\u00D7", height, ")"] }))] }));
 };
 
-const useStyles$8 = makeStyles({
+const useStyles$7 = makeStyles({
     toolbar: {
         display: "flex",
         flexDirection: "column",
@@ -20344,7 +20358,7 @@ const useStyles$8 = makeStyles({
  */
 const ToolBar = (props) => {
     const { tools, changeTool, activeToolIndex, metadata, setMetadata, hasAlpha } = props;
-    const classes = useStyles$8();
+    const classes = useStyles$7();
     const computeRGBAColor = useCallback(() => {
         const opacityInt = Math.floor(metadata.alpha * 255);
         const opacityHex = opacityInt.toString(16).padStart(2, "0");
@@ -20373,7 +20387,7 @@ const ToolBar = (props) => {
                 }) })] }));
 };
 
-const useStyles$7 = makeStyles({
+const useStyles$6 = makeStyles({
     textureEditor: {
         display: "flex",
         flexDirection: "column",
@@ -20437,7 +20451,7 @@ const PREVIEW_UPDATE_DELAY_MS = 160;
  */
 const TextureEditor = (props) => {
     const { texture, toolProviders = [], window: editorWindow, onUpdate } = props;
-    const classes = useStyles$7();
+    const classes = useStyles$6();
     // Canvas refs
     const uiCanvasRef = useRef(null);
     const canvas2DRef = useRef(null);
@@ -20585,7 +20599,7 @@ const TextureEditor = (props) => {
     return (jsxs("div", { className: classes.textureEditor, children: [jsx(PropertiesBar, { texture: texture, saveTexture: saveTexture, pixelData: pixelData, face: face, setFace: setFace, resetTexture: resetTexture, resizeTexture: resizeTexture, uploadTexture: uploadTexture, mipLevel: mipLevel, setMipLevel: setMipLevel, size: canvasManagerRef.current?.size || size }), jsxs("div", { className: classes.mainContent, children: [jsxs("div", { className: classes.canvasContainer, style: { cursor }, children: [jsx("canvas", { ref: uiCanvasRef, className: classes.canvasUI, tabIndex: 1 }), jsx("canvas", { ref: canvas2DRef, className: classes.canvas2D }), jsx("canvas", { ref: canvas3DRef, className: classes.canvas3D })] }), CurrentToolSettings && (jsx("div", { className: classes.toolSettingsContainer, children: jsx(CurrentToolSettings, {}) })), !texture.isCube && (jsx("div", { className: classes.sidebarLeft, children: jsx(ToolBar, { tools: toolProviders, activeToolIndex: activeToolIndex, changeTool: changeTool, metadata: metadata, setMetadata: setMetadata, hasAlpha: hasAlpha }) })), jsx("div", { className: classes.sidebarRight, children: jsx(ChannelsBar, { channels: channels, setChannels: setChannels }) })] }), jsx(StatusBar, { texture: texture, mipLevel: mipLevel })] }));
 };
 
-const useStyles$6 = makeStyles({
+const useStyles$5 = makeStyles({
     settingsContainer: {
         display: "flex",
         flexDirection: "column",
@@ -20605,7 +20619,7 @@ const Contrast = {
     name: "Contrast/Exposure",
     order: 500,
     icon: () => {
-        const classes = useStyles$6();
+        const classes = useStyles$5();
         return jsx(CircleHalfFillRegular, { className: classes.icon });
     },
     is3D: true,
@@ -20670,7 +20684,7 @@ const Contrast = {
                 setContrast(0);
             },
             settingsComponent: () => {
-                const classes = useStyles$6();
+                const classes = useStyles$5();
                 const [contrast, exposure] = useObservableState(useCallback(() => [_contrast, _exposure], []), stateChangedObservable);
                 const handleContrastChange = (_, data) => {
                     setContrast(data.value);
@@ -20771,7 +20785,7 @@ const Floodfill = {
     },
 };
 
-const useStyles$5 = makeStyles({
+const useStyles$4 = makeStyles({
     settingsContainer: {
         display: "flex",
         flexDirection: "column",
@@ -20895,7 +20909,7 @@ const Paintbrush = {
                 pointerObserver?.remove();
             },
             settingsComponent: () => {
-                const classes = useStyles$5();
+                const classes = useStyles$4();
                 const width = useObservableState(useCallback(() => _width, []), stateChangedObservable);
                 const handleWidthChange = (_, data) => {
                     setWidth(data.value);
@@ -22889,74 +22903,1428 @@ const ExportServiceDefinition = {
     },
 };
 
-const useStyles$4 = makeStyles({
-    statusMessage: {
-        padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalS}`,
-        opacity: 0.7,
-    },
-    busyMessage: {
-        display: "flex",
-        alignItems: "center",
-        gap: tokens.spacingHorizontalXS,
-        padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalS}`,
-    },
-});
+const OverrideManagerKey = Symbol("babylonjs:overrideManager");
+const OverrideManagerInternals = new WeakMap();
+const OnOverrideManagerCreatedObservable = new Observable();
 /**
- * Save/load controls for a scene's Smart Asset map.
- * @param props - Component props.
- * @returns The Smart Asset map controls.
+ * Creates a new OverrideManager state object and attaches it to the scene.
+ *
+ * Internal: callers should use {@link GetOverrideManager} which returns the
+ * existing manager when one is already attached.
+ * @param scene - The scene this manager operates on.
+ * @returns The created override manager state.
  */
-const SmartAssetProjectTools = (props) => {
-    const { scene } = props;
-    const [statusMessage, setStatusMessage] = useState("");
-    const [busyMessage, setBusyMessage] = useState("");
-    const styles = useStyles$4();
-    const isBusy = busyMessage !== "";
-    const onSaveAssetMap = useCallback(async () => {
-        if (isBusy) {
-            return;
+function CreateOverrideManager(scene) {
+    const manager = {
+        scene,
+        onChangedObservable: new Observable(),
+    };
+    const internal = {
+        overrides: [],
+        originalValues: new Map(),
+        sceneDisposeObserver: null,
+    };
+    OverrideManagerInternals.set(manager, internal);
+    if (!scene.metadata) {
+        scene.metadata = {};
+    }
+    scene.metadata[OverrideManagerKey] = manager;
+    // Auto-dispose when the scene is disposed so the manager doesn't outlive it.
+    internal.sceneDisposeObserver = scene.onDisposeObservable.add(() => DisposeOverrideManager(manager));
+    OnOverrideManagerCreatedObservable.notifyObservers(manager);
+    return manager;
+}
+/**
+ * Returns the OverrideManager attached to the given scene, creating and
+ * attaching one if none exists.
+ * @param scene - The scene to look up or attach a manager to.
+ * @returns The existing or newly created OverrideManager.
+ */
+function GetOverrideManager(scene) {
+    const existing = scene.metadata?.[OverrideManagerKey];
+    if (existing) {
+        return existing;
+    }
+    return CreateOverrideManager(scene);
+}
+/**
+ * Adds an override entry and immediately applies it.
+ * If an override with the same target coordinates already exists, it is replaced.
+ *
+ * When the caller has already mutated the target (e.g. an Inspector edit),
+ * pass `{ originalValue }` containing the property's prior value — this seeds
+ * the original-value map (so {@link RemoveOverride} can restore it) and skips
+ * the redundant apply step.
+ * @param scene - The scene whose override registry to update.
+ * @param entry - The override to add.
+ * @param options - Optional behavior modifiers; see {@link AddOverrideOptions}.
+ */
+function AddOverride(scene, entry, options) {
+    const manager = GetOverrideManager(scene);
+    const internal = GetOverrideInternals(manager);
+    RemoveMatchingOverride(internal, entry.targetType, entry.targetName, entry.targetIndex, entry.propertyPath);
+    internal.overrides.push(entry);
+    if (options && "originalValue" in options) {
+        // Caller already applied the new value. Seed the captured original from
+        // their pre-edit snapshot — otherwise ApplyOverrideEntry would capture
+        // the post-edit value and RemoveOverride would have nothing to restore.
+        const origKey = MakeOriginalValueKey(entry.targetType, entry.targetName, entry.targetIndex, entry.propertyPath);
+        if (!internal.originalValues.has(origKey)) {
+            internal.originalValues.set(origKey, CloneValue(options.originalValue));
         }
-        setBusyMessage("Saving assets...");
-        setStatusMessage("");
-        try {
-            const assetMap = SerializeSmartAssetManagerMap(scene);
-            const jsonBlob = new Blob([JSON.stringify(assetMap, null, 2)], { type: "application/json" });
-            Tools.Download(jsonBlob, "smart-assets.json");
-            setStatusMessage(`Saved: ${Object.keys(assetMap.assets).length} assets`);
+    }
+    else {
+        ApplyOverrideEntry(manager, internal, entry);
+    }
+    manager.onChangedObservable.notifyObservers();
+}
+/**
+ * Returns all overrides currently registered with the scene.
+ * @param scene - The scene whose override registry to read.
+ * @returns A read-only array of override entries.
+ */
+function GetOverrides(scene) {
+    return GetOverrideInternals(GetOverrideManager(scene)).overrides;
+}
+/**
+ * Removes all overrides, optionally restoring original values.
+ * @param scene - The scene whose override registry to clear.
+ * @param restoreOriginals - If true, restores all captured original values.
+ */
+function ClearOverrides(scene, restoreOriginals = false) {
+    const manager = GetOverrideManager(scene);
+    const internal = GetOverrideInternals(manager);
+    if (restoreOriginals) {
+        // Snapshot the entries so we can restore each original without firing
+        // an onChangedObservable notification per entry; consumers only need
+        // one signal that the registry was emptied.
+        const entries = [...internal.overrides];
+        internal.overrides.length = 0;
+        for (const entry of entries) {
+            const origKey = MakeOriginalValueKey(entry.targetType, entry.targetName, entry.targetIndex, entry.propertyPath);
+            const original = internal.originalValues.get(origKey);
+            if (original !== undefined) {
+                const target = ResolveTarget(manager.scene, entry.targetType, entry.targetName, entry.targetIndex);
+                if (target) {
+                    SetNestedProperty(target, entry.propertyPath, original);
+                }
+            }
         }
-        catch (err) {
-            setStatusMessage(`Save error: ${err}`);
+        internal.originalValues.clear();
+        manager.onChangedObservable.notifyObservers();
+        return;
+    }
+    internal.overrides.length = 0;
+    internal.originalValues.clear();
+    manager.onChangedObservable.notifyObservers();
+}
+/**
+ * Updates the target coordinates on the override matching a specific (type,
+ * old-name, old-index) so it follows an entity rename. Used by capture services
+ * to keep overrides attached to a specific object after the user renames it.
+ *
+ * Only the override at the exact `(targetType, oldName, oldIndex)` slot is
+ * updated, so other same-named siblings keep their own overrides untouched.
+ *
+ * @param scene - The scene whose override registry to update.
+ * @param targetType - The target type.
+ * @param oldName - The previous name of the renamed entity.
+ * @param oldIndex - The previous index of the renamed entity among same-named siblings.
+ * @param newName - The new name of the renamed entity.
+ * @param newIndex - The new index of the renamed entity among same-named siblings.
+ */
+function RenameOverrideTarget(scene, targetType, oldName, oldIndex, newName, newIndex) {
+    const manager = GetOverrideManager(scene);
+    const internal = GetOverrideInternals(manager);
+    let changed = false;
+    for (let i = 0; i < internal.overrides.length; i++) {
+        const entry = internal.overrides[i];
+        if (entry.targetType === targetType && entry.targetName === oldName && entry.targetIndex === oldIndex) {
+            internal.overrides[i] = { ...entry, targetName: newName, targetIndex: newIndex };
+            changed = true;
+        }
+    }
+    // Update original-value keys to match the new identity
+    const oldPrefix = `${targetType}::${oldName}::${oldIndex}::`;
+    const newPrefix = `${targetType}::${newName}::${newIndex}::`;
+    for (const [origKey, value] of Array.from(internal.originalValues.entries())) {
+        if (origKey.startsWith(oldPrefix)) {
+            const propertyPath = origKey.substring(oldPrefix.length);
+            internal.originalValues.set(newPrefix + propertyPath, value);
+            internal.originalValues.delete(origKey);
+        }
+    }
+    if (changed) {
+        manager.onChangedObservable.notifyObservers();
+    }
+}
+/**
+ * Rewrites override *values* that reference an entity by name when that entity
+ * has been renamed. Mirrors {@link RenameOverrideTarget} but operates on the
+ * `value` field rather than the `targetName` field, so overrides whose value
+ * is `"ref:oldName"` (material/light/camera references) or `"texture:oldName"`
+ * (non-SmartAsset texture references) follow the rename instead of silently
+ * pointing at a non-existent entity.
+ *
+ * SmartAsset texture references (`"samTexture:<key>"`) are unaffected because
+ * the SmartAsset key is decoupled from the texture's runtime `name` field.
+ *
+ * @param scene - The scene whose override registry to update.
+ * @param valueScheme - Which encoded-reference prefix to rewrite: `"ref"` for
+ * material/light/camera references, `"texture"` for non-SAM textures.
+ * @param oldName - The previous name embedded in the reference.
+ * @param newName - The new name embedded in the reference.
+ */
+function RenameOverrideValueReferences(scene, valueScheme, oldName, newName) {
+    if (oldName === newName) {
+        return;
+    }
+    const manager = GetOverrideManager(scene);
+    const internal = GetOverrideInternals(manager);
+    const oldValue = `${valueScheme}:${oldName}`;
+    const newValue = `${valueScheme}:${newName}`;
+    let changed = false;
+    for (let i = 0; i < internal.overrides.length; i++) {
+        const entry = internal.overrides[i];
+        if (entry.value === oldValue) {
+            internal.overrides[i] = { ...entry, value: newValue };
+            changed = true;
         }
-        finally {
-            setBusyMessage("");
+    }
+    if (changed) {
+        manager.onChangedObservable.notifyObservers();
+    }
+}
+// ── Application ──
+/**
+ * Applies all overrides to their current targets in the scene.
+ *
+ * Call this after any scene mutation that might have invalidated previously
+ * applied state (asset reload, object recreation, project load). The override
+ * manager does not auto-subscribe to other scene subsystems — coordination is
+ * the caller's responsibility, which keeps the override system independent.
+ * @param scene - The scene whose overrides to apply.
+ */
+function ApplyAllOverrides(scene) {
+    const manager = GetOverrideManager(scene);
+    const internal = GetOverrideInternals(manager);
+    for (const entry of internal.overrides) {
+        ApplyOverrideEntry(manager, internal, entry);
+    }
+}
+// ── Serialization ──
+/**
+ * Serializes all overrides to a JSON-compatible array.
+ * The on-disk shape is identical to the in-memory `IOverrideEntry`.
+ * @param scene - The scene whose overrides to serialize.
+ * @returns An array of override entries (shallow copies).
+ */
+function SerializeOverrides(scene) {
+    const internal = GetOverrideInternals(GetOverrideManager(scene));
+    return internal.overrides.map((o) => ({ ...o }));
+}
+/**
+ * Loads overrides from a serialized array and applies them.
+ * @param scene - The scene whose override registry to populate.
+ * @param data - Array of override entries.
+ */
+function DeserializeAndApplyOverrides(scene, data) {
+    if (!Array.isArray(data)) {
+        throw new Error("OverrideManager: Expected an array of override entries.");
+    }
+    for (const entry of data) {
+        if (!entry.targetType || entry.targetName === undefined || typeof entry.targetIndex !== "number" || !entry.propertyPath || entry.value === undefined) {
+            Logger.Warn("OverrideManager: Skipping invalid override entry.");
+            continue;
         }
-    }, [scene, isBusy]);
-    const onLoadAssetMap = useCallback(async (files) => {
-        const file = files[0];
-        if (!file) {
-            return;
+        AddOverride(scene, entry);
+    }
+}
+// ── Lifecycle ──
+/**
+ * Disposes the manager, clearing all overrides and detaching it from its scene.
+ * Safe to call multiple times; subsequent calls are no-ops. Automatically invoked when the
+ * owning scene is disposed.
+ * @param manager - The override manager state.
+ */
+function DisposeOverrideManager(manager) {
+    const internal = OverrideManagerInternals.get(manager);
+    if (!internal) {
+        return;
+    }
+    OverrideManagerInternals.delete(manager);
+    if (internal.sceneDisposeObserver) {
+        manager.scene.onDisposeObservable.remove(internal.sceneDisposeObserver);
+        internal.sceneDisposeObserver = null;
+    }
+    internal.overrides.length = 0;
+    internal.originalValues.clear();
+    manager.onChangedObservable.clear();
+    if (manager.scene.metadata) {
+        delete manager.scene.metadata[OverrideManagerKey];
+    }
+}
+// ── Private ──
+function GetOverrideInternals(manager) {
+    const internal = OverrideManagerInternals.get(manager);
+    if (!internal) {
+        throw new Error("OverrideManager: Unknown manager state.");
+    }
+    return internal;
+}
+/**
+ * Applies a single override entry to its target, capturing the original value
+ * on the first application so {@link RemoveOverride} can restore it later.
+ * @param manager - The override manager owning the entry.
+ * @param internal - The manager's internal state.
+ * @param entry - The override to apply.
+ */
+function ApplyOverrideEntry(manager, internal, entry) {
+    const target = ResolveTarget(manager.scene, entry.targetType, entry.targetName, entry.targetIndex);
+    if (!target) {
+        Logger.Warn(`OverrideManager: target not found for type="${entry.targetType}" name="${entry.targetName}" index=${entry.targetIndex} prop="${entry.propertyPath}"`);
+        return; // Target not loaded yet — override will be applied on next ApplyAllOverrides
+    }
+    // Capture original value before first override
+    const origKey = MakeOriginalValueKey(entry.targetType, entry.targetName, entry.targetIndex, entry.propertyPath);
+    if (!internal.originalValues.has(origKey)) {
+        const currentValue = GetNestedProperty(target, entry.propertyPath);
+        if (currentValue !== undefined) {
+            internal.originalValues.set(origKey, CloneValue(currentValue));
         }
-        if (isBusy) {
+    }
+    const resolvedValue = ResolveOverrideValue(manager.scene, entry.value);
+    SetNestedProperty(target, entry.propertyPath, resolvedValue);
+}
+/**
+ * Locates a scene object by (targetType, targetName, targetIndex). The scene
+ * collection is filtered to objects matching `targetName`; the N-th survivor
+ * (per `targetIndex`) is returned. Falls back to the first match if the index
+ * is out of range — useful when the scene shape has changed since capture.
+ * @param scene - The scene to search.
+ * @param targetType - The override target type.
+ * @param targetName - The target object name (or "" for scene-level).
+ * @param targetIndex - The target's position among same-named siblings.
+ * @returns The matching scene object, or null if not found.
+ */
+function ResolveTarget(scene, targetType, targetName, targetIndex) {
+    // Scene-level overrides target the scene itself
+    if (targetType === "scene") {
+        return scene;
+    }
+    const collection = GetCollection$1(scene, targetType);
+    if (!collection) {
+        return null;
+    }
+    const matches = collection.filter((obj) => obj.name === targetName);
+    if (matches.length === 0) {
+        return null;
+    }
+    return (matches[targetIndex] ?? matches[0]);
+}
+/**
+ * Returns the scene collection corresponding to an override target type.
+ * @param scene - The scene to inspect.
+ * @param targetType - The target type.
+ * @returns The collection, or null if the type has no collection.
+ */
+function GetCollection$1(scene, targetType) {
+    switch (targetType) {
+        case "meshes":
+            return scene.meshes;
+        case "materials":
+            return scene.materials;
+        case "textures":
+            return scene.textures;
+        case "lights":
+            return scene.lights;
+        case "cameras":
+            return scene.cameras;
+        case "animationGroups":
+            return scene.animationGroups;
+        default:
+            return null;
+    }
+}
+/**
+ * Resolves an override value, expanding string references like "ref:name",
+ * "samTexture:key", or "texture:name" into the actual scene object they refer to.
+ * @param scene - The scene used to look up references.
+ * @param value - The serialized override value.
+ * @returns The runtime value to assign to the target property.
+ */
+function ResolveOverrideValue(scene, value) {
+    if (typeof value === "string") {
+        if (value.startsWith("ref:")) {
+            return ResolveObjectReference(scene, value.substring(4));
+        }
+        if (value.startsWith("samTexture:")) {
+            return ResolveSamTextureReference(scene, value.substring(11));
+        }
+        if (value.startsWith("texture:")) {
+            return ResolveTextureReference(scene, value.substring(8));
+        }
+    }
+    // Number arrays are passed through as-is. SetNestedProperty will use
+    // the live target's `fromArray` method (Vector3, Color3, etc.) to push
+    // values in-place, preserving the math instance identity.
+    return value;
+}
+/**
+ * Resolves a "ref:name" value by looking up a material, light, or camera
+ * in the scene by name.
+ * @param scene - The scene to search.
+ * @param name - The object name to resolve.
+ * @returns The matching material, light, or camera, or undefined if not found.
+ */
+function ResolveObjectReference(scene, name) {
+    const mat = scene.materials.find((m) => m.name === name);
+    if (mat) {
+        return mat;
+    }
+    const light = scene.lights.find((l) => l.name === name);
+    if (light) {
+        return light;
+    }
+    const camera = scene.cameras.find((c) => c.name === name);
+    if (camera) {
+        return camera;
+    }
+    Logger.Warn(`OverrideManager: Object reference "${name}" not found in scene.`);
+    return undefined;
+}
+/**
+ * Resolves a "texture:name" value by looking up a texture in the scene by name.
+ * @param scene - The scene to search.
+ * @param name - The texture name to resolve.
+ * @returns The matching texture, or undefined if not found.
+ */
+function ResolveTextureReference(scene, name) {
+    const tex = scene.textures.find((t) => t.name === name);
+    if (tex) {
+        return tex;
+    }
+    Logger.Warn(`OverrideManager: Texture reference "${name}" not found.`);
+    return undefined;
+}
+/**
+ * Resolves a "samTexture:key" value by looking up a SmartAsset-tracked texture
+ * by its registry key. The SAM key is stable across save/load whereas the
+ * texture's `name` (for SAM textures, the blob URL) changes on every reload,
+ * so this is the only reliable way to round-trip texture references on
+ * user-uploaded SmartAsset textures.
+ * @param scene - The scene to search.
+ * @param key - The SmartAsset key to resolve.
+ * @returns The matching texture, or undefined if not found.
+ */
+function ResolveSamTextureReference(scene, key) {
+    const tex = scene.textures.find((t) => FindSmartAssetKeyForObject(scene, t) === key);
+    if (tex) {
+        return tex;
+    }
+    Logger.Warn(`OverrideManager: SmartAsset texture "${key}" not found.`);
+    return undefined;
+}
+/**
+ * Finds the index of an override matching the given coordinates.
+ * @param internal - The manager's internal state.
+ * @param targetType - The target type.
+ * @param targetName - The target object name.
+ * @param targetIndex - The target index among same-named siblings.
+ * @param propertyPath - The property path.
+ * @returns The matching index, or -1 if none found.
+ */
+function FindOverrideIndex(internal, targetType, targetName, targetIndex, propertyPath) {
+    return internal.overrides.findIndex((o) => o.targetType === targetType && o.targetName === targetName && o.targetIndex === targetIndex && o.propertyPath === propertyPath);
+}
+/**
+ * Removes any existing override that matches the given coordinates. Used by
+ * {@link AddOverride} to enforce one entry per (type, name, index, property).
+ * @param internal - The manager's internal state.
+ * @param targetType - The target type.
+ * @param targetName - The target object name.
+ * @param targetIndex - The target index among same-named siblings.
+ * @param propertyPath - The property path.
+ */
+function RemoveMatchingOverride(internal, targetType, targetName, targetIndex, propertyPath) {
+    const idx = FindOverrideIndex(internal, targetType, targetName, targetIndex, propertyPath);
+    if (idx >= 0) {
+        internal.overrides.splice(idx, 1);
+    }
+}
+/**
+ * Creates a unique key for storing original values.
+ * @param targetType - The override target type.
+ * @param targetName - The target object name.
+ * @param targetIndex - The target index among same-named siblings.
+ * @param propertyPath - The property path.
+ * @returns A composite string key uniquely identifying the original value slot.
+ */
+function MakeOriginalValueKey(targetType, targetName, targetIndex, propertyPath) {
+    return `${targetType}::${targetName}::${targetIndex}::${propertyPath}`;
+}
+/**
+ * Gets a nested property from an object using a dot-separated path.
+ * @param obj - The root object to traverse.
+ * @param path - The dot-separated property path.
+ * @returns The value at the path, or undefined if any segment is missing.
+ */
+function GetNestedProperty(obj, path) {
+    const parts = path.split(".");
+    let current = obj;
+    for (const part of parts) {
+        if (current === null || current === undefined || typeof current !== "object") {
+            return undefined;
+        }
+        current = current[part];
+    }
+    return current;
+}
+/**
+ * Sets a nested property on an object using a dot-separated path.
+ *
+ * When the value is a number array and the existing property is a Babylon
+ * math type (Vector*, Quaternion, Color3/4, Matrix), uses the math type's
+ * `fromArray` method to mutate it in place — preserving the live instance
+ * identity that consumers may already hold references to. Otherwise falls
+ * back to direct property replacement.
+ * @param obj - The root object to mutate.
+ * @param path - The dot-separated property path.
+ * @param value - The new value to assign.
+ */
+function SetNestedProperty(obj, path, value) {
+    const parts = path.split(".");
+    let current = obj;
+    for (let i = 0; i < parts.length - 1; i++) {
+        if (current === null || current === undefined || typeof current !== "object") {
             return;
         }
-        setBusyMessage("Loading assets...");
-        setStatusMessage("");
+        current = current[parts[i]];
+    }
+    if (current === null || current === undefined || typeof current !== "object") {
+        return;
+    }
+    const lastPart = parts[parts.length - 1];
+    const existing = current[lastPart];
+    if (Array.isArray(value) && existing && typeof existing === "object" && typeof existing.fromArray === "function") {
+        existing.fromArray(value);
+        return;
+    }
+    current[lastPart] = value;
+}
+/**
+ * Snapshots a value for original-value tracking.
+ *
+ * Scene entities (textures, materials, meshes, etc.) are stored by reference
+ * because cloning them would register unwanted duplicates in the scene.
+ * Plain math types (Vector3, Color3, etc.) are cloned so mutations to the
+ * live object don't corrupt the saved original.
+ * @param value - The value to snapshot.
+ * @returns The snapshot value (cloned for plain math types, by reference for entities).
+ */
+function CloneValue(value) {
+    if (value === null || value === undefined) {
+        return value;
+    }
+    if (typeof value !== "object") {
+        return value;
+    }
+    if (typeof value.getScene === "function") {
+        return value;
+    }
+    if ("clone" in value && typeof value.clone === "function") {
+        return value.clone();
+    }
+    return { ...value };
+}
+
+/**
+ * Inspector service that captures property edits made through Inspector and
+ * feeds them to the OverrideManager as persistent overrides.
+ *
+ * Works on any scene object — overrides have no concept of "which asset"
+ * owns an object. When multiple objects share a name, an entity's position
+ * among same-named siblings (`targetIndex`) is captured so the override
+ * re-applies to the same object after reload.
+ *
+ * The service re-attaches to the current scene whenever it changes, so
+ * overrides are captured against the active scene even after loads/swaps.
+ */
+const OverrideCaptureServiceDefinition = {
+    friendlyName: "Override Capture",
+    consumes: [SceneContextIdentity, PropertiesServiceIdentity],
+    factory: (sceneContext, propertiesService) => {
+        // Track each entity's name + index at first contact so we can update
+        // existing overrides when the user renames the entity in Inspector.
+        // Re-created on each scene attach so identities don't leak across scenes.
+        let previousIdentity = new WeakMap();
+        let changeObserver = null;
+        function attachToScene(scene) {
+            if (changeObserver) {
+                changeObserver.remove();
+                changeObserver = null;
+            }
+            previousIdentity = new WeakMap();
+            if (!scene) {
+                return;
+            }
+            changeObserver = propertiesService.onPropertyChanged.add((changeInfo) => {
+                const { entity, propertyKey, oldValue, newValue } = changeInfo;
+                // When "name" changes, update the matching override so it follows the rename
+                // instead of creating a new (orphaned) one. Also rewrite any overrides
+                // whose *value* referenced this entity by name so cross-references
+                // (e.g. `mesh.material = ref:redMat`) survive the rename too.
+                if (propertyKey === "name" && typeof newValue === "string") {
+                    const targetType = ClassifyEntity(entity, scene);
+                    if (targetType !== null && targetType !== "scene") {
+                        const previous = previousIdentity.get(entity);
+                        if (previous && previous.name !== newValue) {
+                            // The entity already has the new name at this point, so compute its new index among same-named siblings.
+                            const newIndex = ComputeTargetIndex(scene, targetType, entity, newValue);
+                            RenameOverrideTarget(scene, targetType, previous.name, previous.index, newValue, newIndex);
+                            // Mirror the rename into override values that reference
+                            // this entity by name. SmartAsset textures use the
+                            // `samTexture:<key>` form and stay decoupled from the
+                            // texture's runtime name, so they don't need rewriting.
+                            const valueScheme = targetType === "textures" ? "texture" : "ref";
+                            RenameOverrideValueReferences(scene, valueScheme, previous.name, newValue);
+                        }
+                        previousIdentity.set(entity, { name: newValue, index: ComputeTargetIndex(scene, targetType, entity, newValue) });
+                    }
+                    return;
+                }
+                if (propertyKey === "id") {
+                    return;
+                }
+                let targetType = ClassifyEntity(entity, scene);
+                let targetName;
+                let targetIndex;
+                let propertyPath = String(propertyKey);
+                let targetEntity;
+                if (targetType !== null) {
+                    if (targetType === "scene") {
+                        targetName = "";
+                        targetIndex = 0;
+                        targetEntity = scene;
+                    }
+                    else {
+                        targetName = GetEntityName(entity);
+                        targetIndex = ComputeTargetIndex(scene, targetType, entity, targetName);
+                        targetEntity = entity;
+                    }
+                    // Seed identity on first contact so rename tracking works
+                    if (!previousIdentity.has(targetEntity) && targetName) {
+                        previousIdentity.set(targetEntity, { name: targetName, index: targetIndex });
+                    }
+                }
+                else {
+                    // Sub-object: check if this is a property of a known parent
+                    const parentInfo = FindParentEntity(entity, scene);
+                    if (!parentInfo) {
+                        return;
+                    }
+                    targetType = parentInfo.targetType;
+                    targetName = parentInfo.targetName;
+                    targetIndex = parentInfo.targetIndex;
+                    propertyPath = `${parentInfo.parentProperty}.${propertyPath}`;
+                }
+                const serializedValue = SerializeOverrideValueForCapture(newValue, scene);
+                if (serializedValue === undefined) {
+                    return;
+                }
+                // The Inspector binding has already written `newValue` to the
+                // entity, so pass `oldValue` so the manager can record the
+                // true pre-edit value (without this, RemoveOverride would have
+                // no record of the original and could not restore it).
+                AddOverride(scene, {
+                    targetType,
+                    targetName,
+                    targetIndex,
+                    propertyPath,
+                    value: serializedValue,
+                }, { originalValue: oldValue });
+            });
+        }
+        attachToScene(sceneContext.currentScene);
+        const sceneSubObserver = sceneContext.currentSceneObservable.add((scene) => attachToScene(scene));
+        return {
+            dispose: () => {
+                sceneSubObserver.remove();
+                if (changeObserver) {
+                    changeObserver.remove();
+                    changeObserver = null;
+                }
+            },
+        };
+    },
+};
+/**
+ * Classifies an entity into an OverrideTargetType by membership in the
+ * scene's standard collections (or by being the scene itself).
+ * @param entity - The entity to classify.
+ * @param scene - The scene to check collections against.
+ * @returns The target type, or null if unrecognized.
+ */
+function ClassifyEntity(entity, scene) {
+    if (entity === scene) {
+        return "scene";
+    }
+    const obj = entity;
+    if (!obj || typeof obj !== "object") {
+        return null;
+    }
+    if (scene.materials.includes(obj)) {
+        return "materials";
+    }
+    if (scene.meshes.includes(obj)) {
+        return "meshes";
+    }
+    if (scene.lights.includes(obj)) {
+        return "lights";
+    }
+    if (scene.cameras.includes(obj)) {
+        return "cameras";
+    }
+    if (scene.textures.includes(obj)) {
+        return "textures";
+    }
+    if (scene.animationGroups.includes(obj)) {
+        return "animationGroups";
+    }
+    return null;
+}
+/**
+ * Gets the name of a scene entity.
+ * @param entity - The entity to get the name from.
+ * @returns The entity name, or an empty string if unavailable.
+ */
+function GetEntityName(entity) {
+    const obj = entity;
+    return obj?.name ?? "";
+}
+/**
+ * Returns the position of `entity` among scene[targetType] objects with the
+ * same name. Used so overrides can disambiguate same-named siblings.
+ * @param scene - The scene to inspect.
+ * @param targetType - The target type / collection name.
+ * @param entity - The entity to locate.
+ * @param name - The name to filter by.
+ * @returns The index within the same-name filter, or 0 if not found.
+ */
+function ComputeTargetIndex(scene, targetType, entity, name) {
+    const collection = GetCollection(scene, targetType);
+    if (!collection) {
+        return 0;
+    }
+    const sameName = collection.filter((obj) => obj.name === name);
+    const idx = sameName.indexOf(entity);
+    return idx >= 0 ? idx : 0;
+}
+/**
+ * Returns the scene collection matching a target type.
+ * @param scene - The scene to inspect.
+ * @param targetType - The target type.
+ * @returns The collection, or null if `targetType` doesn't map to one.
+ */
+function GetCollection(scene, targetType) {
+    switch (targetType) {
+        case "meshes":
+            return scene.meshes;
+        case "materials":
+            return scene.materials;
+        case "textures":
+            return scene.textures;
+        case "lights":
+            return scene.lights;
+        case "cameras":
+            return scene.cameras;
+        case "animationGroups":
+            return scene.animationGroups;
+        default:
+            return null;
+    }
+}
+/**
+ * Serializes a property value into an OverrideValue.
+ * Returns undefined for unsupported types.
+ * @param value - The value to serialize.
+ * @param scene - Optional scene for resolving object references.
+ * @returns The serialized value, or undefined if unsupported.
+ */
+function SerializeOverrideValueForCapture(value, scene) {
+    // null is a legitimate override value (e.g. clearing a material slot) and
+    // must round-trip as null — substituting "" here would silently corrupt
+    // object-typed slots with an empty string on reload.
+    if (value === null) {
+        return null;
+    }
+    if (typeof value === "number" || typeof value === "string" || typeof value === "boolean") {
+        return value;
+    }
+    // Material reference → "ref:materialName"
+    if (value && typeof value === "object" && "getClassName" in value && typeof value.getClassName === "function") {
+        const className = value.getClassName();
+        if (className.includes("Material") || className.includes("material")) {
+            return `ref:${value.name}`;
+        }
+    }
+    // Texture reference → "samTexture:<key>" if SmartAsset-tracked, else "texture:<name>".
+    // The SAM key is stable across save/load; `texture.name` for a SAM-tracked
+    // texture is the blob URL, which dies on page reload — using it as the
+    // override identifier would break the override after every reload.
+    if (value && typeof value === "object" && "getClassName" in value && scene) {
+        const className = value.getClassName();
+        if (className.includes("Texture") || className.includes("texture")) {
+            const samKey = FindSmartAssetKeyForObject(scene, value);
+            if (samKey !== undefined) {
+                return `samTexture:${samKey}`;
+            }
+            return `texture:${value.name}`;
+        }
+    }
+    // Color3 / Color4
+    if (value && typeof value === "object" && "r" in value && "g" in value && "b" in value) {
+        const color = value;
+        if ("a" in color && color.a !== undefined) {
+            return [color.r, color.g, color.b, color.a];
+        }
+        return [color.r, color.g, color.b];
+    }
+    // Vector3 / Vector4
+    if (value && typeof value === "object" && "x" in value && "y" in value && "z" in value) {
+        const vec = value;
+        if ("w" in vec && vec.w !== undefined) {
+            return [vec.x, vec.y, vec.z, vec.w];
+        }
+        return [vec.x, vec.y, vec.z];
+    }
+    // Vector2
+    if (value && typeof value === "object" && "x" in value && "y" in value && !("z" in value)) {
+        const vec2 = value;
+        return [vec2.x, vec2.y];
+    }
+    return undefined;
+}
+/**
+ * Checks if an entity is a sub-object of a known scene entity by scanning
+ * well-known sub-object properties on the scene and its collections.
+ * Returns the parent entity info with the property path prefix.
+ * @param entity - The entity to search for.
+ * @param scene - The scene to search in.
+ * @returns The parent entity info, or null if not found.
+ */
+function FindParentEntity(entity, scene) {
+    // Check scene sub-objects (imageProcessingConfiguration, fogSettings, etc.)
+    const sceneSubProps = ["imageProcessingConfiguration", "postProcessRenderPipelineManager", "ambientColor", "gravity"];
+    for (const prop of sceneSubProps) {
+        if (scene[prop] === entity) {
+            return { targetType: "scene", targetName: "", targetIndex: 0, parentProperty: prop };
+        }
+    }
+    const collections = [
+        { type: "materials", items: scene.materials },
+        { type: "cameras", items: scene.cameras },
+        { type: "meshes", items: scene.meshes },
+        { type: "lights", items: scene.lights },
+    ];
+    for (const { type, items } of collections) {
+        for (const parent of items) {
+            for (const prop of Object.keys(parent)) {
+                if (prop.startsWith("_")) {
+                    continue;
+                }
+                try {
+                    if (parent[prop] === entity) {
+                        const targetIndex = items.filter((p) => p.name === parent.name).indexOf(parent);
+                        return { targetType: type, targetName: parent.name, targetIndex: Math.max(targetIndex, 0), parentProperty: prop };
+                    }
+                }
+                catch {
+                    // Skip properties that throw on access
+                }
+            }
+        }
+    }
+    return null;
+}
+
+// Side-effect import: registers the `.babylon` SceneLoader plugin so the
+// companion `.babylon` file produced by SerializeProject can be loaded back.
+// Without this, LoadAssetContainerAsync logs "Unable to find a plugin to
+// load .babylon files" and the companion load fails.
+/**
+ * ## `.babylonproj` project file format
+ *
+ * The `.babylonproj` zip on disk packages three layers:
+ * 1. **SmartAsset registry** — URL references to external assets (glb/gltf/textures
+ *    loaded via SAM). Local blob/data assets are bundled inside the zip and
+ *    extracted to fresh blob URLs on load.
+ * 2. **OverrideManager state** — declarative property overrides applied after load.
+ * 3. **Companion `.babylon`** — meshes, lights, cameras, transform nodes, and
+ *    materials that are *not* tracked by SAM (i.e. user-created scene content).
+ *    Plus a `companionBindings` side table mapping material texture slots back
+ *    to SAM-tracked textures so re-attachment works without embedding texture
+ *    bytes in the companion.
+ *
+ * ### What round-trips cleanly
+ * - SAM-tracked assets (re-fetched from their URLs or extracted from the zip)
+ * - User-created `Mesh` geometry, `Material`s (Standard/PBR/Multi/Node), and
+ *   `*Texture` slot bindings to SAM textures
+ * - `Light`s, `Camera`s, `TransformNode`s, scene/material image processing,
+ *   clear color, fog, environment intensity
+ * - Property overrides on any of the above
+ *
+ * ### Known gaps (not preserved on save/load)
+ * - `PostProcess` attachments to cameras (a post-process attaches to a *specific*
+ *   camera instance; we dispose+recreate cameras, leaving post-processes orphaned).
+ * - `AdvancedDynamicTexture` GUI controls — not in `.babylon` format.
+ * - Audio (`Sound` / `AudioEngine` state).
+ * - Particle systems with runtime state, baked vertex animations.
+ * - Complex shader-driven content like GaussianSplatting: the mesh round-trips
+ *   but its companion utility materials (`gaussianSplattingDepth`, `ProxyMaterial`)
+ *   get duplicated on each load cycle.
+ * - Skeleton animation playback state.
+ *
+ * If you hit a "the scene looks different after load" issue, it's almost
+ * certainly one of the gaps above rather than camera or mesh state drift.
+ */
+/**
+ * Reserved smart asset key for user-created objects (materials, lights, cameras)
+ * that are persisted as a companion `.babylon` file alongside the project JSON.
+ */
+const ProjectLocalsKey = "__project_locals__";
+// ── JSON layer (scene ↔ ISerializedProject) ──
+/**
+ * Serializes a scene's smart asset map and override registry into a project
+ * bundle. User-created objects (materials, lights, cameras not owned by any
+ * smart asset) are serialized into a companion `.babylon` file rather than
+ * embedded in the project JSON.
+ *
+ * Both managers are looked up (and created if missing) via their respective
+ * `Get…Manager(scene)` accessors, so this function can be called on any scene.
+ *
+ * @param scene - The scene to serialize.
+ * @param baseUrl - Optional base URL for making asset paths relative.
+ * @returns A project bundle containing the JSON document and optional companion file.
+ */
+function SerializeProject(scene, baseUrl) {
+    const assetMap = SerializeSmartAssetManagerMap(scene, baseUrl);
+    const overrides = SerializeOverrides(scene);
+    // Build a minimal .babylon JSON with only user-created objects, plus the
+    // texture-binding side table that records which SmartAsset textures should
+    // be re-attached to which material slots after load.
+    const companionResult = SerializeCompanionBabylon(scene);
+    let companionBabylon;
+    const assets = { ...assetMap.assets };
+    if (companionResult) {
+        companionBabylon = new Blob([JSON.stringify(companionResult.companion)], { type: "application/json" });
+        assets[ProjectLocalsKey] = { url: ProjectLocalsKey + ".babylon" };
+    }
+    else {
+        // Remove stale companion entry if no locals exist
+        delete assets[ProjectLocalsKey];
+    }
+    const hasBindings = companionResult && Object.keys(companionResult.bindings).length > 0;
+    const project = {
+        version: 2,
+        assets,
+        overrides,
+        ...(hasBindings ? { companionBindings: companionResult.bindings } : {}),
+    };
+    return { project, companionBabylon };
+}
+/**
+ * Loads a project file from a URL, File, or pre-parsed object.
+ * Registers all asset entries on the scene's SmartAssetManager, loads all
+ * assets (including the companion `.babylon` for user-created objects), then
+ * applies all overrides via the OverrideManager.
+ *
+ * For loading the `.babylonproj` zip on-disk format, use {@link LoadProjectFileAsync}
+ * instead — it extracts the zip and then calls this function with the embedded
+ * JSON document.
+ *
+ * @param scene - The scene to populate.
+ * @param source - A URL string, File object, or pre-parsed ISerializedProject.
+ * @param rootUrl - Optional root URL for resolving relative asset paths.
+ */
+async function LoadProjectAsync(scene, source, rootUrl) {
+    let resolvedRootUrl = "";
+    if (typeof source === "string" && true) {
+        const { Tools } = await import('@babylonjs/core/Misc/tools.js');
+        resolvedRootUrl = Tools.GetFolderPath(source);
+    }
+    const raw = await ReadJsonSourceAsync(source);
+    const doc = DeserializeProject(raw);
+    // Pause the engine's render loops for the duration of the swap. Disposing
+    // cameras mid-frame would throw "No camera defined" out of `scene.render`,
+    // which kills the render loop entirely (it is not re-queued after an
+    // uncaught exception). Snapshot the active loops first so we can restore
+    // exactly what was running, even if multiple callbacks were registered.
+    const engine = scene.getEngine();
+    const savedRenderLoops = [...engine.activeRenderLoops];
+    engine.stopRenderLoop();
+    try {
+        // Clear existing state so we load fresh from the project file.
+        // The companion `.babylon` (when present) is the source of truth for all
+        // user-created scene content, so dispose user-owned meshes, lights,
+        // cameras, materials, and animation groups before reloading.
+        await Promise.all(Array.from(GetAllSmartAssets(scene).keys()).map(async (existingKey) => await RemoveSmartAssetAsync(scene, existingKey)));
+        ClearOverrides(scene);
+        for (const mesh of [...scene.meshes]) {
+            mesh.dispose();
+        }
+        for (const tn of [...scene.transformNodes]) {
+            tn.dispose();
+        }
+        for (const ag of [...scene.animationGroups]) {
+            ag.dispose();
+        }
+        for (const mat of [...scene.materials]) {
+            mat.dispose();
+        }
+        for (const light of [...scene.lights]) {
+            light.dispose();
+        }
+        for (const camera of [...scene.cameras]) {
+            camera.dispose();
+        }
+        // Register all assets. Defer the companion .babylon — it must load after
+        // textures are available so binding re-attachment can find them.
+        let hasCompanion = false;
+        for (const [key, entry] of Object.entries(doc.assets)) {
+            if (key === ProjectLocalsKey) {
+                hasCompanion = true;
+                continue;
+            }
+            const resolved = resolvedRootUrl ? ResolveAssetUrl(entry.url, resolvedRootUrl) : entry.url;
+            RegisterSmartAsset(scene, key, resolved, { type: entry.type, extension: entry.extension, metadata: entry.metadata });
+        }
+        await LoadAllSmartAssetsAsync(scene);
+        // Now load the companion .babylon. Its materials were saved with texture
+        // slots stripped (the binding side table records which SmartAsset texture
+        // each slot should be re-attached to), so the loader never sees a broken
+        // texture URL. Pass the .babylon extension hint because blob URLs have
+        // no file extension.
+        if (hasCompanion) {
+            const companionEntry = doc.assets[ProjectLocalsKey];
+            const companionUrl = resolvedRootUrl ? ResolveAssetUrl(companionEntry.url, resolvedRootUrl) : companionEntry.url;
+            await LoadSmartAssetAsync(scene, ProjectLocalsKey, companionUrl, { extension: ".babylon" });
+            if (doc.companionBindings) {
+                ApplyCompanionBindings(scene, doc.companionBindings);
+            }
+        }
+        // Apply overrides
+        if (doc.overrides.length > 0) {
+            DeserializeAndApplyOverrides(scene, doc.overrides);
+        }
+        // Re-assign the active camera if the companion brought in fresh cameras.
+        // The .babylon scene loader populates scene.cameras but does not set
+        // scene.activeCamera, so render would otherwise throw "No camera defined".
+        if (!scene.activeCamera && scene.cameras.length > 0) {
+            scene.activeCamera = scene.cameras[0];
+        }
+        // Attach controls so the user can rotate/zoom/pan after load. New
+        // camera instances from the companion .babylon are not attached to
+        // the canvas by the loader — without this, the camera renders but
+        // ignores mouse/touch input.
+        const canvas = engine.getRenderingCanvas();
+        if (scene.activeCamera && canvas) {
+            scene.activeCamera.attachControl(canvas, true);
+        }
+    }
+    finally {
+        // Always restore the render loops, even if loading threw — otherwise
+        // the canvas stays frozen forever and the user has no way to recover.
+        for (const loop of savedRenderLoops) {
+            engine.runRenderLoop(loop);
+        }
+    }
+}
+/**
+ * Validates and parses a serialized project document.
+ * @param data - The raw data to validate (typically parsed JSON).
+ * @returns The validated project document.
+ * @throws If the data does not conform to the expected schema.
+ */
+function DeserializeProject(data) {
+    if (!data || typeof data !== "object") {
+        throw new Error("ProjectFile: Invalid project file — expected an object.");
+    }
+    const doc = data;
+    if (doc.version !== 2) {
+        throw new Error(`ProjectFile: Unsupported project version "${doc.version}". Expected version 2.`);
+    }
+    // Validate the asset map portion
+    DeserializeSmartAssetMap({ version: 1, assets: doc.assets });
+    // Validate overrides array
+    if (!Array.isArray(doc.overrides)) {
+        throw new Error("ProjectFile: Invalid project file — 'overrides' must be an array.");
+    }
+    // Validate optional companion bindings (shape-only check)
+    if (doc.companionBindings !== undefined) {
+        if (typeof doc.companionBindings !== "object" || doc.companionBindings === null || Array.isArray(doc.companionBindings)) {
+            throw new Error("ProjectFile: Invalid project file — 'companionBindings' must be an object.");
+        }
+    }
+    return data;
+}
+// ── Zip layer (.babylonproj on disk) ──
+/**
+ * Serializes a scene's project (smart assets + overrides) into a `.babylonproj`
+ * zip bundle.
+ *
+ * The zip contains:
+ * - `project.json` — the project document (assets + overrides)
+ * - `__project_locals__.babylon` — companion file for user-created objects (if any)
+ * - Bundled local asset files (blobs the user dragged in from disk)
+ *
+ * Remote URLs (http/https) are left as references and not bundled.
+ *
+ * @param scene - The scene to serialize.
+ * @returns A Blob containing the zip bundle.
+ */
+async function SaveProjectFileAsync(scene) {
+    const bundle = SerializeProject(scene);
+    const files = {};
+    // Collect local (blob/data URI) assets to bundle inside the zip.
+    // Rewrite their URLs in the project JSON to relative paths.
+    const projectAssets = { ...bundle.project.assets };
+    // Fetch all blob/data URIs in parallel (avoid serial awaits in a loop).
+    const blobEntries = Object.entries(projectAssets).filter(([key, entry]) => key !== ProjectLocalsKey && (entry.url.startsWith("blob:") || entry.url.startsWith("data:")));
+    const fetched = await Promise.all(blobEntries.map(async ([key, entry]) => {
         try {
-            await Promise.all(Array.from(GetAllSmartAssets(scene).keys()).map(async (key) => await RemoveSmartAssetAsync(scene, key)));
-            await LoadSmartAssetMapAsync(scene, file);
-            setStatusMessage(`Loaded: ${GetAllSmartAssets(scene).size} assets`);
+            const response = await fetch(entry.url);
+            const arrayBuffer = await response.arrayBuffer();
+            return { key, entry, arrayBuffer };
         }
-        catch (err) {
-            setStatusMessage(`Load error: ${err}`);
+        catch {
+            // Can't fetch blob — leave the URL as-is (will break on reload,
+            // but at least the project structure is preserved).
+            return null;
         }
-        finally {
-            setBusyMessage("");
+    }));
+    for (const result of fetched) {
+        if (!result) {
+            continue;
         }
-    }, [scene, isBusy]);
-    return (jsxs(Fragment, { children: [jsx(ButtonLine, { label: "Save Smart Assets", icon: ArrowDownloadRegular, onClick: onSaveAssetMap, disabled: isBusy }), jsx(FileUploadLine, { label: "Load Smart Assets", accept: ".json", onClick: onLoadAssetMap, disabled: isBusy }), jsx(Collapse, { visible: isBusy, children: jsxs("div", { className: styles.busyMessage, children: [jsx(Spinner, { size: "extra-small" }), jsx(Caption1, { children: busyMessage })] }) }), jsx(Collapse, { visible: statusMessage !== "", children: jsx(Caption1, { className: styles.statusMessage, children: statusMessage }) })] }));
-};
+        const { key, entry, arrayBuffer } = result;
+        const ext = GuessExtension(entry.url, IsTextureEntry(entry.url, entry.extension, entry.type));
+        const filename = `assets/${key}${ext}`;
+        files[filename] = new Uint8Array(arrayBuffer);
+        projectAssets[key] = { ...entry, url: filename };
+    }
+    // Add companion .babylon if it exists
+    if (bundle.companionBabylon) {
+        const companionBuffer = await bundle.companionBabylon.arrayBuffer();
+        const companionFilename = ProjectLocalsKey + ".babylon";
+        files[companionFilename] = new Uint8Array(companionBuffer);
+        projectAssets[ProjectLocalsKey] = { url: companionFilename };
+    }
+    // Write the project JSON with updated asset paths
+    const projectWithBundledPaths = {
+        ...bundle.project,
+        assets: projectAssets,
+    };
+    const { zip, strToU8 } = await import('./browser-CANgtOiM.js');
+    files["project.json"] = strToU8(JSON.stringify(projectWithBundledPaths, null, 2));
+    // Create the zip (async — runs in a Web Worker to avoid blocking the UI thread)
+    const zipped = await new Promise((resolve, reject) => {
+        zip(files, { level: 6 }, (err, data) => (err ? reject(err) : resolve(data)));
+    });
+    return new Blob([zipped], { type: "application/zip" });
+}
+/**
+ * Loads a `.babylonproj` zip bundle into a scene. Extracts all files, creates
+ * blob URLs for bundled assets, and loads the project through SAM.
+ *
+ * @param scene - The scene to load the project into.
+ * @param zipFile - The `.babylonproj` zip file to load.
+ */
+async function LoadProjectFileAsync(scene, zipFile) {
+    const arrayBuffer = await zipFile.arrayBuffer();
+    const { unzip, strFromU8 } = await import('./browser-CANgtOiM.js');
+    const extracted = await new Promise((resolve, reject) => {
+        unzip(new Uint8Array(arrayBuffer), (err, data) => (err ? reject(err) : resolve(data)));
+    });
+    // Parse project.json
+    const projectJsonBytes = extracted["project.json"];
+    if (!projectJsonBytes) {
+        throw new Error("ProjectFile: Invalid project bundle — missing project.json");
+    }
+    const projectJson = JSON.parse(strFromU8(projectJsonBytes));
+    // Create blob URLs for all bundled files and rewrite asset URLs
+    for (const [, entry] of Object.entries(projectJson.assets)) {
+        const filename = entry.url;
+        const fileBytes = extracted[filename];
+        if (fileBytes) {
+            const mimeType = GuessMimeType(filename);
+            // Use a named File so LoadAssetContainerAsync can detect the
+            // format from the filename (blob URLs alone have no extension).
+            const file = new File([fileBytes], filename, { type: mimeType });
+            const blobUrl = URL.createObjectURL(file);
+            entry.url = blobUrl;
+        }
+        // If no file found in zip, assume the URL is a remote reference — leave it as-is
+    }
+    // Load through the standard JSON path
+    await LoadProjectAsync(scene, projectJson);
+    // Note: textures and scene files may still reference the blob URLs created
+    // above, so we do NOT revoke them here. They'll be cleaned up when SAM disposes.
+}
+// ── Private ──
+/**
+ * Returns true if a scene object is a "local" — not owned by any external
+ * smart asset, or owned by the reserved `__project_locals__` key.
+ * @param scene - The scene that owns the object.
+ * @param obj - The scene object to check.
+ * @returns True if the object should be included in the companion file.
+ */
+function IsLocalObject(scene, obj) {
+    const key = FindSmartAssetKeyForObject(scene, obj);
+    return key === undefined || key === ProjectLocalsKey;
+}
+/**
+ * Builds a `.babylon`-compatible JSON containing all user-created scene
+ * content (meshes, lights, cameras, transform nodes, and materials not owned
+ * by any external smart asset), plus a side table recording which `*Texture`
+ * slots on each material should be re-attached to which SmartAsset textures
+ * after load.
+ *
+ * Mesh, light, camera, and standalone material serialization is delegated to
+ * `SceneSerializer.SerializeMesh`, which auto-handles geometries, sub-materials,
+ * and skeletons. Texture slots that map to a SmartAsset-tracked texture are
+ * stripped from the serialized material so the `.babylon` loader never sees a
+ * broken URL; the binding table is the sole source of truth for re-attachment.
+ *
+ * @param scene - The scene to extract locals from.
+ * @returns The companion document and binding table, or null if there are no local objects.
+ */
+function SerializeCompanionBabylon(scene) {
+    const meshes = scene.meshes.filter((m) => m instanceof Mesh && m.name !== "__root__" && IsLocalObject(scene, m));
+    const lights = scene.lights.filter((l) => IsLocalObject(scene, l));
+    const cameras = scene.cameras.filter((c) => IsLocalObject(scene, c));
+    const transformNodes = scene.transformNodes.filter((t) => IsLocalObject(scene, t));
+    // Standalone materials (not attached to any included mesh) need to be
+    // added explicitly — SerializeMesh only picks up materials reachable from
+    // the supplied meshes.
+    const meshMaterialIds = new Set(meshes.map((m) => m.material?.uniqueId).filter((id) => id !== undefined));
+    const standaloneMaterials = scene.materials.filter((mat) => mat.name !== "default material" && IsLocalObject(scene, mat) && !meshMaterialIds.has(mat.uniqueId));
+    if (meshes.length === 0 && lights.length === 0 && cameras.length === 0 && transformNodes.length === 0 && standaloneMaterials.length === 0) {
+        return null;
+    }
+    const companion = SceneSerializer.SerializeMesh([...meshes, ...lights, ...cameras, ...transformNodes], false, false);
+    const allMaterials = companion.materials ?? [];
+    companion.materials = allMaterials;
+    for (const mat of standaloneMaterials) {
+        const serialized = mat.serialize();
+        if (serialized && !allMaterials.some((m) => m.uniqueId === serialized.uniqueId)) {
+            allMaterials.push(serialized);
+        }
+    }
+    // Strip non-JSON-serializable metadata (e.g. metadata that references
+    // another scene object) to avoid `Converting circular structure to JSON`
+    // when the companion is stringified. Simple JSON metadata is preserved.
+    SanitizeMetadataInPlace(companion);
+    // Walk every serialized material (mesh-attached + standalone + multi-material
+    // children) and extract SmartAsset texture bindings, stripping those slots
+    // from the serialized data.
+    const bindings = {};
+    for (const serializedMat of allMaterials) {
+        const matBindings = ExtractTextureBindings(scene, serializedMat);
+        if (Object.keys(matBindings).length > 0 && typeof serializedMat.name === "string") {
+            bindings[serializedMat.name] = matBindings;
+        }
+    }
+    const multiMaterials = companion.multiMaterials ?? [];
+    for (const serializedMat of multiMaterials) {
+        const matBindings = ExtractTextureBindings(scene, serializedMat);
+        if (Object.keys(matBindings).length > 0 && typeof serializedMat.name === "string") {
+            bindings[serializedMat.name] = matBindings;
+        }
+    }
+    return { companion, bindings };
+}
+/**
+ * Walks the top-level entity arrays in a serialized companion document and
+ * strips `metadata` fields that cannot be JSON-stringified (typically because
+ * the user put a reference to another scene object in metadata). Simple
+ * JSON-serializable metadata is preserved.
+ * @param companion - The serialized companion document to mutate in-place.
+ */
+function SanitizeMetadataInPlace(companion) {
+    const arrays = ["meshes", "transformNodes", "lights", "cameras", "materials", "multiMaterials"];
+    for (const arrayKey of arrays) {
+        const arr = companion[arrayKey];
+        if (!Array.isArray(arr)) {
+            continue;
+        }
+        for (const item of arr) {
+            if (item && typeof item === "object" && "metadata" in item && item.metadata !== undefined) {
+                try {
+                    item.metadata = JSON.parse(JSON.stringify(item.metadata));
+                }
+                catch {
+                    delete item.metadata;
+                }
+            }
+        }
+    }
+}
+/**
+ * Walks a serialized material's `*Texture` slots and, for any that reference a
+ * SmartAsset-tracked texture, records a `{slot: samKey}` binding and removes
+ * the slot from the serialized data so the `.babylon` loader does not try to
+ * fetch the (now-dead) original URL.
+ * @param scene - The scene that owns the textures.
+ * @param serializedMaterial - The serialized material data to rewrite in-place.
+ * @returns A map of stripped slot names to their SmartAsset keys.
+ */
+function ExtractTextureBindings(scene, serializedMaterial) {
+    const bindings = {};
+    for (const [propName, propValue] of Object.entries(serializedMaterial)) {
+        if (!propName.endsWith("Texture") || typeof propValue !== "object" || propValue === null) {
+            continue;
+        }
+        const texData = propValue;
+        const texName = typeof texData.name === "string" ? texData.name : undefined;
+        const texUrl = typeof texData.url === "string" ? texData.url : undefined;
+        if (!texName && !texUrl) {
+            continue;
+        }
+        for (const tex of scene.textures) {
+            const key = FindSmartAssetKeyForObject(scene, tex);
+            if (key && (tex.name === texName || tex.url === texName || tex.name === texUrl || tex.url === texUrl)) {
+                bindings[propName] = key;
+                delete serializedMaterial[propName];
+                break;
+            }
+        }
+    }
+    return bindings;
+}
+/**
+ * Re-attaches SmartAsset-tracked textures to user-created material slots
+ * after the companion `.babylon` has loaded. Silently skips bindings whose
+ * material or texture is no longer present (e.g. the underlying SmartAsset
+ * was removed before reload).
+ * @param scene - The scene that owns the materials and textures.
+ * @param bindings - The binding table from the project document.
+ */
+function ApplyCompanionBindings(scene, bindings) {
+    for (const [materialName, slots] of Object.entries(bindings)) {
+        const mat = scene.materials.find((m) => m.name === materialName);
+        if (!mat) {
+            continue;
+        }
+        for (const [slotName, samKey] of Object.entries(slots)) {
+            const texture = scene.textures.find((tex) => FindSmartAssetKeyForObject(scene, tex) === samKey);
+            if (texture) {
+                mat[slotName] = texture;
+            }
+        }
+    }
+}
+/**
+ * Returns true if a serialized asset entry refers to a standalone texture,
+ * based on the registered options or the URL extension.
+ * @param url - The asset URL.
+ * @param extension - Optional explicit extension hint from the registration options.
+ * @param type - Optional explicit type from the registration options.
+ * @returns True if the entry should be treated as a texture.
+ */
+function IsTextureEntry(url, extension, type) {
+    if (type === "texture") {
+        return true;
+    }
+    const textureExts = GetSmartAssetTextureExtensions();
+    if (extension && textureExts.has(extension.toLowerCase())) {
+        return true;
+    }
+    const ext = ExtractExtension(url);
+    return ext !== "" && textureExts.has(ext);
+}
+/**
+ * Extracts the file extension (with leading dot, lowercased) from a URL,
+ * stripping query/hash and ignoring blob/data prefixes.
+ * @param url - The URL to inspect.
+ * @returns The extension including the leading dot, or "" if none found.
+ */
+function ExtractExtension(url) {
+    if (url.startsWith("blob:") || url.startsWith("data:")) {
+        return "";
+    }
+    const clean = url.split("?")[0].split("#")[0];
+    const lastDot = clean.lastIndexOf(".");
+    const lastSlash = Math.max(clean.lastIndexOf("/"), clean.lastIndexOf("\\"));
+    if (lastDot > lastSlash && lastDot >= 0) {
+        return clean.substring(lastDot).toLowerCase();
+    }
+    return "";
+}
+/**
+ * Guesses a file extension for a blob/data URL when bundling into the zip.
+ * @param url - The original URL.
+ * @param isTexture - Whether the key is known to be a texture.
+ * @returns A file extension including the dot (e.g. ".glb", ".png").
+ */
+function GuessExtension(url, isTexture) {
+    // Try to extract from data URI mime type
+    if (url.startsWith("data:")) {
+        const mimeMatch = url.match(/^data:([^;,]+)/);
+        if (mimeMatch) {
+            const ext = MimeToExtension(mimeMatch[1]);
+            if (ext) {
+                return ext;
+            }
+        }
+    }
+    return isTexture ? ".png" : ".glb";
+}
+// Tuple-array `Map`s rather than object literals so the MIME and extension
+// keys (e.g. "model/gltf-binary", ".glb") don't trigger the naming-convention
+// rule that runs on object-literal property names.
+const MimeToExtensionMap = new Map([
+    ["model/gltf-binary", ".glb"],
+    ["model/gltf+json", ".gltf"],
+    ["image/png", ".png"],
+    ["image/jpeg", ".jpg"],
+    ["image/webp", ".webp"],
+    ["application/octet-stream", ".glb"],
+    ["application/json", ".babylon"],
+]);
+const ExtensionToMimeMap = new Map([
+    [".glb", "model/gltf-binary"],
+    [".gltf", "model/gltf+json"],
+    [".babylon", "application/json"],
+    [".png", "image/png"],
+    [".jpg", "image/jpeg"],
+    [".jpeg", "image/jpeg"],
+    [".env", "application/octet-stream"],
+    [".hdr", "application/octet-stream"],
+    [".dds", "application/octet-stream"],
+    [".ktx", "application/octet-stream"],
+    [".ktx2", "application/octet-stream"],
+    [".json", "application/json"],
+]);
+/**
+ * Maps a MIME type to a file extension.
+ * @param mime - The MIME type string.
+ * @returns The file extension including the dot, or empty string if unknown.
+ */
+function MimeToExtension(mime) {
+    return MimeToExtensionMap.get(mime) ?? "";
+}
+/**
+ * Guesses a MIME type from a filename.
+ * @param filename - The filename to check.
+ * @returns The guessed MIME type string.
+ */
+function GuessMimeType(filename) {
+    const ext = filename.substring(filename.lastIndexOf(".")).toLowerCase();
+    return ExtensionToMimeMap.get(ext) ?? "application/octet-stream";
+}
 
-const SmartAssetsPaneKey$1 = "Smart Assets";
+const ProjectAuthoringPaneKey = "Project Authoring";
 const SceneFileAccept = [".glb", ".gltf", ".babylon", ".obj"];
 const TextureFileAccept = Array.from(GetSmartAssetTextureExtensions());
 const AllAcceptString = [...SceneFileAccept, ...TextureFileAccept].join(",");
@@ -22965,15 +24333,17 @@ function _isTextureExtension(ext) {
     return GetSmartAssetTextureExtensions().has(ext);
 }
 /**
- * Inspector pane service that hosts the Smart Assets pane.
+ * Inspector pane service that hosts the Project Authoring pane. Combines
+ * smart-asset management (assets list, asset map I/O) with override-driven
+ * scene authoring (material assignment, override summary).
  */
-const SmartAssetsServiceDefinition = {
-    friendlyName: "Smart Assets",
+const BabylonProjectAuthoringServiceDefinition = {
+    friendlyName: "Project Authoring",
     consumes: [ShellServiceIdentity, SceneContextIdentity, SelectionServiceIdentity],
     factory: (shellService, sceneContext, selectionService) => {
         const paneRegistration = shellService.addSidePane({
-            key: SmartAssetsPaneKey$1,
-            title: SmartAssetsPaneKey$1,
+            key: ProjectAuthoringPaneKey,
+            title: ProjectAuthoringPaneKey,
             icon: CubeRegular,
             horizontalLocation: "right",
             verticalLocation: "top",
@@ -22981,7 +24351,7 @@ const SmartAssetsServiceDefinition = {
             teachingMoment: false,
             content: () => {
                 const scene = useObservableState(() => sceneContext.currentScene, sceneContext.currentSceneObservable);
-                return scene ? jsx(SmartAssetsPane, { scene: scene, selectionService: selectionService }) : null;
+                return scene ? jsx(BabylonProjectAuthoringPane, { scene: scene, selectionService: selectionService }) : null;
             },
         });
         return {
@@ -23036,11 +24406,81 @@ const useStyles$3 = makeStyles({
     hiddenInput: {
         display: "none",
     },
+    overrideRow: {
+        display: "flex",
+        gap: tokens.spacingHorizontalXS,
+        padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalS}`,
+        fontSize: "10px",
+        fontFamily: "monospace",
+    },
+    dimSeparator: {
+        opacity: 0.5,
+    },
+    overrideValue: {
+        color: tokens.colorPaletteGreenForeground1,
+    },
+    busyMessage: {
+        display: "flex",
+        alignItems: "center",
+        gap: tokens.spacingHorizontalXS,
+        padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalS}`,
+    },
 });
-// ── Smart Assets Pane ──
-const SmartAssetsPane = (props) => {
+// ── Project Authoring Pane ──
+const BabylonProjectAuthoringPane = (props) => {
     const { scene, selectionService } = props;
-    return (jsxs(Accordion, { uniqueId: "SmartAssets", enablePinnedItems: true, enableHiddenItems: true, enableSearchItems: true, children: [jsx(AccordionSection, { title: "Assets", children: jsx(SmartAssetList, { scene: scene, selectionService: selectionService }) }), jsx(AccordionSection, { title: "Asset Map", children: jsx(SmartAssetProjectTools, { scene: scene }) })] }));
+    return (jsxs(Accordion, { uniqueId: "ProjectAuthoring", enablePinnedItems: true, enableHiddenItems: true, enableSearchItems: true, children: [jsx(AccordionSection, { title: "Project File", children: jsx(ProjectFileTools, { scene: scene }) }), jsx(AccordionSection, { title: "Assets", children: jsx(SmartAssetList, { scene: scene, selectionService: selectionService }) }), jsx(AccordionSection, { title: "Override Summary", children: jsx(OverrideSummary, { scene: scene }) })] }));
+};
+// ── Project File ──
+/**
+ * Save/load controls for the `.babylonproj` zip bundle that captures the
+ * scene's smart assets and overrides as a single project file.
+ * @param props - Component props.
+ * @returns The project file controls.
+ */
+const ProjectFileTools = (props) => {
+    const { scene } = props;
+    const styles = useStyles$3();
+    const [status, setStatus] = useState("");
+    const [busy, setBusy] = useState("");
+    const isBusy = busy !== "";
+    const onSaveProject = useCallback(async () => {
+        if (isBusy) {
+            return;
+        }
+        setBusy("Saving project...");
+        setStatus("");
+        try {
+            const blob = await SaveProjectFileAsync(scene);
+            Tools.Download(blob, "scene.babylonproj");
+            setStatus("Saved scene.babylonproj");
+        }
+        catch (err) {
+            setStatus(`Save error: ${err}`);
+        }
+        finally {
+            setBusy("");
+        }
+    }, [scene, isBusy]);
+    const onLoadProject = useCallback(async (files) => {
+        const file = files[0];
+        if (!file || isBusy) {
+            return;
+        }
+        setBusy("Loading project...");
+        setStatus("");
+        try {
+            await LoadProjectFileAsync(scene, file);
+            setStatus(`Loaded ${file.name}`);
+        }
+        catch (err) {
+            setStatus(`Load error: ${err}`);
+        }
+        finally {
+            setBusy("");
+        }
+    }, [scene, isBusy]);
+    return (jsxs(Fragment, { children: [jsx(ButtonLine, { label: "Save Project (.babylonproj)", icon: SaveRegular, onClick: onSaveProject, disabled: isBusy }), jsx(FileUploadLine, { label: "Load Project (.babylonproj)", accept: ".babylonproj", onClick: onLoadProject, disabled: isBusy }), isBusy && (jsxs("div", { className: styles.busyMessage, children: [jsx(Spinner, { size: "extra-small" }), jsx(Caption1, { children: busy })] })), status && jsx("div", { className: styles.statusMessage, children: status })] }));
 };
 // ── Smart Asset List ──
 const SmartAssetList = (props) => {
@@ -23055,8 +24495,10 @@ const SmartAssetList = (props) => {
     const compactToolContext = useMemo(() => ({ ...toolContext, size: "small" }), [toolContext]);
     // Subscribe reactively to changes — re-renders the asset list whenever
     // RegisterSmartAsset / Load / Remove / Reload fire onChangedObservable.
+    // Filter out the reserved companion key so it does not appear as a user
+    // asset alongside dragged-in textures/models.
     const sam = GetSmartAssetManager(scene);
-    const assets = useObservableState(useCallback(() => Array.from(GetAllSmartAssets(scene), ([key, url]) => ({ key, url })), [scene]), sam.onChangedObservable);
+    const assets = useObservableState(useCallback(() => Array.from(GetAllSmartAssets(scene), ([key, url]) => ({ key, url })).filter((a) => a.key !== ProjectLocalsKey), [scene]), sam.onChangedObservable);
     const onAddAsset = useCallback(() => {
         fileInputRef.current?.click();
     }, []);
@@ -23107,6 +24549,12 @@ const SmartAssetList = (props) => {
     }, [scene]);
     const onReloadAsset = useCallback(async (key) => {
         await ReloadSmartAssetAsync(scene, key);
+        // ReloadSmartAssetAsync disposes the old asset and loads fresh
+        // instances — those new objects have no knowledge of previously
+        // applied overrides, so we must re-apply them. (The swap path
+        // does the same.) Without this, overrides on a smart asset
+        // appear to silently revert whenever the user hits Reload.
+        ApplyAllOverrides(scene);
         setStatus(`Reloaded: ${key}`);
     }, [scene]);
     const onSwapAsset = useCallback((key) => {
@@ -23234,6 +24682,34 @@ const SmartAssetList = (props) => {
             }), jsx(ButtonLine, { label: "Add Asset", icon: AddRegular, onClick: onAddAsset }), jsx("input", { ref: fileInputRef, type: "file", accept: AllAcceptString, multiple: true, className: styles.hiddenInput, onChange: onFileSelected }), status && jsx(Caption1, { className: styles.statusMessage, children: status })] }));
 };
 // ── Utilities ──
+// ── Override Summary ──
+/**
+ * Pane content that lists all registered overrides for the scene. Subscribes
+ * directly to the manager's change observable so loads, deletes, and
+ * Inspector-driven edits update the view instantly.
+ * @param props - Component props.
+ * @returns The override list view.
+ */
+const OverrideSummary = (props) => {
+    const { scene } = props;
+    const styles = useStyles$3();
+    const overrideManager = GetOverrideManager(scene);
+    const overrideList = useObservableState(useCallback(() => {
+        return GetOverrides(scene).map((o) => {
+            const nameLabel = o.targetName === "" ? "(scene)" : o.targetIndex > 0 ? `${o.targetName}[${o.targetIndex}]` : o.targetName;
+            return {
+                target: `${o.targetType}.${nameLabel}`,
+                prop: o.propertyPath,
+                value: String(o.value),
+            };
+        });
+    }, [scene]), overrideManager.onChangedObservable);
+    if (overrideList.length === 0) {
+        return jsx("div", { className: styles.emptyMessage, children: "No overrides tracked. Edit properties in Inspector to create overrides." });
+    }
+    return (jsx(Fragment, { children: overrideList.map((o, i) => (jsxs("div", { className: styles.overrideRow, children: [jsx("span", { children: o.target }), jsx("span", { className: styles.dimSeparator, children: "." }), jsx("span", { children: o.prop }), jsx("span", { className: styles.dimSeparator, children: "=" }), jsx("span", { className: styles.overrideValue, children: ShortenValue(o.value) })] }, i))) }));
+};
+// ── Utilities ──
 /**
  * Finds the first scene entity produced by a smart asset key, for click-to-select.
  * Prefers non-root meshes, then materials, then textures.
@@ -23293,6 +24769,14 @@ function _getExtension(url) {
     }
     return "";
 }
+/**
+ * Truncates a value string to a maximum display length.
+ * @param value - The value string to shorten.
+ * @returns The truncated string, with an ellipsis if it was shortened.
+ */
+function ShortenValue(value) {
+    return value.length > 30 ? value.substring(0, 27) + "…" : value;
+}
 
 const AnimationGroupLoadingModes = [
     { label: "Clean", value: 0 /* SceneLoaderAnimationGroupLoadingMode.Clean */ },
@@ -24096,7 +25580,7 @@ function ShowInspector(scene, options = {}) {
         // Stats pane tab and related services.
         StatsServiceDefinition, 
         // Tools pane tab and related services.
-        ToolsServiceDefinition, ExportServiceDefinition, SmartAssetPromptServiceDefinition, SmartAssetsServiceDefinition, GLTFAnimationImportServiceDefinition, GLTFLoaderOptionsServiceDefinition, GLTFValidationServiceDefinition, CaptureToolsDefinition, 
+        ToolsServiceDefinition, ExportServiceDefinition, SmartAssetPromptServiceDefinition, BabylonProjectAuthoringServiceDefinition, OverrideCaptureServiceDefinition, GLTFAnimationImportServiceDefinition, GLTFLoaderOptionsServiceDefinition, GLTFValidationServiceDefinition, CaptureToolsDefinition, 
         // Settings pane tab and related services.
         SettingsServiceDefinition, InspectorSettingsServiceDefinition, WatcherSettingsServiceDefinition, ShellSettingsServiceDefinition, 
         // Adds a button to refresh all properties manually (when watcher is in "manual" mode).
@@ -24958,4 +26442,4 @@ const TextAreaPropertyLine = (props) => {
 AttachDebugLayer();
 
 export { GetPropertyDescriptor as $, Accordion as A, Button as B, CheckboxPropertyLine as C, Color4PropertyLine as D, ColorPickerPopup as E, ColorStepGradientComponent as F, ComboBox as G, ComboBoxPropertyLine as H, ConstructorFactory as I, ConvertOptions as J, DebugServiceIdentity as K, Link as L, MessageBar as M, NumberInputPropertyLine as N, DetachDebugLayer as O, Popover as P, DraggableLine as Q, Dropdown as R, ShellServiceIdentity as S, TextInputPropertyLine as T, EntitySelector as U, Vector3PropertyLine as V, ErrorBoundary as W, ExtensibleAccordion as X, FactorGradientComponent as Y, FactorGradientList as Z, FileUploadLine as _, useToast as a, ThemeServiceIdentity as a$, GizmoServiceIdentity as a0, HexPropertyLine as a1, InfoLabel as a2, InputHexField as a3, InputHsvField as a4, Inspector as a5, InterceptFunction as a6, InterceptProperty as a7, IsPropertyReadonly as a8, LineContainer as a9, SearchBox as aA, SelectionServiceDefinition as aB, SettingsServiceIdentity as aC, SettingsStore as aD, SettingsStoreIdentity as aE, ShowInspector as aF, SidePaneContainer as aG, SkeletonSelector as aH, Slider as aI, SpinButton as aJ, StartInspectable as aK, StatsServiceIdentity as aL, StringDropdown as aM, StringDropdownPropertyLine as aN, StringifiedPropertyLine as aO, Switch as aP, SwitchPropertyLine as aQ, SyncedSliderInput as aR, SyncedSliderPropertyLine as aS, TeachingMoment as aT, TextAreaPropertyLine as aU, TextInput as aV, TextPropertyLine as aW, Textarea as aX, TextureSelector as aY, TextureUpload as aZ, Theme as a_, LinkPropertyLine as aa, LinkToEntityPropertyLine as ab, List as ac, MakeDialogTeachingMoment as ad, MakeLazyComponent as ae, MakeModularBridge as af, MakeModularTool as ag, MakePopoverTeachingMoment as ah, MakePropertyHook as ai, MakeTeachingMoment as aj, MaterialSelector as ak, NodeSelector as al, NumberDropdown as am, NumberDropdownPropertyLine as an, ObservableCollection as ao, Pane as ap, PlaceholderPropertyLine as aq, PositionedPopover as ar, PropertiesServiceIdentity as as, Property as at, PropertyContext as au, PropertyLine as av, QuaternionPropertyLine as aw, RotationVectorPropertyLine as ax, SceneExplorerServiceIdentity as ay, SearchBar as az, useInterceptObservable as b, ToastProvider as b0, ToggleButton as b1, Tooltip as b2, UploadButton as b3, Vector2PropertyLine as b4, Vector4PropertyLine as b5, WatcherServiceIdentity as b6, inspectorAssetNotFoundHandler as b7, useAngleConverters as b8, useAsyncResource as b9, useColor3Property as ba, useColor4Property as bb, useEventListener as bc, useEventfulState as bd, useKeyListener as be, useKeyState as bf, useObservableCollection as bg, useOrderedObservableCollection as bh, usePollingObservable as bi, usePropertyChangedNotifier as bj, useQuaternionProperty as bk, useResource as bl, useTheme as bm, useThemeMode as bn, useVector3Property as bo, LinkToEntity as c, SpinButtonPropertyLine as d, useProperty as e, SceneContextIdentity as f, SelectionServiceIdentity as g, useObservableState as h, AccordionSection as i, ButtonLine as j, ToolsServiceIdentity as k, AccordionSectionItem as l, AttachDebugLayer as m, BooleanBadgePropertyLine as n, BoundProperty as o, BridgeCommandRegistryIdentity as p, BuiltInsExtensionFeed as q, Checkbox as r, ChildWindow as s, Collapse as t, useExtensionManager as u, Color3GradientComponent as v, Color3GradientList as w, Color3PropertyLine as x, Color4GradientComponent as y, Color4GradientList as z };
-//# sourceMappingURL=index-PYblOaAV.js.map
+//# sourceMappingURL=index-UoPnMkyH.js.map