@remotion/studio 4.0.518 → 4.0.519

package/dist/components/SelectedOutlineOverlay.js

@@ -33,9 +33,8 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectedOutlineOverlay = exports.selectedOutlineDragThresholdPx = exports.getSelectedSequenceKeys = exports.getSelectedOutlineRotationPivot = exports.getSelectedOutlineRotationDeltaDegrees = exports.getSelectedOutlineRotationCornerInfo = exports.getSelectedEffectFieldsBySequenceKey = exports.getSelectedCropInfo = exports.getOutlineSelectionInteraction = exports.snapSelectedOutlineUv = exports.snapSelectedOutlineTransformOriginUv = exports.snapSelectedOutlineRotationDeltaDegrees = exports.selectedOutlineUvSnapThresholdPx = exports.selectedOutlineTransformOriginSnapThresholdPx = exports.isSelectedOutlineDragPastThreshold = exports.getSelectedOutlineTransformOriginLockedAxis = exports.getSelectedOutlineTransformOriginDragChanges = exports.getSelectedOutlineScaleEdgeInfo = exports.getSelectedOutlineScaleDragValues = exports.getSelectedOutlineScaleDragStates = exports.getSelectedOutlineScaleDragChanges = exports.getSelectedOutlineRotationDragValues = exports.getSelectedOutlineRotationDragStates = exports.getSelectedOutlineRotationDragChanges = exports.getSelectedOutlineKeyboardNudgeDeltas = exports.getSelectedOutlineKeyboardNudgeDelta = exports.getSelectedOutlineDragValues = exports.getSelectedOutlineDragChanges = exports.getSelectedOutlineCropFollowingTransformOrigin = exports.getSelectedOutlineCropDragValues = exports.getSelectedOutlineCropDragChanges = exports.getSelectedOutlineActiveSchema = exports.getSelectedOutline3DRotationDragValues = exports.compensateTranslateForTransformOrigin = exports.applySelectedOutlineTransformOriginAxisLock = exports.applySelectedOutlineDragAxisLock = void 0;
+exports.SelectedOutlineOverlay = exports.selectedOutlineDragThresholdPx = exports.getTransformedSvgViewportPoints = exports.getSequencesWithSelectableOutlines = exports.getSelectedSequenceKeys = exports.getSelectedOutlineRotationPivot = exports.getSelectedOutlineRotationDeltaDegrees = exports.getSelectedOutlineRotationCornerInfo = exports.getSelectedEffectFieldsBySequenceKey = exports.getSelectedCropInfo = exports.getOutlineSelectionInteraction = exports.snapSelectedOutlineUv = exports.snapSelectedOutlineTransformOriginUv = exports.snapSelectedOutlineRotationDeltaDegrees = exports.selectedOutlineUvSnapThresholdPx = exports.selectedOutlineTransformOriginSnapThresholdPx = exports.isSelectedOutlineDragPastThreshold = exports.getSelectedOutlineTransformOriginLockedAxis = exports.getSelectedOutlineTransformOriginDragChanges = exports.getSelectedOutlineScaleEdgeInfo = exports.getSelectedOutlineScaleDragValues = exports.getSelectedOutlineScaleDragStates = exports.getSelectedOutlineScaleDragChanges = exports.getSelectedOutlineRotationDragValues = exports.getSelectedOutlineRotationDragStates = exports.getSelectedOutlineRotationDragChanges = exports.getSelectedOutlineKeyboardNudgeDeltas = exports.getSelectedOutlineKeyboardNudgeDelta = exports.getSelectedOutlineDragValues = exports.getSelectedOutlineDragChanges = exports.getSelectedOutlineCropFollowingTransformOrigin = exports.getSelectedOutlineCropDragValues = exports.getSelectedOutlineCropDragChanges = exports.getSelectedOutlineActiveSchema = exports.getSelectedOutline3DRotationDragValues = exports.compensateTranslateForTransformOrigin = exports.applySelectedOutlineTransformOriginAxisLock = exports.applySelectedOutlineDragAxisLock = exports.orderOutlinesForRendering = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const canvas_1 = require("@remotion/canvas");
 const player_1 = require("@remotion/player");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
@@ -51,6 +50,8 @@ const timeline_sequence_hover_1 = require("../state/timeline-sequence-hover");
 const transform_3d_mode_1 = require("../state/transform-3d-mode");
 const selected_outline_drag_1 = require("./selected-outline-drag");
 const selected_outline_measurement_1 = require("./selected-outline-measurement");
+const selected_outline_order_1 = require("./selected-outline-order");
+Object.defineProperty(exports, "orderOutlinesForRendering", { enumerable: true, get: function () { return selected_outline_order_1.orderOutlinesForRendering; } });
 const selected_outline_types_1 = require("./selected-outline-types");
 const SelectedOutlineKeyboardControls_1 = require("./SelectedOutlineKeyboardControls");
 const SelectedOutlineRenderer_1 = require("./SelectedOutlineRenderer");
