@babylonjs/inspector 9.6.2 → 9.7.0

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

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { createContext, forwardRef, useContext, useState, useCallback, Component, useMemo, useEffect, useRef, useReducer, Children, isValidElement, useLayoutEffect, useImperativeHandle, cloneElement, createElement, Suspense, memo, Fragment as Fragment$1, lazy } from 'react';
-import { tokens, makeStyles, Tooltip as Tooltip$1, Button as Button$1, Spinner, Link as Link$1, Caption1, Body1, useFluent, Accordion as Accordion$1, AccordionHeader, Subtitle2Stronger, AccordionPanel, Divider, MessageBar as MessageBar$1, MessageBarBody, AccordionItem, SearchBox as SearchBox$1, Portal, ToggleButton as ToggleButton$1, InfoLabel as InfoLabel$1, Body1Strong, mergeClasses, useId, useToastController, Toast, ToastTitle, FluentProvider, Toaster, Checkbox as Checkbox$1, createLightTheme, createDarkTheme, TeachingPopover, TeachingPopoverSurface, TeachingPopoverHeader, TeachingPopoverBody, createDOMRenderer, RendererProvider, Menu, MenuTrigger, SplitButton, MenuPopover, MenuList, MenuItem, Toolbar as Toolbar$1, ToolbarRadioButton, MenuGroup, MenuGroupHeader, Switch as Switch$1, treeItemLevelToken, FlatTree, FlatTreeItem, TreeItemLayout, MenuDivider, MenuItemCheckbox, useMergedRefs, Input, Dropdown as Dropdown$1, Option, Popover as Popover$1, PopoverTrigger, PopoverSurface, ColorPicker, ColorArea, ColorSlider, AlphaSlider, ColorSwatch, PresenceBadge, Slider as Slider$1, MenuItemRadio, Dialog, DialogSurface, DialogBody, DialogTitle, DialogContent, DialogActions, List as List$1, ListItem, Badge, Label, MessageBarTitle, useComboboxFilter, Combobox, Subtitle2, Textarea as Textarea$1, ToolbarButton, ToolbarDivider, Field } from '@fluentui/react-components';
-import { ErrorCircleRegular, EyeFilled, EyeOffRegular, CheckmarkFilled, EditRegular, FilterRegular, PinFilled, PinRegular, ArrowCircleUpRegular, ChevronCircleRight16Regular, ChevronCircleRight20Regular, ChevronCircleDown16Regular, ChevronCircleDown20Regular, Copy16Regular, CopyRegular, PanelLeftExpandRegular, PanelRightExpandRegular, PanelLeftContractRegular, PanelRightContractRegular, PictureInPictureEnterRegular, MoreHorizontalRegular, LayoutColumnTwoFocusLeftFilled, LayoutColumnTwoSplitLeftFocusTopLeftFilled, LayoutColumnTwoSplitLeftFocusBottomLeftFilled, LayoutColumnTwoFocusRightFilled, LayoutColumnTwoSplitRightFocusTopRightFilled, LayoutColumnTwoSplitRightFocusBottomRightFilled, SettingsRegular, DocumentTextRegular, createFluentIcon, TextSortAscendingRegular, GlobeRegular, WarningRegular, ArrowExpandAllRegular, ArrowCollapseAllRegular, CubeTreeRegular, BugRegular, ArrowUploadRegular, ArrowBidirectionalUpDownFilled, ArrowDownloadRegular, StopRegular, RecordRegular, DataBarHorizontalRegular, WrenchRegular, ArrowClockwiseRegular, WeatherSunnyRegular, WeatherMoonRegular, PlugDisconnectedRegular, PlugConnectedRegular, PlugConnectedCheckmarkRegular, ArrowRotateClockwiseRegular, ArrowExpandRegular, SelectObjectRegular, CubeRegular, CameraRegular, AddRegular, DeleteRegular, FullScreenMaximizeRegular, ChevronDownRegular, ChevronRightRegular, CircleSmallFilled, SaveRegular, PreviousRegular, ArrowPreviousRegular, TriangleLeftRegular, RecordStopRegular, PlayRegular, ArrowNextRegular, NextRegular, PauseRegular, LinkDismissRegular, LinkEditRegular, ArrowUndoRegular, BracesRegular, BracesDismiss16Regular, EyeRegular, CloudArrowUpRegular, CloudArrowDownRegular, EyeOffFilled, ArrowMoveFilled, StopFilled, PlayFilled, LockOpenRegular, LockClosedRegular, ResizeRegular, ChevronUpRegular, ArrowResetRegular, CircleHalfFillRegular, EyedropperRegular, PaintBucketRegular, InkStrokeRegular, StackRegular, FilmstripRegular, PauseFilled, WeatherSunnyLowFilled, LayerRegular, FrameRegular, AppGenericRegular, RectangleLandscapeRegular, BorderOutsideRegular, BorderNoneRegular, MyLocationRegular, BubbleMultipleRegular, LightbulbRegular, VideoFilled, VideoRegular, FlashlightRegular, FlashlightOffRegular, DropRegular, BlurRegular, PipelineRegular, PersonWalkingRegular, DataLineRegular, SoundWaveCircleRegular, PersonSquareRegular, LayerDiagonalPersonRegular, ImageEditRegular, ImageRegular, TargetRegular, PersonFeedbackRegular, BranchRegular, DeleteFilled } from '@fluentui/react-icons';
+import { tokens, makeStyles, Tooltip as Tooltip$1, Button as Button$1, Spinner, Link as Link$1, Caption1, Body1, useFluent, Accordion as Accordion$1, AccordionHeader, Subtitle2Stronger, AccordionPanel, Divider, MessageBar as MessageBar$1, MessageBarBody, AccordionItem, SearchBox as SearchBox$1, Portal, ToggleButton as ToggleButton$1, InfoLabel as InfoLabel$1, Body1Strong, mergeClasses, useId, useToastController, Toast, ToastTitle, FluentProvider, Toaster, Checkbox as Checkbox$1, createLightTheme, createDarkTheme, TeachingPopover, TeachingPopoverSurface, TeachingPopoverHeader, TeachingPopoverBody, createDOMRenderer, RendererProvider, Menu, MenuTrigger, SplitButton, MenuPopover, MenuList, MenuItem, Toolbar as Toolbar$1, ToolbarRadioButton, MenuGroup, MenuGroupHeader, Switch as Switch$1, treeItemLevelToken, FlatTree, FlatTreeItem, TreeItemLayout, MenuDivider, MenuItemCheckbox, useMergedRefs, Input, Dropdown as Dropdown$1, Option, Popover as Popover$1, PopoverTrigger, PopoverSurface, ColorPicker, ColorArea, ColorSlider, AlphaSlider, ColorSwatch, PresenceBadge, Slider as Slider$1, MenuItemRadio, Dialog as Dialog$1, DialogSurface, DialogBody, DialogTitle, DialogContent, DialogActions, List as List$1, ListItem, Badge, Label, MessageBarTitle, useComboboxFilter, Combobox, Subtitle2, Textarea as Textarea$1, ToolbarButton, ToolbarDivider, DialogTrigger, Field } from '@fluentui/react-components';
+import { ErrorCircleRegular, EyeFilled, EyeOffRegular, CheckmarkFilled, EditRegular, FilterRegular, PinFilled, PinRegular, ArrowCircleUpRegular, ChevronCircleRight16Regular, ChevronCircleRight20Regular, ChevronCircleDown16Regular, ChevronCircleDown20Regular, Copy16Regular, CopyRegular, PanelLeftExpandRegular, PanelRightExpandRegular, PanelLeftContractRegular, PanelRightContractRegular, PictureInPictureEnterRegular, MoreHorizontalRegular, LayoutColumnTwoFocusLeftFilled, LayoutColumnTwoSplitLeftFocusTopLeftFilled, LayoutColumnTwoSplitLeftFocusBottomLeftFilled, LayoutColumnTwoFocusRightFilled, LayoutColumnTwoSplitRightFocusTopRightFilled, LayoutColumnTwoSplitRightFocusBottomRightFilled, SettingsRegular, DocumentTextRegular, createFluentIcon, TextSortAscendingRegular, GlobeRegular, WarningRegular, ArrowExpandAllRegular, ArrowCollapseAllRegular, CubeTreeRegular, BugRegular, ArrowUploadRegular, ArrowBidirectionalUpDownFilled, ArrowDownloadRegular, StopRegular, RecordRegular, DataBarHorizontalRegular, WrenchRegular, ArrowClockwiseRegular, WeatherSunnyRegular, WeatherMoonRegular, PlugDisconnectedRegular, PlugConnectedRegular, PlugConnectedCheckmarkRegular, ArrowRotateClockwiseRegular, ArrowExpandRegular, SelectObjectRegular, CubeRegular, CameraRegular, AddRegular, DeleteRegular, FullScreenMaximizeRegular, ChevronDownRegular, ChevronRightRegular, CircleSmallFilled, SaveRegular, PreviousRegular, ArrowPreviousRegular, TriangleLeftRegular, RecordStopRegular, PlayRegular, ArrowNextRegular, NextRegular, PauseRegular, LinkDismissRegular, LinkEditRegular, ArrowUndoRegular, BracesRegular, BracesDismiss16Regular, EyeRegular, CloudArrowUpRegular, CloudArrowDownRegular, EyeOffFilled, ArrowMoveFilled, StopFilled, PlayFilled, LockOpenRegular, LockClosedRegular, ResizeRegular, ChevronUpRegular, ArrowResetRegular, CircleHalfFillRegular, EyedropperRegular, PaintBucketRegular, InkStrokeRegular, StackRegular, FilmstripRegular, PauseFilled, WeatherSunnyLowFilled, LayerRegular, FrameRegular, AppGenericRegular, RectangleLandscapeRegular, BorderOutsideRegular, BorderNoneRegular, MyLocationRegular, BubbleMultipleRegular, LightbulbRegular, VideoFilled, VideoRegular, FlashlightRegular, FlashlightOffRegular, DropRegular, BlurRegular, PipelineRegular, PersonWalkingRegular, DataLineRegular, SoundWaveCircleRegular, PersonSquareRegular, LayerDiagonalPersonRegular, ImageEditRegular, ImageRegular, LinkRegular, ArrowSyncRegular, TargetRegular, PersonFeedbackRegular, DismissRegular, BranchRegular, DeleteFilled } from '@fluentui/react-icons';
 import { Color3, Color4 } from '@babylonjs/core/Maths/math.color.js';
 import { Vector3, Quaternion, Matrix, Vector2, Vector4, TmpVectors } from '@babylonjs/core/Maths/math.vector.js';
 import { Observable } from '@babylonjs/core/Misc/observable.js';
@@ -144,6 +144,7 @@ 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 { 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';
@@ -284,7 +285,7 @@ const Button = forwardRef((props, ref) => {
 });
 Button.displayName = "Button";
 
-const useStyles$_ = makeStyles({
+const useStyles$11 = makeStyles({
     root: {
         display: "flex",
         flexDirection: "column",
@@ -365,7 +366,7 @@ class ErrorBoundary extends Component {
     }
 }
 function ErrorFallback({ error, onRetry }) {
-    const styles = useStyles$_();
+    const styles = useStyles$11();
     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 })] }));
 }
 
@@ -1366,7 +1367,7 @@ function useIsSectionEmpty(sectionId) {
     return hasItems;
 }
 
