@babylonjs/inspector 8.51.2 → 8.52.0

package/lib/{index-DrQrky1o.js → index-Cmd13UXt.js}

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { createContext, forwardRef, useContext, useState, useCallback, Component, useMemo, useEffect, useRef, useReducer, Children, isValidElement, useLayoutEffect, cloneElement, useImperativeHandle, 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, mergeClasses, Body1Strong, useId, useToastController, Toast, ToastTitle, FluentProvider, Toaster, Checkbox as Checkbox$1, createLightTheme, createDarkTheme, TeachingPopover, TeachingPopoverSurface, TeachingPopoverHeader, TeachingPopoverBody, Switch as Switch$1, RendererProvider, createDOMRenderer, Menu, MenuTrigger, SplitButton, MenuPopover, MenuList, MenuItem, Toolbar as Toolbar$1, ToolbarRadioButton, MenuGroup, MenuGroupHeader, treeItemLevelToken, FlatTree, FlatTreeItem, TreeItemLayout, MenuDivider, MenuItemCheckbox, SpinButton as SpinButton$1, Input, Dropdown as Dropdown$1, Option, Popover as Popover$1, PopoverTrigger, PopoverSurface, ColorPicker, ColorArea, ColorSlider, AlphaSlider, ColorSwatch, PresenceBadge, Slider, MenuItemRadio, Dialog, DialogSurface, DialogBody, DialogTitle, DialogContent, DialogActions, List as List$1, ListItem, Badge, Label, MessageBarTitle, Subtitle2, useComboboxFilter, Combobox, Textarea as Textarea$1, ToolbarButton, ToolbarDivider, Field } from '@fluentui/react-components';
+import { tokens, makeStyles, Tooltip as Tooltip$1, Button as Button$1, Spinner, Link as Link$1, Caption1, Body1, 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, mergeClasses, Body1Strong, useId, useToastController, Toast, ToastTitle, FluentProvider, Toaster, Checkbox as Checkbox$1, createLightTheme, createDarkTheme, TeachingPopover, TeachingPopoverSurface, TeachingPopoverHeader, TeachingPopoverBody, Switch as Switch$1, createDOMRenderer, RendererProvider, Menu, MenuTrigger, SplitButton, MenuPopover, MenuList, MenuItem, Toolbar as Toolbar$1, ToolbarRadioButton, MenuGroup, MenuGroupHeader, treeItemLevelToken, FlatTree, FlatTreeItem, TreeItemLayout, MenuDivider, MenuItemCheckbox, SpinButton as SpinButton$1, Input, Dropdown as Dropdown$1, Option, Popover as Popover$1, PopoverTrigger, PopoverSurface, ColorPicker, ColorArea, ColorSlider, AlphaSlider, ColorSwatch, PresenceBadge, Slider, MenuItemRadio, Dialog, DialogSurface, DialogBody, DialogTitle, DialogContent, DialogActions, List as List$1, ListItem, Badge, Label, MessageBarTitle, Subtitle2, useComboboxFilter, Combobox, 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, ArrowExpandAllRegular, ArrowCollapseAllRegular, CubeTreeRegular, BugRegular, ArrowUploadRegular, ArrowDownloadRegular, StopRegular, RecordRegular, DataBarHorizontalRegular, WrenchRegular, WeatherSunnyRegular, WeatherMoonRegular, 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, LightbulbRegular, VideoFilled, VideoRegular, FlashlightRegular, FlashlightOffRegular, DropRegular, BlurRegular, PipelineRegular, PersonWalkingRegular, DataLineRegular, SoundWaveCircleRegular, PersonSquareRegular, LayerDiagonalPersonRegular, ImageEditRegular, ImageRegular, TargetRegular, PersonFeedbackRegular, BranchRegular, DeleteFilled } from '@fluentui/react-icons';
 import { Color3, Color4 } from '@babylonjs/core/Maths/math.color.js';
 import { Vector3, Quaternion, Matrix, Vector2, Vector4, TmpVectors } from '@babylonjs/core/Maths/math.vector.js';
@@ -1258,9 +1258,9 @@ function useAccordionSectionItemState(props) {
         }
         prevItemIdRef.current = itemId;
     }, [itemId, sectionCtx?.sectionId]);