@@ -93,6 +94,8 @@ Object.defineProperty(exports, "getSelectedOutlineRotationCornerInfo", { enumera
 Object.defineProperty(exports, "getSelectedOutlineRotationDeltaDegrees", { enumerable: true, get: function () { return selected_outline_measurement_2.getSelectedOutlineRotationDeltaDegrees; } });
 Object.defineProperty(exports, "getSelectedOutlineRotationPivot", { enumerable: true, get: function () { return selected_outline_measurement_2.getSelectedOutlineRotationPivot; } });
 Object.defineProperty(exports, "getSelectedSequenceKeys", { enumerable: true, get: function () { return selected_outline_measurement_2.getSelectedSequenceKeys; } });
+Object.defineProperty(exports, "getSequencesWithSelectableOutlines", { enumerable: true, get: function () { return selected_outline_measurement_2.getSequencesWithSelectableOutlines; } });
+Object.defineProperty(exports, "getTransformedSvgViewportPoints", { enumerable: true, get: function () { return selected_outline_measurement_2.getTransformedSvgViewportPoints; } });
 const selected_outline_types_2 = require("./selected-outline-types");
 Object.defineProperty(exports, "selectedOutlineDragThresholdPx", { enumerable: true, get: function () { return selected_outline_types_2.selectedOutlineDragThresholdPx; } });
 const getEffectiveCropValue = ({ activeSchema, dragOverrides, fieldKey, frame, propStatuses, runtimeValues, }) => {
@@ -260,7 +263,6 @@ const calculateOutlineTargets = ({ connectedClientId, editorShowOutlines, getDra
             key,
             containsSelection,
             crop,
-            includeOutsideContainer: showSelectedOutline,
             keyframeDisplayOffset: nodeKeyframeDisplayOffset,
             nodePathInfo,
             ref: sequence.refForOutline,
@@ -531,30 +533,21 @@ const ActiveSelectedOutlineOverlayUnmemoized = ({ calculateOutlineTargetsForCurr
         controls.runtimeValues,
         outlineRuntimeSnapshots[index],
     ])), [outlineRuntimeControls, outlineRuntimeSnapshots]);
-    const outlineTargets = (0, react_1.useMemo)(() => {
-        const targets = calculateOutlineTargetsForCurrentState({
-            mode: 'layout',
-            runtimeValuesByStore: outlineRuntimeValuesByStore,
-            selectableOutlines: selectableOutlinesForLayout,
-            targetKey: null,
-            targetTimelinePosition: timelinePosition,
-        });
-        return targets.map((target) => {
-            const hovered = (0, timeline_node_path_key_1.timelineSequenceNodePathToKey)(target.nodePathInfo.sequenceSubscriptionKey) === hoveredTimelineNodePathKey;
-            return hovered && !target.includeOutsideContainer
-                ? { ...target, includeOutsideContainer: true }
-                : target;
-        });
-    }, [
+    const outlineTargets = (0, react_1.useMemo)(() => calculateOutlineTargetsForCurrentState({
+        mode: 'layout',
+        runtimeValuesByStore: outlineRuntimeValuesByStore,
+        selectableOutlines: selectableOutlinesForLayout,
+        targetKey: null,
+        targetTimelinePosition: timelinePosition,
+    }), [
         calculateOutlineTargetsForCurrentState,
-        hoveredTimelineNodePathKey,
         outlineRuntimeValuesByStore,
         selectableOutlinesForLayout,
         timelinePosition,
     ]);
     (0, react_1.useLayoutEffect)(() => {
         updateOutlinesRef.current();
-    }, [outlineTargets, scale, translationX, translationY]);
+    }, [scale, translationX, translationY]);
     return (jsx_runtime_1.jsx(SelectedOutlineRenderer_1.SelectedOutlineRenderer, { compositionHeight: compositionHeight, compositionWidth: compositionWidth, dragging: draggingOutline, getLatestOutlineTargetByKey: getLatestOutlineTargetByKey, outlineTargets: outlineTargets, onDraggingChange: onDraggingChange, onContextMenuOpenChange: onContextMenuOpenChange, onSelect: onSelect, scale: scale, sequences: sequences, updateOutlinesRef: updateOutlinesRef }));
 };
 const ActiveSelectedOutlineOverlay = react_1.default.memo(ActiveSelectedOutlineOverlayUnmemoized);
@@ -589,7 +582,7 @@ const SelectedOutlineOverlayUnmemoized = ({ canvasHovered, compositionHeight, co
             !editorShowOutlines) {
             return [];
         }
-        return (0, canvas_1.getCanvasSelectableOutlines)({
+        return (0, selected_outline_measurement_1.getSequencesWithSelectableOutlines)({
             sequences,
             overrideIdsToNodePaths: overrideIdToNodePathMappings,
             compositions,
@@ -638,13 +631,11 @@ const SelectedOutlineOverlayUnmemoized = ({ canvasHovered, compositionHeight, co
         selectedTransformOriginInfo,
         sequenceKeysContainingSelection,
     ]);
-    const calculateOutlineTargetsRef = (0, react_1.useRef)(calculateOutlineTargetsForCurrentState);
     const getSelectableOutlinesRef = (0, react_1.useRef)(getSelectableOutlines);
     const selectableOutlinesCacheRef = (0, react_1.useRef)(null);
     (0, react_1.useLayoutEffect)(() => {
-        calculateOutlineTargetsRef.current = calculateOutlineTargetsForCurrentState;
         getSelectableOutlinesRef.current = getSelectableOutlines;
-    }, [calculateOutlineTargetsForCurrentState, getSelectableOutlines]);
+    }, [getSelectableOutlines]);
     const getSelectableOutlinesAtFrame = (0, react_1.useCallback)((timelinePosition) => {
         const currentGetSelectableOutlines = getSelectableOutlinesRef.current;
         const cached = selectableOutlinesCacheRef.current;
@@ -662,7 +653,7 @@ const SelectedOutlineOverlayUnmemoized = ({ canvasHovered, compositionHeight, co
     }, []);
     const getLatestOutlineTargetByKey = (0, react_1.useCallback)((key) => {
         const timelinePosition = getCurrentFrame();
-        const target = calculateOutlineTargetsRef.current({
+        const target = calculateOutlineTargetsForCurrentState({
             mode: 'controls',
             runtimeValuesByStore: new Map(),
             selectableOutlines: getSelectableOutlinesAtFrame(timelinePosition),
@@ -670,7 +661,11 @@ const SelectedOutlineOverlayUnmemoized = ({ canvasHovered, compositionHeight, co
             targetTimelinePosition: timelinePosition,
         })[0];
         return target;
-    }, [getCurrentFrame, getSelectableOutlinesAtFrame]);
+    }, [
+        calculateOutlineTargetsForCurrentState,
+        getCurrentFrame,
+        getSelectableOutlinesAtFrame,
+    ]);
     const getCurrentSelectableOutlines = (0, react_1.useCallback)(() => getSelectableOutlinesAtFrame(getCurrentFrame()), [getCurrentFrame, getSelectableOutlinesAtFrame]);
     const onDraggingChange = (0, react_1.useCallback)((dragging) => {
         setDraggingOutline(dragging);

package/dist/components/SelectedOutlinePolygon.d.ts

@@ -23,4 +23,5 @@ export declare const SelectedOutlinePolygon: React.NamedExoticComponent<{
     readonly onDoubleClickTarget: (target: SelectedOutlineTarget, button: number, sequenceWasDragged: boolean) => boolean;
     readonly scale: number;
     readonly showSelectedOutline: boolean;
+    readonly translateWithCommandKey: boolean;
 }>;

package/dist/components/SelectedOutlinePolygon.js

@@ -41,6 +41,7 @@ const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
 const drag_aware_double_click_1 = require("../helpers/drag-aware-double-click");
 const interactivity_enabled_1 = require("../helpers/interactivity-enabled");
+const is_mac_1 = require("../helpers/is-mac");
 const pointer_session_1 = require("../helpers/pointer-session");
 const editor_guides_1 = require("../state/editor-guides");
 const editor_snapping_1 = require("../state/editor-snapping");
@@ -57,7 +58,7 @@ const imperative_state_1 = require("./Timeline/imperative-state");
 const save_sequence_prop_1 = require("./Timeline/save-sequence-prop");
 const should_clear_selection_on_pointer_down_1 = require("./Timeline/should-clear-selection-on-pointer-down");
 exports.SELECTED_OUTLINE_KEY_ATTR = 'data-remotion-studio-selected-outline-key';
-const SelectedOutlinePolygonUnmemoized = ({ compositionHeight, compositionWidth, containsSelection, directlySelected, dragging, getAllDragOutlines, getAllDragTargets, getLayoutTarget, getTarget, hasTarget, hovered, outline, onDraggingChange, onHoverChange, onSnapPointsChange, onSelect, onDoubleClickTarget, scale, showSelectedOutline, }) => {
+const SelectedOutlinePolygonUnmemoized = ({ compositionHeight, compositionWidth, containsSelection, directlySelected, dragging, getAllDragOutlines, getAllDragTargets, getLayoutTarget, getTarget, hasTarget, hovered, outline, onDraggingChange, onHoverChange, onSnapPointsChange, onSelect, onDoubleClickTarget, scale, showSelectedOutline, translateWithCommandKey, }) => {
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const dragAwareDoubleClick = (0, react_1.useMemo)(() => (0, drag_aware_double_click_1.createDragAwareDoubleClickTracker)(), []);
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
@@ -95,7 +96,12 @@ const SelectedOutlinePolygonUnmemoized = ({ compositionHeight, compositionWidth,
         const { drag, selected } = target;
         event.preventDefault();
         event.stopPropagation();
-        const interaction = (0, selected_outline_measurement_1.getOutlineSelectionInteraction)(event);
+        const temporaryTranslate = translateWithCommandKey &&
+            (selected || containsSelection) &&
+            (is_mac_1.isMac ? event.metaKey : event.ctrlKey);
+        const interaction = temporaryTranslate
+            ? { shiftKey: false, toggleKey: false }
+            : (0, selected_outline_measurement_1.getOutlineSelectionInteraction)(event);
         const shouldUpdateSelection = !selected || interaction.shiftKey || interaction.toggleKey;
         const ownerSvg = (_a = polygonRef.current) === null || _a === void 0 ? void 0 : _a.ownerSVGElement;
         let pointerInsideSelectedOutline = false;
@@ -159,7 +165,7 @@ const SelectedOutlinePolygonUnmemoized = ({ compositionHeight, compositionWidth,
         let currentPointerY = startPointerY;
         let axisLocked = false;
         let dragStarted = false;
-        let snappingDisabled = event.metaKey || event.ctrlKey;
+        let snappingDisabled = !temporaryTranslate && (event.metaKey || event.ctrlKey);
         let snapTargets = null;
         const updateDragOverrides = () => {
             const screenDeltaX = currentPointerX - startPointerX;
@@ -241,7 +247,8 @@ const SelectedOutlinePolygonUnmemoized = ({ compositionHeight, compositionWidth,
             currentPointerX = moveEvent.clientX;
             currentPointerY = moveEvent.clientY;
             axisLocked = moveEvent.shiftKey;
-            snappingDisabled = moveEvent.metaKey || moveEvent.ctrlKey;
+            snappingDisabled =
+                !temporaryTranslate && (moveEvent.metaKey || moveEvent.ctrlKey);
             updateDragOverrides();
         };
         const onKeyChange = (keyEvent) => {
@@ -336,6 +343,7 @@ const SelectedOutlinePolygonUnmemoized = ({ compositionHeight, compositionWidth,
         scale,
         setPropStatuses,
         setDragOverrides,
+        translateWithCommandKey,
     ]);
     const onDoubleClick = react_1.default.useCallback((event) => {
         const target = getTarget();

package/dist/components/SelectedOutlineRenderer.js

@@ -35,11 +35,12 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SelectedOutlineRenderer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const canvas_1 = require("@remotion/canvas");
 const react_1 = __importStar(require("react"));
 const timeline_node_path_key_1 = require("../helpers/timeline-node-path-key");
 const timeline_sequence_hover_1 = require("../state/timeline-sequence-hover");
 const ContextMenu_1 = require("./ContextMenu");
+const selected_outline_measurement_1 = require("./selected-outline-measurement");
+const selected_outline_order_1 = require("./selected-outline-order");
 const SelectedOutlineEditingHandles_1 = require("./SelectedOutlineEditingHandles");
 const SelectedOutlineElement_1 = require("./SelectedOutlineElement");
 const SelectedOutlinePolygon_1 = require("./SelectedOutlinePolygon");
@@ -54,9 +55,14 @@ const outlineContainer = {
 };
 const SelectedOutlineRendererUnmemoized = ({ compositionHeight, compositionWidth, dragging, getLatestOutlineTargetByKey, outlineTargets, onDraggingChange, onContextMenuOpenChange, onSelect, scale, sequences, updateOutlinesRef, }) => {
     var _a;
-    const outlinesController = (0, canvas_1.useCanvasOutlinesController)();
-    const renderState = (0, canvas_1.useCanvasOutlines)(outlinesController);
+    // Targets are derived props and can receive a new identity on every render.
+    // Keep only measured geometry in state to avoid layout-effect update loops.
+    const [outlines, setOutlines] = (0, react_1.useState)([]);
+    const outlinesRef = (0, react_1.useRef)(outlines);
     const overlayRef = (0, react_1.useRef)(null);
+    const resizeObserverRef = (0, react_1.useRef)(null);
+    const resizeObserverAnimationFrameRef = (0, react_1.useRef)(null);
+    const observedOutlineElementsRef = (0, react_1.useRef)(new Set());
     const contextMenuOpenHandlersRef = (0, react_1.useRef)(new Map());
     const registerContextMenuOpen = (0, react_1.useCallback)((key, handler) => {
         if (handler === null) {
@@ -83,9 +89,23 @@ const SelectedOutlineRendererUnmemoized = ({ compositionHeight, compositionWidth
     const hoveredSequence = (0, timeline_sequence_hover_1.useTimelineSequenceHoverState)();
     const setHoveredSequence = (0, timeline_sequence_hover_1.useSetTimelineSequenceHover)();
     const hoveredNodePathKey = (_a = hoveredSequence === null || hoveredSequence === void 0 ? void 0 : hoveredSequence.nodePathKey) !== null && _a !== void 0 ? _a : null;
+    const hoveredTimelineNodePathKey = (hoveredSequence === null || hoveredSequence === void 0 ? void 0 : hoveredSequence.source) === 'timeline' ? hoveredNodePathKey : null;
     const updateOutlines = (0, react_1.useCallback)(() => {
-        outlinesController.update(overlayRef.current, outlineTargets);
-    }, [outlineTargets, outlinesController]);
+        if (overlayRef.current === null || outlineTargets.length === 0) {
+            if (outlinesRef.current.length === 0) {
+                return;
+            }
+            outlinesRef.current = [];
+            setOutlines(outlinesRef.current);
+            return;
+        }
+        const nextOutlines = (0, selected_outline_measurement_1.measureOutlines)(overlayRef.current, outlineTargets, hoveredTimelineNodePathKey);
+        if ((0, selected_outline_measurement_1.outlinesAreEqual)(outlinesRef.current, nextOutlines)) {
+            return;
+        }
+        outlinesRef.current = nextOutlines;
+        setOutlines(nextOutlines);
+    }, [hoveredTimelineNodePathKey, outlineTargets]);
     (0, react_1.useLayoutEffect)(() => {
         updateOutlinesRef.current = updateOutlines;
         updateOutlines();
@@ -96,32 +116,79 @@ const SelectedOutlineRendererUnmemoized = ({ compositionHeight, compositionWidth
         };
     }, [updateOutlines, updateOutlinesRef]);
     (0, react_1.useLayoutEffect)(() => {
-        return () => outlinesController.disconnect();
-    }, [outlinesController]);
+        if (typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        const resizeObserver = new ResizeObserver(() => {
+            if (resizeObserverAnimationFrameRef.current !== null) {
+                return;
+            }
+            resizeObserverAnimationFrameRef.current = requestAnimationFrame(() => {
+                resizeObserverAnimationFrameRef.current = null;
+                updateOutlinesRef.current();
+            });
+        });
+        resizeObserverRef.current = resizeObserver;
+        return () => {
+            if (resizeObserverAnimationFrameRef.current !== null) {
+                cancelAnimationFrame(resizeObserverAnimationFrameRef.current);
+                resizeObserverAnimationFrameRef.current = null;
+            }
+            resizeObserver.disconnect();
+            resizeObserverRef.current = null;
+            observedOutlineElementsRef.current = new Set();
+        };
+    }, [updateOutlinesRef]);
+    (0, react_1.useLayoutEffect)(() => {
+        const resizeObserver = resizeObserverRef.current;
+        if (resizeObserver === null) {
+            return;
+        }
+        const nextObservedElements = new Set();
+        if (overlayRef.current !== null) {
+            nextObservedElements.add(overlayRef.current);
+        }
+        for (const target of outlineTargets) {
+            if (target.ref.current !== null) {
+                nextObservedElements.add(target.ref.current);
+            }
+        }
+        for (const element of observedOutlineElementsRef.current) {
+            if (!nextObservedElements.has(element)) {
+                resizeObserver.unobserve(element);
+            }
+        }
+        for (const element of nextObservedElements) {
+            if (!observedOutlineElementsRef.current.has(element)) {
+                resizeObserver.observe(element);
+            }
+        }
+        observedOutlineElementsRef.current = nextObservedElements;
+    }, [outlineTargets]);
     const targetsByKey = (0, react_1.useMemo)(() => {
-        return new Map(renderState.targets.map((target) => [target.key, target]));
-    }, [renderState.targets]);
+        return new Map(outlineTargets.map((target) => [target.key, target]));
+    }, [outlineTargets]);
     (0, react_1.useEffect)(() => {
         if ((hoveredSequence === null || hoveredSequence === void 0 ? void 0 : hoveredSequence.source) === 'canvas' &&
-            !renderState.targets.some((target) => target.key === hoveredSequence.key)) {
+            !outlineTargets.some((target) => target.key === hoveredSequence.key)) {
             setHoveredSequence((currentHover) => (currentHover === null || currentHover === void 0 ? void 0 : currentHover.source) === 'canvas' ? null : currentHover);
         }
-    }, [hoveredSequence, renderState.targets, setHoveredSequence]);
+    }, [hoveredSequence, outlineTargets, setHoveredSequence]);
     // Reordering a captured SVG target can cancel the active pointer session.
     const outlineRenderingOrderRef = (0, react_1.useRef)([]);
     const outlinesForRendering = (0, react_1.useMemo)(() => {
         if (!dragging || outlineRenderingOrderRef.current.length === 0) {
-            const orderedOutlines = (0, canvas_1.orderCanvasOutlinesForRendering)({
-                outlines: renderState.outlines,
+            const orderedOutlines = (0, selected_outline_order_1.orderOutlinesForRendering)({
+                outlines,
                 sequences,
                 targetsByKey,
             });
             outlineRenderingOrderRef.current = orderedOutlines.map((outline) => outline.key);
             return orderedOutlines;
         }
-        const currentOutlinesByKey = new Map(renderState.outlines.map((outline) => [outline.key, outline]));
+        const currentOutlinesByKey = new Map(outlines.map((outline) => [outline.key, outline]));
         const frozenKeys = new Set(outlineRenderingOrderRef.current);
-        const newOutlines = renderState.outlines.filter((outline) => !frozenKeys.has(outline.key));
+        const newOutlines = outlines.filter((outline) => !frozenKeys.has(outline.key));
         outlineRenderingOrderRef.current = [
             ...outlineRenderingOrderRef.current,
             ...newOutlines.map((outline) => outline.key),
@@ -130,10 +197,10 @@ const SelectedOutlineRendererUnmemoized = ({ compositionHeight, compositionWidth
             const outline = currentOutlinesByKey.get(key);
             return outline === undefined ? [] : [outline];
         });
-    }, [dragging, renderState.outlines, sequences, targetsByKey]);
+    }, [dragging, outlines, sequences, targetsByKey]);
     const outlinesByKey = (0, react_1.useMemo)(() => {
-        return new Map(renderState.outlines.map((outline) => [outline.key, outline]));
-    }, [renderState.outlines]);
+        return new Map(outlines.map((outline) => [outline.key, outline]));
+    }, [outlines]);
     const { outlinesForEditingHandles, outlinesForTransformOrigin, outlinesForUvHandles, } = (0, react_1.useMemo)(() => {
         const editingHandles = [];
         const transformOrigin = [];
@@ -159,12 +226,12 @@ const SelectedOutlineRendererUnmemoized = ({ compositionHeight, compositionWidth
             outlinesForUvHandles: uvHandles,
         };
     }, [hoveredNodePathKey, outlinesForRendering, targetsByKey]);
-    const targetsRef = (0, react_1.useRef)(renderState.targets);
+    const targetsRef = (0, react_1.useRef)(outlineTargets);
     const outlinesByKeyRef = (0, react_1.useRef)(outlinesByKey);
     (0, react_1.useLayoutEffect)(() => {
-        targetsRef.current = renderState.targets;
+        targetsRef.current = outlineTargets;
         outlinesByKeyRef.current = outlinesByKey;
-    }, [outlinesByKey, renderState.targets]);
+    }, [outlineTargets, outlinesByKey]);
     const getAllDragTargets = (0, react_1.useCallback)(() => targetsRef.current.flatMap((target) => {
         var _a;
         var _b;

package/dist/components/SettingsContext.js

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
 const client_id_1 = require("../helpers/client-id");
 const call_api_1 = require("./call-api");
+const UpdateStatusContext_1 = require("./UpdateStatusContext");
 const SettingsContext = (0, react_1.createContext)(null);
 const SettingsProvider = ({ children }) => {
     var _a;
@@ -110,7 +111,7 @@ const SettingsProvider = ({ children }) => {
     const value = (0, react_1.useMemo)(() => {
         return { ...settings, setPublicLicenseKey };
     }, [setPublicLicenseKey, settings]);
-    return (jsx_runtime_1.jsx(SettingsContext.Provider, { value: value, children: children }));
+    return (jsx_runtime_1.jsx(SettingsContext.Provider, { value: value, children: jsx_runtime_1.jsx(UpdateStatusContext_1.UpdateStatusProvider, { children: children }) }));
 };
 exports.SettingsProvider = SettingsProvider;
 const useSettings = () => {

package/dist/components/SettingsModal.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-type SettingsTab = 'apps' | 'rendering' | 'studio' | 'packages' | 'shortcuts' | 'skills' | 'license';
+type SettingsTab = 'apps' | 'rendering' | 'studio' | 'packages' | 'shortcuts' | 'skills' | 'license' | 'updates';
 export declare const SettingsModal: React.FC<{
     readonly initialTab: SettingsTab;
     readonly initialPublicLicenseKey: string | null;

package/dist/components/SettingsModal.js

@@ -4,7 +4,10 @@ exports.SettingsModal = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
+const can_show_updates_1 = require("../helpers/can-show-updates");
+const client_id_1 = require("../helpers/client-id");
 const apps_1 = require("../icons/apps");
+const cloud_download_1 = require("../icons/cloud-download");
 const keyboard_1 = require("../icons/keyboard");
 const license_1 = require("../icons/license");
 const package_1 = require("../icons/package");
@@ -26,6 +29,7 @@ const SettingsModalFooter_1 = require("./SettingsModalFooter");
 const SkillsSettings_1 = require("./SkillsSettings");
 const StudioSettings_1 = require("./StudioSettings");
 const vertical_1 = require("./Tabs/vertical");
+const UpdatesSettings_1 = require("./UpdatesSettings");
 const hiddenPanel = {
     display: 'none',
 };
@@ -58,13 +62,20 @@ const keyboardIcon = {
 const SettingsModal = ({ initialPublicLicenseKey, initialTab }) => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const { setPublicLicenseKey } = (0, SettingsContext_1.useSettings)();
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const isBrowserStudio = (0, browser_studio_operations_1.getBrowserStudioOperations)() !== null;
+    const showUpdates = (0, can_show_updates_1.canShowUpdates)({
+        connectionStatus: previewServerState.type,
+        isBrowserStudio,
+        readOnlyStudio: window.remotion_isReadOnlyStudio,
+    });
     const packageManager = window.remotion_packageManager === 'unknown'
         ? null
         : window.remotion_packageManager;
     const showPackages = (0, browser_studio_operations_1.canInstallPackages)() && (isBrowserStudio || packageManager !== null);
-    const [tab, setTab] = (0, react_1.useState)(initialTab);
-    const [openedTabs, setOpenedTabs] = (0, react_1.useState)([initialTab]);
+    const safeInitialTab = initialTab === 'updates' && !showUpdates ? 'shortcuts' : initialTab;
+    const [tab, setTab] = (0, react_1.useState)(safeInitialTab);
+    const [openedTabs, setOpenedTabs] = (0, react_1.useState)([safeInitialTab]);
     const [packagesFooterContainer, setPackagesFooterContainer] = (0, react_1.useState)(null);
     const dismiss = (0, react_1.useCallback)(() => {
         setSelectedModal(null);
@@ -78,11 +89,16 @@ const SettingsModal = ({ initialPublicLicenseKey, initialTab }) => {
             return [...currentOpenedTabs, newTab];
         });
     }, []);
+    (0, react_1.useLayoutEffect)(() => {
+        if (!showUpdates && tab === 'updates') {
+            selectTab('shortcuts');
+        }
+    }, [selectTab, showUpdates, tab]);
     (0, react_1.useEffect)(() => {
         setPublicLicenseKey(initialPublicLicenseKey);
     }, [initialPublicLicenseKey, setPublicLicenseKey]);
     return (jsx_runtime_1.jsx(DismissableModal_1.DismissableModal, { panelStyle: render_modals_1.outerModalStyle, children: jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                 jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: "Settings", onClose: dismiss }), jsx_runtime_1.jsxs("div", { style: render_modals_1.horizontalLayout, children: [
-                        jsx_runtime_1.jsxs("div", { style: settingsLeftSidebar, children: [isBrowserStudio ? null : (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'rendering', onClick: () => selectTab('rendering'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(video_1.FilmIcon, { color: color, style: render_modals_1.icon }) })), children: "Defaults" })), isBrowserStudio ? null : (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'studio', onClick: () => selectTab('studio'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(remotion_triangle_1.RemotionTriangleIcon, { color: color, style: render_modals_1.icon }) })), children: "Studio" })), jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'shortcuts', onClick: () => selectTab('shortcuts'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(keyboard_1.KeyboardIcon, { color: color, style: keyboardIcon }) })), children: "Shortcuts" }), showPackages ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'packages', onClick: () => selectTab('packages'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(package_1.PackageIcon, { color: color, style: render_modals_1.icon }) })), children: "Packages" })) : null, isBrowserStudio ? null : (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'skills', onClick: () => selectTab('skills'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(skills_1.SkillsIcon, { color: color, style: skillsIcon }) })), children: "Skills" })), isBrowserStudio ? null : (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'apps', onClick: () => selectTab('apps'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(apps_1.AppsIcon, { color: color, style: appsIcon }) })), children: "Apps" })), isBrowserStudio ? null : (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'license', onClick: () => selectTab('license'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(license_1.LicenseIcon, { color: color, style: render_modals_1.icon }) })), children: "License" }))] }), openedTabs.includes('packages') ? (jsx_runtime_1.jsx("div", { style: tab === 'packages' ? render_modals_1.optionsPanel : hiddenPanel, children: jsx_runtime_1.jsx(InstallPackage_1.InstallPackageSettings, { footerContainer: packagesFooterContainer, packageManager: packageManager }) })) : null, openedTabs.includes('apps') ? (jsx_runtime_1.jsx("div", { style: tab === 'apps' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(ConfigureDefaultEditorModal_1.DefaultEditorSettings, {}) })) : null, openedTabs.includes('license') ? (jsx_runtime_1.jsx("div", { style: tab === 'license' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(ConfigureLicenseModal_1.LicenseSettings, {}) })) : null, openedTabs.includes('skills') ? (jsx_runtime_1.jsx("div", { style: tab === 'skills' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(SkillsSettings_1.SkillsSettings, {}) })) : null, openedTabs.includes('shortcuts') ? (jsx_runtime_1.jsx("div", { style: tab === 'shortcuts' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(KeyboardShortcutsSettings_1.KeyboardShortcutsSettings, {}) })) : null, openedTabs.includes('rendering') ? (jsx_runtime_1.jsx("div", { style: tab === 'rendering' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(RenderingSettings_1.RenderingSettings, {}) })) : null, openedTabs.includes('studio') ? (jsx_runtime_1.jsx("div", { style: tab === 'studio' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(StudioSettings_1.StudioSettings, {}) })) : null] }), tab === 'packages' ? (jsx_runtime_1.jsx("div", { ref: setPackagesFooterContainer })) : isBrowserStudio ? null : (jsx_runtime_1.jsx(SettingsModalFooter_1.SettingsModalFooter, { showLicenseFaq: tab === 'license' }))] }) }));
+                        jsx_runtime_1.jsxs("div", { style: settingsLeftSidebar, children: [isBrowserStudio ? null : (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'rendering', onClick: () => selectTab('rendering'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(video_1.FilmIcon, { color: color, style: render_modals_1.icon }) })), children: "Defaults" })), isBrowserStudio ? null : (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'studio', onClick: () => selectTab('studio'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(remotion_triangle_1.RemotionTriangleIcon, { color: color, style: render_modals_1.icon }) })), children: "Studio" })), jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'shortcuts', onClick: () => selectTab('shortcuts'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(keyboard_1.KeyboardIcon, { color: color, style: keyboardIcon }) })), children: "Shortcuts" }), showPackages ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'packages', onClick: () => selectTab('packages'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(package_1.PackageIcon, { color: color, style: render_modals_1.icon }) })), children: "Packages" })) : null, isBrowserStudio ? null : (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'skills', onClick: () => selectTab('skills'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(skills_1.SkillsIcon, { color: color, style: skillsIcon }) })), children: "Skills" })), isBrowserStudio ? null : (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'apps', onClick: () => selectTab('apps'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(apps_1.AppsIcon, { color: color, style: appsIcon }) })), children: "Apps" })), isBrowserStudio ? null : (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'license', onClick: () => selectTab('license'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(license_1.LicenseIcon, { color: color, style: render_modals_1.icon }) })), children: "License" })), showUpdates ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'updates', onClick: () => selectTab('updates'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(cloud_download_1.CloudDownloadIcon, { color: color, style: render_modals_1.icon }) })), children: "Updates" })) : null] }), openedTabs.includes('packages') ? (jsx_runtime_1.jsx("div", { style: tab === 'packages' ? render_modals_1.optionsPanel : hiddenPanel, children: jsx_runtime_1.jsx(InstallPackage_1.InstallPackageSettings, { footerContainer: packagesFooterContainer, packageManager: packageManager }) })) : null, openedTabs.includes('apps') ? (jsx_runtime_1.jsx("div", { style: tab === 'apps' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(ConfigureDefaultEditorModal_1.DefaultEditorSettings, {}) })) : null, openedTabs.includes('license') ? (jsx_runtime_1.jsx("div", { style: tab === 'license' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(ConfigureLicenseModal_1.LicenseSettings, {}) })) : null, openedTabs.includes('skills') ? (jsx_runtime_1.jsx("div", { style: tab === 'skills' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(SkillsSettings_1.SkillsSettings, {}) })) : null, openedTabs.includes('shortcuts') ? (jsx_runtime_1.jsx("div", { style: tab === 'shortcuts' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(KeyboardShortcutsSettings_1.KeyboardShortcutsSettings, {}) })) : null, openedTabs.includes('rendering') ? (jsx_runtime_1.jsx("div", { style: tab === 'rendering' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(RenderingSettings_1.RenderingSettings, {}) })) : null, openedTabs.includes('studio') ? (jsx_runtime_1.jsx("div", { style: tab === 'studio' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(StudioSettings_1.StudioSettings, {}) })) : null, showUpdates && openedTabs.includes('updates') ? (jsx_runtime_1.jsx("div", { style: tab === 'updates' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(UpdatesSettings_1.UpdatesSettings, {}) })) : null] }), tab === 'packages' ? (jsx_runtime_1.jsx("div", { ref: setPackagesFooterContainer })) : isBrowserStudio || tab === 'updates' ? null : (jsx_runtime_1.jsx(SettingsModalFooter_1.SettingsModalFooter, { showLicenseFaq: tab === 'license' }))] }) }));
 };
 exports.SettingsModal = SettingsModal;