-const useStyles$Z = makeStyles({
+const useStyles$10 = makeStyles({
     accordion: {
         display: "flex",
         flexDirection: "column",
@@ -1458,7 +1459,7 @@ const useStyles$Z = makeStyles({
  */
 const AccordionMenuBar = () => {
     AccordionMenuBar.displayName = "AccordionMenuBar";
-    const classes = useStyles$Z();
+    const classes = useStyles$10();
     const accordionCtx = useContext(AccordionContext);
     if (!accordionCtx) {
         return null;
@@ -1482,7 +1483,7 @@ const AccordionMenuBar = () => {
 const AccordionSectionBlock = (props) => {
     AccordionSectionBlock.displayName = "AccordionSectionBlock";
     const { children, sectionId } = props;
-    const classes = useStyles$Z();
+    const classes = useStyles$10();
     const accordionCtx = useContext(AccordionContext);
     const { context: sectionContext, isEmpty } = useAccordionSectionBlockContext(props);
     if (accordionCtx) {
@@ -1502,7 +1503,7 @@ const AccordionSectionBlock = (props) => {
 const AccordionSectionItem = (props) => {
     AccordionSectionItem.displayName = "AccordionSectionItem";
     const { children, staticItem } = props;
-    const classes = useStyles$Z();
+    const classes = useStyles$10();
     const accordionCtx = useContext(AccordionContext);
     const itemState = useAccordionSectionItemState(props);
     const [ctrlMode, setCtrlMode] = useState(false);
@@ -1542,7 +1543,7 @@ const AccordionSectionItem = (props) => {
  */
 const AccordionPinnedContainer = () => {
     AccordionPinnedContainer.displayName = "AccordionPinnedContainer";
-    const classes = useStyles$Z();
+    const classes = useStyles$10();
     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" }) }) }));
 };
@@ -1553,7 +1554,7 @@ const AccordionPinnedContainer = () => {
  */
 const AccordionSearchBox = () => {
     AccordionSearchBox.displayName = "AccordionSearchBox";
-    const classes = useStyles$Z();
+    const classes = useStyles$10();
     const accordionCtx = useContext(AccordionContext);
     if (!accordionCtx?.features.search) {
         return null;
@@ -1569,7 +1570,7 @@ const AccordionSearchBox = () => {
  */
 const AccordionSection = (props) => {
     AccordionSection.displayName = "AccordionSection";
-    const classes = useStyles$Z();
+    const classes = useStyles$10();
     return jsx("div", { className: classes.panelDiv, children: props.children });
 };
 const StringAccordion = Accordion$1;
@@ -1577,7 +1578,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$Z();
+    const classes = useStyles$10();
     const { size } = useContext(ToolContext);
     const accordionCtx = useAccordionContext(props);
     const hasPinning = accordionCtx?.features.pinning ?? false;
@@ -1674,7 +1675,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$Y = makeStyles({
+const useStyles$$ = makeStyles({
     button: {
         display: "flex",
         alignItems: "center",
@@ -1692,7 +1693,7 @@ const ToggleButton = (props) => {
     ToggleButton.displayName = "ToggleButton";
     const { value, onChange, title, appearance = "subtle" } = props;
     const { size } = useContext(ToolContext);
-    const classes = useStyles$Y();
+    const classes = useStyles$$();
     const [checked, setChecked] = useState(value);
     const toggle = useCallback(() => {
         setChecked((prevChecked) => {
@@ -2001,7 +2002,7 @@ const UXContextProvider = (props) => {
 function AsReadonlyArray(array) {
     return array;
 }
-const useStyles$X = makeStyles({
+const useStyles$_ = makeStyles({
     rootDiv: {
         flex: 1,
         overflow: "hidden",
@@ -2016,7 +2017,7 @@ const useStyles$X = makeStyles({
  * @returns The extensible accordion component.
  */
 function ExtensibleAccordion(props) {
-    const classes = useStyles$X();
+    const classes = useStyles$_();
     const { children, sections, sectionContent, context, sectionsRef, ...rest } = props;
     const defaultSections = useMemo(() => {
         const defaultSections = [];
@@ -2141,7 +2142,7 @@ function ExtensibleAccordion(props) {
                     })] }) })) }));
 }
 
-const useStyles$W = makeStyles({
+const useStyles$Z = makeStyles({
     paneRootDiv: {
         display: "flex",
         flex: 1,
@@ -2154,7 +2155,7 @@ const useStyles$W = makeStyles({
  */
 const SidePaneContainer = forwardRef((props, ref) => {
     const { className, ...rest } = props;
-    const classes = useStyles$W();
+    const classes = useStyles$Z();
     return (jsx("div", { className: mergeClasses(classes.paneRootDiv, className), ref: ref, ...rest, children: props.children }));
 });
 
@@ -2425,7 +2426,7 @@ function useTheme(invert = false) {
 }
 
 // Fluent doesn't apply styling to scrollbars by default, so provide our own reasonable default.
-const useStyles$V = makeStyles({
+const useStyles$Y = makeStyles({
     root: {
         scrollbarColor: `${tokens.colorNeutralForeground3} ${tokens.colorTransparentBackground}`,
     },
@@ -2441,11 +2442,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$V();
+    const classes = useStyles$Y();
     return (jsx(FluentProvider, { theme: theme, className: mergeClasses(classes.root, className), applyStylesToPortals: applyStylesToPortals, ...rest, children: props.children }));
 };
 
-const useStyles$U = makeStyles({
+const useStyles$X = makeStyles({
     extensionTeachingPopover: {
         maxWidth: "320px",
     },
@@ -2456,7 +2457,7 @@ const useStyles$U = makeStyles({
  * @returns The teaching moment popover.
  */
 const TeachingMoment = ({ shouldDisplay, positioningRef, onOpenChange, title, description }) => {
-    const classes = useStyles$U();
+    const classes = useStyles$X();
     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 })] }) }));
 };
 
@@ -2889,7 +2890,7 @@ const RootComponentServiceIdentity = Symbol("RootComponent");
  * The unique identity symbol for the shell service.
  */
 const ShellServiceIdentity = Symbol("ShellService");
-const useStyles$T = makeStyles({
+const useStyles$W = makeStyles({
     mainView: {
         flex: 1,
         display: "flex",
@@ -3102,14 +3103,14 @@ const DockMenu = (props) => {
 };
 const PaneHeader = (props) => {
     const { id, title, dockOptions } = props;
-    const classes = useStyles$T();
+    const classes = useStyles$W();
     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$T();
+    const classes = useStyles$W();
     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);
@@ -3119,7 +3120,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$T();
+    const classes = useStyles$W();
     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))) })] })) }));
@@ -3129,7 +3130,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$T();
+    const classes = useStyles$W();
     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);
@@ -3141,7 +3142,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$T();
+    const classes = useStyles$W();
     const [topSelectedTab, setTopSelectedTab] = useState();
     const [bottomSelectedTab, setBottomSelectedTab] = useState();
     const [collapsed, setCollapsed] = useState(initialCollapsed);
@@ -3370,7 +3371,7 @@ function MakeShellServiceDefinition({ leftPaneDefaultWidth = 350, leftPaneMinWid
                 expand: () => onCollapseChanged.notifyObservers({ location: "right", collapsed: false }),
             };
             const rootComponent = () => {
-                const classes = useStyles$T();
+                const classes = useStyles$W();
                 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.
@@ -3757,13 +3758,13 @@ function useImpulse() {
     return [value, pulse];
 }
 
-const useStyles$S = makeStyles({
+const useStyles$V = makeStyles({
     placeholderDiv: {
         padding: `${tokens.spacingVerticalM} ${tokens.spacingHorizontalM}`,
     },
 });
 const PropertiesPane = (props) => {
-    const classes = useStyles$S();
+    const classes = useStyles$V();
     const entity = props.context;
     return entity != null ? (jsx(ExtensibleAccordion, { ...props })) : (jsx("div", { className: classes.placeholderDiv, children: jsx(Body1Strong, { italic: true, children: "No entity selected." }) }));
 };
@@ -4203,7 +4204,7 @@ function CoerceEntityArray(entities, sort) {
     }
     return entities;
 }
-const useStyles$R = makeStyles({
+const useStyles$U = makeStyles({
     rootDiv: {
         flex: 1,
         overflow: "hidden",
@@ -4312,14 +4313,14 @@ function MakeInlineCommandElement(command, isPlaceholder) {
 }
 const SceneTreeItem = (props) => {
     const { isSelected, select } = props;
-    const classes = useStyles$R();
+    const classes = useStyles$U();
     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$R();
+    const classes = useStyles$U();
     const [compactMode] = useSetting(CompactModeSettingDescriptor);
     // Get the commands that apply to this section.
     const commands = useResource(useCallback(() => {
@@ -4336,7 +4337,7 @@ const SectionTreeItem = (props) => {
 };
 const EntityTreeItem = (props) => {
     const { entityItem, isSelected, select, isFiltering, commandProviders, expandAll, collapseAll, isDragging, isDropTarget, ...dragProps } = props;
-    const classes = useStyles$R();
+    const classes = useStyles$U();
     const [compactMode] = useSetting(CompactModeSettingDescriptor);
     const hasChildren = !!entityItem.children?.length;
     const displayInfo = useResource(useCallback(() => {
@@ -4452,7 +4453,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$R();
+    const classes = useStyles$U();
     const { sections, entityCommandProviders, sectionCommandProviders, scene, selectedEntity = null } = props;
     const [openItems, setOpenItems] = useState(new Set());
     const [sceneVersion, setSceneVersion] = useState(0);
@@ -6078,7 +6079,7 @@ class CanvasGraphService {
     }
 }
 
-const useStyles$Q = makeStyles({
+const useStyles$T = makeStyles({
     canvas: {
         flexGrow: 1,
         width: "100%",
@@ -6087,7 +6088,7 @@ const useStyles$Q = makeStyles({
 });
 const CanvasGraph = (props) => {
     const { collector, scene, layoutObservable, returnToPlayheadObservable, onVisibleRangeChangedObservable, initialGraphSize } = props;
-    const classes = useStyles$Q();
+    const classes = useStyles$T();
     const canvasRef = useRef(null);
     useEffect(() => {
         if (!canvasRef.current) {
@@ -6164,7 +6165,7 @@ function EvaluateExpression(rawValue) {
         return NaN;
     }
 }
-const useStyles$P = makeStyles({
+const useStyles$S = makeStyles({
     icon: {
         "&:hover": {
             color: tokens.colorBrandForeground1,
@@ -6178,7 +6179,7 @@ const useStyles$P = makeStyles({
 const SpinButton = forwardRef((props, ref) => {
     SpinButton.displayName = "SpinButton2";
     const inputClasses = useInputStyles$1();
-    const classes = useStyles$P();
+    const classes = useStyles$S();
     const { size } = useContext(ToolContext);
     const { min, max } = props;
     const baseStep = props.step ?? 1;
@@ -6445,7 +6446,7 @@ const Dropdown = (props) => {
 const NumberDropdown = Dropdown;
 const StringDropdown = Dropdown;
 
-const useStyles$O = makeStyles({
+const useStyles$R = makeStyles({
     surface: {
         maxWidth: "400px",
     },
@@ -6460,7 +6461,7 @@ const useStyles$O = makeStyles({
 const Popover = forwardRef((props, ref) => {
     const { children, open: controlledOpen, onOpenChange, positioning, surfaceClassName } = props;
     const [internalOpen, setInternalOpen] = useState(false);
-    const classes = useStyles$O();
+    const classes = useStyles$R();
     const isControlled = controlledOpen !== undefined;
     const popoverOpen = isControlled ? controlledOpen : internalOpen;
     const handleOpenChange = (_, data) => {
@@ -6704,7 +6705,7 @@ const InputAlphaField = (props) => {
         } }));
 };
 
-const useStyles$N = makeStyles({
+const useStyles$Q = makeStyles({
     sidebar: {
         display: "flex",
         flexDirection: "column",
@@ -6768,7 +6769,7 @@ const useStyles$N = makeStyles({
 });
 const PerformanceSidebar = (props) => {
     const { collector, onVisibleRangeChangedObservable } = props;
-    const classes = useStyles$N();
+    const classes = useStyles$Q();
     // Map from id to IPerfMetadata information
     const [metadataMap, setMetadataMap] = useState();
     // Map from category to all the ids belonging to that category
@@ -6841,7 +6842,7 @@ const PerformanceSidebar = (props) => {
                     })] }, `category-${category || "version"}`))) }));
 };
 
-const useStyles$M = makeStyles({
+const useStyles$P = makeStyles({
     container: {
         display: "flex",
         flexDirection: "row",
@@ -6870,7 +6871,7 @@ const useStyles$M = makeStyles({
 });
 const PerformanceViewer = (props) => {
     const { scene, layoutObservable, returnToLiveObservable, performanceCollector, initialGraphSize } = props;
-    const classes = useStyles$M();
+    const classes = useStyles$P();
     const [onVisibleRangeChangedObservable] = useState(() => new Observable());
     const onReturnToPlayheadClick = () => {
         returnToLiveObservable.notifyObservers();
@@ -7037,14 +7038,14 @@ const TextPropertyLine = (props) => {
     return (jsx(PropertyLine, { ...props, children: jsx(Body1, { title: title, children: value ?? "" }) }));
 };
 
-const useStyles$L = makeStyles({
+const useStyles$O = makeStyles({
     pinnedStatsPane: {
         flex: "0 1 auto",
         paddingBottom: tokens.spacingHorizontalM,
     },
 });
 const StatsPane = (props) => {
-    const classes = useStyles$L();
+    const classes = useStyles$O();
     const scene = props.context;
     const engine = scene.getEngine();
     const pollingObservable = usePollingObservable(250);
@@ -7207,7 +7208,7 @@ const ToolsServiceDefinition = {
  */
 const ReactContextServiceIdentity = Symbol("ReactContextService");
 
-const useStyles$K = makeStyles({
+const useStyles$N = makeStyles({
     dropdown: {
         ...UniformWidthStyling,
     },
@@ -7219,7 +7220,7 @@ const useStyles$K = makeStyles({
  */
 const DropdownPropertyLine = forwardRef((props, ref) => {
     DropdownPropertyLine.displayName = "DropdownPropertyLine";
-    const classes = useStyles$K();
+    const classes = useStyles$N();
     return (jsx(PropertyLine, { ...props, ref: ref, children: jsx(Dropdown, { ...props, className: classes.dropdown }) }));
 });
 /**
@@ -7377,7 +7378,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$J = makeStyles({
+const useStyles$M = makeStyles({
     uniformWidth: {
         ...UniformWidthStyling,
     },
@@ -7389,7 +7390,7 @@ const useStyles$J = makeStyles({
  */
 const SyncedSliderPropertyLine = forwardRef((props, ref) => {
     SyncedSliderPropertyLine.displayName = "SyncedSliderPropertyLine";
-    const classes = useStyles$J();
+    const classes = useStyles$M();
     const { label, description, ...sliderProps } = props;
     return (jsx(PropertyLine, { ref: ref, ...props, children: jsx(SyncedSliderInput, { ...sliderProps, className: mergeClasses(classes.uniformWidth, props.className) }) }));
 });
@@ -7821,6 +7822,78 @@ const GizmoServiceDefinition = {
     },
 };
 
+const OnInspectorAssetNotFoundPromptRequestedObservable = new Observable(undefined, true);
+let InspectorAssetNotFoundPromptHandlerObserver = null;
+let MissingAssetPromptQueue = Promise.resolve(undefined);
+/**
+ * Sets the Inspector-owned prompt handler used by Smart Assets when an asset is missing.
+ * @param handler - The handler installed by the Inspector UI, or null to clear it.
+ */
+function SetInspectorAssetNotFoundPromptHandler(handler) {
+    InspectorAssetNotFoundPromptHandlerObserver?.remove();
+    InspectorAssetNotFoundPromptHandlerObserver = null;
+    if (!handler) {
+        OnInspectorAssetNotFoundPromptRequestedObservable.notifyIfTriggered = true;
+        return;
+    }
+    InspectorAssetNotFoundPromptHandlerObserver = OnInspectorAssetNotFoundPromptRequestedObservable.add((request) => {
+        OnInspectorAssetNotFoundPromptRequestedObservable.notifyIfTriggered = false;
+        OnInspectorAssetNotFoundPromptRequestedObservable.cleanLastNotifiedState();
+        void (async () => {
+            try {
+                request.resolve(await handler(request.key, request.expectedUrl));
+            }
+            catch (error) {
+                request.reject(error);
+            }
+        })();
+    });
+    OnInspectorAssetNotFoundPromptRequestedObservable.notifyIfTriggered = false;
+    OnInspectorAssetNotFoundPromptRequestedObservable.cleanLastNotifiedState();
+}
+async function RunQueuedMissingAssetPromptAsync(key, expectedUrl) {
+    const previousPrompt = MissingAssetPromptQueue;
+    let releasePrompt = () => { };
+    MissingAssetPromptQueue = new Promise((resolve) => {
+        releasePrompt = resolve;
+    });
+    await previousPrompt;
+    try {
+        return await new Promise((resolve, reject) => {
+            OnInspectorAssetNotFoundPromptRequestedObservable.notifyObservers({ key, expectedUrl, resolve, reject });
+        });
+    }
+    finally {
+        releasePrompt();
+    }
+}
+/**
+ * Default handler for missing assets. Delegates to the Inspector UI when it is open.
+ * Pane focus is handled by the prompt host itself once the user picks a file.
+ * @param key - The smart asset key that was not found.
+ * @param expectedUrl - The URL that failed to load.
+ * @returns A promise resolving to a new URL, File, or null to skip.
+ */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+async function inspectorAssetNotFoundHandler(key, expectedUrl) {
+    return await RunQueuedMissingAssetPromptAsync(key, expectedUrl);
+}
+/**
+ * Installs the Inspector `onAssetNotFound` handler while preserving any existing handler for restoration.
+ * @param sam - The SmartAssetManager to install the handler on.
+ * @returns A function that restores the previous handler if the Inspector handler is still installed.
+ */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+function installInspectorAssetNotFoundHandler(sam) {
+    const previousHandler = sam.onAssetNotFound;
+    sam.onAssetNotFound = inspectorAssetNotFoundHandler;
+    return () => {
+        if (sam.onAssetNotFound === inspectorAssetNotFoundHandler) {
+            sam.onAssetNotFound = previousHandler;
+        }
+    };
+}
+
 const InstalledExtensionsKey = "Extensions/InstalledExtensions";
 const ExtensionInstalledKeyPrefix = "Extensions/IsExtensionInstalled";
 function GetExtensionInstalledKey(name) {
@@ -8277,7 +8350,7 @@ function useExtensionManager() {
     return useContext(ExtensionManagerContext)?.extensionManager;
 }
 
-const useStyles$I = makeStyles({
+const useStyles$L = makeStyles({
     themeButton: {
         margin: 0,
     },
@@ -8296,7 +8369,7 @@ const ThemeSelectorServiceDefinition = {
             teachingMoment: false,
             order: -300,
             component: () => {
-                const classes = useStyles$I();
+                const classes = useStyles$L();
                 const { isDarkMode, themeMode, setThemeMode } = useThemeMode();
                 const onSelectedThemeChange = useCallback((e, data) => {
                     setThemeMode(data.checkedItems.includes("System") ? "system" : data.checkedItems[0].toLocaleLowerCase());
@@ -8313,7 +8386,7 @@ const ThemeSelectorServiceDefinition = {
     },
 };
 
-const useStyles$H = makeStyles({
+const useStyles$K = makeStyles({
     app: {
         colorScheme: "light dark",
         flexGrow: 1,
@@ -8358,7 +8431,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$H();
+        const classes = useStyles$K();
         const [extensionManagerContext, setExtensionManagerContext] = useState();
         const [requiredExtensions, setRequiredExtensions] = useState();
         const [requiredExtensionsDeferred, setRequiredExtensionsDeferred] = useState();
@@ -8445,7 +8518,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-C33SU1_a.js');
+                    const { ExtensionListServiceDefinition } = await import('./extensionsListService-DTrjNf_v.js');
                     serviceContainer.addService(ExtensionListServiceDefinition);
                 }
                 // Register all external services (that make up a unique tool).
@@ -8519,7 +8592,7 @@ function MakeModularTool(options) {
         else {
             // eslint-disable-next-line @typescript-eslint/naming-convention
             const Content = rootComponentService.rootComponent;
-            return (jsx(ReactContextsWrapper, { contexts: contexts, children: jsx(SettingsStoreContext.Provider, { value: settingsStore, children: jsx(ExtensionManagerContext.Provider, { value: extensionManagerContext, children: jsx(Theme, { className: classes.app, children: jsxs(ToastProvider, { imperativeRef: setToastHandle, children: [jsx(Dialog, { open: !!requiredExtensions, modalType: "alert", children: jsx(DialogSurface, { children: jsxs(DialogBody, { children: [jsx(DialogTitle, { children: "Required Extensions" }), jsxs(DialogContent, { children: ["Opening this URL requires the following extensions to be installed and enabled:", jsx("ul", { children: requiredExtensions?.map((name) => (jsx("li", { children: name }, name))) })] }), jsxs(DialogActions, { children: [jsx(Button$1, { appearance: "primary", onClick: onAcceptRequiredExtensions, children: "Install & Enable" }), jsx(Button$1, { appearance: "secondary", onClick: onRejectRequiredExtensions, children: "No Thanks" })] })] }) }) }), jsx(Dialog, { open: !!extensionInstallError, modalType: "alert", children: jsx(DialogSurface, { children: jsxs(DialogBody, { children: [jsx(DialogTitle, { children: jsxs("div", { className: classes.extensionErrorTitleDiv, children: ["Extension Install Error", jsx(ErrorCircleRegular, { className: classes.extensionErrorIcon })] }) }), jsx(DialogContent, { children: jsxs(List$1, { children: [jsx(ListItem, { children: jsx(Body1, { children: `Extension "${extensionInstallError?.extension.name}" failed to install and was removed.` }) }), jsx(ListItem, { children: jsx(Body1, { children: `${extensionInstallError?.error}` }) })] }) }), jsx(DialogActions, { children: jsx(Button$1, { appearance: "primary", onClick: onAcknowledgedExtensionInstallError, children: "Close" }) })] }) }) }), jsx(Suspense, { fallback: jsx(Spinner, { className: classes.spinner }), children: jsx(Content, {}) })] }) }) }) }) }));
+            return (jsx(ReactContextsWrapper, { contexts: contexts, children: jsx(SettingsStoreContext.Provider, { value: settingsStore, children: jsx(ExtensionManagerContext.Provider, { value: extensionManagerContext, children: jsx(Theme, { className: classes.app, children: jsxs(ToastProvider, { imperativeRef: setToastHandle, children: [jsx(Dialog$1, { open: !!requiredExtensions, modalType: "alert", children: jsx(DialogSurface, { children: jsxs(DialogBody, { children: [jsx(DialogTitle, { children: "Required Extensions" }), jsxs(DialogContent, { children: ["Opening this URL requires the following extensions to be installed and enabled:", jsx("ul", { children: requiredExtensions?.map((name) => (jsx("li", { children: name }, name))) })] }), jsxs(DialogActions, { children: [jsx(Button$1, { appearance: "primary", onClick: onAcceptRequiredExtensions, children: "Install & Enable" }), jsx(Button$1, { appearance: "secondary", onClick: onRejectRequiredExtensions, children: "No Thanks" })] })] }) }) }), jsx(Dialog$1, { open: !!extensionInstallError, modalType: "alert", children: jsx(DialogSurface, { children: jsxs(DialogBody, { children: [jsx(DialogTitle, { children: jsxs("div", { className: classes.extensionErrorTitleDiv, children: ["Extension Install Error", jsx(ErrorCircleRegular, { className: classes.extensionErrorIcon })] }) }), jsx(DialogContent, { children: jsxs(List$1, { children: [jsx(ListItem, { children: jsx(Body1, { children: `Extension "${extensionInstallError?.extension.name}" failed to install and was removed.` }) }), jsx(ListItem, { children: jsx(Body1, { children: `${extensionInstallError?.error}` }) })] }) }), jsx(DialogActions, { children: jsx(Button$1, { appearance: "primary", onClick: onAcknowledgedExtensionInstallError, children: "Close" }) })] }) }) }), jsx(Suspense, { fallback: jsx(Spinner, { className: classes.spinner }), children: jsx(Content, {}) })] }) }) }) }) }));
         }
     };
     // Set the container element to be a flex container so that the tool can be displayed properly.
@@ -8566,14 +8639,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-pBNUavZe.js'),
+        getExtensionModuleAsync: async () => await import('./quickCreateToolsService-8d6rBO-A.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-CAi2NPRy.js'),
+        getExtensionModuleAsync: async () => await import('./reflectorService-B7LcD1Sn.js'),
     },
 ]);
 
@@ -9614,7 +9687,7 @@ const ColorSliders = ({ color, onSliderChange }) => (jsxs(Fragment, { children:
 const Color3PropertyLine = ColorPropertyLine;
 const Color4PropertyLine = ColorPropertyLine;
 
-const useStyles$G = makeStyles({
+const useStyles$J = makeStyles({
     uniformWidth: {
         ...UniformWidthStyling,
     },
@@ -9626,7 +9699,7 @@ const useStyles$G = makeStyles({
  */
 const TextInputPropertyLine = (props) => {
     TextInputPropertyLine.displayName = "TextInputPropertyLine";
-    const classes = useStyles$G();
+    const classes = useStyles$J();
     return (jsx(PropertyLine, { ...props, children: jsx(TextInput, { ...props, className: mergeClasses(classes.uniformWidth, props.className) }) }));
 };
 /**
@@ -9637,7 +9710,7 @@ const TextInputPropertyLine = (props) => {
  */
 const NumberInputPropertyLine = (props) => {
     NumberInputPropertyLine.displayName = "NumberInputPropertyLine";
-    const classes = useStyles$G();
+    const classes = useStyles$J();
     return (jsx(PropertyLine, { ...props, children: jsx(SpinButton, { ...props, className: mergeClasses(classes.uniformWidth, props.className) }) }));
 };
 
@@ -9769,7 +9842,7 @@ const LegacyInspectableObjectPropertiesServiceDefinition = {
 };
 
 const DocUrl = "https://www.npmjs.com/package/@babylonjs/inspector#inspector-cli";
-const useStyles$F = makeStyles({
+const useStyles$I = makeStyles({
     tooltipContent: {
         display: "flex",
         flexDirection: "column",
@@ -9787,7 +9860,7 @@ const CliConnectionStatusServiceDefinition = {
             teachingMoment: false,
             order: 0 /* DefaultToolbarItemOrder.CliStatus */,
             component: () => {
-                const classes = useStyles$F();
+                const classes = useStyles$I();
                 const isEnabled = useObservableState(() => cliConnectionStatus.isEnabled, cliConnectionStatus.onConnectionStatusChanged);
                 const isConnected = useObservableState(() => cliConnectionStatus.isConnected, cliConnectionStatus.onConnectionStatusChanged);
                 const { showToast } = useToast();
@@ -9848,7 +9921,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$E = makeStyles({
+const useStyles$H = makeStyles({
     coordinatesModeButton: {
         margin: `0 0 0 ${tokens.spacingHorizontalXS}`,
     },
@@ -9864,7 +9937,7 @@ const useStyles$E = makeStyles({
 });
 const GizmoToolbar = (props) => {
     const { gizmoService, sceneContext } = props;
-    const classes = useStyles$E();
+    const classes = useStyles$H();
     const gizmoMode = useObservableState(() => gizmoService.gizmoMode, gizmoService.onGizmoModeChanged);
     const coordinatesMode = useObservableState(() => gizmoService.coordinatesMode, gizmoService.onCoordinatesModeChanged);
     const cameraGizmo = useObservableState(() => gizmoService.gizmoCamera, gizmoService.onCameraGizmoChanged);
@@ -9993,7 +10066,7 @@ const HighlightServiceDefinition = {
     },
 };
 
-const useStyles$D = makeStyles({
+const useStyles$G = makeStyles({
     badge: {
         margin: tokens.spacingHorizontalXXS,
         fontFamily: "monospace",
@@ -10010,7 +10083,7 @@ const MiniStatsServiceDefinition = {
             order: 300 /* DefaultToolbarItemOrder.FrameRate */,
             teachingMoment: false,
             component: () => {
-                const classes = useStyles$D();
+                const classes = useStyles$G();
                 const scene = useObservableState(useCallback(() => sceneContext.currentScene, [sceneContext.currentScene]), sceneContext.currentSceneObservable);
                 const engine = scene?.getEngine();
                 const pollingObservable = usePollingObservable(250);
@@ -10339,7 +10412,7 @@ function useCurveEditor() {
     return context;
 }
 
-const useStyles$C = makeStyles({
+const useStyles$F = makeStyles({
     root: {
         display: "flex",
         flexDirection: "row",
@@ -10383,7 +10456,7 @@ const useStyles$C = makeStyles({
  * @returns The top bar component
  */
 const TopBar = () => {
-    const styles = useStyles$C();
+    const styles = useStyles$F();
     const { state, observables } = useCurveEditor();
     const [keyFrameValue, setKeyFrameValue] = useState(null);
     const [keyValue, setKeyValue] = useState(null);
@@ -10476,7 +10549,7 @@ const ColorChannelColors = {
  */
 const DefaultCurveColor = "#ffffff";
 
-const useStyles$B = makeStyles({
+const useStyles$E = makeStyles({
     root: {
         display: "flex",
         flexDirection: "column",
@@ -10518,7 +10591,7 @@ const LOOP_MODES$1 = [
  * @returns The edit animation panel component
  */
 const EditAnimationPanel = ({ animation, onClose }) => {
-    const styles = useStyles$B();
+    const styles = useStyles$E();
     const { observables } = useCurveEditor();
     const [name, setName] = useState(animation.name);
     const [property, setProperty] = useState(animation.targetProperty);
@@ -10549,7 +10622,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$A = makeStyles({
+const useStyles$D = makeStyles({
     root: {
         display: "flex",
         flexDirection: "column",
@@ -10615,7 +10688,7 @@ const useStyles$A = makeStyles({
  * @returns Animation entry component
  */
 const AnimationEntry = ({ animation }) => {
-    const styles = useStyles$A();
+    const styles = useStyles$D();
     const { state, actions, observables } = useCurveEditor();
     const [isExpanded, setIsExpanded] = useState(false);
     const [isHovered, setIsHovered] = useState(false);
@@ -10694,7 +10767,7 @@ const AnimationEntry = ({ animation }) => {
  * @returns Animation sub-entry component
  */
 const AnimationSubEntry = ({ animation, subName, color }) => {
-    const styles = useStyles$A();
+    const styles = useStyles$D();
     const { actions, observables } = useCurveEditor();
     const activeChannel = actions.getActiveChannel(animation);
     const isThisChannelActive = activeChannel === color;
@@ -10717,7 +10790,7 @@ const AnimationSubEntry = ({ animation, subName, color }) => {
  * @returns Animation list component
  */
 const AnimationList = () => {
-    const styles = useStyles$A();
+    const styles = useStyles$D();
     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
@@ -10730,7 +10803,7 @@ const AnimationList = () => {
         }) }));
 };
 
-const useStyles$z = makeStyles({
+const useStyles$C = makeStyles({
     root: {
         display: "flex",
         flexDirection: "column",
@@ -10779,7 +10852,7 @@ const LoopModeOptions = LOOP_MODES.map((lm) => ({ label: lm, value: lm }));
  * @returns The add animation panel component
  */
 const AddAnimationPanel = ({ onClose }) => {
-    const styles = useStyles$z();
+    const styles = useStyles$C();
     const { state, actions, observables } = useCurveEditor();
     const [name, setName] = useState("");
     const [mode, setMode] = useState("List");
@@ -10996,7 +11069,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$y = makeStyles({
+const useStyles$B = makeStyles({
     root: {
         display: "flex",
         flexDirection: "column",
@@ -11039,7 +11112,7 @@ const useStyles$y = makeStyles({
  * @returns The load animation panel component
  */
 const LoadAnimationPanel = ({ onClose }) => {
-    const styles = useStyles$y();
+    const styles = useStyles$B();
     const { state, actions, observables } = useCurveEditor();
     const [snippetIdInput, setSnippetIdInput] = useState("");
     const [loadedSnippetId, setLoadedSnippetId] = useState(null);
@@ -11178,7 +11251,7 @@ class StringTools {
     }
 }
 
-const useStyles$x = makeStyles({
+const useStyles$A = makeStyles({
     root: {
         display: "flex",
         flexDirection: "column",
@@ -11223,7 +11296,7 @@ const useStyles$x = makeStyles({
  * @returns The save animation panel component
  */
 const SaveAnimationPanel = ({ onClose: _onClose }) => {
-    const styles = useStyles$x();
+    const styles = useStyles$A();
     const { state } = useCurveEditor();
     const [selectedAnimations, setSelectedAnimations] = useState(() => {
         if (!state.animations) {
@@ -11296,7 +11369,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$w = makeStyles({
+const useStyles$z = makeStyles({
     root: {
         display: "flex",
         flexDirection: "column",
@@ -11350,7 +11423,7 @@ const useStyles$w = makeStyles({
  * @returns The sidebar component
  */
 const SideBar = () => {
-    const styles = useStyles$w();
+    const styles = useStyles$z();
     const { state, actions, observables } = useCurveEditor();
     const [openPopover, setOpenPopover] = useState(null);
     const [fps, setFps] = useState(60);
@@ -12338,7 +12411,7 @@ const KeyPointComponent = (props) => {
                                 } })] }))] }))] }));
 };
 
-const useStyles$v = makeStyles({
+const useStyles$y = makeStyles({
     root: {
         position: "absolute",
         top: 0,
@@ -12522,7 +12595,7 @@ function ExtractValuesFromKeys(keys, curves) {
  * @returns The graph component
  */
 const Graph = ({ width, height }) => {
-    const styles = useStyles$v();
+    const styles = useStyles$y();
     const { state, actions, observables } = useCurveEditor();
     const svgRef = useRef(null);
     const [scale, setScale] = useState(1);
@@ -12885,7 +12958,7 @@ const Graph = ({ width, height }) => {
                     }), renderValueAxis()] })] }));
 };
 
-const useStyles$u = makeStyles({
+const useStyles$x = makeStyles({
     root: {
         position: "absolute",
         top: 0,
@@ -12928,7 +13001,7 @@ const useStyles$u = makeStyles({
  * @returns The playhead component
  */
 const PlayHead = ({ width, height: _height }) => {
-    const styles = useStyles$u();
+    const styles = useStyles$x();
     const { state, actions, observables } = useCurveEditor();
     const [isDragging, setIsDragging] = useState(false);
     // Use refs for all mutable values to avoid render cycles
@@ -13079,7 +13152,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$t = makeStyles({
+const useStyles$w = makeStyles({
     root: {
         display: "flex",
         flexDirection: "row",
@@ -13111,7 +13184,7 @@ const useStyles$t = makeStyles({
  * @returns The frame bar component
  */
 const FrameBar = ({ width }) => {
-    const styles = useStyles$t();
+    const styles = useStyles$w();
     const { state, observables } = useCurveEditor();
     const containerRef = useRef(null);
     const [scale, setScale] = useState(1);
@@ -13169,7 +13242,7 @@ const FrameBar = ({ width }) => {
     return (jsx("div", { className: styles.root, ref: containerRef, children: renderTicks() }));
 };
 
-const useStyles$s = makeStyles({
+const useStyles$v = makeStyles({
     root: {
         display: "flex",
         flexDirection: "column",
@@ -13210,7 +13283,7 @@ const OFFSET_X = 10;
  * @returns The range frame bar component
  */
 const RangeFrameBar = ({ width }) => {
-    const styles = useStyles$s();
+    const styles = useStyles$v();
     const { state, actions, observables } = useCurveEditor();
     const svgRef = useRef(null);
     const [viewWidth, setViewWidth] = useState(width);
@@ -13321,7 +13394,7 @@ const RangeFrameBar = ({ width }) => {
                 }), renderKeyframes, renderActiveFrame] }) }));
 };
 
-const useStyles$r = makeStyles({
+const useStyles$u = makeStyles({
     root: {
         display: "flex",
         flexDirection: "column",
@@ -13353,7 +13426,7 @@ const useStyles$r = makeStyles({
  * @returns The canvas component
  */
 const Canvas = () => {
-    const styles = useStyles$r();
+    const styles = useStyles$u();
     const { observables } = useCurveEditor();
     const containerRef = useRef(null);
     const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
@@ -13383,7 +13456,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$q = makeStyles({
+const useStyles$t = makeStyles({
     root: {
         flex: 1,
         height: "25px",
@@ -13445,7 +13518,7 @@ const useStyles$q = makeStyles({
  * @returns The range selector component
  */
 const RangeSelector = () => {
-    const styles = useStyles$q();
+    const styles = useStyles$t();
     const { state, actions, observables } = useCurveEditor();
     const containerRef = useRef(null);
     const scrollbarRef = useRef(null);
@@ -13590,7 +13663,7 @@ function GetKeyAtAnyFrameIndex(animations, frame) {
     }
     return false;
 }
-const useStyles$p = makeStyles({
+const useStyles$s = makeStyles({
     root: {
         display: "flex",
         flexDirection: "row",
@@ -13647,7 +13720,7 @@ MediaControls.displayName = "MediaControls";
  * @returns The BottomBar component.
  */
 const BottomBar = () => {
-    const styles = useStyles$p();
+    const styles = useStyles$s();
     const { state, actions, observables } = useCurveEditor();
     // Track display frame separately for smooth updates during playback
     const [displayFrame, setDisplayFrame] = useState(state.activeFrame);
@@ -13762,7 +13835,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$o = makeStyles({
+const useStyles$r = makeStyles({
     root: {
         display: "flex",
         flexDirection: "column",
@@ -13811,7 +13884,7 @@ const useStyles$o = makeStyles({
  * @returns The curve editor content
  */
 const CurveEditorContent = () => {
-    const styles = useStyles$o();
+    const styles = useStyles$r();
     const { state, actions, observables } = useCurveEditor();
     const rootRef = useRef(null);
     const prepareRef = useRef(() => actions.prepare());
@@ -14653,7 +14726,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$n = makeStyles({
+const useStyles$q = makeStyles({
     lightsListDiv: {
         display: "flex",
         flexDirection: "column",
@@ -14663,7 +14736,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$n();
+    const classes = useStyles$q();
     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 }) }));
 };
@@ -14713,7 +14786,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$m = makeStyles({
+const useStyles$p = makeStyles({
     root: {
         display: "grid",
         gridTemplateRows: "repeat(1fr)",
@@ -14743,7 +14816,7 @@ const useStyles$m = makeStyles({
 const ComboBox = forwardRef((props, ref) => {
     ComboBox.displayName = "ComboBox";
     const comboId = useId();
-    const styles = useStyles$m();
+    const styles = useStyles$p();
     const { size } = useContext(ToolContext);
     // Find the label for the current value
     const getLabel = (value) => props.options.find((opt) => opt.value === value)?.label ?? "";
@@ -14766,7 +14839,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$l = makeStyles({
+const useStyles$o = makeStyles({
     linkDiv: {
         display: "flex",
         flexDirection: "row",
@@ -14791,7 +14864,7 @@ const useStyles$l = makeStyles({
 function EntitySelector(props) {
     const { value, onLink, getEntities, getName, filter, defaultValue } = props;
     const onChange = props.onChange;
-    const classes = useStyles$l();
+    const classes = useStyles$o();
     const comboBoxRef = useRef(null);
     // Build options with uniqueId as key
     const options = useMemo(() => {
@@ -14945,7 +15018,7 @@ const TextureUpload = (props) => {
     return jsx(UploadButton, { onUpload: handleUpload, accept: accept, title: "Upload Texture", label: label });
 };
 
-const useStyles$k = makeStyles({
+const useStyles$n = makeStyles({
     container: {
         display: "flex",
         flexDirection: "row",
@@ -14962,7 +15035,7 @@ const useStyles$k = makeStyles({
 const TextureSelector = (props) => {
     TextureSelector.displayName = "TextureSelector";
     const { scene, cubeOnly, value, onChange, onLink, defaultValue } = props;
-    const classes = useStyles$k();
+    const classes = useStyles$n();
     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]);
@@ -15330,6 +15403,22 @@ const MaterialTransparencyProperties = (props) => {
     const useAlphaTest = useProperty(material, "transparencyMode") === Material.MATERIAL_ALPHATEST;
     return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Alpha", target: material, propertyKey: "alpha", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "Transparency Mode", docLink: "https://doc.babylonjs.com/features/featuresDeepDive/materials/advanced/transparent_rendering/#the-transparencymode-property", target: material, propertyKey: "transparencyMode", options: TransparencyModeOptions, nullable: true, defaultValue: Material.MATERIAL_OPAQUE }), jsx(Collapse, { visible: hasAlphaCutOff && useAlphaTest, children: jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "alphaCutOff", target: material, propertyKey: "alphaCutOff", min: 0, max: 1, step: 0.01 }) }), jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "Alpha Mode", docLink: "https://doc.babylonjs.com/features/featuresDeepDive/materials/using/blendModes/#available-blend-modes", target: material, propertyKey: "alphaMode", options: AlphaModeOptions }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Separate Culling Pass", target: material, propertyKey: "separateCullingPass" })] }));
 };
+const TextureRepetitionModeOptions = [
+    { label: "None", value: Constants.TEXTURE_REPETITION_NONE },
+    { label: "Noise Blend (3 fetches)", value: Constants.TEXTURE_REPETITION_NOISE_BLEND },
+    { label: "Hex Tiling (3 fetches)", value: Constants.TEXTURE_REPETITION_HEX_TILING },
+    { label: "Tile Randomization (4 fetches)", value: Constants.TEXTURE_REPETITION_TILE_RANDOMIZATION },
+    { label: "Voronoi Bombing (9 fetches)", value: Constants.TEXTURE_REPETITION_VORONOI_BOMBING },
+];
+const MaterialTextureRepetitionProperties = (props) => {
+    const { material } = props;
+    const isHexTiling = useProperty(material, "textureRepetitionMode") === Constants.TEXTURE_REPETITION_HEX_TILING;
+    const hexParams = material.textureRepetitionHexTilingParams;
+    const setHexParam = useCallback((index, value) => {
+        hexParams[index] = value;
+    }, [hexParams]);
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "Mode", description: "Texture repetition breaking mode. Higher fetch counts produce better quality at higher cost.", target: material, propertyKey: "textureRepetitionMode", options: TextureRepetitionModeOptions }), jsxs(Collapse, { visible: isHexTiling, children: [jsx(SyncedSliderPropertyLine, { label: "Rotation Strength", description: "How much each hex tile is rotated (0 = no rotation, 1 = full rotation)", value: hexParams[0], onChange: (v) => setHexParam(0, v), min: 0, max: 1, step: 0.01 }), jsx(SyncedSliderPropertyLine, { label: "Fall-off Contrast", description: "How much luminance affects blending weight at tile borders", value: hexParams[1], onChange: (v) => setHexParam(1, v), min: 0, max: 1, step: 0.01 }), jsx(SyncedSliderPropertyLine, { label: "Exponent", description: "Controls the sharpness of weight falloff between tiles", value: hexParams[2], onChange: (v) => setHexParam(2, v), min: 1, max: 20, step: 0.5 }), jsx(SyncedSliderPropertyLine, { label: "Contrast", description: "Boost blending contrast (0.5 = neutral, higher = more contrast)", value: hexParams[3], onChange: (v) => setHexParam(3, v), min: 0.01, max: 0.99, step: 0.01 })] })] }));
+};
 const MaterialStencilProperties = (props) => {
     const { material } = props;
     const stencilEnabled = useProperty(material.stencil, "enabled");
@@ -15551,7 +15640,7 @@ async function EditNodeMaterial(material) {
     await material.edit({ nodeEditorConfig: { backgroundColor: material.getScene().clearColor } });
 }
 
-const useStyles$j = makeStyles({
+const useStyles$m = makeStyles({
     subsection: {
         marginTop: tokens.spacingVerticalM,
     },
@@ -15625,7 +15714,7 @@ const GradientBlockPropertyLine = (props) => {
 };
 const NodeMaterialInputProperties = (props) => {
     const { material } = props;
-    const classes = useStyles$j();
+    const classes = useStyles$m();
     const inputBlocks = useObservableState(useCallback(() => {
         const inspectorVisibleInputBlocks = material
             .getInputBlocks()
@@ -15877,7 +15966,7 @@ const OpenPBRMaterialBaseProperties = (props) => {
  */
 const OpenPBRMaterialSpecularProperties = (props) => {
     const { material } = props;
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Specular Weight", target: material, propertyKey: "specularWeight", min: 0, max: 1, step: 0.01, description: "Controls how strong the reflections appear.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Specular Weight", target: material, propertyKey: "specularWeightTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Specular Color", target: material, propertyKey: "specularColor", isLinearMode: true, description: "Tints the color of reflections.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Specular Color", target: material, propertyKey: "specularColorTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Specular Roughness", target: material, propertyKey: "specularRoughness", min: 0, max: 1, step: 0.01, description: "Controls how sharp or blurry reflections are.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Specular Roughness", target: material, propertyKey: "specularRoughnessTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Specular Roughness Anisotropy", target: material, propertyKey: "specularRoughnessAnisotropy", min: 0, max: 1, step: 0.01, description: "Stretches reflections in one direction for brushed or streaked looks. Requires specular_roughness > 0.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/microfacetmodel" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Specular Roughness Anisotropy", target: material, propertyKey: "specularRoughnessAnisotropyTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Specular IOR", target: material, propertyKey: "specularIor", min: 1, max: 3, step: 0.01, description: "Index of refraction is a physical value controlling the reflective intensity and refraction. The parameter has no effect on metals.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate" })] }));
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Specular Weight", target: material, propertyKey: "specularWeight", min: 0, max: 1, step: 0.01, description: "Controls how strong the reflections appear.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Specular Weight", target: material, propertyKey: "specularWeightTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Specular Color", target: material, propertyKey: "specularColor", isLinearMode: true, description: "Tints the color of reflections.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Specular Color", target: material, propertyKey: "specularColorTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Specular Roughness", target: material, propertyKey: "specularRoughness", min: 0, max: 1, step: 0.01, description: "Controls how sharp or blurry reflections are.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Specular Roughness", target: material, propertyKey: "specularRoughnessTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Specular Roughness Anisotropy", target: material, propertyKey: "specularRoughnessAnisotropy", min: 0, max: 1, step: 0.01, description: "Stretches reflections in one direction for brushed or streaked looks. Requires specular_roughness > 0.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/microfacetmodel" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Specular Roughness Anisotropy", target: material, propertyKey: "specularRoughnessAnisotropyTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Specular IOR", target: material, propertyKey: "specularIor", min: 1, max: 30, step: 0.01, description: "Index of refraction is a physical value controlling the reflective intensity and refraction. The parameter has no effect on metals.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate" })] }));
 };
 const OpenPBRMaterialTransmissionProperties = (props) => {
     const { material } = props;
@@ -16007,6 +16096,10 @@ const MaterialPropertiesServiceDefinition = {
                     section: "Stencil",
                     component: ({ context }) => jsx(MaterialStencilProperties, { material: context }),
                 },
+                {
+                    section: "Texture Repetition",
+                    component: ({ context }) => jsx(MaterialTextureRepetitionProperties, { material: context }),
+                },
             ],
         });
         const standardMaterialContentRegistration = propertiesService.addSectionContent({
@@ -16347,7 +16440,7 @@ function SaveMetadata(entity, metadata) {
         entity.metadata = metadata;
     }
 }
-const useStyles$i = makeStyles({
+const useStyles$l = makeStyles({
     mainDiv: {
         display: "flex",
         flexDirection: "column",
@@ -16367,7 +16460,7 @@ const useStyles$i = makeStyles({
  */
 const MetadataProperties = (props) => {
     const { entity } = props;
-    const classes = useStyles$i();
+    const classes = useStyles$l();
     const { size } = useContext(ToolContext);
     const metadata = useProperty(entity, "metadata");
     const stringifiedMetadata = useMemo(() => StringifyMetadata(metadata, false) ?? "", [metadata]);
@@ -17302,7 +17395,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$h = makeStyles({
+const useStyles$k = makeStyles({
     subsection: {
         marginTop: tokens.spacingVerticalM,
     },
@@ -17322,7 +17415,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$h();
+    const classes = useStyles$k();
     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();
@@ -17358,7 +17451,7 @@ const ParticleSystemSizeProperties = (props) => {
                         } })] }))] }));
 };
 
-const useStyles$g = makeStyles({
+const useStyles$j = makeStyles({
     subsection: {
         marginTop: tokens.spacingVerticalM,
     },
@@ -17384,7 +17477,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$g();
+    const classes = useStyles$j();
     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();
@@ -17452,7 +17545,7 @@ const ParticleSystemEmissionProperties = (props) => {
                         } })] }))] }));
 };
 
-const useStyles$f = makeStyles({
+const useStyles$i = makeStyles({
     subsection: {
         marginTop: tokens.spacingVerticalM,
     },
@@ -17469,7 +17562,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$f();
+    const classes = useStyles$i();
     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();
@@ -17489,7 +17582,7 @@ const ParticleSystemLifetimeProperties = (props) => {
                         } })] })), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Target stop duration", target: system, propertyKey: "targetStopDuration", min: 0, step: 0.1 })] }));
 };
 
-const useStyles$e = makeStyles({
+const useStyles$h = makeStyles({
     subsection: {
         marginTop: tokens.spacingVerticalM,
     },
@@ -17516,7 +17609,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$e();
+    const classes = useStyles$h();
     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);
@@ -17588,7 +17681,7 @@ const ParticleSystemColorProperties = (props) => {
                                 } })] }))] }))] }));
 };
 
-const useStyles$d = makeStyles({
+const useStyles$g = makeStyles({
     subsection: {
         marginTop: tokens.spacingVerticalM,
     },
@@ -17603,7 +17696,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$d();
+    const classes = useStyles$g();
     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();
@@ -17709,7 +17802,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$c = makeStyles({
+const useStyles$f = makeStyles({
     subsection: {
         marginTop: tokens.spacingVerticalM,
     },
@@ -17766,7 +17859,7 @@ const AttractorList = (props) => {
         gizmoManager.attachToMesh(attached);
         setControlledImpostor(attached);
     };
-    const classes = useStyles$c();
+    const classes = useStyles$f();
     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
@@ -17876,7 +17969,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$b = makeStyles({
+const useStyles$e = makeStyles({
     subsection: {
         marginTop: tokens.spacingVerticalM,
     },
@@ -17930,7 +18023,7 @@ const InputBlockPropertyLine = (props) => {
  */
 const ParticleSystemNodeEditorProperties = (props) => {
     const { particleSystem: system } = props;
-    const classes = useStyles$b();
+    const classes = useStyles$e();
     const source = system.source;
     const inputBlocks = useObservableState(useCallback(() => {
         if (!source) {
@@ -18791,14 +18884,14 @@ const SkeletonPropertiesServiceDefinition = {
     },
 };
 
-const useStyles$a = makeStyles({
+const useStyles$d = makeStyles({
     uniformWidth: {
         ...UniformWidthStyling,
     },
 });
 const SpinButtonPropertyLine = (props) => {
     SpinButtonPropertyLine.displayName = "SpinButtonPropertyLine";
-    const classes = useStyles$a();
+    const classes = useStyles$d();
     return (jsx(PropertyLine, { ...props, children: jsx(SpinButton, { ...props, className: mergeClasses(classes.uniformWidth, props.className) }) }));
 };
 
@@ -19046,7 +19139,7 @@ function _TextureFormatHasNoAlpha(format) {
     }
 }
 
-const useStyles$9 = makeStyles({
+const useStyles$c = makeStyles({
     root: {
         display: "flex",
         flexDirection: "column",
@@ -19098,7 +19191,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$9();
+    const classes = useStyles$c();
     const canvasRef = useRef(null);
     const [channels, setChannels] = useState(TextureChannelStates.ALL);
     const [face, setFace] = useState(0);
@@ -20008,7 +20101,7 @@ class TextureCanvasManager {
     }
 }
 
-const useStyles$8 = makeStyles({
+const useStyles$b = makeStyles({
     channelsBar: {
         display: "flex",
         flexDirection: "column",
@@ -20053,7 +20146,7 @@ const useStyles$8 = makeStyles({
  */
 const ChannelsBar = (props) => {
     const { channels, setChannels } = props;
-    const classes = useStyles$8();
+    const classes = useStyles$b();
     const toggleVisibility = useCallback((index) => {
         const newChannels = [...channels];
         newChannels[index] = { ...newChannels[index], visible: !newChannels[index].visible };
@@ -20083,7 +20176,7 @@ const ChannelsBar = (props) => {
         }) }));
 };
 
-const useStyles$7 = makeStyles({
+const useStyles$a = makeStyles({
     propertiesBar: {
         display: "flex",
         backgroundColor: tokens.colorNeutralBackground1,
@@ -20133,7 +20226,7 @@ const useStyles$7 = makeStyles({
     },
 });
 const PixelDataDisplay = ({ label, value }) => {
-    const classes = useStyles$7();
+    const classes = useStyles$a();
     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"];
@@ -20144,7 +20237,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$7();
+    const classes = useStyles$a();
     const uploadInputRef = useRef(null);
     const [width, setWidth] = useState(size.width);
     const [height, setHeight] = useState(size.height);
@@ -20179,7 +20272,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$6 = makeStyles({
+const useStyles$9 = makeStyles({
     statusBar: {
         display: "flex",
         backgroundColor: tokens.colorNeutralBackground1,
@@ -20207,14 +20300,14 @@ const useStyles$6 = makeStyles({
  */
 const StatusBar = (props) => {
     const { texture, mipLevel } = props;
-    const classes = useStyles$6();
+    const classes = useStyles$9();
     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$5 = makeStyles({
+const useStyles$8 = makeStyles({
     toolbar: {
         display: "flex",
         flexDirection: "column",
@@ -20251,7 +20344,7 @@ const useStyles$5 = makeStyles({
  */
 const ToolBar = (props) => {
     const { tools, changeTool, activeToolIndex, metadata, setMetadata, hasAlpha } = props;
-    const classes = useStyles$5();
+    const classes = useStyles$8();
     const computeRGBAColor = useCallback(() => {
         const opacityInt = Math.floor(metadata.alpha * 255);
         const opacityHex = opacityInt.toString(16).padStart(2, "0");
@@ -20280,7 +20373,7 @@ const ToolBar = (props) => {
                 }) })] }));
 };
 
-const useStyles$4 = makeStyles({
+const useStyles$7 = makeStyles({
     textureEditor: {
         display: "flex",
         flexDirection: "column",
@@ -20344,7 +20437,7 @@ const PREVIEW_UPDATE_DELAY_MS = 160;
  */
 const TextureEditor = (props) => {
     const { texture, toolProviders = [], window: editorWindow, onUpdate } = props;
-    const classes = useStyles$4();
+    const classes = useStyles$7();
     // Canvas refs
     const uiCanvasRef = useRef(null);
     const canvas2DRef = useRef(null);
@@ -20492,7 +20585,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$3 = makeStyles({
+const useStyles$6 = makeStyles({
     settingsContainer: {
         display: "flex",
         flexDirection: "column",
@@ -20512,7 +20605,7 @@ const Contrast = {
     name: "Contrast/Exposure",
     order: 500,
     icon: () => {
-        const classes = useStyles$3();
+        const classes = useStyles$6();
         return jsx(CircleHalfFillRegular, { className: classes.icon });
     },
     is3D: true,
@@ -20577,7 +20670,7 @@ const Contrast = {
                 setContrast(0);
             },
             settingsComponent: () => {
-                const classes = useStyles$3();
+                const classes = useStyles$6();
                 const [contrast, exposure] = useObservableState(useCallback(() => [_contrast, _exposure], []), stateChangedObservable);
                 const handleContrastChange = (_, data) => {
                     setContrast(data.value);
@@ -20678,7 +20771,7 @@ const Floodfill = {
     },
 };
 
-const useStyles$2 = makeStyles({
+const useStyles$5 = makeStyles({
     settingsContainer: {
         display: "flex",
         flexDirection: "column",
@@ -20802,7 +20895,7 @@ const Paintbrush = {
                 pointerObserver?.remove();
             },
             settingsComponent: () => {
-                const classes = useStyles$2();
+                const classes = useStyles$5();
                 const width = useObservableState(useCallback(() => _width, []), stateChangedObservable);
                 const handleWidthChange = (_, data) => {
                     setWidth(data.value);
@@ -22796,6 +22889,411 @@ 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}`,
+    },
+});
+/**
+ * Save/load controls for a scene's Smart Asset map.
+ * @param props - Component props.
+ * @returns The Smart Asset map controls.
+ */
+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;
+        }
+        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`);
+        }
+        catch (err) {
+            setStatusMessage(`Save error: ${err}`);
+        }
+        finally {
+            setBusyMessage("");
+        }
+    }, [scene, isBusy]);
+    const onLoadAssetMap = useCallback(async (files) => {
+        const file = files[0];
+        if (!file) {
+            return;
+        }
+        if (isBusy) {
+            return;
+        }
+        setBusyMessage("Loading assets...");
+        setStatusMessage("");
+        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`);
+        }
+        catch (err) {
+            setStatusMessage(`Load error: ${err}`);
+        }
+        finally {
+            setBusyMessage("");
+        }
+    }, [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 SmartAssetsPaneKey$1 = "Smart Assets";
+const SceneFileAccept = [".glb", ".gltf", ".babylon", ".obj"];
+const TextureFileAccept = Array.from(GetSmartAssetTextureExtensions());
+const AllAcceptString = [...SceneFileAccept, ...TextureFileAccept].join(",");
+// eslint-disable-next-line @typescript-eslint/naming-convention
+function _isTextureExtension(ext) {
+    return GetSmartAssetTextureExtensions().has(ext);
+}
+/**
+ * Inspector pane service that hosts the Smart Assets pane.
+ */
+const SmartAssetsServiceDefinition = {
+    friendlyName: "Smart Assets",
+    consumes: [ShellServiceIdentity, SceneContextIdentity, SelectionServiceIdentity],
+    factory: (shellService, sceneContext, selectionService) => {
+        const paneRegistration = shellService.addSidePane({
+            key: SmartAssetsPaneKey$1,
+            title: SmartAssetsPaneKey$1,
+            icon: CubeRegular,
+            horizontalLocation: "right",
+            verticalLocation: "top",
+            order: 395,
+            teachingMoment: false,
+            content: () => {
+                const scene = useObservableState(() => sceneContext.currentScene, sceneContext.currentSceneObservable);
+                return scene ? jsx(SmartAssetsPane, { scene: scene, selectionService: selectionService }) : null;
+            },
+        });
+        return {
+            dispose: () => {
+                paneRegistration.dispose();
+            },
+        };
+    },
+};
+// ── Styles ──
+const useStyles$3 = makeStyles({
+    assetRow: {
+        display: "flex",
+        alignItems: "center",
+        gap: tokens.spacingHorizontalXS,
+        padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS}`,
+        fontSize: tokens.fontSizeBase100,
+        borderBottom: `1px solid ${tokens.colorNeutralStroke3}`,
+    },
+    assetKey: {
+        fontWeight: tokens.fontWeightSemibold,
+        minWidth: 0,
+        flex: 1,
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+    },
+    assetUrl: {
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+        minWidth: 0,
+        flex: 1,
+        opacity: 0.7,
+    },
+    assetActions: {
+        display: "flex",
+        gap: tokens.spacingHorizontalXXS,
+        flexShrink: 0,
+    },
+    emptyMessage: {
+        padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,
+        fontSize: tokens.fontSizeBase100,
+        opacity: 0.5,
+        fontStyle: "italic",
+    },
+    statusMessage: {
+        padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalS}`,
+        fontSize: tokens.fontSizeBase100,
+        opacity: 0.7,
+    },
+    hiddenInput: {
+        display: "none",
+    },
+});
+// ── Smart Assets Pane ──
+const SmartAssetsPane = (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 }) })] }));
+};
+// ── Smart Asset List ──
+const SmartAssetList = (props) => {
+    const { scene, selectionService } = props;
+    const styles = useStyles$3();
+    const fileInputRef = useRef(null);
+    const [status, setStatus] = useState("");
+    // Force the icon-only row action buttons to render in compact ("small") size
+    // even when the inspector's global ToolContext is "medium". They live in a
+    // tight row and the medium-size buttons crowd the layout.
+    const toolContext = useContext(ToolContext);
+    const compactToolContext = useMemo(() => ({ ...toolContext, size: "small" }), [toolContext]);
+    // Subscribe reactively to changes — re-renders the asset list whenever
+    // RegisterSmartAsset / Load / Remove / Reload fire onChangedObservable.
+    const sam = GetSmartAssetManager(scene);
+    const assets = useObservableState(useCallback(() => Array.from(GetAllSmartAssets(scene), ([key, url]) => ({ key, url })), [scene]), sam.onChangedObservable);
+    const onAddAsset = useCallback(() => {
+        fileInputRef.current?.click();
+    }, []);
+    const onFileSelected = useCallback(async (e) => {
+        const files = e.target.files;
+        if (!files || files.length === 0) {
+            return;
+        }
+        for (let i = 0; i < files.length; i++) {
+            const file = files[i];
+            const key = file.name.replace(/\.[^/.]+$/, "");
+            const ext = _getExtension(file.name).toLowerCase();
+            const isTexture = _isTextureExtension(ext);
+            const blobUrl = URL.createObjectURL(file);
+            const options = { ...(ext ? { extension: ext } : {}), ...(isTexture ? { type: "texture" } : {}) };
+            try {
+                if (isTexture) {
+                    // eslint-disable-next-line no-await-in-loop
+                    await LoadSmartAssetTextureAsync(scene, key, blobUrl, options);
+                }
+                else {
+                    // Temporarily set onAssetNotFound to return the File so SAM's
+                    // retry path can use the extension hint and track loaded objects.
+                    const samForOverride = GetSmartAssetManager(scene);
+                    const savedHandler = samForOverride.onAssetNotFound;
+                    samForOverride.onAssetNotFound = async () => file;
+                    try {
+                        // eslint-disable-next-line no-await-in-loop
+                        await LoadSmartAssetAsync(scene, key, blobUrl, options);
+                    }
+                    finally {
+                        samForOverride.onAssetNotFound = savedHandler;
+                    }
+                }
+                setStatus(`Added: ${key}`);
+            }
+            catch {
+                setStatus(`Failed to load: ${key}`);
+            }
+        }
+        if (fileInputRef.current) {
+            fileInputRef.current.value = "";
+        }
+    }, [scene]);
+    const onRemoveAsset = useCallback(async (key) => {
+        await RemoveSmartAssetAsync(scene, key);
+        setStatus(`Removed: ${key}`);
+    }, [scene]);
+    const onReloadAsset = useCallback(async (key) => {
+        await ReloadSmartAssetAsync(scene, key);
+        setStatus(`Reloaded: ${key}`);
+    }, [scene]);
+    const onSwapAsset = useCallback((key) => {
+        const doSwapAsync = async (file, fileHandle) => {
+            const sam = GetSmartAssetManager(scene);
+            const blobUrl = URL.createObjectURL(file);
+            const ext = _getExtension(file.name).toLowerCase();
+            const isTexture = _isTextureExtension(ext);
+            if (isTexture) {
+                // Find the old texture tracked by this key
+                let oldTex;
+                for (const tex of scene.textures) {
+                    if (FindSmartAssetKeyForObject(scene, tex) === key) {
+                        oldTex = tex;
+                        break;
+                    }
+                }
+                // Load the new texture via SAM so it stays tracked by key.
+                // Pass reloadSource so Reload can re-read the file from disk.
+                const newTex = await LoadSmartAssetTextureAsync(scene, key, blobUrl, {
+                    ...(ext ? { extension: ext } : {}),
+                    type: "texture",
+                    reloadSource: fileHandle ? async () => await fileHandle.getFile() : undefined,
+                });
+                // Replace references on all materials that used the old texture.
+                // Only Standard/PBR-style slot names are rewritten here; NodeMaterial,
+                // ShaderMaterial, BackgroundMaterial, and other custom materials with
+                // non-standard texture slots will need to be updated manually.
+                if (oldTex) {
+                    const texSlots = ["albedoTexture", "bumpTexture", "metallicTexture", "emissiveTexture", "ambientTexture", "reflectivityTexture", "opacityTexture"];
+                    for (const mat of scene.materials) {
+                        for (const slot of texSlots) {
+                            if (mat[slot] === oldTex) {
+                                mat[slot] = newTex;
+                            }
+                        }
+                    }
+                    oldTex.dispose();
+                }
+            }
+            else {
+                // Scene file swap (GLB, glTF, etc.)
+                await UnloadSmartAssetAsync(scene, key);
+                // Use onAssetNotFound to provide the File so SAM tracks loaded objects.
+                const savedHandler = sam.onAssetNotFound;
+                sam.onAssetNotFound = async () => file;
+                try {
+                    // Pass reloadSource so Reload can re-read the file from disk.
+                    await LoadSmartAssetAsync(scene, key, blobUrl, {
+                        ...(ext ? { extension: ext } : {}),
+                        reloadSource: fileHandle ? async () => await fileHandle.getFile() : undefined,
+                    });
+                }
+                finally {
+                    sam.onAssetNotFound = savedHandler;
+                }
+            }
+            // Notify after everything is loaded and tracked so the UI re-renders
+            // with the correct provEntity links
+            sam.onChangedObservable.notifyObservers();
+            setStatus(`Swapped: ${key}`);
+        };
+        // Prefer showOpenFilePicker (File System Access API) so we get a
+        // FileSystemFileHandle that lets Reload re-read fresh contents from disk.
+        const windowWithPicker = window;
+        if (typeof windowWithPicker.showOpenFilePicker === "function") {
+            const pickerAsync = async () => {
+                let handle;
+                try {
+                    [handle] = await windowWithPicker.showOpenFilePicker({
+                        types: [
+                            {
+                                description: "Assets",
+                                accept: {
+                                    // eslint-disable-next-line @typescript-eslint/naming-convention
+                                    "model/*": SceneFileAccept,
+                                    // eslint-disable-next-line @typescript-eslint/naming-convention
+                                    "image/*": TextureFileAccept,
+                                },
+                            },
+                        ],
+                    });
+                }
+                catch (err) {
+                    // User cancelled the picker (AbortError) — silently ignore.
+                    if (err?.name !== "AbortError") {
+                        setStatus(`Swap cancelled: ${err}`);
+                    }
+                    return;
+                }
+                try {
+                    const file = await handle.getFile();
+                    await doSwapAsync(file, handle);
+                }
+                catch (err) {
+                    setStatus(`Failed to swap ${key}: ${err}`);
+                }
+            };
+            void pickerAsync();
+        }
+        else {
+            // Fallback for browsers without File System Access API
+            const input = document.createElement("input");
+            input.type = "file";
+            input.accept = AllAcceptString;
+            input.onchange = async () => {
+                const file = input.files?.[0];
+                if (!file) {
+                    return;
+                }
+                try {
+                    await doSwapAsync(file);
+                }
+                catch (err) {
+                    setStatus(`Failed to swap ${key}: ${err}`);
+                }
+            };
+            input.click();
+        }
+    }, [scene]);
+    return (jsxs(Fragment, { children: [assets.length === 0 && jsx(Caption1, { className: styles.emptyMessage, children: "No smart assets registered. Add assets to begin." }), assets.map((a) => {
+                // Find the first mesh produced by this key for click-to-select
+                const provEntity = _findFirstEntityForKey(a.key, scene);
+                return (jsxs("div", { className: styles.assetRow, children: [jsx(CubeRegular, { fontSize: 14 }), provEntity ? (jsx(Caption1, { className: styles.assetKey, title: a.key, children: jsx(Link, { value: a.key, size: "small", onLink: () => (selectionService.selectedEntity = provEntity) }) })) : (jsx(Caption1, { className: styles.assetKey, title: a.key, children: a.key })), jsx(Caption1, { className: styles.assetUrl, title: a.url, children: _shortenUrl(a.url) }), jsx(ToolContext.Provider, { value: compactToolContext, children: jsxs("div", { className: styles.assetActions, children: [jsx(Button, { appearance: "subtle", icon: LinkRegular, title: `Swap URL for ${a.key}`, onClick: () => onSwapAsset(a.key) }), jsx(Button, { appearance: "subtle", icon: ArrowSyncRegular, title: `Reload ${a.key}`, onClick: async () => await onReloadAsset(a.key) }), jsx(Button, { appearance: "subtle", icon: DeleteRegular, title: `Remove ${a.key}`, onClick: async () => await onRemoveAsset(a.key) })] }) })] }, a.key));
+            }), 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 ──
+/**
+ * Finds the first scene entity produced by a smart asset key, for click-to-select.
+ * Prefers non-root meshes, then materials, then textures.
+ * @param key - The smart asset key.
+ * @param scene - The scene to search.
+ * @returns The first matching entity, or null if not found.
+ */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+function _findFirstEntityForKey(key, scene) {
+    for (const mesh of scene.meshes) {
+        if (mesh.name !== "__root__" && FindSmartAssetKeyForObject(scene, mesh) === key) {
+            return mesh;
+        }
+    }
+    for (const mat of scene.materials) {
+        if (FindSmartAssetKeyForObject(scene, mat) === key) {
+            return mat;
+        }
+    }
+    for (const tex of scene.textures) {
+        if (FindSmartAssetKeyForObject(scene, tex) === key) {
+            return tex;
+        }
+    }
+    return null;
+}
+/**
+ * Shortens a URL for display, collapsing blob/data URLs and long paths.
+ * @param url - The URL to shorten.
+ * @returns A shortened display string.
+ */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+function _shortenUrl(url) {
+    if (url.startsWith("blob:")) {
+        return "(local file — blob)";
+    }
+    if (url.startsWith("data:")) {
+        const mimeEnd = url.indexOf(";");
+        const mime = mimeEnd > 5 ? url.substring(5, mimeEnd) : "binary";
+        return `(embedded ${mime})`;
+    }
+    const parts = url.split("/");
+    return parts.length > 3 ? "…/" + parts.slice(-2).join("/") : url;
+}
+/**
+ * Returns the file extension from a filename or URL, including the leading dot.
+ * @param url - The URL or filename to extract the extension from.
+ * @returns The extension string (e.g. ".glb"), or empty string if none found.
+ */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+function _getExtension(url) {
+    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);
+    }
+    return "";
+}
+
 const AnimationGroupLoadingModes = [
     { label: "Clean", value: 0 /* SceneLoaderAnimationGroupLoadingMode.Clean */ },
     { label: "Stop", value: 1 /* SceneLoaderAnimationGroupLoadingMode.Stop */ },
@@ -23279,6 +23777,143 @@ const UserFeedbackServiceDefinition = {
     },
 };
 
+/**
+ * A shared dialog component wrapping Fluent UI Dialog with Babylon conventions.
+ *
+ * @example
+ * ```tsx
+ * <Dialog
+ *     open={isOpen}
+ *     title="Confirm Action"
+ *     onDismiss={() => setIsOpen(false)}
+ *     actions={[
+ *         { label: "Cancel", onClick: () => setIsOpen(false) },
+ *         { label: "Confirm", onClick: handleConfirm, appearance: "primary" },
+ *     ]}
+ * >
+ *     <Text>Are you sure you want to proceed?</Text>
+ * </Dialog>
+ * ```
+ *
+ * @param props - The dialog props.
+ * @returns The dialog element.
+ */
+const Dialog = (props) => {
+    const { open, title, children, actions, onDismiss } = props;
+    return (jsx(Dialog$1, { open: open, modalType: "modal", onOpenChange: (_, data) => {
+            if (!data.open && onDismiss) {
+                onDismiss();
+            }
+        }, children: jsx(DialogSurface, { children: jsxs(DialogBody, { children: [jsx(DialogTitle, { action: onDismiss ? (jsx(DialogTrigger, { action: "close", children: jsx(Button, { appearance: "subtle", "aria-label": "close", icon: DismissRegular }) })) : undefined, children: title }), jsx(DialogContent, { children: children }), actions && actions.length > 0 && (jsx(DialogActions, { children: actions.map((action, index) => (jsx(Button, { appearance: action.appearance ?? "secondary", onClick: action.onClick, label: action.label }, index))) }))] }) }) }));
+};
+
+const SmartAssetsPaneKey = "Smart Assets";
+const SceneFileExtensions = [".glb", ".gltf", ".babylon", ".obj"];
+const PromptAcceptString = [...SceneFileExtensions, ...Array.from(GetSmartAssetTextureExtensions())].join(",");
+const useStyles$2 = makeStyles({
+    hiddenInput: {
+        display: "none",
+    },
+    body: {
+        display: "flex",
+        flexDirection: "column",
+        gap: tokens.spacingVerticalS,
+    },
+    keyRow: {
+        display: "flex",
+        gap: tokens.spacingHorizontalXS,
+    },
+    keyLabel: {
+        fontWeight: tokens.fontWeightSemibold,
+    },
+    url: {
+        fontFamily: tokens.fontFamilyMonospace,
+        wordBreak: "break-all",
+        opacity: 0.8,
+    },
+});
+const SmartAssetMissingPromptHost = (props) => {
+    const { onAssetSelected } = props;
+    const inputRef = useRef(null);
+    const pendingMissingAssetRef = useRef(null);
+    const [pendingMissingAsset, setPendingMissingAsset] = useState(null);
+    const classes = useStyles$2();
+    const resolvePendingMissingAsset = useCallback((value) => {
+        pendingMissingAssetRef.current?.resolve(value);
+        pendingMissingAssetRef.current = null;
+        setPendingMissingAsset(null);
+    }, []);
+    useEffect(() => {
+        SetInspectorAssetNotFoundPromptHandler(async (keyName, expectedUrl) => await new Promise((resolve) => {
+            const request = { keyName, expectedUrl, resolve };
+            pendingMissingAssetRef.current = request;
+            setPendingMissingAsset(request);
+        }));
+        return () => {
+            SetInspectorAssetNotFoundPromptHandler(null);
+            pendingMissingAssetRef.current?.resolve(null);
+            pendingMissingAssetRef.current = null;
+        };
+    }, []);
+    const onSkip = useCallback(() => {
+        resolvePendingMissingAsset(null);
+    }, [resolvePendingMissingAsset]);
+    const onLocate = useCallback(() => {
+        inputRef.current?.click();
+    }, []);
+    const onFileSelected = useCallback((event) => {
+        const file = event.target.files?.[0] ?? null;
+        resolvePendingMissingAsset(file);
+        event.target.value = "";
+        if (file) {
+            onAssetSelected();
+        }
+    }, [resolvePendingMissingAsset, onAssetSelected]);
+    if (!pendingMissingAsset) {
+        return null;
+    }
+    const shortUrl = pendingMissingAsset.expectedUrl.length > 60 ? "..." + pendingMissingAsset.expectedUrl.slice(-50) : pendingMissingAsset.expectedUrl;
+    return (jsx(Dialog, { open: true, title: "Asset not found", onDismiss: onSkip, actions: [
+            { label: "Skip", onClick: onSkip },
+            { label: "Locate File...", appearance: "primary", onClick: onLocate },
+        ], children: jsxs("div", { className: classes.body, children: [jsxs("div", { className: classes.keyRow, children: [jsx(Body1, { className: classes.keyLabel, children: "Key:" }), jsx(Body1, { children: pendingMissingAsset.keyName })] }), jsx(Caption1, { className: classes.url, title: pendingMissingAsset.expectedUrl, children: shortUrl }), jsx(Body1, { children: "Locate the file or click Skip to continue without it." }), jsx("input", { ref: inputRef, type: "file", accept: PromptAcceptString, className: classes.hiddenInput, onChange: onFileSelected })] }) }));
+};
+/**
+ * Registers the Inspector Smart Asset missing-file prompt host.
+ */
+const SmartAssetPromptServiceDefinition = {
+    friendlyName: "Smart Asset Prompt Service",
+    consumes: [ShellServiceIdentity, SceneContextIdentity],
+    factory: (shellService, sceneContext) => {
+        const focusSmartAssetsPane = () => {
+            shellService.sidePanes.find((pane) => pane.key === SmartAssetsPaneKey)?.select();
+        };
+        const registration = shellService.addCentralContent({
+            key: "Smart Asset Missing Prompt",
+            component: () => jsx(SmartAssetMissingPromptHost, { onAssetSelected: focusSmartAssetsPane }),
+            order: 1000,
+        });
+        let restoreHandler = null;
+        const installForCurrentScene = () => {
+            restoreHandler?.();
+            restoreHandler = null;
+            const currentScene = sceneContext.currentScene;
+            if (currentScene) {
+                restoreHandler = installInspectorAssetNotFoundHandler(GetSmartAssetManager(currentScene));
+            }
+        };
+        installForCurrentScene();
+        const sceneObserver = sceneContext.currentSceneObservable.add(installForCurrentScene);
+        return {
+            dispose: () => {
+                registration.dispose();
+                sceneObserver.remove();
+                restoreHandler?.();
+            },
+        };
+    },
+};
+
 // TODO: The key should probably be the Canvas, because we only want to show one inspector instance per canvas.
 //       If it is called for a different scene that is rendering to the same canvas, then we should probably
 //       switch the inspector instance to that scene (once this is supported).
@@ -23461,7 +24096,7 @@ function ShowInspector(scene, options = {}) {
         // Stats pane tab and related services.
         StatsServiceDefinition, 
         // Tools pane tab and related services.
-        ToolsServiceDefinition, ExportServiceDefinition, GLTFAnimationImportServiceDefinition, GLTFLoaderOptionsServiceDefinition, GLTFValidationServiceDefinition, CaptureToolsDefinition, 
+        ToolsServiceDefinition, ExportServiceDefinition, SmartAssetPromptServiceDefinition, SmartAssetsServiceDefinition, 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).
@@ -24322,5 +24957,5 @@ const TextAreaPropertyLine = (props) => {
 // Attach Inspector v2 to Scene.debugLayer as a side effect for back compat.
 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, useAngleConverters as b7, useAsyncResource as b8, useColor3Property as b9, useColor4Property as ba, useEventListener as bb, useEventfulState as bc, useKeyListener as bd, useKeyState as be, useObservableCollection as bf, useOrderedObservableCollection as bg, usePollingObservable as bh, usePropertyChangedNotifier as bi, useQuaternionProperty as bj, useResource as bk, useTheme as bl, useThemeMode as bm, useVector3Property as bn, 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-D0JXVQQf.js.map
+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