-    // Register item and detect duplicates
+    // Register item and detect duplicates (skip nested items, as children of other AccordionSectionItem should not participate in pin/hide/search).
     useEffect(() => {
-        if (!accordionCtx || !itemUniqueId) {
+        if (!accordionCtx || !itemUniqueId || isNested) {
             return;
         }
         const { registeredItemIds } = accordionCtx;
@@ -1272,7 +1272,7 @@ function useAccordionSectionItemState(props) {
         return () => {
             registeredItemIds.delete(itemUniqueId);
         };
-    }, [accordionCtx, itemUniqueId, itemId, itemLabel, sectionCtx?.sectionId]);
+    }, [accordionCtx, itemUniqueId, itemId, itemLabel, sectionCtx?.sectionId, isNested]);
     // If no context, static item, or nested, return undefined
     if (!accordionCtx || staticItem) {
         return undefined;
@@ -1660,12 +1660,12 @@ const ToggleButton = (props) => {
     const classes = useStyles$R();
     const [checked, setChecked] = useState(value);
     const toggle = useCallback(() => {
-        setChecked((prev) => {
-            const enabled = !prev;
+        setChecked((prevChecked) => {
+            const enabled = !prevChecked;
             onChange(enabled);
             return enabled;
         });
-    }, [setChecked]);
+    }, [onChange]);
     useEffect(() => {
         setChecked(props.value);
     }, [props.value]);
@@ -2752,22 +2752,9 @@ const ChildWindow = (props) => {
             body.style.padding = "0";
             body.style.display = "flex";
             body.style.overflow = "hidden";
-            const applyWindowState = () => {
-                // Setup the window state, including creating a Fluent/Griffel "renderer" for managing runtime styles/classes in the child window.
-                setWindowState({ mountNode: body, renderer: createDOMRenderer(childWindow.document) });
-                onOpenChange?.(true);
-            };
-            // Once the child window document is ready, setup the window state which will trigger another effect that renders into the child window.
-            if (childWindow.document.readyState === "complete") {
-                applyWindowState();
-            }
-            else {
-                const onChildWindowLoad = () => {
-                    applyWindowState();
-                };
-                childWindow.addEventListener("load", onChildWindowLoad, { once: true });
-                disposeActions.push(() => childWindow.removeEventListener("load", onChildWindowLoad));
-            }
+            // Setup the window state, including creating a Fluent/Griffel "renderer" for managing runtime styles/classes in the child window.
+            setWindowState({ mountNode: body, renderer: createDOMRenderer(childWindow.document) });
+            onOpenChange?.(true);
             // When the child window is closed for any reason, transition back to a closed state.
             const onChildWindowUnload = () => {
                 setWindowState(undefined);
@@ -3640,7 +3627,7 @@ const SelectionServiceDefinition = {
                 selectedEntityObservable.notifyObservers();
                 if (item) {
                     const disposable = item;
-                    if (disposable.dispose) {
+                    if (typeof disposable.dispose === "function") {
                         disposedHook = InterceptFunction(disposable, "dispose", { afterCall: () => setSelectedItem(null) });
                     }
                 }
@@ -4005,7 +3992,7 @@ function useSceneExplorerDragDrop(options) {
 
 const SyntheticUniqueIds = new WeakMap();
 function GetEntityId(entity) {
-    if (entity.uniqueId !== undefined) {
+    if ("uniqueId" in entity && typeof entity.uniqueId === "number") {
         return entity.uniqueId;
     }
     let id = SyntheticUniqueIds.get(entity);
@@ -4014,6 +4001,13 @@ function GetEntityId(entity) {
     }
     return id;
 }
+function IsEntityHidden(entity) {
+    return ("reservedDataStore" in entity &&
+        typeof entity.reservedDataStore === "object" &&
+        entity.reservedDataStore &&
+        "hidden" in entity.reservedDataStore &&
+        entity.reservedDataStore.hidden === true);
+}
 function GetEntitySection(entityItem) {
     let current = entityItem;
     while (current.type === "entity") {
@@ -4331,7 +4325,7 @@ const EntityTreeItem = (props) => {
 };
 const SceneExplorer = (props) => {
     const classes = useStyles$L();
-    const { sections, entityCommandProviders, sectionCommandProviders, scene, selectedEntity } = props;
+    const { sections, entityCommandProviders, sectionCommandProviders, scene, selectedEntity = null } = props;
     const [openItems, setOpenItems] = useState(new Set());
     const [sceneVersion, setSceneVersion] = useState(0);
     const scrollViewRef = useRef(null);
@@ -4400,7 +4394,7 @@ const SceneExplorer = (props) => {
             scene: scene,
         };
         for (const section of sections) {
-            const rootEntities = section.getRootEntities().filter((entity) => !entity.reservedDataStore?.hidden);
+            const rootEntities = section.getRootEntities().filter((entity) => !IsEntityHidden(entity));
             const sectionTreeItem = {
                 type: "section",
                 sectionName: section.displayName,
@@ -4432,7 +4426,7 @@ const SceneExplorer = (props) => {
             (treeItem) => {
                 if (section.getEntityChildren) {
                     const children = section.getEntityChildren(treeItem.entity);
-                    return children.filter((child) => !child.reservedDataStore?.hidden).map((child) => createEntityTreeItemData(child, treeItem));
+                    return children.filter((child) => !IsEntityHidden(child)).map((child) => createEntityTreeItemData(child, treeItem));
                 }
                 return null;
             }, 
@@ -6042,7 +6036,13 @@ const SpinButton = forwardRef((props, ref) => {
     const [isFocusedShiftKeyPressed, setIsFocusedShiftKeyPressed] = useState(false);
     // step and forceInt are not mutually exclusive since there could be cases where you want to forceInt but have spinButton jump >1 int per spin
     const step = CoerceStepValue(props.step ?? 1, isUnfocusedAltKeyPressed || isFocusedAltKeyPressed, isUnfocusedShiftKeyPressed || isFocusedShiftKeyPressed);
-    const precision = Math.min(4, Math.max(0, CalculatePrecision(step))); // Cap precision at 4 to avoid wild numbers
+    const stepPrecision = Math.max(0, CalculatePrecision(step));
+    const valuePrecision = Math.max(0, CalculatePrecision(value));
+    // Display precision: controls how many decimals are shown in the formatted displayValue. Cap at 4 to avoid wild numbers
+    const displayPrecision = Math.min(4, Math.max(stepPrecision, valuePrecision));
+    // Set to large const to prevent Fluent from rounding user-entered values on commit
+    // We control display formatting ourselves via displayValue, so this only affects internal rounding. The value stored internally will still have max precision
+    const fluentPrecision = 20;
     useEffect(() => {
         if (props.value !== lastCommittedValue.current) {
             lastCommittedValue.current = props.value;
@@ -6070,6 +6070,30 @@ const SpinButton = forwardRef((props, ref) => {
             tryCommitValue(data.value);
         }
     };
+    // Strip the unit suffix (e.g. "deg" or " deg") from the raw input value before evaluating expressions.
+    const stripUnit = (val) => {
+        if (!props.unit) {
+            return val;
+        }
+        const regex = new RegExp("\\s*" + props.unit + "$");
+        const match = val.match(regex);
+        if (match) {
+            return val.slice(0, -match[0].length);
+        }
+        return val;
+    };
+    // Allow arbitrary expressions, primarily for math operations (e.g. 10*60 for 10 minutes in seconds).
+    // Use Function constructor to safely evaluate the expression without allowing access to scope.
+    // If the expression is invalid, fallback to NaN which will be caught by validateValue and prevent committing.
+    const evaluateExpression = (rawValue) => {
+        const val = stripUnit(rawValue).trim();
+        try {
+            return Number(Function(`"use strict";return (${val})`)());
+        }
+        catch {
+            return NaN;
+        }
+    };
     const handleKeyDown = (event) => {
         if (event.key === "Alt") {
             setIsFocusedAltKeyPressed(true);
@@ -6077,28 +6101,32 @@ const SpinButton = forwardRef((props, ref) => {
         else if (event.key === "Shift") {
             setIsFocusedShiftKeyPressed(true);
         }
+        // Evaluate on Enter in keyDown (before Fluent's internal commit clears the raw text
+        // and re-renders with the truncated displayValue).
+        if (event.key === "Enter") {
+            const currVal = evaluateExpression(event.target.value);
+            if (!isNaN(currVal)) {
+                setValue(currVal);
+                tryCommitValue(currVal);
+            }
+        }
         HandleKeyDown(event);
     };
     const handleKeyUp = (event) => {
         event.stopPropagation(); // Prevent event propagation
-        if (event.key !== "Enter") {
-            if (event.key === "Alt") {
-                setIsFocusedAltKeyPressed(false);
-            }
-            else if (event.key === "Shift") {
-                setIsFocusedShiftKeyPressed(false);
-            }
-            // Allow arbitrary expressions, primarily for math operations (e.g. 10*60 for 10 minutes in seconds).
-            // Use Function constructor to safely evaluate the expression without allowing access to scope.
-            // If the expression is invalid, fallback to NaN which will be caught by validateValue and prevent committing.
-            const currVal = ((val) => {
-                try {
-                    return Number(Function(`"use strict";return (${val})`)());
-                }
-                catch {
-                    return NaN;
-                }
-            })(event.target.value);
+        if (event.key === "Alt") {
+            setIsFocusedAltKeyPressed(false);
+        }
+        else if (event.key === "Shift") {
+            setIsFocusedShiftKeyPressed(false);
+        }
+        // Skip Enter — it's handled in keyDown before Fluent's internal commit
+        // clears the raw text and replaces it with the truncated displayValue.
+        if (event.key === "Enter") {
+            return;
+        }
+        const currVal = evaluateExpression(event.target.value);
+        if (!isNaN(currVal)) {
             setValue(currVal);
             tryCommitValue(currVal);
         }
@@ -6109,7 +6137,7 @@ const SpinButton = forwardRef((props, ref) => {
     const inputSlot = {
         className: mergeClasses(classes.inputSlot, props.inputClassName),
     };
-    const spinButton = (jsx(SpinButton$1, { ref: ref, ...props, appearance: "outline", input: inputSlot, step: step, id: id, size: size, precision: precision, displayValue: `${value.toFixed(precision)}${props.unit ? " " + props.unit : ""}`, value: value, onChange: handleChange, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onBlur: HandleOnBlur, className: mergedClassName }));
+    const spinButton = (jsx(SpinButton$1, { ref: ref, ...props, appearance: "outline", input: inputSlot, step: step, id: id, size: size, precision: fluentPrecision, displayValue: `${value.toFixed(displayPrecision)}${props.unit ? " " + props.unit : ""}`, value: value, onChange: handleChange, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onBlur: HandleOnBlur, className: mergedClassName }));
     return props.infoLabel ? (jsxs("div", { className: classes.container, children: [jsx(InfoLabel, { ...props.infoLabel, htmlFor: id }), spinButton] })) : (spinButton);
 });
 
@@ -7182,7 +7210,7 @@ const DefaultInspectorExtensionFeed = new BuiltInsExtensionFeed("Inspector", [
         keywords: ["creation", "tools"],
         ...BabylonWebResources,
         author: { name: "Babylon.js", forumUserName: "" },
-        getExtensionModuleAsync: async () => await import('./quickCreateToolsService-BuEys230.js'),
+        getExtensionModuleAsync: async () => await import('./quickCreateToolsService-C9jZpIAl.js'),
     },
     {
         name: "Reflector",
@@ -7190,7 +7218,7 @@ const DefaultInspectorExtensionFeed = new BuiltInsExtensionFeed("Inspector", [
         keywords: ["reflector", "bridge", "sync", "sandbox", "tools"],
         ...BabylonWebResources,
         author: { name: "Babylon.js", forumUserName: "" },
-        getExtensionModuleAsync: async () => await import('./reflectorService-Dwsb8ijf.js'),
+        getExtensionModuleAsync: async () => await import('./reflectorService-DGy36OAK.js'),
     },
 ]);
 
@@ -8044,7 +8072,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-Dj1XtRzF.js');
+                    const { ExtensionListServiceDefinition } = await import('./extensionsListService-qU9tqfBg.js');
                     await serviceContainer.addServiceAsync(ExtensionListServiceDefinition);
                 }
                 // Register all external services (that make up a unique tool).
@@ -8245,8 +8273,7 @@ const CurveEditorProvider = (props) => {
     const [activeAnimations, setActiveAnimations] = useState([]);
     const [activeChannels, setActiveChannels] = useState({});
     const [activeKeyPoints, setActiveKeyPoints] = useState(null);
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const [mainKeyPoint, _setMainKeyPoint] = useState(null);
+    const [mainKeyPoint, setMainKeyPoint] = useState(null);
     const [activeFrame, setActiveFrame] = useState(0);
     const [fromKey, setFromKey] = useState(0);
     const [toKey, setToKey] = useState(100);
@@ -8498,6 +8525,7 @@ const CurveEditorProvider = (props) => {
         setReferenceMaxFrame,
         setFocusedInput,
         setActiveKeyPoints,
+        setMainKeyPoint,
         setActiveChannels,
         play,
         stop,
@@ -8616,12 +8644,16 @@ const TopBar = () => {
         });
         const onActiveKeyPointChangedObserver = observables.onActiveKeyPointChanged.add(() => {
             const numKeys = state.activeKeyPoints?.length || 0;
-            // TODO: Properly type KeyPointComponent to access curve.animation
-            const numAnims = numKeys;
-            const frameEnabled = (numKeys === 1 && numAnims === 1) || (numKeys > 1 && numAnims > 1);
+            const numAnims = state.activeKeyPoints ? new Set(state.activeKeyPoints.map((kp) => kp.curve.animation.uniqueId)).size : 0;
+            const hasActiveQuaternion = state.activeKeyPoints?.some((kp) => kp.curve.animation.dataType === Animation.ANIMATIONTYPE_QUATERNION) ?? false;
+            const frameEnabled = ((numKeys === 1 && numAnims === 1) || (numKeys > 1 && numAnims > 1)) && !hasActiveQuaternion;
             setFrameControlEnabled(frameEnabled);
-            setValueControlEnabled(numKeys > 0);
-            // Don't reset values here - they are set by onFrameSet/onValueSet observers
+            setValueControlEnabled(numKeys > 0 && !hasActiveQuaternion);
+            // Reset values when no keys are selected
+            if (numKeys === 0) {
+                setKeyFrameValue(null);
+                setKeyValue(null);
+            }
         });
         return () => {
             observables.onFrameSet.remove(onFrameSetObserver);
@@ -8938,6 +8970,7 @@ const useStyles$x = makeStyles({
         display: "flex",
         flexDirection: "column",
         gap: tokens.spacingVerticalM,
+        minWidth: "150px",
     },
     header: {
         display: "flex",
@@ -8973,13 +9006,16 @@ const useStyles$x = makeStyles({
 const ANIMATION_TYPES = ["Float", "Vector2", "Vector3", "Quaternion", "Color3", "Color4"];
 const LOOP_MODES = ["Cycle", "Relative", "Relative from current", "Constant"];
 const MODES = ["List", "Custom"];
+const ModeOptions = MODES.map((m) => ({ label: m, value: m }));
+const AnimationTypeOptions = ANIMATION_TYPES.map((t) => ({ label: t, value: t }));
+const LoopModeOptions = LOOP_MODES.map((lm) => ({ label: lm, value: lm }));
 /**
  * Panel for adding new animations
  * @returns The add animation panel component
  */
 const AddAnimationPanel = ({ onClose }) => {
     const styles = useStyles$x();
-    const { state, observables } = useCurveEditor();
+    const { state, actions, observables } = useCurveEditor();
     const [name, setName] = useState("");
     const [mode, setMode] = useState("List");
     const [customProperty, setCustomProperty] = useState("");
@@ -9184,11 +9220,15 @@ const AddAnimationPanel = ({ onClose }) => {
                 state.target.animations = [...state.target.animations, animation];
             }
         }
-        // Close first so AnimationList mounts, then notify
+        // Auto-select the newly created animation
+        actions.setActiveAnimations([animation]);
+        actions.resetAllActiveChannels();
+        // Close panel, then notify so listeners (e.g. AnimationList) can react
         onClose();
         observables.onAnimationsLoaded.notifyObservers();
-    }, [name, currentProperty, currentType, loopMode, fps, minFrame, maxFrame, state, observables, 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(Input, { value: name, onChange: (_, data) => setName(data.value), placeholder: "Animation name" })] }), jsxs("div", { className: styles.row, children: [jsx(Label, { children: "Mode" }), jsx(Dropdown$1, { value: mode, selectedOptions: [mode], onOptionSelect: (_, data) => setMode(data.optionValue), disabled: properties.length === 0, children: MODES.map((m) => (jsx(Option, { value: m, children: m }, m))) })] }), jsxs("div", { className: styles.row, children: [jsx(Label, { children: "Property" }), isCustomMode ? (jsx(Input, { value: customProperty, onChange: (_, data) => setCustomProperty(data.value), placeholder: "e.g., position, rotation, scaling" })) : (jsx(Dropdown$1, { value: selectedProperty, selectedOptions: [selectedProperty], onOptionSelect: (_, data) => setSelectedProperty(data.optionValue), children: properties.map((prop) => (jsx(Option, { value: prop, children: prop }, prop))) }))] }), jsxs("div", { className: styles.row, children: [jsx(Label, { children: "Type" }), isCustomMode ? (jsx(Dropdown$1, { value: animationType, selectedOptions: [animationType], onOptionSelect: (_, data) => setAnimationType(data.optionValue), children: ANIMATION_TYPES.map((type) => (jsx(Option, { value: type, children: type }, type))) })) : (jsx("div", { className: styles.typeDisplay, children: inferredType }))] }), jsxs("div", { className: styles.row, children: [jsx(Label, { children: "Loop Mode" }), jsx(Dropdown$1, { value: loopMode, selectedOptions: [loopMode], onOptionSelect: (_, data) => setLoopMode(data.optionValue), children: LOOP_MODES.map((lm) => (jsx(Option, { value: lm, children: lm }, lm))) })] })] }), jsxs("div", { className: styles.buttons, children: [jsx(Button, { appearance: "primary", onClick: createAnimation, disabled: !isValid, label: "Create" }), jsx(Button, { appearance: "subtle", onClick: onClose, label: "Cancel" })] })] }));
+        observables.onActiveAnimationChanged.notifyObservers({});
+    }, [name, currentProperty, currentType, loopMode, fps, minFrame, maxFrame, state.target, actions, observables, 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$w = makeStyles({
@@ -9616,6 +9656,7 @@ class CurveData {
     constructor(color, animation, property, tangentBuilder, setDefaultInTangent, setDefaultOutTangent) {
         this.keys = [];
         this.onDataUpdatedObservable = new Observable();
+        this.siblings = [];
         this.color = color;
         this.animation = animation;
         this.property = property;
@@ -9809,6 +9850,13 @@ class CurveData {
         const originalKey = this.animation.getKeys()[keyId];
         originalKey.frame = frame;
         this.keys[keyId].frame = frame;
+        // Sync frame to all sibling curves (same animation, different property)
+        for (const sibling of this.siblings) {
+            if (sibling !== this && sibling.keys[keyId]) {
+                sibling.keys[keyId].frame = frame;
+                sibling.onDataUpdatedObservable.notifyObservers();
+            }
+        }
         this.onDataUpdatedObservable.notifyObservers();
     }
     updateKeyValue(keyId, value) {
@@ -9833,6 +9881,8 @@ CurveData.TangentLength = 50;
  */
 const Curve = ({ curve, convertX, convertY }) => {
     const isQuaternion = curve.animation.dataType === Animation.ANIMATIONTYPE_QUATERNION;
+    // Derive path data, recomputing whenever the curve's key data changes
+    const pathData = useObservableState(useCallback(() => curve.getPathData(convertX, convertY), [curve, convertX, convertY]), curve.onDataUpdatedObservable);
     // Path style - same as v1
     const pathStyle = {
         stroke: curve.color,
@@ -9843,7 +9893,7 @@ const Curve = ({ curve, convertX, convertY }) => {
         pathStyle["strokeDasharray"] = "5";
         pathStyle["strokeOpacity"] = "0.5";
     }
-    return (jsx("svg", { style: { cursor: "pointer", overflow: "auto" }, children: jsx("path", { d: curve.getPathData(convertX, convertY), style: pathStyle }) }));
+    return (jsx("svg", { style: { cursor: "pointer", overflow: "auto" }, children: jsx("path", { d: pathData, style: pathStyle }) }));
 };
 
 // Inline SVG data URIs for key point icons
@@ -9921,6 +9971,9 @@ const KeyPointComponent = (props) => {
         if (isSelected()) {
             // This keypoint is directly selected
             setSelectedState(SelectionState.Selected);
+            // Notify frame/value observers so the top bar displays correct values (like v1's _onActiveKeyPointChanged)
+            observables.onFrameSet.notifyObservers(invertX(currentXRef.current));
+            observables.onValueSet.notifyObservers(invertY(currentYRef.current));
         }
         else if (state.activeKeyPoints) {
             // Check if a sibling (same keyId, different curve, same animation) is selected
@@ -9943,8 +9996,8 @@ const KeyPointComponent = (props) => {
             setSelectedState(SelectionState.None);
             setTangentSelectedIndex(-1);
         }
-    }, [state.activeKeyPoints, state.mainKeyPoint, curve, keyId, isSelected, curvesMatch]);
-    // Extract slope from a tangent vector (matches v1's _extractSlope)
+    }, [state.activeKeyPoints, state.mainKeyPoint, curve, keyId, isSelected, curvesMatch, observables, invertX, invertY]);
+    // Extract slope from a tangent vector
     const extractSlope = useCallback((vec, storedLength, isIn) => {
         const keys = curve.keys;
         const keyValue = keys[keyId].value;
@@ -9960,10 +10013,13 @@ const KeyPointComponent = (props) => {
         const currentPosition = vec.clone();
         currentPosition.normalize();
         currentPosition.scaleInPlace(storedLength);
-        const value = isIn ? keyValue - invertY(currentPosition.y + currentY) : invertY(currentPosition.y + currentY) - keyValue;
-        const frame = isIn ? keyFrame - invertX(currentPosition.x + currentX) : invertX(currentPosition.x + currentX) - keyFrame;
+        // Use refs for current position to avoid stale closure during drag
+        const cx = currentXRef.current;
+        const cy = currentYRef.current;
+        const value = isIn ? keyValue - invertY(currentPosition.y + cy) : invertY(currentPosition.y + cy) - keyValue;
+        const frame = isIn ? keyFrame - invertX(currentPosition.x + cx) : invertX(currentPosition.x + cx) - keyFrame;
         return value / frame;
-    }, [curve, keyId, invertX, invertY, currentX, currentY]);
+    }, [curve, keyId, invertX, invertY]);
     // Tangent operations
     const flattenTangent = useCallback(() => {
         // First update the interpolation mode to NONE without triggering observers
@@ -9982,6 +10038,8 @@ const KeyPointComponent = (props) => {
                 curve.updateOutTangentFromControlPoint(keyId, 0);
             }
         }
+        // Notify curve to re-render path
+        curve.onDataUpdatedObservable.notifyObservers();
         setForceUpdate((v) => v + 1);
     }, [keyId, tangentSelectedIndex, curve]);
     const linearTangent = useCallback(() => {
@@ -10095,6 +10153,46 @@ const KeyPointComponent = (props) => {
             observables.onSelectionRectangleMoved.remove(observer);
         };
     }, [observables, curve, keyId, actions]);
+    // Handle frame manually entered from top bar
+    useEffect(() => {
+        const observer = observables.onFrameManuallyEntered.add((newValue) => {
+            if (selectedState === SelectionState.None) {
+                return;
+            }
+            let newX = convertX(newValue);
+            // Clamp to neighbors
+            const previousX = getPreviousX();
+            const nextX = getNextX();
+            if (previousX !== null) {
+                newX = Math.max(previousX, newX);
+            }
+            if (nextX !== null) {
+                newX = Math.min(nextX, newX);
+            }
+            const frame = invertX(newX);
+            currentXRef.current = newX;
+            setCurrentX(newX);
+            onFrameValueChanged(frame);
+        });
+        return () => {
+            observables.onFrameManuallyEntered.remove(observer);
+        };
+    }, [observables, selectedState, convertX, invertX, getPreviousX, getNextX, onFrameValueChanged]);
+    // Handle value manually entered from top bar
+    useEffect(() => {
+        const observer = observables.onValueManuallyEntered.add((newValue) => {
+            if (selectedState !== SelectionState.Selected) {
+                return;
+            }
+            const newY = convertY(newValue);
+            currentYRef.current = newY;
+            setCurrentY(newY);
+            onKeyValueChanged(newValue);
+        });
+        return () => {
+            observables.onValueManuallyEntered.remove(observer);
+        };
+    }, [observables, selectedState, convertY, onKeyValueChanged]);
     // Handle select all keys
     useEffect(() => {
         const observer = observables.onSelectAllKeys.add(() => {
@@ -10112,6 +10210,60 @@ const KeyPointComponent = (props) => {
             observables.onSelectAllKeys.remove(observer);
         };
     }, [observables, actions, curve, keyId]);
+    // Track active key points count in a ref to avoid stale closure in handlePointerMove
+    const activeKeyPointsRef = useRef(state.activeKeyPoints);
+    activeKeyPointsRef.current = state.activeKeyPoints;
+    // Multi-point movement: store offset from main key point
+    const offsetToMain = useRef({ x: 0, y: 0 });
+    const isMainKeyPoint = useRef(false);
+    // When a main key point is set (multi-selection), store offset from it
+    useEffect(() => {
+        const observer = observables.onMainKeyPointSet.add((info) => {
+            // Check if WE are the main key point
+            if (info.curve === curve && info.keyId === keyId) {
+                isMainKeyPoint.current = true;
+                return;
+            }
+            isMainKeyPoint.current = false;
+            // Store offset from the main key point position
+            offsetToMain.current = {
+                x: currentXRef.current - info.x,
+                y: currentYRef.current - info.y,
+            };
+        });
+        return () => {
+            observables.onMainKeyPointSet.remove(observer);
+        };
+    }, [observables, curve, keyId]);
+    // When the main key point moves, follow it with offset
+    useEffect(() => {
+        const observer = observables.onMainKeyPointMoved.add((pos) => {
+            // Skip if we ARE the main key point
+            if (isMainKeyPoint.current) {
+                return;
+            }
+            if (selectedState === SelectionState.None) {
+                return;
+            }
+            // Move frame for selected + siblings (but not first key)
+            if (keyId !== 0) {
+                const newX = pos.x + offsetToMain.current.x;
+                currentXRef.current = newX;
+                setCurrentX(newX);
+                onFrameValueChanged(invertX(newX));
+            }
+            // Move value only for directly selected points
+            if (selectedState === SelectionState.Selected) {
+                const newY = pos.y + offsetToMain.current.y;
+                currentYRef.current = newY;
+                setCurrentY(newY);
+                onKeyValueChanged(invertY(newY));
+            }
+        });
+        return () => {
+            observables.onMainKeyPointMoved.remove(observer);
+        };
+    }, [observables, curve, keyId, selectedState, invertX, invertY, onFrameValueChanged, onKeyValueChanged]);
     // Mouse/pointer handlers
     const handlePointerDown = useCallback((evt) => {
         const animationType = curve.animation.dataType;
@@ -10143,29 +10295,64 @@ const KeyPointComponent = (props) => {
         lockY.current = false;
         accumulatedX.current = 0;
         accumulatedY.current = 0;
-        // Handle selection
+        // Handle selection (matches v1's _select logic)
         if (!evt.ctrlKey) {
             if (!isSelected()) {
+                // Not in list, not multi-select: clear and add self
                 actions.setActiveKeyPoints([{ curve, keyId }]);
+                // Single selection → no mainKeyPoint (like v1)
+                actions.setMainKeyPoint(null);
+            }
+            else {
+                // Already in list, not multi-select:
+                // If >1 selected, promote this to mainKeyPoint (DON'T clear others — v1 behavior)
+                // If only 1, mainKeyPoint = null
+                if (state.activeKeyPoints && state.activeKeyPoints.length > 1) {
+                    const info = { x: currentXRef.current, y: currentYRef.current, curve, keyId };
+                    actions.setMainKeyPoint({ curve, keyId });
+                    queueMicrotask(() => {
+                        observables.onMainKeyPointSet.notifyObservers(info);
+                    });
+                }
+                else {
+                    actions.setMainKeyPoint(null);
+                }
             }
         }
         else {
-            actions.setActiveKeyPoints((prev) => {
-                const current = prev || [];
-                const matchesCurve = (kp) => kp.curve.animation.uniqueId === curve.animation.uniqueId && kp.curve.property === curve.property && kp.keyId === keyId;
-                const isCurrentlySelected = current.some(matchesCurve);
-                if (isCurrentlySelected) {
+            // Ctrl-click: toggle selection
+            if (isSelected()) {
+                // Remove from list
+                actions.setActiveKeyPoints((prev) => {
+                    const current = prev || [];
+                    const matchesCurve = (kp) => kp.curve.animation.uniqueId === curve.animation.uniqueId && kp.curve.property === curve.property && kp.keyId === keyId;
                     return current.filter((kp) => !matchesCurve(kp));
+                });
+                actions.setMainKeyPoint(null);
+            }
+            else {
+                // Add to list
+                actions.setActiveKeyPoints((prev) => {
+                    const current = prev || [];
+                    return [...current, { curve, keyId }];
+                });
+                // Multi selection is now engaged
+                if ((state.activeKeyPoints?.length ?? 0) + 1 > 1) {
+                    const info = { x: currentXRef.current, y: currentYRef.current, curve, keyId };
+                    actions.setMainKeyPoint({ curve, keyId });
+                    queueMicrotask(() => {
+                        observables.onMainKeyPointSet.notifyObservers(info);
+                    });
                 }
                 else {
-                    return [...current, { curve, keyId }];
+                    actions.setMainKeyPoint(null);
                 }
-            });
+            }
         }
         observables.onActiveKeyPointChanged.notifyObservers();
         // Capture pointer for drag
         evt.target.setPointerCapture(evt.pointerId);
-    }, [curve, keyId, actions, observables, isSelected]);
+    }, [curve, keyId, actions, observables, isSelected, state.activeKeyPoints]);
     const handlePointerMove = useCallback((evt) => {
         if (!pointerIsDown.current || selectedState !== SelectionState.Selected) {
             return;
@@ -10226,6 +10413,13 @@ const KeyPointComponent = (props) => {
             currentYRef.current = newY;
             setCurrentX(newX);
             setCurrentY(newY);
+            // Notify other selected key points to follow (multi-point movement)
+            const activeKeyPoints = activeKeyPointsRef.current;
+            if (activeKeyPoints && activeKeyPoints.length > 1) {
+                requestAnimationFrame(() => {
+                    observables.onMainKeyPointMoved.notifyObservers({ x: newX, y: newY });
+                });
+            }
         }
         else {
             // Tangent manipulation
@@ -10435,6 +10629,129 @@ const useStyles$t = makeStyles({
         pointerEvents: "none",
     },
 });
+/**
+ * Evaluates active animations and produces CurveData instances with extracted key values.
+ * @param activeAnimations - The currently active animations to evaluate
+ * @param activeChannels - The currently active channels to determine which curves to show for multi-channel animations
+ * @returns An array of CurveData instances representing the curves to display in the graph
+ */
+function EvaluateKeys(activeAnimations, activeChannels) {
+    const result = [];
+    // Helper to set default tangents across all curves
+    const setDefaultInTangent = (keyId) => {
+        for (const curve of result) {
+            curve.storeDefaultInTangent(keyId);
+        }
+    };
+    const setDefaultOutTangent = (keyId) => {
+        for (const curve of result) {
+            curve.storeDefaultOutTangent(keyId);
+        }
+    };
+    for (const animation of activeAnimations) {
+        const keys = animation.getKeys();
+        if (keys.length === 0) {
+            continue;
+        }
+        const channelColor = activeChannels[animation.uniqueId];
+        const curvesToAdd = [];
+        // Create curves based on data type
+        switch (animation.dataType) {
+            case Animation.ANIMATIONTYPE_FLOAT:
+                curvesToAdd.push(new CurveData(channelColor || DefaultCurveColor, animation));
+                break;
+            case Animation.ANIMATIONTYPE_VECTOR2:
+                if (!channelColor || channelColor === ChannelColors.X) {
+                    curvesToAdd.push(new CurveData(ChannelColors.X, animation, "x", () => Vector2.Zero(), setDefaultInTangent, setDefaultOutTangent));
+                }
+                if (!channelColor || channelColor === ChannelColors.Y) {
+                    curvesToAdd.push(new CurveData(ChannelColors.Y, animation, "y", () => Vector2.Zero(), setDefaultInTangent, setDefaultOutTangent));
+                }
+                break;
+            case Animation.ANIMATIONTYPE_VECTOR3:
+                if (!channelColor || channelColor === ChannelColors.X) {
+                    curvesToAdd.push(new CurveData(ChannelColors.X, animation, "x", () => Vector3.Zero(), setDefaultInTangent, setDefaultOutTangent));
+                }
+                if (!channelColor || channelColor === ChannelColors.Y) {
+                    curvesToAdd.push(new CurveData(ChannelColors.Y, animation, "y", () => Vector3.Zero(), setDefaultInTangent, setDefaultOutTangent));
+                }
+                if (!channelColor || channelColor === ChannelColors.Z) {
+                    curvesToAdd.push(new CurveData(ChannelColors.Z, animation, "z", () => Vector3.Zero(), setDefaultInTangent, setDefaultOutTangent));
+                }
+                break;
+            case Animation.ANIMATIONTYPE_COLOR3:
+                if (!channelColor || channelColor === ColorChannelColors.R) {
+                    curvesToAdd.push(new CurveData(ColorChannelColors.R, animation, "r", () => Color3.Black(), setDefaultInTangent, setDefaultOutTangent));
+                }
+                if (!channelColor || channelColor === ColorChannelColors.G) {
+                    curvesToAdd.push(new CurveData(ColorChannelColors.G, animation, "g", () => Color3.Black(), setDefaultInTangent, setDefaultOutTangent));
+                }
+                if (!channelColor || channelColor === ColorChannelColors.B) {
+                    curvesToAdd.push(new CurveData(ColorChannelColors.B, animation, "b", () => Color3.Black(), setDefaultInTangent, setDefaultOutTangent));
+                }
+                break;
+            case Animation.ANIMATIONTYPE_COLOR4:
+                if (!channelColor || channelColor === ColorChannelColors.R) {
+                    curvesToAdd.push(new CurveData(ColorChannelColors.R, animation, "r", () => new Color4(), setDefaultInTangent, setDefaultOutTangent));
+                }
+                if (!channelColor || channelColor === ColorChannelColors.G) {
+                    curvesToAdd.push(new CurveData(ColorChannelColors.G, animation, "g", () => new Color4(), setDefaultInTangent, setDefaultOutTangent));
+                }
+                if (!channelColor || channelColor === ColorChannelColors.B) {
+                    curvesToAdd.push(new CurveData(ColorChannelColors.B, animation, "b", () => new Color4(), setDefaultInTangent, setDefaultOutTangent));
+                }
+                if (!channelColor || channelColor === ColorChannelColors.A) {
+                    curvesToAdd.push(new CurveData(ColorChannelColors.A, animation, "a", () => new Color4(), setDefaultInTangent, setDefaultOutTangent));
+                }
+                break;
+            case Animation.ANIMATIONTYPE_QUATERNION:
+                if (!channelColor || channelColor === ChannelColors.X) {
+                    curvesToAdd.push(new CurveData(ChannelColors.X, animation, "x", () => new Quaternion(), setDefaultInTangent, setDefaultOutTangent));
+                }
+                if (!channelColor || channelColor === ChannelColors.Y) {
+                    curvesToAdd.push(new CurveData(ChannelColors.Y, animation, "y", () => new Quaternion(), setDefaultInTangent, setDefaultOutTangent));
+                }
+                if (!channelColor || channelColor === ChannelColors.Z) {
+                    curvesToAdd.push(new CurveData(ChannelColors.Z, animation, "z", () => new Quaternion(), setDefaultInTangent, setDefaultOutTangent));
+                }
+                if (!channelColor || channelColor === ChannelColors.W) {
+                    curvesToAdd.push(new CurveData(ChannelColors.W, animation, "w", () => new Quaternion(), setDefaultInTangent, setDefaultOutTangent));
+                }
+                break;
+        }
+        ExtractValuesFromKeys(keys, curvesToAdd);
+        // Wire up siblings so frame changes sync across all curves for the same animation
+        for (const curve of curvesToAdd) {
+            curve.siblings = curvesToAdd;
+        }
+        result.push(...curvesToAdd);
+    }
+    return result;
+}
+/**
+ * Extracts key values, tangents, and interpolation data from animation keys into CurveData instances.
+ * @param keys - The animation keys to extract data from
+ * @param curves - CurveData to push changes to
+ */
+function ExtractValuesFromKeys(keys, curves) {
+    for (const key of keys) {
+        const lockedTangent = key.lockedTangent ?? true;
+        for (const curve of curves) {
+            const prop = curve.property;
+            const value = prop ? key.value[prop] : key.value;
+            const inTangent = prop ? key.inTangent?.[prop] : key.inTangent;
+            const outTangent = prop ? key.outTangent?.[prop] : key.outTangent;
+            curve.keys.push({
+                frame: key.frame,
+                value,
+                inTangent,
+                outTangent,
+                lockedTangent,
+                interpolation: key.interpolation,
+            });
+        }
+    }
+}
 /**
  * Main graph area for displaying and editing animation curves
  * @returns The graph component
@@ -10498,6 +10815,33 @@ const Graph = ({ width, height }) => {
                         value: value,
                         lockedTangent: true,
                     };
+                    // Compute Hermite 1st-derivative tangents so the curve shape is preserved (like v1)
+                    if (leftKey?.outTangent !== undefined && rightKey?.inTangent !== undefined) {
+                        const invFrameDelta = 1.0 / (rightKey.frame - leftKey.frame);
+                        const cutTime = (currentFrame - leftKey.frame) * invFrameDelta;
+                        let derivative = null;
+                        switch (currentAnimation.dataType) {
+                            case Animation.ANIMATIONTYPE_FLOAT:
+                                derivative = Scalar.Hermite1stDerivative(leftKey.value * invFrameDelta, leftKey.outTangent, rightKey.value * invFrameDelta, rightKey.inTangent, cutTime);
+                                break;
+                            case Animation.ANIMATIONTYPE_VECTOR2:
+                                derivative = Vector2.Hermite1stDerivative(leftKey.value.scale(invFrameDelta), leftKey.outTangent, rightKey.value.scale(invFrameDelta), rightKey.inTangent, cutTime);
+                                break;
+                            case Animation.ANIMATIONTYPE_VECTOR3:
+                                derivative = Vector3.Hermite1stDerivative(leftKey.value.scale(invFrameDelta), leftKey.outTangent, rightKey.value.scale(invFrameDelta), rightKey.inTangent, cutTime);
+                                break;
+                            case Animation.ANIMATIONTYPE_COLOR3:
+                                derivative = Color3.Hermite1stDerivative(leftKey.value.scale(invFrameDelta), leftKey.outTangent, rightKey.value.scale(invFrameDelta), rightKey.inTangent, cutTime);
+                                break;
+                            case Animation.ANIMATIONTYPE_COLOR4:
+                                derivative = Color4.Hermite1stDerivative(leftKey.value.scale(invFrameDelta), leftKey.outTangent, rightKey.value.scale(invFrameDelta), rightKey.inTangent, cutTime);
+                                break;
+                        }
+                        if (derivative !== null) {
+                            newKey.inTangent = derivative;
+                            newKey.outTangent = derivative.clone ? derivative.clone() : derivative;
+                        }
+                    }
                     keys.splice(indexToAdd + 1, 0, newKey);
                 }
                 currentAnimation.setKeys(keys);
@@ -10532,6 +10876,9 @@ const Graph = ({ width, height }) => {
                 const keys = animation.getKeys();
                 const sortedIndices = Array.from(keyIndices).sort((a, b) => b - a); // Sort descending
                 for (const index of sortedIndices) {
+                    if (index === 0 || index === keys.length - 1) {
+                        continue; // Cannot delete first or last key
+                    }
                     if (index >= 0 && index < keys.length) {
                         keys.splice(index, 1);
                     }
@@ -10544,119 +10891,31 @@ const Graph = ({ width, height }) => {
             observables.onActiveAnimationChanged.notifyObservers({});
         });
         // Note: Tangent operations (flatten, linear, break, unify, step) are handled by KeyPointComponent
-        // Each selected keypoint subscribes to the observables and handles its own tangent updates (like v1)
+        // Each selected keypoint subscribes to the observables and handles its own tangent updates
         return () => {
             observables.onCreateOrUpdateKeyPointRequired.remove(onCreateOrUpdateKeyPointRequired);
             observables.onFrameRequired.remove(onFrameRequired);
             observables.onDeleteKeyActiveKeyPoints.remove(onDeleteKeyActiveKeyPoints);
         };
     }, [observables, state.activeAnimations, state.activeFrame, state.activeKeyPoints, actions]);
-    const curves = useMemo(() => {
-        const result = [];
-        // Helper to set default tangents across all curves (like v1)
-        const setDefaultInTangent = (keyId) => {
-            for (const curve of result) {
-                curve.storeDefaultInTangent(keyId);
-            }
+    // Invalidation counter — incremented when keys are added/deleted so curves recompute
+    const [curveVersion, invalidateCurves] = useReducer((c) => c + 1, 0);
+    useEffect(() => {
+        const observer = observables.onActiveAnimationChanged.add(() => invalidateCurves());
+        return () => {
+            observables.onActiveAnimationChanged.remove(observer);
         };
-        const setDefaultOutTangent = (keyId) => {
-            for (const curve of result) {
-                curve.storeDefaultOutTangent(keyId);
-            }
+    }, [observables]);
+    const curves = useMemo(() => EvaluateKeys(state.activeAnimations, state.activeChannels), [state.activeAnimations, state.activeChannels, curveVersion]);
+    // Re-render when any curve's key data is mutated (e.g. sibling frame sync)
+    // so key point positions stay in sync with their curve paths
+    const [, invalidateKeyPoints] = useReducer((c) => c + 1, 0);
+    useEffect(() => {
+        const observers = curves.map((curve) => curve.onDataUpdatedObservable.add(invalidateKeyPoints));
+        return () => {
+            curves.forEach((curve, i) => curve.onDataUpdatedObservable.remove(observers[i]));
         };
-        for (const animation of state.activeAnimations) {
-            const keys = animation.getKeys();
-            if (keys.length === 0) {
-                continue;
-            }
-            const channelColor = state.activeChannels[animation.uniqueId];
-            const curvesToAdd = [];
-            // Create curves based on data type (like v1's _evaluateKeys)
-            switch (animation.dataType) {
-                case Animation.ANIMATIONTYPE_FLOAT:
-                    curvesToAdd.push(new CurveData(channelColor || DefaultCurveColor, animation));
-                    break;
-                case Animation.ANIMATIONTYPE_VECTOR2:
-                    if (!channelColor || channelColor === ChannelColors.X) {
-                        curvesToAdd.push(new CurveData(ChannelColors.X, animation, "x", () => Vector2.Zero(), setDefaultInTangent, setDefaultOutTangent));
-                    }
-                    if (!channelColor || channelColor === ChannelColors.Y) {
-                        curvesToAdd.push(new CurveData(ChannelColors.Y, animation, "y", () => Vector2.Zero(), setDefaultInTangent, setDefaultOutTangent));
-                    }
-                    break;
-                case Animation.ANIMATIONTYPE_VECTOR3:
-                    if (!channelColor || channelColor === ChannelColors.X) {
-                        curvesToAdd.push(new CurveData(ChannelColors.X, animation, "x", () => Vector3.Zero(), setDefaultInTangent, setDefaultOutTangent));
-                    }
-                    if (!channelColor || channelColor === ChannelColors.Y) {
-                        curvesToAdd.push(new CurveData(ChannelColors.Y, animation, "y", () => Vector3.Zero(), setDefaultInTangent, setDefaultOutTangent));
-                    }
-                    if (!channelColor || channelColor === ChannelColors.Z) {
-                        curvesToAdd.push(new CurveData(ChannelColors.Z, animation, "z", () => Vector3.Zero(), setDefaultInTangent, setDefaultOutTangent));
-                    }
-                    break;
-                case Animation.ANIMATIONTYPE_COLOR3:
-                    if (!channelColor || channelColor === ColorChannelColors.R) {
-                        curvesToAdd.push(new CurveData(ColorChannelColors.R, animation, "r", () => Color3.Black(), setDefaultInTangent, setDefaultOutTangent));
-                    }
-                    if (!channelColor || channelColor === ColorChannelColors.G) {
-                        curvesToAdd.push(new CurveData(ColorChannelColors.G, animation, "g", () => Color3.Black(), setDefaultInTangent, setDefaultOutTangent));
-                    }
-                    if (!channelColor || channelColor === ColorChannelColors.B) {
-                        curvesToAdd.push(new CurveData(ColorChannelColors.B, animation, "b", () => Color3.Black(), setDefaultInTangent, setDefaultOutTangent));
-                    }
-                    break;
-                case Animation.ANIMATIONTYPE_COLOR4:
-                    if (!channelColor || channelColor === ColorChannelColors.R) {
-                        curvesToAdd.push(new CurveData(ColorChannelColors.R, animation, "r", () => new Color4(), setDefaultInTangent, setDefaultOutTangent));
-                    }
-                    if (!channelColor || channelColor === ColorChannelColors.G) {
-                        curvesToAdd.push(new CurveData(ColorChannelColors.G, animation, "g", () => new Color4(), setDefaultInTangent, setDefaultOutTangent));
-                    }
-                    if (!channelColor || channelColor === ColorChannelColors.B) {
-                        curvesToAdd.push(new CurveData(ColorChannelColors.B, animation, "b", () => new Color4(), setDefaultInTangent, setDefaultOutTangent));
-                    }
-                    if (!channelColor || channelColor === ColorChannelColors.A) {
-                        curvesToAdd.push(new CurveData(ColorChannelColors.A, animation, "a", () => new Color4(), setDefaultInTangent, setDefaultOutTangent));
-                    }
-                    break;
-                case Animation.ANIMATIONTYPE_QUATERNION:
-                    if (!channelColor || channelColor === ChannelColors.X) {
-                        curvesToAdd.push(new CurveData(ChannelColors.X, animation, "x", () => new Quaternion(), setDefaultInTangent, setDefaultOutTangent));
-                    }
-                    if (!channelColor || channelColor === ChannelColors.Y) {
-                        curvesToAdd.push(new CurveData(ChannelColors.Y, animation, "y", () => new Quaternion(), setDefaultInTangent, setDefaultOutTangent));
-                    }
-                    if (!channelColor || channelColor === ChannelColors.Z) {
-                        curvesToAdd.push(new CurveData(ChannelColors.Z, animation, "z", () => new Quaternion(), setDefaultInTangent, setDefaultOutTangent));
-                    }
-                    if (!channelColor || channelColor === ChannelColors.W) {
-                        curvesToAdd.push(new CurveData(ChannelColors.W, animation, "w", () => new Quaternion(), setDefaultInTangent, setDefaultOutTangent));
-                    }
-                    break;
-            }
-            // Populate keys for each curve (like v1's _extractValuesFromKeys)
-            for (const key of keys) {
-                const lockedTangent = key.lockedTangent ?? true;
-                for (const curve of curvesToAdd) {
-                    const prop = curve.property;
-                    const value = prop ? key.value[prop] : key.value;
-                    const inTangent = prop ? key.inTangent?.[prop] : key.inTangent;
-                    const outTangent = prop ? key.outTangent?.[prop] : key.outTangent;
-                    curve.keys.push({
-                        frame: key.frame,
-                        value,
-                        inTangent,
-                        outTangent,
-                        lockedTangent,
-                        interpolation: key.interpolation,
-                    });
-                }
-            }
-            result.push(...curvesToAdd);
-        }
-        return result;
-    }, [state.activeAnimations, state.activeChannels]);
+    }, [curves, invalidateKeyPoints]);
     // Calculate value range
     const valueRange = useMemo(() => {
         let minValue = 0;
@@ -11153,7 +11412,8 @@ const useStyles$q = makeStyles({
         backgroundColor: tokens.colorNeutralBackground2,
         overflow: "hidden",
         userSelect: "none",
-        pointerEvents: "none",
+        cursor: "pointer",
+        touchAction: "none",
     },
     svg: {
         width: "100%",
@@ -11186,10 +11446,11 @@ const OFFSET_X = 10;
  */
 const RangeFrameBar = ({ width }) => {
     const styles = useStyles$q();
-    const { state, observables } = useCurveEditor();
+    const { state, actions, observables } = useCurveEditor();
     const svgRef = useRef(null);
     const [viewWidth, setViewWidth] = useState(width);
     const [displayFrame, setDisplayFrame] = useState(state.activeFrame);
+    const pointerIsDown = useRef(false);
     // Re-render when range updates
     // useCallback stabilizes the accessor to prevent infinite re-render loops
     useObservableState(useCallback(() => ({}), []), observables.onRangeUpdated);
@@ -11215,6 +11476,26 @@ const RangeFrameBar = ({ width }) => {
             setDisplayFrame(state.activeFrame);
         }
     }, [state.activeFrame, state.isPlaying]);
+    // Playhead scrubbing — linear interpolation from pointer position to frame
+    const pointerToFrame = useCallback((offsetX) => {
+        const { fromKey, toKey } = state;
+        return Math.round(Math.max(fromKey, Math.min(toKey, (offsetX / viewWidth) * (toKey - fromKey) + fromKey)));
+    }, [state.fromKey, state.toKey, viewWidth]);
+    const handlePointerDown = useCallback((evt) => {
+        pointerIsDown.current = true;
+        evt.currentTarget.setPointerCapture(evt.pointerId);
+        actions.moveToFrame(pointerToFrame(evt.nativeEvent.offsetX));
+    }, [actions, pointerToFrame]);
+    const handlePointerMove = useCallback((evt) => {
+        if (!pointerIsDown.current) {
+            return;
+        }
+        actions.moveToFrame(pointerToFrame(evt.nativeEvent.offsetX));
+    }, [actions, pointerToFrame]);
+    const handlePointerUp = useCallback((evt) => {
+        pointerIsDown.current = false;
+        evt.currentTarget.releasePointerCapture(evt.pointerId);
+    }, []);
     // Compute frame ticks
     const frameTicks = useMemo(() => {
         if (state.activeAnimations.length === 0) {
@@ -11269,7 +11550,7 @@ const RangeFrameBar = ({ width }) => {
         return jsx("line", { className: styles.activeFrameLine, x1: x, y1: 0, x2: x, y2: 40 });
     }, [displayFrame, frameToX, styles.activeFrameLine]);
     const viewBox = `${ -10} 0 ${viewWidth + OFFSET_X * 4} 40`;
-    return (jsx("div", { className: styles.root, children: jsxs("svg", { ref: svgRef, className: styles.svg, viewBox: viewBox, children: [frameTicks.map((frame, i) => {
+    return (jsx("div", { className: styles.root, onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp, onPointerCancel: handlePointerUp, children: jsxs("svg", { ref: svgRef, className: styles.svg, viewBox: viewBox, children: [frameTicks.map((frame, i) => {
                     const x = frameToX(frame);
                     return (jsxs("g", { children: [jsx("line", { className: styles.tickLine, x1: x, y1: 22, x2: x, y2: 40 }), jsx("text", { className: styles.tickLabel, x: x, y: 14, children: Math.round(frame) })] }, `tick-${frame}-${i}`));
                 }), renderKeyframes, renderActiveFrame] }) }));
@@ -11528,6 +11809,22 @@ const RangeSelector = () => {
             }, onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp, onPointerCancel: handlePointerCancel, children: [jsx("div", { id: "left-handle", className: styles.handle, children: jsxs("div", { className: styles.handleIcon, children: [jsx("div", {}), jsx("div", {}), jsx("div", {})] }) }), jsx("div", { className: styles.label, children: Math.floor(state.fromKey) }), jsx("div", { className: styles.label, children: Math.floor(state.toKey) }), jsx("div", { id: "right-handle", className: styles.handle, children: jsxs("div", { className: styles.handleIcon, children: [jsx("div", {}), jsx("div", {}), jsx("div", {})] }) })] }) }));
 };
 
+/**
+ * Checks whether any of the given animations has a key at the specified frame.
+ * @param animations - The animations to check for keys
+ * @param frame - The frame index to check for keys at
+ * @returns True if a key exists at the frame, false otherwise.
+ */
+function GetKeyAtAnyFrameIndex(animations, frame) {
+    for (const animation of animations) {
+        for (const key of animation.getKeys()) {
+            if (Math.floor(frame - key.frame) === 0) {
+                return true;
+            }
+        }
+    }
+    return false;
+}
 const useStyles$n = makeStyles({
     root: {
         display: "flex",
@@ -11621,21 +11918,34 @@ const BottomBar = () => {
             setClipLength(newLength);
             actions.setClipLength(newLength);
             actions.setReferenceMaxFrame(newLength);
+            // Move playhead to new clip end
+            observables.onMoveToFrameRequired.notifyObservers(newLength);
+            // Create a key at the boundary if one doesn't exist
+            if (!GetKeyAtAnyFrameIndex(state.activeAnimations, newLength)) {
+                observables.onCreateOrUpdateKeyPointRequired.notifyObservers();
+            }
         });
         const onClipLengthDecreased = observables.onClipLengthDecreased.add((newLength) => {
             setClipLength(newLength);
             actions.setClipLength(newLength);
             actions.setReferenceMaxFrame(newLength);
+            // Move playhead to new clip end
+            observables.onMoveToFrameRequired.notifyObservers(newLength);
+            // Create a key at the boundary if one doesn't exist
+            if (!GetKeyAtAnyFrameIndex(state.activeAnimations, newLength)) {
+                observables.onCreateOrUpdateKeyPointRequired.notifyObservers();
+            }
             // Clamp toKey to new clip length
             if (toKeyRef.current > newLength) {
                 actions.setToKey(newLength);
             }
+            observables.onRangeUpdated.notifyObservers();
         });
         return () => {
             observables.onClipLengthIncreased.remove(onClipLengthIncreased);
             observables.onClipLengthDecreased.remove(onClipLengthDecreased);
         };
-    }, [observables, actions]);
+    }, [observables, actions, state.activeAnimations]);
     const handlePlayForward = useCallback(() => {
         actions.play(true);
     }, [actions]);
@@ -21537,7 +21847,7 @@ function ConvertOptions(v1Options) {
             consumes: [SceneExplorerServiceIdentity],
             factory: (sceneExplorerService) => {
                 const sceneExplorerCommandRegistrations = explorerExtensibility.flatMap((command) => command.entries.map((entry) => sceneExplorerService.addEntityCommand({
-                    predicate: (entity) => command.predicate(entity),
+                    predicate: (entity) => typeof entity === "object" && command.predicate(entity),
                     getCommand: (entity) => {
                         return {
                             displayName: entry.label,
@@ -22097,4 +22407,4 @@ const TextAreaPropertyLine = (props) => {
 AttachDebugLayer();
 
 export { useEventfulState as $, Accordion as A, Button as B, CheckboxPropertyLine as C, DebugServiceIdentity as D, Property as E, LinkToEntityPropertyLine as F, GizmoServiceIdentity as G, ErrorBoundary as H, Inspector as I, ExtensibleAccordion as J, Theme as K, LinkToEntity as L, MessageBar as M, NumberInputPropertyLine as N, PropertyContext as O, Popover as P, usePropertyChangedNotifier as Q, BuiltInsExtensionFeed as R, SpinButtonPropertyLine as S, TextInputPropertyLine as T, useVector3Property as U, Vector3PropertyLine as V, useColor3Property as W, useColor4Property as X, useQuaternionProperty as Y, MakePropertyHook as Z, useInterceptObservable as _, useProperty as a, Pane as a$, useObservableCollection as a0, useOrderedObservableCollection as a1, usePollingObservable as a2, useResource as a3, useAsyncResource as a4, useSetting as a5, useAngleConverters as a6, MakeTeachingMoment as a7, MakeDialogTeachingMoment as a8, useThemeMode as a9, Color3GradientComponent as aA, Color4GradientComponent as aB, ColorStepGradientComponent as aC, InfoLabel as aD, MakeLazyComponent as aE, List as aF, MaterialSelector as aG, NodeSelector as aH, PositionedPopover as aI, SearchBar as aJ, SearchBox as aK, SkeletonSelector as aL, SpinButton as aM, Switch as aN, SyncedSliderInput as aO, Textarea as aP, TextInput as aQ, TextureSelector as aR, ToastProvider as aS, ToggleButton as aT, Tooltip as aU, UploadButton as aV, ChildWindow as aW, FileUploadLine as aX, FactorGradientList as aY, Color3GradientList as aZ, Color4GradientList as a_, useTheme as aa, InterceptFunction as ab, GetPropertyDescriptor as ac, IsPropertyReadonly as ad, InterceptProperty as ae, ObservableCollection as af, ConstructorFactory as ag, SelectionServiceDefinition as ah, SettingsStore as ai, ShowInspector as aj, useKeyListener as ak, useKeyState as al, useEventListener as am, AccordionSectionItem as an, Checkbox as ao, Collapse as ap, ColorPickerPopup as aq, InputHexField as ar, InputHsvField as as, ComboBox as at, DraggableLine as au, Dropdown as av, NumberDropdown as aw, StringDropdown as ax, EntitySelector as ay, FactorGradientComponent as az, ShellServiceIdentity as b, TextureUpload as b0, BooleanBadgePropertyLine as b1, Color3PropertyLine as b2, Color4PropertyLine as b3, ComboBoxPropertyLine as b4, HexPropertyLine as b5, LinkPropertyLine as b6, PropertyLine as b7, LineContainer as b8, PlaceholderPropertyLine as b9, StringifiedPropertyLine as ba, SwitchPropertyLine as bb, SyncedSliderPropertyLine as bc, TextAreaPropertyLine as bd, TextPropertyLine as be, RotationVectorPropertyLine as bf, QuaternionPropertyLine as bg, Vector2PropertyLine as bh, Vector4PropertyLine as bi, SceneContextIdentity as c, SelectionServiceIdentity as d, useObservableState as e, AccordionSection as f, ButtonLine as g, ToolsServiceIdentity as h, useExtensionManager as i, MakePopoverTeachingMoment as j, TeachingMoment as k, Link as l, SidePaneContainer as m, PropertiesServiceIdentity as n, SceneExplorerServiceIdentity as o, SettingsServiceIdentity as p, StatsServiceIdentity as q, ThemeServiceIdentity as r, SettingsStoreIdentity as s, ConvertOptions as t, useToast as u, AttachDebugLayer as v, DetachDebugLayer as w, NumberDropdownPropertyLine as x, StringDropdownPropertyLine as y, BoundProperty as z };
-//# sourceMappingURL=index-DrQrky1o.js.map
+//# sourceMappingURL=index-Cmd13UXt.js.map