package/dist/components/SidebarRenderButton.d.ts

@@ -3,4 +3,5 @@ import type { _InternalTypes } from 'remotion';
 export declare const SidebarRenderButton: React.FC<{
     readonly composition: _InternalTypes['AnyCompMetadata'];
     readonly visible: boolean;
+    readonly readOnlyStudio: boolean;
 }>;

package/dist/components/SidebarRenderButton.js

@@ -9,7 +9,10 @@ const hoverable_1 = require("../helpers/hoverable");
 const render_1 = require("../icons/render");
 const modals_1 = require("../state/modals");
 const InlineAction_1 = require("./InlineAction");
-const SidebarRenderButton = ({ composition, visible }) => {
+const revealStyle = {
+    display: 'flex',
+};
+const SidebarRenderButton = ({ composition, visible, readOnlyStudio }) => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const iconStyle = (0, react_1.useMemo)(() => {
         return {
@@ -79,15 +82,21 @@ const SidebarRenderButton = ({ composition, visible }) => {
             initialMediaCacheSizeInBytes: defaults.mediaCacheSizeInBytes,
             renderDefaults: defaults,
             initialDarkMode: defaults.darkMode,
-            readOnlyStudio: false,
+            readOnlyStudio,
         });
-    }, [composition.defaultProps, composition.id, props, setSelectedModal]);
+    }, [
+        composition.defaultProps,
+        composition.id,
+        props,
+        readOnlyStudio,
+        setSelectedModal,
+    ]);
     const renderAction = (0, react_1.useCallback)((color) => {
         return jsx_runtime_1.jsx(render_1.ThinRenderIcon, { fill: color, svgProps: iconStyle });
     }, [iconStyle]);
-    if (!visible || connectionStatus !== 'connected') {
+    if (!visible || (connectionStatus !== 'connected' && !readOnlyStudio)) {
         return null;
     }
-    return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick, variant: null, style: hoverable_1.NO_HOVER_BACKGROUND_STYLE, className: hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME }));
+    return (jsx_runtime_1.jsx("div", { className: hoverable_1.HOVER_GROUP_REVEAL_CLASS_NAME, style: revealStyle, children: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick, variant: null, style: hoverable_1.NO_HOVER_BACKGROUND_STYLE, className: hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME }) }));
 };
 exports.SidebarRenderButton = SidebarRenderButton;

package/dist/components/Timeline/SequencePropsObserver.js

@@ -7,6 +7,7 @@ const fast_refresh_context_1 = require("../../fast-refresh-context");
 const client_id_1 = require("../../helpers/client-id");
 const sequence_node_path_mutations_1 = require("../../helpers/sequence-node-path-mutations");
 const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
+const sequence_props_subscription_store_1 = require("./sequence-props-subscription-store");
 const SequencePropsObserver = () => {
     const { subscribeToEvent } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const { remapPropStatuses, setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
@@ -37,11 +38,13 @@ const SequencePropsObserver = () => {
         }
         const statusRemappings = [];
         const overrideUpdates = [];
+        const overrideIdsToRefresh = new Set();
         for (const [overrideId, previousNodePath] of Object.entries(overrideIdToNodePathMappingsRef.current)) {
             let { nodePath } = previousNodePath;
             let wasRemapped = false;
             let wasDeleted = false;
             let runtimeNodePathExists = true;
+            let runtimeNodePathNeedsRefresh = false;
             const previousNodePathString = JSON.stringify(previousNodePath.nodePath);
             for (const mutation of mutations) {
                 for (const file of mutation.files) {
@@ -49,29 +52,35 @@ const SequencePropsObserver = () => {
                         continue;
                     }
                     // Prop statuses follow source nodes to their new paths. Override IDs,
-                    // however, follow React's runtime instances. After deleting an unkeyed
-                    // sibling, React reuses the instance already at the destination path.
-                    // Keep that mapping in place and only remove mappings for vacated paths.
-                    const runtimeNodePathIsSource = file.remappings.some((item) => JSON.stringify(item.oldNodePath) === previousNodePathString);
+                    // however, follow React's runtime instances. Structural edits may reuse
+                    // the instance already at a path, so only remove mappings from paths
+                    // which are sources without also being destinations.
+                    const runtimeNodePathIsSource = file.remappings.some((item) => item.oldNodePath !== null &&
+                        JSON.stringify(item.oldNodePath) === previousNodePathString);
                     const runtimeNodePathIsDestination = file.remappings.some((item) => item.newNodePath !== null &&
                         JSON.stringify(item.newNodePath) === previousNodePathString);
-                    const runtimeNodePathWasRestored = file.restoredNodePaths.some((item) => JSON.stringify(item) === previousNodePathString);
+                    const runtimeNodePathWasInserted = file.remappings.some((item) => item.oldNodePath === null &&
+                        item.newNodePath !== null &&
+                        JSON.stringify(item.newNodePath) === previousNodePathString);
+                    const runtimeNodePathWasUpdated = file.remappings.some((item) => item.oldNodePath !== null &&
+                        item.newNodePath !== null &&
+                        JSON.stringify(item.oldNodePath) === previousNodePathString &&
+                        JSON.stringify(item.newNodePath) === previousNodePathString);
                     if (runtimeNodePathIsSource) {
-                        runtimeNodePathExists =
-                            runtimeNodePathIsDestination || runtimeNodePathWasRestored;
+                        runtimeNodePathExists = runtimeNodePathIsDestination;
+                        runtimeNodePathNeedsRefresh =
+                            runtimeNodePathWasInserted || runtimeNodePathWasUpdated;
                     }
-                    else if (runtimeNodePathIsDestination ||
-                        runtimeNodePathWasRestored) {
+                    else if (runtimeNodePathIsDestination) {
                         runtimeNodePathExists = true;
+                        runtimeNodePathNeedsRefresh =
+                            runtimeNodePathWasInserted || runtimeNodePathWasUpdated;
                     }
                     if (wasDeleted) {
-                        const wasRestored = file.restoredNodePaths.some((restoredNodePath) => JSON.stringify(restoredNodePath) === JSON.stringify(nodePath));
-                        if (wasRestored) {
-                            wasDeleted = false;
-                        }
                         continue;
                     }
-                    const remapping = file.remappings.find((item) => JSON.stringify(item.oldNodePath) === JSON.stringify(nodePath));
+                    const remapping = file.remappings.find((item) => item.oldNodePath !== null &&
+                        JSON.stringify(item.oldNodePath) === JSON.stringify(nodePath));
                     if (!remapping) {
                         continue;
                     }
@@ -97,11 +106,17 @@ const SequencePropsObserver = () => {
                 overrideId,
                 nodePath: runtimeNodePathExists ? previousNodePath : null,
             });
+            if (runtimeNodePathExists && runtimeNodePathNeedsRefresh) {
+                overrideIdsToRefresh.add(overrideId);
+            }
         }
         remapPropStatuses(statusRemappings);
         for (const event of overrideUpdates) {
             setOverrideIdToNodePath(event.overrideId, event.nodePath);
         }
+        for (const overrideId of overrideIdsToRefresh) {
+            (0, sequence_props_subscription_store_1.refreshSequencePropsSubscription)(overrideId);
+        }
         for (const event of statusRemappings) {
             if (event.nodePath === null) {
                 continue;

package/dist/components/Timeline/TimelineKeyframeControls.js

@@ -206,6 +206,7 @@ const hasTargetKeyframeAtCurrentFrame = (target) => {
     return (0, get_keyframe_navigation_1.hasKeyframeAtSourceFrame)(target.propStatus.keyframes, target.sourceFrame);
 };
 const getAddChange = (target) => {
+    var _a;
     if (target.propStatus.status === 'computed' ||
         !(0, studio_shared_1.isSchemaFieldKeyframable)({ schema: target.schema, key: target.fieldKey }) ||
         hasTargetKeyframeAtCurrentFrame(target)) {
@@ -213,7 +214,8 @@ const getAddChange = (target) => {
     }
     const value = getCurrentKeyframeValue({
         propStatus: target.propStatus,
-        jsxFrame: target.sourceFrame,
+        jsxFrame: target.sourceFrame +
+            ((_a = target.propStatus.keyframeDisplayOffsetAdjustment) !== null && _a !== void 0 ? _a : 0),
         defaultValue: target.defaultValue,
         dragOverrideValue: target.dragOverrideValue,
     });